*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,p,ul,ol,li,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{max-width:100%;height:auto}
button{font:inherit;color:inherit}
:root{
  --ink:#0D0E11;--stone:#1A1D22;--gold:#C9A24A;--gold-lt:#E7CE92;
  --cinnabar:#B23A2C;--paper:#F5F0E5;--paper-2:#E6DECB;
  --graphite:#5B6068;--rule:#9A9EA6;--glass:rgba(245,240,229,.09);
  --serif:"Noto Serif SC","Source Han Serif SC","Songti SC",SimSun,serif;
  --sans:"Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --mono:"IBM Plex Mono","JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --rail:88px;--gutter:clamp(16px,4vw,40px);--wrap:1180px;
  --ease:cubic-bezier(.2,.7,.3,1);
  --shadow:0 20px 44px -30px rgba(13,14,17,.6);
}
body{
  background:var(--paper);color:var(--stone);
  font-family:var(--sans);font-size:16px;line-height:1.85;
  letter-spacing:.01em;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.35;letter-spacing:.08em;color:inherit}
h1{font-size:clamp(32px,4.6vw,56px);letter-spacing:.12em}
h2{font-size:clamp(22px,2.6vw,34px);letter-spacing:.1em}
h3{font-size:clamp(18px,1.8vw,22px);letter-spacing:.08em}
p{max-width:34em}
a{color:inherit}
.mono{font-family:var(--mono);font-size:13px;letter-spacing:.06em}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- skip link ---------- */
.skip-link{
  position:fixed;top:10px;left:10px;z-index:200;
  padding:10px 18px;background:var(--gold);color:var(--ink);
  font-size:14px;letter-spacing:.06em;text-decoration:none;
  transform:translateY(-160%);transition:transform .16s var(--ease);
}
.skip-link:focus{transform:translateY(0)}

