/* ============================================================
   正版神殿 / huan-le-shen-dian.com.cn
   共享外壳样式 — /assets/site.css
   深海墨蓝基底 · 鎏金发丝线 · 玻璃与实色并置
   ============================================================ */

/* ---------- 0. Tokens ---------- */
:root{
  --deep-navy:#061829;
  --navy-mid:#0C2A44;
  --deep-steel:#2A3B4D;
  --ink-black:#02090F;
  --mist:#EEF3F8;
  --silver:#9FB4CC;
  --gold:#D9B26A;
  --copper:#B0764A;
  --cinnabar:#C8452F;
  --spark-teal:#35D0C0;
  --night-violet:#6E5BD8;
  --glass:rgba(238,243,248,.06);
  --glass-strong:rgba(238,243,248,.11);
  --hairline:rgba(217,178,106,.26);
  --copper-line:rgba(176,118,74,.42);
  --rule:rgba(238,243,248,.08);

  --font-display:"Noto Serif SC","Source Han Serif SC","Songti SC",Georgia,"Times New Roman",serif;
  --font-body:"Noto Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --fs-12:12px;
  --fs-14:14px;
  --fs-17:17px;
  --fs-22:22px;
  --fs-32:32px;
  --fs-48:48px;
  --fs-88:88px;
  --fs-160:160px;

  --shell:1280px;
  --gutter:clamp(20px,4vw,56px);
  --header-h:78px;

  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:18px;
  --sp-5:28px; --sp-6:44px; --sp-7:68px; --sp-8:104px;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 1. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure,figcaption,blockquote,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
table{border-collapse:collapse;width:100%}
:focus{outline:none}
:focus-visible{outline:2px solid var(--spark-teal);outline-offset:3px;border-radius:2px}

/* ---------- 2. Base ---------- */
body{
  min-height:100vh;
  font-family:var(--font-body);
  font-size:var(--fs-17);
  line-height:1.9;
  letter-spacing:.01em;
  color:var(--mist);
  background-color:var(--deep-navy);
  background-image:
    radial-gradient(1080px 520px at 84% -8%, rgba(110,91,216,.20), transparent 62%),
    radial-gradient(900px 480px at -6% 106%, rgba(53,208,192,.10), transparent 64%),
    linear-gradient(180deg,#061829 0%,#041322 56%,#02090F 100%);
  background-repeat:no-repeat;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;letter-spacing:.02em;line-height:1.3}
h1{font-size:clamp(32px,5.2vw,88px);line-height:1.14}
h2{font-size:clamp(24px,3.4vw,48px)}
h3{font-size:var(--fs-22)}
h4{font-size:var(--fs-17);font-weight:600}
strong{color:var(--gold);font-weight:600}
small{font-size:var(--fs-12)}

/* ---------- 3. Utilities ---------- */
.container{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.prose{max-width:72ch}
.prose p+p{margin-top:1.05em}
.prose a{color:var(--spark-teal);border-bottom:1px solid rgba(53,208,192,.35);transition:color .2s var(--ease),border-color .2s var(--ease)}
.prose a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:.06em}
.eyebrow{display:inline-block;font-family:var(--font-mono);font-size:var(--fs-12);letter-spacing:.34em;color:var(--gold)}
.side-note{writing-mode:vertical-rl;font-size:var(--fs-12);letter-spacing:.3em;color:var(--silver);white-space:nowrap}
.divider{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--hairline) 24%,var(--copper-line) 50%,transparent)}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 4. Skip link ---------- */
.skip-link{
  position:fixed;left:var(--gutter);top:-140px;z-index:200;
  padding:12px 22px;background:var(--gold);color:var(--ink-black);
  font-size:var(--fs-14);letter-spacing:.12em;
  transition:top .2s var(--ease);
}
.skip-link:focus,.skip-link:focus-visible{top:14px}

