/* Fact time with Dot: the pixel world.
   Night is the default look. html[data-sky="day"] switches to the day sky
   (set from the visitor's clock by dot.js). Every colour comes from the
   pixel engine palette (remotion-tiktok/src/pixel/engine.ts). Everything
   drawn sits on a 4px grid, like one pixel of the videos. */

/* Fonts: variable files, one per subset, cover every weight we use. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
  src: url("/static/fonts/montserrat-latin-ext.woff2?v=c9a048f8f6") format("woff2");
  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: "Montserrat";
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
  src: url("/static/fonts/montserrat-latin.woff2?v=c9a048f8f6") format("woff2");
  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: "Pixelify Sans";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/static/fonts/pixelify-sans-latin-ext.woff2?v=c9a048f8f6") format("woff2");
  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: "Pixelify Sans";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/static/fonts/pixelify-sans-latin.woff2?v=c9a048f8f6") format("woff2");
  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;
}

/* ---- Tokens ---------------------------------------------------------- */
:root {
  /* engine palette */
  --ink: #0a0a12;
  --white: #ffffff;
  --deep: #0b0a18;
  --night: #16142e;
  --night-3: #252248;
  --night-4: #3a3766;
  --star-dim: #5c5a8c;
  --night-6: #8f8fb8;
  --dusk: #2c1656;
  --purple-6: #d6c6ff;
  --blue-2: #10305e;
  --blue-3: #0b4f93;
  --blue-5: #3aa6e0;
  --sky: #9ad6f5;
  --teal-6: #aee8d2;
  --grass: #3f8a35;
  --grass-dark: #255e2e;
  --grass-deep: #173b26;
  --grass-hi: #7cb843;
  --gold: #a8720f;
  --yellow: #ffe800;
  --star: #fff5a8;
  --dot: #ff48b0;
  --dot-light: #ff8fcf;
  --dot-pale: #ffd1ea;
  --plum: #62124a;
  --stone-4: #6b6b78;
  --stone-5: #9d9daa;
  --moon: #d4d4dc;
  --science: #1b8f86;
  --money: #e0a91c;
  --history: #e8662a;

  /* roles, night */
  --bg: var(--night);
  --bg-raised: var(--night-3);
  --text: var(--white);
  --text-soft: var(--purple-6);
  --heading: var(--star);
  --link: var(--dot-light);
  --band-1: var(--deep);
  --band-2: var(--night);
  --band-3: var(--night-3);
  --band-4: var(--dusk);
  --trees: var(--deep);
  --orb: var(--moon);
  --orb-halo: var(--star-dim);
  --orb-mark: var(--stone-5);
  --focus: var(--yellow);
  --rule: var(--night-4);

  /* type */
  --font: "Montserrat", system-ui, sans-serif;
  --font-dot: "Pixelify Sans", "Montserrat", system-ui, sans-serif;

  /* layout */
  --col: 68ch;
  --wide: 1200px;
  --gutter: 16px;
  --u: 4px; /* one pixel of the pixel world */
  --shadow: 4px 4px 0 var(--ink);
  --dot-size: 96px;
  --ground-h: 80px;
  /* pixel art tiles, 4px per pixel */
  --grass-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='80' viewBox='0 0 32 20' shape-rendering='crispEdges'%3E%3Cpath fill='%233f8a35' d='M3 1h1v1h-1zM10 1h1v1h-1zM18 1h1v1h-1zM25 1h1v1h-1zM0 2h1v1h-1zM2 2h1v1h-1zM6 2h1v1h-1zM9 2h1v1h-1zM13 2h1v1h-1zM17 2h1v1h-1zM21 2h1v1h-1zM24 2h1v1h-1zM28 2h1v1h-1zM0 3h1v1h-1zM2 3h3v1h-3zM6 3h2v1h-2zM9 3h3v1h-3zM13 3h2v1h-2zM16 3h4v1h-4zM21 3h2v1h-2zM24 3h3v1h-3zM28 3h3v1h-3zM0 4h32v1h-32zM0 5h14v1h-14zM15 5h17v1h-17zM0 6h6v1h-6zM7 6h25v1h-25zM0 7h5v1h-5zM8 7h24v1h-24zM0 8h32v1h-32zM0 9h1v1h-1zM2 9h1v1h-1zM4 9h1v1h-1zM6 9h1v1h-1zM8 9h1v1h-1zM10 9h1v1h-1zM12 9h1v1h-1zM14 9h1v1h-1zM16 9h1v1h-1zM18 9h1v1h-1zM20 9h1v1h-1zM22 9h1v1h-1zM24 9h1v1h-1zM26 9h1v1h-1zM28 9h1v1h-1zM30 9h1v1h-1zM1 10h1v1h-1zM5 10h1v1h-1zM9 10h1v1h-1zM13 10h1v1h-1zM17 10h1v1h-1zM21 10h1v1h-1zM25 10h1v1h-1zM29 10h1v1h-1z'/%3E%3Cpath fill='%237cb843' d='M3 2h1v1h-1zM10 2h1v1h-1zM18 2h1v1h-1zM25 2h1v1h-1zM30 2h1v1h-1zM1 3h1v1h-1zM5 3h1v1h-1zM8 3h1v1h-1zM12 3h1v1h-1zM15 3h1v1h-1zM20 3h1v1h-1zM23 3h1v1h-1zM27 3h1v1h-1zM31 3h1v1h-1z'/%3E%3Cpath fill='%23ffe800' d='M14 5h1v1h-1zM21 12h1v1h-1z'/%3E%3Cpath fill='%23ff8fcf' d='M6 6h1v1h-1zM27 17h1v1h-1z'/%3E%3Cpath fill='%23255e2e' d='M5 7h3v1h-3zM1 9h1v1h-1zM3 9h1v1h-1zM5 9h1v1h-1zM7 9h1v1h-1zM9 9h1v1h-1zM11 9h1v1h-1zM13 9h1v1h-1zM15 9h1v1h-1zM17 9h1v1h-1zM19 9h1v1h-1zM21 9h1v1h-1zM23 9h1v1h-1zM25 9h1v1h-1zM27 9h1v1h-1zM29 9h1v1h-1zM31 9h1v1h-1zM0 10h1v1h-1zM2 10h3v1h-3zM6 10h3v1h-3zM10 10h3v1h-3zM14 10h3v1h-3zM18 10h3v1h-3zM22 10h3v1h-3zM26 10h3v1h-3zM30 10h2v1h-2zM0 11h32v1h-32zM0 12h21v1h-21zM22 12h10v1h-10zM0 13h32v1h-32zM0 14h32v1h-32zM1 15h1v1h-1zM3 15h1v1h-1zM5 15h1v1h-1zM7 15h1v1h-1zM9 15h1v1h-1zM11 15h1v1h-1zM13 15h1v1h-1zM15 15h1v1h-1zM17 15h1v1h-1zM19 15h1v1h-1zM21 15h1v1h-1zM23 15h1v1h-1zM25 15h1v1h-1zM27 15h1v1h-1zM29 15h1v1h-1zM31 15h1v1h-1zM0 16h1v1h-1zM4 16h1v1h-1zM8 16h1v1h-1zM12 16h1v1h-1zM16 16h1v1h-1zM20 16h1v1h-1zM24 16h1v1h-1zM28 16h1v1h-1z'/%3E%3Cpath fill='%23173b26' d='M0 15h1v1h-1zM2 15h1v1h-1zM4 15h1v1h-1zM6 15h1v1h-1zM8 15h1v1h-1zM10 15h1v1h-1zM12 15h1v1h-1zM14 15h1v1h-1zM16 15h1v1h-1zM18 15h1v1h-1zM20 15h1v1h-1zM22 15h1v1h-1zM24 15h1v1h-1zM26 15h1v1h-1zM28 15h1v1h-1zM30 15h1v1h-1zM1 16h3v1h-3zM5 16h3v1h-3zM9 16h3v1h-3zM13 16h3v1h-3zM17 16h3v1h-3zM21 16h3v1h-3zM25 16h3v1h-3zM29 16h3v1h-3zM0 17h27v1h-27zM28 17h4v1h-4zM0 18h32v1h-32zM0 19h32v1h-32z'/%3E%3C/svg%3E");
  --trees-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='56' viewBox='0 0 48 14' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M27 2h1v1h-1zM8 3h1v1h-1zM27 3h1v1h-1zM8 4h1v1h-1zM26 4h3v1h-3zM7 5h3v1h-3zM17 5h1v1h-1zM26 5h3v1h-3zM38 5h1v1h-1zM7 6h3v1h-3zM17 6h1v1h-1zM25 6h5v1h-5zM38 6h1v1h-1zM3 7h1v1h-1zM6 7h5v1h-5zM16 7h3v1h-3zM25 7h5v1h-5zM33 7h1v1h-1zM37 7h3v1h-3zM3 8h1v1h-1zM6 8h5v1h-5zM12 8h1v1h-1zM16 8h3v1h-3zM24 8h7v1h-7zM33 8h1v1h-1zM37 8h3v1h-3zM44 8h1v1h-1zM2 9h11v1h-11zM15 9h5v1h-5zM23 9h8v1h-8zM32 9h3v1h-3zM36 9h5v1h-5zM44 9h1v1h-1zM2 10h12v1h-12zM15 10h5v1h-5zM23 10h8v1h-8zM32 10h3v1h-3zM36 10h5v1h-5zM43 10h3v1h-3zM1 11h20v1h-20zM22 11h20v1h-20zM43 11h3v1h-3zM0 12h48v1h-48zM0 13h48v1h-48z'/%3E%3C/svg%3E");

  color-scheme: dark;
}

