/* 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(/kit/fonts/archivo-latin-ext.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(/kit/fonts/archivo-latin.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(/kit/fonts/atkinson-next-latin-ext.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(/kit/fonts/atkinson-next-latin.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(/kit/fonts/atkinson-mono-latin-ext.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(/kit/fonts/atkinson-mono-latin.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(/kit/grain.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}
@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}
}