:root{
  --paper:#f4efe4; --paper-2:#ece2d0; --paper-3:#e2d6bf;
  --page-bg:var(--paper);
  --ink:#221c14; --ink-2:#2e2719; --ink-soft:#6c6049; --ink-faint:#9c8f78;
  --gold:#b4632a; --gold-bright:#cf8240; --gold-deep:#8c4a1c;
  --night:#14110c; --night-2:#1d1810; --cream:#efe3cd; --cream-soft:#c6b591;
  --line:rgba(34,28,20,.12); --line-2:rgba(34,28,20,.07); --line-night:rgba(239,227,205,.13);
  --grot:'Schibsted Grotesk',system-ui,sans-serif;
  --serif:'Newsreader',Georgia,serif;
  --disp:'Fraunces','Newsreader',serif;
  --zhf:'Noto Serif SC','Newsreader',serif;
  --ease:cubic-bezier(.22,.61,.21,1);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--serif);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
body.lock{overflow:hidden}
body.mobile-notice-open{overflow:hidden}
::selection{background:rgba(180,99,42,.22)}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
.grain{position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.04;mix-blend-mode:multiply}
.grain svg{width:100%;height:100%}

/* ============ TOP BAR ============ */
.topbar{position:fixed;top:0;left:0;right:0;height:56px;z-index:700;display:flex;align-items:center;justify-content:space-between;
  padding:0 22px;mix-blend-mode:difference;color:#dccdb2}
.topbar .brand{font-family:var(--grot);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.topbar .brand b{color:#e9b877}
.topbar .right{display:flex;align-items:center;gap:16px}
.topbar .now{font-family:var(--grot);font-size:12px;letter-spacing:.02em;opacity:.85;font-weight:500;max-width:30vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbtn{font-family:var(--grot);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:0;white-space:nowrap;color:inherit;cursor:pointer;padding:6px 7px;transition:color .2s}
.tbtn:hover{color:var(--gold)}
.tbtn .lab{max-width:0;overflow:hidden;opacity:0;transition:max-width .26s var(--ease),opacity .2s var(--ease),margin-left .26s var(--ease)}
.tbtn:hover .lab,.tbtn:focus-visible .lab{max-width:130px;opacity:1;margin-left:7px}
.tbtn .tic{display:block;width:19px;height:19px;flex:0 0 auto}
.tprog{position:fixed;top:0;left:0;height:2px;background:var(--gold);width:0;z-index:701;transition:width .1s linear}
@property --topc{syntax:'<color>';inherits:false;initial-value:#f4efe4}
#topfade{position:fixed;top:0;left:0;right:0;height:13vh;z-index:650;pointer-events:none;--topc:#f4efe4;background:linear-gradient(var(--topc) 0%,var(--topc) 24%,transparent 100%);transition:--topc .5s var(--ease)}

/* ---- language control (its menu lives outside blended bar) ---- */
.lang-btn{font-family:var(--grot);font-size:12px;font-weight:600;letter-spacing:.04em;display:flex;align-items:center;gap:7px;
  border:1px solid rgba(220,205,178,.45);border-radius:30px;padding:6px 11px}
.lang-btn .gl-i{font-family:var(--disp);font-weight:500;font-size:13px}
.lang-btn .cv{font-size:9px;opacity:.7}
#langMenu{position:fixed;top:52px;right:18px;z-index:760;width:248px;background:var(--paper);border:1px solid var(--line);
  border-radius:16px;box-shadow:0 22px 50px -18px rgba(34,28,20,.4);padding:9px;opacity:0;transform:translateY(-8px) scale(.98);
  pointer-events:none;transition:.28s var(--ease)}
#langMenu.on{opacity:1;transform:none;pointer-events:auto}
#langMenu .lm-h{font-family:var(--grot);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);padding:7px 11px 9px}
.lm{display:flex;flex-direction:column;align-items:flex-start;width:100%;padding:10px 12px;border-radius:11px;transition:.2s;position:relative}
.lm:hover{background:var(--paper-2)}
.lm b{font-family:var(--grot);font-weight:600;font-size:14px;color:var(--ink)}
.lm span{font-family:var(--serif);font-size:12.5px;color:var(--ink-soft);margin-top:1px}
.lm.on{background:rgba(180,99,42,.1)}
.lm.on:after{content:"✓";position:absolute;right:13px;top:12px;color:var(--gold);font-weight:700}

/* ============ SPINE ============ */
#spine-scrim{position:fixed;top:0;left:0;bottom:0;width:min(360px,48vw);z-index:590;background:linear-gradient(90deg,rgba(12,10,7,.96) 0%,rgba(12,10,7,.92) 72%,rgba(12,10,7,0) 100%);opacity:0;pointer-events:none;transition:opacity .22s var(--ease)}
body.peek-spine #spine-scrim{opacity:1}
.spine{position:fixed;left:24px;top:0;height:100vh;width:64px;z-index:600;display:flex;flex-direction:column;justify-content:center;pointer-events:auto;opacity:.46;transition:opacity .24s var(--ease)}
.spine:hover,body.peek-spine .spine{opacity:.96}
.spine .rail{position:relative;height:64vh;width:2px;margin:0 auto}
.spine .rail .bg{position:absolute;inset:0;background:rgba(239,227,205,.18);border-radius:2px;transition:background .28s var(--ease)}
.spine:hover .rail .bg,body.peek-spine .spine .rail .bg{background:rgba(239,227,205,.3)}
.spine .rail .fill{position:absolute;top:0;left:0;width:100%;height:0;background:linear-gradient(#d49a61,#9d5927);border-radius:2px;transition:height .15s linear}
.spine .node{position:absolute;left:50%;transform:translateY(-50%);cursor:pointer;display:flex;align-items:center;gap:18px;min-height:30px;padding:4px 0}
.spine .node .dot{width:7px;height:7px;border-radius:50%;background:rgba(239,227,205,.08);border:1px solid rgba(239,227,205,.26);transform:translateX(-50%);transition:width .22s var(--ease),height .22s var(--ease),background .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease);position:relative;z-index:2;mix-blend-mode:normal;flex:0 0 auto}
.spine .node .lab{font-family:var(--grot);font-size:12px;font-weight:560;letter-spacing:.01em;color:rgba(239,227,205,.68);white-space:nowrap;opacity:0;transform:translateX(-10px);transition:opacity .22s var(--ease),transform .24s var(--ease),color .18s var(--ease);transition-delay:calc(var(--d,0)*7ms);pointer-events:none;text-shadow:none}
.spine .node .lab b{color:rgba(239,227,205,.86);font-weight:680;margin-right:8px}
.spine:hover .node .dot,body.peek-spine .spine .node .dot{border-color:rgba(239,227,205,.42)}
.spine:hover .node .lab,body.peek-spine .spine .node .lab{opacity:1;transform:none;pointer-events:auto}
.spine .node:hover .lab{color:rgba(239,227,205,.92)}
.spine .node:hover .lab b{color:#e5b276}
.spine .node.seen .dot{background:rgba(212,154,97,.62);border-color:rgba(212,154,97,.9);mix-blend-mode:normal}
.spine .node.active .dot{width:10px;height:10px;background:#d49a61;border-color:#edc58e;box-shadow:0 0 0 7px rgba(212,154,97,.12);mix-blend-mode:normal}
.spine .node.active .lab,.spine .node.active .lab b{color:#e5b276}
body.door-video-active .spine,
body.door-video-active #spine-scrim{
  opacity:0!important;
  pointer-events:none!important;
}

/* ============ HERO ============ */
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:110px 24px 70px;position:relative;
  background:radial-gradient(125% 85% at 50% 12%,#fbf7ee 0%,var(--paper) 58%)}
.hero .eyebrow{font-family:var(--grot);font-weight:600;font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);opacity:0;animation:rise 1s var(--ease) .15s forwards}
.hero h1{font-family:var(--disp);font-weight:300;font-size:clamp(48px,10vw,140px);line-height:.94;letter-spacing:-.025em;margin:24px 0 0;color:var(--ink)}
.hero h1 span{display:block;opacity:0;transform:translateY(38px);animation:rise 1.1s var(--ease) forwards}
.hero h1 em{font-style:italic;font-weight:400;color:var(--gold)}
.hero .byline{margin-top:32px;font-family:var(--grot);font-size:14px;letter-spacing:.04em;color:var(--ink-soft);opacity:0;animation:rise 1s var(--ease) 1.05s forwards}
.hero .byline b{color:var(--ink);font-weight:600}
.hero .lede{max-width:540px;margin:28px auto 0;font-size:clamp(16px,2vw,19px);line-height:1.6;color:var(--ink-soft);font-style:italic;opacity:0;animation:rise 1s var(--ease) 1.3s forwards}
.hero .how{display:flex;gap:30px;flex-wrap:wrap;justify-content:center;margin-top:42px;opacity:0;animation:rise 1s var(--ease) 1.55s forwards}
.hero .how .h{display:flex;flex-direction:column;align-items:center;gap:6px;max-width:160px}
.hero .how .h .n{font-family:var(--disp);font-size:24px;color:var(--gold);font-weight:400}
.hero .how .h .t{font-family:var(--grot);font-size:11.5px;letter-spacing:.02em;color:var(--ink-soft);line-height:1.35}
.scroll-cue{margin-top:50px;font-family:var(--grot);font-size:11px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-faint);opacity:0;animation:rise 1s var(--ease) 1.8s forwards}
.scroll-cue span{display:block;font-size:17px;margin-top:7px;animation:bob 2.4s ease-in-out 2s infinite}
.resume{margin-top:30px;font-family:var(--grot);font-weight:600;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--paper);background:var(--ink);padding:12px 22px;border-radius:30px;opacity:0;animation:rise .9s var(--ease) 1.9s forwards;display:none}
.resume:hover{background:var(--gold)}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ============ DOOR INTRO PREFIX ============ */
.door-intro{
  --door-video-opacity:1;
  --door-media:1;
  --door-wash:0;
  --door-label:1;
  --door-cue:1;
  --door-hero:0;
  --door-details:0;
  --door-hero-scale:1.16;
  --door-hero-y:24px;
  --door-details-y:12px;
  position:relative;
  height:210svh;
  min-height:0;
  overflow:visible;
  background:transparent;
  color:var(--ink);
}
.door-intro-scene{
  position:sticky;
  top:0;
  height:100svh;
  overflow:hidden;
  isolation:isolate;
  background:transparent;
}
.door-intro-video{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:var(--door-video-opacity);
  filter:saturate(.96) contrast(1.02);
  will-change:opacity;
}
.door-intro-grade{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    radial-gradient(64% 56% at 50% 50%,transparent 0%,rgba(244,239,228,.12) 58%,rgba(244,239,228,.48) 100%),
    linear-gradient(180deg,rgba(34,28,20,.04),rgba(34,28,20,.16));
  opacity:var(--door-media);
}
.door-intro-wash{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:var(--page-bg);
  opacity:var(--door-wash);
}
.door-intro-label{
  position:absolute;
  left:50%;
  top:clamp(72px,10vh,108px);
  z-index:5;
  transform:translateX(-50%);
  width:min(560px,82vw);
  text-align:center;
  font-family:var(--grot);
  font-size:11px;
  font-weight:700;
  letter-spacing:.28em;
  line-height:1.7;
  text-transform:uppercase;
  color:rgba(34,28,20,.72);
  text-shadow:0 1px 18px rgba(255,244,225,.7);
  opacity:var(--door-label);
  pointer-events:none;
}
.door-intro-label span{color:var(--gold)}
.door-intro-purpose{
  margin-top:4px;
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.2em;
  color:rgba(34,28,20,.48);
}
.door-intro .hero{
  position:absolute;
  inset:0;
  z-index:4;
  min-height:100svh;
  padding:92px 24px 72px;
  background:transparent!important;
  opacity:var(--door-hero);
  transform:translateY(var(--door-hero-y)) scale(var(--door-hero-scale));
  transform-origin:center center;
  will-change:opacity,transform;
}
.door-intro .hero h1 span{
  opacity:1!important;
  animation:none!important;
}
.door-intro .hero-author,
.door-intro .hero-note,
.door-intro .hero-actions{
  opacity:var(--door-details)!important;
  transform:translateY(var(--door-details-y))!important;
  animation:none!important;
}
.door-intro .hero-actions{pointer-events:auto}
.door-intro .hero .scroll-cue{
  display:none;
}
.door-intro-cue{
  position:absolute;
  left:50%;
  bottom:clamp(26px,5.2vh,52px);
  z-index:5;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  min-height:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  font-family:var(--grot);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.28em;
  text-align:center;
  text-transform:uppercase;
  color:rgba(255,248,236,.64);
  opacity:var(--door-cue);
  pointer-events:none;
  text-shadow:0 1px 18px rgba(0,0,0,.46),0 0 28px rgba(18,14,10,.34);
}
.door-intro-cue:before{
  content:"";
  display:block;
  width:1px;
  height:30px;
  margin-bottom:1px;
  background:linear-gradient(to bottom,rgba(255,248,236,0),rgba(255,248,236,.55));
  opacity:.78;
}
.door-intro-cue-text{
  display:block;
  padding-left:.28em;
}
.door-intro-cue-arrow{
  display:inline-block;
  font-size:12px;
  line-height:1;
  margin-top:-3px;
  letter-spacing:0;
  opacity:.68;
  animation:bob 2.4s ease-in-out infinite;
}
@media(max-width:640px){
  .door-intro-cue{
    bottom:22px;
  }
}

/* ============ CHAPTER / OVERTURE (blended edges for continuity) ============ */
.chapter{position:relative}
.overture{min-height:90svh;display:flex;align-items:center;position:relative;overflow:hidden;color:var(--cream);padding:13vh 8vw;background:var(--deep,#14110c)}
.overture .ov-bg{position:absolute;inset:-14%;z-index:0;will-change:transform,opacity;
  background:radial-gradient(58% 68% at 24% 30%,var(--glow,rgba(180,99,42,.2)),transparent 60%),
             radial-gradient(58% 66% at 84% 78%,var(--glow2,rgba(120,68,28,.2)),transparent 62%),
             radial-gradient(130% 100% at 50% 50%,var(--mid,#241a10),var(--deep,#14110c) 72%)}
.overture:before,.overture:after{content:"";position:absolute;left:0;right:0;height:20vh;z-index:1;pointer-events:none}
.overture:before{top:0;background:linear-gradient(var(--tint,var(--paper)),transparent)}
.overture:after{bottom:0;background:linear-gradient(transparent,var(--tint,var(--paper)))}
.overture .ov-num{position:absolute;right:5vw;top:50%;transform:translateY(-50%);font-family:var(--disp);font-weight:300;
  font-size:clamp(160px,34vw,440px);line-height:.7;color:rgba(245,228,196,.07);z-index:1;letter-spacing:-.04em;pointer-events:none;will-change:transform}
.overture .ov-inner{position:relative;z-index:2;max-width:880px;will-change:transform,opacity;transform:translateX(calc(var(--L,0)*-58vw));opacity:calc(1 - var(--L,0)*1.35)}
.overture .ov-label{font-family:var(--grot);font-weight:600;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-bright);display:flex;align-items:center;gap:14px;opacity:0;transform:translateY(12px);transition:.7s var(--ease) .08s}
.overture .ov-label:before{content:"";width:40px;height:1px;background:var(--gold)}
.overture .ov-inner.in .ov-label{opacity:1;transform:none}
.ov-title-mask{overflow:hidden;margin:20px 0 0;padding-bottom:.07em}
.overture h2{font-family:var(--disp);font-weight:300;font-size:clamp(40px,7.5vw,88px);line-height:1.02;letter-spacing:-.02em;color:#f5ebd6;margin:0;clip-path:inset(0 0 calc((1 - min(var(--e,0)*1.4,1))*100%) 0);transform:translateY(calc((1 - min(var(--e,0)*1.4,1))*.5em));will-change:clip-path,transform}
.overture .ov-essence{font-family:var(--serif);font-style:italic;font-size:clamp(18px,2.6vw,25px);line-height:1.5;color:var(--cream-soft);margin-top:22px;max-width:34ch;opacity:0;transform:translateY(14px);transition:.85s var(--ease) .22s}
.overture .ov-inner.in .ov-essence{opacity:1;transform:none}
.ov-teasers{margin-top:30px;max-width:600px;display:flex;flex-direction:column;gap:1px}
.ov-tz-h{font-family:var(--grot);font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(198,181,145,.5);margin-bottom:10px;opacity:0;transition:opacity .8s var(--ease) .5s}
.overture .ov-inner.in .ov-tz-h{opacity:1}
.ov-tz{display:flex;gap:14px;align-items:baseline;text-align:left;padding:8px 12px;border-radius:9px;transition:background .3s;opacity:0;transform:translateX(-14px);cursor:pointer}
.overture .ov-inner.in .ov-tz{animation:tzin .7s var(--ease) forwards;animation-delay:calc(.55s + var(--d)*.08s)}
@keyframes tzin{to{opacity:1;transform:none}}
.ov-tz:hover{background:rgba(207,130,64,.13)}
.ov-tz .tz-n{font-family:var(--grot);font-size:12px;font-weight:600;color:var(--gold-bright);flex:0 0 auto;letter-spacing:.02em}
.ov-tz .tz-t{font-family:var(--serif);font-size:15.5px;color:var(--cream-soft);line-height:1.38}
.ov-tz:hover .tz-t{color:#f0e6d2}
.overture .ov-meta{font-family:var(--grot);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:rgba(198,181,145,.7);margin-top:30px;display:flex;gap:20px;align-items:center;opacity:0;transition:.8s var(--ease) .82s}
.overture .ov-inner.in .ov-meta{opacity:1}
.overture .ov-meta b{color:var(--gold-bright)}

/* ============ SECTIONS — scroll-scrubbed lead + immersive prose ============ */
.body-wrap{padding:0;background:var(--paper)}
.sec{position:relative}
/* compact lead: title + key line sit right above the body (no void). The eye lingers because the body rises in a beat later, not because of empty space. */
.sec-lead{max-width:720px;margin:0 auto;padding:15vh 24px 3vh;display:flex;flex-direction:column;
  transform:translateY(calc(var(--e,0)*-1vh)) translateX(calc(var(--e,0)*4vw));opacity:calc(1 - var(--e,0)*1.2);will-change:transform,opacity}
.sec-no{font-family:var(--grot);font-size:12.5px;font-weight:600;color:var(--gold);letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px}
.sec-t{font-family:var(--disp);font-weight:400;font-size:clamp(29px,5.4vw,54px);line-height:1.07;letter-spacing:-.02em;color:var(--ink)}
.sec-q{font-family:var(--disp);font-weight:300;font-style:italic;font-size:clamp(20px,3vw,30px);line-height:1.34;color:var(--gold-deep);margin-top:26px;max-width:34ch;position:relative;padding-left:32px;filter:blur(calc(var(--e,0)*4px));will-change:filter}
.sec-q .qm{position:absolute;left:-4px;top:-8px;font-size:2.6em;line-height:1;color:rgba(180,99,42,.3);font-style:normal}
.sec-cue{font-family:var(--grot);font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint);margin-top:40px;opacity:calc((1 - var(--p,0)*2.4)*(1 - var(--e,0)*1.2))}
.sec-prose{max-width:720px;margin:0 auto;padding:0 24px 10vh;opacity:0;transform:translateY(30px);transition:opacity 1.1s var(--ease) .22s,transform 1.1s var(--ease) .22s}
.sec-prose.in{opacity:1;transform:none}
.sec-prose .pp{margin-bottom:1.35em}
.pp .en{display:block;font-family:var(--serif);font-size:clamp(18px,2.05vw,20.5px);line-height:1.74;color:var(--ink-2)}
.pp .zh,.pp .tr{display:none}
body.lang-zh .pp .zh,.pp .tr.on{display:block;font-family:var(--zhf);font-weight:300;font-size:clamp(15.5px,1.8vw,17px);line-height:1.85;color:var(--ink-soft);
  margin-top:.5em;padding-left:15px;border-left:2px solid rgba(180,99,42,.32)}
.pp .en .fnref{font-family:var(--grot);font-weight:600;font-size:.62em;color:var(--gold);cursor:pointer;padding:0 .15em;vertical-align:super;line-height:0;transition:color .2s}
.pp .en .fnref:hover{color:var(--gold-deep)}
.gl{background:linear-gradient(transparent 56%, rgba(207,130,64,.32) 56%);padding:0 1px;border-radius:1px}
/* ============ HIGHLIGHTS ============ */
::highlight(gw-user){background-color:rgba(45,120,120,.26)}
::highlight(gw-note){text-decoration-line:underline;text-decoration-style:dotted;text-decoration-color:rgba(180,99,42,.85);text-underline-offset:3px}
.hl-fab{position:fixed;z-index:900;transform:translateX(-50%);opacity:0;pointer-events:none;display:inline-flex;gap:2px;
  background:var(--ink);border-radius:9px;padding:4px;box-shadow:0 7px 22px rgba(20,16,9,.32);
  transition:opacity .16s var(--ease),transform .16s var(--ease)}
.hl-fab.on{opacity:1;pointer-events:auto}
.hl-fab button{font-family:var(--grot);font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--paper);
  background:transparent;border:0;cursor:pointer;padding:7px 12px;border-radius:6px;display:inline-flex;align-items:center;gap:6px;transition:background .15s}
.hl-fab button:hover{background:rgba(255,255,255,.13)}
.hl-fab svg{width:14px;height:14px;flex:0 0 auto}
/* margin notes (Google-Docs-style) */
.note-rail{position:absolute;top:0;left:0;width:0;height:0;z-index:60}
.note-card{position:absolute;box-sizing:border-box;background:#fcf7ec;border:1px solid rgba(34,28,20,.09);border-radius:13px;
  padding:14px 16px;box-shadow:0 1px 2px rgba(20,16,9,.05),0 10px 26px -10px rgba(20,16,9,.22);
  transition:top .24s var(--ease),box-shadow .24s var(--ease),transform .24s var(--ease);cursor:text}
.note-card:hover{box-shadow:0 1px 2px rgba(20,16,9,.05),0 16px 34px -12px rgba(20,16,9,.28);transform:translateY(-1px)}
.note-card.editing{box-shadow:0 1px 2px rgba(20,16,9,.05),0 18px 38px -12px rgba(20,16,9,.32),0 0 0 1.5px rgba(180,99,42,.35)}
.note-card.center{position:fixed;left:50%;top:42%;transform:translate(-50%,-50%);width:min(440px,90vw);z-index:905;padding:18px 20px}
.note-card.center:hover{transform:translate(-50%,-50%)}
.note-src{display:block;font-family:var(--serif);font-style:italic;font-size:11.5px;line-height:1.45;color:var(--gold-deep);
  padding-left:10px;border-left:2px solid rgba(180,99,42,.38);margin-bottom:11px}
.note-body{font-family:var(--serif);font-size:14px;line-height:1.62;color:var(--ink-2);white-space:pre-wrap;word-break:break-word}
.note-ph{color:var(--ink-faint);font-style:italic}
.note-ed{display:block;width:100%;box-sizing:border-box;border:0;background:transparent;font-family:var(--serif);font-size:14px;line-height:1.62;color:var(--ink-2);resize:none;outline:none;min-height:44px;overflow:hidden}
.note-ed::placeholder{color:var(--ink-faint);font-style:italic}
.note-row{display:flex;justify-content:flex-end;gap:8px;margin-top:11px}
.note-row button{font-family:var(--grot);font-size:11px;font-weight:600;letter-spacing:.04em;border:0;border-radius:7px;padding:6px 14px;cursor:pointer;transition:.15s}
.note-save{background:var(--gold);color:#fff}
.note-save:hover{background:var(--gold-deep)}
.note-del{background:transparent;color:var(--ink-faint)}
.note-del:hover{background:rgba(154,59,42,.1);color:#9a3b2a}
.note-scrim{position:fixed;inset:0;z-index:904;background:rgba(20,16,9,.40);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:.2s}
.note-scrim.on{opacity:1;pointer-events:auto}
/* highlights panel tabs */
.hl-tabs{display:flex;gap:4px;margin-top:20px;padding:4px;background:rgba(239,227,205,.05);border:1px solid var(--line-night);border-radius:11px}
.hl-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;font-family:var(--grot);font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--cream-soft);background:transparent;border:0;cursor:pointer;padding:9px 8px;border-radius:8px;transition:.18s}
.hl-tab:hover{color:var(--cream)}
.hl-tab.on{background:var(--cream);color:var(--night)}
.hl-tab .tab-n{font-family:var(--grot);font-size:10.5px;font-weight:600;color:var(--ink-faint);background:rgba(34,28,20,.08);border-radius:20px;padding:1px 7px}
.hl-tab.on .tab-n{color:var(--gold-deep);background:rgba(140,74,28,.14)}
.hl-tab .t-min{display:none}
@media(max-width:600px){
  .hl-tabs{gap:3px;padding:3px}
  .hl-tab{padding:9px 4px;gap:0;letter-spacing:.01em}
  .hl-tab .t-full,.hl-tab .tab-n{display:none}
  .hl-tab .t-min{display:inline}
}
.hl-item.note .hl-jump{border-left-color:var(--gold-bright)}
#highlights .hl-inner{max-width:760px;margin:0 auto}
.hl-title{font-family:var(--disp);font-weight:300;font-size:clamp(28px,5vw,40px);letter-spacing:-.02em;color:var(--cream)}
.hl-sub{font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.5;color:var(--cream-soft);margin-top:8px;max-width:48ch}
.hl-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:26px}
.hl-count{font-family:var(--grot);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.hl-copy{font-family:var(--grot);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--night);background:var(--cream);border:0;cursor:pointer;border-radius:30px;padding:9px 17px;transition:.25s}
.hl-copy:hover{background:#fff}
.hl-group{margin-top:24px}
.hl-gh{font-family:var(--grot);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-bright);margin-bottom:13px;border-bottom:1px solid var(--line-night);padding-bottom:9px}
.hl-gh span{color:var(--ink-faint);font-weight:500}
.hl-item{display:flex;align-items:stretch;gap:8px;margin-bottom:8px}
.hl-jump{flex:1;display:flex;flex-direction:column;gap:6px;text-align:left;cursor:pointer;
  background:rgba(239,227,205,.045);border:1px solid var(--line-night);border-left:3px solid var(--gold);
  border-radius:11px;padding:13px 16px;transition:.22s}
.hl-jump:hover{background:rgba(239,227,205,.1);border-color:var(--cream-soft);border-left-color:var(--gold)}
.hl-item.user .hl-jump{border-left-color:rgb(45,120,120)}
.hl-item.user .hl-jump:hover{border-left-color:rgb(45,120,120)}
.hl-txt{font-family:var(--serif);font-size:15.5px;line-height:1.55;color:var(--cream)}
.hl-loc{font-family:var(--grot);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.hl-del{flex:0 0 auto;width:40px;border:1px solid var(--line-night);background:transparent;cursor:pointer;color:var(--ink-faint);border-radius:11px;font-size:14px;transition:.2s}
.hl-del:hover{color:#e7b6a0;border-color:rgba(231,182,160,.5);background:rgba(231,182,160,.08)}
.hl-empty{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--ink-faint);padding:8px 2px}
.remove-pop{position:fixed;z-index:900;transform:translateX(-50%);opacity:0;pointer-events:none;
  font-family:var(--grot);font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:#f3e7cf;background:var(--ink);border:0;cursor:pointer;border-radius:30px;padding:8px 15px;
  box-shadow:0 7px 22px rgba(20,16,9,.32);transition:opacity .16s var(--ease),transform .16s var(--ease)}
.remove-pop.on{opacity:1;pointer-events:auto}
.remove-pop:hover{background:#7a2d22}
mark.gl[data-ai],.pp .en{cursor:default}
.first .sec-prose .pp:first-of-type .en:first-letter{font-family:var(--disp);font-weight:400;float:left;font-size:3.9em;line-height:.74;padding:8px 12px 0 0;color:var(--gold-deep)}

/* footnotes */
.fn-list{margin-top:30px;padding-top:20px;border-top:1px solid var(--line)}
.fn-h{font-family:var(--grot);font-weight:600;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:14px}
.fn{display:grid;grid-template-columns:26px 1fr;gap:10px;margin-bottom:13px;border-radius:8px;padding:6px 8px;transition:background .4s}
.fn .fn-n{font-family:var(--grot);font-weight:600;font-size:13px;color:var(--gold);text-align:right}
.fn .fn-t .en{font-family:var(--serif);font-size:15.5px;line-height:1.6;color:var(--ink-soft);display:block}
.fn .fn-t .zh,.fn .fn-t .tr{display:none}
body.lang-zh .fn .fn-t .zh,.fn .fn-t .tr.on{display:block;font-family:var(--zhf);font-weight:300;font-size:14px;line-height:1.75;color:var(--ink-soft);margin-top:5px;padding-left:12px;border-left:2px solid rgba(180,99,42,.28)}
.fn.flash{background:rgba(207,130,64,.16)}

/* skim mode (titles only) */
body.skim .sec-prose,body.skim .sec-q,body.skim .sec-cue{display:none}
body.skim .sec-lead{min-height:0;padding:3.4vh 24px;opacity:1;transform:none}
body.skim .sec-t{transform:none!important;font-size:clamp(20px,2.6vw,28px)}
body.skim .sec-no{opacity:1!important}
body.skim .overture{min-height:42svh}
body.skim .ov-teasers{display:none}

/* footer */
.foot{background:var(--night);color:var(--cream-soft);text-align:center;padding:110px 24px 90px;position:relative;overflow:hidden}
.foot:before{content:"";position:absolute;top:0;left:0;right:0;height:18vh;background:linear-gradient(var(--paper),transparent)}
.foot .fq{font-family:var(--disp);font-weight:300;font-style:italic;font-size:clamp(26px,4.5vw,46px);line-height:1.25;color:#f3e8d2;max-width:760px;margin:0 auto;position:relative}
.foot .fq b{color:var(--gold-bright);font-style:normal;font-weight:400}
.foot .credit{font-family:var(--grot);font-size:12.5px;letter-spacing:.04em;margin-top:46px;color:var(--cream-soft);line-height:1.7}
.foot .credit a{color:#e9dcc3;text-decoration:none;border-bottom:1px solid var(--line-night)}
.foot .totop{margin-top:34px;font-family:var(--grot);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream);border:1px solid var(--line-night);border-radius:30px;padding:11px 22px;transition:.3s}
.foot .totop:hover{border-color:var(--gold);color:var(--gold-bright)}

/* ============ CONTENTS & SEARCH OVERLAYS ============ */
.ov-screen{position:fixed;inset:0;z-index:800;background:rgba(18,14,9,.94);backdrop-filter:blur(16px);opacity:0;pointer-events:none;transition:.5s var(--ease);overflow-y:auto;padding:88px 24px 60px}
.ov-screen.on{opacity:1;pointer-events:auto}
.co-inner{max-width:900px;margin:0 auto}
.co-top{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line-night);padding-bottom:18px;margin-bottom:10px;flex-wrap:wrap;gap:12px}
.co-top h3{font-family:var(--disp);font-weight:300;font-size:30px;color:var(--cream)}
.co-top .util{display:flex;gap:18px;align-items:center}
.co-top .util button{font-family:var(--grot);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cream-soft)}
.util-src{font-family:var(--grot);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cream-soft);text-decoration:none;border:1px solid var(--line-night);border-radius:20px;padding:6px 13px;transition:.3s}
.util-src:hover{color:var(--gold-bright);border-color:var(--gold)}
.co-top .util button:hover{color:var(--gold-bright)}
.co-row{display:grid;grid-template-columns:54px 1fr auto;gap:22px;align-items:center;padding:18px 10px;border-bottom:1px solid var(--line-night);cursor:pointer;transition:.4s var(--ease)}
.co-row:hover{padding-left:20px;background:rgba(180,99,42,.08)}
.co-num{font-family:var(--disp);font-size:26px;font-weight:300;color:var(--gold-bright)}
.co-row.seen .co-num{color:var(--cream-soft)}
.co-main h4{font-family:var(--disp);font-weight:400;font-size:clamp(19px,2.4vw,25px);color:var(--cream);line-height:1.1}
.co-main p{font-family:var(--serif);font-style:italic;font-size:14.5px;color:var(--cream-soft);margin-top:5px;max-width:62ch;line-height:1.45}
.co-meta{font-family:var(--grot);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap}
.co-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold-bright);margin-left:8px;opacity:0}
.co-row.seen .co-dot{opacity:1}
.ov-close{position:fixed;top:16px;right:22px;z-index:810;font-family:var(--grot);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cream-soft);border:1px solid var(--line-night);border-radius:30px;padding:9px 16px;transition:.3s}
.ov-close:hover{color:var(--cream);border-color:var(--cream-soft)}

.mobile-notice{position:fixed;inset:0;z-index:820;display:none;align-items:flex-end;justify-content:center;padding:18px;background:rgba(10,8,5,.34);backdrop-filter:blur(12px);opacity:0;pointer-events:none;transition:opacity .34s var(--ease)}
.mobile-notice.on{display:flex;opacity:1;pointer-events:auto}
.mobile-notice-card{width:min(100%,430px);border:1px solid var(--cin-line);border-radius:18px;background:rgba(240,238,231,.94);color:#292520;box-shadow:0 26px 80px -36px rgba(20,16,10,.55);padding:22px 20px 18px;transform:translateY(18px);transition:transform .44s var(--ease)}
.mobile-notice.on .mobile-notice-card{transform:none}
.mobile-notice-k{font-family:var(--grot);font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--cin-gold-bright);margin-bottom:10px}
.mobile-notice h3{font-family:var(--disp);font-weight:350;font-size:clamp(25px,7vw,32px);line-height:1.05;letter-spacing:0;margin:0;color:inherit}
.mobile-notice p{font-family:var(--serif);font-size:16px;line-height:1.55;color:var(--cin-cream-soft);margin:14px 0 20px}
.mobile-notice button{width:100%;min-height:46px;border:1px solid rgba(41,37,32,.18);border-radius:999px;font-family:var(--grot);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#292520;background:rgba(255,255,255,.38);transition:transform .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease)}
.mobile-notice button:active{transform:translateY(1px)}
.mobile-notice button:focus-visible{outline:2px solid var(--cin-gold-bright);outline-offset:3px}
body:not(.light) .mobile-notice-card{background:rgba(14,11,7,.92);color:var(--cin-cream);box-shadow:0 26px 80px -34px rgba(0,0,0,.78)}
body:not(.light) .mobile-notice button{color:var(--cin-cream);border-color:var(--cin-line);background:rgba(236,224,200,.07)}
body:not(.light) .mobile-notice p{color:var(--cin-cream-soft)}

.se-inner{max-width:760px;margin:0 auto}
.se-field{display:flex;align-items:center;gap:14px;border-bottom:2px solid var(--gold);padding-bottom:14px}
.se-field .mg{font-size:24px;color:var(--gold-bright)}
.se-field input{flex:1;background:none;border:none;outline:none;font-family:var(--disp);font-weight:300;font-size:clamp(24px,4vw,38px);color:var(--cream);caret-color:var(--gold-bright)}
.se-field input::placeholder{color:rgba(198,181,145,.45)}
.se-hint{font-family:var(--grot);font-size:11.5px;letter-spacing:.04em;color:var(--cream-soft);margin-top:14px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.se-results{margin-top:26px;display:flex;flex-direction:column;gap:2px}
.se-res{text-align:left;width:100%;padding:16px 14px;border-radius:12px;border:1px solid transparent;transition:.25s var(--ease);cursor:pointer;display:block}
.se-res:hover{background:rgba(180,99,42,.13);border-color:rgba(207,130,64,.4)}
.se-res .se-where{font-family:var(--grot);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-bright);display:flex;gap:10px;align-items:center}
.se-res .se-where .tag{color:var(--cream-soft);font-weight:500}
.se-res .se-snip{font-family:var(--serif);font-size:16.5px;line-height:1.5;color:var(--cream);margin-top:7px}
.se-res .se-snip.zh,.se-res .se-snip.translation{font-family:var(--zhf)}
.se-res .se-snip mark{background:rgba(207,130,64,.34);color:#fbeed7;border-radius:3px;padding:0 2px}
.se-empty{font-family:var(--serif);font-style:italic;color:var(--cream-soft);text-align:center;padding:50px 0;font-size:18px}

@media(max-width:900px){
  .spine{display:none}
  .topbar{padding:0 14px;gap:8px}
  .topbar .brand{display:none}
  .topbar .now{display:none}
  .overture .ov-num{font-size:46vw;right:-2vw}
  .co-row{grid-template-columns:40px 1fr;gap:14px}
  .co-meta{display:none}
  #langMenu{right:10px;left:10px;width:auto}
}
@media(min-width:761px){.mobile-notice{display:none!important}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important}.sec-lead,.sec-prose,.overture .ov-inner{transition-duration:.25s!important}.sec-t,.sec-q{transform:none!important}}

/* ===== frontier merge — cinematic main experience ===== */
#gl{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;opacity:var(--frontier-opacity,1);transition:opacity .5s var(--ease),filter .5s var(--ease)}
#veil{position:fixed;inset:0;z-index:1;pointer-events:none;background:#0c0a07;opacity:0}
#main{position:relative;z-index:2}
#scrim{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 120% at 50% 45%,transparent 28%,rgba(8,6,4,.54) 100%)}

/* ===== cinematic migration layer ===== */
:root{
  --cin-ink:#0c0a07;
  --page-bg:var(--cin-ink);
  --cin-ink-2:#15110c;
  --cin-cream:#ece0c8;
  --cin-cream-soft:#b3a585;
  --cin-gold:#c98a4e;
  --cin-gold-bright:#e0a868;
  --cin-line:rgba(236,224,200,.14);
  --cin-halo:10,8,5;
}
body.light{
  --page-bg:#f7f7f3;
  --paper:#f7f7f3;
  --paper-2:#eeeeea;
  --paper-3:#e2e3dc;
  --cin-ink:#f7f7f3;
  --cin-ink-2:#eeeeea;
  --cin-cream:#292520;
  --cin-cream-soft:#6c6356;
  --read-ink:#211f1b;
  --read-soft:#575149;
  --cin-gold:#a8612a;
  --cin-gold-bright:#8a4d1c;
  --cin-line:rgba(41,37,32,.14);
  --cin-halo:250,250,247;
}
html,body{background:var(--page-bg);color:var(--cin-cream)}
html{overflow-x:hidden}
body{background:var(--page-bg);color:var(--cin-cream)}
body.light #veil{background:var(--page-bg)}
body.light #scrim{background:radial-gradient(120% 120% at 50% 45%,transparent 28%,rgba(var(--cin-veil),.5) 100%)}
body.light #gl{mix-blend-mode:normal;filter:none}
body.frontier-reading #gl{
  opacity:.42;
  filter:saturate(.52) contrast(.82);
}
body:not(.light).frontier-reading #gl{
  opacity:.48;
  filter:saturate(.72) contrast(.9);
}
::selection{background:rgba(201,138,78,.32);color:var(--cin-cream)}
.grain{opacity:.055;mix-blend-mode:overlay}
#topfade{height:11vh;--topc:#0c0a07;background:linear-gradient(var(--topc) 0%,var(--topc) 18%,transparent 100%)}
.topbar{height:54px;padding:0 26px;color:#d9cdb6}
.topbar .brand{font-size:12px;letter-spacing:.16em}
.topbar .brand b{color:var(--cin-gold-bright);font-style:italic;font-weight:500;text-transform:none}
.topbar .now{font-size:11.5px;letter-spacing:.06em}
.theme-btn{font-family:var(--grot);line-height:1;background:none;border:0;color:inherit;cursor:pointer;opacity:.86;transition:opacity .2s,transform .4s var(--ease)}
.theme-btn{font-size:17px;padding:5px}
.theme-btn:hover{opacity:1;transform:rotate(20deg)}
.tbtn:hover,.lang-btn:hover{color:var(--cin-gold-bright)}
.tprog,.spine .rail .fill{background:var(--cin-gold)}
body.light #spine-scrim{
  background:linear-gradient(90deg,rgba(244,239,228,.99) 0%,rgba(244,239,228,.96) 72%,rgba(244,239,228,0) 100%);
}
body.light .spine .rail .bg{background:rgba(41,37,32,.14)}
body.light .spine:hover .rail .bg,body.light.peek-spine .spine .rail .bg{background:rgba(41,37,32,.22)}
body.light .spine .node .dot{
  background:rgba(41,37,32,.08);
  border-color:rgba(41,37,32,.24);
  box-shadow:0 0 0 1px rgba(245,243,237,.54);
}
body.light .spine:hover .node .dot,
body.light.peek-spine .spine .node .dot{
  border-color:rgba(41,37,32,.34);
}
body.light .spine .node .lab{
  font-size:13px;
  font-weight:600;
  color:rgba(41,37,32,.62);
  text-shadow:none;
}
body.light .spine .node .lab b{
  color:rgba(41,37,32,.78);
  font-weight:700;
}
body.light .spine .node.seen .dot{
  background:rgba(166,94,38,.74);
  border-color:rgba(138,77,28,.78);
}
body.light .spine .node.active .dot{
  background:var(--cin-gold-bright);
  border-color:rgba(244,202,154,.92);
  box-shadow:0 0 0 7px rgba(138,77,28,.1);
}
body.light .spine .node.active .lab,
body.light .spine .node.active .lab b,
body.light .spine .node:hover .lab,
body.light .spine .node:hover .lab b{
  color:#8f4f1c;
}

.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:86px 24px 70px;position:relative;background:transparent;color:var(--cin-cream)}
.hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:20vh;background:linear-gradient(transparent,var(--cin-ink));pointer-events:none}
.hero .eyebrow{font-size:12px;letter-spacing:.4em;color:var(--cin-gold-bright);animation-delay:.35s}
.hero h1{font-family:var(--disp);font-weight:300;font-size:clamp(50px,10vw,150px);line-height:.92;letter-spacing:0;color:var(--cin-cream);margin:30px 0 0;text-shadow:0 0 60px rgba(var(--cin-halo),.92),0 0 22px rgba(var(--cin-halo),.85)}
.hero h1 span{transform:translateY(44px);animation-duration:1.15s}
.hero h1 em{font-style:italic;color:var(--cin-gold-bright);font-weight:300}
.hero-type{font-family:var(--disp);font-weight:300;font-style:italic;font-size:clamp(16px,2.3vw,23px);color:var(--cin-cream-soft);margin-top:34px;min-height:1.4em;text-shadow:0 0 24px rgba(var(--cin-halo),.95)}
.hero-type .cur{display:inline-block;color:var(--cin-gold-bright);font-style:normal;margin-left:.05em;animation:blink 1.05s steps(1) infinite}
.hero-note{font-family:var(--grot);font-weight:500;font-size:12.5px;letter-spacing:.01em;line-height:1.65;color:var(--cin-cream-soft);max-width:56ch;margin:30px auto 0;opacity:0;transform:translateY(8px);animation:rise 1.1s var(--ease) 3.1s forwards}
.hero-note b{color:var(--cin-gold-bright);font-weight:600}
.hero .byline{color:var(--cin-cream-soft)}
.hero .byline b{color:var(--cin-cream)}
.scroll-cue{color:var(--cin-cream-soft)}
.resume{background:var(--cin-cream);color:var(--cin-ink)}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

.chapter{position:relative;background:var(--cin-ink)}
.movement{position:relative;height:300svh;background:var(--cin-ink)}
.overture{position:absolute;top:0;left:0;right:0;height:100svh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:6vh 6vw;overflow:hidden;z-index:2;color:var(--cin-cream);background:var(--deep,var(--cin-ink));pointer-events:auto}
.movement.pin .overture{position:fixed;top:0;left:0;right:0}
.movement.after .overture{position:absolute;top:auto;bottom:0;left:0;right:0}
.overture .ov-bg{position:absolute;inset:-14%;z-index:0;will-change:opacity;background:radial-gradient(58% 68% at 24% 30%,var(--glow,rgba(180,99,42,.2)),transparent 60%),radial-gradient(58% 66% at 84% 78%,var(--glow2,rgba(120,68,28,.2)),transparent 62%),radial-gradient(130% 100% at 50% 50%,var(--mid,#18110b),var(--deep,#0c0a07) 72%)}
.overture:before,.overture:after{height:16vh}
.overture:before{background:linear-gradient(var(--cin-ink),transparent)}
.overture:after{background:linear-gradient(transparent,var(--cin-ink))}
.overture .ov-num{right:2vw;font-size:clamp(160px,34vw,430px);color:rgba(245,228,196,.055);z-index:1}
.overture .ov-pin{position:relative;z-index:2;width:100%;max-width:1180px;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:1;transform:none}
.overture .ov-label{display:block;font-size:12px;letter-spacing:.34em;color:var(--cin-gold-bright);opacity:0;transform:translateY(8px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.overture .ov-label:before{display:none}
.overture.in .ov-label{opacity:calc((1 - var(--ex,0)*1.6)*(1 - var(--em,0)));transform:none}
.ov-stage{position:relative;width:100%;max-width:1180px;height:clamp(260px,44vh,410px);margin:18px auto 0}
.overture .ov-essence{position:absolute;top:50%;left:50%;z-index:3;width:clamp(320px,72vw,860px);margin:0;max-width:none;font-family:var(--disp);font-weight:300;font-style:italic;line-height:1.42;color:var(--cin-cream);text-align:center;font-size:clamp(23px,3.4vw,34px);transform-origin:center center;will-change:transform,opacity,filter;text-shadow:0 0 34px rgba(var(--cin-halo),.92),0 0 14px rgba(var(--cin-halo),.8);transform:translate(-50%,-50%) translateX(calc(var(--cmp,0)*-20vw + var(--ex,0)*-50vw)) scale(calc((1 - var(--cmp,0)*0.38)*(1 - var(--ex,0)*0.16)));filter:blur(calc(var(--ex,0)*9px));opacity:calc((1 - var(--cmp,0)*0.18)*(1 - var(--ex,0)*2))}
.overture .ov-essence .w{display:inline-block;opacity:0;transform:translateY(15px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.overture .ov-essence .w.show{opacity:1;transform:none}
.ov-title-mask{position:absolute;top:50%;left:50%;z-index:3;width:clamp(280px,42vw,540px);margin:0;overflow:visible;transform-origin:left center;will-change:transform,opacity,filter;transform:translateY(-50%) translateX(calc(4vw + var(--ex,0)*50vw)) scale(calc((0.86 + var(--cmp,0)*0.14)*(1 - var(--ex,0)*0.16)));filter:blur(calc(var(--ex,0)*9px));opacity:calc(var(--cmp,0)*(1 - var(--ex,0)*2))}
.overture h2{font-family:var(--disp);font-weight:300;font-size:clamp(34px,4.7vw,56px);line-height:1.05;letter-spacing:0;color:var(--cin-cream);text-align:left;margin:0;text-shadow:0 0 40px rgba(var(--cin-halo),.9);clip-path:none;transform:none}
.ov-lead{position:absolute;top:50%;left:50%;z-index:2;width:clamp(320px,60vw,720px);transform:translate(-50%,-50%) translateY(calc((1 - var(--em,0))*26px)) scale(calc(.95 + var(--em,0)*.05));opacity:var(--em,0);will-change:transform,opacity}
.ov-lead .sec-no{color:var(--cin-gold-bright);margin-bottom:16px}
.ov-lead .sec-t{font-weight:300;font-size:clamp(30px,4.2vw,52px);line-height:1.08;letter-spacing:0;color:var(--cin-cream);text-shadow:0 0 34px rgba(var(--cin-halo),.92)}
.ov-lead .sec-q{font-size:clamp(18px,2.2vw,24px);line-height:1.4;color:var(--cin-gold);max-width:32ch;margin:20px auto 0;padding-left:0;text-shadow:0 0 24px rgba(var(--cin-halo),.85);filter:none}
.ov-lead .sec-q .qm{position:static;color:rgba(201,138,78,.5);font-size:1em;margin-right:.1em}
.ov-teasers{display:none}
.ov-tz{justify-content:center;opacity:1;transform:none;color:var(--cin-cream-soft)}
.ov-tz .tz-t{color:var(--cin-cream-soft)}
.ov-tz:hover{background:rgba(224,168,104,.12)}
.overture .ov-meta{justify-content:center;margin-top:18px;color:var(--cin-cream-soft);opacity:calc(var(--cmp,0)*.8*(1 - var(--ex,0)*1.4)*(1 - var(--em,0)))}

.body-wrap{position:relative;z-index:4;margin-top:-24svh;padding:4vh 0 8vh;background:linear-gradient(transparent 0,var(--cin-ink) 12vh,var(--cin-ink) 100%)}
.sec{position:relative}
.sec.pin-first .sec-lead{display:none}
.sec.pin-first .sec-prose{padding-top:17vh}
.sec-lead{max-width:660px;padding:16vh 24px 4vh;opacity:calc(1 - var(--e,0));transform:translateY(calc(var(--e,0)*-1vh));transition:opacity .8s var(--ease),transform .8s var(--ease)}
.sec-no{font-family:var(--grot);font-size:12px;letter-spacing:.18em;color:var(--cin-gold-bright)}
.sec-t{font-weight:300;font-size:clamp(28px,3.8vw,46px);line-height:1.08;letter-spacing:0;color:var(--cin-cream)}
.sec-q{font-size:clamp(19px,2.4vw,27px);line-height:1.4;color:var(--cin-gold);max-width:34ch;margin-bottom:10px}
.sec-prose{max-width:660px;padding:0 24px 12vh;transform:translateY(22px)}
.pp .en{font-size:clamp(17px,2vw,19.5px);line-height:1.82;color:var(--cin-cream)}
body.lang-zh .pp .zh,.pp .tr.on{color:var(--cin-cream-soft);border-left-color:rgba(201,138,78,.35)}
.pp .en .fnref{color:var(--cin-gold-bright)}
.pp .en .fnref:hover{color:#f0c98a}
.gl{background:linear-gradient(transparent 58%,rgba(201,138,78,.34) 58%);color:var(--cin-cream)}
.first .sec-prose .pp:first-of-type .en:first-letter{color:var(--cin-gold-bright)}
.fn-list{border-top-color:var(--cin-line)}
.fn-h{color:var(--cin-cream-soft)}
.fn .fn-t .en{color:var(--cin-cream-soft)}
body.lang-zh .fn .fn-t .zh,.fn .fn-t .tr.on{color:var(--cin-cream-soft);border-left-color:rgba(201,138,78,.28)}
.fn.flash{background:rgba(201,138,78,.16)}
.foot{background:var(--cin-ink);color:var(--cin-cream-soft)}
.foot:before{background:linear-gradient(var(--cin-ink),transparent)}
.foot .fq{color:var(--cin-cream)}
.foot .credit{color:var(--cin-cream-soft)}
.foot .credit a{color:var(--cin-cream);border-bottom-color:rgba(201,138,78,.38)}
.foot .totop{color:var(--cin-cream);border-color:var(--cin-line);background:rgba(201,138,78,.04)}
.foot .totop:hover{border-color:var(--cin-gold);color:var(--cin-gold-bright);background:rgba(201,138,78,.09)}
.finish-note{
  width:min(560px,calc(100vw - 48px));
  margin:0 auto 88px;
  padding:34px 0 38px;
  position:relative;
  color:var(--cin-cream);
  text-align:center;
}
.finish-note:before,
.finish-note:after{
  content:"";
  position:absolute;
  left:50%;
  width:min(340px,72%);
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(201,138,78,.42),transparent);
}
.finish-note:before{top:0}
.finish-note:after{bottom:0}
.finish-pin{
  width:7px;
  height:7px;
  margin:0 auto 18px;
  border-radius:50%;
  background:var(--cin-gold-bright);
  box-shadow:0 0 0 8px rgba(201,138,78,.08),0 0 34px rgba(224,168,104,.34);
}
.finish-kicker{
  margin:0 0 18px;
  font-family:var(--grot);
  font-size:10.5px;
  font-weight:650;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--cin-cream-soft);
}
.finish-note h2{
  margin:0;
  font-family:var(--disp);
  font-size:clamp(34px,5vw,58px);
  font-weight:320;
  line-height:1;
  color:var(--cin-cream);
}
.finish-note p:not(.finish-kicker){
  max-width:38ch;
  margin:16px auto 0;
  font-family:var(--disp);
  font-size:clamp(22px,2.8vw,32px);
  font-weight:340;
  line-height:1.12;
  color:var(--cin-gold-bright);
}
.finish-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:26px;
  padding:11px 18px;
  border:1px solid rgba(201,138,78,.42);
  border-radius:999px;
  font-family:var(--grot);
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cin-cream);
  text-decoration:none;
  background:rgba(201,138,78,.06);
  transition:transform .24s var(--ease),border-color .24s var(--ease),background .24s var(--ease),color .24s var(--ease);
}
.finish-link:hover{
  transform:translateY(-1px);
  border-color:var(--cin-gold-bright);
  background:rgba(201,138,78,.12);
  color:var(--cin-gold-bright);
}
.hl-title{letter-spacing:0}

@media(max-width:640px){
  .topbar{padding:0 12px}
  .topbar .right{gap:8px}
  .tbtn{padding:6px 5px}
  .lang-btn{padding:6px 9px}
  .hero{padding:82px 18px 64px}
  .hero .eyebrow{letter-spacing:.24em}
  .hero-note{font-size:12px;max-width:34ch}
  .movement{height:auto}
  .overture{position:relative;height:auto;min-height:100svh;padding:12vh 20px 8vh;overflow:visible}
  .movement.pin .overture,.movement.after .overture{position:relative;top:auto;bottom:auto;left:auto;right:auto}
  .overture .ov-num{display:none}
  .overture .ov-pin{height:auto}
  .ov-stage{position:static;height:auto;display:flex;flex-direction:column;align-items:center;gap:22px;margin-top:16px;max-width:none}
  .overture .ov-essence,.ov-title-mask,.ov-lead{position:static!important;transform:none!important;filter:none!important;opacity:1!important;width:auto;max-width:92vw;text-align:center}
  .overture .ov-essence{order:1;font-size:clamp(20px,5.6vw,26px)}
  .overture .ov-essence .w{opacity:1;transform:none}
  .ov-title-mask{order:2}
  .overture h2{text-align:center;font-size:clamp(28px,8vw,40px)}
  .ov-lead{order:3;margin-top:7vh}
  .ov-lead .sec-t{font-size:clamp(24px,7vw,34px)}
  .ov-teasers,.overture .ov-meta{display:none}
  .body-wrap{margin-top:0;padding-top:0}
  .sec.pin-first .sec-prose{padding-top:6vh}
  .sec-lead{padding-top:10vh}
  .pp .en{font-size:18px}
}

/* ===== strict cinematic.html chapter/read layer ===== */
body{
  --cin-veil:8,6,4;
  --cin-halo:10,8,5;
  --roll-fade:12,10,7;
}
html{overflow-x:visible!important}
body.light{
  --cin-veil:247,247,243;
  --cin-halo:250,250,247;
  --roll-fade:247,247,243;
}
body.light[data-paper="mist"]{
  --page-bg:#f3f3ef;
  --paper:#f3f3ef;
  --paper-2:#ebece7;
  --paper-3:#dedfd8;
  --cin-ink:#f3f3ef;
  --cin-ink-2:#ebece7;
  --cin-veil:243,243,239;
  --cin-halo:248,248,244;
  --roll-fade:243,243,239;
}
body.light[data-paper="porcelain"]{
  --page-bg:#f7f7f3;
  --paper:#f7f7f3;
  --paper-2:#eeeeea;
  --paper-3:#e2e3dc;
  --cin-ink:#f7f7f3;
  --cin-ink-2:#eeeeea;
  --cin-veil:247,247,243;
  --cin-halo:250,250,247;
  --roll-fade:247,247,243;
}
body.light[data-paper="warm"]{
  --page-bg:#f0eee7;
  --paper:#f0eee7;
  --paper-2:#e7e2d7;
  --paper-3:#dcd4c2;
  --cin-ink:#f0eee7;
  --cin-ink-2:#e7e2d7;
  --cin-veil:240,238,231;
  --cin-halo:245,243,237;
  --roll-fade:240,238,231;
}
#topfade{
  display:block!important;
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:clamp(82px,12vh,132px);
  z-index:680;
  pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(var(--roll-fade),1) 0%,
    rgba(var(--roll-fade),.98) 38%,
    rgba(var(--roll-fade),.76) 62%,
    rgba(var(--roll-fade),0) 100%);
}
.topbar,.topbar .right{overflow:visible}
.topbar .right{gap:14px}
.tbtn{
  position:relative;
  width:30px;
  height:30px;
  flex:0 0 30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border-radius:999px;
  transition:color .18s var(--ease),background .18s var(--ease),opacity .18s var(--ease);
}
.tbtn:hover,.tbtn:focus-visible{
  color:var(--cin-gold-bright);
  background:rgba(201,138,78,.1);
}
.tbtn .tic{
  width:20px;
  height:20px;
  flex:0 0 auto;
}
.tbtn .lab{
  position:absolute;
  top:calc(100% + 8px);
  right:50%;
  width:max-content;
  max-width:none!important;
  margin:0!important;
  padding:5px 8px;
  border-radius:999px;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  transform:translate(50%,-4px);
  background:rgba(var(--roll-fade),.86);
  color:var(--cin-cream);
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  backdrop-filter:blur(10px);
  transition:opacity .16s var(--ease),transform .18s var(--ease);
}
.tbtn:hover .lab,.tbtn:focus-visible .lab{
  opacity:1;
  transform:translate(50%,0);
}
.topbar .right .tbtn:last-child .lab{
  right:0;
  transform:translateY(-4px);
}
.topbar .right .tbtn:last-child:hover .lab,.topbar .right .tbtn:last-child:focus-visible .lab{
  transform:translateY(0);
}
#veil{background:rgba(var(--cin-veil),.92);transition:opacity .5s var(--ease)}
#scrim{background:radial-gradient(120% 120% at 50% 45%,transparent 30%,rgba(var(--cin-veil),.5) 100%)}
.hero:after{content:none!important}
.hero{
  gap:0;
  padding:92px 24px 72px;
}
.door-intro .hero{
  padding:clamp(88px,11vh,132px) clamp(28px,5vw,76px) clamp(42px,7vh,78px);
  justify-content:center;
  overflow:hidden;
}
.door-intro .hero:before{
  content:none;
}
.door-intro .hero:after{
  content:none;
}
.hero .eyebrow{
  letter-spacing:.32em;
  animation-delay:.22s;
}
.hero h1{
  margin-top:0;
  position:relative;
  z-index:1;
  width:min(980px,82vw);
  display:grid;
  gap:0;
  font-size:clamp(64px,9.4vw,156px);
  line-height:.82;
  text-wrap:balance;
  letter-spacing:0;
}
.hero h1 .title-line{display:block}
.hero h1 .title-pre{
  justify-self:center;
  padding-left:0;
  font-family:var(--serif);
  font-size:.68em;
  font-weight:340;
  line-height:.9;
  color:rgba(41,37,32,.9);
  letter-spacing:-.035em;
  transform:translateX(-2.2%);
  font-variation-settings:"opsz" 72;
}
.hero h1 .title-main{
  justify-self:center;
  margin-top:clamp(-16px,-.85vw,-7px);
  font-size:1.03em;
  line-height:.8;
  letter-spacing:-.058em;
  transform:translateX(2.2%);
  font-variation-settings:"opsz" 144;
}
.hero h1 em{
  display:inline-flex;
  align-items:baseline;
  gap:.13em;
  color:#9b541e;
  text-shadow:0 12px 46px rgba(166,94,38,.16),0 2px 0 rgba(255,255,255,.26);
}
.hero h1 .title-word{
  display:inline-block;
  white-space:nowrap;
  transform:none;
  opacity:1;
  animation:none;
}
.hero-author{
  position:relative;
  z-index:2;
  margin:clamp(14px,2vh,22px) auto 0;
  font-family:var(--grot);
  font-size:13px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--cin-gold-bright);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  opacity:0;
  transform:translateY(8px);
  animation:rise 1s var(--ease) .86s forwards;
}
.hero-author:before,
.hero-author:after{
  content:"";
  width:clamp(34px,5vw,74px);
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(166,94,38,.38));
}
.hero-author:after{
  background:linear-gradient(90deg,rgba(166,94,38,.38),transparent);
}
.hero-original-link{
  color:rgba(41,37,32,.74);
  text-decoration:none;
  letter-spacing:.14em;
  border-bottom:1px solid rgba(201,138,78,.34);
  transition:color .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease);
}
.hero-original-link:hover,
.hero-original-link:focus-visible{
  color:var(--cin-gold-bright);
  border-bottom-color:var(--cin-gold-bright);
  transform:translateY(-1px);
}
.hero-type,.hero .byline{
  display:none!important;
}
.hero-note{
  position:relative;
  z-index:2;
  max-width:34ch;
  margin:clamp(18px,2.4vh,28px) auto 0;
  font-size:12.5px;
  line-height:1.58;
  color:rgba(41,37,32,.68);
  animation-delay:1.05s;
}
.hero-actions{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:clamp(20px,3vh,30px);
  opacity:0;
  transform:translateY(8px);
  animation:rise 1s var(--ease) 1.18s forwards;
}
.hero-start{
  font-family:var(--grot);
  font-weight:600;
  font-size:12.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--cin-ink);
  background:var(--cin-cream);
  border:1px solid var(--cin-cream);
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 22px 11px 24px;
  box-shadow:0 18px 48px rgba(41,37,32,.12),0 2px 0 rgba(255,255,255,.12) inset;
  transition:background .24s var(--ease),border-color .24s var(--ease),color .24s var(--ease),transform .24s var(--ease),box-shadow .24s var(--ease);
}
.hero-start:after{
  content:"↓";
  font-size:1.05em;
  line-height:1;
  transform:translateY(-1px);
  transition:transform .24s var(--ease);
}
.hero-start:hover{
  color:var(--cin-ink);
  background:var(--cin-gold-bright);
  border-color:var(--cin-gold-bright);
  transform:translateY(-1px);
  box-shadow:0 22px 56px rgba(166,94,38,.18),0 2px 0 rgba(255,255,255,.14) inset;
}
.hero-start:hover:after{transform:translateY(2px)}
body:not(.light) .hero h1 .title-pre{color:var(--cin-cream)}
body:not(.light) .hero h1 em{
  color:var(--cin-gold-bright);
  text-shadow:0 0 60px rgba(var(--cin-halo),.92),0 0 22px rgba(var(--cin-halo),.85);
}
body:not(.light) .hero-original-link,
body:not(.light) .hero-note{color:var(--cin-cream-soft)}
.scroll-cue{
  margin-top:34px;
  animation-delay:1.35s;
}
.chapter,.movement,.body-wrap{background:transparent!important}
.chapter{position:relative}
.movement{position:relative;height:300vh;height:300svh}
.movement.pin .overture,.movement.after .overture{position:static}
.overture,.ov-bg,.ov-num,.ov-title-mask{display:none!important}
.ov-pin{
  position:sticky;
  top:0;
  height:100vh;
  height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:6vh 6vw;
  overflow:hidden;
  z-index:2;
  pointer-events:none;
}
.ov-label{
  font-family:var(--grot);
  font-weight:600;
  font-size:13px;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--cin-gold-bright);
  opacity:0;
  transform:none;
  transition:opacity .9s var(--ease);
}
.movement.in .ov-label{opacity:calc((1 - var(--ex,0)*1.6)*(1 - var(--em,0)))}
.ov-stage{
  position:relative;
  width:100%;
  max-width:1260px;
  height:clamp(280px,46vh,440px);
  margin:22px auto 0;
}
.ov-essence{
  position:absolute;
  top:50%;
  left:50%;
  z-index:2;
  width:clamp(360px,74vw,940px);
  max-width:none;
  margin:0;
  font-family:var(--disp);
  font-weight:300;
  font-style:italic;
  line-height:1.42;
  color:rgba(236,224,200,.78);
  text-align:center;
  font-size:clamp(32px,4.7vw,52px);
  font-weight:340;
  transform-origin:center center;
  will-change:transform,opacity,filter;
  text-shadow:0 0 38px rgba(224,168,104,.16),0 0 16px rgba(236,224,200,.1);
  transform:translate(-50%,-50%) translateX(calc(var(--cmp,0)*-20vw + var(--ex,0)*-50vw)) scale(calc((1 - var(--cmp,0)*0.38)*(1 - var(--ex,0)*0.16)));
  filter:blur(calc(var(--ex,0)*9px));
  opacity:calc((1 - var(--cmp,0)*0.18)*(1 - var(--ttl,0)*0.08)*(1 - var(--ex,0)*2));
}
.ov-essence .w{
  display:inline-block;
  opacity:0;
  transform:translateY(15px);
  transition:opacity .5s var(--ease),transform .6s var(--ease);
}
.ov-essence .w.show{opacity:1;transform:none}
body.light .ov-essence{
  color:rgba(41,37,32,.86);
  text-shadow:0 0 34px rgba(var(--cin-halo),.9),0 0 14px rgba(var(--cin-halo),.72);
}
.ov-title{
  position:absolute;
  top:50%;
  left:50%;
  z-index:2;
  width:clamp(320px,45vw,640px);
  font-family:var(--disp);
  font-weight:300;
  font-size:clamp(42px,5.6vw,76px);
  line-height:1.05;
  letter-spacing:0;
  color:var(--cin-cream);
  text-align:left;
  transform-origin:left center;
  will-change:transform,opacity,filter;
  text-shadow:0 0 40px rgba(var(--cin-halo),.9);
  transform:translateY(-50%) translateX(calc(4vw + var(--ex,0)*50vw)) scale(calc((.86 + var(--ttl,0)*.14)*(1 - var(--ex,0)*.16)));
  filter:blur(calc(var(--ex,0)*9px));
  opacity:calc(var(--ttl,0)*(1 - var(--ex,0)*2));
}
.ov-lead{
  position:absolute;
  top:62%;
  left:50%;
  z-index:1;
  width:clamp(320px,60vw,720px);
  transform:translate(-50%,-50%) translateY(calc((1 - var(--em,0))*34px)) scale(calc(.93 + var(--em,0)*.07));
  opacity:var(--em,0);
  will-change:transform,opacity;
  pointer-events:none;
}
.ov-lead .sec-no{
  font-family:var(--grot);
  font-weight:600;
  font-size:13px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--cin-gold-bright);
  margin-bottom:16px;
}
.ov-lead .sec-title{
  font-family:var(--disp);
  font-weight:300;
  font-size:clamp(36px,4.9vw,64px);
  line-height:1.08;
  letter-spacing:0;
  color:var(--cin-cream);
  margin-bottom:20px;
  text-shadow:0 0 34px rgba(var(--cin-halo),.92);
}
.ov-lead .sec-quote{
  font-family:var(--disp);
  font-weight:300;
  font-style:italic;
  font-size:clamp(21px,2.5vw,30px);
  line-height:1.4;
  color:var(--cin-gold);
  max-width:32ch;
  margin:0 auto;
  padding:0;
  text-shadow:0 0 24px rgba(var(--cin-halo),.85);
}
.ov-lead .sec-quote .qm{position:static;color:rgba(201,138,78,.5);font-size:1em;line-height:inherit;font-style:normal;margin-right:.1em}
.ov-meta{
  font-family:var(--grot);
  font-size:13px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--cin-cream-soft);
  margin-top:30px;
  display:flex;
  justify-content:center;
  gap:24px;
  align-items:center;
  opacity:var(--meta,0);
}
.ov-meta b{color:var(--cin-gold-bright);font-size:1.18em}