html[data-sky="day"] {
  --bg: var(--sky);
  --bg-raised: var(--teal-6);
  --text: var(--blue-2);
  --text-soft: var(--blue-2);
  --heading: var(--blue-2);
  --link: var(--plum);
  --band-1: var(--blue-5);
  --band-2: var(--sky);
  --band-3: var(--sky);
  --band-4: var(--teal-6);
  --trees: var(--grass-dark);
  --orb: var(--yellow);
  --orb-halo: var(--star);
  --orb-mark: var(--yellow);
  --rule: var(--ink);
  color-scheme: light;
}

/* ---- Base ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 600 1.0625rem/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}
main { display: block; }
a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 2px; }
a:hover { text-decoration-thickness: 3px; }
img, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-style: normal; color: var(--heading); margin: 0; min-width: 0; overflow-wrap: anywhere; }
h1 { font-weight: 900; font-size: clamp(2rem, 1.2rem + 3.6vw, 3.5rem); line-height: 1.08; }
h2 { font-weight: 900; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); line-height: 1.15; }
p { margin: 0 0 1em; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 0;
  box-shadow: 0 0 0 6px var(--ink);
}

/* Centered content column with a 16px gutter at phone width. */
.today, .album, .related, .fact-head, .fact-layout, .topic-intro, .legal, .lost {
  padding-inline: max(var(--gutter), calc((100% - var(--wide)) / 2));
}

