/* The Sentient World · World Time kit · kit.css
 *
 * A live broadcast from the island, whose page sky is the island's sky right now. Reference build:
 * apps/landing/looks/broadcast-sky/index.html (the administrator's pick, "World Time"). Markup of every part: apps/landing/kit/README.md.
 *
 * Paths: fonts and grain are asked for at /kit/... from the root of the host that serves the page (thesentient.world/kit/...). A page on
 * another host that inlines this file replaces "/kit/" with where that host serves the same files (see README, "On another host").
 *
 * Grammar: warm white text on the sky; warm paper plates with ink for titles and names; dark straps with one paper hairline for what
 * goes under them; hairlines, never rounded corners; Archivo condensed for headlines and plates, Archivo expanded for small labels,
 * Atkinson Hyperlegible Next for reading and subtitles, Atkinson Mono only for timecode and data; the red only for LIVE. Long text sits
 * on a near-solid dark sheet. The sky's colours are set by sky.js from the world's clock, sun and weather; without script the blue hour.
 *
 * The live viewer (world repo) keeps its own copy of these fonts and tokens: change both together.
 */

/* ── fonts (self-hosted, OFL: fonts/OFL.txt). latin covers en, de, fr, es, it; latin-ext only rare letters of names ─────────────────── */
@font-face{font-family:"Archivo";src:url(https://cdn.thesentient.world/kit/fonts/archivo-latin-ext.5717f37059.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Archivo";src:url(https://cdn.thesentient.world/kit/fonts/archivo-latin.e3a28eade2.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Atkinson Hyperlegible Next";src:url(https://cdn.thesentient.world/kit/fonts/atkinson-next-latin-ext.7dae0c6c66.woff2) format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Atkinson Hyperlegible Next";src:url(https://cdn.thesentient.world/kit/fonts/atkinson-next-latin.18b2a1a39a.woff2) format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Atkinson Hyperlegible Mono";src:url(https://cdn.thesentient.world/kit/fonts/atkinson-mono-latin-ext.3fa1fa7e99.woff2) format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Atkinson Hyperlegible Mono";src:url(https://cdn.thesentient.world/kit/fonts/atkinson-mono-latin.2706b1ee4f.woff2) format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ── the sky's own values: registered, so the first live paint glides from the blue hour instead of jumping ──────────────────────── */
@property --sky-z{syntax:"<color>";inherits:true;initial-value:#0a1127}
@property --sky-u{syntax:"<color>";inherits:true;initial-value:#0a1535}
@property --sky-l{syntax:"<color>";inherits:true;initial-value:#142758}
@property --sky-h{syntax:"<color>";inherits:true;initial-value:#213667}
@property --land-r{syntax:"<color>";inherits:true;initial-value:#152445}
@property --land-f{syntax:"<color>";inherits:true;initial-value:#0c172e}
@property --land-n{syntax:"<color>";inherits:true;initial-value:#060b15}
@property --sun{syntax:"<color>";inherits:true;initial-value:rgb(63 95 159 / .16)}
@property --sun-x{syntax:"<percentage>";inherits:true;initial-value:86%}
@property --sun-y{syntax:"<percentage>";inherits:true;initial-value:92%}
@property --stars{syntax:"<number>";inherits:true;initial-value:.7}
@property --grid{syntax:"<number>";inherits:true;initial-value:.08}
@property --rain{syntax:"<number>";inherits:true;initial-value:0}
@property --fog{syntax:"<number>";inherits:true;initial-value:0}

/* ── tokens ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
:root{
  color-scheme:dark;
  /* colour */
  --deep:#0a122a;              /* the sky's own darkest tone: sky.js keeps it in step with the island's sky, never below #0b1022 */
  --plate:rgba(10,18,42,.86);  /* panels over the sky, tinted by it (sky.js) */
  --sheet:rgba(10,18,42,.94);  /* the near-solid sheet under long text (sky.js) */
  --text:#f5f0e6;              /* warm white */
  --dim:#d8d2c6;               /* body text on the sky, labels */
  --prose:#e6e0d4;             /* long text on a sheet */
  --paper:#f2ece0;             /* lower-third plates */
  --paper-hi:#fcf8f0;
  --ink:#111013;
  --ink-dim:#4a463f;
  --red:#e8342e;               /* LIVE, nothing else */
  --line:rgba(245,240,230,.14);
  --line-2:rgba(245,240,230,.3);
  --hair-pic:rgba(255,255,255,.15);  /* the hairline inside a picture */
  --sub:rgba(6,7,10,.8);       /* subtitle box */
  --onpic:rgba(6,7,10,.74);    /* graphics over a picture */
  --strap:rgba(6,7,10,.88);    /* the dark strap under a plate */
  --screen:#050608;            /* a black screen: subtitles with no picture */
  /* depth: offset and soft blur, never a halo */
  --shadow:0 42px 72px -32px rgba(1,2,8,.86),0 16px 30px -16px rgba(1,2,8,.62);
  --shadow-s:0 18px 34px -18px rgba(1,2,8,.8),0 6px 12px -6px rgba(1,2,8,.46);
  --shadow-pop:0 22px 44px -14px rgba(1,2,8,.8),0 8px 16px -8px rgba(1,2,8,.6);
  /* type */
  --f-disp:"Archivo","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --f-read:"Atkinson Hyperlegible Next",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-tc:"Atkinson Hyperlegible Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --t-hero:clamp(40px,4.9vw + 6px,96px);     /* the hero's title plate */
  --t-end:clamp(50px,5.6vw + 16px,96px);     /* the end card */
  --t-statement:clamp(32px,3.4vw + 16px,84px);
  --t-page:clamp(38px,3.4vw + 18px,78px);    /* an inner page's title plate */
  --t-title:clamp(34px,2.9vw + 18px,70px);   /* a section's title on the sky */
  --t-h2:clamp(28px,1.5vw + 20px,44px);      /* a heading inside long text */
  --t-h3:clamp(21px,.6vw + 18px,27px);
  --t-slate:clamp(27px,1vw + 19px,34px);
  --t-lead:clamp(17px,.35vw + 15.5px,20px);
  --t-body:clamp(16.5px,.25vw + 15.6px,18.5px);
  --t-read:clamp(17px,.2vw + 16.3px,18.5px);
  --t-small:14.5px;
  --t-label:11.5px;
  --t-tc:12.5px;
  --measure:68ch;
  /* motion */
  --ease:cubic-bezier(.16,1,.3,1);
  /* space */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:72px;
  --section:clamp(88px,10vw,168px);
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);
  --nav-h:56px;
  --gut:16px;                  /* the page's side gutter */
  --fx:10px;                   /* how far the hero feed stands off the edges */
  --vf:10px;                   /* viewfinder inset */
  --br:20px;                   /* bracket length */
  --wi:12px;                   /* inset of graphics inside a monitor */
  --landh:clamp(104px,15vh,190px);
  --grain:url(https://cdn.thesentient.world/kit/grain.8a9cc61e04.png);
}
@media (min-width:700px){:root{--gut:32px;--fx:32px;--vf:16px;--br:26px;--wi:16px}}
@media (min-width:1100px){:root{--gut:56px;--fx:56px;--nav-h:64px;--vf:22px;--br:30px;--wi:20px;--landh:clamp(130px,21vh,240px)}}

/* ── ground and browser surfaces ───────────────────────────────────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--deep);color:var(--text);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + var(--sat) + 8px);scrollbar-color:rgba(245,240,230,.28) var(--deep);scrollbar-width:thin}
body{margin:0;font:400 17px/1.55 var(--f-read);overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}   /* never a background on body: it would cover the sky */
::selection{background:var(--paper);color:var(--ink)}
::-webkit-scrollbar{width:11px;height:8px}
::-webkit-scrollbar-track{background:var(--deep)}
::-webkit-scrollbar-thumb{background:rgba(245,240,230,.26);border:3px solid var(--deep)}
::-webkit-scrollbar-thumb:hover{background:rgba(245,240,230,.42)}
:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
input,textarea{caret-color:var(--paper)}
::placeholder{color:var(--dim);opacity:.82}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.24em}
img{display:block;max-width:100%}
h1,h2,h3{font-family:var(--f-disp)}
time,td,.tc,.clk,.nums,.readout{font-variant-numeric:tabular-nums}
.tc{font-family:var(--f-tc);letter-spacing:.01em}
.wrap{width:100%;max-width:1440px;margin:0 auto;padding-left:max(var(--gut),var(--sal));padding-right:max(var(--gut),var(--sar))}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-80px;z-index:60;background:var(--paper);color:var(--ink);padding:10px 14px;font:700 14px/1 var(--f-disp);font-stretch:78%;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.skip:focus{top:calc(var(--sat) + 10px)}

/* ── the sky: the island's sky, live, behind the whole page ─────────────────────────────────────────────────────────────────────── */
/* Its values are set by sky.js from the world's clock, sun and weather; these are the blue hour, for a page without script (sky.js's own
   blue hour, its floor included: no part of the sky is ever flat black). */
.sky-field{position:fixed;left:0;right:0;top:0;height:100vh;height:100lvh;z-index:-1;pointer-events:none;overflow:hidden;
  --sky-z:#0a1127;--sky-u:#0a1535;--sky-l:#142758;--sky-h:#213667;--land-f:#0c172e;--land-n:#060b15;--land-r:#152445;--sun:rgb(63 95 159 / .16);--sun-x:86%;--sun-y:92%;--stars:.7;--grid:.08;--rain:0;--fog:0;--fog-c:96 108 124}
.sky-field.arrive{transition:--sky-z 1.4s var(--ease),--sky-u 1.4s var(--ease),--sky-l 1.4s var(--ease),--sky-h 1.4s var(--ease),--land-r 1.4s var(--ease),--land-f 1.4s var(--ease),--land-n 1.4s var(--ease),--sun 1.4s var(--ease),--sun-x 1.4s var(--ease),--sun-y 1.4s var(--ease),--stars 1.4s var(--ease),--grid 1.4s var(--ease),--fog 1.4s var(--ease)}
.f-sky{position:absolute;left:0;right:0;top:0;bottom:var(--landh);background:radial-gradient(ellipse 84% 70% at var(--sun-x) var(--sun-y),var(--sun),transparent 74%),linear-gradient(to bottom,var(--sky-z) 0%,var(--sky-u) 36%,var(--sky-l) 74%,var(--sky-h) 100%)}
.f-stars{position:absolute;left:0;right:0;top:0;bottom:calc(var(--landh) + 14%);opacity:calc(var(--stars) * .62);-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 28%,transparent 72%);mask-image:linear-gradient(to bottom,#000 0,#000 28%,transparent 72%);/* small and dim, thinning toward the land: a star beside a word must never read as a dot of punctuation */
  background-image:radial-gradient(circle 1.0px at 31px 47px,rgba(255,255,255,.72) 35%,transparent),radial-gradient(circle 1.0px at 173px 91px,rgba(255,255,255,.62) 35%,transparent),radial-gradient(circle 1.0px at 97px 151px,rgba(255,248,236,.7) 30%,transparent),radial-gradient(circle 1.0px at 221px 23px,rgba(255,255,255,.7) 35%,transparent),radial-gradient(circle 1.0px at 59px 203px,rgba(228,236,255,.66) 35%,transparent),radial-gradient(circle 0.9px at 140px 250px,rgba(255,255,255,.6) 35%,transparent),radial-gradient(circle 1.0px at 12px 118px,rgba(255,255,255,.75) 35%,transparent);
  background-size:251px 223px,307px 263px,419px 337px,283px 191px,367px 293px,199px 277px,331px 241px;
  -webkit-mask-image:linear-gradient(#000 30%,transparent);mask-image:linear-gradient(#000 30%,transparent)}
.f-land{position:absolute;left:0;right:0;bottom:0;height:var(--landh);background:linear-gradient(to bottom,var(--land-r) 0,var(--land-f) 26%,var(--land-n) 100%)}
.f-ridge{position:absolute;left:0;bottom:calc(var(--landh) - 1px);width:100%;height:clamp(22px,4.4vh,46px)}
.f-ridge path{fill:var(--land-r)}
.f-grid{position:absolute;left:0;bottom:0;width:100%;height:var(--landh);opacity:var(--grid);-webkit-mask-image:linear-gradient(transparent 16%,#000 86%);mask-image:linear-gradient(transparent 16%,#000 86%)}
.f-grid path{fill:none;stroke:#f7ecd6;stroke-width:1;vector-effect:non-scaling-stroke}
.f-fog{position:absolute;inset:0;opacity:var(--fog);background:linear-gradient(to bottom,rgb(var(--fog-c) / 0) 0%,rgb(var(--fog-c) / .08) 30%,rgb(var(--fog-c) / .3) 68%,rgb(var(--fog-c) / .34) 82%,rgb(var(--fog-c) / .2) 100%)}
.f-rain{position:absolute;inset:0;overflow:hidden;opacity:var(--rain);display:none}
.wet .f-rain{display:block}
.f-rain i{position:absolute;left:-18%;right:-18%;top:-190px;bottom:-190px;transform:rotate(13deg);will-change:transform;
  background-image:radial-gradient(.8px 12px at 11px 30px,rgba(226,234,246,.62),transparent),radial-gradient(.7px 10px at 40px 108px,rgba(226,234,246,.5),transparent),radial-gradient(.8px 13px at 63px 64px,rgba(226,234,246,.56),transparent),radial-gradient(.7px 9px at 29px 141px,rgba(226,234,246,.45),transparent);
  background-size:71px 160px,89px 160px,113px 160px,59px 160px}
.f-rain i + i{opacity:.55;background-size:53px 160px,67px 160px,97px 160px,43px 160px}
.f-grain{position:absolute;inset:0;background:var(--grain) repeat;background-size:128px 128px;opacity:.07}
@keyframes tsw-fall{from{transform:rotate(13deg) translateY(0)}to{transform:rotate(13deg) translateY(160px)}}
@media (prefers-reduced-motion:no-preference){
  .wet .f-rain i{animation:tsw-fall .52s linear infinite}
  .wet .f-rain i + i{animation-duration:.9s}
}

/* ── on-screen graphics: the shared atoms ──────────────────────────────────────────────────────────────────────────────────────── */
/* the LIVE bug: the one place the red appears */
.onair{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 11px 0 10px;background:rgba(5,6,9,.92);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);color:#fff;font:700 11.5px/1 var(--f-disp);font-stretch:112%;letter-spacing:.15em;text-transform:uppercase;white-space:nowrap}
.onair i{width:7px;height:7px;border-radius:50%;background:var(--red);flex:none}
@keyframes tsw-onair{0%,58%{opacity:1}66%,90%{opacity:.25}100%{opacity:1}}
@media (prefers-reduced-motion:no-preference){.onair i{animation:tsw-onair 2s linear infinite}}
/* a strip: a label over a picture */
.strip{display:inline-flex;align-items:center;min-height:28px;padding:5px 10px;background:var(--onpic);color:#f4f0e8;font:600 11px/1.15 var(--f-disp);font-stretch:112%;letter-spacing:.13em;text-transform:uppercase}
/* timecode: shown once the world's clock is known */
.clk{font:500 12.5px/1.15 var(--f-tc);letter-spacing:.01em;text-transform:none;white-space:nowrap}
.clk{display:none}
.has-clock .clk{display:inline-flex}
/* a small outlined label: NEW, the English of a quote, a tag */
.badge{display:inline-block;font:650 11px/1 var(--f-disp);font-stretch:112%;font-style:normal;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);box-shadow:inset 0 0 0 1px var(--line-2);padding:3px 5px 2px 6px;vertical-align:1px;white-space:nowrap}
/* hairlines for pictures. No grain over a picture since 2026-09-28 (his wish for sharp pictures): the sky keeps its own (.f-grain), and a
   .grain left in a page's markup shows nothing */
.grain{display:none}
.hair{position:relative}
.hair::after{content:"";position:absolute;inset:0;border:1px solid var(--hair-pic);pointer-events:none;z-index:5}
/* viewfinder brackets (and an optional centre cross, <b>) */
.vf{position:absolute;inset:var(--vf);pointer-events:none;z-index:1}
.vf i{position:absolute;width:var(--br);height:var(--br);border:0 solid rgba(255,255,255,.8)}
.vf i:nth-child(1){top:0;left:0;border-width:1.5px 0 0 1.5px}
.vf i:nth-child(2){top:0;right:0;border-width:1.5px 1.5px 0 0}
.vf i:nth-child(3){bottom:0;left:0;border-width:0 0 1.5px 1.5px}
.vf i:nth-child(4){bottom:0;right:0;border-width:0 1.5px 1.5px 0}
.vf b{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px}
.vf b::before,.vf b::after{content:"";position:absolute;background:rgba(255,255,255,.6)}
.vf b::before{left:7.25px;top:0;width:1.5px;height:16px}
.vf b::after{top:7.25px;left:0;width:16px;height:1.5px}
/* the lower third: a paper plate (<b>), then a dark strap (<span>) on one hairline */
.lt{display:flex;flex-direction:column;align-items:flex-start;font-style:normal}
.lt b{display:block;background:var(--paper);color:var(--ink);font:800 clamp(16px,.5vw + 14px,21px)/1.05 var(--f-disp);font-stretch:74%;letter-spacing:.05em;text-transform:uppercase;padding:.44em .72em .4em}
.lt > span{display:block;background:var(--strap);color:#f2eee7;font:500 clamp(14px,.2vw + 13px,16px)/1.35 var(--f-read);padding:.44em .86em .5em;border-top:1px solid rgba(242,236,224,.5)}
/* the wipe: plates and slates come on like broadcast graphics, once, when they enter (a page script adds .wipe, then .in) */
.wipe > b,.wipe > span,.slate.wipe{clip-path:inset(0 100% 0 0)}
.wipe.in > b,.wipe.in > span,.slate.wipe.in{clip-path:inset(0 0 0 0);transition:clip-path .62s var(--ease)}
.wipe.in > span{transition-delay:.12s}
.slate.wipe.in{transition-delay:calc(var(--i,0) * 70ms)}

/* ── buttons: square plates, the arrow in its own cell ─────────────────────────────────────────────────────────────────────────── */
.btn{--h:48px;display:inline-flex;align-items:center;height:var(--h);padding:0 18px;border:1px solid transparent;font:750 15px/1 var(--f-disp);font-stretch:76%;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.btn svg{flex:none;align-self:stretch;width:var(--h);height:auto;box-sizing:border-box;padding:0 calc((var(--h) - 18px) / 2)}
.btn-solid{background:var(--paper);color:var(--ink);padding-right:0}
.btn-solid svg{margin-left:16px;margin-right:-1px;background:var(--ink);color:var(--paper)}
.btn-solid:hover{background:var(--paper-hi)}
.btn-ghost{background:rgba(6,7,10,.6);color:#f4f0e8;border-color:rgba(245,240,230,.44)}
.btn-ghost:hover{background:rgba(6,7,10,.9);border-color:var(--paper)}
.btn-ghost svg{margin-right:-18px;margin-left:4px}
.btn-accent{background:rgba(6,7,10,.8);color:#f4f0e8;border-color:var(--paper);padding-left:0}
.btn-accent svg{margin-right:14px;margin-left:-1px;background:var(--paper);color:var(--ink);padding:0 calc((var(--h) - 16px) / 2)}
.btn-accent:hover{background:rgba(6,7,10,.96)}
.btn-accent:hover svg{background:var(--paper-hi)}
.btn:active{transform:translateY(1px)}
.btn-s{--h:38px;font-size:13px;padding:0 12px}
.btn-s.btn-solid{padding-right:0}
.btn-s.btn-solid svg{margin-left:12px}
.btn[aria-disabled="true"],.btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
button.btn{font-family:var(--f-disp)}
.cta-row{display:flex;flex-wrap:wrap;gap:10px}
/* a text link with an arrow, on a hairline */
.link{display:inline-flex;align-items:center;gap:10px;margin-top:28px;padding-bottom:7px;border-bottom:1px solid var(--line-2);font:700 13px/1 var(--f-disp);font-stretch:108%;letter-spacing:.13em;text-transform:uppercase;text-decoration:none;color:var(--text);transition:border-color .2s var(--ease)}
.link svg{width:16px;height:16px}
.link:hover{border-bottom-color:var(--paper)}

/* ── navigation: a bar over the upper sky; a sheet on phones ──────────────────────────────────────────────────────────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:30;height:calc(var(--nav-h) + var(--sat));padding:var(--sat) max(var(--gut),var(--sar)) 0 max(var(--gut),var(--sal));display:flex;align-items:center;gap:8px;background:transparent;border-bottom:1px solid transparent;transition:background-color .35s var(--ease),border-color .35s var(--ease)}
.nav.scrolled,.nav.open{background:var(--deep);border-bottom-color:var(--line)}   /* the sky-tinted plate, solid (words scrolled under it must not show through), never a flat black (sky.js's floor), never a blur */
.brand{display:inline-flex;align-items:center;gap:8px;margin-right:auto;min-width:0;text-decoration:none;color:var(--text);font:720 14px/1 var(--f-disp);font-stretch:80%;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.brand img{width:22px;height:22px;filter:grayscale(1) brightness(1.4)}
.links{display:none}
.links a{text-decoration:none}
/* the language switch (tools/i18n.mjs langMenu markup; do not add LANG_CSS next to this kit) */
details.lang{position:relative;flex:none}
details.lang > summary{list-style:none;display:flex;align-items:center;gap:7px;height:38px;padding:0 10px;border:1px solid var(--line-2);border-radius:0;background:transparent;cursor:pointer;font:700 12px/1 var(--f-disp);font-stretch:108%;letter-spacing:.12em;color:var(--text);-webkit-user-select:none;user-select:none;transition:border-color .2s var(--ease)}
details.lang > summary::-webkit-details-marker{display:none}
details.lang > summary:hover,details.lang[open] > summary{border-color:var(--paper);color:var(--text);background:transparent}
.lang .flag{display:block;width:20px;height:14px;overflow:hidden;flex:none;border-radius:0;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.lang .flag svg{display:block;width:100%;height:100%}
.lang .chev{width:13px;height:13px;color:var(--dim);transition:transform .2s var(--ease)}
details.lang[open] .chev{transform:rotate(180deg)}
.lang .code{display:none}
.lang-menu{position:absolute;right:0;top:calc(100% + 8px);margin:0;padding:6px;list-style:none;min-width:196px;background:var(--deep);border:1px solid var(--line-2);border-radius:0;box-shadow:var(--shadow-pop);z-index:40}
.lang-menu li{margin:0}
.lang-menu a{display:flex;align-items:center;gap:12px;height:42px;padding:0 12px;border-radius:0;text-decoration:none;font:500 15px/1 var(--f-read);color:var(--text)}
.lang-menu a:hover,.lang-menu a:focus-visible{background:rgba(245,240,230,.08);color:var(--text)}
.lang-menu .tick{width:16px;height:16px;margin-left:auto;color:var(--text)}
/* the nav's action: a small solid plate, long words on wide screens, short on phones */
.nav-cta,.nav > .btn{--h:38px;font-size:13px;padding:0 12px;background:var(--paper);color:var(--ink)}
.nav-cta:hover,.nav > .btn:hover{background:var(--paper-hi)}
.nav-cta .long,.nav > .btn .long{display:none}
/* the live stream (YouTube, his ask of 2026-10-02): a secondary plate between the language and the way in; a camera and a red dot, the words from 420px */
/* (the kit's .btn svg is a 38px square with padding: the camera here is a plain 17px icon); the icon and the dot alone on a phone, "Live"
   from 700px, the whole words from 1100px; the name folds onto two lines up to 559px so that the plate fits beside the switch */
.nav > .btn.nav-live{background:transparent;color:var(--text);border:1px solid var(--line-2);gap:7px;padding:0 11px}
.nav > .btn.nav-live:hover{background:transparent;border-color:var(--paper)}
.nav > .btn.nav-live svg{width:17px;height:17px;padding:0;align-self:center}
.nav-live i{width:7px;height:7px;border-radius:50%;background:var(--red);flex:none}
.nav > .btn.nav-live .long,.nav > .btn.nav-live .short{display:none}
@media (min-width:700px){.nav > .btn.nav-live .short{display:inline}}
@media (min-width:1100px){.nav > .btn.nav-live .short{display:none}.nav > .btn.nav-live .long{display:inline}}
@media (max-width:559px){.nav > .btn.nav-live{padding:0 10px;gap:6px}.nav .brand span{white-space:normal;font-size:13px;line-height:1.05;letter-spacing:.06em}}
@media (max-width:419px){.lang .chev{display:none}details.lang > summary{padding:0 9px}}
@media (max-width:419px){.nav .brand span{white-space:normal;font-size:13px;line-height:1.05;letter-spacing:.06em}}   /* a long word on the nav's plate (German) folds the name onto two lines instead of under the switch */
@media (min-width:420px){.brand{gap:10px}.brand img{width:26px;height:26px}}
@media (max-width:359px){.brand span{display:none}}
/* the phone menu: two bars that cross */
.menu{position:relative;flex:none;width:40px;height:38px;padding:0;background:transparent;border:1px solid var(--line-2);cursor:pointer}
.menu span{position:absolute;left:11px;right:11px;height:1.5px;background:var(--text);transition:transform .3s var(--ease),top .3s var(--ease)}
.menu span:first-child{top:14px}
.menu span:last-child{top:21px}
.nav.open .menu span:first-child{top:17.5px;transform:rotate(45deg)}
.nav.open .menu span:last-child{top:17.5px;transform:rotate(-45deg)}
.nav.open .links{display:flex;flex-direction:column;position:fixed;left:0;right:0;top:calc(var(--nav-h) + var(--sat));max-height:calc(100dvh - var(--nav-h) - var(--sat));overflow-y:auto;padding:4px max(var(--gut),var(--sar)) calc(24px + var(--sab)) max(var(--gut),var(--sal));background:var(--deep);border-bottom:1px solid var(--line-2);box-shadow:0 30px 50px -20px rgba(1,2,8,.8)}
.nav.open .links a{display:flex;align-items:center;justify-content:space-between;height:58px;border-bottom:1px solid var(--line);font:760 25px/1 var(--f-disp);font-stretch:72%;letter-spacing:.03em;text-transform:uppercase;color:var(--text)}
.nav.open .links a[aria-current]::after{content:"";width:8px;height:8px;background:var(--paper)}
@media (min-width:1100px){
  .menu{display:none}
  .links{display:flex;align-items:center;gap:24px;margin-right:16px}
  .links a{font:600 12px/1 var(--f-disp);font-stretch:108%;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);padding:6px 0;border-bottom:1px solid transparent;transition:color .2s var(--ease),border-color .2s var(--ease)}
  .links a:hover,.links a[aria-current]{color:var(--text);border-bottom-color:var(--paper)}
  .lang .code{display:inline}
  .nav-cta .long,.nav > .btn .long{display:inline}.nav-cta .short,.nav > .btn .short{display:none}
  .nav{gap:10px}
  .nav .brand{font-size:12.5px;font-stretch:108%;letter-spacing:.12em}
}

/* ── the LIVE bar: bug, place, timecode, sky readout, in the sky above the feed (or above an inner page's title) ──────────────── */
.sky-osd{flex:none;display:flex;flex-wrap:wrap;align-items:center;row-gap:8px;margin:0;padding:10px max(var(--fx),var(--sar)) 12px max(var(--fx),var(--sal))}
.rail{display:inline-flex;align-items:center;gap:9px;height:28px;padding:0 13px;border-left:1px solid var(--line-2);color:var(--text);font:600 11.5px/1 var(--f-disp);font-stretch:112%;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap}
.onair + .rail{border-left:0}
.rail.clk{gap:0;font:500 13px/1 var(--f-tc);letter-spacing:.01em;text-transform:none}
.wide{display:none!important}
.skyread{display:none;font:500 13.5px/1 var(--f-read);letter-spacing:.005em;text-transform:none;color:var(--text)}
.has-sky .skyread{display:inline-flex}
.sw{flex:none;width:16px;height:11px;background:linear-gradient(#0a1127,#142758 62%,#213667);box-shadow:0 0 0 1px rgba(245,240,230,.4)}
@media (max-width:999px){.sky-osd{flex-wrap:nowrap}.skyread{flex:1 1 0;min-width:0;border-left:0;padding-right:0;white-space:normal;height:auto;min-height:28px;line-height:1.25}}
@media (min-width:1000px){.has-clock .wide.clk,.wide:not(.clk){display:inline-flex!important}.onair + .rail{border-left:0;padding-left:14px}}

/* ── the feed frame: a picture in a letterbox, viewfinder brackets, the channel bug, a real shadow ─────────────────────────────── */
.frame{position:relative;overflow:hidden;background:#0d110e;box-shadow:var(--shadow)}
.feed{aspect-ratio:16 / 9}
.feed.letterbox{aspect-ratio:2.39}
.feed > img:not(.chan),.feed > picture,.feed > picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.chan{position:absolute;z-index:2;top:calc(var(--vf) + 10px);right:calc(var(--vf) + 12px);width:34px;height:34px;opacity:.55;filter:grayscale(1) brightness(1.8)}
.shade{position:absolute;inset:0;background:radial-gradient(130% 100% at 50% 42%,transparent 62%,rgba(0,0,0,.3) 100%),linear-gradient(to top,rgba(0,0,0,.28),transparent 34%)}
@media (min-width:700px){.chan{width:40px;height:40px}}
/* the hero: the live feed, standing in the island's sky */
.hero{position:relative;display:flex;flex-direction:column;height:100vh;height:100svh;min-height:620px;padding-top:calc(var(--nav-h) + var(--sat))}
.hero .frame{flex:1 1 auto;min-height:0;margin:0 max(var(--fx),var(--sar)) 0 max(var(--fx),var(--sal))}
.hero-bg{position:absolute;inset:0}
.hero-pic,.hero-pic img{position:absolute;inset:0;width:100%;height:100%}
.hero-pic img{object-fit:cover;object-position:60% 50%}
.feed-osd{position:absolute;z-index:3;top:calc(var(--vf) + 12px);left:calc(var(--vf) + 12px);right:calc(var(--vf) + 58px);margin:0;display:flex;flex-wrap:wrap;gap:6px}
/* the title plate, the line under it on a dark strap, and the actions */
.hero-in{position:absolute;z-index:2;left:calc(var(--vf) + 10px);right:calc(var(--vf) + 10px);bottom:calc(var(--vf) + 14px);width:fit-content;display:grid;grid-template-columns:minmax(0,1fr)}
.hero-in h1{margin:0;background:var(--paper);color:var(--ink);font-weight:830;font-size:var(--t-hero);line-height:.95;font-stretch:70%;letter-spacing:-.012em;padding:.15em .3em .16em;max-width:100%;text-wrap:balance}
.hero-in .sub{margin:0;background:var(--sub);color:#f4f0e8;font:450 clamp(16px,.35vw + 14.5px,19.5px)/1.46 var(--f-read);padding:.62em .95em .68em;border-top:1px solid rgba(242,236,224,.5);contain:inline-size}
.hero-in .cta-row{margin-top:14px;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.hero-in .cta-row .btn,.end .cta-row .btn{justify-content:space-between}
.end .cta-row .btn-accent{justify-content:flex-start}
@media (min-width:560px){.hero-in .cta-row{display:flex;justify-self:start}}
.bar-b{flex:none;position:relative;display:flex;align-items:center;padding:12px max(var(--fx),var(--sar)) calc(12px + var(--sab)) max(var(--fx),var(--sal))}
.scroll-cue{display:none}
@media (min-width:700px){
  .feed-osd{top:calc(var(--vf) + 16px);left:calc(var(--vf) + 16px);right:calc(var(--vf) + 76px)}
  .hero-in{left:calc(var(--vf) + 22px);bottom:calc(var(--vf) + 22px)}
  .sky-osd{padding-top:14px;padding-bottom:16px}
}
@media (min-width:1000px){.feed-osd{display:none}}
/* wide screens: the feed keeps the letterbox of a film, and the sky and the land show above and below it */
@media (min-width:1000px) and (min-aspect-ratio:5/4){
  .hero .frame{flex:none;height:min(max(340px,calc(100svh - var(--nav-h) - var(--sat) - 250px)),calc((100vw - 2 * var(--fx)) / 2.39))}
  .hero-in{left:max(calc(var(--vf) + 30px),4vw);bottom:calc(var(--vf) + 28px)}
  .sky-osd{padding-top:18px;padding-bottom:16px}
  .bar-b{flex:1 1 auto;align-items:flex-start;justify-content:flex-end;padding-top:22px}
  .scroll-cue{display:block;position:absolute;left:50%;top:22px;width:44px;height:44px;margin-left:-22px}
  .scroll-cue span{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-9px 0 0 -6px;border:0 solid var(--text);border-width:0 1.5px 1.5px 0;transform:rotate(45deg);opacity:.7}
  .scroll-cue:hover span{opacity:1}
}

/* ── the "Next" slate: what comes after, on a plate ────────────────────────────────────────────────────────────────────────────── */
.newline{display:flex;align-items:stretch;min-height:44px;max-width:100%;text-decoration:none;color:var(--text);background:var(--plate);box-shadow:inset 0 0 0 1px var(--line-2),var(--shadow-s);transition:box-shadow .2s var(--ease)}
.newline:hover{box-shadow:inset 0 0 0 1px var(--paper),var(--shadow-s)}
.newline b{display:flex;align-items:center;flex:none;padding:0 12px;background:var(--paper);color:var(--ink);font:750 11px/1 var(--f-disp);font-stretch:112%;letter-spacing:.15em;text-transform:uppercase}
.newline span{display:block;padding:8px 12px;font:500 14px/1.32 var(--f-read);align-self:center}
.newline span i{font:650 11px/1 var(--f-disp);font-stretch:112%;font-style:normal;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);box-shadow:inset 0 0 0 1px var(--line-2);padding:3px 5px 2px 6px;margin-right:8px;vertical-align:1px}
.newline svg{flex:none;width:18px;height:18px;align-self:center;margin-right:12px}

/* ── sections on the sky ───────────────────────────────────────────────────────────────────────────────────────────────────────── */
.block{padding:var(--section) 0}
.title{margin:0;font-weight:780;font-size:var(--t-title);line-height:.98;font-stretch:74%;letter-spacing:-.01em;color:var(--text);text-wrap:balance;max-width:18ch}
.title .dim{color:var(--dim);font-weight:640}
.body{margin:20px 0 0;color:var(--dim);font-size:var(--t-body);line-height:1.62;max-width:58ch}
.statement{margin:0;font-weight:660;font-size:var(--t-statement);line-height:1;font-stretch:78%;letter-spacing:-.016em;color:var(--dim);max-width:18ch;text-wrap:balance}
.statement em{font-style:normal;color:var(--text);font-weight:800}
.about .wrap{display:grid;grid-template-columns:minmax(0,1fr)}
.about .body{margin-top:clamp(24px,2.6vw,40px)}
@media (min-width:1000px){
  .about .wrap{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
  .statement{grid-column:1 / span 10}
  .about .body{grid-column:7 / span 6}
  .own{grid-column:1 / -1}
}

/* ── subtitles: an inhabitant's words, line by line, over a still (the "own" scene) ───────────────────────────────────────────── */
.own{position:relative;margin:clamp(52px,6vw,104px) 0 0;display:flex;flex-direction:column;justify-content:flex-end;padding:62% 12px 22px;overflow:hidden;background:#07080b;box-shadow:var(--shadow)}
.own .still{position:absolute;top:0;left:0;width:100%;height:auto;aspect-ratio:1 / 1.02;object-fit:cover;object-position:62% 28%}
.own .scrim{position:absolute;left:0;right:0;top:0;aspect-ratio:1 / 1.02;background:linear-gradient(to bottom,rgba(7,8,11,0) 48%,rgba(7,8,11,.6) 78%,#07080b 100%)}
.pb{position:absolute;z-index:2;top:calc(var(--vf) + 10px);left:calc(var(--vf) + 10px);margin:0;display:none;align-items:center;gap:8px;height:28px;padding:0 10px;background:var(--onpic);color:#f4f0e8;font:500 12.5px/1 var(--f-tc);font-variant-numeric:tabular-nums}
.pb svg{width:10px;height:10px;fill:currentColor}
.pb .stop{display:none}
.own.ended .pb .play{display:none}
.own.ended .pb .stop{display:block}
.own.armed .pb{display:inline-flex}
.subs{position:relative;z-index:2;margin:0;text-align:center}
.subs p{margin:0}
.ln{display:block;margin:0 0 3px;text-align:center;color:#fff;font:500 clamp(17px,.5vw + 15px,25px)/1.64 var(--f-read);letter-spacing:.005em;text-wrap:balance}
.ln > span{background:var(--sub);padding:.1em .46em .14em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.own.armed .ln{opacity:0;transform:translateY(5px);transition:opacity .38s var(--ease),transform .6s var(--ease)}
.own.armed .ln.on{opacity:1;transform:none}
.own figcaption{position:relative;z-index:2;margin-top:18px;align-self:flex-start}
@media (min-width:700px){
  .own{aspect-ratio:16 / 9;padding:calc(var(--vf) + 56px) calc(var(--vf) + 22px) calc(var(--vf) + 20px)}
  .own .still{top:0;height:100%;aspect-ratio:auto;object-position:50% 20%;transform:scale(1.28);transform-origin:57% 14%}
  .own .scrim{top:auto;bottom:0;height:62%;aspect-ratio:auto;background:linear-gradient(to top,rgba(4,4,6,.56) 0%,rgba(4,4,6,.32) 50%,rgba(4,4,6,0) 100%)}
  .pb{top:calc(var(--vf) + 16px);left:calc(var(--vf) + 16px)}
  .ln{margin-bottom:4px}
}

/* ── chapter slates: the running order ─────────────────────────────────────────────────────────────────────────────────────────── */
.how .title{max-width:24ch}
.rules{list-style:none;margin:clamp(44px,4.8vw,72px) 0 0;padding:0;display:grid;gap:36px}
.rules li{position:relative;min-width:0}
/* a slate is its title alone, at the foot of the plate: no number or label above it (the ruler's ticks keep the order on wide screens) */
.slate{position:relative;display:flex;flex-direction:column;justify-content:center;padding:18px 16px 19px;background:var(--plate);box-shadow:var(--shadow-s)}
.slate::after{content:"";position:absolute;inset:0;border:1px solid var(--line);pointer-events:none}
/* the plate hugs its title at every width (the chapter label above it is gone) */
.slate h3{margin:0;font-weight:800;font-size:var(--t-slate);line-height:.98;font-stretch:72%;letter-spacing:-.006em;color:#fff;text-wrap:balance}
.rules p{margin:16px 0 0;color:var(--dim);font-size:16px;line-height:1.56;max-width:46ch}
@media (min-width:700px){
  .rules{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:18px;row-gap:46px}
  .slate{min-height:96px}   /* equal plates in a row of three, the title centred in each */
}
@media (min-width:1180px){
  .rules{grid-template-columns:repeat(6,minmax(0,1fr));column-gap:14px;padding-top:30px;border-top:1px solid var(--line-2)}
  .rules li::before{content:"";position:absolute;top:-36px;left:0;width:1.5px;height:12px;background:var(--paper)}
  .rules p{font-size:15.5px}
}

/* ── monitors: the world window and the movie window, standing in the sky ──────────────────────────────────────────────────────── */
.wall{display:grid;gap:clamp(88px,9vw,128px);padding-top:var(--section);padding-bottom:var(--section)}
.mon-sec{display:grid;gap:30px;min-width:0}
.live-head{min-width:0}
.live-head .body{margin-top:16px;max-width:52ch}
@media (min-width:1000px){
  .wall{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto auto;column-gap:clamp(28px,3vw,52px);row-gap:36px}
  .mon-sec{grid-row:span 2;grid-template-rows:subgrid;gap:0}
  .mon-sec .live-head{align-self:start}
}
.window{position:relative;display:block;overflow:hidden;background:var(--deep);color:var(--text);text-decoration:none;box-shadow:var(--shadow)}
.window > img,.window > picture > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.window .osd{position:absolute;z-index:2;top:var(--wi);left:var(--wi);right:var(--wi);display:flex;flex-wrap:wrap;gap:6px}
.mon{aspect-ratio:4 / 3}
@media (min-width:700px){.mon{aspect-ratio:16 / 9}}
.mon .tcr{position:absolute;z-index:2;right:var(--wi);bottom:calc(var(--wi) + 9px);display:none;padding:5px 9px;background:var(--onpic);color:#f4f0e8}
.has-clock .mon .tcr{display:block}
.window .enter{position:absolute;z-index:2;left:var(--wi);bottom:var(--wi);--h:44px;font-size:14px}
.window:hover .enter{background:var(--paper-hi)}
.window:focus-visible{outline-offset:4px}
.film{aspect-ratio:4 / 3;background:var(--deep)}   /* the letterbox takes the sky's dark, never flat black */
.film > img,.film > picture > img{top:50%;bottom:auto;height:auto;aspect-ratio:2.39;transform:translateY(-50%)}
.film .chip{position:absolute;z-index:2;top:var(--wi);right:var(--wi);display:inline-flex;align-items:center;min-height:28px;padding:0 9px;box-shadow:inset 0 0 0 1px var(--line-2);font:600 11px/1 var(--f-disp);font-stretch:112%;letter-spacing:.13em;text-transform:uppercase;color:#f4f0e8}
.film .osd{right:auto}
.playbadge{position:absolute;z-index:2;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;color:#fff}
.playbadge svg{display:block;width:100%;height:100%}
.playbadge .ring{fill:rgba(6,7,10,.35);transition:fill .25s var(--ease)}
.playbadge .tri{transition:fill .25s var(--ease)}
.film:hover .playbadge .ring{fill:#fff}
.film:hover .playbadge .tri{fill:var(--ink)}
@media (min-width:1000px){
  .film{aspect-ratio:auto;height:100%;min-height:300px}
  .playbadge{width:76px;height:76px;margin:-38px 0 0 -38px}
}
@media (max-width:999px){.has-clock .mon .tcr{display:none}}
@media (min-width:1000px){.window .osd .clk{display:none}}

/* ── the request card: the words as a subtitle, what came of it as a caption card ──────────────────────────────────────────────── */
.req .wrap{display:grid;gap:52px}
@media (min-width:1000px){.req .wrap{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(40px,5vw,88px);align-items:center}}
.req-card{position:relative;margin:0;box-shadow:var(--shadow)}
.req-card .cap{position:absolute;z-index:3;top:var(--wi);right:var(--wi)}
.clip{position:relative;aspect-ratio:4 / 3;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--wi) + 38px) var(--wi) var(--wi);overflow:hidden;background:var(--deep)}
.clip > img,.clip > picture > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.clip::before{content:"";position:absolute;z-index:1;left:0;right:0;bottom:0;height:62%;background:linear-gradient(to top,rgba(6,7,10,.5),rgba(6,7,10,0));pointer-events:none}
.clip .tag{position:absolute;z-index:2;top:var(--wi);left:var(--wi)}
.clip blockquote{position:relative;z-index:2;margin:0 0 14px;text-align:center}
.clip .ln{font-size:clamp(17px,.45vw + 15px,23px)}
.clip .lt{position:relative;z-index:2}
/* the caption card: paper, a tag with an ink stamp, the outcome in ink */
.out{position:relative;background:var(--paper);color:var(--ink);padding:18px 20px 22px}
.out .tag{display:flex;align-items:center;gap:10px;font:700 11px/1 var(--f-disp);font-stretch:112%;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-dim)}
.out .tag b{background:var(--ink);color:var(--paper);padding:6px 9px 5px;letter-spacing:.14em;font-weight:750}
.out p{margin:12px 0 0;font:500 clamp(17px,.35vw + 15.5px,20px)/1.45 var(--f-read);color:var(--ink);max-width:54ch}
@media (min-width:700px){.clip{aspect-ratio:16 / 9}.out{padding:22px 26px 26px}}

/* ── episode cards (blog): a rail on the home page, a grid on the blog's front page (.posts.grid) ──────────────────────────────── */
.posts{list-style:none;margin:clamp(38px,4vw,60px) 0 0;padding:0;display:grid;gap:28px}
.pc{display:grid;grid-template-columns:118px minmax(0,1fr);gap:14px;align-items:start;text-decoration:none;color:var(--text)}
.pc img{width:100%;height:auto;aspect-ratio:4 / 3;object-fit:cover;background:var(--deep);box-shadow:var(--shadow-s)}
.pc time{display:block;margin-top:9px;font:500 12px/1.2 var(--f-tc);letter-spacing:.02em;color:var(--dim);font-variant-numeric:tabular-nums}   /* the date under the title, never above it */
.pc time .badge{margin-left:8px}
.pc h2,.pc h3{margin:0;font-weight:760;font-size:clamp(19px,.55vw + 16px,25px);line-height:1.05;font-stretch:76%;letter-spacing:-.004em;text-wrap:balance}
.pc p{margin:8px 0 0;font-size:15px;line-height:1.5;color:var(--dim)}
.pc > div > span{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font:700 11.5px/1 var(--f-disp);font-stretch:108%;letter-spacing:.14em;text-transform:uppercase;color:var(--text);padding-bottom:5px;border-bottom:1px solid var(--line-2);transition:border-color .2s var(--ease)}
.pc > div > span svg{width:14px;height:14px}
.pc:hover > div > span{border-bottom-color:var(--paper)}
.pc:hover h2,.pc:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em}
@media (min-width:760px){
  .posts:not(.grid){grid-auto-flow:column;grid-auto-columns:minmax(290px,calc((100% - 44px) / 3));gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:24px 0 30px;border-top:1px solid var(--line-2);scrollbar-width:thin}
  .posts:not(.grid) li{scroll-snap-align:start}
  .pc{grid-template-columns:minmax(0,1fr);gap:16px}
  .pc img{aspect-ratio:16 / 9}
}
.posts.grid{padding-top:24px;border-top:1px solid var(--line-2)}
@media (min-width:760px){.posts.grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22px;row-gap:44px}}
@media (min-width:1100px){.posts.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.col.narrow .posts.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}   /* a narrow column holds two */
.page-head + .posts,.more-head + .posts{margin-top:clamp(12px,1.6vw,20px)}

/* ── the end card: back to the live feed ───────────────────────────────────────────────────────────────────────────────────────── */
.final{padding:clamp(40px,6vw,104px) 0}
.final .frame{display:grid;place-items:center;min-height:min(84svh,760px);margin:0 max(var(--fx),var(--sar)) 0 max(var(--fx),var(--sal));padding:calc(var(--vf) + 56px) calc(var(--vf) + 16px);text-align:center;background:#0b0d0b}
@media (min-width:1500px){.final .frame{max-width:1440px;margin-left:auto;margin-right:auto}}
.final-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.final-pic::after{content:"";position:absolute;inset:0;background:radial-gradient(72% 64% at 50% 52%,rgba(5,7,10,.62) 0%,rgba(5,7,10,.5) 60%,rgba(5,7,10,.36) 100%)}
.end{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
/* the feed's bug, in its top left corner like every feed's (never a label above the title) */
.final .osd{position:absolute;z-index:3;top:calc(var(--vf) + 12px);left:calc(var(--vf) + 12px);right:calc(var(--vf) + 12px);margin:0;display:flex;flex-wrap:wrap;gap:6px;text-align:left}
@media (min-width:700px){.final .osd{top:calc(var(--vf) + 16px);left:calc(var(--vf) + 16px);right:calc(var(--vf) + 16px)}}
.end h2{margin:0;font-weight:830;font-size:var(--t-end);line-height:.93;font-stretch:70%;letter-spacing:-.014em;color:#fff;text-wrap:balance;max-width:12ch}
.end .cta-row{justify-content:center;margin-top:36px}
@media (max-width:559px){.end .cta-row{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;width:min(100%,340px)}}

/* ── the foot: credits, rolling over the land ──────────────────────────────────────────────────────────────────────────────────── */
.foot{padding:clamp(76px,8vw,128px) 0 calc(48px + var(--sab));text-align:center;border-top:1px solid var(--line)}
.credits{display:flex;flex-direction:column;align-items:center}
.credits .brand{margin:0;font-size:15px;letter-spacing:.16em}
.credits .brand img{width:30px;height:30px}
.disclaimer{margin:24px auto 0;max-width:60ch;font-size:var(--t-small);line-height:1.62;color:var(--dim)}
.roll{display:grid;gap:18px;margin:clamp(50px,5vw,76px) auto 0;width:100%;max-width:560px}
.role{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:26px;align-items:baseline}
.role .r{padding-top:6px;text-align:right;font:600 11px/1.9 var(--f-disp);font-stretch:112%;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.role .names{display:flex;flex-direction:column;align-items:flex-start;gap:0;text-align:left}
.role a{display:inline-flex;align-items:center;padding:6px 0;font:650 15px/1.3 var(--f-disp);font-stretch:80%;letter-spacing:.12em;text-transform:uppercase;color:var(--text);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s var(--ease)}
.role a:hover{border-bottom-color:var(--paper)}
.role a svg{flex:none;width:15px;height:15px;margin-right:7px}
/* the base of the credits: small labels in expanded capitals; only the world's date ("Year 1 · Day 575", sky.js) is in the timecode face */
.foot-base{margin:clamp(54px,5vw,76px) 0 0;display:flex;flex-direction:column;align-items:center;gap:8px;font:600 11px/1.5 var(--f-disp);font-stretch:112%;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.foot-base .tc{font:500 12px/1.5 var(--f-tc);letter-spacing:.01em;text-transform:none;font-variant-numeric:tabular-nums}
[data-running]:empty{display:none}

/* ── add to home screen (home page) ────────────────────────────────────────────────────────────────────────────────────────────── */
#a2hs{position:fixed;left:12px;right:12px;bottom:calc(var(--sab) + 12px);max-width:520px;margin:0 auto;display:none;align-items:center;gap:10px;padding:10px 10px 10px 16px;background:var(--deep);border:1px solid var(--line-2);box-shadow:0 22px 44px -14px rgba(1,2,8,.85),0 8px 16px -8px rgba(1,2,8,.6);z-index:25}
#a2hs.show{display:flex}
#a2hs p{margin:0;flex:1;font-size:14.5px;line-height:1.45;color:var(--text)}
#a2hs button{cursor:pointer;font:700 12px/1 var(--f-disp);font-stretch:108%;letter-spacing:.12em;text-transform:uppercase}
#a2hs-go{height:38px;padding:0 14px;border:0;background:var(--paper);color:var(--ink)}
#a2hs .x{display:grid;place-items:center;width:38px;height:38px;padding:0;background:transparent;border:1px solid var(--line-2);color:var(--text)}
#a2hs .x svg{width:14px;height:14px}

/* ══ READ MODE: the inner pages ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── an inner page: under the nav, a left axis, the sky showing to the right on wide screens ──────────────────────────────────── */
.page{padding:calc(var(--nav-h) + var(--sat)) 0 var(--section)}
.col{max-width:1084px}
.col.narrow{max-width:880px}
.stack > * + *{margin-top:clamp(28px,4vw,48px)}

/* ── the page header: the LIVE bar, crumbs, the title on a paper plate, the lead on a dark strap, the facts in timecode ───────── */
.page-head{display:flex;flex-direction:column;align-items:flex-start;padding:0 0 clamp(28px,4vw,48px)}
.page-head .sky-osd{padding:10px 0 12px;align-self:stretch;margin-bottom:clamp(10px,2.4vw,32px)}
.page-head > h1:first-child,.page-head > .crumbs:first-child{margin-top:clamp(24px,4vw,56px)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 14px;font:600 11px/1.2 var(--f-disp);font-stretch:112%;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.crumbs a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:3px}
.crumbs a:hover{border-bottom-color:var(--paper)}
.crumbs > span{color:var(--dim)}
.page-head h1{margin:0;background:var(--paper);color:var(--ink);font-weight:830;font-size:var(--t-page);line-height:.95;font-stretch:70%;letter-spacing:-.012em;padding:.16em .3em .17em;max-width:100%;text-wrap:balance;box-shadow:var(--shadow-s);overflow-wrap:break-word;hyphens:auto}
.page-head .lead{margin:0;max-width:min(100%,62ch);background:var(--strap);color:#f4f0e8;font:450 var(--t-lead)/1.5 var(--f-read);padding:.62em .95em .7em;border-top:1px solid rgba(242,236,224,.5);box-shadow:var(--shadow-s);text-wrap:pretty}
.page-head .lead a{color:#fff}
/* the facts of a page on hairlines: words in expanded capitals, dates and times (time, .tc) in the timecode face; the hairline that
   would start a wrapped line falls outside and is clipped */
.meta{display:flex;flex-wrap:wrap;align-items:center;row-gap:6px;max-width:100%;margin:16px 0 0;padding:0;overflow:hidden;font:600 11px/1.2 var(--f-disp);font-stretch:112%;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.meta > *{display:inline-flex;align-items:center;gap:.5em;min-height:22px;margin-left:-13px;padding:0 25px 0 12px;border-left:1px solid var(--line-2)}
.meta time,.meta .tc{font:500 12.5px/1.2 var(--f-tc);letter-spacing:.01em;text-transform:none}
.note{margin:12px 0 0;max-width:var(--measure);font:400 14.5px/1.55 var(--f-read);color:var(--dim)}
.note a{color:var(--text)}

/* ── the sheet: long text sits on a near-solid dark plate; full width on phones ────────────────────────────────────────────────── */
.sheet{position:relative;background:var(--sheet);box-shadow:var(--shadow);padding:clamp(24px,4vw,56px) clamp(18px,4.2vw,60px) clamp(30px,4.4vw,64px)}
.sheet::after{content:"";position:absolute;inset:0;border:1px solid var(--line);pointer-events:none}
.sheet > :first-child{margin-top:0}
@media (max-width:699px){
  .sheet{margin-left:calc(-1 * max(var(--gut),var(--sal)));margin-right:calc(-1 * max(var(--gut),var(--sar)));padding-left:max(18px,var(--sal));padding-right:max(18px,var(--sar))}
  .sheet::after{border-left:0;border-right:0}
}

/* ── prose: headings, paragraphs, lists, their words as subtitles, figures, tables ────────────────────────────────────────────── */
.prose{font:400 var(--t-read)/1.72 var(--f-read);color:var(--prose)}
.prose > *{max-width:var(--measure)}
.prose > :first-child{margin-top:0}
.prose p{margin:1.05em 0 0;text-wrap:pretty}
.prose h2{margin:2.1em 0 0;font-weight:780;font-size:var(--t-h2);line-height:1.02;font-stretch:74%;letter-spacing:-.008em;color:var(--text);text-wrap:balance;scroll-margin-top:calc(var(--nav-h) + var(--sat) + 20px)}
.prose h2 em{font-style:normal;color:var(--dim);font-weight:640}
.prose h3{margin:1.9em 0 0;font-weight:720;font-size:var(--t-h3);line-height:1.15;font-stretch:84%;color:var(--text);text-wrap:balance;scroll-margin-top:calc(var(--nav-h) + var(--sat) + 20px)}
.prose h2 + p,.prose h3 + p,.prose h2 + ul,.prose h3 + ul{margin-top:.62em}
.prose a:not(.btn){color:var(--text);text-decoration:underline;text-decoration-color:rgba(245,240,230,.5);text-decoration-thickness:1px;text-underline-offset:.22em;transition:text-decoration-color .2s var(--ease)}
.prose a:not(.btn):hover{text-decoration-color:var(--paper);text-decoration-thickness:2px}
.prose strong,.prose b{color:var(--text);font-weight:700}
.prose ul,.prose ol{margin:1em 0 0;padding-left:1.35em}
.prose li{margin-top:.45em;padding-left:.15em}
.prose ul{list-style:none}
.prose ul > li{position:relative}
.prose ul > li::before{content:"";position:absolute;left:-1.1em;top:.7em;width:6px;height:6px;background:var(--paper)}
.prose ol > li::marker{font:600 .84em var(--f-tc);color:var(--dim)}
.prose hr{height:1px;margin:2.4em 0;border:0;background:var(--line-2)}
.prose code{font:500 .9em var(--f-tc);color:var(--text)}
.prose .scroll{overflow-x:auto;max-width:100%}
/* their words: subtitles on a black screen, the speaker on a paper plate */
.prose blockquote,.quote{position:relative;display:flex;flex-direction:column;align-items:center;max-width:none;margin:1.9em 0 0;padding:clamp(28px,4vw,44px) clamp(16px,3vw,34px) clamp(16px,2.4vw,24px);background:var(--screen);box-shadow:var(--shadow-s);text-align:center}
.prose blockquote::after,.quote::after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.12);pointer-events:none}
.prose blockquote p,.quote p{margin:0;max-width:44ch;color:#fff;font:500 clamp(18px,.5vw + 16px,23px)/1.6 var(--f-read);letter-spacing:.005em;text-wrap:balance}
.prose blockquote p + p,.quote p + p{margin-top:.55em}
.prose blockquote footer,.prose blockquote cite,.quote footer,.quote cite{align-self:flex-start;margin-top:24px;background:var(--paper);color:var(--ink);font:800 clamp(14px,.3vw + 13px,17px)/1.05 var(--f-disp);font-style:normal;font-stretch:74%;letter-spacing:.05em;text-transform:uppercase;padding:.48em .72em .42em;text-align:left}
/* a quote shown in translation: the inhabitant's own words under it */
.prose blockquote p.orig,.quote p.orig{max-width:56ch;margin-top:16px;color:var(--dim);font:400 14.5px/1.55 var(--f-read)}
.prose blockquote p.orig span,.quote p.orig span{display:inline-block;margin-right:8px;font:650 11px/1 var(--f-disp);font-stretch:112%;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);box-shadow:inset 0 0 0 1px var(--line-2);padding:3px 5px 2px 6px;vertical-align:1px}
/* figures: the picture with a hairline and a real shadow, the caption on a strap */
.prose figure,.fig{max-width:none;margin:2em 0 0}
.fig > img,.fig > a > img,.fig > picture img,.prose figure > img,.prose figure > a > img,.prose figure > picture img{width:100%;height:auto;background:#0d110e;outline:1px solid var(--hair-pic);outline-offset:-1px;box-shadow:var(--shadow-s)}
.fig figcaption,.prose figure figcaption{margin:0;background:var(--strap);border-top:1px solid rgba(242,236,224,.5);color:#ece7dd;font:450 14.5px/1.5 var(--f-read);padding:.62em .9em .72em;text-wrap:pretty}
.fig figcaption b,.prose figure figcaption b{color:#fff}
.pair{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(12px,2vw,20px);max-width:none;margin:2em 0 0}
.pair figure{margin:0}
.pair figcaption b{display:block;margin-bottom:2px}   /* a pair's captions name each picture on a line of its own */
.pair.keep{grid-template-columns:repeat(2,minmax(0,1fr))}   /* two small maps stay side by side on phones too */
@media (min-width:560px){.pair{grid-template-columns:repeat(2,minmax(0,1fr))}}
.px img,img.px{image-rendering:pixelated}
/* tables: labels in expanded capitals, hairlines, numbers in columns */
.prose table,.table{width:100%;max-width:none;margin:1.6em 0 0;border-collapse:collapse;font:400 15.5px/1.5 var(--f-read)}
.prose th,.table th{padding:0 16px 10px 0;border-bottom:1px solid var(--line-2);text-align:left;vertical-align:bottom;font:650 11px/1.35 var(--f-disp);font-stretch:112%;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.prose td,.table td{padding:12px 16px 12px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--prose)}
.prose td:first-child,.table td:first-child{color:var(--text)}
.prose td.num,.table td.num,.prose th.num,.table th.num{text-align:right;font-family:var(--f-tc);padding-right:0}
/* a call to go and look, inside the words */
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;max-width:none;margin:2.2em 0 0;padding:18px 18px 18px 20px;background:rgba(3,4,8,.55);box-shadow:inset 0 0 0 1px var(--line-2)}
.cta p{flex:1 1 240px;margin:0;font:760 clamp(20px,.6vw + 17px,26px)/1.1 var(--f-disp);font-stretch:76%;color:var(--text);text-wrap:balance}
.cta .btn{flex:none}
@media (max-width:559px){.cta .btn{flex:1 1 100%;justify-content:space-between}}
/* the end of a page: more to read */
.more{padding-top:clamp(56px,7vw,104px)}
/* a page's cover, right under its header, and what follows it */
.fig.cover{margin-top:0}
.fig.cover + *{margin-top:clamp(28px,4vw,48px)}
.more-head{margin:0 0 4px;font-weight:780;font-size:var(--t-h2);line-height:1.02;font-stretch:74%;color:var(--text)}

/* ── questions and answers (FAQ): a hairline, the question, a square that opens ───────────────────────────────────────────────── */
.qa-group + .qa-group,.cta + .qa-group{margin-top:clamp(40px,5vw,64px)}
.qa-group > h2{margin:0 0 12px;font-weight:780;font-size:var(--t-h2);line-height:1.02;font-stretch:74%;color:var(--text);scroll-margin-top:calc(var(--nav-h) + var(--sat) + 20px)}
.qa{border-top:1px solid var(--line-2);scroll-margin-top:calc(var(--nav-h) + var(--sat) + 20px)}
.qa:last-child{border-bottom:1px solid var(--line-2)}
.qa > summary{display:flex;align-items:flex-start;gap:16px;padding:18px 0 17px;list-style:none;cursor:pointer}
.qa > summary::-webkit-details-marker{display:none}
.qa > summary::after{content:"";flex:none;width:36px;height:36px;margin:-5px 0 -5px auto;box-shadow:inset 0 0 0 1px var(--line-2);background:linear-gradient(var(--text),var(--text)) center / 14px 1.5px no-repeat,linear-gradient(var(--text),var(--text)) center / 1.5px 14px no-repeat;transition:box-shadow .2s var(--ease)}
.qa > summary:hover::after{box-shadow:inset 0 0 0 1px var(--paper)}
.qa[open] > summary::after{background:linear-gradient(var(--ink),var(--ink)) center / 14px 1.5px no-repeat,var(--paper);box-shadow:none}
.qa > summary h3,.qa > summary .q{flex:1 1 auto;min-width:0;margin:0;font-weight:720;font-size:clamp(19px,.5vw + 17px,24px);line-height:1.22;font-stretch:84%;color:var(--text);text-wrap:balance}
.qa > summary:focus-visible{outline-offset:-2px}
.qa-a{padding:0 52px 24px 0}
.qa-a > :first-child{margin-top:0}
@media (max-width:559px){.qa-a{padding-right:0}}
/* square tabs: the sections of a page (chips), the filters of a list (with their counts) */
.chips,.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.chips li{margin:0}
.chips + *{margin-top:clamp(20px,2.6vw,32px)}
.chips a,.filters a{display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:0 13px;background:rgba(6,7,10,.55);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--text);font:700 12px/1.2 var(--f-disp);font-stretch:108%;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:box-shadow .2s var(--ease),background-color .2s var(--ease)}
.chips a:hover,.filters a:hover{box-shadow:inset 0 0 0 1px var(--paper);background:rgba(6,7,10,.85)}
.filters a.on,.filters a[aria-current]{background:var(--paper);color:var(--ink);box-shadow:none}
.filters a b{font:500 12px/1 var(--f-tc);letter-spacing:0;color:var(--dim)}
.filters a.on b,.filters a[aria-current] b{color:var(--ink-dim)}

/* ── the numbers: a scoreboard of hairline cells (press: dl.nums from the platform) ─────────────────────────────────────────────── */
.nums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:24px 0 0;padding:1px;background:var(--line);box-shadow:var(--shadow-s)}
@media (min-width:700px){.nums{grid-template-columns:repeat(3,minmax(0,1fr))}}
.nums > div{container-type:inline-size}
.nums > div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:10px;min-width:0;padding:16px 16px 18px;background:var(--sheet)}
/* a number keeps to its cell as it grows (827,303 today, millions later): its size follows the cell's width */
.nums dd{margin:0;font-weight:820;font-size:clamp(28px,26cqi,62px);line-height:.9;font-family:var(--f-disp);font-stretch:72%;letter-spacing:-.01em;color:var(--text);font-variant-numeric:tabular-nums lining-nums}
.nums dt{font:650 11px/1.4 var(--f-disp);font-stretch:112%;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.nums dt a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line-2)}
.nums dt a:hover{color:var(--text);border-bottom-color:var(--paper)}
.nums-note{margin:14px 0 0;max-width:var(--measure);font:400 14.5px/1.55 var(--f-read);color:var(--dim)}
.nums-note a{color:var(--text)}
/* ── a data readout (atlas): one line in the LIVE bar's idiom, numbers in the timecode face, their words in expanded capitals, between
   hairlines; it wraps like .meta (the hairline that would start a wrapped line falls outside and is clipped), a long label wraps inside
   its own item. Not tiles: the hero-metric template is refused. ─────────────────────────────────────────────────────────────── */
.readout{display:flex;flex-wrap:wrap;align-items:baseline;row-gap:12px;max-width:100%;margin:0;padding:13px 0 14px;list-style:none;overflow:hidden;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line)}
.readout li{display:inline-flex;align-items:baseline;gap:9px;min-width:0;max-width:calc(100% + 13px);margin-left:-13px;padding:0 25px 0 12px;border-left:1px solid var(--line-2)}
.readout b{flex:none;font:500 16px/1.1 var(--f-tc);letter-spacing:.01em;color:var(--text);font-variant-numeric:tabular-nums lining-nums}
.readout span{min-width:0;font:600 11.5px/1.35 var(--f-disp);font-stretch:112%;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
@media (max-width:559px){.readout b{min-width:5ch;text-align:right}}   /* on phones each fact takes a row: the numbers stand in a column */

/* ── the press kit: the paragraph to copy on paper, pictures and clips with their downloads, the logo on its tiles, the colours ── */
.prose .para{max-width:none;margin:1.3em 0 0;padding:clamp(18px,2.4vw,26px) clamp(18px,2.6vw,30px) clamp(20px,2.6vw,28px);background:var(--paper);color:var(--ink);box-shadow:var(--shadow-s)}
.prose .para p{margin:0;max-width:66ch;color:var(--ink);font:500 clamp(17px,.3vw + 15.8px,19.5px)/1.6 var(--f-read)}
.prose .shots,.prose .logos,.prose .swatches{max-width:none;padding:0;list-style:none}
.prose .shots > li,.prose .logos > li,.prose .swatches > li{margin:0;padding:0}
.prose .shots > li::before,.prose .logos > li::before,.prose .swatches > li::before{content:none}
.shots,.clips{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(20px,2.4vw,30px);margin:1.6em 0 0}
.clips{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));max-width:none}
.prose .shots figure,.prose .clips figure{margin:0}
.shots img{aspect-ratio:16 / 9;object-fit:cover}
.clips video{display:block;width:100%;height:auto;aspect-ratio:16 / 9;background:#0d110e;outline:1px solid var(--hair-pic);outline-offset:-1px;box-shadow:var(--shadow-s)}
.shots figcaption b,.clips figcaption b{display:block;margin-bottom:3px;font:760 clamp(18px,.4vw + 16px,21px)/1.1 var(--f-disp);font-stretch:80%;color:#fff}
/* a download: what it is and how big, in the data face, on a hairline */
.prose a.dl:not(.btn){display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding-bottom:4px;border-bottom:1px solid var(--line-2);font:500 12.5px/1.3 var(--f-tc);letter-spacing:.01em;color:var(--text);text-decoration:none;transition:border-color .2s var(--ease)}
.prose a.dl .w{font:600 11px/1.3 var(--f-disp);font-stretch:112%;letter-spacing:.13em;text-transform:uppercase}   /* the words of a download; its size and format stay data */
.prose a.dl:not(.btn):hover{border-bottom-color:var(--paper);text-decoration:none}
.dl svg{flex:none;width:14px;height:14px}
.dls{display:flex;flex-wrap:wrap;gap:0 18px}
.all{margin-top:1.4em}
.logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:clamp(18px,2vw,26px);margin:1.6em 0 0;font:400 15px/1.5 var(--f-read);color:var(--prose)}
.logos b{display:block;margin-top:14px;font:760 clamp(18px,.4vw + 16px,21px)/1.1 var(--f-disp);font-stretch:80%;color:var(--text)}
.logo-tile{position:relative;display:grid;place-items:center;aspect-ratio:1;background:var(--deep);box-shadow:inset 0 0 0 1px var(--line),var(--shadow-s)}
.logo-tile.light{background:var(--paper)}
.logo-tile img{width:44%;height:auto}
.logo-tile.full img{width:70%}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:8px;margin:1.6em 0 0}
.prose .swatches > li{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--sheet);box-shadow:inset 0 0 0 1px var(--line);font:400 14px/1.4 var(--f-read);color:var(--dim)}
.swatches i{flex:none;width:32px;height:32px;background:var(--sw);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.swatches span{display:grid;gap:1px}
.swatches b{color:var(--text);font:700 13px/1.2 var(--f-disp);font-stretch:108%;letter-spacing:.1em;text-transform:uppercase}
.prose .swatches code{font:500 12.5px var(--f-tc);color:var(--text)}

/* ── the timeline (history): a rule, squares for firsts, years as plates, days in timecode ────────────────────────────────────── */
.timeline{position:relative;margin:0;padding:0;list-style:none}
.timeline::before{content:"";position:absolute;left:5px;top:10px;bottom:0;width:1px;background:linear-gradient(to bottom,var(--line-2) 88%,transparent)}
.timeline > li{position:relative;padding-left:34px}
.timeline .year{width:fit-content;margin:clamp(30px,4vw,48px) 0 22px;padding:.3em .5em .26em;background:var(--paper);color:var(--ink);font-weight:830;font-size:clamp(22px,.8vw + 18px,30px);line-height:1;font-family:var(--f-disp);font-stretch:70%;letter-spacing:.02em;text-transform:uppercase;box-shadow:var(--shadow-s)}
.timeline .year:first-child{margin-top:0}
.timeline .entry{padding-bottom:clamp(26px,3.6vw,40px)}
.timeline .entry::before{content:"";position:absolute;left:0;top:6.5px;width:11px;height:11px;background:var(--deep);box-shadow:inset 0 0 0 1.5px var(--dim)}
.timeline .entry.change::before{background:var(--paper);box-shadow:none}
.timeline .entry.open::before{background:transparent;box-shadow:none;border:1.5px dashed var(--dim)}
.timeline .tag{display:inline-flex;align-items:center;gap:8px;min-height:24px;padding:0 8px;box-shadow:inset 0 0 0 1px var(--line-2);font:500 12.5px/1 var(--f-tc);letter-spacing:.01em;color:var(--text);font-variant-numeric:tabular-nums}
.timeline .tag .onair{height:22px;margin-left:-8px;font-size:11px}
.timeline .entry h2,.timeline .entry h3{margin:10px 0 0;font-weight:760;font-size:clamp(22px,.8vw + 18px,30px);line-height:1.04;font-stretch:76%;color:var(--text);text-wrap:balance}
.timeline .entry p{margin:8px 0 0;max-width:60ch;color:var(--prose);font-size:16.5px;line-height:1.6}
.timeline .entry p.who{font-size:14.5px;color:var(--dim)}
.timeline .entry.open h2,.timeline .entry.open h3{color:var(--dim)}

/* ── a request: who asked and when, their words as subtitles, the outcome as the card's caption (paper once the world has answered) ─ */
/* One card, no box inside it: the words sit on subtitle straps like the home's request feed, the outcome closes the card at full width. */
.request{position:relative;background:var(--sheet);box-shadow:var(--shadow-s);scroll-margin-top:calc(var(--nav-h) + var(--sat) + 20px)}
.request::after{content:"";position:absolute;inset:0;border:1px solid var(--line);pointer-events:none}
.request:target::after{border-color:var(--paper)}
.request + .request{margin-top:18px}
.request-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:14px clamp(16px,2.6vw,26px) 0}
.request-head .who{font:760 15px/1.2 var(--f-disp);font-stretch:84%;letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
.request-head .also{font:400 14px/1.3 var(--f-read);letter-spacing:0;text-transform:none;color:var(--dim)}
.request-head time{margin-left:auto;font:500 12.5px/1.2 var(--f-tc);color:var(--dim)}
@media (max-width:559px){.request-head time{margin-left:0;flex-basis:100%}}
.request-ask{padding:12px clamp(16px,2.6vw,26px) 18px}
.request-ask h2,.request-ask h3{margin:0;font-weight:780;font-size:clamp(24px,1vw + 19px,34px);line-height:1.02;font-stretch:74%;color:var(--text);text-wrap:balance}
/* their words: subtitle straps under each line (the home's .ln), left-aligned, no border and no box */
.request-ask .said{margin:14px 0 0;max-width:64ch}
.request-ask .said p{margin:0;color:#fff;font:500 clamp(16.5px,.3vw + 15.4px,19px)/1.72 var(--f-read);letter-spacing:.005em;text-wrap:pretty}
.request-ask .said p > span{background:var(--sub);padding:.12em .46em .16em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.voice{margin:12px 0 0;max-width:64ch;font:400 15px/1.55 var(--f-read);color:var(--dim)}
.voice b{font-weight:700;color:var(--text)}
/* the facts under the words: labels in expanded capitals, the date in the data face */
.request-foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;margin:0;padding:0 clamp(16px,2.6vw,26px) 16px;font:600 11px/1.5 var(--f-disp);font-stretch:112%;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.request-foot time{font:500 12.5px/1.5 var(--f-tc);letter-spacing:.01em;text-transform:none}
.request .orig{margin:-4px clamp(16px,2.6vw,26px) 0;padding:0 0 16px}
/* the outcome: the card's caption, at full width at its foot; a hairline while it waits, paper once fulfilled */
.request-out{position:relative;padding:15px clamp(16px,2.6vw,26px) 20px;border-top:1px solid var(--line-2)}
.request-out .tag{display:block;font:700 11px/1.2 var(--f-disp);font-stretch:112%;letter-spacing:.15em;text-transform:uppercase;color:var(--dim)}
.request-out .tag + *{margin-top:8px}
.request-out p{margin:8px 0 0;max-width:64ch;font:450 16.5px/1.55 var(--f-read);color:var(--prose)}
.request-out p.open{color:var(--dim)}
.request-out blockquote{margin:8px 0 0;max-width:64ch;font:450 16px/1.55 var(--f-read);color:var(--prose)}
.request-out * + .tag{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
/* answered: the caption turns to paper */
.is-fulfilled .request-out{background:var(--paper);border-top-color:transparent}
.is-fulfilled .request-out .tag{color:var(--ink-dim)}
.is-fulfilled .request-out p,.is-fulfilled .request-out blockquote{color:var(--ink)}
.is-fulfilled .request-out * + .tag{border-top-color:rgba(17,16,19,.18)}
/* the state stamp: its word, and a square that fills as the request moves: waiting, in the making, fulfilled; declined is a dash */
.state{display:inline-flex;align-items:center;gap:8px;height:26px;padding:0 9px;box-shadow:inset 0 0 0 1px var(--line-2);font:750 11px/1 var(--f-disp);font-stretch:112%;letter-spacing:.14em;text-transform:uppercase;color:var(--text);white-space:nowrap}
.state::before{content:"";flex:none;width:8px;height:8px;box-shadow:inset 0 0 0 1.5px currentColor}
.is-making .state{box-shadow:inset 0 0 0 1px var(--paper)}
.is-making .state::before{background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
.is-fulfilled .state{background:var(--paper);color:var(--ink);box-shadow:none}
.is-fulfilled .state::before{background:currentColor}
.is-declined .state{color:var(--dim)}
.is-declined .state::before{height:1.5px;box-shadow:none;background:currentColor}
/* the original words of a translated text */
details.orig{margin-top:14px;font:400 14.5px/1.55 var(--f-read);color:var(--dim)}
details.orig > summary{display:inline-flex;align-items:center;gap:8px;min-height:32px;list-style:none;cursor:pointer;font:650 11px/1 var(--f-disp);font-stretch:112%;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
details.orig > summary::-webkit-details-marker{display:none}
details.orig > summary::before{content:"";width:12px;height:12px;box-shadow:inset 0 0 0 1px var(--line-2);background:linear-gradient(currentColor,currentColor) center / 6px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center / 1.5px 6px no-repeat}
details.orig[open] > summary::before{background:linear-gradient(currentColor,currentColor) center / 6px 1.5px no-repeat}
details.orig > summary:hover{color:var(--text)}
details.orig p{margin:8px 0 0;max-width:64ch}
/* nothing to show */
.empty{padding:clamp(28px,5vw,48px);text-align:center;color:var(--dim);background:var(--plate);box-shadow:inset 0 0 0 1px var(--line-2);outline:1px dashed var(--line-2);outline-offset:-9px}
.empty b{display:block;margin-bottom:8px;font-weight:780;font-size:clamp(24px,1vw + 19px,32px);line-height:1.05;font-family:var(--f-disp);font-stretch:74%;color:var(--text)}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(36px,5vw,56px)}

/* ── the atlas: an index rail, a search field, specimen tiles, small tags, colour keys, a lightbox ─────────────────────────────── */
@media (min-width:1000px){.toc{position:sticky;top:calc(var(--nav-h) + var(--sat) + 16px);max-height:calc(100dvh - var(--nav-h) - var(--sat) - 32px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}}
.toc-title{margin:0 0 12px;font:650 11px/1 var(--f-disp);font-stretch:112%;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.toc a{display:flex;align-items:baseline;gap:8px;padding:8px 10px 8px 12px;border-left:1px solid var(--line);color:var(--dim);font:650 14px/1.25 var(--f-disp);font-stretch:92%;text-decoration:none;transition:color .2s var(--ease),border-color .2s var(--ease),background-color .2s var(--ease)}
.toc a b{margin-left:auto;font:500 12px/1 var(--f-tc);color:var(--dim)}
.toc a:hover{color:var(--text);border-left-color:var(--line-2)}
.toc a.on,.toc a[aria-current]{color:var(--text);border-left-color:var(--paper);background:rgba(245,240,230,.07)}
.find{display:flex;align-items:center;gap:10px;max-width:440px;height:48px;padding:0 14px;background:rgba(6,7,10,.72);box-shadow:inset 0 0 0 1px var(--line-2);transition:box-shadow .2s var(--ease)}
.find:focus-within{box-shadow:inset 0 0 0 1px var(--paper)}
.find svg{flex:none;width:16px;height:16px;color:var(--dim)}
.find input{flex:1;min-width:0;height:100%;padding:0;background:none;border:0;outline:0;color:var(--text);font:400 16px/1 var(--f-read)}
.find input::-webkit-search-cancel-button{filter:grayscale(1) brightness(1.6)}
.tile{margin:0;min-width:0;background:var(--sheet);box-shadow:inset 0 0 0 1px var(--line),var(--shadow-s)}
.tile > a{display:block;position:relative;background:#0d110e;cursor:zoom-in}
.tile img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.tile figcaption{padding:12px 16px 16px;border-top:1px solid rgba(242,236,224,.5)}
.tile .name{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font:760 22px/1.05 var(--f-disp);font-stretch:76%;color:var(--text)}
.tile .name small{font:600 11px/1.35 var(--f-disp);font-stretch:112%;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.tile p{margin:8px 0 0;font:400 15px/1.5 var(--f-read);color:var(--prose)}
.tile p.dim{color:var(--dim);font-size:14.5px}
.tile p b{color:var(--text);font-weight:700}
.tile p.bad::before{content:"";display:inline-block;width:7px;height:7px;margin:0 9px 1px 1px;border:1.5px solid currentColor;transform:rotate(45deg)}
.tile p.bad{color:var(--text)}
.tile p.good::before{content:"";display:inline-block;width:7px;height:7px;margin:0 8px 1px 0;background:var(--paper)}
.tags{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0 0;padding:0;list-style:none}
.tags li{font:650 11px/1 var(--f-disp);font-stretch:112%;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);box-shadow:inset 0 0 0 1px var(--line-2);padding:5px 7px 4px}
.legend{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.legend li{display:inline-flex;align-items:center;gap:8px;min-height:30px;padding:0 10px 0 8px;box-shadow:inset 0 0 0 1px var(--line);font:400 14px/1.2 var(--f-read);color:var(--prose)}
.legend i{flex:none;width:14px;height:14px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.legend b{font:500 12px/1 var(--f-tc);color:var(--dim);font-weight:500}
.lb{position:fixed;z-index:60;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:calc(var(--sat) + 18px) 16px calc(var(--sab) + 18px);background:rgba(3,4,8,.95);opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility .25s}
.lb.open{opacity:1;visibility:visible}
.lb img{display:block;max-width:min(94vw,1100px);max-height:calc(100dvh - 190px);height:auto;outline:1px solid var(--hair-pic);outline-offset:-1px;box-shadow:var(--shadow)}
.lb figcaption{max-width:min(94vw,900px);text-align:center;color:var(--prose);font:400 15px/1.5 var(--f-read)}
.lb button{position:absolute;display:grid;place-items:center;width:46px;height:46px;padding:0;background:var(--deep);border:1px solid var(--line-2);color:var(--text);cursor:pointer;transition:border-color .2s var(--ease)}
.lb button:hover{border-color:var(--paper)}
.lb button svg{width:20px;height:20px}

/* ── reduced motion: nothing moves, nothing blinks, nothing wipes ─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---- the book (his ask of 2026-10-25): the ribbon every page carries to /book, and the book page's hero. The ribbon floats at the foot of the
   screen (the nav is fixed at the top), never on the book's own page; it stores nothing and cannot be closed, so /privacy stays true. */
.ribbon{position:fixed;z-index:25;left:50%;bottom:calc(14px + var(--sab));transform:translateX(-50%);display:flex;align-items:center;gap:10px;max-width:calc(100vw - 24px);padding:7px 14px 7px 7px;border-radius:999px;background:var(--paper);color:var(--ink);font:600 14px/1.25 var(--f-read);text-decoration:none;white-space:nowrap;box-shadow:var(--shadow-pop);transition:transform .25s var(--ease),background-color .2s}
.ribbon:hover{background:var(--paper-hi);transform:translateX(-50%) translateY(-2px)}
.ribbon:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.ribbon-new{flex:none;background:var(--deep);color:#f2c27a;font:700 11px/1 var(--f-disp);font-stretch:110%;letter-spacing:.16em;text-transform:uppercase;padding:7px 10px;border-radius:999px}
.ribbon-text{overflow:hidden;text-overflow:ellipsis;min-width:0}
.ribbon svg{flex:none;width:16px;height:16px}
.foot{padding-bottom:calc(72px + var(--sab))}
@media print{.ribbon{display:none}}
.book-hero{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:center;width:100%;margin-top:clamp(20px,3vw,34px)}
@media (min-width:720px){.book-hero{grid-template-columns:300px minmax(0,1fr);gap:40px}}
.book-cover{margin:0;justify-self:center;width:min(62vw,300px)}
.book-cover img{display:block;width:100%;height:auto;border-radius:3px;box-shadow:0 26px 60px rgba(0,0,0,.55),0 0 0 1px rgba(245,240,230,.08)}
.book-facts{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.book-sub{margin:0;font:italic 450 var(--t-lead)/1.4 var(--f-read);color:var(--text);text-wrap:balance}
.book-by{margin:0;font:600 13px/1.5 var(--f-disp);font-stretch:110%;letter-spacing:.16em;text-transform:uppercase;color:var(--text)}
.book-by span{display:block;font:400 14.5px/1.5 var(--f-read);letter-spacing:0;text-transform:none;color:var(--dim)}
.book-facts .note{margin:0}
@media (max-width:560px){.ribbon-more{display:none}}

/* ---- the window about the book (his ask of 2026-10-29; build-site.mjs bookModal): at most 400 px tall, the cover on the left, the words and
   the two stores on the right; on a phone the cover shrinks beside the words. A native <dialog>: Esc, the close button and the backdrop close it. */
.book-modal{padding:0;border:0;margin:auto;width:min(720px,calc(100vw - 24px));max-height:min(400px,calc(100dvh - 24px));overflow:hidden;background:var(--deep);color:var(--text);border-radius:6px;box-shadow:0 30px 90px rgba(0,0,0,.65),0 0 0 1px rgba(245,240,230,.14)}
.book-modal::backdrop{background:rgba(7,13,32,.74);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.bm{display:grid;grid-template-columns:auto minmax(0,1fr);max-height:inherit}
.bm-cover{display:block;height:min(400px,calc(100dvh - 24px));aspect-ratio:5/8;background:#070d20}
.bm-cover img{display:block;width:100%;height:100%;object-fit:cover}
.bm-text{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px;padding:30px 30px 26px;overflow:auto;background:linear-gradient(160deg,rgba(242,194,122,.07),rgba(10,18,42,0) 45%)}
.bm-close{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--dim);cursor:pointer}
.bm-close:hover{color:var(--text);background:rgba(245,240,230,.08)}.bm-close svg{width:18px;height:18px}
.bm-close:focus-visible,.bm-more:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.bm-kicker{margin:0;font:700 11.5px/1 var(--f-disp);font-stretch:112%;letter-spacing:.22em;text-transform:uppercase;color:#f2c27a}
.bm-text h2{margin:0;padding-right:28px;font:830 clamp(24px,3.2vw,32px)/1 var(--f-disp);font-stretch:72%;letter-spacing:-.01em;text-wrap:balance;color:var(--text)}
.bm-body{margin:0;font:400 15.5px/1.5 var(--f-read);color:var(--dim);text-wrap:pretty}
.bm-cta{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.bm-more{font:400 14px/1.4 var(--f-read);color:var(--dim);text-underline-offset:.22em}.bm-more:hover{color:var(--text)}
@media (prefers-reduced-motion:no-preference){.book-modal[open]{animation:bm-in .38s var(--ease)}.book-modal[open]::backdrop{animation:bm-fade .38s ease}}
@keyframes bm-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}@keyframes bm-fade{from{opacity:0}to{opacity:1}}
@media (max-width:600px){.bm{grid-template-columns:96px minmax(0,1fr)}.bm-cover{height:auto;align-self:start;margin:20px 0 0 18px;width:78px;aspect-ratio:5/8;border-radius:2px;box-shadow:0 10px 24px rgba(0,0,0,.5)}
.bm-text{justify-content:flex-start;gap:10px;padding:20px 18px 18px 6px}.bm-text h2{font-size:23px}.bm-body{font-size:14.5px}.bm-cta{flex-direction:column;align-self:stretch}.bm-cta .btn{justify-content:space-between}}
/* the top menu since "The book" joined it (2026-10-30): between 1100 and 1439 px the links keep to one line, closer together, and the two
   buttons use their short words, so that the longest language (German) still fits beside the name */
@media (min-width:1100px) and (max-width:1439px){.links{gap:15px;margin-right:8px}.links a{white-space:nowrap;letter-spacing:.09em}
  .nav-cta .long,.nav > .btn .long,.nav > .btn.nav-live .long{display:none}.nav-cta .short,.nav > .btn .short,.nav > .btn.nav-live .short{display:inline}}
@media (min-width:1100px){.links a{white-space:nowrap}.nav .brand{flex:none}}