/* nerd.film — 2036, a hopeful future
   The page runs from night to morning: hero sky, films and idea at night,
   the 2026→2036 timeline as a sunrise, then daylight in the footer. */

@font-face { font-family: "Jost"; src: url("/assets/fonts/jost.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/assets/fonts/newsreader.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/assets/fonts/newsreader-italic.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }

:root {
  --sky: #1C2B4D;
  --sky-low: #2F3A66;
  --night: #13203A;
  --night-raised: #1B2A47;
  --night-line: #2D3D60;
  --paper: #F5EFE4;
  --haze: #ADB6CA;
  --amber: #F5B841;
  --amber-soft: #FFE3A3;
  --ink: #13203A;
  --day: #F7E3AE;
  --day-text-2: #4A4E62;
  --oat: #E8DCC8;
  --oat-2: #CDBDA3;
  --char: #34363D;
  --visor: #182033;

  --sans: "Jost", "Futura", "Avenir Next", "Century Gothic", system-ui, sans-serif;
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1200px;
  --edge: max(var(--gutter), calc((100% - var(--max)) / 2));
  --radius-card: 14px;
  --radius-panel: 22px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; background: var(--night); }
body {
  margin: 0;
  background: var(--night);
  color: var(--paper);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* 35mm grain over everything, very quiet */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ol, ul, dl, dd, blockquote { margin: 0; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--amber); color: var(--ink); }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 60; background: var(--amber); color: var(--ink); padding: .6em 1em; border-radius: 999px; font-family: var(--sans); text-decoration: none; }
.skip:focus { top: 12px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

.h2 {
  font-family: var(--serif);
  font-weight: 440;
  font-size: clamp(2.25rem, 1.4rem + 3.2vw, 4rem);
  line-height: 1.04;
  letter-spacing: -.018em;
  margin-bottom: .45em;
  text-wrap: balance;
}
.h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -.006em;
}
.lede { font-size: clamp(1.125rem, 1rem + .45vw, 1.3125rem); line-height: 1.55; color: var(--haze); max-width: 34em; text-wrap: pretty; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .7em 1.45em;
  border-radius: 999px; border: 1px solid transparent;
  font-family: var(--sans); font-weight: 500; font-size: 1.0625rem; line-height: 1.1;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn--amber { background: var(--amber); color: var(--ink); }
.btn--amber:hover { background: #FFC75A; }
.btn--line { border-color: rgba(245, 239, 228, .38); color: var(--paper); }
.btn--line:hover { border-color: var(--paper); }
.btn--ink { background: var(--ink); color: var(--day); }
.btn--ink:hover { background: #22345A; }

/* ───────────────────────── Hero / ident ───────────────────────── */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: radial-gradient(130% 75% at 50% 70%, var(--sky-low) 0%, var(--sky) 58%, #172341 100%);
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='900' viewBox='0 0 1400 900'%3E%3Ccircle cx='1229' cy='50' r='1.0' fill='%23F5EFE4' fill-opacity='0.6'/%3E%3Ccircle cx='577' cy='121' r='0.6' fill='%23F5EFE4' fill-opacity='0.45'/%3E%3Ccircle cx='1303' cy='528' r='1.2' fill='%23F5EFE4' fill-opacity='0.28'/%3E%3Ccircle cx='949' cy='440' r='0.6' fill='%23F5EFE4' fill-opacity='0.31'/%3E%3Ccircle cx='222' cy='743' r='0.7' fill='%23F5EFE4' fill-opacity='0.13'/%3E%3Ccircle cx='577' cy='127' r='1.0' fill='%23F5EFE4' fill-opacity='0.44'/%3E%3Ccircle cx='228' cy='97' r='0.9' fill='%23F5EFE4' fill-opacity='0.23'/%3E%3Ccircle cx='894' cy='474' r='0.9' fill='%23F5EFE4' fill-opacity='0.25'/%3E%3Ccircle cx='1092' cy='320' r='1.0' fill='%23F5EFE4' fill-opacity='0.55'/%3E%3Ccircle cx='975' cy='388' r='0.9' fill='%23F5EFE4' fill-opacity='0.27'/%3E%3Ccircle cx='799' cy='569' r='1.0' fill='%23F5EFE4' fill-opacity='0.38'/%3E%3Ccircle cx='401' cy='638' r='1.5' fill='%23F5EFE4' fill-opacity='0.14'/%3E%3Ccircle cx='293' cy='314' r='1.5' fill='%23F5EFE4' fill-opacity='0.37'/%3E%3Ccircle cx='882' cy='25' r='1.5' fill='%23F5EFE4' fill-opacity='0.35'/%3E%3Ccircle cx='391' cy='352' r='0.7' fill='%23F5EFE4' fill-opacity='0.18'/%3E%3Ccircle cx='301' cy='63' r='1.0' fill='%23F5EFE4' fill-opacity='0.62'/%3E%3Ccircle cx='523' cy='250' r='0.8' fill='%23F5EFE4' fill-opacity='0.32'/%3E%3Ccircle cx='7' cy='729' r='1.5' fill='%23F5EFE4' fill-opacity='0.15'/%3E%3Ccircle cx='856' cy='719' r='1.2' fill='%23F5EFE4' fill-opacity='0.29'/%3E%3Ccircle cx='185' cy='78' r='1.5' fill='%23F5EFE4' fill-opacity='0.76'/%3E%3Ccircle cx='628' cy='287' r='1.0' fill='%23F5EFE4' fill-opacity='0.54'/%3E%3Ccircle cx='468' cy='425' r='1.0' fill='%23F5EFE4' fill-opacity='0.37'/%3E%3Ccircle cx='867' cy='291' r='1.0' fill='%23F5EFE4' fill-opacity='0.49'/%3E%3Ccircle cx='465' cy='33' r='0.7' fill='%23F5EFE4' fill-opacity='0.84'/%3E%3Ccircle cx='118' cy='675' r='1.0' fill='%23F5EFE4' fill-opacity='0.12'/%3E%3Ccircle cx='508' cy='391' r='0.9' fill='%23F5EFE4' fill-opacity='0.16'/%3E%3Ccircle cx='258' cy='43' r='0.7' fill='%23F5EFE4' fill-opacity='0.28'/%3E%3Ccircle cx='805' cy='364' r='0.6' fill='%23F5EFE4' fill-opacity='0.25'/%3E%3Ccircle cx='1168' cy='719' r='1.5' fill='%23F5EFE4' fill-opacity='0.24'/%3E%3Ccircle cx='250' cy='413' r='0.9' fill='%23F5EFE4' fill-opacity='0.21'/%3E%3Ccircle cx='531' cy='129' r='0.9' fill='%23F5EFE4' fill-opacity='0.6'/%3E%3Ccircle cx='324' cy='481' r='1.0' fill='%23F5EFE4' fill-opacity='0.2'/%3E%3Ccircle cx='1113' cy='376' r='0.9' fill='%23F5EFE4' fill-opacity='0.35'/%3E%3Ccircle cx='962' cy='514' r='0.6' fill='%23F5EFE4' fill-opacity='0.21'/%3E%3Ccircle cx='295' cy='250' r='0.7' fill='%23F5EFE4' fill-opacity='0.55'/%3E%3Ccircle cx='53' cy='179' r='1.2' fill='%23F5EFE4' fill-opacity='0.31'/%3E%3Ccircle cx='948' cy='350' r='0.8' fill='%23F5EFE4' fill-opacity='0.56'/%3E%3Ccircle cx='1231' cy='14' r='0.8' fill='%23F5EFE4' fill-opacity='0.66'/%3E%3Ccircle cx='812' cy='139' r='1.2' fill='%23F5EFE4' fill-opacity='0.25'/%3E%3Ccircle cx='446' cy='543' r='0.8' fill='%23F5EFE4' fill-opacity='0.38'/%3E%3Ccircle cx='682' cy='284' r='0.8' fill='%23F5EFE4' fill-opacity='0.45'/%3E%3Ccircle cx='588' cy='726' r='1.2' fill='%23F5EFE4' fill-opacity='0.18'/%3E%3Ccircle cx='1302' cy='165' r='0.8' fill='%23F5EFE4' fill-opacity='0.4'/%3E%3Ccircle cx='242' cy='583' r='1.2' fill='%23F5EFE4' fill-opacity='0.4'/%3E%3Ccircle cx='1397' cy='158' r='0.7' fill='%23F5EFE4' fill-opacity='0.44'/%3E%3Ccircle cx='1006' cy='268' r='1.5' fill='%23F5EFE4' fill-opacity='0.25'/%3E%3Ccircle cx='939' cy='99' r='1.0' fill='%23F5EFE4' fill-opacity='0.28'/%3E%3Ccircle cx='1356' cy='276' r='0.9' fill='%23F5EFE4' fill-opacity='0.67'/%3E%3Ccircle cx='537' cy='501' r='1.5' fill='%23F5EFE4' fill-opacity='0.38'/%3E%3Ccircle cx='326' cy='205' r='1.5' fill='%23F5EFE4' fill-opacity='0.22'/%3E%3Ccircle cx='1322' cy='522' r='0.8' fill='%23F5EFE4' fill-opacity='0.35'/%3E%3Ccircle cx='817' cy='735' r='1.0' fill='%23F5EFE4' fill-opacity='0.09'/%3E%3Ccircle cx='474' cy='625' r='0.7' fill='%23F5EFE4' fill-opacity='0.15'/%3E%3Ccircle cx='25' cy='3' r='1.5' fill='%23F5EFE4' fill-opacity='0.74'/%3E%3Ccircle cx='263' cy='40' r='1.0' fill='%23F5EFE4' fill-opacity='0.45'/%3E%3Ccircle cx='943' cy='53' r='0.8' fill='%23F5EFE4' fill-opacity='0.35'/%3E%3Ccircle cx='29' cy='578' r='0.8' fill='%23F5EFE4' fill-opacity='0.25'/%3E%3Ccircle cx='736' cy='467' r='0.9' fill='%23F5EFE4' fill-opacity='0.41'/%3E%3Ccircle cx='718' cy='539' r='1.2' fill='%23F5EFE4' fill-opacity='0.22'/%3E%3Ccircle cx='136' cy='324' r='0.8' fill='%23F5EFE4' fill-opacity='0.4'/%3E%3Ccircle cx='1189' cy='746' r='0.9' fill='%23F5EFE4' fill-opacity='0.25'/%3E%3Ccircle cx='955' cy='176' r='0.9' fill='%23F5EFE4' fill-opacity='0.55'/%3E%3Ccircle cx='1014' cy='270' r='0.8' fill='%23F5EFE4' fill-opacity='0.55'/%3E%3Ccircle cx='611' cy='701' r='1.0' fill='%23F5EFE4' fill-opacity='0.14'/%3E%3Ccircle cx='1224' cy='743' r='1.2' fill='%23F5EFE4' fill-opacity='0.18'/%3E%3Ccircle cx='847' cy='568' r='0.8' fill='%23F5EFE4' fill-opacity='0.27'/%3E%3Ccircle cx='904' cy='176' r='1.2' fill='%23F5EFE4' fill-opacity='0.31'/%3E%3Ccircle cx='971' cy='134' r='0.9' fill='%23F5EFE4' fill-opacity='0.71'/%3E%3Ccircle cx='485' cy='38' r='0.7' fill='%23F5EFE4' fill-opacity='0.37'/%3E%3Ccircle cx='237' cy='750' r='0.7' fill='%23F5EFE4' fill-opacity='0.27'/%3E%3Ccircle cx='461' cy='397' r='1.2' fill='%23F5EFE4' fill-opacity='0.19'/%3E%3Ccircle cx='104' cy='377' r='0.7' fill='%23F5EFE4' fill-opacity='0.25'/%3E%3Ccircle cx='381' cy='756' r='0.8' fill='%23F5EFE4' fill-opacity='0.27'/%3E%3Ccircle cx='1309' cy='9' r='0.9' fill='%23F5EFE4' fill-opacity='0.85'/%3E%3Ccircle cx='714' cy='643' r='1.5' fill='%23F5EFE4' fill-opacity='0.12'/%3E%3Ccircle cx='276' cy='715' r='0.7' fill='%23F5EFE4' fill-opacity='0.18'/%3E%3Ccircle cx='1172' cy='690' r='1.5' fill='%23F5EFE4' fill-opacity='0.25'/%3E%3Ccircle cx='853' cy='753' r='1.2' fill='%23F5EFE4' fill-opacity='0.16'/%3E%3Ccircle cx='643' cy='198' r='1.5' fill='%23F5EFE4' fill-opacity='0.55'/%3E%3Ccircle cx='475' cy='739' r='0.9' fill='%23F5EFE4' fill-opacity='0.12'/%3E%3Ccircle cx='1359' cy='355' r='1.2' fill='%23F5EFE4' fill-opacity='0.3'/%3E%3Ccircle cx='647' cy='425' r='0.6' fill='%23F5EFE4' fill-opacity='0.33'/%3E%3Ccircle cx='1384' cy='289' r='1.0' fill='%23F5EFE4' fill-opacity='0.4'/%3E%3Ccircle cx='703' cy='530' r='0.6' fill='%23F5EFE4' fill-opacity='0.45'/%3E%3Ccircle cx='536' cy='647' r='1.2' fill='%23F5EFE4' fill-opacity='0.23'/%3E%3Ccircle cx='703' cy='435' r='1.2' fill='%23F5EFE4' fill-opacity='0.32'/%3E%3Ccircle cx='170' cy='80' r='0.6' fill='%23F5EFE4' fill-opacity='0.75'/%3E%3Ccircle cx='785' cy='685' r='0.7' fill='%23F5EFE4' fill-opacity='0.26'/%3E%3Ccircle cx='1224' cy='13' r='0.8' fill='%23F5EFE4' fill-opacity='0.61'/%3E%3Ccircle cx='1037' cy='342' r='0.6' fill='%23F5EFE4' fill-opacity='0.53'/%3E%3Ccircle cx='218' cy='372' r='0.9' fill='%23F5EFE4' fill-opacity='0.19'/%3E%3Ccircle cx='31' cy='289' r='0.9' fill='%23F5EFE4' fill-opacity='0.45'/%3E%3Ccircle cx='1159' cy='475' r='1.0' fill='%23F5EFE4' fill-opacity='0.3'/%3E%3Ccircle cx='941' cy='248' r='0.7' fill='%23F5EFE4' fill-opacity='0.23'/%3E%3Ccircle cx='969' cy='563' r='0.7' fill='%23F5EFE4' fill-opacity='0.3'/%3E%3Ccircle cx='1328' cy='710' r='1.2' fill='%23F5EFE4' fill-opacity='0.23'/%3E%3Ccircle cx='1086' cy='434' r='0.8' fill='%23F5EFE4' fill-opacity='0.26'/%3E%3Ccircle cx='776' cy='530' r='1.2' fill='%23F5EFE4' fill-opacity='0.25'/%3E%3Ccircle cx='725' cy='507' r='0.8' fill='%23F5EFE4' fill-opacity='0.16'/%3E%3Ccircle cx='280' cy='546' r='0.6' fill='%23F5EFE4' fill-opacity='0.18'/%3E%3Ccircle cx='849' cy='172' r='1.0' fill='%23F5EFE4' fill-opacity='0.39'/%3E%3Ccircle cx='650' cy='597' r='0.8' fill='%23F5EFE4' fill-opacity='0.22'/%3E%3Ccircle cx='919' cy='173' r='0.8' fill='%23F5EFE4' fill-opacity='0.46'/%3E%3Ccircle cx='771' cy='195' r='0.7' fill='%23F5EFE4' fill-opacity='0.61'/%3E%3Ccircle cx='230' cy='179' r='0.6' fill='%23F5EFE4' fill-opacity='0.68'/%3E%3Ccircle cx='1036' cy='60' r='0.7' fill='%23F5EFE4' fill-opacity='0.37'/%3E%3Ccircle cx='657' cy='284' r='1.2' fill='%23F5EFE4' fill-opacity='0.3'/%3E%3Ccircle cx='1216' cy='748' r='0.7' fill='%23F5EFE4' fill-opacity='0.21'/%3E%3Ccircle cx='909' cy='735' r='0.6' fill='%23F5EFE4' fill-opacity='0.09'/%3E%3Ccircle cx='344' cy='542' r='1.0' fill='%23F5EFE4' fill-opacity='0.14'/%3E%3Ccircle cx='1315' cy='473' r='1.2' fill='%23F5EFE4' fill-opacity='0.25'/%3E%3Ccircle cx='172' cy='488' r='1.0' fill='%23F5EFE4' fill-opacity='0.4'/%3E%3C/svg%3E");
  background-size: 1400px auto;
  background-position: center top;
  opacity: .9;
  transition: opacity 3s ease;
}
.hero.is-dawn::before { opacity: .45; }

.nav {
  position: relative; z-index: 4;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 22px var(--gutter);
  font-family: var(--sans);
}
.nav__home { display: grid; place-items: center; width: 44px; height: 44px; margin: -12px; border-radius: 50%; }
.nav__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 14px rgba(245, 184, 65, .65); }
.nav__links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .25rem clamp(14px, 2.4vw, 34px); list-style: none; padding: 0; font-size: 1rem; }
.nav__links a { color: var(--haze); text-decoration: none; padding: .35em 0; transition: color .2s; }
.nav__links a:hover { color: var(--paper); }
@media (max-width: 600px) { .nav__wide { display: none; } .nav__links { font-size: .95rem; } }

.ident { position: relative; z-index: 1; align-self: end; display: flex; justify-content: center; padding: 6vh var(--gutter) 0; }
.wordmark {
  position: relative; z-index: 1;
  font-family: var(--sans);
  font-weight: 480;
  font-size: clamp(4.4rem, 19vw, 15.5rem);
  line-height: .9;
  letter-spacing: -.035em;
  white-space: nowrap;
  margin: 0 0 .64em;
  color: var(--paper);
}
@media (min-width: 700px) { .wordmark { font-size: clamp(4.4rem, 16.5vw, 15.5rem); } }
@media (max-width: 699px) { .dawn { width: 150vw; height: 46vh; } }

/* Everything in the ident hangs off the dot slot, so it stays aligned at any size */
.slot { position: relative; display: inline-block; width: .215em; height: .125em; letter-spacing: 0; }
.ball {
  position: absolute; left: calc(50% - .0625em); bottom: -.004em; z-index: 3;
  width: .125em; height: .125em; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #FFF0C6 0 10%, var(--amber) 48%, #DC9A20 100%);
  box-shadow: 0 0 .05em .012em rgba(245, 184, 65, .7), 0 0 .32em .06em rgba(245, 184, 65, .32);
}
.horizon {
  position: absolute; z-index: 2;
  top: calc(100% + .6em); left: -100vw; width: 200vw; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245, 239, 228, .2) 18%, rgba(245, 239, 228, .2) 82%, transparent);
}
.horizon::after {
  content: ""; position: absolute; left: 50%; top: -1px; width: 70vw; height: 3px; transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 214, 140, .9), rgba(245, 184, 65, .35) 40%, transparent 72%);
  opacity: 1; transition: opacity 2.4s ease;
}
.land {
  position: absolute; z-index: -1;
  top: calc(100% + .6em); left: -100vw; width: 200vw; height: 300vh;
  background: var(--night);
}
.dawn {
  position: absolute; z-index: -1; pointer-events: none;
  top: calc(100% + .6em); left: 50%; width: min(240vw, 2400px); height: 72vh;
  transform: translate(-50%, -100%);
  background: radial-gradient(42% 100% at 50% 100%, rgba(245, 184, 65, .46) 0%, rgba(232, 150, 118, .22) 26%, rgba(120, 92, 140, .10) 50%, transparent 72%);
  opacity: 1; transition: opacity 2.6s ease-out;
}
.robot-wrap {
  position: absolute; z-index: 3;
  top: calc(100% + .16em); left: calc(50% - .176em);
  width: .352em; height: .44em;
  cursor: pointer;
}
.robot { width: 100%; height: 100%; overflow: visible; }
.robot .k { fill: var(--oat); }
.robot .k2 { fill: var(--oat-2); }
.robot .c { fill: var(--char); }
.robot .v { fill: var(--visor); }
.robot .vh { fill: none; stroke: rgba(255, 255, 255, .42); stroke-width: 2.5; stroke-linecap: round; }
.robot .knit { fill: none; stroke: #D6C7AE; stroke-width: 1.1; }
.robot .ring { fill: none; stroke: var(--amber-soft); stroke-width: 2.4; }
.robot .r-side, .robot .r-front { transform-box: view-box; transform-origin: 60px 145px; }
.robot .r-leg--front { transform-box: view-box; transform-origin: 62.5px 103px; }
.robot .r-leg--back { transform-box: view-box; transform-origin: 51.5px 103px; }
.robot .r-arm--front { transform-box: view-box; transform-origin: 64px 73.5px; }
.robot .r-wave { transform-box: view-box; transform-origin: 90.5px 66px; }
.robot .r-side { display: none; }
.robot-wrap.is-side .r-side { display: inline; }
.robot-wrap.is-side .r-front { display: none; }
.robot-wrap.is-walking .r-leg--front { animation: leg .36s ease-in-out infinite alternate; }
.robot-wrap.is-walking .r-leg--back { animation: leg .36s ease-in-out infinite alternate-reverse; }
.robot-wrap.is-walking .r-side { animation: bob .18s ease-in-out infinite alternate; }
@keyframes leg { from { transform: rotate(-17deg); } to { transform: rotate(17deg); } }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-2.5px); } }