/* ---- Pixel buttons (accounts and platforms) --------------------------- */
.accounts ul, .platforms ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
}
.accounts a, .platforms a, a.pair {
  display: inline-block;
  padding: 10px 14px;
  background: var(--dot);
  color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: var(--shadow);
  font-weight: 800;
  font-size: 0.9375rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.accounts a:hover, .platforms a:hover, a.pair:hover { background: var(--dot-light); }
.accounts a:active, .platforms a:active, a.pair:active { transform: translate(4px, 4px); box-shadow: none; }
.accounts a:focus-visible, .platforms a:focus-visible, a.pair:focus-visible { box-shadow: 0 0 0 6px var(--ink); }
a.pair { background: var(--star); }
a.pair:hover { background: var(--yellow); }

/* ---- The scene (home hero) ------------------------------------------- */
.scene {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 4px solid var(--ink);
}
.sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    repeating-conic-gradient(var(--band-1) 0 25%, transparent 0 50%) 0 calc(28% + 2.24px) / 8px 8px repeat-x,
    repeating-conic-gradient(var(--band-2) 0 25%, transparent 0 50%) 0 calc(50% + 4px) / 8px 8px repeat-x,
    repeating-conic-gradient(var(--band-3) 0 25%, transparent 0 50%) 0 calc(66% + 5.28px) / 8px 8px repeat-x,
    linear-gradient(var(--band-1) 0 28%, var(--band-2) 0 50%, var(--band-3) 0 66%, var(--band-4) 0);
}
.stars, .moon, .trees, .ground { position: absolute; display: block; }
.stars {
  top: 0;
  left: 0;
  width: var(--u);
  height: var(--u);
  background: transparent;
  box-shadow: 31vw 304px 0 var(--star-dim),70vw 68px 0 var(--star-dim),48vw 312px 0 var(--star-dim),61vw 324px 0 var(--star-dim),75vw 36px 0 var(--star-dim),78vw 8px 0 var(--star-dim),61vw 136px 0 var(--star-dim),71vw 120px 0 var(--star-dim),25vw 368px 0 var(--star-dim),61vw 280px 0 var(--star-dim),71vw 244px 0 var(--star-dim),51vw 328px 0 var(--star-dim),20vw 120px 0 var(--star-dim),82vw 80px 0 var(--star-dim),67vw 200px 0 var(--star-dim),95vw 8px 0 var(--star-dim),86vw 400px 0 var(--star-dim),9vw 84px 0 var(--star-dim),98vw 304px 0 var(--star-dim),6vw 156px 0 var(--star-dim),4vw 424px 0 var(--star-dim),35vw 244px 0 var(--star-dim),77vw 372px 0 var(--white),50vw 368px 0 var(--white),55vw 204px 0 var(--white),94vw 412px 0 var(--white),74vw 228px 0 var(--white),18vw 188px 0 var(--white),13vw 20px 0 var(--white),18vw 256px 0 var(--white),28vw 136px 0 var(--white),87vw 224px 0 var(--white),81vw 156px 0 var(--white),54vw 260px 0 var(--white),50vw 296px 0 var(--white),45vw 276px 0 var(--white);
}
.stars.twinkle {
  box-shadow: 75vw 212px 0 var(--star),75vw 120px 0 var(--star),44vw 352px 0 var(--star),4vw 144px 0 var(--star),78vw 344px 0 var(--star),90vw 84px 0 var(--star),90vw 168px 0 var(--star),70vw 296px 0 var(--star),73vw 56px 0 var(--star);
  animation: twinkle 2.4s steps(1) infinite;
}
html[data-sky="day"] .stars { display: none; }
@keyframes twinkle { 50% { opacity: 0.15; } }

