/* ===== /assets/site.css — 财神到品牌 全站共享层 ===== */

/* --- reset --- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px;}
body,h1,h2,h3,h4,h5,p,ul,ol,li,figure,blockquote,dl,dd{margin:0;}
ul,ol{padding:0;list-style:none;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}
img,svg{display:block;max-width:100%;}
table{border-collapse:collapse;width:100%;}
input,select,textarea{font:inherit;color:inherit;}

/* --- tokens --- */
:root{
  --red:#C8102E;
  --red-deep:#8C1220;
  --gold:#D9A441;
  --gold-pale:#F2DFB0;
  --ink:#15110F;
  --paper:#F6EFE3;
  --paper-2:#E4D9C6;
  --jade:#2E7C6B;
  --stone:#6A5C50;
  --white:#FFFCF6;

  --serif:'Source Han Serif SC','Noto Serif SC','Songti SC',serif;
  --sans:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --mono:'JetBrains Mono','IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --rail-w:96px;
  --head-h:64px;
  --cut:10px;
  --t:180ms ease-out;
  --gap:16px;
  --shell:1280px;
  --pad-x:clamp(18px,3.5vw,56px);
}

/* --- base --- */
body{
  font-family:var(--sans);
  font-size:16px;
  font-weight:400;
  line-height:1.75;
  color:var(--ink);
  background:var(--paper);
  padding-left:var(--rail-w);
  overflow-x:hidden;
  min-height:100vh;
}
h1,h2,h3,h4,h5{font-family:var(--sans);font-weight:700;line-height:1.25;letter-spacing:-.01em;}
p{max-width:40em;}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:0;}

:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.panel--ink :focus-visible,.panel--focus :focus-visible,.site-footer :focus-visible{outline-color:var(--gold-pale);}

#main-content{display:block;}

/* --- skip link --- */
.skip-link{
  position:fixed;top:10px;left:10px;z-index:999;
  padding:10px 16px;
  background:var(--ink);color:var(--white);
  font-size:14px;font-weight:700;
  transform:translateY(-200%);
  transition:transform var(--t);
}
.skip-link:focus{transform:translateY(0);}

/* ===== HEADER ===== */
.site-header{
  position:fixed;inset:0 auto 0 0;width:var(--rail-w);
  z-index:80;
  background:var(--ink);
  color:var(--paper);
}
.site-header__rail{
  position:relative;
  display:flex;flex-direction:column;
  height:100%;padding:16px 8px 18px;gap:10px;
}

.rail-progress{
  position:absolute;top:0;right:0;width:2px;height:100%;
  background:linear-gradient(180deg,var(--gold),var(--red));
  transform:scaleY(var(--progress,0));
  transform-origin:top center;
  pointer-events:none;
}

/* 字标 */
.brand{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:6px 2px 16px;
  border-bottom:1px solid rgba(217,164,65,.28);
}
.brand__seal{
  display:grid;place-items:center;
  width:38px;height:38px;
  background:var(--red);color:var(--white);
  font-family:var(--serif);font-size:21px;font-weight:900;line-height:1;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}
.brand__name{
  font-family:var(--serif);font-size:16px;font-weight:900;
  letter-spacing:.06em;line-height:1.1;color:var(--white);
}
.brand__sub{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  color:var(--gold);text-align:center;line-height:1.3;
}

/* 抽屉按钮 */
.nav-toggle{
  display:none;align-items:center;gap:8px;
  padding:8px 10px;
  background:rgba(217,164,65,.16);
  color:var(--gold-pale);
  font-size:12px;font-weight:700;
  transition:background-color var(--t),color var(--t);
}
.nav-toggle:hover{background:rgba(217,164,65,.3);color:var(--white);}
.nav-toggle__bars{position:relative;display:block;width:16px;height:12px;}
.nav-toggle__bars::before,
.nav-toggle__bars::after{
  content:"";position:absolute;left:0;width:16px;height:2px;
  background:currentColor;
  transition:transform var(--t),top var(--t),bottom var(--t);
}
.nav-toggle__bars::before{top:1px;}
.nav-toggle__bars::after{bottom:1px;}
.site-header[data-open="true"] .nav-toggle__bars::before{top:5px;transform:rotate(45deg);}
.site-header[data-open="true"] .nav-toggle__bars::after{bottom:5px;transform:rotate(-45deg);}

