/* ============================================================
   NarraTect Advisory · 承器 shared design system (satellites)
   NTA-WEB/02 · REV 2026.07·G
   Dual theme: html.dark remaps paper/mx tokens onto ink scale.
   Hard rules: no rounded corners, no shadows, no emoji,
   no icon libraries, one gradient only (the time-bar).
   ============================================================ */
:root{
  /* Past tier */
  --mo-xuan:#1B1612;
  --ya-ma:#EDE4D3;
  --shi-wen:#8B7E6B;
  /* Present tier */
  --tao-tu:#A0604A;
  --qian-hong:#9B3831;
  /* Future tier */
  --tong-xi:#B8893F;
  --xi-jin:#D9BC7A;
  /* Ink scale · on dark */
  --ink-80:rgba(237,228,211,0.80);
  --ink-60:rgba(237,228,211,0.60);
  --ink-40:rgba(237,228,211,0.40);
  --ink-20:rgba(237,228,211,0.20);
  --ink-12:rgba(237,228,211,0.12);
  --ink-08:rgba(237,228,211,0.08);
  --ink-04:rgba(237,228,211,0.04);
  /* Paper scale · derived */
  --paper-0:#F7F3EA;
  --paper-1:#F1EBDE;
  /* Mo-xuan scale · on paper (derived mirror) */
  --mx-80:rgba(27,22,18,0.80);
  --mx-60:rgba(27,22,18,0.60);
  --mx-45:rgba(27,22,18,0.45);
  --mx-20:rgba(27,22,18,0.20);
  --mx-12:rgba(27,22,18,0.12);
  --mx-08:rgba(27,22,18,0.08);
  --mx-04:rgba(27,22,18,0.04);
  /* Type roles */
  --f-tc:"Noto Serif TC",serif;
  --f-latin:"Source Serif 4",Georgia,serif;
  --f-ital:"EB Garamond",Georgia,serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;
  --ease:cubic-bezier(0.2,0,0.2,1);
}
html.dark{
  --paper-0:var(--mo-xuan);
  --paper-1:var(--mo-xuan);
  --mx-80:var(--ink-80);
  --mx-60:var(--ink-60);
  --mx-45:var(--ink-40);
  --mx-20:var(--ink-20);
  --mx-12:var(--ink-12);
  --mx-08:var(--ink-08);
  --mx-04:var(--ink-04);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--paper-0)}