/* The moon: a 12 x 12 pixel disc with a dithered halo. */
.moon {
  top: 12vh;
  right: 14vw;
  width: 48px;
  height: 48px;
}
.moon::before {
  content: "";
  position: absolute;
  inset: -36px;
  background: repeating-conic-gradient(var(--orb-halo) 0 25%, transparent 0 50%) 0 0 / 8px 8px;
  -webkit-mask: radial-gradient(circle, #000 30%, transparent 68%);
  mask: radial-gradient(circle, #000 30%, transparent 68%);
  opacity: 0.8;
}
.moon::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--orb-mark) 0 0) 12px 16px / 4px 4px no-repeat,
    linear-gradient(var(--orb-mark) 0 0) 28px 28px / 8px 4px no-repeat,
    linear-gradient(var(--orb-mark) 0 0) 20px 36px / 4px 4px no-repeat,
    var(--orb);
  clip-path: polygon(33.33% 0, 66.67% 0, 66.67% 8.33%, 83.33% 8.33%, 83.33% 16.67%, 91.67% 16.67%, 91.67% 33.33%, 100% 33.33%, 100% 66.67%, 91.67% 66.67%, 91.67% 83.33%, 83.33% 83.33%, 83.33% 91.67%, 66.67% 91.67%, 66.67% 100%, 33.33% 100%, 33.33% 91.67%, 16.67% 91.67%, 16.67% 83.33%, 8.33% 83.33%, 8.33% 66.67%, 0 66.67%, 0 33.33%, 8.33% 33.33%, 8.33% 16.67%, 16.67% 16.67%, 16.67% 8.33%, 33.33% 8.33%);
}