.body-wrap.read{
  position:relative;
  z-index:1;
  margin-top:-76vh;
  margin-top:-76svh;
  padding:4vh 24px 8vh;
}
.read .sec{
  position:relative;
  max-width:660px;
  margin:16vh auto 0;
}
.read .sec:first-child,.read .sec.pin-first{margin-top:0}
.read .sec.pin-first .sec-lead{display:flex}
.read .sec-lead,.read .sec-prose{
  max-width:660px;
  margin:0 auto;
  padding:0;
  opacity:1;
  transform:none;
  transition:none;
}
.read .sec-lead{
  display:flex;
  flex-direction:column;
  min-height:0;
  justify-content:flex-start;
  padding-top:clamp(54px,11svh,96px);
  padding-bottom:clamp(10px,2svh,22px);
}
.read .sec:first-child .sec-lead{
  min-height:0;
  padding-top:clamp(38px,8svh,70px);
}
.read .sec-heading{display:flex;flex-direction:column;align-items:flex-start}
.read .sec-heading .sec-title{order:1;margin:0}
.read .sec-heading .sec-no{order:2;display:block;margin:clamp(28px,5svh,44px) 0 0}
.read .sec-no{
  font-family:var(--grot);
  font-weight:600;
  font-size:13.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--cin-gold-bright);
  margin:0;
}
.read .sec-title{
  font-family:var(--disp);
  font-weight:300;
  font-size:clamp(34px,4.6vw,58px);
  line-height:1.08;
  letter-spacing:0;
  color:var(--cin-cream);
  margin-bottom:24px;
}
.read .sec-quote{
  font-family:var(--disp);
  font-weight:300;
  font-style:italic;
  font-size:clamp(21px,2.7vw,32px);
  line-height:1.4;
  color:var(--cin-gold);
  max-width:34ch;
  position:relative;
  padding-left:30px;
  margin:clamp(34px,6svh,58px) 0 0;
  filter:none;
}
.read .sec-quote .qm{
  position:absolute;
  left:-3px;
  top:-4px;
  font-size:2.5em;
  line-height:1;
  color:rgba(201,138,78,.4);
  font-style:normal;
}
.read .pp{margin-bottom:1.3em}
.read .sec-prose{padding-top:clamp(52px,8svh,78px)}
.read .sec.pin-first .sec-prose{padding-top:clamp(52px,8svh,78px)}
.read .pp .en{
  display:block;
  font-family:var(--serif);
  font-size:clamp(17px,2vw,19.5px);
  line-height:1.82;
  color:var(--read-ink,var(--cin-cream));
}
.read .reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity 1s var(--ease),transform 1s var(--ease);
}
.read .reveal.in{opacity:1;transform:none}
.read .sec-prose.in{opacity:1;transform:none}
.first .sec-prose .pp:first-of-type .en:first-letter{
  float:none;
  font:inherit;
  line-height:inherit;
  padding:0;
  color:inherit;
}
.gl{background:linear-gradient(transparent 58%,rgba(201,138,78,.34) 58%);padding:0 2px;color:var(--read-ink,var(--cin-cream))}
body.lang-zh .pp .zh,.pp .tr.on{color:var(--read-soft,var(--cin-cream-soft));border-left-color:rgba(201,138,78,.35)}
.fn-list{border-top-color:var(--cin-line)}
.fn-h,.fn .fn-t .en{color:var(--read-soft,var(--cin-cream-soft))}

