@font-face{font-family:"TS";src:url(fonts/thmanyahsans-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"TS";src:url(fonts/thmanyahsans-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"TS";src:url(fonts/thmanyahsans-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"TD";src:url(fonts/thmanyahserifdisplay-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"TD";src:url(fonts/thmanyahserifdisplay-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"TD";src:url(fonts/thmanyahserifdisplay-Black.woff2) format("woff2");font-weight:900;font-display:swap}

/* ---------------------------------------------------------------
   One system.
   Colour: ink, bone, and ember. Ember appears only where there is fire.
   Archive images share one grade (bone on ink) until 1962, when colour returns.
   Type: five sizes. Motion: line reveal, image reveal, the burn, hard cuts.
---------------------------------------------------------------- */
:root{
  --ink:#0B0A09; --ink-2:#151311; --bone:#E9E2D3; --bone-2:#B5AE9F; --bone-3:#7C766B; --rule:rgba(233,226,211,.14);
  --paper:#ECE5D6; --pink:#141210; --pink-2:#5A544A; --prule:rgba(20,18,16,.16);
  --ember:#E8541E;
  --gut:20px; --max:1360px;
  --t12:.875rem;
  --t24:clamp(1.2rem,1vw + .95rem,1.55rem);
  --t18:clamp(1.06rem,.5vw + .95rem,1.25rem);
  --t32:clamp(1.55rem,2.6vw + .7rem,2.55rem);
  --t72:clamp(2.6rem,6.4vw,5.8rem);
  --t160:clamp(5rem,17vw,13.5rem);
  --expo:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
@media (min-width:760px){:root{--gut:44px}}
@media (min-width:1200px){:root{--gut:72px}}

*,*::before,*::after{box-sizing:border-box}
html{overscroll-behavior-y:none;-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--ink);overflow-x:clip}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--ink);color:var(--bone);font-family:"TS",system-ui,sans-serif;font-size:var(--t18);line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:clip}
body.is-gated{overflow:hidden;height:100svh}
img,video,svg,canvas{display:block;max-width:100%}
a{color:inherit}
p,h1,h2,figure,blockquote,ol,dl,dd{margin:0}
button{font:inherit;color:inherit}
::selection{background:var(--bone);color:var(--ink)}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}

/* film grain, one layer, very quiet */
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.06;background-size:180px;animation:grain .5s steps(4) infinite}
@keyframes grain{25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-4%)}75%{transform:translate(-1%,3%)}}

/* the burn: the one transition, drawn in WebGL above the story */
.burn{position:fixed;inset:0;width:100%;height:100%;z-index:40;pointer-events:none;display:none}

/* ---------------- type ---------------- */
.t32,.t72,.t160,.statement,.chap__t,.toll,.clock,.odo,.gate__t,.vigil__t,.flag__t,.dawn__day{font-family:"TD",serif;letter-spacing:0}
.t32{font-size:var(--t32);font-weight:700;line-height:1.6}
.t72{font-size:var(--t72);font-weight:900;line-height:1.28}
.t160{font-size:var(--t160);font-weight:900;line-height:1.1}
.t32,.t72,.t160,.statement,.vigil__t,.chap__s{text-wrap:balance}
.body,.note,.cap{text-wrap:pretty}
.kick{font-size:var(--t12);font-weight:500;color:var(--bone-2);line-height:1.6}
.body{font-size:var(--t24);line-height:1.75;max-width:44ch;color:var(--bone-2)}
.dim{color:var(--bone-2)}
.note{font-size:var(--t12);line-height:1.7;color:rgba(233,226,211,.62);max-width:52ch}
.cap{font-size:var(--t12);line-height:1.7;color:rgba(233,226,211,.62);max-width:48ch}
.en{display:none;direction:ltr;text-align:right;font-size:var(--t12);line-height:1.65;color:var(--bone-3);max-width:46ch}
html.show-en .en{display:block}

/* sources: a quiet number, nothing more */
sup{line-height:0;vertical-align:super;font-size:0}
.fn{font:500 .62rem/1 "TS";color:inherit;opacity:.45;background:none;border:0;padding:0 .2em;margin:0;cursor:pointer;position:relative;transition:opacity .2s;vertical-align:baseline}
.fn::after{content:"";position:absolute;inset:-12px -6px}
.fn:hover,.fn:focus-visible{opacity:1}
.fn:focus-visible{outline:1px solid currentColor;outline-offset:2px}
.cap .fn,.kick .fn{font-size:inherit;text-decoration:underline;text-underline-offset:3px;padding:0;opacity:.7}
.t72 sup .fn,.statement sup .fn{font-size:.7rem}