/* Pine silhouettes on the horizon, coloured through a mask. */
.trees {
  left: 0;
  right: 0;
  bottom: calc(var(--ground-h) - 12px);
  height: 56px;
  background: var(--trees);
  -webkit-mask: var(--trees-tile) 0 100% / 192px 56px repeat-x;
  mask: var(--trees-tile) 0 100% / 192px 56px repeat-x;
}
.ground {
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--ground-h);
  background: var(--grass-tile) 0 0 / 128px 80px repeat-x;
  image-rendering: pixelated;
}

.scene-copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: calc(var(--wide) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 48px var(--gutter) calc(var(--ground-h) + var(--dot-size) + 24px);
}
.scene h1 {
  font-size: clamp(2.5rem, 0.9rem + 8.2vw, 7rem); /* the Spanish name is the long one */
  line-height: 1;
  letter-spacing: -0.01em;
  text-shadow: 4px 4px 0 var(--ink);
}
.scene h1:lang(en) { font-size: clamp(2.75rem, 0.5rem + 11.5vw, 7rem); }
.brand-top, .brand-bottom { display: block; }
.scene .brand-top { color: var(--star); }
.scene .brand-bottom { color: var(--dot-light); }
html[data-sky="day"] .scene h1 {
  text-shadow: 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink), 6px 6px 0 var(--ink);
}
.tagline {
  max-width: 34ch;
  margin: 0;
  color: var(--text-soft);
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem);
  line-height: 1.45;
}
.accounts { margin-top: 8px; }

/* Dot's spot in the scene: where she stands with reduced motion, and the
   line of grass she walks along. */
.dot-stage {
  position: absolute;
  left: max(var(--gutter), calc((100% - var(--wide)) / 2));
  bottom: calc(var(--ground-h) - 20px);
  width: var(--dot-size);
  height: var(--dot-size);
  z-index: 1;
}

/* Dot's speech: the only place Pixelify Sans is used. */
.say {
  font: 500 1rem/1.3 var(--font-dot);
  background: var(--white);
  color: var(--night);
  padding: 8px 10px;
  box-shadow: 0 0 0 3px var(--ink), var(--shadow);
}

/* The countdown sign she sleeps next to at night (placed by dot.js). Its
   post reaches down to the grass line her feet stand on. */
.dot-sign {
  position: absolute;
  left: 0;
  bottom: calc(var(--ground-h) - 16px + 28px);
  z-index: 1;
  max-width: 15em;
  margin: 0;
  background: var(--star);
  color: var(--ink);
  font-weight: 700;
}
.dot-sign::after {
  content: "";
  position: absolute;
  left: 24px;
  top: calc(100% + 3px);
  width: 8px;
  height: 25px;
  background: var(--gold);
  box-shadow: 3px 0 0 var(--ink), -3px 0 0 var(--ink);
}

/* Dot herself: one button in a layer positioned on the page, moved only
   with transforms. Nothing here exists until dot.js unhides it. */