@media(max-width:640px){
  .movement{height:auto}
  .ov-pin{position:static;height:auto;padding:12vh 20px 4vh;overflow:visible}
  .ov-stage{position:static;height:auto;display:flex;flex-direction:column;align-items:center;gap:22px;margin-top:16px;max-width:none}
  .ov-essence,.ov-title,.ov-lead{position:static;transform:none!important;filter:none!important;opacity:1!important;width:auto;max-width:92vw;text-align:center}
  .ov-essence{order:1;font-size:clamp(20px,5.6vw,26px)}
  .ov-essence .w{opacity:1;transform:none}
  .ov-title{order:2;font-size:clamp(28px,8vw,40px)}
  .ov-lead{order:3;margin-top:8vh}
  .ov-lead .sec-title{font-size:clamp(24px,7vw,34px)}
  .ov-label{opacity:1!important}
  .ov-meta{display:none}
  .body-wrap.read{margin-top:0}
  .read .sec{margin-top:14vh}
  .read .sec.pin-first{margin-top:0}
  .read .sec-lead{min-height:auto;padding-top:8vh}
  .read .sec-heading .sec-no{margin-top:28px}
  .read .sec-quote{margin-top:34px}
  .read .sec-prose{padding-top:36px}
  .read .sec.pin-first .sec-prose{padding-top:36px}
  .read .pp .en{font-size:18px}
  .hero{padding:84px 18px 62px}
  .hero-note{max-width:32ch}
  .hero-actions{gap:10px}
  .hero-start{padding:9px 16px}
}