/* ---------- 5. Header ---------- */
.site-header{
  position:sticky;top:0;z-index:90;
  background-color:transparent;
  border-bottom:1px solid transparent;
  transition:background-color .28s var(--ease),border-color .28s var(--ease),box-shadow .28s var(--ease);
}
.site-header[data-scrolled]{
  background-color:var(--deep-navy);
  border-bottom-color:var(--hairline);
  box-shadow:0 24px 44px -38px rgba(2,9,15,.96);
}
.site-header__inner{
  position:relative;
  display:flex;align-items:center;
  gap:clamp(12px,1.6vw,28px);
  width:100%;max-width:var(--shell);min-height:var(--header-h);
  margin-inline:auto;padding-inline:var(--gutter);
}
.site-header__brand{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.site-header__meta{display:flex;align-items:center;gap:clamp(10px,1.4vw,20px);flex:0 0 auto}

.brand{display:inline-flex;align-items:center;gap:10px}
.brand__mark{
  position:relative;width:15px;height:15px;flex:0 0 auto;
  border:1px solid var(--gold);
  background:linear-gradient(135deg,rgba(217,178,106,.35),rgba(217,178,106,0) 62%);
  transform:rotate(45deg);
  transition:transform .3s var(--ease);
}
.brand__mark::after{content:"";position:absolute;inset:3px;background:var(--cinnabar)}
.brand:hover .brand__mark{transform:rotate(135deg)}
.brand__name{
  font-family:var(--font-display);font-size:var(--fs-22);font-weight:700;
  letter-spacing:.1em;color:var(--mist);
  transition:color .22s var(--ease);
}
.brand:hover .brand__name{color:var(--gold)}

.batch-tag{
  display:inline-flex;align-items:center;gap:8px;
  padding:4px 10px;border:1px solid var(--copper-line);background:var(--glass);
}
.batch-tag__label{font-size:var(--fs-12);letter-spacing:.28em;color:var(--silver)}
.batch-tag__num{
  font-family:var(--font-mono);font-size:var(--fs-14);font-weight:700;
  letter-spacing:.18em;color:var(--cinnabar);
}

.range-index{
  font-family:var(--font-mono);font-size:var(--fs-12);
  letter-spacing:.22em;color:var(--silver);white-space:nowrap;
}
.range-index::before{
  content:"";display:inline-block;width:6px;height:6px;margin-right:9px;
  background:var(--gold);transform:rotate(45deg) translateY(-1px);
}

.scroll-progress{
  position:absolute;left:0;bottom:-1px;width:100%;height:2px;
  background:linear-gradient(90deg,var(--gold),var(--copper) 46%,var(--spark-teal));
  transform:scaleX(var(--scroll-progress,0));
  transform-origin:0 50%;
  pointer-events:none;
}

/* ---------- 6. Navigation ---------- */
.nav-toggle{
  position:relative;display:none;align-items:center;margin-left:auto;
  padding:11px 16px 11px 40px;
  border:1px solid var(--copper-line);background:var(--glass);color:var(--mist);
  font-size:var(--fs-12);letter-spacing:.24em;
  transition:border-color .22s var(--ease),background-color .22s var(--ease);
}
.nav-toggle:hover{border-color:var(--gold);background:var(--glass-strong)}
.nav-toggle__bar{
  position:absolute;left:14px;width:16px;height:1px;background:var(--gold);
  transition:top .22s var(--ease),transform .22s var(--ease);
}
.nav-toggle__bar:nth-child(1){top:calc(50% - 4px)}
.nav-toggle__bar:nth-child(2){top:calc(50% + 4px)}
.nav-toggle__text{color:var(--silver)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar{top:calc(50% - .5px)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){transform:rotate(-45deg)}

.site-nav{display:flex;flex:1 1 auto;justify-content:center}
.site-nav__list{display:flex;align-items:center;gap:clamp(4px,1.4vw,22px)}
.site-nav__item{position:relative}
.site-nav__link{
  position:relative;display:inline-block;padding:8px 2px;
  font-size:var(--fs-14);letter-spacing:.12em;color:var(--silver);
  transition:color .22s var(--ease);
}
.site-nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .22s var(--ease);
}
.site-nav__link:hover{color:var(--mist)}
.site-nav__link:hover::after{transform:scaleX(1)}
.site-nav__link[aria-current="page"]{color:var(--gold)}
.site-nav__link[aria-current="page"]::after{transform:scaleX(1);background:var(--cinnabar)}

/* ---------- 7. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 22px;border:1px solid var(--copper-line);background:var(--glass);
  color:var(--mist);font-size:var(--fs-14);letter-spacing:.14em;line-height:1.4;
  transition:border-color .22s var(--ease),color .22s var(--ease),background-color .22s var(--ease),transform .22s var(--ease);
}
.btn:hover{border-color:var(--gold);color:var(--gold)}
.btn--ghost{background:transparent}
.btn--primary{
  border-color:transparent;font-weight:600;color:var(--ink-black);
  background:linear-gradient(120deg,var(--gold),var(--copper));
}
.btn--primary:hover{color:var(--ink-black);background:linear-gradient(120deg,#E8C67F,var(--copper))}
@media (hover:hover) and (pointer:fine){
  .btn--ghost:hover{transform:translateY(-4px);background:var(--glass-strong)}
}

/* ---------- 8. Footer ---------- */
.site-footer{
  margin-top:var(--sp-8);
  background:var(--ink-black);
  border-top:1px solid var(--copper-line);
  color:var(--silver);font-size:var(--fs-14);
}
.footer-top{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px;padding-block:34px;border-bottom:1px solid var(--rule);
}
.footer-top__note{
  font-family:var(--font-mono);font-size:var(--fs-12);
  letter-spacing:.2em;color:var(--silver);
}
.footer-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(24px,3vw,56px);padding-block:clamp(48px,6vw,88px);
}
.footer-col{min-width:0}
.footer-col__title{
  font-family:var(--font-display);font-size:var(--fs-14);font-weight:600;
  letter-spacing:.3em;color:var(--gold);
  padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid var(--hairline);
}
.footer-nav{display:flex;flex-direction:column;gap:2px}
.footer-nav a{display:inline-block;padding:5px 0;color:var(--silver);transition:color .2s var(--ease),padding-left .2s var(--ease)}
.footer-nav a:hover{color:var(--spark-teal);padding-left:6px}