.dot-layer { position: absolute; top: 0; left: 0; width: 0; height: 0; z-index: 30; }
.dot-actor {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--dot-size);
  height: var(--dot-size);
  padding: 0;
  border: 0;
  background: transparent 0 0 / auto no-repeat;
  image-rendering: pixelated;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  pointer-events: none; /* the transparent corners never swallow clicks */
}
.dot-actor[hidden] { display: none; }
/* Only her body takes taps (columns 20 to 76, rows 24 to 92 of the sprite). */
.dot-hit { position: absolute; left: 20px; top: 24px; width: 56px; height: 68px; pointer-events: auto; }
.bubble {
  position: absolute;
  top: 0;
  left: 0;
  width: max-content;
  max-width: min(280px, calc(100vw - 2 * var(--gutter)));
  margin: 0;
}
.bubble:empty { padding: 0; box-shadow: none; }
.bubble a { color: var(--plum); font-weight: 700; }
/* Two pixel dots trailing down to her head (up when the bubble is below). */
.bubble:not(:empty)::after {
  content: "";
  position: absolute;
  left: var(--tail, 24px);
  top: calc(100% + 9px);
  width: 8px;
  height: 8px;
  background: var(--white);
  box-shadow: 0 0 0 3px var(--ink);
}
.bubble.below:not(:empty)::after { top: auto; bottom: calc(100% + 9px); }

/* 404: lights out, Dot holds the flashlight. */
.page-404 { --bg: var(--deep); }
.page-404 .lost { padding-bottom: 180px; }
.lights-out .site-header, .lights-out footer { filter: brightness(0.6); }

/* ---- Header and footer (inner pages) --------------------------------- */
.site-header {
  position: relative;
  padding: 20px max(var(--gutter), calc((100% - var(--wide)) / 2)) 40px;
  background:
    var(--grass-tile) left 0 bottom -60px / 128px 80px repeat-x,
    repeating-conic-gradient(var(--band-1) 0 25%, transparent 0 50%) 0 50% / 8px 8px repeat-x,
    linear-gradient(var(--band-1) 0 50%, var(--band-4) 0);
  border-bottom: 4px solid var(--ink);
}
.site-header .brand {
  display: inline-block;
  max-width: calc(100% - var(--dot-size) - 8px); /* Dot stands on the right */
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1.05;
  text-decoration: none;
  text-shadow: 3px 3px 0 var(--ink);
}
.site-header .brand-top, .site-header .brand-bottom { display: inline; white-space: nowrap; }
.site-header .brand-top { color: var(--star); }
.site-header .brand-bottom { color: var(--dot-light); }
html[data-sky="day"] .site-header .brand {
  text-shadow: 1px 0 0 var(--ink), -1px 0 0 var(--ink), 0 1px 0 var(--ink), 0 -1px 0 var(--ink), 3px 3px 0 var(--ink);
}

footer {
  margin-top: 72px;
  padding: 88px max(var(--gutter), calc((100% - var(--wide)) / 2)) 40px;
  background: var(--grass-tile) 0 0 / 128px 80px repeat-x, var(--grass-deep);
  color: var(--white);
}
.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
}
.footer-links a { color: var(--star); font-weight: 800; white-space: nowrap; }

/* ---- Home: today's fact ---------------------------------------------- */
.today {
  padding-top: 64px;
  display: grid;
  gap: 20px;
  justify-items: start;
}
.today-label {
  margin: 0;
  color: var(--dot-light);
  font-weight: 800;
  font-size: 1.125rem;
}
html[data-sky="day"] .today-label { color: var(--plum); }
.today h2 { max-width: 22ch; }
.today h2 a { color: var(--heading); text-decoration: none; }
.today h2 a:hover { text-decoration: underline; text-decoration-thickness: 4px; }
.source-line { margin: 0; color: var(--text-soft); }
.platforms p { margin: 0 0 12px; font-weight: 800; color: var(--text-soft); }
@media (min-width: 860px) {
  .today:has(.tv) {
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    grid-template-areas: "tv label" "tv q" "tv src" "tv watch" "tv .";
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: 64px;
    row-gap: 24px;
    align-items: start;
  }
  .today:has(.tv) .tv { grid-area: tv; }
  .today:has(.tv) .today-label { grid-area: label; align-self: end; margin-top: 40px; }
  .today:has(.tv) h2 { grid-area: q; }
  .today:has(.tv) .source-line { grid-area: src; }
  .today:has(.tv) .platforms { grid-area: watch; }
  .today h2 { font-size: 3rem; line-height: 1.1; }
}