body{
  background:var(--paper-0);color:var(--mo-xuan);
  font-family:var(--f-tc);
  font-weight:400;line-height:1.85;letter-spacing:0.01em;
  font-feature-settings:"kern","liga","palt";
  hanging-punctuation:first last;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
html.dark body{color:var(--ya-ma)}
body.en{font-family:var(--f-latin);line-height:1.7}
::selection{background:var(--xi-jin);color:var(--mo-xuan)}
a{color:inherit;text-decoration:none}
img,svg,canvas{display:block}
:focus-visible{outline:1px solid var(--qian-hong);outline-offset:4px}
html.dark :focus-visible{outline-color:var(--xi-jin)}
.skip-link{position:absolute;left:-9999px;z-index:200;background:var(--mo-xuan);color:var(--ya-ma);padding:0.7rem 1.2rem;font-family:var(--f-mono);font-size:0.7rem}
.skip-link:focus{left:1rem;top:1rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body:not(.en) .en-only{display:none !important}
body.en .tc-only{display:none !important}
.nw{white-space:nowrap;display:inline-block}
h1,h2{text-wrap:balance}

/* --- Type roles --- */
.mono{font-family:var(--f-mono);font-weight:400;font-size:0.6rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--mx-60)}
.mono b{color:var(--qian-hong);font-weight:500}
html.dark .mono b{color:var(--xi-jin)}
h1,h2,h3,h4{font-weight:400;line-height:1.25;letter-spacing:0.01em}
body:not(.en) :is(h1,h2,h3,h4){font-family:var(--f-tc)}
body.en :is(h1,h2,h3,h4){font-family:var(--f-latin);font-weight:500}
.echo{display:block;font-family:var(--f-ital);font-style:italic;font-weight:400;color:var(--tong-xi)}
html.dark .echo{color:var(--xi-jin)}
body.en .echo{font-family:var(--f-tc);font-style:normal;font-weight:400}

/* --- Signature time-bar (the only gradient) --- */
.time-bar{height:2px;background:linear-gradient(90deg,
  var(--mo-xuan) 0%,
  var(--shi-wen) 18%,
  var(--tao-tu) 42%,
  var(--qian-hong) 56%,
  var(--tong-xi) 76%,
  var(--xi-jin) 100%);}

/* --- Shell --- */
.shell{max-width:72rem;margin:0 auto;padding:0 clamp(1.4rem,5vw,4rem)}
.pad{padding:5rem 0}
@media (max-width:720px){.pad{padding:3.5rem 0}}

/* --- Satellite top bar --- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:60;background:rgba(247,243,234,0.92);backdrop-filter:blur(10px)}
html.dark .topbar{background:rgba(27,22,18,0.88)}
.topbar .bar{display:flex;align-items:center;justify-content:space-between;height:4.2rem;max-width:72rem;margin:0 auto;padding:0 clamp(1.4rem,5vw,4rem)}
.brand{display:flex;align-items:center;gap:0.85rem}
.brand svg{width:24px;height:24px}
.brand svg g[stroke]{stroke:var(--mo-xuan)}
.brand svg g[fill]{fill:var(--mo-xuan)}
html.dark .brand svg g[stroke]{stroke:var(--ya-ma)}
html.dark .brand svg g[fill]{fill:var(--ya-ma)}
.brand .bt{font-family:var(--f-latin);font-weight:500;font-size:1rem;letter-spacing:0.02em}
.brand .bt small{display:block;font-family:var(--f-mono);font-weight:400;font-size:0.5rem;letter-spacing:0.4em;text-transform:uppercase;color:var(--mx-60);margin-top:2px}
.topbar .tools{display:flex;align-items:center;gap:0.9rem}
.topbar .tools a{font-family:var(--f-mono);font-size:0.6rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--mx-60);padding:0.3rem 0}
.topbar .tools a:hover{color:var(--qian-hong)}
html.dark .topbar .tools a:hover{color:var(--xi-jin)}
@media (max-width:760px){.topbar .tools a{display:none}}
.ctl-btn{font-family:var(--f-mono);font-size:0.6rem;letter-spacing:0.22em;border:1px solid var(--mx-12);background:none;color:inherit;padding:0.42rem 0.75rem;cursor:pointer;display:inline-flex;align-items:center;transition:border-color 0.16s var(--ease),color 0.16s var(--ease)}
.ctl-btn:hover{border-color:var(--qian-hong);color:var(--qian-hong)}
html.dark .ctl-btn:hover{border-color:var(--xi-jin);color:var(--xi-jin)}
.ctl-btn svg{width:12px;height:12px}
.ctl-btn svg circle{stroke:currentColor;fill:none}
.ctl-btn svg path{fill:currentColor;stroke:none}
.topbar .tb{position:absolute;left:0;right:0;bottom:0}
main{padding-top:4.2rem}

/* --- Page header --- */
.phead{padding:4.6rem 0 3rem;border-bottom:1px solid var(--mx-08)}
.phead .crumb{font-family:var(--f-mono);font-size:0.6rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--mx-60);display:flex;gap:0.8rem;align-items:center;margin-bottom:2.2rem}
.phead .crumb a{color:var(--qian-hong)}
html.dark .phead .crumb a{color:var(--xi-jin)}
.phead h1{font-size:clamp(2rem,4.4vw,3.2rem);max-width:24ch}
.phead .lede{margin-top:1.6rem;font-size:0.95rem;font-weight:300;color:var(--mx-80);line-height:2;max-width:44rem}

/* --- Section marker --- */
.smark{display:flex;align-items:center;gap:1.2rem;margin-bottom:2.6rem}
.smark .tag{font-family:var(--f-mono);font-size:0.6rem;letter-spacing:0.24em;text-transform:uppercase;color:var(--mx-60);white-space:nowrap}
.smark .tag b{color:var(--qian-hong);font-weight:500}
html.dark .smark .tag b{color:var(--xi-jin)}
.smark::after{content:"";flex:1;height:1px;background:var(--mx-08)}