.hero__copy {
  position: relative; z-index: 2;
  padding: 0 var(--gutter) clamp(3.5rem, 9vh, 6rem);
  text-align: center;
  transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
}
.tagline { font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem); color: var(--paper); }
.hero__lede { margin: .9rem auto 0; max-width: 31em; color: var(--haze); font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.55; text-wrap: pretty; }
.hero__actions { margin-top: 1.9rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* Before the ident plays (only when JS runs and motion is welcome) */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .hero:not(.is-playing):not(.is-done) .wordmark > span:not(.slot) { opacity: 0; }
  .hero:not(.is-playing):not(.is-done) .ball,
  .hero:not(.is-playing):not(.is-done) .robot-wrap { visibility: hidden; }
  .hero:not(.is-dawn) .dawn,
  .hero:not(.is-dawn) .horizon::after { opacity: 0; }
  .hero:not(.is-done) .hero__copy { opacity: 0; transform: translateY(10px); }
}

/* Optional: the rendered robot ident video (media/manifest.json → logo.hero) */
.ident-video { display: block; width: min(100%, 1120px); aspect-ratio: 16 / 9; height: auto; margin: 0 auto 2.5rem; border-radius: 18px; background: #0E1830; object-fit: cover; }
.hero.has-logo-video .wordmark { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hero.has-logo-video .hero__copy { opacity: 1; transform: none; }

/* ───────────────────────── Films ───────────────────────── */
section[id] { scroll-margin-top: 1rem; }
.films { padding: clamp(4.5rem, 9vw, 8rem) 0 clamp(3.5rem, 6vw, 5.5rem); }
.season { margin-top: clamp(3rem, 6vw, 4.75rem); }
.season__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .35rem 2rem; margin-bottom: 1.35rem; }
.season__note { font-family: var(--sans); font-size: 1rem; color: var(--haze); max-width: 34em; }

.shelf { position: relative; }
.shelf__track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: clamp(196px, 21vw, 262px);
  gap: clamp(14px, 1.6vw, 22px);
  list-style: none; margin: 0;
  padding: 6px var(--edge) 10px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge);
  scrollbar-width: none;
}
.shelf__track::-webkit-scrollbar { display: none; }
.shelf__track:focus { outline: none; }
.shelf__item { scroll-snap-align: start; }
.shelf__nav { display: none; justify-content: flex-end; gap: 10px; margin-top: 10px; }
@media (hover: hover) and (pointer: fine) { .shelf.has-overflow .shelf__nav { display: flex; } }
.shelf__btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--night-line); background: transparent; display: grid; place-items: center; cursor: pointer; transition: border-color .2s, opacity .2s; }
.shelf__btn:hover { border-color: var(--haze); }
.shelf__btn:disabled { opacity: .35; cursor: default; }
.shelf__btn svg { width: 20px; height: 20px; fill: none; stroke: var(--paper); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Episode card */
.ep { position: relative; }
.ep__frame { position: relative; aspect-ratio: 9 / 16; border-radius: var(--radius-card); overflow: hidden; background: var(--night-raised); }
.poster { position: absolute; inset: 0; overflow: hidden; }
.poster::before { content: ""; position: absolute; inset: 0; z-index: 4; background: linear-gradient(180deg, rgba(10, 16, 32, .34), transparent 20%, transparent 62%, rgba(10, 16, 32, .5)); }
.poster::after { content: ""; position: absolute; inset: 0; z-index: 5; opacity: .22; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 140px 140px; }
.poster__sky { position: absolute; inset: 0; background: linear-gradient(180deg, var(--s1) 0%, var(--s2) 50%, var(--s3) 70%); }
.poster__sun {
  position: absolute; z-index: 1;
  left: var(--sun-x, 60%); top: var(--sun-y);
  width: var(--sun-size, 26%); aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 40% 35%, #FFF0C9, var(--amber) 58%, #E5A02C);
  box-shadow: 0 0 34px 10px rgba(245, 184, 65, .45), 0 0 110px 40px rgba(245, 184, 65, .2);
  transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
.poster__land { position: absolute; z-index: 2; left: 0; right: 0; top: 70%; bottom: 0; background: linear-gradient(180deg, var(--l1), var(--l2)); box-shadow: 0 -1px 0 rgba(255, 226, 160, .35); }
.poster__num, .poster__theme { position: absolute; z-index: 6; top: 12px; font-family: var(--sans); color: rgba(245, 239, 228, .92); }
.poster__num { left: 14px; font-weight: 500; font-size: .95rem; }
.poster__theme { right: 14px; font-size: .85rem; }
.poster__caption {
  position: absolute; z-index: 6; left: 9%; right: 9%; top: 42%; transform: translateY(-50%);
  text-align: center; font-family: var(--sans); font-weight: 600;
  font-size: clamp(1.05rem, .95rem + .35vw, 1.25rem); line-height: 1.22; color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 0 14px rgba(0, 0, 0, .3);
  text-wrap: balance;
}
.poster__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 3; }
.ep__title {
  position: absolute; z-index: 7; left: 14px; right: 14px; bottom: 14px;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.25rem, 1.1rem + .5vw, 1.55rem); line-height: 1.08; letter-spacing: -.01em;
  color: #fff; text-wrap: balance;
}
.ep__badge {
  position: absolute; z-index: 7; top: 42px; left: 12px;
  font-family: var(--sans); font-size: .8rem; line-height: 1;
  padding: .45em .7em; border-radius: 999px;
  background: rgba(19, 32, 58, .78); color: var(--paper);
}
.ep__hook { margin: .85rem 2px 0; font-style: italic; font-size: 1.0625rem; line-height: 1.4; color: var(--haze); text-wrap: pretty; }
.ep--s2 .ep__hook { display: none; }
.ep--s2.has-image .ep__hook { display: block; }
.has-video .ep__title { right: 64px; }
.ep__play {
  position: absolute; z-index: 7; right: 12px; bottom: 12px;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(19, 32, 58, .74); box-shadow: inset 0 0 0 1px rgba(245, 239, 228, .38);
  transition: background-color .2s ease;
}
.ep__play svg { width: 18px; height: 18px; margin-left: 3px; fill: var(--paper); transition: fill .2s ease; }
.ep:hover .ep__play, .ep:focus-within .ep__play { background: var(--amber); }
.ep:hover .ep__play svg, .ep:focus-within .ep__play svg { fill: var(--ink); }
.season__note a { color: var(--paper); text-underline-offset: .22em; text-decoration-thickness: 1px; }
.ep__open { position: absolute; inset: 0; z-index: 8; width: 100%; height: 100%; padding: 0; background: transparent; border: 0; border-radius: var(--radius-card); cursor: pointer; }
.ep__open:focus-visible { outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .ep:hover .poster__sun, .ep:focus-within .poster__sun { transform: translate(-50%, -62%); }
}
.has-image .poster__sky, .has-image .poster__sun, .has-image .poster__land, .has-image .poster__caption { display: none; }
.has-image .poster::before { background: linear-gradient(180deg, rgba(10, 16, 32, .45), transparent 22%, transparent 50%, rgba(10, 16, 32, .82)); }