.footer-index{display:flex;flex-direction:column}
.footer-index__group{
  display:flex;align-items:baseline;gap:12px;
  padding:9px 0;border-bottom:1px dashed var(--rule);
}
.footer-index__label{min-width:58px;color:var(--mist);letter-spacing:.14em}
.footer-index__range{font-family:var(--font-mono);color:var(--gold);letter-spacing:.14em}

.footer-contact{display:flex;flex-direction:column;gap:12px}
.footer-contact__item{display:flex;flex-direction:column;gap:1px}
.footer-contact__key{font-size:var(--fs-12);letter-spacing:.24em;color:var(--silver)}
.footer-contact__value{color:var(--mist);word-break:break-word}
.footer-note{margin-top:14px;font-size:var(--fs-12);line-height:1.85;color:var(--silver)}

.footer-bottom{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:8px 18px;padding-block:22px;border-top:1px solid var(--rule);
  font-size:var(--fs-12);letter-spacing:.1em;color:var(--silver);text-align:center;
}
.footer-bottom__sep{color:var(--copper);font-size:9px}

/* ---------- 9. Layout system ---------- */
.section{padding-block:clamp(52px,6.4vw,104px)}
.section__head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:18px;margin-bottom:clamp(24px,3vw,48px);
}
.section__index{font-family:var(--font-mono);font-size:var(--fs-14);letter-spacing:.24em;color:var(--gold)}
.section__title{font-size:clamp(24px,3.4vw,48px)}
.section__note{max-width:56ch;font-size:var(--fs-14);line-height:1.9;color:var(--silver)}

.grid{display:grid;gap:clamp(16px,2vw,28px)}
.grid--bento{grid-template-columns:repeat(12,minmax(0,1fr))}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--split{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.grid--split-rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}

.col-3{grid-column:span 3}
.col-4{grid-column:span 4}
.col-5{grid-column:span 5}
.col-6{grid-column:span 6}
.col-7{grid-column:span 7}
.col-8{grid-column:span 8}
.col-9{grid-column:span 9}
.col-12{grid-column:span 12}

/* ---------- 10. Shared components ---------- */
.card{position:relative;padding:clamp(20px,2.4vw,32px)}
.card--glass{
  background:var(--glass);
  border:1px solid rgba(238,243,248,.10);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.card--solid{background:var(--navy-mid);border:1px solid var(--copper-line)}
.card__label{display:block;font-family:var(--font-mono);font-size:var(--fs-12);letter-spacing:.26em;color:var(--gold)}
.card__title{margin-top:10px;font-family:var(--font-display);font-size:var(--fs-22);line-height:1.4}
@media (hover:hover) and (pointer:fine){
  .card--glass{transition:transform .24s var(--ease),background-color .24s var(--ease),border-color .24s var(--ease)}
  .card--glass:hover{transform:translateY(-4px);background:var(--glass-strong);border-color:var(--hairline)}
}

.tag{
  display:inline-flex;align-items:center;gap:6px;padding:3px 10px;
  border:1px solid var(--copper-line);background:var(--glass);
  font-size:var(--fs-12);letter-spacing:.18em;color:var(--silver);
}
.tag--cinnabar{color:var(--cinnabar);border-color:rgba(200,69,47,.55)}
.tag--teal{color:var(--spark-teal);border-color:rgba(53,208,192,.45)}

.figure-frame{
  position:relative;overflow:hidden;aspect-ratio:16/10;
  border:1px solid var(--copper-line);
  background:
    linear-gradient(160deg,rgba(12,42,68,.92),rgba(2,9,15,.96)),
    repeating-linear-gradient(45deg,rgba(217,178,106,.05) 0 12px,transparent 12px 24px);
}
.figure-frame img{width:100%;height:100%;object-fit:cover;filter:saturate(.86) contrast(1.08) brightness(.92)}
.figure-frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(2,9,15,0) 42%,rgba(2,9,15,.74));
}
.figure-frame__caption{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:14px 18px;font-size:var(--fs-12);letter-spacing:.16em;color:var(--silver);
}
.figure-frame--wide{aspect-ratio:21/9}
.figure-frame--square{aspect-ratio:1/1}
.figure-frame--tall{aspect-ratio:3/4}