/* --- Catalog rows --- */
.lrow{display:grid;grid-template-columns:clamp(6rem,9vw,8rem) 1fr auto;gap:clamp(1rem,3vw,2.5rem);align-items:baseline;padding:1.25rem 0.4rem;border-bottom:1px solid var(--mx-08)}
.lrow:first-child{border-top:1px solid var(--mx-12)}
.lrow .lid{font-family:var(--f-mono);font-size:0.6rem;letter-spacing:0.16em;color:var(--qian-hong)}
html.dark .lrow .lid{color:var(--xi-jin)}
.lrow h3,.lrow h4{font-size:0.98rem;font-weight:500}
.lrow h3 span,.lrow h4 span{font-weight:300;color:var(--mx-60);margin-left:0.6rem;font-size:0.86rem}
.lrow .lst{font-family:var(--f-mono);font-size:0.6rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--mx-60);white-space:nowrap}
.lrow .lst.pub{color:var(--qian-hong)}
html.dark .lrow .lst.pub{color:var(--xi-jin)}
a.lrow{transition:background 0.24s var(--ease)}
a.lrow:hover{background:var(--mx-04)}
@media (max-width:700px){.lrow{grid-template-columns:1fr;row-gap:0.3rem}}

/* --- Buttons --- */
.btn2{display:inline-block;font-family:var(--f-mono);font-size:0.62rem;letter-spacing:0.24em;text-transform:uppercase;padding:1rem 2rem;border:1px solid var(--qian-hong);color:var(--qian-hong);cursor:pointer;background:none;transition:background 0.24s var(--ease),color 0.24s var(--ease)}
.btn2:hover{background:var(--qian-hong);color:var(--paper-0)}
html.dark .btn2{border-color:var(--xi-jin);color:var(--xi-jin)}
html.dark .btn2:hover{background:var(--xi-jin);color:var(--mo-xuan)}
.btn-ghost{display:inline-flex;align-items:center;gap:0.9rem;font-family:var(--f-mono);font-size:0.62rem;letter-spacing:0.22em;text-transform:uppercase;color:inherit;border-bottom:1px solid var(--mx-20);padding-bottom:0.5rem}
.btn-ghost:hover{color:var(--qian-hong);border-color:var(--qian-hong)}
html.dark .btn-ghost:hover{color:var(--xi-jin);border-color:var(--xi-jin)}

/* --- Forms (WCAG AA) --- */
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem 2rem;max-width:44rem}
@media (max-width:700px){.fgrid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:0.55rem}
.field.full{grid-column:1/-1}
.field label{font-family:var(--f-mono);font-size:0.62rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--mx-60)}
.field label b{color:var(--qian-hong);font-weight:500}
html.dark .field label b{color:var(--xi-jin)}
.field input,.field select,.field textarea{
  background:none;border:1px solid var(--mx-20);color:inherit;
  padding:0.85rem 1rem;font-family:var(--f-mono);font-size:0.78rem;letter-spacing:0.04em;
  width:100%;
}
.field textarea{min-height:8rem;resize:vertical;line-height:1.8}
.field input::placeholder,.field textarea::placeholder{color:var(--mx-60);opacity:1}
.field input:focus,.field select:focus,.field textarea:focus{outline:1px solid var(--qian-hong);outline-offset:-1px}
html.dark .field input:focus,html.dark .field select:focus,html.dark .field textarea:focus{outline-color:var(--xi-jin)}
.field .hint{font-size:0.72rem;font-weight:300;color:var(--mx-60);line-height:1.8}
.formmsg{font-family:var(--f-mono);font-size:0.66rem;letter-spacing:0.1em;margin-top:1.4rem;min-height:1.5em;color:var(--mx-60)}
.formmsg.ok{color:var(--qian-hong)}
html.dark .formmsg.ok{color:var(--xi-jin)}
.formmsg.err{color:var(--qian-hong)}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;overflow:hidden}

/* --- Gate states --- */
.gated-full{display:none}
body.gate-open .gated-full{display:block}
body.gate-open .gated-hide{display:none}
.gatebox{border:1px solid var(--mx-20);padding:clamp(1.4rem,3vw,2.2rem);margin-top:2.6rem}
.gatebox h2,.gatebox h3{font-size:1.15rem;font-weight:500}
.gatebox p{font-size:0.85rem;font-weight:300;color:var(--mx-60);margin-top:0.6rem;line-height:1.95}
.gate-open-tag{font-family:var(--f-mono);font-size:0.62rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--qian-hong)}
html.dark .gate-open-tag{color:var(--xi-jin)}