/* 侧边轨道导航 */
.site-nav{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;}
.site-nav__list{display:flex;flex-direction:column;gap:2px;}
.site-nav__link{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:11px 2px;
  color:var(--paper-2);
  transition:background-color var(--t),color var(--t);
}
.site-nav__idx{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  color:var(--gold);
  transition:color var(--t);
}
.site-nav__label{
  font-size:12px;font-weight:500;letter-spacing:0;
  white-space:nowrap;
}
.site-nav__link:hover{background:rgba(217,164,65,.14);color:var(--white);}
.site-nav__link:hover .site-nav__idx{color:var(--gold-pale);}
.site-nav__link[aria-current="page"]{
  background:rgba(200,16,46,.24);
  color:var(--white);font-weight:700;
}
.site-nav__link[aria-current="page"] .site-nav__idx{color:var(--gold-pale);}
.site-nav__link[aria-current="page"]::before{
  content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;
  background:var(--red);
}
.site-nav__link[aria-current="page"]::after{
  content:"";position:absolute;left:0;top:50%;width:15px;height:1px;
  background:var(--gold);
}

/* 一步直达 */
.header-cta{
  display:block;text-align:center;
  padding:10px 4px;
  background:var(--red);color:var(--white);
  font-size:11.5px;font-weight:700;line-height:1.4;letter-spacing:.02em;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
  transition:background-color var(--t),color var(--t);
}
.header-cta:hover{background:var(--gold);color:var(--ink);}

/* ===== FOOTER ===== */
.site-footer{
  position:relative;
  margin-top:clamp(56px,8vw,104px);
  background:linear-gradient(180deg,var(--ink) 0%,var(--red-deep) 22%,var(--red-deep) 100%);
  color:var(--paper);
  overflow:hidden;
}
.footer-path{position:relative;height:64px;}
.footer-path__line{
  position:absolute;left:-4%;right:-4%;top:50%;height:2px;
  background:repeating-linear-gradient(90deg,rgba(217,164,65,.85) 0 16px,rgba(217,164,65,0) 16px 30px);
  transform:rotate(-1.1deg);
  transform-origin:left center;
}
.footer-path::after{
  content:"";position:absolute;left:calc(4% + 6px);top:calc(50% - 5px);
  width:10px;height:10px;background:var(--gold);
  transform:rotate(45deg);
}
.footer-inner{
  width:100%;max-width:var(--shell);margin:0 auto;
  padding:8px var(--pad-x) 36px;
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.35fr;
  gap:clamp(20px,3vw,48px);
}
.seal{
  display:inline-grid;place-items:center;
  width:42px;height:42px;
  font-family:var(--serif);font-size:24px;font-weight:900;line-height:1;
  background:var(--red);color:var(--white);
}
.seal--gold{background:var(--gold);color:var(--ink);}
.footer-brand__name{
  font-family:var(--serif);font-size:20px;font-weight:900;
  letter-spacing:.06em;color:var(--white);margin-top:14px;
}
.footer-brand__slogan{
  font-size:14px;color:var(--gold-pale);margin-top:6px;line-height:1.7;
}
.footer-col__title{
  font-family:var(--mono);font-size:11.5px;font-weight:700;
  letter-spacing:.14em;color:var(--gold);margin-bottom:14px;
}
.footer-list{display:flex;flex-direction:column;gap:9px;}
.footer-list a{
  font-size:14px;color:var(--paper);
  transition:color var(--t);
}
.footer-list a:hover{color:var(--gold-pale);text-decoration:underline;text-underline-offset:3px;}
.footer-list--plain li{font-size:14px;color:var(--paper-2);line-height:1.7;}
.footer-col--contact{overflow-wrap:anywhere;min-width:0;}
.footer-bottom{
  width:100%;max-width:var(--shell);margin:0 auto;
  padding:18px var(--pad-x) 26px;
  border-top:1px solid rgba(217,164,65,.3);
  display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;
  font-size:12.5px;color:rgba(246,239,227,.8);
}
.footer-bottom__note{color:rgba(246,239,227,.62);max-width:52ch;}