.table-wrap{overflow-x:auto;border:1px solid var(--copper-line);background:rgba(12,42,68,.62)}
.data-table{min-width:560px;font-size:var(--fs-14)}
.data-table th{
  padding:14px 18px;text-align:left;white-space:nowrap;
  font-family:var(--font-mono);font-size:var(--fs-12);letter-spacing:.2em;
  color:var(--gold);border-bottom:1px solid var(--hairline);
}
.data-table td{padding:14px 18px;color:var(--mist);border-bottom:1px solid var(--rule)}
.data-table tbody tr:nth-child(even){background:rgba(42,59,77,.34)}
.data-table tbody tr:hover{background:rgba(53,208,192,.07)}
.data-table tbody tr:last-child td{border-bottom:0}

.timeline{position:relative;padding-left:30px}
.timeline::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:1px;background:var(--copper-line)}
.timeline__item{position:relative;padding:0 0 28px 10px}
.timeline__item::before{
  content:"";position:absolute;left:-28px;top:9px;width:9px;height:9px;border-radius:50%;
  background:var(--night-violet);box-shadow:0 0 0 3px rgba(110,91,216,.2);
}
.timeline__item:last-child{padding-bottom:0}

.axis-strip{display:flex;flex-wrap:wrap;gap:4px}
.axis-strip__cell{
  padding:5px 9px;border:1px solid var(--rule);
  font-family:var(--font-mono);font-size:var(--fs-12);
  letter-spacing:.1em;color:var(--silver);
}
.axis-strip__cell--active{color:var(--cinnabar);border-color:rgba(200,69,47,.6)}

.breadcrumbs{padding-block:16px;border-bottom:1px solid var(--rule);font-size:var(--fs-12);color:var(--silver)}
.breadcrumbs__list{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.breadcrumbs__item{display:inline-flex;align-items:center;gap:8px}
.breadcrumbs__item::after{content:"/";color:var(--copper)}
.breadcrumbs__item:last-child::after{display:none}
.breadcrumbs a{transition:color .2s var(--ease)}
.breadcrumbs a:hover{color:var(--spark-teal)}

/* ---------- 11. Motion ---------- */
.is-visible{opacity:1;transform:none}
html.has-js [data-reveal]{
  opacity:0;transform:translateY(8px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
html.has-js [data-reveal].is-visible{opacity:1;transform:none}

/* ---------- 12. Responsive ---------- */
@media (max-width:1080px){
  .grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--split,.grid--split-rev{grid-template-columns:1fr}
  .col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9{grid-column:span 6}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:960px){
  :root{--header-h:66px}
  .site-header__meta{display:none}
  .nav-toggle{display:inline-flex}
  .site-nav{
    position:fixed;top:var(--header-h);right:0;bottom:0;z-index:89;
    display:block;width:min(340px,86vw);padding:26px var(--gutter) 120px;
    background:rgba(6,24,41,.98);border-left:1px solid var(--copper-line);
    transform:translateX(102%);transition:transform .3s var(--ease);
    overflow-y:auto;
  }
  .site-nav[data-open]{transform:translateX(0)}
  .site-nav__list{flex-direction:column;align-items:stretch;gap:0}
  .site-nav__link{display:block;padding:16px 4px;font-size:var(--fs-17);border-bottom:1px solid var(--rule)}
  .site-nav__link::after{display:none}
  .site-nav__item:last-child .site-nav__link{border-bottom:0}
}

@media (max-width:680px){
  body{font-size:16px}
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9{grid-column:span 12}
  .footer-grid{grid-template-columns:1fr}
  .footer-top{flex-direction:column;align-items:flex-start}
  .data-table{min-width:480px}
}

/* ---------- 13. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  html.has-js [data-reveal]{opacity:1;transform:none}
  .btn--ghost:hover{transform:none}
  .card--glass:hover{transform:none}
}