/* ---- The TV ---------------------------------------------------------- */
.tv {
  position: relative;
  width: min(100%, 360px);
  padding: 14px 14px 52px;
  background: var(--stone-4);
  border: 6px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
}
.tv video {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: var(--ink);
  border: 4px solid var(--ink);
}
/* Scanlines over the screen; gone while the video plays. Never blocks clicks. */
.tv::after {
  content: "";
  position: absolute;
  inset: 14px 14px 52px;
  border: 4px solid transparent;
  background: repeating-linear-gradient(transparent 0 2px, rgba(10, 10, 18, 0.3) 2px 4px) content-box;
  pointer-events: none;
}
.tv.playing::after { opacity: 0; }
/* Two knobs on the chin. */
.tv::before {
  content: "";
  position: absolute;
  right: 22px;
  bottom: 16px;
  width: 16px;
  height: 16px;
  background: var(--moon);
  box-shadow: 0 0 0 4px var(--ink), -32px 0 0 0 var(--moon), -32px 0 0 4px var(--ink);
}

/* ---- The album ------------------------------------------------------- */
.album, .related { padding-top: 72px; }
.album > h2, .related > h2 { margin-bottom: 20px; }
.filters {
  display: flex;
  flex-wrap: wrap; /* the four tabs fit one row at 390; wrap rather than clip */
  padding-top: 4px;
  gap: 6px;
  padding-bottom: 0;
  border-bottom: 4px solid var(--rule);
  margin-bottom: 32px;
}
.filters button {
  font: 800 1rem/1.2 var(--font);
  color: var(--text);
  background: var(--bg-raised);
  border: 3px solid var(--rule);
  border-bottom: 0;
  padding: 9px 10px 8px;
  white-space: nowrap;
  cursor: pointer;
  margin-bottom: 0;
}
@media (min-width: 640px) { .filters { gap: 8px; } .filters button { padding: 10px 14px 9px; } .filters button[aria-pressed="true"] { padding-bottom: 13px; } }
.filters button:not([aria-pressed="true"]):hover { background: var(--night-4); }
html[data-sky="day"] .filters button:not([aria-pressed="true"]):hover { background: var(--white); }
.filters button[aria-pressed="true"] {
  background: var(--dot);
  border-color: var(--ink);
  color: var(--ink);
  padding-bottom: 12px;
  margin-top: -4px;
}

.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 18px;
}
@media (min-width: 640px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 28px; } }
@media (min-width: 1180px) { .cards { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.card {
  --kit: var(--dot);
  position: relative;
  background: var(--white);
  border: 3px solid var(--ink);
  box-shadow: var(--shadow);
  transform: rotate(-1.5deg);
}
.card:nth-child(even) { transform: rotate(1.5deg); }
.card[data-kit="science"] { --kit: var(--science); }
.card[data-kit="money"] { --kit: var(--money); }
.card[data-kit="history"] { --kit: var(--history); }
.card[hidden] { display: none; }
.card a {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--ink);
  text-decoration: none;
}
.card a::before {
  content: "";
  display: block;
  height: 14px;
  background: var(--kit);
  border-bottom: 3px solid var(--ink);
}
.card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 50% 45%;
  border-bottom: 3px solid var(--ink);
}
.card-q {
  display: block;
  padding: 10px 12px 14px;
  font-weight: 800;
  font-size: 0.9375rem;
  line-height: 1.28;
}
.card:hover { box-shadow: 8px 8px 0 var(--ink); }
.card:has(a:focus-visible) { transform: none; }
/* A sticker the visitor already saw: its corner curls up. */
.card.stuck::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 28px;
  height: 28px;
  background: linear-gradient(225deg, var(--bg) 0 50%, var(--moon) 50%);
  border-left: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  pointer-events: none;
}