/* ===== 通用布局 ===== */
.page-wrap{
  width:100%;max-width:var(--shell);margin:0 auto;
  padding-inline:var(--pad-x);
}
.section{padding-block:clamp(44px,6.5vw,84px);}
.section__head{
  display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
  margin-bottom:clamp(20px,2.6vw,32px);
}
.section__num{
  font-family:var(--mono);font-size:clamp(30px,4vw,52px);font-weight:700;
  line-height:1;color:var(--red);
}
.section__num::after{
  content:"";display:block;height:3px;margin-top:8px;
  background:linear-gradient(90deg,var(--gold),rgba(217,164,65,0));
}
.section__title{
  font-size:clamp(22px,2.6vw,32px);font-weight:700;
  letter-spacing:-.01em;
}
.section__note{font-size:14px;color:var(--stone);max-width:46ch;}

.lead{font-size:clamp(15px,1.35vw,18px);line-height:1.8;color:var(--stone);max-width:38ch;}

.stack{display:flex;flex-direction:column;gap:var(--gap);}
.cluster{display:flex;flex-wrap:wrap;align-items:center;gap:12px;}

.grid{display:grid;gap:var(--gap);}
.grid--12{grid-template-columns:repeat(12,minmax(0,1fr));}
.span-3{grid-column:span 3;}
.span-4{grid-column:span 4;}
.span-6{grid-column:span 6;}
.span-8{grid-column:span 8;}
.span-12{grid-column:span 12;}

/* ===== 面板 ===== */
.panel{
  position:relative;
  background:var(--white);
  padding:clamp(18px,2.2vw,32px);
  transition:transform var(--t),background-color var(--t);
}
.panel--cut{
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
}
.panel--ink{background:var(--ink);color:var(--paper);}
.panel--ink .panel__title{color:var(--white);}
.panel--ink .lead,.panel--ink .section__note{color:rgba(246,239,227,.72);}
.panel--focus{background:var(--red);color:var(--white);}
.panel--focus .panel__title{color:var(--white);}
.panel--focus .section__num{color:var(--gold-pale);}
.panel--focus .lead,.panel--focus .section__note{color:rgba(255,252,246,.85);}
.panel--lift:hover,
.panel--lift:focus-within{transform:translateY(-2px);background:var(--gold-pale);}
.panel--lift:hover .panel__title,
.panel--lift:focus-within .panel__title{color:var(--red);}
.panel__title{
  font-size:19px;font-weight:700;margin-bottom:10px;
  transition:color var(--t);
}

/* ===== 按钮 ===== */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 20px;
  font-family:var(--sans);font-size:15px;font-weight:700;line-height:1;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
  transition:background-color var(--t),color var(--t),transform var(--t);
}
.btn--primary{background:var(--red);color:var(--white);}
.btn--primary:hover{background:var(--red-deep);transform:translateY(-2px);}
.btn--gold{background:var(--gold);color:var(--ink);}
.btn--gold:hover{background:var(--gold-pale);transform:translateY(-2px);}
.btn--ghost{background:var(--paper-2);color:var(--ink);}
.btn--ghost:hover{background:var(--gold-pale);transform:translateY(-2px);}

/* ===== 面包屑 ===== */
.breadcrumb{padding-top:clamp(22px,3vw,40px);}
.breadcrumb__list{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--stone);}
.breadcrumb__item + .breadcrumb__item::before{content:"/ ";color:var(--gold);}
.breadcrumb__item[aria-current="page"]{color:var(--ink);font-weight:700;}

