/* ─────────────────────────────────────────────────────────────
   S08 · VAEL
   Phase I   cold daylight, academic archive
   Phase II  warm static, untraceable
   Phase III plain white paper
   ───────────────────────────────────────────────────────────── */
:root{
  --ink:#0d0d0f;--night:#111113;--char:#1a1a1d;--smoke:#26262a;
  --grey:#8d8b86;--grey-2:#bcb9b1;
  --paper:#e9e6de;--paper-2:#dcd7cb;--paper-ink:#232228;--paper-soft:#5d5a58;
  --white-paper:#f6f3ec;
  --cream:#efe9dc;--cream-dim:#efe9dc99;
  --copper:#c28a55;--amber:#e1aa60;--gold:#e7c98f;
  --plum:#74566f;--plum-2:#a98aa3;--plum-deep:#3b2b39;
  --biro:#b3302a;--cold:#cfd8df;
  --display:'Instrument Serif',Georgia,serif;
  --serif:'Libre Caslon Text',Georgia,serif;
  --hand:'Caveat',cursive;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --sans:'Inter',system-ui,sans-serif;
  --brand:'Space Grotesk',var(--sans);
  --gutter:clamp(20px,5vw,72px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--cream);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
button,a{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--amber);outline-offset:5px}
::selection{background:var(--plum);color:#fff}
[hidden]{display:none!important}
h1,h2,h3,h4,p,blockquote,ol,ul,dl,dd{margin:0}
ol,ul{padding:0;list-style:none}
p{font-size:16px;line-height:1.75}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:fixed;top:8px;left:8px;transform:translateY(-160%);z-index:200;background:var(--cream);color:var(--ink);padding:12px 16px;font-size:14px}
.skip-link:focus{transform:none}
.wrap{width:100%;max-width:1320px;margin:0 auto;padding:0 var(--gutter);position:relative}
.mono-label{font:500 10.5px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;opacity:.7;display:inline-block}
.display{font:400 clamp(46px,7.2vw,112px)/.94 var(--display);letter-spacing:-.02em}
.display em,.display-sm em{font-style:italic}
.display-sm{font:400 clamp(34px,4.2vw,60px)/1 var(--display);letter-spacing:-.015em}
.noscript{font:13px var(--mono);opacity:.7;padding:20px 0}

/* film grain over everything */
.grain{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{background-position:0 0}20%{background-position:-60px 40px}40%{background-position:50px -80px}60%{background-position:-90px -20px}80%{background-position:70px 60px}100%{background-position:0 0}}