/* ---------- header shell ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  padding-left:var(--rail);
  background:var(--ink);color:var(--paper);
  border-bottom:1px solid rgba(154,158,166,.26);
  box-shadow:0 10px 30px -24px rgba(0,0,0,.9);
}
.index-rail{
  position:fixed;top:0;bottom:0;left:0;width:var(--rail);z-index:70;
  display:flex;flex-direction:column;align-items:center;gap:16px;
  padding:20px 0 18px;
  background:var(--ink);
  border-right:1px solid rgba(154,158,166,.26);
}
.rail-head{
  writing-mode:vertical-rl;font-family:var(--mono);font-size:11px;
  letter-spacing:.4em;color:rgba(245,240,229,.4);
  padding-bottom:10px;border-bottom:1px solid rgba(201,162,74,.4);
}
.rail-list{display:flex;flex-direction:column;align-items:center;gap:14px;flex:1;overflow:hidden}
.rail-btn{
  position:relative;writing-mode:vertical-rl;
  padding:6px 2px;border:0;background:transparent;cursor:pointer;
  font-size:12px;letter-spacing:.18em;line-height:1;
  color:rgba(245,240,229,.45);
  transition:color .16s var(--ease);
}
.rail-btn .rail-num{font-family:var(--mono);color:rgba(201,162,74,.65);margin-bottom:6px}
.rail-btn::after{
  content:"";position:absolute;top:0;bottom:0;left:-11px;width:2px;
  background:var(--gold);transform:scaleY(0);transform-origin:top;
  transition:transform .18s var(--ease);
}
.rail-btn:hover{color:var(--gold-lt)}
.rail-btn[aria-current="true"]{color:var(--gold-lt)}
.rail-btn[aria-current="true"] .rail-num{color:var(--gold)}
.rail-btn[aria-current="true"]::after{transform:scaleY(1)}
.rail-foot{
  writing-mode:vertical-rl;font-family:var(--mono);font-size:11px;
  letter-spacing:.24em;color:rgba(245,240,229,.32);
}
.masthead{max-width:1280px;margin:0 auto;padding:0 var(--gutter)}
.masthead-rule{
  height:16px;
  background:
    repeating-linear-gradient(90deg,var(--rule) 0 1px,transparent 1px 88px) left top/100% 7px no-repeat,
    linear-gradient(var(--rule),var(--rule)) left bottom/100% 1px no-repeat;
  opacity:.42;
  transition:opacity .16s var(--ease);
}
.masthead-bar{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  padding:14px 0 12px;
}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--paper);justify-self:start}
.brand-seal{
  width:36px;height:36px;display:grid;place-items:center;flex:0 0 auto;
  border:1px solid var(--gold);color:var(--gold);
  font-family:var(--serif);font-size:18px;letter-spacing:0;
}
.brand-text{display:flex;flex-direction:column;gap:2px}
.brand-name{font-family:var(--serif);font-size:clamp(17px,1.9vw,21px);letter-spacing:.16em}
.brand-sub{font-family:var(--mono);font-size:10px;letter-spacing:.34em;color:rgba(245,240,229,.45)}
.masthead-section{max-width:none;text-align:center}
.masthead-section .mono{
  font-size:13px;letter-spacing:.28em;color:var(--gold-lt);
}
.masthead-meta{display:flex;align-items:center;gap:10px;justify-self:end}
.pill-lang{
  display:inline-flex;align-items:center;padding:4px 10px;
  border:1px solid rgba(201,162,74,.5);color:var(--gold-lt);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
}
.stamp{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:rgba(245,240,229,.38)}
.nav-toggle{
  display:none;flex-direction:column;justify-content:center;gap:4px;
  width:40px;height:36px;padding:0 8px;cursor:pointer;
  background:transparent;border:1px solid rgba(201,162,74,.45);
  transition:border-color .16s var(--ease),transform .16s var(--ease);
}
.nav-toggle-bar{display:block;height:1px;background:var(--gold-lt)}
.nav-toggle:hover{border-color:var(--gold);transform:translateY(-2px)}
.nav-band{
  display:flex;justify-content:center;flex-wrap:wrap;
  gap:clamp(8px,2.2vw,34px);
  border-top:1px solid rgba(154,158,166,.22);
}
.nav-band a{
  position:relative;display:block;padding:13px 2px;
  color:#CFCABC;text-decoration:none;font-size:15px;letter-spacing:.07em;
  transition:color .16s var(--ease);
}
.nav-band a::after{
  content:"";position:absolute;left:0;right:0;bottom:7px;height:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .16s var(--ease);
}
.nav-band a:hover{color:var(--gold-lt)}
.nav-band a:hover::after{transform:scaleX(1)}
.nav-band a[aria-current="page"]{color:var(--gold)}
.nav-band a[aria-current="page"]::after{transform:scaleX(1)}
.scroll-meter{
  position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-lt));
  transform:scaleX(0);transform-origin:left;
}
.site-header .masthead-rule{opacity:.42}
.site-header.is-condensed .brand-sub,
.site-header.is-condensed .masthead-rule,
.site-header.is-condensed .stamp{display:none}
.site-header.is-condensed .masthead-bar{padding:9px 0 7px}
.site-header.is-condensed .nav-band a{padding:9px 2px;font-size:14px}
.to-top{
  position:fixed;right:clamp(14px,3vw,28px);bottom:clamp(14px,3vw,28px);z-index:80;
  width:44px;height:44px;display:grid;place-items:center;cursor:pointer;
  background:var(--ink);color:var(--gold);
  border:1px solid rgba(201,162,74,.5);
  font-family:var(--mono);font-size:15px;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .16s var(--ease),transform .16s var(--ease),visibility .16s;
}
.to-top[data-visible]{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--stone);color:var(--gold-lt)}

/* ---------- footer ---------- */
.site-footer{
  background:var(--ink);color:rgba(245,240,229,.75);
  border-top:1px solid rgba(201,162,74,.4);
  padding:clamp(34px,5vw,64px) 0 0;
}
.footer-wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.footer-grid{
  display:grid;grid-template-columns:1.35fr .8fr 1.25fr .95fr;
  gap:clamp(22px,3.4vw,48px);
  padding-bottom:clamp(26px,3.4vw,44px);
}
.footer-col{min-width:0}
.footer-col--brand{border-left:2px solid var(--gold);padding-left:16px}
.footer-brand-name{
  font-family:var(--serif);font-size:22px;letter-spacing:.16em;
  color:var(--paper);margin-bottom:10px;
}
.footer-title{
  font-family:var(--mono);font-size:12px;font-weight:400;
  letter-spacing:.24em;color:var(--gold);
  padding-bottom:10px;margin-bottom:12px;
  border-bottom:1px solid rgba(154,158,166,.26);
}
.footer-list{display:grid;gap:3px;font-size:14px}
.footer-list a{
  display:inline-block;padding:3px 0;text-decoration:none;
  color:rgba(245,240,229,.72);
  transition:color .16s var(--ease),transform .16s var(--ease);
}
.footer-list a:hover{color:var(--gold-lt);transform:translateX(3px)}
.footer-list--plain li{color:rgba(245,240,229,.6);padding:3px 0;font-size:13.5px}
.footer-contact{display:grid;gap:12px;font-size:14px}
.footer-contact li{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 8px}
.contact-label{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  color:rgba(201,162,74,.9);min-width:56px;
}
.contact-value{color:rgba(245,240,229,.82);word-break:break-all;flex:1 1 150px}
.copy-btn{
  padding:2px 9px;cursor:pointer;
  background:transparent;border:1px solid rgba(201,162,74,.42);
  color:var(--gold-lt);font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  transition:background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease);
}
.copy-btn:hover{background:rgba(201,162,74,.16);border-color:var(--gold)}
.copy-btn[data-copy-state="done"]{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.copy-btn[data-copy-state="fail"]{border-color:var(--cinnabar);color:#E8A99E}
.footer-note{
  margin-top:12px;font-size:12.5px;line-height:1.75;
  color:rgba(245,240,229,.5);max-width:32em;
}
.footer-base{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;
  padding:16px 0 22px;
  border-top:1px solid rgba(154,158,166,.22);
  color:rgba(245,240,229,.42);
}
.footer-base .mono{font-size:12px;letter-spacing:.1em}

/* ---------- shared layout & components ---------- */
.container{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.container--narrow{max-width:820px}
.band{padding:clamp(38px,6vw,88px) 0}
.band--paper{background:var(--paper);color:var(--stone)}
.band--dark{background:var(--ink);color:var(--paper)}
.band--stone{background:var(--stone);color:var(--paper)}
.band--paper .footer-title,.band--dark .eyebrow{color:inherit}
.stack{display:flex;flex-direction:column;gap:clamp(14px,2vw,24px)}
.split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3fr);gap:clamp(18px,3.4vw,52px)}
.grid{display:grid;gap:clamp(14px,2.4vw,26px)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.eyebrow{
  display:flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:12px;letter-spacing:.26em;
  color:var(--graphite);
}
.eyebrow::after{content:"";flex:1;height:1px;background:rgba(154,158,166,.5)}
.section-head{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding-bottom:12px;margin-bottom:clamp(16px,2vw,26px);
  border-bottom:1px solid rgba(154,158,166,.5);
}
.band--dark .section-head,.band--stone .section-head{border-bottom-color:rgba(154,158,166,.35)}
.plate-num{
  display:inline-grid;place-items:center;min-width:40px;height:26px;padding:0 9px;
  background:var(--ink);color:var(--gold-lt);
  border:1px solid rgba(201,162,74,.45);
  font-family:var(--mono);font-size:13px;letter-spacing:.08em;
}
.band--dark .plate-num{background:var(--stone);border-color:rgba(201,162,74,.6)}
.dossier{
  position:relative;overflow:hidden;
  background:var(--paper);color:var(--stone);
  border:1px solid rgba(154,158,166,.55);
  padding:clamp(18px,2.4vw,30px);
  box-shadow:var(--shadow);
  transition:transform .16s var(--ease),border-color .16s var(--ease);
}
.dossier::before{
  content:"";position:absolute;top:0;left:0;height:2px;width:38%;
  background:var(--gold);transition:width .18s var(--ease);
}
.dossier:hover,.dossier:focus-within{transform:translateY(-2px);border-color:rgba(201,162,74,.7)}
.dossier:hover::before,.dossier:focus-within::before{width:100%}
.dossier-mark{
  position:absolute;top:12px;right:12px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--graphite);
}
.annot{
  border-left:2px solid var(--gold-lt);
  padding:2px 0 2px 14px;
  font-size:13px;line-height:1.78;color:var(--graphite);max-width:34em;
}
.band--dark .annot,.band--stone .annot{color:rgba(245,240,229,.62)}
.annot li{position:relative;padding-left:14px}
.annot li::before{content:"◆";position:absolute;left:0;top:0;font-size:9px;color:var(--gold);line-height:2.4}
.tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 9px;border:1px solid rgba(154,158,166,.6);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--graphite);
}
.tag--new{color:var(--cinnabar);border-color:rgba(178,58,44,.55)}
.ledger{width:100%;border-collapse:collapse;font-size:14px;background:var(--paper);color:var(--stone)}
.ledger th{
  text-align:left;font-family:var(--mono);font-weight:400;font-size:11.5px;
  letter-spacing:.12em;color:var(--graphite);
  padding:10px 12px;border-bottom:1px solid var(--gold);
}
.ledger td{padding:11px 12px;border-bottom:1px solid rgba(154,158,166,.35);vertical-align:top;line-height:1.7}
.ledger tbody tr{transition:background .16s var(--ease)}
.ledger tbody tr:hover{background:var(--paper-2)}
.ledger .mono{font-size:12.5px}
.crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--graphite);
  padding:14px 0;
}
.crumb li{display:flex;align-items:center;gap:8px}
.crumb li+li::before{content:"/";color:var(--rule)}
.crumb a{text-decoration:none;border-bottom:1px solid transparent;transition:color .16s var(--ease),border-color .16s var(--ease)}
.crumb a:hover{color:var(--cinnabar);border-bottom-color:currentColor}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 22px;border:1px solid var(--gold);
  background:var(--gold);color:var(--ink);
  font-size:15px;letter-spacing:.07em;text-decoration:none;
  transition:transform .16s var(--ease),background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease);
}
.btn:hover{transform:translateY(-2px);background:var(--gold-lt);border-color:var(--gold-lt)}
.btn--gold{background:var(--gold);color:var(--ink)}
.btn--ghost{background:transparent;color:var(--gold-lt);border-color:rgba(201,162,74,.6)}
.btn--ghost:hover{background:rgba(201,162,74,.14);color:var(--gold-lt);border-color:var(--gold)}
.frame-media{
  position:relative;overflow:hidden;display:block;
  background:var(--stone);
  border:1px solid rgba(154,158,166,.4);
  aspect-ratio:16/10;
}
.frame-media img,.frame-media svg{display:block;width:100%;height:100%;object-fit:cover}
.frame-media--wide{aspect-ratio:21/9}
.frame-media--portrait{aspect-ratio:4/5}
.frame-media figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:10px 12px;
  background:linear-gradient(180deg,rgba(13,14,17,0),rgba(13,14,17,.82));
  color:rgba(245,240,229,.78);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;
}

/* ---------- responsive ---------- */
@media (max-width:1023px){
  .site-header{padding-left:0}
  .index-rail{display:none}
  .split{grid-template-columns:minmax(0,1fr)}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .nav-toggle{display:inline-flex}
  .masthead-section{display:none}
  .masthead-bar{grid-template-columns:1fr auto;padding:12px 0 10px}
  .nav-band{
    display:none;flex-direction:column;align-items:stretch;gap:0;
    padding:4px var(--gutter) 12px;
  }
  .nav-band[data-open]{display:flex}
  .nav-band a{padding:12px 4px;font-size:16px;border-bottom:1px solid rgba(154,158,166,.18)}
  .nav-band a::after{display:none}
  .nav-band a[aria-current="page"]{color:var(--gold);padding-left:12px;border-left:2px solid var(--gold)}
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .grid--2,.grid--3{grid-template-columns:minmax(0,1fr)}
  .footer-grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .footer-base{flex-direction:column;gap:6px}
  .brand-seal{width:32px;height:32px;font-size:16px}
  .pill-lang{display:none}
  .ledger{display:block;overflow-x:auto}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
  }
  .dossier:hover{transform:none}
}