/* ===== 标签 ===== */
.tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 10px;
  font-size:12px;font-weight:700;line-height:1.6;
  background:var(--gold-pale);color:var(--ink);
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);
}
.tag--red{background:rgba(200,16,46,.13);color:var(--red);}
.tag--gold{background:var(--gold);color:var(--ink);}
.tag--jade{background:rgba(46,124,107,.14);color:var(--jade);}

/* ===== 图文容器（页面阶段放置图片） ===== */
.media{
  position:relative;display:block;width:100%;
  background:var(--paper-2);
  overflow:hidden;
}
.media > img{width:100%;height:100%;object-fit:cover;display:block;}
.media--cut{
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
}
.media--16x9{aspect-ratio:16/9;}
.media--4x3{aspect-ratio:4/3;}
.media--1x1{aspect-ratio:1/1;}
.media--tall{aspect-ratio:3/4;}
.media__frame{
  position:absolute;inset:10px;
  border:1px solid rgba(217,164,65,.55);
  pointer-events:none;
}
.media--ph{
  display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(217,164,65,.24),rgba(200,16,46,.14));
}
.media--ph::after{
  content:attr(data-label);
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  color:var(--stone);text-align:center;padding:0 12px;
}

/* ===== 显现 ===== */
.js [data-reveal]{
  opacity:0;
  transform:translateY(8px);
  transition:opacity 200ms ease-out,transform 200ms ease-out;
}
.js [data-reveal].is-visible{
  opacity:1;
  transform:none;
  transition-delay:calc(var(--d,0) * 40ms);
}

/* ===== 断点 ===== */
@media (max-width:1024px){
  .span-3,.span-4{grid-column:span 6;}
  .span-8{grid-column:span 12;}
  .footer-inner{grid-template-columns:1fr 1fr;}
}
@media (max-width:900px){
  body{padding-left:0;padding-top:var(--head-h);}
  html{scroll-padding-top:84px;}

  .site-header{
    inset:0 0 auto 0;width:auto;height:var(--head-h);
  }
  .site-header__rail{
    flex-direction:row;align-items:center;
    height:100%;padding:0 14px;gap:10px;
  }
  .rail-progress{
    top:auto;bottom:0;left:0;right:0;width:auto;height:2px;
    background:linear-gradient(90deg,var(--gold),var(--red));
    transform:scaleX(var(--progress,0));
    transform-origin:left center;
  }
  .brand{
    flex-direction:row;align-items:center;gap:8px;
    padding:0;border-bottom:0;margin-right:auto;
  }
  .brand__seal{width:30px;height:30px;font-size:17px;}
  .brand__name{font-size:15px;letter-spacing:.04em;}
  .brand__sub{display:none;}

  .nav-toggle{display:inline-flex;order:2;}
  .header-cta{order:3;padding:8px 12px;font-size:12px;white-space:nowrap;}

  .site-nav{
    position:fixed;top:var(--head-h);left:0;right:0;bottom:0;
    background:var(--ink);
    padding:14px 16px 32px;
    overflow-y:auto;
    opacity:0;visibility:hidden;
    transform:translateY(-8px);
    transition:opacity var(--t),transform var(--t),visibility var(--t);
  }
  .site-header[data-open="true"] .site-nav{opacity:1;visibility:visible;transform:none;}
  .site-nav__list{gap:4px;}
  .site-nav__link{
    flex-direction:row;align-items:center;gap:14px;
    padding:16px 14px;
    border-left:3px solid transparent;
  }
  .site-nav__idx{font-size:12px;}
  .site-nav__label{font-size:17px;font-weight:700;}
  .site-nav__link[aria-current="page"]{border-left-color:var(--red);background:rgba(200,16,46,.22);}
  .site-nav__link[aria-current="page"]::before{display:none;}
  .site-nav__link[aria-current="page"]::after{display:none;}
}
@media (max-width:720px){
  .span-3,.span-4,.span-6,.span-8{grid-column:span 12;}
}
@media (max-width:560px){
  .footer-inner{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column;}
}

/* ===== 无障碍动效 ===== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js [data-reveal]{opacity:1;transform:none;}
}