/* reveals: lines rise from a mask */
.ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.ln>span{display:block}

/* ---------------- gate: a dark room, a light, the words ---------------- */
.gate{--heat:0;--mx:50vw;--my:50svh;--r:22vmax;position:fixed;inset:0;z-index:80;background:var(--ink);overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;cursor:grab}
.gate.is-hold{cursor:grabbing}
.gate::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--mx) var(--my),rgba(232,84,30,calc(.06 + var(--heat) * .16)),rgba(120,30,8,calc(var(--heat) * .07)) calc(var(--r) * .5),transparent var(--r))}
.gate__cv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.gate__type{position:absolute;inset:0;display:grid;place-items:center;padding:var(--gut);pointer-events:none;z-index:2}
.gate__t{font-family:"TD",serif;font-weight:900;font-size:clamp(4.6rem,13.4vw,15rem);line-height:1.04;text-align:center;color:#1B1713;max-width:12ch}
.gate__l{display:inline-block;padding-inline:.04em}
.gate__type--lit .gate__t{color:color-mix(in srgb,#FFE2C2 calc(var(--heat) * 100%),#F1E9DA);text-shadow:0 0 calc(var(--heat) * 40px) rgba(255,140,60,calc(var(--heat) * .55))}
.gate__type--lit{-webkit-mask-image:radial-gradient(circle at var(--mx) var(--my),#000 0,rgba(0,0,0,.55) calc(var(--r) * .45),transparent var(--r));mask-image:radial-gradient(circle at var(--mx) var(--my),#000 0,rgba(0,0,0,.55) calc(var(--r) * .45),transparent var(--r))}
@media (max-width:759px){.gate__t{font-size:min(25vw,15svh);line-height:1.1}.gate__l{display:block}}
.gate__ring{position:absolute;left:0;top:0;width:150px;height:150px;margin:-75px 0 0 -75px;transform:translate(var(--mx),var(--my)) rotate(-90deg) scale(.6);opacity:0;pointer-events:none;z-index:4;transition:opacity .4s,scale .6s var(--expo)}
.gate.is-hold .gate__ring{opacity:1;scale:1.6}
.gate__ring circle{fill:none;stroke:#FFD7B4;stroke-opacity:.7;stroke-width:.6;stroke-dasharray:364.4;stroke-dashoffset:364.4}
.gate__go{position:absolute;left:50%;bottom:calc(64px + env(safe-area-inset-bottom));translate:-50% 0;z-index:5;display:grid;justify-items:center;gap:12px;background:none;border:0;padding:8px 14px;cursor:inherit;font-size:var(--t12);color:var(--bone-2);white-space:nowrap}
.gate__go:focus-visible{outline:1px solid var(--bone);outline-offset:6px}
.gate__dot{width:7px;height:7px;border-radius:50%;background:#FFC48A;box-shadow:0 0 0 0 rgba(232,84,30,.6),0 0 18px 4px rgba(232,84,30,.55);animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.5);box-shadow:0 0 0 10px rgba(232,84,30,0),0 0 28px 8px rgba(232,84,30,.75)}}
.gate__bar{display:block;width:120px;height:1px;background:var(--rule);overflow:hidden}
.gate__bar i{display:block;height:100%;background:#FFC48A;transform:scaleX(0);transform-origin:right}
.gate__go.nudge span{color:var(--bone);display:inline-block;animation:nudge .5s var(--expo)}
@keyframes nudge{20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
.gate__corner{position:absolute;z-index:5;font-size:var(--t12);color:var(--bone-3);margin:0}
.gate__corner--r{right:var(--gut);top:calc(20px + env(safe-area-inset-top));color:var(--bone-2)}
.gate__corner--l{left:var(--gut);right:var(--gut);bottom:calc(20px + env(safe-area-inset-bottom));text-align:center}
.gate__mute{background:none;border:0;padding:6px 0;color:var(--bone-2);font-size:inherit;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--bone-3);cursor:pointer}

/* ---------------- top ---------------- */
.top{transition:transform .7s var(--expo),opacity .5s;position:fixed;inset:0 0 auto 0;z-index:62;display:flex;justify-content:space-between;align-items:center;padding:calc(14px + env(safe-area-inset-top)) var(--gut) 14px;mix-blend-mode:difference;color:#fff;pointer-events:none;font-size:var(--t12)}
.top a,.top button{pointer-events:auto}
.top__mark{text-decoration:none;font-weight:500}
.top__nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,28px)}
.top__btn{background:none;border:0;padding:6px 0;cursor:pointer;font-size:inherit;font-weight:500;opacity:.72;transition:opacity .2s}
.top__btn:hover,.top__btn[aria-pressed="true"],.top__btn[aria-expanded="true"]{opacity:1}
#lang{letter-spacing:.04em}
#play .play__off,#play[aria-pressed="true"] .play__on{display:none}
#play[aria-pressed="true"] .play__off{display:inline}
.snd{display:flex;align-items:center;gap:2px;height:20px}
.snd i{width:1.5px;height:11px;background:currentColor;transform-origin:50% 50%;animation:eq 1.1s ease-in-out infinite}
.snd i:nth-child(2){animation-delay:-.3s}.snd i:nth-child(3){animation-delay:-.6s}.snd i:nth-child(4){animation-delay:-.85s}
.snd[aria-pressed="false"] i{animation:none;transform:scaleY(.18)}
@keyframes eq{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
.prog{position:fixed;inset:0 0 auto 0;height:1px;z-index:63;pointer-events:none}
.prog i{display:block;height:100%;background:var(--bone);opacity:.55;transform-origin:right;transform:scaleX(0)}

/* index */
.idx{position:fixed;inset:0;z-index:61;background:var(--ink);display:grid;align-items:center;overflow:auto}
.idx__in{padding-block:calc(80px + env(safe-area-inset-top)) calc(40px + env(safe-area-inset-bottom));display:grid;gap:36px}
.idx__list{list-style:none;padding:0;border-top:1px solid var(--rule)}
.idx__list li{border-bottom:1px solid var(--rule);overflow:hidden}
.idx__list a{display:grid;grid-template-columns:3rem 1fr auto;align-items:baseline;gap:16px;padding:clamp(6px,1.4vh,14px) 0;text-decoration:none}
.idx__list a>*{display:block;transition:opacity .4s var(--expo),transform .6s var(--expo)}
.idx__list span,.idx__list em{font-size:var(--t12);font-style:normal;color:var(--bone-3)}
.idx__list b{font-family:"TD";font-weight:900;font-size:clamp(2.2rem,7vh,5rem);line-height:1.15;white-space:nowrap}
@media (hover:hover){.idx__list:hover a>*{opacity:.3}.idx__list a:hover>*{opacity:1}.idx__list a:hover b{transform:translateX(-12px)}}
.idx__list li.now span{color:var(--bone)}
.idx__foot{display:flex;justify-content:space-between;gap:20px;font-size:var(--t12);color:var(--bone-3)}
.idx__foot a{color:var(--bone-2)}

/* ---------------- archive grade: bone on ink ---------------- */
.duo{position:relative;background:var(--bone);isolation:isolate;overflow:hidden}
.duo img,.duo video{filter:grayscale(1) contrast(1.12) brightness(.96);mix-blend-mode:multiply}
.duo::after{content:"";position:absolute;inset:0;background:var(--ink);mix-blend-mode:lighten;pointer-events:none;z-index:1}

/* ---------------- scenes ---------------- */
.scene{position:relative}
.pin{position:relative;height:100svh;width:100%;overflow:hidden}

/* 01 night: the sky is the scene, the words are small */
.night{height:100svh;overflow:hidden}
.night__media{position:absolute;inset:0}
.night__media video{width:100%;height:100%;object-fit:cover}
.night__txt{position:absolute;inset:auto 0 0;display:grid;justify-items:start;gap:8px;padding-bottom:clamp(64px,12vh,120px)}
.night__txt>*{max-width:30ch}
.clock{display:flex;align-items:flex-start;font-weight:900;font-size:var(--t160);line-height:.9;font-variant-numeric:tabular-nums;margin-block:4px 8px;max-width:none!important}
.clock__s{font-size:.3em;font-weight:500;margin-top:.2em;margin-inline-start:.15em;min-width:1.8em;color:var(--bone-2)}
.cue{position:absolute;left:var(--gut);bottom:calc(22px + env(safe-area-inset-bottom));font-size:var(--t12);color:var(--bone-3)}
.night .kick,.night .t32{color:var(--bone)}

/* chapter cards: the same title card every time, held on black */
.chap{height:170svh;background:var(--ink)}
.chap__in{position:sticky;top:0;height:100svh;display:grid;place-content:center;justify-items:center;text-align:center;gap:6px;padding:var(--gut);z-index:45}
.chap__n{font-size:var(--t12);color:var(--bone-3);letter-spacing:.1em}
.chap__t{font-size:var(--t160);font-weight:900;line-height:1.05;white-space:nowrap}
.chap__s{font-size:var(--t18);color:var(--bone-2)}

/* rewind: a year, nothing else */
.rw__pin{display:grid;place-content:center;justify-items:center;gap:18px;background:var(--ink)}
.odo{display:flex;font-weight:900;font-size:var(--t160);line-height:1;height:1em;overflow:hidden;font-variant-numeric:tabular-nums}
.odo__c{display:block;height:1em;overflow:hidden;width:.6em}
.odo__s{display:flex;flex-direction:column;will-change:transform}
.odo__s span{display:block;height:1em;text-align:center}
.odo--sm{font-size:inherit}
.rw__gap{font-size:var(--t12);color:var(--bone-3);opacity:0}

/* split: the picture bleeds off the left edge, the words hold the right */
.split{min-height:100svh;display:grid;align-items:center}
.split__img{position:relative;width:100%;aspect-ratio:4/3}
.split__img img{width:100%;height:100%;object-fit:cover}
.split__txt{display:grid;gap:12px;padding:28px var(--gut) clamp(70px,12vh,120px)}
@media (min-width:900px){
  .split{grid-template-columns:repeat(12,minmax(0,1fr));padding-block:clamp(80px,14vh,140px)}
  .split__img{grid-column:5 / -1;grid-row:1;height:min(76svh,62vw);aspect-ratio:auto}
  .split__txt{grid-column:1 / 5;grid-row:1;padding:0;margin-inline-start:var(--gut);margin-inline-end:24px;align-self:end}
}
/* paper: daylight for documents */
.paper{background:var(--paper);color:var(--pink);color-scheme:light}
.paper .kick,.paper .body,.paper .dim{color:var(--pink-2)}
.paper .cap,.paper .note,.paper .en{color:#7A7366}
.split--paper .split__img--contain{aspect-ratio:auto;padding:28px var(--gut) 0}
.split--paper .split__img--contain img{object-fit:contain;mix-blend-mode:multiply;filter:grayscale(1) contrast(1.05);height:auto}
@media (min-width:900px){.split--paper .split__img--contain{grid-column:6 / -2;padding:0}.split--paper .split__img--contain img{height:100%}}

/* statements */
.words{padding-block:clamp(120px,24vh,240px)}
.statement{font-size:var(--t32);font-weight:700;line-height:1.5;max-width:24ch}
.statement--big{font-size:var(--t72);font-weight:900;line-height:1.15;max-width:15ch}
.statement .w{opacity:.14}
.words .en{margin-top:20px}
.aside{display:grid;gap:14px}
.aside .t32{max-width:28ch}

/* 1945: a window of celebration, then a cut */
.may__pin{background:var(--ink)}
.may__win{position:absolute;inset:0 0 auto 0;height:66svh}
.may__win video{width:100%;height:100%;object-fit:cover}
.may__a{position:absolute;inset:auto 0 0;display:grid;gap:8px;padding-bottom:clamp(36px,7vh,80px)}
.may__a .t32{max-width:26ch}
.may__cut{position:absolute;inset:0;background:var(--ink);display:grid;align-content:center;visibility:hidden;z-index:3}
.may__cut .wrap{display:grid;gap:14px}
.may__cut .t72{max-width:14ch}

.record{padding-block:clamp(90px,16vh,160px)}
.record__grid{display:grid;gap:40px;align-items:end}
@media (min-width:900px){.record__grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:0}.record__txt{grid-column:1 / 7;grid-row:1}.record__stamp{grid-column:9 / 12;grid-row:1}}
.record__stamp{width:min(220px,48vw);background:none}
.record__stamp::after{display:none}
.record__stamp picture{display:block;background:var(--bone);position:relative;isolation:isolate}
.record__stamp picture::after{content:"";position:absolute;inset:0;background:var(--ink);mix-blend-mode:lighten}
.record__stamp img{width:100%;height:auto}
.record__stamp figcaption{margin-top:12px}
.record__txt{display:grid;gap:22px}
.record__txt .t32{max-width:24ch}
.range{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule)}
.range div{padding:18px 0 0;display:grid;gap:4px;align-content:start}
.range div+div{border-inline-start:1px solid var(--rule);padding-inline-start:20px}
.range dt{font-size:var(--t12);color:var(--bone-3)}
.range dd{font-family:"TD";font-weight:900;font-size:var(--t72);line-height:1;text-align:right}

/* 03 the 22 */
.dec{padding-block:clamp(90px,16vh,170px)}
.dec__grid{display:grid;gap:10px;align-items:end}
@media (min-width:900px){.dec__grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:0}.dec__txt{grid-column:1 / 7;grid-row:1;padding-bottom:.6em}.dec__n{grid-column:8 / -1;grid-row:1}}
.dec__n{font-family:"TD";font-weight:900;font-size:clamp(9rem,34vw,26rem);line-height:.82;text-align:left}
.dec__txt{display:grid;gap:14px}
.dec__txt .t32{max-width:22ch}

/* the six */
.six__pin{display:grid;align-items:center;background:var(--ink)}
.six__grid{display:grid;gap:20px;align-items:center;padding-block:calc(56px + env(safe-area-inset-top)) 24px}
@media (min-width:900px){.six__grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:0}.six__frame{grid-column:6 / -1;grid-row:1}.six__side{grid-column:1 / 5;grid-row:1}}
.six__frame{position:relative;width:min(100%,52svh * 1028 / 956);aspect-ratio:1028/956;justify-self:center}
@media (min-width:900px){.six__frame{width:min(100%,80svh * 1028 / 956)}}
.six__cam{position:absolute;inset:0;transform-origin:0 0;will-change:transform}
.six__cam picture,.six__cam img{width:100%;height:100%}
.six__cam img{object-fit:cover}
.six__side{display:grid;gap:14px}
.six__names{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.six__names li{padding:8px 0;border-top:1px solid var(--rule);line-height:1.35;opacity:.28;transition:opacity .6s var(--expo)}
.six__names li.on{opacity:1}
.six__names b{display:block;font-family:"TD";font-weight:700;font-size:var(--t18)}
.six__names span{font-size:var(--t12);color:var(--bone-3)}
.six__names em{display:block;font-style:normal;font-size:var(--t12);color:var(--bone-2);max-height:0;overflow:hidden;transition:max-height .6s var(--expo)}
.six__names li.fate em{max-height:4em}
.six__end{opacity:0}
@media (max-width:899px){.six__end{font-size:1.25rem}}

/* 04 midnight: a thin outline, points of fire */
.mid__pin{background:#000}
.mid__cv{position:absolute;inset:0;width:100%;height:100%}
.mid__flash{position:absolute;inset:0;background:#FFF1E2;opacity:0;pointer-events:none;z-index:4}
.mid__count{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;gap:.08em;font-family:"TD";font-weight:900;font-size:var(--t160);line-height:1;font-variant-numeric:tabular-nums}
.mid__cs{font-size:.3em;font-weight:500;color:var(--bone-2);align-self:center;transform:translateY(-.9em);min-width:1.8em}
.mid__hud{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:space-between;padding-top:calc(60px + env(safe-area-inset-top));padding-bottom:calc(26px + env(safe-area-inset-bottom));pointer-events:none;opacity:0}
.mid__hud .fn{pointer-events:auto}
.mid__clock{font-size:var(--t12);color:var(--bone-2)}
.mid__clock span:first-child{font-family:"TD";font-weight:900;font-size:var(--t32);color:var(--bone);font-variant-numeric:tabular-nums;margin-inline-end:6px}
.mid__log{list-style:none;padding:0;display:grid;gap:6px}
@media (min-width:900px){.mid__log{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}}
.mid__log li{font-size:.92rem;line-height:1.55;opacity:0;display:flex;gap:10px;align-items:baseline}
.mid__log time{font-family:"TD";font-weight:700;color:var(--bone-2);flex:none;font-variant-numeric:tabular-nums}
.mid__note{font-size:.7rem;color:var(--bone-3);margin-top:6px}

/* declaration */
.decl{padding-block:clamp(90px,16vh,170px)}
.decl__grid{display:grid;gap:44px;align-items:center}
@media (min-width:900px){.decl__grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:0}.decl__txt{grid-column:1 / 7;grid-row:1}.decl__doc{grid-column:8 / -1;grid-row:1}}
.decl__doc img{width:100%;height:auto;mix-blend-mode:multiply;filter:grayscale(1) contrast(1.06)}
.decl__doc figcaption{margin-top:12px}
.decl__txt{display:grid;gap:18px}
.decl__txt .t32{max-width:24ch}
.quote{margin:8px 0;padding-block:20px;border-block:1px solid var(--prule)}
.quote__t{display:inline;font-family:"TD";font-weight:700;font-size:var(--t32);line-height:1.6;color:var(--pink)}
.quote__t::after{content:"";display:inline-block;width:2px;height:.9em;background:currentColor;margin-inline-start:4px;vertical-align:-.1em;animation:blink 1s steps(1) infinite}
.quote.done .quote__t::after{display:none}
@keyframes blink{50%{opacity:0}}

/* reply */
.reply{padding-block:clamp(110px,20vh,220px)}
.slam{display:grid;gap:18px;margin-top:22px}
.slam__fr{font-family:"TD";font-weight:900;font-size:clamp(2.6rem,9vw,8.4rem);line-height:1.02;text-align:left;letter-spacing:-.02em}
.slam__fr span{display:inline-block}
.slam__ar{color:var(--bone-2);max-width:24ch}

/* war: the newsreel in a window, the words beside it */
.war{padding-block:clamp(70px,12vh,130px)}
.war__grid{display:grid;gap:28px;align-items:end}
@media (min-width:900px){.war__grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:0}.war__txt{grid-column:1 / 6;grid-row:1;margin-inline-end:32px}.war__win{grid-column:6 / -1;grid-row:1;margin-inline-end:calc(-1 * var(--gut))}}
@media (max-width:899px){.war__win{margin-inline:calc(-1 * var(--gut))}}
.war__win{aspect-ratio:4/3}
.war__win video{width:100%;height:100%;object-fit:cover}
.war__txt{display:grid;gap:10px}

/* price: points until the screen is full */
.price__pin{background:#000}
.price__cv{position:absolute;inset:0;width:100%;height:100%}
.price__k{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:var(--gut)}
.price__end{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;gap:12px;padding:var(--gut);opacity:0}
.price__end .note,.price__end .en{text-align:center;margin-inline:auto;color:var(--bone-2)}
.toll{font-weight:900;font-size:clamp(3rem,15vw,13.5rem);line-height:1;font-variant-numeric:tabular-nums}

.silence{height:110svh;background:#000}

/* dawn: colour returns */
.dawn__pin{background:#000}
.dawn__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dawn__shade{position:absolute;inset:0;background:#000}
.dawn__txt{position:absolute;inset:auto 0 0;display:grid;justify-items:start;gap:10px;padding-bottom:clamp(64px,12vh,120px)}
.dawn__day{font-weight:900;font-size:var(--t72);line-height:1.1;display:flex;gap:.3em;flex-wrap:wrap;align-items:baseline}
.dawn__echo{color:var(--bone);max-width:44ch}
.dawn .kick{color:var(--bone)}
.dawn__txt>*{text-shadow:0 1px 24px rgba(0,0,0,.35)}

/* the flag */
.flag__pin{background:#fff}
.flag__cv{position:absolute;inset:0;width:100%;height:100%}
.flag__t{position:absolute;inset-block:0;right:0;width:33%;display:grid;place-content:center;padding:var(--gut);font-size:var(--t72);font-weight:900;line-height:1.1;color:#141210;text-align:center}

/* today */
.callback{padding-bottom:clamp(90px,16vh,170px)}
.callback__img{position:relative}
.callback__img img{width:100%;height:min(92svh,64vw);object-fit:cover}
@media (max-width:899px){.callback__img img{height:70svh}}
.callback__img figcaption{position:absolute;bottom:14px;right:var(--gut);color:#fff;opacity:.9;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.callback__txt{display:grid;gap:clamp(40px,8vh,80px);padding-top:clamp(80px,14vh,150px)}
.paper .statement .w{opacity:.14}

/* vigil */
.vigil{min-height:100svh;display:grid;align-items:center;background:#000;overflow:hidden}
.vigil__cv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.vigil__in{position:relative;display:grid;justify-items:center;text-align:center;gap:14px;padding-top:clamp(180px,30vh,280px);padding-bottom:80px}
.vigil__t{font-size:var(--t32);font-weight:700;line-height:1.4}
.vigil .body,.vigil .en{text-align:center}
.vigil__ok{font-size:var(--t12);color:var(--bone-3);min-height:1.4em}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;margin-top:10px;background:var(--bone);color:var(--ink);border:0;border-radius:99px;font-size:.95rem;font-weight:500;text-decoration:none;cursor:pointer;transition:background .3s,color .3s,transform .5s var(--expo)}
.btn:hover{background:#fff;transform:translateY(-2px)}
.btn:focus-visible{outline:1px solid var(--bone);outline-offset:4px}
.btn--ghost{background:none;color:var(--bone);border:1px solid var(--rule)}
.btn--ghost:hover{background:var(--bone);color:var(--ink)}

/* credits: read like the end of a film */
.credits{padding-block:clamp(110px,20vh,200px);background:#000}
.credits__in{max-width:780px;display:grid;gap:22px;text-align:center;justify-items:center}
.credits__in .t32{max-width:30ch;font-size:clamp(1.3rem,2vw + .6rem,1.9rem)}
.credits__sub{margin-top:40px}
.src-list{list-style:none;padding:0;display:grid;gap:22px;width:100%}
.src-list li{display:grid;gap:2px;justify-items:center;scroll-margin-top:100px}
.src-list a{direction:ltr;font-family:"TD";font-weight:700;font-size:1.05rem;text-decoration:none;color:var(--bone)}
.src-list a:hover{text-decoration:underline;text-underline-offset:4px}
.src-list span{font-size:var(--t12);color:var(--bone-3);max-width:56ch}
.src-list li.flash a{color:#fff;text-decoration:underline}
.credits .note{text-align:center;margin-top:24px}

/* offer: outside the film */
.offer{background:var(--ink-2);border-top:1px solid var(--rule);padding-block:clamp(70px,12vh,120px)}
.offer__in{display:grid;gap:14px;justify-items:start}
.offer__in .t32{max-width:26ch}

.foot{background:var(--ink-2);color:var(--bone-3);padding:22px 0 calc(22px + env(safe-area-inset-bottom));font-size:var(--t12);border-top:1px solid var(--rule)}
.foot__row{display:flex;justify-content:space-between;align-items:center;gap:16px}
.foot__brand svg{height:14px;width:auto}
.foot a{text-decoration:none}

/* source sheet */
.sheet{position:fixed;inset:auto 0 0 0;z-index:70;padding:0 var(--gut) calc(var(--gut) + env(safe-area-inset-bottom));pointer-events:none}
.sheet__in{pointer-events:auto;max-width:520px;margin-inline:auto;background:var(--bone);color:var(--ink);padding:16px 18px;border-radius:3px;display:grid;grid-template-columns:1fr auto;gap:2px 16px;transform:translateY(calc(100% + 40px));transition:transform .6s var(--expo)}
.sheet.open .sheet__in{transform:none}
.sheet__k{grid-column:1;font-size:var(--t12);color:#6B6458}
.sheet__t{grid-column:1;direction:ltr;text-align:right;font-weight:500;word-break:break-word}
.sheet__d{grid-column:1;font-size:.85rem;color:#4A453D;line-height:1.6}
.sheet__x{grid-column:2;grid-row:1/span 3;align-self:start;background:none;border:1px solid rgba(0,0,0,.2);border-radius:99px;padding:5px 12px;font-size:.78rem;cursor:pointer}

.film,.film *{cursor:none!important}
.film .cue,.film .sheet,.film .gate__corner,.film .gate__go{display:none!important}

@media (prefers-reduced-motion:reduce){.grain,.snd i,.quote__t::after{animation:none}}
[hidden]{display:none!important}
@media (max-width:899px){.flag__t{inset:auto 0 0 0;width:100%;height:46svh;padding-bottom:12svh}}

/* ---------- pass 2 of the rebuild ---------- */
.top.away{transform:translateY(-110%);opacity:0}
.statement{line-height:1.6}
.statement--big{line-height:1.28}
@media (max-width:899px){.t32{font-size:max(1.75rem,var(--t32))}}

/* chapter cards: one rule, five compositions, cropped by the frame */
.chap__n{display:none}
.chap__in{place-content:initial;justify-items:initial;text-align:initial;align-content:center;gap:14px;padding:var(--gut);overflow:hidden}
.chap__t{font-size:clamp(5.5rem,24vw,19rem);line-height:1.08;white-space:normal}
.chap__s{font-family:"TD";font-weight:700;font-size:var(--t24);color:var(--bone-2);max-width:26ch}
.chap__rule{display:block;height:1px;background:var(--bone);opacity:.5;width:min(520px,70vw);transform-origin:right;transform:scaleX(0)}
.chap--low .chap__in{align-content:end;justify-items:end;text-align:left;padding-bottom:calc(var(--gut) + 6svh)}
.chap--low .chap__rule{transform-origin:left}
.chap--top .chap__in{align-content:start;justify-items:start;padding-top:calc(80px + 4svh)}
.chap--mid .chap__in{align-content:center;justify-items:center;text-align:center}
.chap--mid .chap__rule{transform-origin:center}
.chap--edge .chap__in{align-content:end;justify-items:start;padding-bottom:calc(var(--gut) + 4svh)}
.chap--edge .chap__t{font-size:clamp(6rem,28vw,22rem);line-height:1.1}
.chap--edge .chap__s{order:-1}
.chap--edge .chap__rule{order:-1}
.chap--horizon .chap__in{align-content:center;justify-items:center;text-align:center;background:linear-gradient(180deg,transparent 58%,rgba(233,226,211,.05) 58.1%,transparent 85%)}
.chap--horizon .chap__rule{transform-origin:center;width:100%}

/* 1945: full bleed, the words sit low on the picture */
.may__win{inset:0;height:auto}
.may__a{z-index:2;padding-bottom:clamp(48px,10vh,110px)}
.may__a .t32{font-size:var(--t72);line-height:1.28;max-width:16ch;color:var(--bone)}
.may__a::before{content:"";position:absolute;inset:-60% 0 0;background:radial-gradient(70% 70% at 80% 100%,rgba(11,10,9,.72),transparent 70%);z-index:-1;pointer-events:none}
.may__a .kick,.may__a .cap{color:var(--bone)}

/* war: edge to edge, a black bar of words under it */
.war{padding-block:0 clamp(70px,12vh,130px)}
.war__grid{max-width:none;padding:0;display:block}
.war__win{width:100%;aspect-ratio:16/9;max-height:84svh;margin:0!important}
.war__txt{max-width:var(--max);margin-inline:auto;padding:28px var(--gut) 0;display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:6px 40px}
.war__txt .t72{grid-column:1;grid-row:1 / span 2}
.war__txt .kick,.war__txt .t32,.war__txt .cap,.war__txt .en{grid-column:2}
@media (max-width:899px){.war__txt{grid-template-columns:1fr}.war__txt>*{grid-column:1!important;grid-row:auto!important}.war__win{aspect-ratio:4/5}}

/* price: the number fills the frame */
.toll{font-size:clamp(3rem,15.5vw,19rem)!important;white-space:nowrap}

/* flag */
.flag__t{font-size:clamp(3rem,9.5vw,9rem);line-height:1.15}

/* dawn: a local shadow for the date, nothing across the frame */
.dawn__txt::before{content:"";position:absolute;inset:-40% -10% -10% 30%;background:radial-gradient(60% 60% at 80% 85%,rgba(0,0,0,.55),transparent 70%);z-index:-1;pointer-events:none}
.dawn__txt{z-index:1}
.dawn__video{transition:filter 3s}

/* offer: outside the film, same night, no panel */
.offer{background:var(--ink);border-top:0;margin-top:120px;padding-top:0}
.offer__in{border-top:1px solid var(--rule);padding-top:56px}
.offer .body{font-size:var(--t18)}
.foot{background:var(--ink)}