/* --- Prose (letters, cases) --- */
.prose{max-width:44rem;font-size:0.98rem;font-weight:300;line-height:2.05;color:var(--mx-80)}
.prose p+p{margin-top:1.4rem}
.prose h2{font-size:1.5rem;font-weight:500;margin:3rem 0 1.2rem}
.prose h3{font-size:1.15rem;font-weight:500;margin:2.2rem 0 0.9rem}
.prose em{font-family:var(--f-ital);font-style:italic}
body:not(.en) .prose em{font-family:var(--f-tc);font-style:normal;color:var(--tao-tu)}
html.dark body:not(.en) .prose em{color:var(--xi-jin)}
.prose blockquote{margin:2rem 0;padding-left:1.5rem;border-left:1px solid var(--qian-hong);font-size:1.1rem;line-height:2}
html.dark .prose blockquote{border-left-color:var(--xi-jin)}
.prose ul{padding-left:1.4rem}
.prose li{margin:0.5rem 0}

/* --- Figures & diagram frames --- */
.figure{border:1px solid var(--mx-12);background:var(--mx-04);margin:2.4rem 0}
.figure .fig-body{padding:clamp(1rem,3vw,2rem)}
.figure svg{width:100%;height:auto}
.figure .fig-cap{border-top:1px solid var(--mx-08);padding:0.8rem clamp(1rem,3vw,2rem);font-family:var(--f-mono);font-size:0.6rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--mx-60)}
.imgslot{position:relative;border:1px solid var(--mx-12);background:var(--mx-04);aspect-ratio:16/9;display:flex;align-items:center;justify-content:center}
.imgslot .is-tag{font-family:var(--f-mono);font-size:0.6rem;letter-spacing:0.26em;text-transform:uppercase;color:var(--mx-60);text-align:center;line-height:2.2;white-space:pre-line}
.diag .dg-ground{stroke:var(--mx-20)}
.diag .dg-line{stroke:var(--mx-45)}
.diag .dg-accent{stroke:var(--qian-hong)}
html.dark .diag .dg-accent{stroke:var(--xi-jin)}
.diag .dg-node{fill:var(--tong-xi)}
.diag .dg-dot{fill:var(--mx-45)}
.diag .dg-lead{fill:var(--qian-hong)}
html.dark .diag .dg-lead{fill:var(--xi-jin)}
.diag text{font-family:var(--f-mono);font-size:10px;letter-spacing:0.14em;fill:var(--mx-60)}

/* --- Footer (simplified, shared) --- */
footer.site{background:var(--mo-xuan);color:var(--ink-60);margin-top:5rem}
footer.site .fwrap{max-width:72rem;margin:0 auto;padding:2.6rem clamp(1.4rem,5vw,4rem) 2.6rem}
footer.site .fbrand{font-family:var(--f-latin);color:var(--ya-ma);font-size:1.05rem;font-weight:500}
footer.site .fbrand span{display:block;font-family:var(--f-tc);font-size:0.76rem;font-weight:300;margin-top:0.5rem;color:var(--ink-60)}
body.en footer.site .fbrand span{font-family:var(--f-latin)}
footer.site .fnav{display:flex;flex-wrap:wrap;gap:1rem 2.2rem;margin-top:1.8rem}
footer.site .fnav a{font-family:var(--f-mono);font-size:0.6rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--ink-80);border-bottom:1px solid var(--ink-12)}
footer.site .fnav a:hover{color:var(--xi-jin);border-bottom-color:var(--xi-jin)}
footer.site .fmeta{margin-top:2rem;font-family:var(--f-mono);font-size:0.6rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--ink-60);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* --- Reveal --- */
.rv{opacity:0;transform:translateY(24px);transition:opacity 0.75s var(--ease),transform 0.75s var(--ease);transition-delay:var(--d,0ms)}
.rv.in{opacity:1;transform:none}

/* --- Reduced motion --- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:0.01ms !important;animation-delay:0ms !important;transition-duration:0.01ms !important;transition-delay:0ms !important}
  .rv{opacity:1;transform:none}
}