:root{
  --bg:#0b0d0f;
  --panel:#111417;
  --panel-2:#15191c;
  --line:#23282c;
  --text:#ece8df;
  --muted:#9a9a94;
  --dim:#6c6d69;
  --gold:#e3b35c;
  --gold-soft:rgba(227,179,92,.14);
  --parchment:#e9d7a8;
  --ink:#2b1d10;
  --sans:"Inter",system-ui,-apple-system,"PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",sans-serif;
  --script:"Petit Formal Script",cursive;
  --gutter:clamp(16px,4vw,64px);
}
html[lang="zh"]{--script:"Ma Shan Zheng","Kaiti SC","STKaiti",serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.6;overflow-x:hidden}
a{color:inherit}
button{font:inherit;color:inherit}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
html[lang="zh"] .eyebrow{letter-spacing:.2em}

/* ---------- top bar ---------- */
.bar{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;gap:20px;
  padding:14px var(--gutter);background:linear-gradient(var(--bg) 60%,rgba(11,13,15,0));}
.bar .brand{font-weight:800;letter-spacing:.14em;font-size:.82rem;text-transform:uppercase;color:var(--gold);text-decoration:none;white-space:nowrap}
.bar .spacer{flex:1}
.progress{position:fixed;left:0;top:0;height:2px;background:var(--gold);width:0;z-index:60}
.lang{display:flex;border:1px solid var(--line);border-radius:999px;padding:3px;background:var(--panel)}
.lang button{background:none;border:0;padding:5px 12px;border-radius:999px;font-size:.78rem;font-weight:600;letter-spacing:.06em;color:var(--muted);cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--gold);color:#17120a}
.lang button:focus-visible,.menu-btn:focus-visible,.yt:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.menu-btn{background:none;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);cursor:pointer}