/* ---- Fact page ------------------------------------------------------- */
.crumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 0.9375rem;
  color: var(--text-soft);
}
.crumbs a { white-space: nowrap; }
.crumbs [aria-current] { color: var(--text-soft); }
.fact-head { padding-top: 28px; }
.fact-head h1 { margin-top: 24px; max-width: 22ch; text-shadow: 3px 3px 0 var(--ink); }
html[data-sky="day"] .fact-head h1 { text-shadow: none; }
.answer {
  margin: 20px 0 0;
  max-width: 40ch;
  font-weight: 800;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  line-height: 1.45;
}
.fact-layout { padding-top: 40px; display: grid; gap: 48px; }
.fact-media .tv { margin-inline: auto; }
.fact-text { min-width: 0; max-width: var(--col); }
.fact-text > * + * { margin-top: 48px; }
.story p { font-size: 1.125rem; line-height: 1.65; margin: 0 0 1.1em; }
.fact-text h2 { margin-bottom: 16px; }
@media (min-width: 960px) {
  .fact-layout.has-tv { grid-template-columns: 340px minmax(0, var(--col)); column-gap: 72px; }
  .fact-media { position: sticky; top: 24px; align-self: start; }
  .fact-media .tv { margin: 0; }
}

.faq details {
  border: 3px solid var(--ink);
  background: var(--bg-raised);
  margin-bottom: 12px;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px 14px 44px;
  position: relative;
  font-weight: 800;
  line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
/* Pixel caret: a 3-step triangle. */
.faq summary::before {
  content: "";
  position: absolute;
  left: 16px;
  top: calc(14px + 0.675em - 6px);
  width: 8px;
  height: 12px;
  background: var(--dot-light);
  clip-path: polygon(0 0, 50% 0, 50% 33.33%, 100% 33.33%, 100% 66.67%, 50% 66.67%, 50% 100%, 0 100%);
}
html[data-sky="day"] .faq summary::before { background: var(--plum); }
.faq details[open] summary::before { transform: rotate(90deg); }
.faq details p { margin: 0; padding: 0 16px 16px 44px; }

.lines {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 4px solid var(--bg-raised);
}
.lines li {
  position: relative;
  padding: 8px 14px 8px 18px;
  margin-left: -4px;
  border-left: 4px solid transparent;
  color: var(--text-soft);
}
.lines li.active {
  border-left-color: var(--dot);
  background: var(--bg-raised);
  color: var(--heading);
}

/* Room for Dot on the line being said, only when she can move there. */
.dot-live .lines li.active { padding-top: calc(var(--dot-size) * 0.7); }

.source {
  background: var(--white);
  color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: var(--shadow);
  padding: 20px 20px 8px;
}
.source h2 { color: var(--ink); font-size: 1.25rem; margin-bottom: 8px; }
.source-title { font-weight: 800; font-size: 1.125rem; line-height: 1.35; margin-bottom: 4px; }
.source-meta { color: var(--night-3); }
.source a { color: var(--plum); font-weight: 800; }

/* ---- Topic pages ----------------------------------------------------- */
.topic-intro {
  --kit: var(--dot);
  background: var(--kit);
  color: var(--ink);
  padding-top: 48px;
  padding-bottom: 40px;
  border-bottom: 4px solid var(--ink);
}
.topic-intro[data-kit="science"] { --kit: var(--science); }
.topic-intro[data-kit="money"] { --kit: var(--money); }
.topic-intro[data-kit="history"] { --kit: var(--history); }
.topic-intro h1 { color: var(--ink); font-size: clamp(2.5rem, 1.5rem + 5vw, 5rem); margin-bottom: 20px; }
.topic-intro p { max-width: var(--col); font-size: 1.125rem; line-height: 1.6; }
.topic-intro p:last-child { margin-bottom: 0; }
.page-topic .album { padding-top: 48px; }

/* ---- Legal and 404 --------------------------------------------------- */
.legal, .lost { padding-top: 40px; }
.legal > * { max-width: var(--col); }
.legal h1 { margin-bottom: 24px; }
.legal h2 { font-size: 1.375rem; margin: 36px 0 12px; }
.lost { min-height: 50svh; }
.lost h1 { margin-bottom: 16px; }

/* ---- Reduced motion -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .card, .card:nth-child(even) { transform: none; }
  .accounts a:active, .platforms a:active, a.pair:active { transform: none; }
}