/* A sunrise across season one: the sun climbs a little in every episode */
.ep-01 { --s1: #18233F; --s2: #3E3F6E; --s3: #D9917A; --l1: #141C30; --l2: #0E1526; --sun-y: 72%; }
.ep-02 { --s1: #1F2C4D; --s2: #594E80; --s3: #E8A47E; --l1: #17223A; --l2: #101A2D; --sun-y: 63%; }
.ep-03 { --s1: #283A66; --s2: #7A6390; --s3: #EFB482; --l1: #1B2A3F; --l2: #131E31; --sun-y: 55%; }
.ep-04 { --s1: #33497A; --s2: #9C7A92; --s3: #F3C389; --l1: #213140; --l2: #172331; --sun-y: 46%; }
.ep-05 { --s1: #456293; --s2: #BE958F; --s3: #F6D095; --l1: #273A3F; --l2: #1B2A31; --sun-y: 37%; }
.ep-06 { --s1: #5E7FAD; --s2: #D8B09A; --s3: #F8DDA8; --l1: #2D4442; --l2: #203331; --sun-y: 29%; }
.ep-07 { --s1: #7B9DC4; --s2: #E6C7A5; --s3: #FAE8BF; --l1: #334C44; --l2: #243833; --sun-y: 21%; }
/* Season two is broad daylight, phone-camera bright */
.ep--s2 { --s1: #6E9DCF; --s2: #A9C8E4; --s3: #F1E8D2; --l1: #577A4B; --l2: #3C5737; --sun-y: 13%; --sun-x: 80%; --sun-size: 18%; }
.ep-08 { --s1: #7EA6D2; --l1: #61804F; }
.ep-10 { --s1: #5F93C9; --s3: #F4E2C4; --l1: #4E7344; }

/* ───────────────────────── The idea ───────────────────────── */
.idea { padding: clamp(4.5rem, 9vw, 8rem) 0; border-top: 1px solid rgba(45, 61, 96, .55); }
.idea__grid { display: grid; gap: 3.5rem; }
@media (min-width: 980px) { .idea__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; } }
.rules { margin-top: 2.6rem; display: grid; gap: 1.75rem 2.25rem; }
@media (min-width: 640px) { .rules { grid-template-columns: 1fr 1fr; } }
.rules dt { font-family: var(--sans); font-weight: 560; font-size: 1.125rem; margin-bottom: .35rem; color: var(--paper); }
.rules dd { color: var(--haze); line-height: 1.55; text-wrap: pretty; }

.explorer { background: var(--night-raised); border-radius: var(--radius-panel); padding: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 980px) { .explorer { position: sticky; top: 2rem; } }
.explorer__hint { margin: .5rem 0 1.35rem; color: var(--haze); font-family: var(--sans); font-size: 1rem; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  min-height: 40px; padding: .4em .95em;
  border-radius: 999px; border: 1px solid var(--night-line);
  background: transparent; color: var(--haze);
  font-family: var(--sans); font-size: .95rem; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.pill:hover { color: var(--paper); border-color: var(--haze); }
.pill[aria-pressed="true"] { background: var(--amber); border-color: var(--amber); color: var(--ink); }
.explorer__out { margin-top: 1.9rem; }
.explorer__start { font-style: italic; color: var(--haze); margin-bottom: 1.35rem; }
.explorer__film { margin-top: .4rem; padding-left: 2.75rem; }
.link-btn { background: none; border: 0; padding: .3em 0; font-family: var(--sans); font-weight: 500; font-size: 1.0625rem; color: var(--amber); text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; cursor: pointer; }
.link-btn:hover { text-decoration-thickness: 2px; }

/* The five-step chain: each step a little closer to sunrise */
.chain { list-style: none; padding: 0; counter-reset: step; }
.chain li { position: relative; counter-increment: step; padding: 0 0 1.15rem 2.75rem; min-height: 2rem; }
.chain li::before {
  content: counter(step);
  position: absolute; left: 0; top: .05em;
  width: 1.85rem; height: 1.85rem; border-radius: 50%;
  display: grid; place-items: center;
  font: 600 .8rem/1 var(--sans);
  background: var(--c); color: var(--cf, var(--paper));
}
.chain li::after { content: ""; position: absolute; left: .925rem; top: 2.1rem; bottom: .2rem; width: 1px; background: linear-gradient(var(--c), var(--cn)); opacity: .9; }
.chain li:last-child { padding-bottom: .25rem; }
.chain li:last-child::after { display: none; }
.chain li:nth-child(1) { --c: #3A4777; --cn: #6B5884; }
.chain li:nth-child(2) { --c: #6B5884; --cn: #C08A8B; }
.chain li:nth-child(3) { --c: #C08A8B; --cn: #E5A57A; --cf: var(--ink); }
.chain li:nth-child(4) { --c: #E5A57A; --cn: var(--amber); --cf: var(--ink); }
.chain li:nth-child(5) { --c: var(--amber); --cf: var(--ink); }
.chain li:nth-child(5)::before { box-shadow: 0 0 18px rgba(245, 184, 65, .55); }
.chain__text { display: block; line-height: 1.45; padding-top: .12em; color: var(--paper); text-wrap: pretty; }
.chain li:last-child .chain__text { font-weight: 560; }
.chain__here { display: block; margin-top: .3rem; font-family: var(--sans); font-size: .9rem; color: var(--amber); }
.chain--big .chain__text { font-size: clamp(1.125rem, 1.05rem + .25vw, 1.25rem); }

/* ───────────────────────── 2026 → 2036 ───────────────────────── */
.timeline { padding-top: clamp(4.5rem, 9vw, 8rem); border-top: 1px solid rgba(45, 61, 96, .55); }
.sky { list-style: none; padding: 0; margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; }
@media (min-width: 920px) { .sky { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.sky__panel { padding: clamp(2rem, 4vw, 2.75rem) var(--gutter) clamp(2.25rem, 4vw, 3rem); }
@media (min-width: 920px) {
  .sky__panel { min-height: 26rem; padding: 2.5rem clamp(1.25rem, 2.2vw, 2.25rem) 3rem; }
  .sky__panel > p:last-child { font-size: 1rem; }
}
.sky__when { font-family: var(--sans); font-size: .95rem; margin-bottom: 1rem; opacity: .85; }
.sky__title { font-family: var(--serif); font-weight: 500; font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem); line-height: 1.1; margin-bottom: .85rem; }
.sky__panel > p:last-child { font-size: 1.0625rem; line-height: 1.55; max-width: 30em; text-wrap: pretty; }
.sky__panel--1 { background: #1E2C4F; color: var(--paper); }
.sky__panel--2 { background: #34406E; color: var(--paper); }
.sky__panel--3 { background: #6A5783; color: var(--paper); }
.sky__panel--4 { background: #DE9A8C; color: var(--ink); }
.sky__panel--5 { background: var(--amber); color: var(--ink); }
.sky__panel--4 :focus-visible, .sky__panel--5 :focus-visible { outline-color: var(--ink); }
.foot :focus-visible { outline-color: var(--ink); }

/* ───────────────────────── Footer ───────────────────────── */
.foot { background: var(--day); color: var(--ink); padding: clamp(3rem, 6vw, 4.5rem) 0 2.75rem; }
.foot__grid { display: grid; gap: 1rem 2.5rem; align-items: baseline; }
@media (min-width: 760px) { .foot__grid { grid-template-columns: auto 1fr auto; } }
.foot__mark { font-family: var(--sans); font-weight: 480; font-size: 2rem; line-height: 1; letter-spacing: -.035em; }
.foot__dot { display: inline-block; width: .125em; height: .125em; margin: 0 .062em; border-radius: 50%; background: var(--amber); box-shadow: inset 0 0 0 1px rgba(170, 110, 10, .45); }
.foot__tag { font-style: italic; font-size: 1.125rem; }
.foot__links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; font-family: var(--sans); font-size: 1rem; }
.foot__links a { text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; text-decoration-color: rgba(19, 32, 58, .35); }
.foot__links a:hover { text-decoration-color: currentColor; }
.foot__small { grid-column: 1 / -1; margin-top: 1.25rem; font-family: var(--sans); font-size: .9rem; color: var(--day-text-2); }

/* ───────────────────────── Film viewer ───────────────────────── */
.viewer {
  width: min(100% - 24px, 1020px);
  max-width: none; max-height: min(94svh, 900px);
  padding: 0; border: 0; border-radius: var(--radius-panel);
  background: var(--night-raised); color: var(--paper);
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(4, 8, 18, .55);
}
.viewer::backdrop { background: rgba(8, 13, 26, .74); backdrop-filter: blur(6px); }
.viewer[open] { animation: viewer-in .3s cubic-bezier(.2, .7, .2, 1); }
@keyframes viewer-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.viewer__inner { position: relative; display: grid; max-height: inherit; overflow: auto; overscroll-behavior: contain; }
@media (min-width: 840px) {
  .viewer__inner { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; height: min(94svh, 820px); }
  .viewer__media { grid-row: 1 / span 2; }
  .viewer__body { overflow: auto; }
}
.viewer__media { display: grid; place-items: center; background: #0E1830; padding: 16px; }
.viewer__media .ep__frame, .viewer__media video, .viewer__media .yt-embed {
  height: min(54svh, 520px); width: auto; aspect-ratio: 9 / 16;
  border-radius: var(--radius-card); background: #000;
}
@media (min-width: 840px) {
  .viewer__media { overflow: auto; }
  .viewer__media .ep__frame, .viewer__media video, .viewer__media .yt-embed { height: calc(min(94svh, 820px) - 32px); }
}
.viewer__media { position: relative; }
.viewer__media iframe { position: relative; z-index: 1; display: block; border: 0; max-width: 100%; background: transparent; }
.viewer__media .ig-embed { border-radius: var(--radius-card); }
.v-loading { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; margin: 0; font-family: var(--sans); font-size: 1rem; color: var(--haze); pointer-events: none; }
.viewer__media .ep__badge, .viewer__media .poster__num, .viewer__media .poster__theme { display: none; }
.viewer__body { padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2.5rem) 1.5rem; }
.v-ep { font-family: var(--sans); font-size: 1rem; color: var(--haze); margin-bottom: .6rem; padding-right: 3rem; }
.v-title { font-family: var(--serif); font-weight: 460; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1.04; letter-spacing: -.015em; margin-bottom: .9rem; text-wrap: balance; }
.v-status { display: inline-block; font-family: var(--sans); font-size: .85rem; padding: .35em .75em; border-radius: 999px; border: 1px solid var(--night-line); margin-bottom: 1rem; }
.v-hook { font-style: italic; font-size: 1.25rem; line-height: 1.4; margin-bottom: 1rem; }
.v-logline { color: var(--haze); line-height: 1.55; max-width: 32em; }
.v-sub { font-family: var(--sans); font-weight: 560; font-size: 1.0625rem; margin: 1.9rem 0 1.1rem; }
.v-closing { margin-top: 1.9rem; padding-top: 1.4rem; border-top: 1px solid var(--night-line); font-size: clamp(1.375rem, 1.2rem + .7vw, 1.8rem); line-height: 1.3; letter-spacing: -.005em; text-wrap: pretty; }
.v-closing p::before { content: "\201C"; }
.v-closing p::after { content: "\201D"; }
.v-actions { margin-top: 1.9rem; display: flex; flex-wrap: wrap; gap: 10px; }
.viewer__bar { display: flex; justify-content: space-between; gap: 10px; padding: 1rem clamp(1.25rem, 3vw, 2.5rem) 1.35rem; border-top: 1px solid var(--night-line); background: var(--night-raised); }
.viewer__step { min-height: 44px; padding: .5em 1.1em; border-radius: 999px; border: 1px solid var(--night-line); background: transparent; font-family: var(--sans); font-size: .95rem; cursor: pointer; transition: border-color .2s; }
.viewer__step:hover { border-color: var(--haze); }
.viewer__close { position: absolute; z-index: 5; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(19, 32, 58, .82); border: 1px solid var(--night-line); cursor: pointer; }
.viewer__close svg { width: 18px; height: 18px; fill: none; stroke: var(--paper); stroke-width: 2; stroke-linecap: round; }
.viewer__close:hover { border-color: var(--haze); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* 404 */
.lost { min-height: 100svh; display: grid; place-content: center; text-align: center; gap: 1.25rem; padding: var(--gutter); background: radial-gradient(120% 70% at 50% 80%, var(--sky-low), var(--sky) 60%); }
.lost__mark { font-family: var(--sans); font-weight: 480; font-size: clamp(3.5rem, 14vw, 8rem); line-height: .9; letter-spacing: -.035em; }
.lost__gap { display: inline-block; width: .125em; height: .125em; margin: 0 .062em; border-radius: 50%; border: 2px dashed rgba(245, 184, 65, .7); }
.lost p { color: var(--haze); max-width: 26em; margin-inline: auto; }