:root{
  /* the same paper and ink as the travel map (map.css), so every page reads as one book */
  --paper:#f6f0e2; --ink:#3b382f; --muted:#857e6c; --accent:#c8714b; --line:#e2d6bb; --night:#0e0f0d; --night-ink:#e9e6dc; --night-muted:#8d8f86;
  --serif:"Noto Serif TC","Source Han Serif TC",serif; --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --hand:"LXGW WenKai TC","Noto Serif TC",serif;
  --bg:var(--night); --fg:var(--night-ink); --fg2:var(--night-muted);
  --skew:0deg; --blur:0px;
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--serif);font-weight:300;transition:background-color .7s ease,color .7s ease;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.tone-light{--bg:var(--paper);--fg:var(--ink);--fg2:var(--muted)}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{font-weight:300}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.hand{font-family:var(--hand)}
.grain{position:fixed;inset:0;z-index:50;pointer-events:none;background-size:180px 180px}
.mono,.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg2)}

/* ---------- Viewfinder HUD ---------- */
.vf{position:fixed;inset:18px;pointer-events:none;z-index:40;opacity:0;transition:opacity .6s}
body.started.at-hero .vf{opacity:1}
.vf-c{position:absolute;width:22px;height:22px;border:1px solid currentColor;opacity:.45}
.vf-c.tl{top:0;left:0;border-right:0;border-bottom:0}.vf-c.tr{top:0;right:0;border-left:0;border-bottom:0}
.vf-c.bl{bottom:0;left:0;border-right:0;border-top:0}.vf-c.br{bottom:0;right:0;border-left:0;border-top:0}
.vf-af{position:absolute;left:50%;top:50%;width:46px;height:34px;margin:-17px 0 0 -23px;border:1.5px solid var(--accent);opacity:0}
.vf-af.lock{animation:af .55s ease-out}
@keyframes af{0%{opacity:0;transform:scale(1.5)}25%{opacity:1;transform:scale(1)}60%{opacity:1}100%{opacity:0}}
.hud{position:fixed;left:0;right:0;bottom:0;z-index:41;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 48px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;pointer-events:none;opacity:0;transition:opacity .6s;mix-blend-mode:difference;color:#fff}
body.started .hud{opacity:.5}
body.started .hud.tick{opacity:.9}
.hud b{font-weight:500}
.hud-exp{display:flex;gap:22px}
.hud-exp b{transition:color .25s}
.hud.tick .hud-exp b{color:var(--accent)}
.sound{position:fixed;top:30px;right:48px;z-index:42;font-family:var(--mono);font-size:11px;letter-spacing:.15em;padding:6px 10px;border:1px solid currentColor;opacity:0;transition:opacity .6s;mix-blend-mode:difference;color:#fff}
body.started .sound{opacity:.7}
.sound[aria-pressed=true]{opacity:1}

/* ---------- Shutter + flash ---------- */
.shutter{position:fixed;inset:0;z-index:50;pointer-events:none}
.shutter i{position:absolute;left:0;right:0;height:50.5%;background:#000;transform:scaleY(0)}
.shutter i:first-child{top:0;transform-origin:top}.shutter i:last-child{bottom:0;transform-origin:bottom}
.shutter.fire i{animation:blade .16s cubic-bezier(.7,0,.3,1)}
@keyframes blade{0%{transform:scaleY(0)}45%,55%{transform:scaleY(1)}100%{transform:scaleY(0)}}
.flash{position:fixed;inset:0;z-index:49;background:#fff;opacity:0;pointer-events:none}
.flash.fire{animation:flash .35s ease-out}
@keyframes flash{0%{opacity:.55}100%{opacity:0}}

/* ---------- Page shutter (between pages) ---------- */
.page-shutter{position:fixed;inset:0;z-index:100;pointer-events:none}
.page-shutter i{position:absolute;left:0;right:0;height:50.5%;background:#0b0b0a;transform:scaleY(0);transition:transform .28s cubic-bezier(.7,0,.3,1) .06s}
.page-shutter i:first-child{top:0;transform-origin:top}.page-shutter i:last-child{bottom:0;transform-origin:bottom}
.page-shutter.closed i{transform:scaleY(1);transition-delay:0s}
.home-link{position:fixed;top:28px;left:48px;z-index:42;font-family:var(--mono);font-size:11px;letter-spacing:.15em;color:#fff;text-decoration:none;mix-blend-mode:difference;opacity:.75}
.home-link:hover{opacity:1}
.end-links{display:flex;gap:36px;flex-wrap:wrap;justify-content:center}
@media (max-width:760px){.home-link{top:18px;left:18px}}

/* ---------- ① Burst hero ---------- */
.burst{height:100vh;height:100svh;position:relative}
.burst-stage{position:sticky;top:0;height:100%;overflow:hidden;background:#000}
.burst-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(1.5px) brightness(.85);transform:scale(1.04)}
.burst.frozen .burst-img{filter:none;transform:none;transition:transform 6s ease-out}
.burst-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,#000b 88%);pointer-events:none}
@media (min-aspect-ratio:1/1){.burst-stage::after{background:linear-gradient(90deg,#000a,transparent 55%)}}
.burst-count,.burst-title,.burst-skip,.scroll-cue{z-index:1}
.burst-count{position:absolute;top:64px;left:48px;font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:#fff;opacity:.8}
.burst-count b{color:var(--accent)}
.burst.frozen .burst-count{opacity:0;transition:opacity .4s}
.burst-title{position:absolute;left:48px;bottom:84px;color:#fff;max-width:640px}
.burst-title>*{opacity:0;transform:translateY(14px);transition:opacity .8s,transform .8s}
.burst.frozen .burst-title>*{opacity:1;transform:none}
.burst.frozen .burst-title h1{transition-delay:.25s}.burst.frozen .burst-exif{transition-delay:.5s}
.burst-title .eyebrow{color:#fff;opacity:.8}
.burst-title h1{font-size:clamp(48px,8vw,118px);letter-spacing:.08em;line-height:1.15;margin:14px 0 18px;text-shadow:0 2px 30px #0006}
.burst-sub{font-size:16px;line-height:2;letter-spacing:.08em;opacity:.85;margin-bottom:16px}
.burst.frozen .burst-sub{transition-delay:.4s}
@media (min-aspect-ratio:1/1){
  .burst.frozen .burst-img{object-fit:contain;object-position:86% 50%;padding:7vh 0}
  .burst-title{bottom:auto;top:50%;transform:translateY(-50%)}
}
.burst-exif{font-family:var(--mono);font-size:13px;letter-spacing:.14em;min-height:1.4em}
.burst-exif::after{content:"▍";animation:blink 1s steps(1) infinite;margin-left:2px}
@keyframes blink{50%{opacity:0}}
.burst-skip{position:absolute;right:48px;top:30px;font-family:var(--mono);font-size:11px;letter-spacing:.15em;color:#fff;opacity:.7}
.burst.frozen .burst-skip{display:none}
.scroll-cue{position:absolute;right:48px;bottom:84px;font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:#fff;writing-mode:vertical-rl;opacity:0;transition:opacity 1s 1.2s}
.burst.frozen .scroll-cue{opacity:.75}
.scroll-cue::after{content:"";display:block;width:1px;height:60px;background:#fff;margin:14px auto 0;animation:cue 1.8s ease-in-out infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* ---------- Pause / chapter cards ---------- */
.pause{min-height:80vh;display:grid;place-items:center;padding:0 24px}
.pause-line{font-size:clamp(22px,3vw,38px);line-height:2;letter-spacing:.12em;text-align:center}
.chapter-card{min-height:90vh;display:flex;align-items:center;gap:clamp(24px,6vw,90px);padding:0 clamp(24px,8vw,140px)}
.ch-num{font-family:var(--mono);font-size:clamp(90px,18vw,260px);line-height:1;font-weight:400;color:transparent;-webkit-text-stroke:1px var(--fg2);letter-spacing:-.04em}
.chapter-card h2{font-size:clamp(34px,5vw,64px);letter-spacing:.1em;line-height:1.4}
.chapter-card p{margin-top:18px;font-size:16px;line-height:2;color:var(--fg2);max-width:420px}
.chapter-card .ch-num,.chapter-card>div{opacity:0;transform:translateY(40px);transition:opacity .9s,transform .9s cubic-bezier(.2,.7,.2,1)}
.chapter-card>div{transition-delay:.15s}
.chapter-card.in .ch-num,.chapter-card.in>div{opacity:1;transform:none}

/* ---------- ② Shot: motion → freeze ---------- */
.shot{height:230vh;position:relative}
.shot-stage{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;overflow:hidden;padding:56px 24px 70px}
.shot-frame{position:relative;flex:1;min-height:0;max-width:100%;display:flex;align-items:center;justify-content:center}
.shot-frame img{max-height:100%;width:auto;object-fit:contain;will-change:transform,filter;transform:translate3d(var(--tx,0),var(--ty,0),0) scale(var(--sc,1));filter:blur(var(--b,0px))}
.shot.fired .shot-frame img{transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .35s ease-out}
.shot-cap{max-width:560px;text-align:center;font-size:15px;line-height:1.9;color:var(--fg2);opacity:0;transform:translateY(10px);transition:opacity .6s .15s,transform .6s .15s}
.shot-cap b{display:block;color:var(--fg);font-weight:500;font-size:18px;letter-spacing:.1em;margin-bottom:4px}
.shot.fired .shot-cap{opacity:1;transform:none}

/* ---------- Pair ---------- */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:center;padding:12vh clamp(24px,8vw,140px)}
.pair figure img{width:100%}
.pair figcaption,.sheet figcaption{margin-top:12px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--fg2)}
.pair-text p{font-size:clamp(22px,2.6vw,34px);line-height:2;letter-spacing:.1em}
.pair-rev{grid-template-columns:.8fr 1.4fr;align-items:end}
.strip-track img{transition:transform .25s ease-out,filter .25s ease-out}

/* ---------- ③ Strip: horizontal, velocity blur, freeze on stop ---------- */
.strip{height:320vh;position:relative}
.strip-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.strip-label,.strip-hint{font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--fg2);padding:0 48px}
.strip-hint{margin-top:22px;opacity:.7}
.strip-track{display:flex;gap:6vw;padding:28px 50vw;width:max-content;align-items:center;will-change:transform}
.strip-track figure{height:62vh;flex:none;opacity:.35;transform:scale(.94);transition:opacity .35s,transform .35s}
.strip-track figure img{height:100%;width:auto}
.strip-track figcaption{margin-top:12px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--fg2)}
.strip-track figure.focus{opacity:1;transform:none}
.strip.moving .strip-track figure{opacity:.6}

/* ---------- ④ Slow shutter (ghost trail collapses) ---------- */
.slow{height:220vh;position:relative}
.slow-stage{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:6vw;padding:8vh clamp(24px,8vw,140px)}
.slow-text h3{font-size:clamp(34px,4.5vw,60px);letter-spacing:.1em;margin:18px 0}
.slow-text p:last-child{font-size:17px;line-height:2;color:var(--fg2)}
.slow-frame{position:relative;height:84vh;justify-self:center}
.slow-frame img{height:100%;width:auto}
.ghost{position:absolute;inset:0;mix-blend-mode:screen;opacity:var(--go,.35);transform:translateY(var(--gy,0))}
.ghost:nth-of-type(2){--k:1}.ghost:nth-of-type(3){--k:2}.ghost:nth-of-type(4){--k:3}

/* ---------- ⑤ Fog lift ---------- */
.fog{height:200vh;position:relative}
.fog-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.fog-stage img{width:100%;height:100%;object-fit:cover;filter:blur(var(--fb,14px)) brightness(var(--fl,1.25)) saturate(var(--fs,.4));transform:scale(var(--fz,1.12))}
.fog-text{position:absolute;left:clamp(24px,8vw,140px);top:50%;transform:translateY(-50%);font-size:clamp(26px,3.4vw,46px);line-height:1.9;letter-spacing:.12em;color:#fff;text-shadow:0 2px 24px #0005;opacity:var(--ft,1)}

/* ---------- ⑥ Iris (aperture opens) ---------- */
.iris{height:220vh;position:relative}
.iris-stage{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.iris-frame{height:88vh;clip-path:var(--clip,polygon(50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%))}
.iris-frame img{height:100%;width:auto}
.iris-text{position:absolute;left:clamp(24px,8vw,140px);bottom:14vh;opacity:var(--it,0)}
@media (min-width:761px){.iris-stage{justify-content:flex-end;padding-right:clamp(24px,10vw,180px)}}
@media (max-width:760px){.iris-text{left:0;right:0;bottom:0;padding:60px 20px 64px;background:linear-gradient(transparent,#000c)}}
.iris-text h3{font-size:clamp(28px,3.4vw,48px);line-height:1.6;letter-spacing:.1em;margin-top:14px}
.iris-text .mono{color:var(--accent);font-size:14px}

/* ---------- ⑦ Contact sheet (each frame snaps) ---------- */
.sheet{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.4vw,36px);padding:14vh clamp(24px,6vw,110px);align-items:end}
.sheet figure{position:relative}
.sheet figure img{width:100%;opacity:0;transform:translateY(24px);filter:blur(8px)}
.sheet figure.snap img{opacity:1;transform:none;filter:none;transition:opacity .7s ease,transform .9s cubic-bezier(.2,.8,.2,1),filter .6s ease}
.sheet figcaption span{color:var(--accent);margin-right:10px}

/* ---------- Bleed / quiet / end ---------- */
.bleed{position:relative;height:120vh;overflow:hidden}
.bleed img{position:absolute;left:0;top:-10%;width:100%;height:120%;object-fit:cover;transform:translateY(var(--py,0))}
.bleed-cap{position:absolute;left:48px;bottom:60px;font-family:var(--mono);font-size:12px;letter-spacing:.15em;color:#fff}
.quiet{min-height:130vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:12vh 24px}
.quiet img{height:76vh;width:auto;opacity:0;transition:opacity 2.4s ease}
.quiet.in img{opacity:1}
.quiet p{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--fg2)}
.end{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:30px;padding:0 24px 80px}
.end h2{font-size:clamp(30px,4.4vw,58px);line-height:1.7;letter-spacing:.12em}
.end-link{font-family:var(--mono);font-size:13px;letter-spacing:.18em;color:var(--fg);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:8px}

/* ---------- Mobile ---------- */
@media (max-width:760px){
  .vf{inset:10px}.vf-c{width:14px;height:14px}
  .hud{padding:10px 18px;font-size:10px}.hud-exp{gap:10px}.hud-exp b:nth-child(4),.hud-ch{display:none}
  .sound{top:16px;right:16px}.burst-skip{right:18px;top:18px}.burst-count{left:18px;top:20px}
  .burst-title{left:20px;right:20px;bottom:70px}.scroll-cue{right:18px;bottom:70px}
  .chapter-card{flex-direction:column;align-items:flex-start;justify-content:center;gap:10px}
  .pair,.pair-rev{grid-template-columns:1fr;padding:10vh 20px}
  .slow-stage{grid-template-columns:1fr;align-content:center;gap:24px;padding:10vh 20px}
  .slow-frame{height:56vh}
  .strip-label,.strip-hint{padding:0 20px}.strip-track figure{height:52vh}
  .iris-frame{height:70vh}
  .sheet{grid-template-columns:1fr 1fr;padding:10vh 20px}.sheet figure:last-child{grid-column:span 2;width:62%;justify-self:center}
  .bleed{height:70vh}.bleed-cap{left:20px}
  .quiet img{height:60vh}
  .shot-stage{padding:44px 14px 56px}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .shutter,.flash{display:none}
  .mv img,.sheet img,.strip-track img{transform:none!important;filter:none!important}
}