/* ───────── topbar ───────── */
.topbar{position:fixed;inset:0 0 auto;height:64px;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 var(--gutter);
  background:linear-gradient(#0e0e10e6,#0e0e10b8);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);border-bottom:1px solid #ffffff0f}
.brand{font:500 20px var(--brand);letter-spacing:-.04em;display:flex;align-items:center;gap:10px;white-space:nowrap}
.brand-divider{color:#ffffff30}
.brand-season{font:500 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--grey-2)}
.folio{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:baseline;gap:10px;font:500 10px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--grey-2);white-space:nowrap}
.folio-num{font:italic 400 20px var(--display);letter-spacing:0;color:var(--plum-2);min-width:1.4em;text-align:right}
.topbar nav{display:flex;align-items:center;gap:26px;font-size:13px;color:var(--grey-2)}
.topbar nav a{transition:color .2s}
.topbar nav a:hover{color:var(--cream)}
.nav-cta{border:1px solid #ffffff2a;padding:9px 15px;color:var(--cream)!important;border-radius:2px;transition:background .2s,border-color .2s}
.nav-cta:hover{background:var(--cream);color:var(--ink)!important;border-color:var(--cream)}
.read-progress{position:absolute;left:0;right:0;bottom:-1px;height:1px}
.read-progress i{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(var(--read,0));background:linear-gradient(90deg,var(--plum),var(--amber))}

/* ───────── title page ─────────
   A light table in a dark archive. The name is set in footnotes. */
.hero{position:relative;min-height:100svh;overflow:hidden;isolation:isolate;--hp:0;
  background:radial-gradient(90% 80% at 28% 38%,#1d1f24 0%,#121215 48%,#08080a 100%)}
.hero-table{position:absolute;inset:0;z-index:-3;pointer-events:none;opacity:.55;
  background:
    linear-gradient(90deg,#cfd8df08 1px,transparent 1px) 0 0/56px 56px,
    linear-gradient(#cfd8df08 1px,transparent 1px) 0 0/56px 56px;
  -webkit-mask-image:radial-gradient(70% 70% at 35% 45%,#000 20%,transparent 80%);mask-image:radial-gradient(70% 70% at 35% 45%,#000 20%,transparent 80%)}
.hero-beam{position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.hero-beam i{position:absolute;top:-30%;left:-20%;width:46%;height:170%;transform-origin:top left;mix-blend-mode:screen;filter:blur(18px);
  background:linear-gradient(90deg,transparent,#cfd8df12 30%,#dfe6ec1f 50%,#cfd8df12 70%,transparent);transform:rotate(-24deg);animation:shaft 18s ease-in-out infinite alternate}
.hero-beam i+i{left:6%;width:22%;opacity:.7;animation-duration:23s;animation-delay:-6s}
@keyframes shaft{from{transform:rotate(-27deg) translateX(-2%)}to{transform:rotate(-21deg) translateX(3%)}}
.hero-dust{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(120% 90% at 40% 45%,transparent 45%,#060607 100%)}
.hero-crops i{position:absolute;width:22px;height:22px;border:0 solid #efe9dc40}
.hero-crops i:nth-child(1){top:84px;left:calc(var(--gutter) - 8px);border-width:1px 0 0 1px}
.hero-crops i:nth-child(2){top:84px;right:calc(var(--gutter) - 8px);border-width:1px 1px 0 0}
.hero-crops i:nth-child(3){bottom:22px;left:calc(var(--gutter) - 8px);border-width:0 0 1px 1px}
.hero-crops i:nth-child(4){bottom:22px;right:calc(var(--gutter) - 8px);border-width:0 1px 1px 0}
.hero-scan{position:absolute;left:0;right:0;top:0;height:2px;z-index:5;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,#e8eef3 12%,#fff 50%,#e8eef3 88%,transparent);box-shadow:0 0 18px 4px #cfd8df88,0 0 120px 40px #cfd8df22}
.hero.scanning .hero-scan{animation:scan 1.8s cubic-bezier(.55,.05,.35,1) forwards}
@keyframes scan{0%{top:0;opacity:0}8%{opacity:1}88%{opacity:1}100%{top:100%;opacity:0}}

.hero-inner{position:relative;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:minmax(0,1fr);padding:92px var(--gutter) 30px}
.hero-meta{display:grid;grid-template-columns:1fr 1fr;gap:24px;font:500 10.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--grey-2)}
.hm-c{text-align:right}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--plum-2);margin-right:8px;box-shadow:0 0 12px var(--plum-2);vertical-align:1px;animation:blink 2.4s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
.hero-meta .dot{animation:none}

.hero-title-block{min-width:0;align-self:center;padding:2vh 0 1vh;transform:translateY(calc(var(--hp) * -70px));opacity:calc(1 - var(--hp) * .9)}
.hero-kicker{font:italic 400 clamp(20px,2vw,30px) var(--display);color:var(--grey-2);margin:0 0 .2em .35em}
.hero-kicker::before{content:"";display:inline-block;width:38px;height:1px;background:currentColor;opacity:.5;vertical-align:.32em;margin-right:14px}
.hero-title{position:relative;display:flex;align-items:flex-start;margin-left:-.02em;font:400 clamp(150px,27vw,430px)/.8 var(--display);letter-spacing:-.045em}
.title-text{display:inline-block;background:linear-gradient(180deg,#f4f1ea 0%,#d9d6cf 45%,#b79f86 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#e9e5dd}
.title-canvas{display:none;letter-spacing:0}
.hero-title.pending .title-text{opacity:0}
.hero-title.has-canvas .title-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero-title.has-canvas .title-canvas{display:block;flex:none;letter-spacing:0}
.title-fn{position:relative;font:italic 400 clamp(34px,4.4vw,72px)/1 var(--display);color:var(--plum-2);margin:.1em 0 0 .08em;letter-spacing:0;transition:color .2s;opacity:0;animation:fn-in .9s 1.7s var(--ease) forwards}
.title-fn:hover{color:var(--amber)}
@keyframes fn-in{from{opacity:0;transform:translateY(.3em)}to{opacity:1;transform:none}}
.hero-sub{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-top:clamp(18px,2.4vw,34px);padding-left:.2em}
/* Wide screens: the line sits beside the name, on its baseline. */
@media (min-width:1100px){
  .hero-title-block{display:grid;grid-template-columns:auto clamp(320px,24vw,460px);justify-content:space-between;column-gap:clamp(28px,3.5vw,72px);align-items:end}
  .hero-kicker{grid-column:1/-1}
  .hero-sub{flex-direction:column;align-items:flex-start;gap:30px;margin:0 0 1.2vh;padding:0 0 0 28px;border-left:1px solid #ffffff1c}
    .hero-line{font-size:clamp(22px,1.95vw,38px);text-wrap:balance}
}
.hero-line{font:400 clamp(26px,3vw,46px)/1.1 var(--display);max-width:16em;opacity:0;animation:rise 1.1s 1.2s var(--ease) forwards}
.hero-line em{color:var(--grey-2)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero-meta,.hero-kicker{opacity:0;animation:rise 1s .5s var(--ease) forwards}

.hero-foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:40px;padding-top:22px;border-top:1px solid #ffffff14;opacity:0;animation:rise 1s 1.5s var(--ease) forwards}
.countdown-label,.countdown-date{display:block;font:500 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--grey-2)}
.countdown-digits{display:flex;gap:clamp(14px,2vw,28px);margin:10px 0 12px}
.countdown-digits span{display:flex;flex-direction:column;position:relative}
.countdown-digits span+span::before{content:"";position:absolute;left:calc(clamp(14px,2vw,28px) * -.5);top:12%;height:52%;width:1px;background:#ffffff1a}
.countdown-digits b{font:400 clamp(40px,4.4vw,62px)/1 var(--display);font-variant-numeric:tabular-nums;color:var(--cream);min-width:1.1em}
.countdown-digits small{font:10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.countdown.open .countdown-digits b{color:var(--amber)}
.hero-footnote{justify-self:end;max-width:420px;position:relative;padding-top:14px}
.fn-rule{position:absolute;top:0;left:0;width:90px;height:1px;background:var(--grey-2);opacity:.6}
.hero-footnote p{font:italic 13px/1.65 var(--serif);color:var(--grey-2)}
.hero-footnote sup{font-style:normal;color:var(--plum-2);margin-right:3px}
.hero-footnote .fn-hand{font:500 26px/1 var(--hand);color:#e0574d;margin-top:8px;transform:rotate(-3deg);transform-origin:left;display:inline-block;clip-path:inset(0 100% 0 0);animation:write 1.2s 2.6s steps(14) forwards}
@keyframes write{to{clip-path:inset(-20% -12% -20% 0)}}
.scroll-cue{display:flex;flex-direction:column;align-items:center;gap:10px;font:500 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--grey)}
.scroll-cue i{width:1px;height:40px;background:linear-gradient(var(--grey),transparent);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--cream);animation:cue 2.2s ease-in-out infinite}
@keyframes cue{to{top:110%}}

/* ───────── shared chapter chrome ───────── */
.chapter-head{display:flex;align-items:center;gap:22px;padding-top:clamp(90px,12vw,170px);margin-bottom:clamp(44px,6vw,80px)}
.chapter-num{font:italic 400 clamp(54px,6vw,84px)/.8 var(--display)}
.chapter-rule{flex:1;height:1px;background:currentColor;opacity:.22}
.chapter-label{font:500 10.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;opacity:.65}

/* ───────── I · the papers (cold daylight) ───────── */
.chapter-paper{position:relative;color:var(--paper-ink);
  background:
    linear-gradient(180deg,#f2f0ea 0%,var(--paper) 30%,#e3e0d8 100%);
}
.chapter-paper::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    linear-gradient(90deg,#2322280a 1px,transparent 1px) 0 0/64px 64px,
    linear-gradient(#2322280a 1px,transparent 1px) 0 0/64px 64px}
.chapter-paper::after{content:"";position:absolute;inset:0 0 auto;height:600px;pointer-events:none;background:linear-gradient(160deg,#cfd8df55,transparent 60%)}
.margin-line{position:absolute;top:0;bottom:0;left:calc(var(--gutter) - 22px);width:1px;background:#b3302a40;z-index:1}
.chapter-paper .display em{color:var(--plum)}
.opening{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(40px,6vw,110px);align-items:end;position:relative;z-index:2}
.opening-copy p{font:17px/1.8 var(--serif);color:#3a383d}
.opening-copy p+p{margin-top:1.1em}
.dropcap::first-letter{float:left;font:400 4.6em/.8 var(--display);margin:.06em .1em 0 0;color:var(--plum)}
.hl{background:linear-gradient(transparent 58%,#74566f33 58%,#74566f33 92%,transparent 92%);padding:0 2px}

/* reading backwards */
.scrub{position:relative}
.scrub-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.scrub-years{height:380vh;z-index:2}
.years-layout{height:100%;display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:6vw;padding-top:64px}
.years-left .mono-label{color:var(--plum)}
.year-big{font:400 clamp(150px,23vw,350px)/.82 var(--display);letter-spacing:-.05em;font-variant-numeric:tabular-nums;margin:10px 0 18px -.04em;color:var(--paper-ink);
  background:linear-gradient(180deg,#2a292f,#56545a);-webkit-background-clip:text;background-clip:text;color:transparent}
.year-ruler{display:flex;gap:4px;align-items:flex-end;height:28px;max-width:560px}
.year-ruler i{flex:1;height:10px;background:#23222822;transition:height .3s var(--ease),background .3s}
.year-ruler i.read{background:#232228aa}
.year-ruler i.now{height:28px;background:var(--plum)}
.year-ruler i.hit{background:var(--biro)}
.year-stats{display:flex;gap:32px;margin-top:22px;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--paper-soft)}
.year-stats b{font:400 30px var(--display);letter-spacing:0;color:var(--paper-ink);margin-right:6px;font-variant-numeric:tabular-nums}
.timeline{display:flex;flex-direction:column;gap:6px;font-family:var(--hand);color:#2c3050}
.timeline li{display:grid;grid-template-columns:120px 1fr;align-items:center;column-gap:18px;opacity:.08;transform:translateX(18px);filter:blur(3px);transition:opacity .6s var(--ease),transform .6s var(--ease),filter .6s}
.timeline li.on{opacity:1;transform:none;filter:none}
.t-year{position:relative;font-size:clamp(34px,3vw,44px);font-weight:600;text-align:center;padding:4px 0}
.t-year::before{content:"";position:absolute;inset:-4px -8px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60' preserveAspectRatio='none'%3E%3Cpath d='M18 34C12 14 60 4 96 8s24 30 6 40S26 58 12 42 30 12 58 10' fill='none' stroke='%23b3302a' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  clip-path:inset(0 100% 0 0);transition:clip-path .9s .25s var(--ease)}
.timeline li.on .t-year::before{clip-path:inset(0 0 0 0)}
.t-place{font-size:clamp(34px,3.1vw,46px);font-weight:500;line-height:1}
.t-note{grid-column:2;font-size:22px;color:var(--plum);margin-top:-4px;transform:rotate(-1.5deg);transform-origin:left}
.t-final{display:block!important;margin-top:26px;padding-top:22px;border-top:1px dashed #2c305033}
.t-final span{display:block;font-size:clamp(26px,2.3vw,32px);line-height:1.15}
.t-final strong{display:block;font:italic 400 clamp(52px,5vw,78px)/1 var(--display);color:var(--plum);margin-top:12px}

/* casefile 01 */
.casefile{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,6vw,100px);align-items:center;padding:clamp(60px,8vw,120px) 0 60px;position:relative;z-index:2}
.casefile-copy .mono-label{color:var(--plum)}
.casefile-copy h3{margin:14px 0 26px}
.casefile-copy h3 em{color:var(--plum)}
.casefile-copy p{font:16px/1.8 var(--serif);color:#3a383d}
.casefile-copy p+p{margin-top:.9em}
.casefile-pull{font:italic 400 28px/1.2 var(--display)!important;text-wrap:balance;color:var(--paper-ink)!important;margin-top:24px!important;padding-left:18px;border-left:2px solid var(--biro)}
.flip-btn{margin-top:32px;display:inline-flex;align-items:center;gap:10px;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:13px 18px;border:1px solid #23222840;border-radius:2px;transition:background .2s,color .2s}
.flip-btn:hover{background:var(--paper-ink);color:var(--paper)}
.flip-btn span:first-child{font-size:16px;transition:transform .6s var(--ease)}
.flip-btn[aria-pressed="true"] span:first-child{transform:rotate(-180deg)}
.doc-stage{perspective:2000px;display:flex;justify-content:center}
.doc{position:relative;width:min(100%,560px);transform-style:preserve-3d;transition:transform 1.2s cubic-bezier(.6,0,.2,1);transform:rotate(-1.6deg) rotateY(0)}
.doc.flipped{transform:rotate(1.2deg) rotateY(180deg)}
.doc-face{backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:2px}
/* Safari ignores backface-visibility here, so swap the faces halfway through the turn. */
.doc-front{transition:visibility 0s .6s}
.doc-back{visibility:hidden;transition:visibility 0s .6s}
.doc.flipped .doc-front{visibility:hidden}
.doc.flipped .doc-back{visibility:visible}
.doc-front{position:relative;padding:clamp(28px,4vw,52px) clamp(24px,4vw,54px) clamp(26px,3.4vw,42px);color:#2a2724;
  background:
    radial-gradient(120% 80% at 50% 40%,transparent 50%,#b99b6a33 100%),
    linear-gradient(170deg,#f5f0e3,#ece4d1);
  box-shadow:0 1px 0 #fff inset,0 40px 80px -30px #2322288c,0 12px 24px -12px #23222866}
.doc-front::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background:linear-gradient(90deg,transparent 49.6%,#a88e6522 50%,transparent 50.4%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .47 0 0 0 0 .35 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E")}
.doc-head{display:flex;justify-content:space-between;font:italic 11px var(--serif);color:#6d665c;border-bottom:1px solid #2a272433;padding-bottom:8px;margin-bottom:24px}
.doc h4{font:700 clamp(17px,1.7vw,21px)/1.25 var(--serif);text-align:center}
.doc-authors{text-align:center;font:italic 12.5px var(--serif);margin:10px 0 22px;color:#4d4740}
.redact{background:#16151a;color:transparent;border-radius:1px;padding:0 1px;user-select:none}
.doc-cols{columns:2;column-gap:26px;font:11.4px/1.62 var(--serif);text-align:justify;hyphens:auto}
.doc-cols p{font-size:inherit;line-height:inherit;text-indent:1.2em;margin-bottom:.5em}
.doc-cols p:first-child{text-indent:0}
.doc-cols sup,.doc-fns sup{font-size:.7em}
.fn-hit{color:var(--biro);font-weight:700}
.doc-fns{position:relative;margin-top:18px;padding-top:10px;border-top:1px solid #2a272455;width:62%;font:10.4px/1.55 var(--serif);color:#3f3a33}
.doc-fns p{font-size:inherit;line-height:inherit}
.doc-fns p+p{margin-top:5px}
.fn7{position:relative}
.biro-circle{position:absolute;left:-26px;top:-16px;width:calc(100% + 50px);height:calc(100% + 30px);overflow:visible}
.biro-circle path,.biro-arrow path{fill:none;stroke:var(--biro);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s .3s var(--ease)}
.biro-note{position:absolute;left:calc(100% + 24px);bottom:14px;width:150px;font:600 25px/1 var(--hand)!important;color:var(--biro);transform:rotate(-7deg);opacity:0;transition:opacity .8s 1.4s}
.biro-arrow{position:absolute;left:calc(100% + 4px);bottom:0;width:44px;height:34px;transform:scaleX(1)}
.biro-arrow path{transition-delay:1.2s}
.casefile.revealed .biro-circle path,.casefile.revealed .biro-arrow path,.static .biro-circle path,.static .biro-arrow path{stroke-dashoffset:0}
.casefile.revealed .biro-note,.static .biro-note{opacity:1}
.doc-appendix{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:22px;padding-top:10px;border-top:1px dotted #2a272455;font:10px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#6d665c}
.doc-appendix .coord{color:var(--biro)}
.doc-back{position:absolute;inset:0;transform:rotateY(180deg);display:flex;flex-direction:column;justify-content:center;padding:clamp(30px,5vw,64px);
  background:radial-gradient(110% 80% at 30% 30%,#efe5cf,#e0d2b3);box-shadow:0 40px 80px -30px #2322288c}
.back-stamp{position:absolute;top:28px;right:28px;font:500 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--plum);border:1.5px solid var(--plum);padding:7px 11px;transform:rotate(6deg);opacity:.8}
.back-hand{font:500 clamp(32px,3.6vw,48px)/1.12 var(--hand)!important;color:#2c3050}
.back-hand span{color:var(--biro)}
.back-meta{position:absolute;bottom:26px;left:clamp(30px,5vw,64px);font:10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#6d665c}

.casefile-index{position:relative;z-index:2;border-top:1px solid #23222833}
.casefile-index li{display:grid;grid-template-columns:60px 220px 1fr auto;gap:24px;align-items:baseline;padding:20px 0;border-bottom:1px solid #23222822;transition:background .3s,padding .3s var(--ease)}
.casefile-index li:hover{background:#ffffff66;padding-left:14px}
.ci-num{font:500 11px var(--mono);color:var(--plum)}
.ci-title{font:400 26px/1.1 var(--display)}
.ci-note{font:italic 15px/1.5 var(--serif);color:var(--paper-soft)}
.ci-where{font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--paper-soft);white-space:nowrap}

/* research map */
.map-block{padding-top:clamp(90px,11vw,160px);padding-bottom:clamp(90px,11vw,160px);position:relative;z-index:2}
.map-head{display:grid;grid-template-columns:1fr .8fr;gap:60px;align-items:end;margin-bottom:40px}
.map-head .mono-label{color:var(--plum)}
.map-head h3{margin-top:14px}
.map-head h3 em{color:var(--plum)}
.map-head p{font:15.5px/1.8 var(--serif);color:#3a383d}
.map-sheet{position:relative;aspect-ratio:2.05/1;background:linear-gradient(170deg,#f6f3ec,#ebe6da);box-shadow:0 30px 70px -40px #23222899,0 0 0 1px #2322281a;overflow:hidden;transform:rotate(.35deg)}
.map-sheet::before{content:"";position:absolute;inset:14px;border:1px solid #2322281c;pointer-events:none}
#map-canvas,.map-overlay{position:absolute;inset:0;width:100%;height:100%}
.map-overlay .thread{fill:none;stroke:var(--biro);stroke-width:1.1;stroke-dasharray:4 4;opacity:.55}
.map-overlay .ring{fill:none;stroke:var(--biro);stroke-width:1.8;stroke-linecap:round;transition:stroke-width .3s,transform .4s var(--ease);transform-box:fill-box;transform-origin:center}
.map-overlay .pin{fill:var(--biro)}
.map-overlay .pulse{fill:none;stroke:var(--biro);stroke-width:1;opacity:0;transform-box:fill-box;transform-origin:center}
.map-overlay .lbl{font:500 11px var(--mono);fill:#2322289e;letter-spacing:.04em}
.map-overlay g.active .ring{stroke-width:3;transform:scale(1.25)}
.map-overlay g.active .pulse{animation:pulse 1.6s ease-out infinite}
.map-overlay g.active .lbl{fill:var(--biro)}
@keyframes pulse{0%{opacity:.8;transform:scale(.6)}100%{opacity:0;transform:scale(3.2)}}
.map-stamp{position:absolute;top:8%;right:5%;font:700 15px/1.1 var(--mono);letter-spacing:.18em;color:var(--biro);border:2px solid var(--biro);padding:10px 14px;transform:rotate(-8deg);opacity:.72;text-align:center;mix-blend-mode:multiply}
.map-stamp small{font-size:8.5px;letter-spacing:.12em;font-weight:500}
.map-scrawl{position:absolute;left:5%;bottom:8%;font:600 clamp(22px,2.4vw,32px) var(--hand);color:var(--plum);transform:rotate(-4deg)}
.coord-index{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#23222822;margin-top:34px;border:1px solid #23222822}
.coord-index li{background:var(--paper);padding:18px 18px 16px;display:grid;gap:6px;cursor:default;transition:background .25s}
.coord-index li:hover,.coord-index li.active{background:#f7f5ef}
.c-num{font:500 10px var(--mono);color:var(--plum)}
.c-val{font:500 13.5px var(--mono);letter-spacing:-.01em}
.c-name{font:italic 17px var(--display);justify-self:start}
.redact-line span{background:var(--paper-ink);color:transparent;user-select:none;padding:0 2px}
.c-where{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--paper-soft)}

/* ───────── II · the voice (static amber) ───────── */
.chapter-voice{position:relative;overflow:hidden;isolation:isolate;padding-bottom:clamp(110px,14vw,200px);
  background:radial-gradient(70% 60% at 80% 30%,#3a281566 0%,transparent 70%),radial-gradient(60% 60% at 10% 90%,#3b2b3955 0%,transparent 70%),#0f0d0b}
.static-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-2;opacity:.07;mix-blend-mode:screen}
.scanlines{position:absolute;inset:0;z-index:-1;pointer-events:none;background:repeating-linear-gradient(#0000 0 2px,#00000038 2px 4px);opacity:.6}
.chapter-voice .display em{color:var(--amber)}
.voice-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(40px,6vw,100px);align-items:start}
.voice-copy h2{margin-bottom:34px}
.voice-copy p{color:#e9e0d0bb;font-size:16.5px}
.voice-copy p+p{margin-top:1em}
.voice-quote{margin-top:44px;padding:4px 0 4px 26px;border-left:2px solid var(--amber);font:italic 400 clamp(24px,2.3vw,32px)/1.25 var(--display);color:var(--cream)}
.voice-quote cite{display:block;margin-top:16px;font:500 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--amber);font-style:normal}
.console{position:relative;border:1px solid #e1aa6030;background:linear-gradient(180deg,#1a1510e6,#120f0ce6);border-radius:3px;box-shadow:0 0 0 1px #00000080,0 50px 100px -40px #000,0 0 90px -30px #e1aa6035;overflow:hidden}
.console::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 60% at 50% 0%,#e1aa600c,transparent 60%)}
.console-top,.console-bottom{display:flex;align-items:center;gap:12px;padding:14px 20px;font:500 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#e1aa60b3;border-bottom:1px solid #e1aa601f}
.console-bottom{border-bottom:0;border-top:1px solid #e1aa601f;justify-content:space-between;color:#efe9dc55}
.console-id{margin-left:auto;color:#efe9dc55}
.rec{width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px var(--amber);animation:blink 1.1s steps(2) infinite}
.trace{padding:18px 20px 6px}
.trace-hops{display:flex;align-items:center;gap:0}
.trace-hops .hop{flex:none;width:9px;height:9px;border:1px solid #e1aa6066;border-radius:50%;transition:background .3s,box-shadow .3s}
.trace-hops .link{flex:1;height:1px;background:#e1aa6026;position:relative;overflow:hidden}
.trace-hops .link::after{content:"";position:absolute;inset:0;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .35s linear}
.trace-hops .hop.on{background:var(--amber);box-shadow:0 0 10px var(--amber)}
.trace-hops .link.on::after{transform:scaleX(1)}
.trace-hops .hop.lost{border-style:dashed;border-color:#efe9dc55;background:none;box-shadow:none;width:14px;height:14px}
.trace-status{margin-top:10px;font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#efe9dc66;min-height:14px}
.trace-status b{color:var(--amber);font-weight:500}
.wave{display:flex;align-items:center;gap:2px;height:64px;padding:0 20px;margin:10px 0 4px}
.wave i{flex:1;height:calc(var(--h,.06)*100%);min-height:2px;background:linear-gradient(var(--amber),#c28a55);opacity:.8;border-radius:1px;transition:height .12s linear}
.transcript{padding:12px 24px 26px;display:flex;flex-direction:column;gap:18px;min-height:380px}
.transcript li{opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s var(--ease)}
.transcript li.on{opacity:1;transform:none}
.static .transcript li{opacity:1;transform:none}
.who{display:block;font:500 9.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;margin-bottom:6px}
.t-cassian .who{color:var(--amber)}
.t-cassian p{font:400 clamp(21px,1.9vw,26px)/1.3 var(--display);color:var(--cream)}
.t-milo{align-self:flex-end;text-align:right;padding:10px 16px;border:1px solid #a98aa344;background:#74566f1f;border-radius:2px}
.t-milo .who{color:var(--plum-2)}
.t-milo p{font:italic 400 22px/1.2 var(--display);color:#e3d3df}
.t-gap{text-align:center;font:500 10px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#efe9dc4d}
.caret{display:inline-block;width:.5em;height:.95em;background:var(--amber);margin-left:3px;vertical-align:-.1em;animation:blink .8s steps(2) infinite}

/* ───────── the crossing ───────── */
.crossing{background:#050507;position:relative}
.scrub-crossing{height:460vh}
.crossing-sticky{background:radial-gradient(80% 60% at 50% 50%,#12101a 0%,#050507 70%)}
.stars{position:absolute;inset:0;width:100%;height:100%}
.crossing-hud{position:absolute;top:96px;left:var(--gutter);right:var(--gutter);display:grid;grid-template-columns:1fr auto 1fr;align-items:start;font:500 10.5px/1.6 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#efe9dcaa}
.crossing-hud small{color:#efe9dc55;font-size:9.5px}
.hud-c{text-align:center}
.hud-c b{display:block;font:400 clamp(38px,4vw,56px)/1 var(--display);letter-spacing:0;color:var(--cream);font-variant-numeric:tabular-nums}
.hud-r{text-align:right}
.path{position:absolute;left:var(--gutter);right:var(--gutter);top:46%;height:0}
.path-line{position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,#9fb8d855,#efe9dc22 50%,#a98aa355)}
.path-line::before,.path-line::after{content:"";position:absolute;top:-3px;width:1px;height:7px;background:#efe9dc55}
.path-line::before{left:50%}
.earth{position:absolute;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#d7e6f5,#5f86ad 60%,#1f3350);box-shadow:0 0 24px #7ea6d0aa,0 0 80px #7ea6d044}
.record{position:absolute;top:0;left:calc(var(--rx,0)*100%);width:clamp(40px,4.4vw,62px);aspect-ratio:1;transform:translate(-50%,-50%);filter:drop-shadow(0 0 18px #e7c98f88);opacity:var(--ro,0)}
.record svg{width:100%;height:100%;animation:spin 9s linear infinite;display:block}
@keyframes spin{to{transform:rotate(360deg)}}
.record::after{content:"";position:absolute;right:100%;top:50%;height:1px;width:var(--rtrail,0px);background:linear-gradient(90deg,transparent,#e7c98f66);transform:translateY(-50%)}
.signal{position:absolute;top:0;left:calc(var(--sx,1)*100%);width:0;height:0;opacity:var(--so,0)}
.signal i{position:absolute;left:0;top:0;width:80px;height:80px;margin:-40px 0 0 -40px;border-radius:50%;border:1.5px solid transparent;border-left-color:#e2c3dc;animation:wave 2.4s ease-out infinite}
.signal i:nth-child(2){animation-delay:.6s}
.signal i:nth-child(3){animation-delay:1.2s}
.signal i:nth-child(4){animation-delay:1.8s}
.signal::before{content:"";position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:radial-gradient(circle,#fff,#d7b4d1 40%,#74566f 70%,transparent 72%);box-shadow:0 0 30px 6px #a98aa3aa,0 0 90px 20px #74566f66}
.signal::after{content:"";position:absolute;left:0;top:0;height:1px;width:var(--strail,0px);background:linear-gradient(90deg,#a98aa388,transparent);transform:translateY(-50%)}
@keyframes wave{0%{transform:scale(.2);opacity:0}20%{opacity:1}100%{transform:scale(1.6) translateX(-20px);opacity:0}}
.cross-flash{position:absolute;left:50%;top:0;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;pointer-events:none;opacity:var(--flash,0);
  background:radial-gradient(circle,#fff8 0,#e7c98f44 12%,#a98aa322 30%,transparent 62%)}
.crossing-lines{position:absolute;left:var(--gutter);right:var(--gutter);top:58%;bottom:12%;display:grid;place-items:start center}
.cl{grid-area:1/1;text-align:center;font:400 clamp(32px,4.4vw,66px)/1.06 var(--display);letter-spacing:-.01em;color:var(--cream);opacity:0;transform:translateY(16px);transition:opacity .5s,transform .7s var(--ease),filter .5s;filter:blur(6px)}
.cl em{color:var(--gold)}
.cl.on{opacity:1;transform:none;filter:none}
.cl-final{font-size:clamp(38px,5.4vw,84px)}
.crossing-attr{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);font:500 10px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#efe9dc55;white-space:nowrap}

/* ───────── III (plain white paper) ───────── */
.chapter-list{position:relative;background:var(--white-paper);color:#1e1d22;overflow:clip}
.chapter-list::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 50% at 50% 0%,#ffffff,transparent 70%)}
.chapter-list .display em{color:var(--plum)}
.list-intro{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(40px,6vw,110px);align-items:end;position:relative}
.list-intro p{font:17px/1.8 var(--serif);color:#44414a}
.scrub-list{height:420vh}
.list-sticky{display:block}
.post-scene{position:absolute;left:50%;top:var(--env-top,60%);width:var(--env-w,440px);height:calc(var(--env-w,440px)/1.5);transform:translateX(-50%)}
.env-back,.env-front,.env-flap{position:absolute;left:0;right:0;transform:translateY(var(--env-y,0px));opacity:var(--env-o,1)}
.env-back{top:0;bottom:0;background:#e9e5dc;border-radius:3px;box-shadow:0 40px 80px -40px #1e1d2255}
.env-front{top:0;bottom:0;z-index:3;border-radius:3px;
  background:
    linear-gradient(to top right,transparent calc(50% - .6px),#1e1d2214 50%,transparent calc(50% + .6px)) left bottom/50% 100% no-repeat,
    linear-gradient(to top left,transparent calc(50% - .6px),#1e1d2214 50%,transparent calc(50% + .6px)) right bottom/50% 100% no-repeat,
    linear-gradient(175deg,#fbf9f4,#efebe2);
  clip-path:polygon(0 0,50% 52%,100% 0,100% 100%,0 100%);box-shadow:0 1px 0 #fff inset}
.env-label{position:absolute;left:50%;top:62%;transform:translate(-50%,-50%);font:500 clamp(13px,1.6vw,17px) var(--mono);letter-spacing:.34em;background:#fff;padding:9px 18px 9px 24px;box-shadow:0 0 0 1px #1e1d2214;color:#1e1d22}
.env-noreturn{position:absolute;left:14px;bottom:12px;font:italic 12px var(--serif);color:#1e1d2255}
.env-flap{top:0;height:56%;z-index:4;transform-origin:top;transform:translateY(var(--env-y,0px)) rotateX(var(--flap,0deg));
  background:linear-gradient(180deg,#f3f0e8,#e6e1d6);clip-path:polygon(0 0,100% 0,50% 100%);backface-visibility:visible;filter:drop-shadow(0 2px 2px #0000001a)}
.env-flap.open{z-index:1}
.sheet{position:absolute;left:5%;right:5%;top:6%;aspect-ratio:1/1.34;z-index:2;transform:translateY(var(--sheet-y,0px)) scale(var(--sheet-s,1)) rotate(var(--sheet-r,0deg));transform-origin:center;transition:none}
.sheet-inner{position:absolute;inset:0;background:linear-gradient(175deg,#fffefb,#faf7f0);box-shadow:0 30px 60px -30px #1e1d2270,0 0 0 1px #1e1d220f;border-radius:1px;overflow:hidden}
.sheet-inner::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(transparent 0 calc(var(--rule,18px) - 1px),#6f8fb31a calc(var(--rule,18px) - 1px) var(--rule,18px));background-position:0 calc(var(--rule-o,40px));opacity:.9}
.sheet-lines{position:absolute;inset:0;width:100%;height:100%}
.sheet-lines .ink{fill:none;stroke:#26273a;stroke-width:1.05;stroke-linecap:round;stroke-linejoin:round;opacity:.86}
.sheet-lines .num{font:500 10px var(--hand);fill:#26273a;opacity:.6}
.sheet-lines .strike{fill:none;stroke:#1b1c2c;stroke-width:2.1;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--strike,0))}
.post-scene.clip .sheet{clip-path:inset(-400% -10% calc(100% - var(--clip-b,100%)) -10%)}
.list-caption{position:absolute;left:var(--gutter);bottom:14vh;width:min(420px,34vw);display:grid}
.lc{grid-area:1/1;font:400 clamp(30px,3.2vw,48px)/1.08 var(--display);opacity:0;transform:translateY(12px);filter:blur(5px);transition:opacity .5s,transform .7s var(--ease),filter .5s}
.lc em{color:var(--plum)}
.lc.on{opacity:1;transform:none;filter:none}
.list-after{text-align:center;padding:clamp(40px,6vw,80px) 0 clamp(110px,14vw,190px)}
.la-big{font:400 clamp(30px,3.6vw,54px)/1.1 var(--display)}
.la-big em{color:var(--plum)}
.la-hand{font:600 clamp(60px,7vw,110px)/1 var(--hand);color:var(--plum);margin:.35em 0 .3em;transform:rotate(-4deg)}
.la-next{font:500 10.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#1e1d2288}

/* ───────── appendices ───────── */
.appendix{position:relative;padding-bottom:clamp(90px,12vw,170px);
  background:linear-gradient(180deg,#141416 0%,#111113 100%)}
.appendix::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,var(--plum),transparent)}
.out-of-scope{padding-top:clamp(100px,13vw,180px);display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(40px,6vw,110px);align-items:end}
.out-of-scope .mono-label{grid-column:1/-1;color:var(--plum-2)}
.out-of-scope .display em{color:var(--plum-2)}
.out-of-scope p{color:#efe9dcaa}
.stats{display:grid;grid-template-columns:repeat(6,1fr);margin-top:clamp(56px,7vw,100px);border-top:1px solid #ffffff1a;border-bottom:1px solid #ffffff1a}
.stats>div{padding:26px 20px 24px;border-left:1px solid #ffffff12}
.stats>div:first-child{border-left:0;padding-left:0}
.stats dt{font:500 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.stats dd{font:400 clamp(46px,5vw,76px)/1 var(--display);margin-top:10px;font-variant-numeric:tabular-nums}
.tracks{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:56px}
.folder{position:relative;padding:48px clamp(26px,3vw,44px) 30px;border-radius:0 6px 6px 6px;margin-top:30px;min-height:320px;display:flex;flex-direction:column}
.folder-tab{position:absolute;bottom:100%;left:0;padding:9px 22px 7px;border-radius:6px 6px 0 0;font:500 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase}
.folder-free{background:linear-gradient(165deg,#c9ad7f,#b09063);color:#2a2116;box-shadow:inset 0 1px 0 #ffffff40}
.folder-free .folder-tab{background:#c9ad7f}
.folder-pro{background:linear-gradient(165deg,#5a4257,#3b2b39);color:var(--cream);box-shadow:inset 0 1px 0 #ffffff1a}
.folder-pro .folder-tab{background:#5a4257}
.folder::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.35;mix-blend-mode:multiply;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E")}
.folder::after{content:"";position:absolute;top:18px;right:22px;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f0e0bd,#8d7449);box-shadow:0 1px 2px #0006}
.folder h3{font:400 clamp(32px,3.2vw,46px)/1 var(--display);position:relative}
.folder p{margin-top:16px;font:15.5px/1.7 var(--serif);opacity:.85;position:relative;max-width:34em}
.folder ul{margin-top:22px;display:flex;flex-direction:column;gap:6px;position:relative}
.folder li{font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;padding-left:18px;position:relative;opacity:.8}
.folder li::before{content:"—";position:absolute;left:0}
.folder-foot{margin-top:auto;padding-top:28px;font:500 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;opacity:.6;position:relative}

.sub-head{display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:start;padding-top:clamp(100px,12vw,160px);margin-bottom:40px}
.app-num{font:italic 400 44px/1 var(--display);color:var(--plum-2)}
.sub-head p{color:#efe9dc99;margin-top:12px;max-width:40em}

/* contact sheet */
.contact{display:grid;grid-template-columns:1.55fr 1fr;gap:28px;align-items:start}
.sheet-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;padding:26px 16px;background:#0a0a0b;border-radius:3px;position:relative;box-shadow:0 0 0 1px #ffffff0d}
.sheet-grid::before,.sheet-grid::after{content:"";position:absolute;left:10px;right:10px;height:8px;
  background:radial-gradient(circle at 5px 4px,#1f1f22 2.2px,transparent 2.6px) 0 0/14px 8px repeat-x}
.sheet-grid::before{top:8px}
.sheet-grid::after{bottom:8px}
.cell{position:relative;aspect-ratio:1/1.12;background:linear-gradient(160deg,#232327,#18181b);border:1px solid #ffffff10;border-radius:2px;display:flex;flex-direction:column;justify-content:space-between;padding:6px 6px 5px;text-align:left;transition:transform .25s var(--ease),border-color .2s,background .2s}
.cell:hover{transform:translateY(-2px);border-color:#ffffff30}
.cell[aria-selected="true"]{border-color:var(--amber);background:linear-gradient(160deg,#2d2720,#1c1915);box-shadow:0 0 0 1px var(--amber),0 10px 30px -10px #e1aa6055}
.cell-num{font:500 9.5px var(--mono);color:#e1aa60c0;letter-spacing:.04em}
.cell-glyphs{display:flex;flex-direction:column;gap:2px;font:11px/1 var(--mono);color:#efe9dc88}
.cell-glyphs span{display:flex;align-items:center;gap:4px}
.cell-glyphs b{font-weight:500;font-size:7.5px;letter-spacing:.08em;color:#efe9dc44}
.cell-glyphs .pro{color:var(--plum-2)}
.cell.story::after{content:"";position:absolute;inset:-5px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' preserveAspectRatio='none'%3E%3Cpath d='M12 18C20 4 50 6 54 26S40 58 22 54 2 34 10 20 30 6 40 8' fill='none' stroke='%23d0443b' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;opacity:.7}
.cell.empty{opacity:.35}
.loupe{position:sticky;top:90px;background:linear-gradient(170deg,#1c1c1f,#141416);border:1px solid #ffffff12;border-radius:4px;padding:26px;min-height:420px}
.loupe-level{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid #ffffff14;padding-bottom:14px;margin-bottom:20px}
.loupe-level b{font:400 64px/1 var(--display)}
.loupe-level span{font:500 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.loupe-item{display:grid;grid-template-columns:92px 1fr;gap:18px;align-items:start;padding:14px 0}
.loupe-item+.loupe-item{border-top:1px dashed #ffffff14}
.loupe-track{font:500 9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.loupe-track.pro{color:var(--plum-2)}
.loupe-item h4{font:400 26px/1.1 var(--display);margin:6px 0 6px}
.loupe-item p{font-size:13.5px;line-height:1.6;color:#efe9dc99}
.loupe-type{font:500 9.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.loupe-empty{font:italic 15px var(--serif);color:#efe9dc55;padding:14px 0}
.preview{width:92px;height:92px;border-radius:8px;overflow:hidden;position:relative;display:grid;place-items:center;background:#1f1f22;box-shadow:0 0 0 1px #ffffff12}
.preview svg{width:100%;height:100%}
.preview .accent-card{position:absolute;inset:0;border-radius:0;aspect-ratio:auto;padding:0}
.preview .accent-card>*:not(.acc-art){display:none}
.preview-title{font:italic 400 15px/1.1 var(--display);text-align:center;padding:8px;color:var(--cream)}
.preview-doc{background:linear-gradient(170deg,#f5f0e3,#e6dcc6);color:#2a2724;font:italic 11px/1.25 var(--serif);padding:10px;text-align:left;align-content:start}
.preview-doc small{display:block;font:500 7px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--biro);margin-bottom:6px;font-style:normal}
.preview-coord{font:500 10px/1.5 var(--mono);text-align:center;color:var(--biro);background:#f1ede4}

/* accents */
.accents{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.accent-card{position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;padding:26px 24px;display:flex;flex-direction:column;isolation:isolate;box-shadow:0 0 0 1px #ffffff0d,0 30px 60px -40px #000;transition:transform .5s var(--ease)}
.accent-card:hover{transform:translateY(-6px)}
.acc-art{position:absolute;inset:0;z-index:-1}
.acc-art svg{position:absolute;inset:0;width:100%;height:100%}
.acc-tag{font:600 11px var(--mono);letter-spacing:.08em;color:#efe9dcb3}
.acc-name{font:600 clamp(22px,2vw,28px)/1.1 var(--sans);letter-spacing:-.02em;margin-top:8px}
.acc-line{font-size:15px;line-height:1.35;color:#efe9dcb0;margin-top:8px;max-width:15em}
.acc-foot{margin-top:auto;display:flex;justify-content:space-between;font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#efe9dc88}
.acc-foot .pro{color:var(--plum-2)}

/* frames */
.frames{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:20px}
.frame-card{background:#19191b;border-radius:10px;padding:26px 18px 22px;text-align:center;box-shadow:0 0 0 1px #ffffff0a}
.frame-card h4{font:600 18px var(--sans);letter-spacing:-.01em}
.frame-card svg{width:min(78%,190px);aspect-ratio:1;margin:20px auto 16px;display:block;transition:transform .6s var(--ease)}
.frame-card:hover svg{transform:rotate(-8deg) scale(1.04)}
.frame-card span{font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.frame-card span.pro{color:var(--plum-2)}

/* titles */
.titles{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:20px}
.title-plate{background:linear-gradient(170deg,#1d1d20,#161618);border-radius:10px;padding:20px 18px;box-shadow:0 0 0 1px #ffffff0a;display:flex;flex-direction:column;gap:12px}
.title-plate .tp-user{display:flex;align-items:center;gap:10px}
.tp-avatar{width:40px;height:40px;flex:none}.tp-avatar svg{width:100%;height:100%;display:block}
.tp-user span{font:600 14px var(--sans)}
.tp-title{font:italic 400 24px/1.05 var(--display);color:var(--gold)}
.tp-line{font-size:12.5px;line-height:1.5;color:#efe9dc88}
.tp-where{font:500 9.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-top:auto}
.tp-where.pro{color:var(--plum-2)}

/* ledger */
.ledger{background:linear-gradient(175deg,#efebe2,#e5e0d4);color:var(--paper-ink);border-radius:2px;padding:28px clamp(18px,3vw,40px) 26px clamp(40px,5vw,72px);position:relative;box-shadow:0 40px 80px -40px #000}
.ledger::before{content:"";position:absolute;top:0;bottom:0;left:clamp(26px,3.4vw,50px);width:1px;background:#b3302a66}
.ledger-controls{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.filters{display:flex;gap:6px}
.filter{padding:9px 14px;border:1px solid #23222833;border-radius:2px;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;transition:background .2s,color .2s}
.filter span{opacity:.5;margin-left:4px}
.filter.active{background:var(--paper-ink);color:var(--paper);border-color:var(--paper-ink)}
.ledger-label{font:500 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--paper-soft)}
.ledger-head,.challenge-row{display:grid;grid-template-columns:60px 90px minmax(0,1fr) 90px 90px;gap:16px;align-items:center}
.ledger-head{font:500 9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--paper-soft);padding:0 0 10px;border-bottom:1.5px solid var(--paper-ink)}
.challenge-row{padding:13px 0;border-bottom:1px solid #6f8fb333;font-size:14px}
.challenge-id{font:500 11px var(--mono);color:var(--paper-soft)}
.challenge-date{font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.challenge-name{font:400 21px/1.2 var(--display)}
.challenge-name.sealed{height:15px;width:var(--redaction-width,120px);max-width:100%;background:#1a1a1e;border-radius:1px}
.challenge-reward,.challenge-status{font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.challenge-row.story .challenge-reward{color:var(--biro)}
.challenge-row.story .challenge-name:not(.sealed){text-decoration:underline;text-decoration-color:#b3302a88;text-decoration-thickness:1.5px;text-underline-offset:5px}
.challenge-status{color:var(--paper-soft)}
.challenge-row.live .challenge-status{color:var(--plum)}
.challenge-row.live .challenge-status::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--plum);margin-right:7px;vertical-align:1px}
.ledger-note{margin-top:20px;font:italic 13.5px/1.6 var(--serif);color:var(--paper-soft)}

/* closing */
.closing{position:relative;overflow:hidden;min-height:92vh;display:grid;place-items:center;text-align:center;padding:120px var(--gutter);
  background:radial-gradient(60% 50% at 50% 60%,#2a1f2a 0%,#111113 70%)}
.closing::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 35%,#cfd8df0d 45%,transparent 55%)}
.closing-inner{position:relative}
.closing .mono-label{color:var(--plum-2)}
.closing h2{margin:22px 0 22px}
.closing h2 em{color:var(--gold)}
.closing p{color:var(--grey-2);font:italic 18px var(--serif)}
.download{display:inline-flex;align-items:center;gap:16px;margin-top:40px;padding:18px 30px;background:var(--cream);color:var(--ink);font:600 15px var(--sans);border-radius:2px;transition:transform .3s var(--ease),box-shadow .3s}
.download:hover{transform:translateY(-3px);box-shadow:0 20px 40px -16px #e7c98f88}
.closing-note{display:block;margin-top:18px;font:500 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:28px var(--gutter);background:#0b0b0d;border-top:1px solid #ffffff0d;font:500 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.foot div{display:flex;gap:24px}
.foot a:hover{color:var(--cream)}

/* reveal */
.reveal.waiting{opacity:0;transform:translateY(28px);filter:blur(4px)}
.reveal.revealed{opacity:1;transform:none;filter:none;transition:opacity 1s var(--ease),transform 1.1s var(--ease),filter 1s}

/* ───────── responsive ───────── */
@media (max-width:1100px){
  .topbar nav a:not(.nav-cta){display:none}
  .accents{grid-template-columns:repeat(2,1fr)}
  .frames{grid-template-columns:repeat(2,1fr)}
  .titles{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(3,1fr)}
  .stats>div:nth-child(4){border-left:0;padding-left:0}
  .stats>div:nth-child(n+4){border-top:1px solid #ffffff12}
  .contact{grid-template-columns:1fr}
  .loupe{position:relative;top:0}
}
@media (max-width:860px){
  .folio{display:none}
  .hero-foot{grid-template-columns:1fr 1fr}
  .hero-foot .scroll-cue{display:none}
  .hero-meta{grid-template-columns:1fr 1fr}
  .opening,.list-intro,.out-of-scope,.map-head,.voice-grid,.casefile{grid-template-columns:1fr}
  .years-layout{grid-template-columns:1fr;align-content:center;gap:28px;padding-top:80px}
  .year-big{font-size:clamp(110px,30vw,190px);margin:6px 0 12px}
  .timeline{gap:0}
  .timeline li{grid-template-columns:82px 1fr;column-gap:12px}
  .t-year{font-size:28px}
  .t-place{font-size:30px}
  .t-note{font-size:18px}
  .t-final{margin-top:12px;padding-top:12px}
  .t-final span{font-size:22px}
  .t-final strong{font-size:44px;margin-top:4px}
  .year-stats{display:none}
  .casefile-index li{grid-template-columns:40px 1fr;gap:4px 14px}
  .ci-note,.ci-where{grid-column:2}
  .coord-index{grid-template-columns:repeat(2,1fr)}
  .map-sheet{aspect-ratio:1.5/1}
  .tracks{grid-template-columns:1fr}
  .sub-head{grid-template-columns:1fr;gap:6px}
  .list-caption{left:var(--gutter);right:var(--gutter);width:auto;top:96px;bottom:auto;text-align:center}
  .crossing-hud{top:84px}
  .cl{font-size:clamp(28px,7.4vw,44px)}
  .cl-final{font-size:clamp(32px,8.4vw,50px)}
  .ledger-head{display:none}
  .challenge-row{grid-template-columns:40px minmax(0,1fr) auto;grid-template-areas:"id name status" "id date reward";gap:2px 12px}
  .challenge-id{grid-area:id}
  .challenge-name{grid-area:name}
  .challenge-date{grid-area:date;color:var(--paper-soft)}
  .challenge-reward{grid-area:reward;text-align:right}
  .challenge-status{grid-area:status;text-align:right}
}
@media (max-width:600px){
  .hero-meta{grid-template-columns:1fr;gap:6px}
  .hm-c{display:none}
  .hero-foot{grid-template-columns:1fr;gap:26px}
  .hero-footnote{justify-self:start}
  .scroll-cue{display:none}
  .hero-title{font-size:43vw}
  .hero-crops i:nth-child(1),.hero-crops i:nth-child(2){top:74px}
  .brand-season{display:none}
  .doc-cols{columns:1}
  .doc-fns{width:100%}
  .biro-note{position:relative;left:auto;bottom:auto;width:auto;margin-top:16px;text-align:right;font-size:22px!important;transform:rotate(-3deg)}
  .biro-arrow{display:none}
  .accents,.frames{grid-template-columns:1fr 1fr;gap:12px}
  .accent-card{padding:18px 16px;border-radius:12px}
  .acc-name{font-size:18px}
  .acc-line{font-size:12.5px}
  .frame-card{padding:18px 10px}
  .frame-card h4{font-size:15px}
  .titles{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats>div{padding:20px 0 18px 16px}
  .stats>div:nth-child(odd){border-left:0;padding-left:0}
  .stats>div:nth-child(4){border-left:1px solid #ffffff12;padding-left:16px}
  .stats>div:nth-child(n+3){border-top:1px solid #ffffff12}
  .sheet-grid{gap:3px;padding:22px 8px}
  .cell{padding:3px;aspect-ratio:1/1.25;justify-content:center;align-items:center}
  .cell-glyphs{display:none}
  .cell-num{font-size:8.5px}
  .cell.story::after{inset:-3px}
  .loupe-item{grid-template-columns:72px 1fr;gap:14px}
  .preview{width:72px;height:72px}
  .coord-index li{padding:14px 12px}
  .c-val{font-size:11.5px}
  .map-stamp{font-size:10px;padding:6px 8px}
  .foot{flex-direction:column;align-items:flex-start}
}

/* motion off: show final states, no scrubbing */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .grain,.hero-beam i,.record svg,.signal i,.dot,.rec,.caret,.scroll-cue i::after{animation:none!important}
  .title-fn,.hero-line,.hero-meta,.hero-kicker,.hero-foot,.hero-footnote .fn-hand{animation:none!important;opacity:1;clip-path:none}
  .timeline li,.cl,.lc,.transcript li{transition:none!important}
}
.static .scrub{height:auto!important}
.static .scrub-sticky{position:relative;height:auto;min-height:0;overflow:visible}
.static .scrub-years .scrub-sticky{padding:40px 0 80px}
.static .timeline li{opacity:1;transform:none;filter:none}
.static .timeline li .t-year::before{clip-path:none}
.static .crossing-sticky{min-height:100svh}
.static .cl{position:relative;opacity:1;transform:none;filter:none;grid-area:auto;margin-bottom:.6em}
.static .crossing-lines{position:relative;top:auto;left:auto;right:auto;padding:52vh var(--gutter) 80px;display:block}
.static .list-sticky{min-height:0;padding-bottom:60px}
.static .post-scene{position:relative;left:auto;top:auto;transform:none;margin:0 auto;height:auto;width:min(86vw,440px)}
.static .post-scene .env-back,.static .post-scene .env-front,.static .post-scene .env-flap{display:none}
.static .sheet{position:relative;left:auto;right:auto;top:auto;transform:none}
.static .list-caption{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto;text-align:center;margin:40px auto 0;display:block}
.static .lc{opacity:1;transform:none;filter:none;margin-bottom:.4em}
.static .lc:not(.lc-final){display:none}

/* ───────── sealed until release ───────── */
.bar{display:inline-block;vertical-align:middle;height:.62em;width:var(--w,6em);max-width:100%;background:currentColor;opacity:.88;border-radius:1px}
.ink-bar{height:.5em;background:#2c3050;opacity:.75;transform:rotate(-1deg)}
.bars{display:flex;flex-direction:column;gap:12px;margin:26px 0}
.bars span{display:block;height:12px;width:var(--w);background:currentColor;opacity:.14;border-radius:1px}
.bars-center{align-items:center}
.sealed-note{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font:500 10.5px/1.5 var(--mono)!important;letter-spacing:.16em;text-transform:uppercase;color:var(--plum-2);padding:9px 14px;border:1px solid currentColor;border-radius:2px}
.chapter-paper .sealed-note,.chapter-list .sealed-note{color:var(--plum)}
.seal-dot{flex:none;width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor;animation:blink 2.4s ease-in-out infinite}
.wax{width:120px;height:120px;filter:drop-shadow(0 8px 18px #0008)}
.wax path{fill:#5a3f57;stroke:#3b2b39;stroke-width:1.5;stroke-linejoin:round}
.wax circle{fill:none;stroke:#a98aa3;stroke-opacity:.5;stroke-width:1.5}
.wax text{font:italic 400 30px var(--display);fill:#d9c4d4}

/* voice console, before the first message */
.rec.idle{animation:none;opacity:.45;box-shadow:none}
.console-empty{padding:22px 24px 30px;min-height:300px}
.console-empty p{color:#efe9dc99;font:italic 400 24px/1.3 var(--display);margin-top:12px}
.console-empty .mono-label{color:var(--amber)}
.console-empty .bars{color:var(--amber)}
.console-empty .sealed-note{color:var(--amber)}
.t-sealed b{font-weight:500;color:var(--amber)}

/* the crossing, sealed */
.crossing-sealed{position:relative;min-height:92vh;display:grid;place-items:center;text-align:center;overflow:hidden;padding:120px var(--gutter);
  background:radial-gradient(70% 60% at 50% 50%,#15121c 0%,#050507 70%)}
.seal-stars{position:absolute;inset:0;opacity:.7;
  background-image:radial-gradient(1px 1px at 12% 22%,#efe9dc 50%,transparent 51%),radial-gradient(1px 1px at 78% 14%,#efe9dc 50%,transparent 51%),radial-gradient(1.4px 1.4px at 34% 68%,#e7c98f 50%,transparent 51%),radial-gradient(1px 1px at 58% 38%,#efe9dc 50%,transparent 51%),radial-gradient(1px 1px at 88% 72%,#c9a6c2 50%,transparent 51%),radial-gradient(1px 1px at 6% 84%,#efe9dc 50%,transparent 51%),radial-gradient(1.2px 1.2px at 46% 8%,#efe9dc 50%,transparent 51%),radial-gradient(1px 1px at 66% 90%,#efe9dc 50%,transparent 51%);
  background-size:420px 420px}
.seal-inner{position:relative;display:flex;flex-direction:column;align-items:center}
.seal-inner .wax{margin-bottom:28px}
.seal-inner .mono-label{color:var(--plum-2)}
.seal-inner h2{margin-top:18px}
.seal-inner h2 em{color:var(--gold)}
.seal-inner .bars{width:min(520px,80vw);color:var(--cream)}

/* III, sealed */
.list-sealed{padding-bottom:clamp(110px,14vw,190px)}
.sealed-sheet{display:grid;grid-template-columns:.8fr 1fr;gap:clamp(40px,7vw,120px);align-items:center}
.sheet-card{position:relative;aspect-ratio:1/1.3;max-width:380px;width:100%;justify-self:center;padding:14% 12%;background:linear-gradient(175deg,#fffefb,#f4f0e7);box-shadow:0 40px 80px -40px #1e1d2270,0 0 0 1px #1e1d2212;transform:rotate(-2deg);color:#1e1d22}
.sheet-card .bars{margin:0;gap:18px}
.sheet-card .bars span{opacity:.1;height:10px}
.sheet-card .wax{position:absolute;left:50%;bottom:-40px;transform:translateX(-50%) rotate(8deg)}
.sealed-copy p{font:17px/1.8 var(--serif);color:#44414a;margin-top:26px;max-width:28em}
.sealed-copy .display em{color:var(--plum)}
.la-next b{font-weight:500}

/* casefiles, coordinates, archive */
.ci-sealed .ci-title{color:var(--paper-ink)}
.ci-sealed .ci-note{font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--plum);font-style:normal}
.c-sealed .c-val{color:#23222840;letter-spacing:-.04em}
.c-sealed .c-name{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--plum);font-style:normal}
.t-sealed .t-place{display:inline-flex;align-items:center;min-height:1em}
.frame-sealed h4{color:#efe9dc}
.frame-ghost{opacity:.18;filter:blur(1.5px) grayscale(1)}
.frame-sealed .sealed-when{display:block;margin-top:6px;color:var(--plum-2)}
.title-sealed .tp-title{color:#efe9dc}
.title-sealed .tp-line{color:var(--plum-2);font:500 10px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.preview-sealed{background:repeating-linear-gradient(135deg,#1c1c1f 0 8px,#18181a 8px 16px)}
.preview-sealed span{font:italic 400 26px var(--display);color:var(--plum-2);width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#3b2b39;box-shadow:0 0 0 1px #a98aa355}
@media (max-width:860px){
  .sealed-sheet{grid-template-columns:1fr}
  .sheet-card{max-width:280px}
}

.appendix .bar{opacity:.3}