/* chapter drawer */
.toc{position:fixed;z-index:70;top:0;right:0;height:100%;width:min(360px,100%);background:var(--panel);border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform .35s ease;padding:72px 24px 24px;overflow-y:auto}
.toc.open{transform:none}
.toc ol{list-style:none;margin:0;padding:0}
.toc a{display:flex;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--muted);font-size:.95rem}
.toc a b{color:var(--gold);font-weight:700;min-width:1.8em;font-variant-numeric:tabular-nums}
.toc a:hover,.toc a.active{color:var(--text)}
.toc .close{position:absolute;top:18px;right:20px}
.scrim{position:fixed;inset:0;z-index:65;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.open{opacity:1;pointer-events:auto}

/* ---------- hero ---------- */
.hero{min-height:100vh;min-height:100svh;display:grid;place-items:center;text-align:center;padding:110px var(--gutter) 60px;position:relative}
.flame{width:90px;height:150px;margin:0 auto 34px;position:relative;filter:blur(.5px)}
.flame i{position:absolute;left:50%;bottom:0;border-radius:50% 50% 45% 45%/60% 60% 40% 40%;transform-origin:50% 100%;mix-blend-mode:screen}
.flame i:nth-child(1){width:90px;height:140px;margin-left:-45px;background:radial-gradient(ellipse at 50% 85%,#ff7a18 0%,rgba(255,90,20,.55) 40%,transparent 70%);animation:flick 2.1s ease-in-out infinite alternate;filter:blur(8px)}
.flame i:nth-child(2){width:54px;height:110px;margin-left:-27px;background:radial-gradient(ellipse at 50% 85%,#ffd27a 0%,#ff9a2e 45%,transparent 72%);animation:flick 1.3s ease-in-out infinite alternate-reverse;filter:blur(3px)}
.flame i:nth-child(3){width:26px;height:62px;margin-left:-13px;background:radial-gradient(ellipse at 50% 80%,#fffbe8 0%,#ffe19a 50%,transparent 75%);animation:flick .9s ease-in-out infinite alternate}
.flame::after{content:"";position:absolute;left:50%;bottom:-30px;width:320px;height:320px;margin-left:-160px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,150,50,.18),transparent 65%);animation:glow 3s ease-in-out infinite alternate;z-index:-1}
@keyframes flick{0%{transform:scale(1,1) skewX(0)}30%{transform:scale(.96,1.05) skewX(-3deg)}60%{transform:scale(1.03,.95) skewX(2deg)}100%{transform:scale(.98,1.07) skewX(-1deg)}}
@keyframes glow{from{opacity:.7;transform:scale(.95)}to{opacity:1;transform:scale(1.05)}}
.hero h1{font-size:clamp(2.4rem,7vw,5.6rem);line-height:1.04;letter-spacing:-.02em;margin:14px 0 18px;font-weight:800}
.hero .sub{color:var(--muted);font-size:clamp(1rem,2vw,1.2rem);max-width:40ch;margin:0 auto 40px}
.hero .video{max-width:960px;margin:0 auto}
.scroll-hint{margin-top:36px;color:var(--dim);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}
.scroll-hint::after{content:"";display:block;width:1px;height:36px;background:linear-gradient(var(--gold),transparent);margin:12px auto 0;animation:drop 1.8s ease-in-out infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- chapters ---------- */
.chapter{padding:clamp(56px,9vw,110px) var(--gutter);border-top:1px solid var(--line)}
.chapter-inner{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:start}
.chapter:nth-of-type(even) .chapter-inner{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.chapter:nth-of-type(even) .copy{order:2}
.chapter .head{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:28px}
.chapter .head .when{color:var(--muted);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;text-align:right}
.chapter h2{font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.1;letter-spacing:-.015em;margin:0 0 6px;font-weight:700}
.chapter .person{color:var(--muted);font-size:1rem;margin:0 0 4px}
.rule{width:64px;height:3px;background:var(--gold);margin:26px 0}
.tagline{font-size:clamp(1.5rem,2.8vw,2.2rem);font-weight:700;color:var(--gold);line-height:1.2;margin:0 0 22px}
.chapter .body{color:#c9c6bd;margin:0 0 26px;max-width:58ch}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.facts div{background:var(--panel);padding:14px 14px 12px}
.facts b{display:block;font-size:1.25rem;color:var(--text);font-variant-numeric:tabular-nums;line-height:1.2}
.facts span{display:block;color:var(--dim);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;margin-top:4px;line-height:1.35}
.media{display:flex;flex-direction:column;gap:18px;min-width:0}

/* lite youtube */
.yt{position:relative;display:block;width:100%;aspect-ratio:16/9;background:#000 center/cover no-repeat;border:0;padding:0;cursor:pointer;overflow:hidden;border-radius:2px;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.yt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease,filter .4s}
.yt:hover img{transform:scale(1.02);filter:brightness(1.08)}
.yt .play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:rgba(11,13,15,.72);border:1.5px solid var(--gold);display:grid;place-items:center;transition:transform .25s,background .25s}
.yt .play::before{content:"";margin-left:5px;border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent var(--gold)}
.yt:hover .play{transform:scale(1.08);background:rgba(227,179,92,.18)}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:.78rem;color:var(--dim);letter-spacing:.06em;text-transform:uppercase}
.yt-meta a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line)}
.yt-meta a:hover{color:var(--gold);border-color:var(--gold)}

/* ---------- special visuals ---------- */
.stage{background:var(--panel);border:1px solid var(--line);padding:22px;position:relative;overflow:hidden}
.stage .cap{font-size:.7rem;color:var(--dim);letter-spacing:.12em;text-transform:uppercase;margin-top:12px}

/* 01 torch-lit text */
.torch{background:radial-gradient(circle at var(--x,30%) 50%,#ffcf7a 0%,#e3b35c 18%,#3a2c19 45%,#1a1510 70%);-webkit-background-clip:text;background-clip:text;color:transparent;transition:--x 1s}
.torch.lit{animation:torch 6s ease-in-out infinite alternate}
@property --x{syntax:"<percentage>";inherits:false;initial-value:30%}
@keyframes torch{0%{--x:0%}50%{--x:70%}100%{--x:110%}}

/* 04 odometer */
.odo{display:flex;align-items:flex-end;gap:4px;font-size:clamp(3.6rem,8vw,6rem);font-weight:800;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.odo .reel{height:1em;overflow:hidden;display:inline-block}
.odo .reel span{display:block;height:1em;text-align:center}
.odo .reel .strip{transition:transform 2.6s cubic-bezier(.2,.7,.1,1)}

/* big counters (07, 13) */
.big{font-size:clamp(3.2rem,7.5vw,5.8rem);font-weight:800;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.big small{font-size:.38em;color:var(--muted);font-weight:600;letter-spacing:.04em;margin-left:.2em}
.mach-track{height:6px;background:var(--line);margin-top:18px;position:relative}
.mach-track i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#6b5530,var(--gold))}
.mach-track em{position:absolute;top:12px;font-style:normal;font-size:.68rem;color:var(--dim);transform:translateX(-50%)}

/* 08 parchment + quill */
.parchment{background:radial-gradient(ellipse at 40% 30%,#f3e4bd,#dcc38b 70%,#c8a96b);color:var(--ink);padding:clamp(20px,3vw,34px) clamp(20px,3vw,40px);position:relative;box-shadow:inset 0 0 50px rgba(90,60,20,.35)}
.parchment .ptitle{font-family:var(--script);font-size:clamp(.9rem,1.6vw,1.15rem);opacity:.8;margin-bottom:6px}
.parchment .art{font-family:var(--script);font-size:clamp(1.15rem,2.3vw,1.7rem);margin-bottom:8px}
.parchment .quilltext{font-family:var(--script);font-size:clamp(1.1rem,2.1vw,1.55rem);line-height:1.75;min-height:5.2em}
html[lang="zh"] .parchment .quilltext{font-size:clamp(1.25rem,2.4vw,1.8rem);line-height:1.6}
.quilltext span{opacity:0;transition:opacity .25s}
.quilltext span.on{opacity:1}
.quill{position:absolute;left:0;top:0;width:70px;height:70px;pointer-events:none;transform-origin:4px 66px;transition:transform .08s linear;opacity:0}
.quill.on{opacity:1}
.motto{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:16px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.85rem}
.motto span:nth-child(1){color:#6f8fd8}.motto span:nth-child(2){color:var(--text)}.motto span:nth-child(3){color:#e06a5a}

/* 09 meridian, 11 eiffel */
svg.draw .path{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
svg.draw.go .path{transition:stroke-dashoffset 3.2s ease-in-out;stroke-dashoffset:0}
svg.draw .city{opacity:0;transition:opacity .5s}
svg.draw.go .city{opacity:1}
.eiffel-wrap{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:end}
.eiffel-wrap svg{height:clamp(220px,32vw,330px);width:auto}
.meter{font-size:clamp(2.6rem,5vw,4rem);font-weight:800;color:var(--gold);line-height:1;font-variant-numeric:tabular-nums}
.meter small{font-size:.4em;color:var(--muted)}

/* 14 star */
.star{height:220px;display:grid;place-items:center;position:relative}
.star i{position:absolute;border-radius:50%}
.star i:nth-child(1){width:70px;height:70px;background:radial-gradient(circle,#fff 0%,#ffe9b0 35%,#ffb347 70%,transparent 72%);box-shadow:0 0 60px 20px rgba(255,190,90,.55);animation:pulse 3.2s ease-in-out infinite}
.star i:nth-child(2){width:200px;height:200px;border:1px solid rgba(227,179,92,.35);transform:rotateX(70deg);animation:spin 8s linear infinite}
.star i:nth-child(3){width:150px;height:150px;border:1px dashed rgba(111,143,216,.45);animation:spin 12s linear infinite reverse}
@keyframes pulse{50%{transform:scale(1.12);box-shadow:0 0 90px 34px rgba(255,190,90,.45)}}
@keyframes spin{to{rotate:360deg}}

/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- closing ---------- */
.closing{padding:clamp(80px,12vw,160px) var(--gutter);text-align:center;border-top:1px solid var(--line)}
.closing p{font-size:clamp(1.6rem,4vw,3rem);font-weight:800;line-height:1.2;margin:0 auto;max-width:22ch}
.closing p + p{color:var(--gold);margin-top:10px}
footer{padding:28px var(--gutter);border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--dim);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}

@media (max-width:860px){
  .chapter-inner,.chapter:nth-of-type(even) .chapter-inner{grid-template-columns:minmax(0,1fr)}
  .chapter:nth-of-type(even) .copy{order:0}
  .bar .brand{display:none}
  .facts b{font-size:1.05rem}
}
@media (max-width:420px){
  .facts{grid-template-columns:minmax(0,1fr)}
  .lang button{padding:5px 9px}
  .eiffel-wrap{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}