/* Wiggled marketing site. No frameworks, no third-party requests.

   The site dresses the way the game dresses its Evergreen menus (Sources/UI/WorldSkin.swift: "everything
   else stays quiet, thin rules, no pills, so the painting leads"), and it is scored like a songbook,
   because every clear in the game plays a note.

   Type, all self-hosted and SIL OFL 1.1 (licences in assets/fonts/), built by Scripts/web/make_type.py:
   - Caprasimo (display, 20 KB). A soft, fat, Cooper-style serif. Evergreen titles its menus in a serif,
     and the wordmark's letters are heavy and round; Caprasimo is both at once, so headlines sit next to the
     worm without imitating it. It sets headlines, big figures and the main button, never running text.
   - Recursive Sans (text, 39 KB): CASL 0.3, wght 400-800. A screen-first sans drawn from single-stroke
     casual sign painting; a touch of its Casual axis gives running text a brushed warmth at no cost to
     reading.
   - Recursive Mono (labels, 43 KB): CASL 0-1, wght 800-1000, caps and figures only. The game labels its
     screens in a heavy monospace (Font.tag, e.g. "NEW BOARDS AT MIDNIGHT UTC"); this is that voice, brushed.
     Its Casual and weight axes carry the combo ladder's crescendo.
   The wordmark is artwork (Docs/BRAND_AND_CREATIVE.md: never retype it), so the page shows the real
   Art/brand lockup as images and the type system is built around it. */

@font-face {
  font-family: "Caprasimo";
  src: url("assets/fonts/caprasimo.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Recursive Text";
  src: url("assets/fonts/recursive-text.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Recursive Tag";
  src: url("assets/fonts/recursive-tag.woff2") format("woff2");
  font-weight: 800 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  /* paper and ink */
  --paper: #fbf6ec;
  --paper-2: #f3eadb;
  --paper-3: #fffdf8;
  --ink: #1a1410;
  --ink-2: #3d342b;
  --muted: #6b5f51;
  --line: rgba(74, 52, 30, 0.2);
  /* from the game: the wordmark's dot (buttons), Evergreen's pines, the night sky of the demo */
  --gouache: #fd7d34;
  --orange-ink: #b8470c;
  --pink-ink: #c0305f;
  --pine: #24543f;
  --green: #2e6b56;
  --yellow: #ffc94a;
  --navy: #0e1326;
  --navy-2: #161c38;
  --navy-3: #222a52;
  --on-navy: #f4f1ea;
  --on-navy-2: #b9c0da;

  --display: "Caprasimo", "Recursive Tag", Georgia, serif; /* Caprasimo has no ∞, arrows or middle dot */
  --text: "Recursive Text", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tag: "Recursive Tag", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gutter: 16px;

  /* real watercolour paper: the grain of Evergreen's painting, multiplied over whatever colour sits under it */
  --grain: url("assets/paint/paper.webp");

  /* hand-drawn marks: a wavy underline, two wobbly rules, a gouache brush stroke, a deckled edge, a tick, a cross,
     a paint dab, a star, a torn edge, a margin arrow and a crescendo hairpin, drawn as SVG paths */
  --squiggle-ink: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width='60' height='8' viewBox='0 0 60 8'%3E%3Cpath d='M0 4.5 L1 5.2 L2 5.9 L3 6.4 L4 6.7 L5 6.7 L6 6.6 L7 6.2 L8 5.6 L9 4.8 L10 4 L11 3.2 L12 2.5 L13 1.9 L14 1.5 L15 1.3 L16 1.3 L17 1.6 L18 2.1 L19 2.7 L20 3.5 L21 4.2 L22 4.9 L23 5.5 L24 5.9 L25 6.2 L26 6.2 L27 6 L28 5.6 L29 5.1 L30 4.5 L31 3.9 L32 3.3 L33 2.8 L34 2.5 L35 2.3 L36 2.4 L37 2.6 L38 3 L39 3.5 L40 4 L41 4.6 L42 5.1 L43 5.5 L44 5.7 L45 5.7 L46 5.5 L47 5.2 L48 4.7 L49 4.1 L50 3.5 L51 2.9 L52 2.3 L53 2 L54 1.8 L55 1.8 L56 2 L57 2.4 L58 3 L59 3.7 L60 4.5' fill='none' stroke='%231a1410' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%2F%3E%3C%2Fsvg%3E");
  --squiggle-orange: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width='60' height='8' viewBox='0 0 60 8'%3E%3Cpath d='M0 4.5 L1 5.2 L2 5.9 L3 6.4 L4 6.7 L5 6.7 L6 6.6 L7 6.2 L8 5.6 L9 4.8 L10 4 L11 3.2 L12 2.5 L13 1.9 L14 1.5 L15 1.3 L16 1.3 L17 1.6 L18 2.1 L19 2.7 L20 3.5 L21 4.2 L22 4.9 L23 5.5 L24 5.9 L25 6.2 L26 6.2 L27 6 L28 5.6 L29 5.1 L30 4.5 L31 3.9 L32 3.3 L33 2.8 L34 2.5 L35 2.3 L36 2.4 L37 2.6 L38 3 L39 3.5 L40 4 L41 4.6 L42 5.1 L43 5.5 L44 5.7 L45 5.7 L46 5.5 L47 5.2 L48 4.7 L49 4.1 L50 3.5 L51 2.9 L52 2.3 L53 2 L54 1.8 L55 1.8 L56 2 L57 2.4 L58 3 L59 3.7 L60 4.5' fill='none' stroke='%23e8652a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%2F%3E%3C%2Fsvg%3E");
  --squiggle-cream: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width='60' height='8' viewBox='0 0 60 8'%3E%3Cpath d='M0 4.5 L1 5.2 L2 5.9 L3 6.4 L4 6.7 L5 6.7 L6 6.6 L7 6.2 L8 5.6 L9 4.8 L10 4 L11 3.2 L12 2.5 L13 1.9 L14 1.5 L15 1.3 L16 1.3 L17 1.6 L18 2.1 L19 2.7 L20 3.5 L21 4.2 L22 4.9 L23 5.5 L24 5.9 L25 6.2 L26 6.2 L27 6 L28 5.6 L29 5.1 L30 4.5 L31 3.9 L32 3.3 L33 2.8 L34 2.5 L35 2.3 L36 2.4 L37 2.6 L38 3 L39 3.5 L40 4 L41 4.6 L42 5.1 L43 5.5 L44 5.7 L45 5.7 L46 5.5 L47 5.2 L48 4.7 L49 4.1 L50 3.5 L51 2.9 L52 2.3 L53 2 L54 1.8 L55 1.8 L56 2 L57 2.4 L58 3 L59 3.7 L60 4.5' fill='none' stroke='%23ffb36b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%2F%3E%3C%2Fsvg%3E");
  --rule-a: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 1200 8' preserveAspectRatio='none'%3E%3Cpath d='M0 3 Q63.9 3.2 127.8 4.7 Q168 4.2 208.2 4 Q256.2 4.2 304.2 4.4 Q365.7 3 427.3 2.9 Q458.4 3.3 489.5 4.9 Q536.8 4.1 584.1 4.7 Q614.2 4.2 644.3 3.9 Q703.2 3.1 762 3.3 Q829.8 3 897.7 5 Q928.9 4.7 960.1 2.8 Q1011.8 4.1 1063.4 5.1 Q1108.7 4.5 1153.9 3.3 Q1177 2.4 1200 3.1' fill='none' stroke='%234a341e' stroke-width='1.6' stroke-linecap='round' vector-effect='non-scaling-stroke'%2F%3E%3C%2Fsvg%3E");
  --rule-b: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 1200 8' preserveAspectRatio='none'%3E%3Cpath d='M0 5.2 Q67.9 4.2 135.8 2.8 Q169.2 3.2 202.6 4.9 Q262.1 3.5 321.5 4.4 Q363.8 3.9 406.1 4.3 Q460.4 3.4 514.7 4.2 Q551 4 587.4 3.8 Q633.1 5.4 678.8 4.6 Q748.6 5.3 818.4 5.2 Q870.2 3.7 922 3.9 Q962.7 4.3 1003.4 2.8 Q1034.5 4.1 1065.6 3.9 Q1108.4 4.4 1151.1 3.7 Q1175.5 4.8 1200 4.1' fill='none' stroke='%234a341e' stroke-width='1.6' stroke-linecap='round' vector-effect='non-scaling-stroke'%2F%3E%3C%2Fsvg%3E");
  --brush: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 240 64' preserveAspectRatio='none'%3E%3Cpath d='M10 7.9 L19.9 5.6 L29.8 6.8 L39.7 3.9 L49.6 5 L59.5 8.6 L69.5 7.8 L79.4 6.9 L89.3 6.8 L99.2 6.3 L109.1 7 L119 7.4 L128.9 5.2 L138.8 8 L148.7 7.3 L158.6 7.2 L168.5 5.7 L178.5 5.9 L188.4 8 L198.3 4.5 L208.2 8.4 L218.1 6.8 L228 6.2 C238 8.2 241 32 236 51.3 Q232 57.3 228 57.3 L218.1 56.8 L208.2 57.5 L198.3 56.4 L188.4 55.9 L178.5 59.9 L168.5 59.2 L158.6 59.8 L148.7 59.6 L138.8 57.7 L128.9 55.5 L119 58.2 L109.1 55.7 L99.2 59 L89.3 59.6 L79.4 56.1 L69.5 57.7 L59.5 57.7 L49.6 56.5 L39.7 59.4 L29.8 55.7 L19.9 58.3 L10 56 L6 52 L11 44 L3 36 L9 29 L2 20 L8 18 Z' fill='%23fd7d34'%2F%3E%3Cpath d='M16.6 17 Q109.1 19 201.6 17.3' fill='none' stroke='%23ffb36b' stroke-opacity='0.55' stroke-width='2.2' stroke-linecap='round'%2F%3E%3Cpath d='M28.6 27 Q124.4 29.5 220.2 28.4' fill='none' stroke='%23d9531e' stroke-opacity='0.35' stroke-width='1.4' stroke-linecap='round'%2F%3E%3Cpath d='M28.2 38 Q103.5 40.3 178.8 39.4' fill='none' stroke='%23ffb36b' stroke-opacity='0.45' stroke-width='1.6' stroke-linecap='round'%2F%3E%3Cpath d='M36.6 48 Q118.7 46.6 200.7 48.9' fill='none' stroke='%23d9531e' stroke-opacity='0.3' stroke-width='2.0' stroke-linecap='round'%2F%3E%3Cpath d='M33.9 22 Q117.5 19.8 201 21.1' fill='none' stroke='%23ffb36b' stroke-opacity='0.3' stroke-width='1.0' stroke-linecap='round'%2F%3E%3C%2Fsvg%3E");
  --deckle: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 400 300' preserveAspectRatio='none'%3E%3Cpath d='M4 3.8 L13.8 4.3 L23.6 5.9 L33.4 3.8 L43.2 4 L53 4.4 L62.8 2.6 L72.6 4.1 L82.4 4.6 L92.2 5.3 L102 2.2 L111.8 3.1 L121.6 2.2 L131.4 5.4 L141.2 4.9 L151 2 L160.8 6.1 L170.6 6 L180.4 4.7 L190.2 4.5 L200 2.5 L209.8 1.9 L219.6 4.1 L229.4 2.1 L239.2 2.6 L249 2.9 L258.8 1.9 L268.6 3.8 L278.4 3.7 L288.2 5.5 L298 4.1 L307.8 4.6 L317.6 4 L327.4 4.7 L337.2 3.8 L347 3 L356.8 6.2 L366.6 6.2 L376.4 5.5 L386.2 4.9 L395.2 4 L394.8 13.7 L395.1 23.5 L394.1 33.2 L397.2 42.9 L395.6 52.7 L397.5 62.4 L395.5 72.1 L398 81.9 L397.5 91.6 L393.8 101.3 L394.7 111.1 L397.8 120.8 L395.9 130.5 L398.1 140.3 L395.5 150 L394.1 159.7 L396.6 169.5 L397.2 179.2 L395 188.9 L394.2 198.7 L395.3 208.4 L398 218.1 L397.1 227.9 L394.3 237.6 L394.9 247.3 L394.2 257.1 L394.1 266.8 L397.3 276.5 L394.6 286.3 L396 296.3 L386.2 295.8 L376.4 294.6 L366.6 297 L356.8 294.4 L347 296.6 L337.2 294.3 L327.4 295.7 L317.6 294.7 L307.8 295 L298 298.1 L288.2 297.3 L278.4 295.1 L268.6 297.7 L258.8 294.7 L249 295.5 L239.2 297.6 L229.4 296.6 L219.6 294.2 L209.8 298.2 L200 294.7 L190.2 294.9 L180.4 297.2 L170.6 295.2 L160.8 295.1 L151 294.1 L141.2 294.2 L131.4 296.4 L121.6 294.9 L111.8 296.4 L102 295.4 L92.2 295.8 L82.4 298 L72.6 295.9 L62.8 296.3 L53 297.6 L43.2 294.6 L33.4 294.5 L23.6 297.8 L13.8 297.4 L2.9 296 L2.6 286.3 L5.1 276.5 L5.9 266.8 L2.7 257.1 L6 247.3 L5.7 237.6 L4.5 227.9 L3.7 218.1 L2.3 208.4 L2 198.7 L6 188.9 L2.8 179.2 L4.9 169.5 L2.9 159.7 L5.4 150 L4.4 140.3 L3.1 130.5 L2.6 120.8 L5 111.1 L2.1 101.3 L2.8 91.6 L4.3 81.9 L5.6 72.1 L4.5 62.4 L3 52.7 L5.8 42.9 L2.7 33.2 L1.9 23.5 L3 13.7 Z'%2F%3E%3C%2Fsvg%3E");
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 13.2c1.6 1.2 3.4 3.1 4.6 5.3 2.6-5.4 6.2-9.6 10.6-13' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%2F%3E%3C%2Fsvg%3E");
  --cross: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 5.8c4.4 3.6 8.6 8.1 12.6 12.8M18.2 5.2C13.6 9 9.4 13.4 5.6 18.6' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%2F%3E%3C%2Fsvg%3E");
  --blob: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 40 28'%3E%3Cpath d='M5 12c1-6 8-9 16-9 8 0 15 2 16 8 1 7-5 13-15 13C11 24 4 19 5 12z'%2F%3E%3C%2Fsvg%3E");
  --star: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.7 6.2 6.7.5-5.1 4.4 1.6 6.6L12 16.8l-5.9 3.5 1.6-6.6-5.1-4.4 6.7-.5z' stroke='%23000' stroke-width='1.2' stroke-linejoin='round'%2F%3E%3C%2Fsvg%3E");
  --torn-bottom: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 400 400' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L400 0 L400 388 L388.9 384.6 L377.8 389.9 L366.7 389.3 L355.6 387.8 L344.4 385.2 L333.3 390.9 L322.2 391.1 L311.1 388.1 L300 388.1 L288.9 385.4 L277.8 383 L266.7 386.7 L255.6 388.9 L244.4 383.7 L233.3 390.9 L222.2 385.3 L211.1 385.3 L200 383.4 L188.9 393 L177.8 390.4 L166.7 391.8 L155.6 389.2 L144.4 383.3 L133.3 386.3 L122.2 388 L111.1 384.2 L100 392.5 L88.9 386.7 L77.8 384.5 L66.7 391.2 L55.6 384.2 L44.4 392.3 L33.3 387.5 L22.2 388.5 L11.1 386.4 L0 388 Z'%2F%3E%3C%2Fsvg%3E");
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 32 30'%3E%3Cpath d='M3 5c8-1.5 17 1.5 21.5 9.5 1.3 2.4 2 5 2.2 8.6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%2F%3E%3Cpath d='M21.2 18.6l5.6 5.4 3.4-6.8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%2F%3E%3C%2Fsvg%3E");
  --hairpin: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 16 100' preserveAspectRatio='none'%3E%3Cpath d='M8 1 L1.5 99 M8 1 L14.5 99' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' vector-effect='non-scaling-stroke'%2F%3E%3C%2Fsvg%3E");
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper) var(--grain) 0 0 / 320px 320px;
  background-blend-mode: multiply;
  color: var(--ink-2);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
}

img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a {
  color: var(--orange-ink);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
a:hover { color: var(--pink-ink); }
h1, h2, h3, h4 {
  margin: 0; color: var(--ink);
  font-family: var(--display); font-weight: 400; line-height: 1.02;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
[hidden] { display: none !important; }
strong, b { color: var(--ink); font-weight: 760; }

:focus-visible { outline: 3px solid var(--orange-ink); outline-offset: 3px; }

.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-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--paper);
  font-weight: 700; padding: 10px 16px; border-radius: 8px; text-decoration: none;
}
.skip-link:focus { top: 12px; color: var(--paper); }

.wrap {
  width: min(100% - 2 * var(--gutter), 1200px);
  margin-inline: auto;
}
@media (min-width: 1600px) { .wrap { width: min(100% - 2 * var(--gutter), 1320px); } }

section[id] { scroll-margin-top: 72px; }

/* ---------- the game's own label voice ---------- */
.tag, .label, .hero-status {
  font-family: var(--tag); font-weight: 900; font-variation-settings: "CASL" 0.6;
  text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 12px; line-height: 1.3;
}
.label { display: block; color: var(--muted); margin-bottom: 14px; }
.label::before {
  /* a note head, as on the game's dailies sheet: a small tilted oval in the section's ink */
  content: ""; display: inline-block; width: 0.82em; height: 0.6em; margin-right: 0.7em;
  border-radius: 50%; background: currentColor; transform: rotate(-22deg) translateY(-0.05em);
}

/* a hand-drawn rule, used where the page needs a seam */
.drawn-rule { background: var(--rule-a) 0 0 / 100% 8px no-repeat; }

/* ---------- buttons ---------- */
.btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45em;
  font: 400 19px/1 var(--display); letter-spacing: 0.005em;
  color: var(--ink); text-decoration: none;
  padding: 15px 28px 16px; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn-paint::before {
  /* a single gouache stroke in the wordmark's dot orange, like Evergreen's painted Play ring */
  content: ""; position: absolute; z-index: -1; inset: -3px -8px -2px -6px;
  background: var(--brush) center / 100% 100% no-repeat;
  transition: transform 0.18s ease;
}
.btn-paint:hover { color: var(--ink); }
.btn-paint:hover::before { transform: rotate(-1.2deg) scale(1.04, 1.08); }
.btn-paint:active::before { transform: translateY(2px) scale(0.98); }
.btn-big { font-size: clamp(20px, 2vw, 23px); padding: 19px 34px 20px; }
.btn-sm { font-size: 16px; padding: 10px 18px 11px; }
.btn:focus-visible { outline-offset: 6px; border-radius: 6px; }

.squiggle-link {
  display: inline-block; padding: 6px 0 12px;
  font-weight: 700; color: var(--ink); text-decoration: none;
  background: var(--squiggle-orange) 0 100% / 30px 4px repeat-x;
}
.squiggle-link:hover { color: var(--ink); background-image: var(--squiggle-ink); }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper) var(--grain) 0 0 / 320px 320px;
  background-blend-mode: multiply;
}
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 8px;
  background: var(--rule-b) 0 0 / 100% 8px no-repeat; opacity: 0.8; pointer-events: none;
}
.topbar-inner { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.logo { display: inline-flex; align-items: center; text-decoration: none; margin-right: auto; color: var(--ink); }
.logo-mark { width: 110px; height: auto; }
.topnav { display: none; }
.topnav ul { display: flex; gap: 4px; list-style: none; }
.topnav a {
  display: block; padding: 8px 10px 10px;
  color: var(--ink-2); font-weight: 600; font-size: 15px; text-decoration: none;
}
.topnav a:hover { color: var(--ink); background: var(--squiggle-ink) 10px 100% / 30px 4px repeat-x; background-size: 30px 4px; }
@media (min-width: 1000px) { .topnav { display: block; } }
@media (max-width: 400px) {
  .topbar-inner { gap: 10px; min-height: 58px; }
  .logo-mark { width: 96px; }
  .topbar .btn-sm { font-size: 15px; padding: 9px 14px 10px; }
}

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(28px, 4.5vw, 64px) 0 0;
}
.hero-grid { position: relative; display: grid; gap: 8px; }
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); align-items: center; gap: 24px; }
}

.hero-status { color: var(--ink-2); margin-bottom: clamp(18px, 3vw, 30px); }
@media (max-width: 520px) { .pill-devices { display: none; } }

/* the real lockup, in two halves so the worm can move on its own */
.mark { display: flex; align-items: flex-end; margin: 0 0 clamp(20px, 3vw, 30px); }
.mark img { height: clamp(84px, calc((100vw - 32px) * 0.27), 150px); width: auto; }
.mark-worm { transform-origin: 46% 92%; }
@media (min-width: 960px) { .mark img { height: clamp(110px, 11.5vw, 166px); } }

/* Puzzles that move you, written like a song: a short staff with four notes climbing the scale (E, F, G, A),
   one over each word, and the words underneath as the lyric. Every clear plays a note; a streak climbs. */
.tagline {
  --sp: clamp(6px, 0.8vw, 9.5px);   /* one staff space */
  --gap: 0.3em;                      /* staff to lyric */
  position: relative; isolation: isolate; display: flex; align-items: baseline; column-gap: 0.32em;
  width: max-content; max-width: 100%;
  margin: 0 0 clamp(22px, 3vw, 30px);
  padding: calc(var(--sp) * 5 + var(--gap)) 0.9em 0 0;
  font: 400 clamp(26px, calc((100vw - 32px) / 12.8), 52px) / 1 var(--display); color: var(--ink);
  letter-spacing: -0.005em; white-space: nowrap;
}
.tagline::before {
  /* the staff: five hairlines, starting flush with the text */
  content: ""; position: absolute; left: 0; right: 0; top: var(--sp); height: calc(var(--sp) * 4 + 1px);
  background: repeating-linear-gradient(to bottom, rgba(74, 52, 30, 0.42) 0 1px, transparent 1px var(--sp));
}
.tagline::after {
  /* and the final double bar */
  content: ""; position: absolute; right: 0; top: var(--sp); width: 5px; height: calc(var(--sp) * 4 + 1px);
  border-left: 1px solid rgba(74, 52, 30, 0.6); border-right: 3px solid var(--ink);
}
@media (min-width: 960px) {
  /* two columns: the line has to fit the copy column (about 0.54 of the wrap), not the viewport */
  .tagline { font-size: clamp(26px, calc((100vw - 56px) * 0.041), 52px); }
}
.tagline .w { position: relative; display: inline-block; }
.tagline .w1 { --k: 0; }
.tagline .w2 { --k: 1; }
.tagline .w3 { --k: 2; }
.tagline .w4 { --k: 3; }
.tagline .w::before {
  /* the note head, k half-spaces above the bottom line */
  content: ""; position: absolute; left: 50%;
  width: calc(var(--sp) * 1.4); height: calc(var(--sp) * 1.02); margin-left: calc(var(--sp) * -0.7);
  top: calc(-1 * (var(--gap) + var(--k) * var(--sp) / 2) - var(--sp) * 0.51);
  border-radius: 50%; background: var(--gouache); transform: rotate(-20deg);
}
.tagline .w::after {
  /* its stem, up from the right of the head */
  content: ""; position: absolute; left: calc(50% + var(--sp) * 0.56); width: 1.5px;
  height: calc(var(--sp) * 3.3);
  top: calc(-1 * (var(--gap) + var(--k) * var(--sp) / 2) - var(--sp) * 3.3);
  background: var(--ink); border-radius: 1px; transform-origin: 50% 100%;
}

.lead { font-size: clamp(18px, 1.55vw, 20px); line-height: 1.55; max-width: 31em; color: var(--ink-2); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 34px; margin: 28px 0 34px; }
@media (max-width: 480px) { .cta-row .btn { width: calc(100% - 12px); margin-left: 6px; } }

/* the game's result row: figure on top, small spaced caps under, thin rules between */
.scoreboard {
  list-style: none; display: grid; grid-template-columns: repeat(4, auto); justify-content: start;
  margin: 0 0 18px;
}
.scoreboard li { display: grid; gap: 6px; padding: 2px 22px 4px; border-left: 1.5px solid var(--line); }
.scoreboard li:first-child { padding-left: 0; border-left: 0; }
.scoreboard b { font: 400 clamp(28px, 3vw, 38px) / 1 var(--display); color: var(--ink); }
.scoreboard span {
  font-family: var(--tag); font-weight: 900; font-variation-settings: "CASL" 0.6;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; line-height: 1.3; color: var(--muted);
}
@media (max-width: 520px) {
  .scoreboard { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .scoreboard li:nth-child(3) { padding-left: 0; border-left: 0; }
}
.fine { font-size: 14px; line-height: 1.5; color: var(--muted); max-width: 40em; }

/* the painting the game's home screen sits in, here running off the page, with the phones standing in it */
.hero-copy { position: relative; z-index: 1; }
.hero-art {
  position: relative; isolation: isolate;
  display: flex; justify-content: center; align-items: flex-start; gap: 0;
  padding: 86px 0 clamp(40px, 9vw, 72px);
  margin-inline: calc(-1 * var(--gutter));
}
.hero-art::before {
  content: ""; position: absolute; z-index: -1; inset: 0 -10% 0;
  /* the page's paper grain is multiplied into the painting too, so the two papers are one */
  background: var(--grain) 0 0 / 320px 320px, url("assets/paint/evergreen-day.webp") 50% 100% / cover no-repeat;
  background-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 30%);
}
.hero-art > .hero-main { width: min(56%, 290px); z-index: 2; }
.hero-art > .hero-back { width: min(40%, 210px); margin: 13% 0 0 -9%; z-index: 1; }

/* a note in the margin, in the label face's loosest brush, with a hand-drawn arrow to the phone */
.hero-caption {
  position: absolute; z-index: 3; left: var(--gutter); top: 14px; max-width: min(19em, calc(100% - 32px));
  margin: 0; transform: rotate(-1.5deg);
  font-family: var(--tag); font-weight: 800; font-variation-settings: "CASL" 1;
  font-size: 13px; line-height: 1.4; letter-spacing: 0.01em; color: var(--ink-2);
  white-space: normal;
}
.hero-caption::after {
  content: ""; display: inline-block; width: 26px; height: 24px; margin: 0 0 -14px 6px; background: var(--ink-2);
  -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat;
}
@media (min-width: 960px) {
  .hero { padding-bottom: 0; }
  .hero-copy { padding-bottom: 48px; }
  .hero-grid { align-items: end; }
  .hero-art { align-self: stretch; align-items: center; margin-inline: 0 calc(-1 * max(var(--gutter), (100vw - 1200px) / 2)); padding: 96px 0 104px; }
  .hero-art::before {
    /* a long, wet-edged wash from the lower right (assets/paint/hero-mask.webp, made by make_type.py) */
    inset: calc(-1 * clamp(28px, 4.5vw, 64px)) 0 0 -48%;
    -webkit-mask: url("assets/paint/hero-mask.webp") 0 0 / 100% 100% no-repeat;
    mask: url("assets/paint/hero-mask.webp") 0 0 / 100% 100% no-repeat;
  }
  .hero-art > .hero-main { width: min(52%, 290px); }
  .hero-caption { left: 6%; top: 24px; }
}

/* ---------- device frames ---------- */
.phone {
  position: relative; margin: 0;
  padding: 7px; border-radius: 38px;
  background: #11162b;
  box-shadow: 0 0 0 1px rgba(14, 19, 38, 0.5), 0 22px 44px rgba(48, 30, 14, 0.24), 0 4px 10px rgba(48, 30, 14, 0.14);
}
.phone img { width: 100%; border-radius: 31px; background: var(--paper-2); }
.phone figcaption {
  position: absolute; left: 0; right: 0; top: calc(100% + 12px); text-align: center;
  font-family: var(--tag); font-weight: 900; font-variation-settings: "CASL" 0.6;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; color: var(--muted);
}

/* ---------- the score line between the hero and the demo ---------- */
.marquee {
  overflow: hidden; position: relative;
  padding: 16px 0 17px;
  background: var(--rule-a) 0 0 / 100% 8px no-repeat, var(--rule-b) 0 100% / 100% 8px no-repeat;
}
.marquee-track {
  display: flex; width: max-content; gap: 30px; align-items: center;
  font: 400 clamp(22px, 3vw, 30px) / 1 var(--display); color: var(--ink);
  white-space: nowrap;
}
.marquee-track i {
  /* a quaver: tilted head, stem, flag */
  position: relative; display: inline-block; width: 13px; height: 9px; margin: 0 2px;
  border-radius: 50%; background: var(--gouache); transform: rotate(-22deg) translateY(6px);
}
.marquee-track i::after {
  content: ""; position: absolute; right: 0; bottom: 4px; width: 2px; height: 24px;
  background: var(--ink); border-radius: 1px; transform: rotate(22deg); transform-origin: bottom;
}
.marquee-track i:nth-of-type(even) { transform: rotate(-22deg) translateY(-4px); }
@media (prefers-reduced-motion: no-preference) {
  .marquee-track { animation: marquee 70s linear infinite; }
}
@keyframes marquee { to { transform: translateX(calc(-50% - 15px)); } }

/* ---------- sections ---------- */
.section { padding: clamp(56px, 7vw, 104px) 0; position: relative; }
.band { background: var(--paper-2) var(--grain) 0 0 / 320px 320px; background-blend-mode: multiply; }
.section-head { max-width: 760px; margin-bottom: clamp(30px, 4vw, 52px); }
.section h2 { font-size: clamp(40px, 5.8vw, 76px); line-height: 1; margin-bottom: 20px; }
.section-lead { font-size: clamp(18px, 1.6vw, 20px); line-height: 1.55; max-width: 34em; }
.aside { margin: 26px 0 0; font-size: 15px; color: var(--muted); max-width: 52em; }

/* wide screens: section labels hang in the left margin, like the game's chapter tags beside a title */
@media (min-width: 1180px) {
  .section-head.hang { display: grid; grid-template-columns: 180px minmax(0, 760px); column-gap: 40px; max-width: none; }
  .section-head.hang > * { grid-column: 2; }
  .section-head.hang > .label { grid-column: 1; grid-row: 1 / span 3; padding-top: 1.4em; margin: 0; }
}

/* ---------- dark band (demo) ---------- */
.on-dark { background: var(--navy); color: var(--on-navy-2); }
.on-dark h2, .on-dark h3, .on-dark strong, .on-dark b { color: var(--on-navy); }
.on-dark .label { color: #ffb36b; }
.on-dark .fine { color: var(--on-navy-2); }
.on-dark a { color: #ffb36b; }
.on-dark :focus-visible { outline-color: var(--yellow); }

/* ---------- demo ---------- */
.demo-grid { display: grid; gap: clamp(36px, 5vw, 72px); align-items: center; }
@media (min-width: 900px) { .demo-grid { grid-template-columns: 1fr minmax(340px, 480px); } }
@media (min-width: 1280px) { .demo-grid { grid-template-columns: 1fr 520px; } }
.demo-copy > p:not(.label):not(.fine):not(.keys) { font-size: clamp(17px, 1.5vw, 19px); max-width: 32em; }
.ticks { list-style: none; display: grid; gap: 14px; margin: 26px 0; max-width: 34em; }
.ticks li { position: relative; padding-left: 32px; }
.ticks li::before {
  /* note heads in the demo's piece colours */
  content: ""; position: absolute; left: 2px; top: 0.5em; width: 17px; height: 12px;
  border-radius: 50%; background: #8fdc8f; transform: rotate(-22deg);
}
.ticks li:nth-child(2)::before { background: #ff9fbd; }
.ticks li:nth-child(3)::before { background: var(--yellow); }
.keys { font-size: 15px; }
.kbd {
  display: inline-block; min-width: 1.9em; text-align: center; margin: 0 2px;
  padding: 3px 7px 2px; border-radius: 6px;
  font-family: var(--tag); font-weight: 900; font-variation-settings: "CASL" 0.6; font-size: 12px;
  color: var(--on-navy); letter-spacing: 0.04em;
  background: var(--navy-3); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.demo-device {
  width: 100%; max-width: 520px; margin-inline: auto;
  padding: 14px; border-radius: 30px;
  background: #151a35;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 30px 70px rgba(0, 0, 0, 0.45);
  transition: box-shadow 0.3s ease;
}
.demo-device.is-overdrive { box-shadow: 0 0 0 3px var(--pink-ink), 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 90px rgba(242, 71, 126, 0.5); }
@media (prefers-reduced-motion: no-preference) {
  .demo-device.is-overdrive { animation: overdrive 0.5s ease-in-out infinite alternate; }
}
@keyframes overdrive {
  to { box-shadow: 0 0 0 3px var(--yellow), 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 120px rgba(255, 201, 74, 0.5); }
}
.demo-hud { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 4px 6px 12px; }
.demo-title { display: grid; gap: 6px; min-width: 0; }
.demo-title span { font: 400 22px/1 var(--display); color: var(--on-navy); letter-spacing: 0.01em; }
.demo-title small, .demo-score small, .chip, .heat-label {
  font-family: var(--tag); font-weight: 900; font-variation-settings: "CASL" 0.6;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; color: var(--on-navy-2);
}
.demo-score { display: grid; justify-items: end; gap: 4px; }
.demo-score b { font: 400 32px/1 var(--display); color: var(--yellow); }
.demo-meters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 0 6px 14px; }
.chip { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.chip b { font: 400 18px/1 var(--display); color: var(--on-navy); letter-spacing: 0; }
.chip svg { width: 13px; height: 13px; flex: none; }
.heat {
  position: relative; flex: 1 1 120px; height: 16px; border-radius: 999px; overflow: hidden;
  background: #1a2042; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.heat-fill {
  position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0);
  background: linear-gradient(90deg, var(--yellow), #ff8a2a 50%, #f2477e);
  border-radius: inherit;
}
.is-overdrive .heat-fill { background: linear-gradient(90deg, var(--yellow), #fff 50%, var(--yellow)); }
.heat-label {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 10px; letter-spacing: 0.24em; color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.demo-stage {
  position: relative; width: 100%;
  aspect-ratio: 3 / 4; min-height: 300px; max-height: min(78vh, 720px);
  border-radius: 20px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #1b2350, #0a0d1f 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.demo-stage canvas {
  width: 100%; height: 100%;
  cursor: pointer; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.demo-stage canvas:focus { outline: none; }
.demo-stage canvas:focus-visible { outline: 3px solid var(--yellow); outline-offset: -3px; border-radius: 20px; }
.demo-status {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  padding: 24px; margin: 0; font-weight: 600; color: var(--on-navy-2);
}
.demo-overlay {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px;
  pointer-events: none; /* taps fall through to the board, which also advances */
  text-align: center; padding: 24px;
  background: rgba(10, 13, 31, 0.6);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.demo-overlay-title { margin: 0; font: 400 clamp(40px, 9vw, 58px)/1 var(--display); color: #8fdc8f; }
.demo-overlay-text { margin: 0 0 10px; font-weight: 600; color: var(--on-navy); }
.demo-overlay .btn { pointer-events: auto; }
@media (min-width: 900px) { .demo-stage { max-height: min(66vh, 580px); } }
@media (hover: none) and (pointer: coarse) { .keys { display: none; } }
.demo-controls { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; padding-top: 14px; }
.btn-ghost {
  font-family: var(--tag); font-weight: 900; font-variation-settings: "CASL" 0.6;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; line-height: 1;
  padding: 11px 14px; border-radius: 10px;
  color: var(--on-navy); background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.24);
  transition: background-color 0.12s ease;
}
.btn-ghost svg { width: 14px; height: 14px; flex: none; }
.btn-ghost:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
.btn-ghost:active { transform: translateY(1px); }
.btn-ghost[aria-pressed="false"] { color: var(--on-navy-2); text-decoration: line-through; text-decoration-thickness: 2px; }
.btn-ghost:focus-visible { border-radius: 10px; outline-offset: 3px; }

/* ---------- how it plays ---------- */
.steps { list-style: none; display: grid; gap: 40px; }
@media (min-width: 820px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .step { padding: 0 clamp(20px, 3vw, 40px); }
  .step:first-child { padding-left: 0; }
  .step:last-child { padding-right: 0; }
  /* the dotted line the game draws to show what's in the way */
  .step + .step { border-left: 2px dotted rgba(74, 52, 30, 0.3); }
}
.step-art { width: 100%; max-width: 190px; height: auto; margin-bottom: 18px; }
@media (max-width: 819px) { .step-art { max-width: 150px; margin-bottom: 12px; } }
.step h3 { display: flex; align-items: center; gap: 14px; font-size: clamp(30px, 3vw, 38px); margin-bottom: 12px; }
.step-n {
  /* the circled numerals from the game's dailies sheet, drawn by hand */
  display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px;
  border: 2px solid var(--ink); border-radius: 52% 46% 50% 48% / 46% 52% 48% 54%;
  font-size: 18px; color: var(--ink); padding-top: 1px;
}
.step p { margin: 0; max-width: 24em; }

/* the combo callouts as a crescendo: a hairpin beside them, and each one a little heavier, looser (Recursive's
   Casual axis) and larger than the last. Only the final one changes colour. */
.ladder {
  position: relative; list-style: none; display: grid; justify-items: start; gap: 6px;
  margin-top: 22px; padding-left: 22px;
}
.ladder::before {
  content: ""; position: absolute; left: 0; top: 1px; bottom: 3px; width: 11px; background: var(--muted);
  -webkit-mask: var(--hairpin) 0 0 / 100% 100% no-repeat; mask: var(--hairpin) 0 0 / 100% 100% no-repeat;
}
.ladder li {
  font-family: var(--tag); text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.1; color: var(--ink-2);
  font-size: 12px; font-weight: 800; font-variation-settings: "CASL" 0; white-space: nowrap;
}
.ladder li:nth-child(2) { font-size: 13px; font-weight: 850; font-variation-settings: "CASL" 0.25; }
.ladder li:nth-child(3) { font-size: 14px; font-weight: 900; font-variation-settings: "CASL" 0.5; color: var(--ink); }
.ladder li:nth-child(4) { font-size: 15.5px; font-weight: 950; font-variation-settings: "CASL" 0.75; color: var(--ink); }
.ladder li:nth-child(5) { font-size: 17.5px; font-weight: 1000; font-variation-settings: "CASL" 1; color: var(--pink-ink); }

/* ---------- twists ---------- */
.mech-layout { display: grid; gap: 40px; align-items: start; }
@media (min-width: 1040px) { .mech-layout { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 56px; } }
.mech-grid { list-style: none; display: grid; gap: 0 36px; }
@media (min-width: 600px) { .mech-grid { grid-template-columns: 1fr 1fr; } }
.mech {
  display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto 1fr; column-gap: 16px; align-items: start;
  padding: 22px 0 24px;
  background: var(--rule-a) 0 0 / 100% 8px no-repeat;
}
.mech:nth-child(2n) { background-image: var(--rule-b); }
.mech svg { width: 44px; height: 44px; grid-row: 1 / span 2; margin-top: 2px; }
.mech h3 { font-size: 26px; margin: 4px 0 8px; }
.mech p { margin: 0; font-size: 16px; }
.sub-head { margin: clamp(36px, 4vw, 52px) 0 8px; }
.sub-head h3 { font-size: clamp(28px, 3vw, 38px); margin-bottom: 10px; }
.sub-head p { margin: 0; max-width: 40em; }
.rule-grid { list-style: none; display: grid; gap: 0 36px; }
@media (min-width: 600px) { .rule-grid { grid-template-columns: 1fr 1fr; } }
.rule {
  --r: var(--gouache);
  padding: 22px 0 22px;
  background: var(--rule-b) 0 0 / 100% 8px no-repeat;
}
.rule .rule-world {
  display: flex; align-items: center; gap: 9px; margin: 0 0 8px;
  font-family: var(--tag); font-weight: 900; font-variation-settings: "CASL" 0.6;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; color: var(--muted);
}
.rule .rule-world::before {
  /* a dab of the world's own paint */
  content: ""; width: 22px; height: 15px; flex: none; background: var(--r);
  -webkit-mask: var(--blob) center / contain no-repeat; mask: var(--blob) center / contain no-repeat;
}
.rule h4 { margin: 0 0 6px; font-size: 25px; line-height: 1.1; }
.rule p:last-child { margin: 0; font-size: 16px; }
.rule-worm { --r: #ff8fb1; }
.rule-lava { --r: #ff9a3c; }
.rule-glitch { --r: #b9d900; }
.rule-noodle { --r: #d8432f; }
.twist-shots { display: flex; justify-content: center; align-items: flex-start; gap: clamp(16px, 3vw, 28px); padding: 4px 4% 56px; }
.twist-shots .phone { width: min(46%, 250px); }
.twist-shots .phone:last-child { margin-top: 48px; }
.shape-tags {
  list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 0;
  margin-top: clamp(32px, 4vw, 48px); padding-top: 22px;
  background: var(--rule-a) 0 0 / 100% 8px no-repeat;
  font-family: var(--tag); font-weight: 900; font-variation-settings: "CASL" 0.6;
  letter-spacing: 0.08em; font-size: 12px; color: var(--ink);
}
.shape-tags li { display: inline-flex; align-items: center; }
.shape-tags li:not(:last-child)::after {
  content: ""; width: 7px; height: 5px; margin: 0 13px; border-radius: 50%;
  background: var(--gouache); transform: rotate(-22deg);
}

/* ---------- worlds ---------- */
.tod {
  position: relative; border: 0; padding: 0; margin: 0 0 30px; min-width: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px;
}
.tod legend { float: left; padding: 0; margin-right: 4px; font-weight: 700; color: var(--ink); font-size: 15px; }
.tod-options { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.tod input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tod label {
  display: inline-flex; align-items: baseline; gap: 7px; cursor: pointer;
  padding: 6px 10px 11px; font-weight: 700; font-size: 16px; color: var(--ink-2);
}
.tod label small {
  font-family: var(--tag); font-weight: 900; font-variation-settings: "CASL" 0.6;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; color: var(--muted);
}
.tod label:hover { color: var(--ink); }
.tod input:checked + label { color: var(--ink); background: var(--squiggle-orange) 10px 100% / 30px 4px repeat-x; }
.tod input:focus-visible + label { outline: 3px solid var(--orange-ink); outline-offset: 2px; border-radius: 6px; }
@media (max-width: 599px) {
  .tod-options { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .tod label { padding-left: 0; }
  .tod input:checked + label { background-position: 0 100%; }
}

.world-grid {
  list-style: none; display: grid; gap: 36px 24px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
}
@media (min-width: 1180px) { .world-grid { grid-template-columns: repeat(4, 1fr); } }
.world {
  --w: var(--gouache);
  /* the game multiplies a tint over the painting for each time of day; dark paintings take ~60% of it */
  --tint-golden: rgb(255 214 158); --tint-dusk: rgb(214 163 204); --tint-night: rgb(92 110 179);
  --tint: #fff;
  display: flex; flex-direction: column;
}
.world.is-dark { --tint-golden: rgb(255 230 197); --tint-dusk: rgb(230 200 224); --tint-night: rgb(157 168 209); }
.world-art {
  position: relative; overflow: hidden; background: var(--paper-2);
  isolation: isolate;
  /* torn from the sketchbook: a hand-cut edge instead of a rounded card */
  -webkit-mask: var(--deckle) 0 0 / 100% 100% no-repeat; mask: var(--deckle) 0 0 / 100% 100% no-repeat;
}
.world-art img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.world-art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-color: var(--tint); mix-blend-mode: multiply;
  transition: background-color 0.6s ease;
}
.world-art::before { /* little lights at golden hour and night, as in the game */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background:
    radial-gradient(circle at 14% 24%, rgba(255, 220, 140, 0.95) 0 2px, transparent 3.5px),
    radial-gradient(circle at 31% 62%, rgba(255, 220, 140, 0.9) 0 1.5px, transparent 3px),
    radial-gradient(circle at 52% 18%, rgba(255, 230, 170, 0.9) 0 2px, transparent 3.5px),
    radial-gradient(circle at 70% 48%, rgba(255, 220, 140, 0.95) 0 1.5px, transparent 3px),
    radial-gradient(circle at 86% 30%, rgba(255, 230, 170, 0.9) 0 2.5px, transparent 4px),
    radial-gradient(circle at 78% 78%, rgba(255, 220, 140, 0.85) 0 1.5px, transparent 3px);
  transition: opacity 0.6s ease;
}
.worlds:has(#tod-golden:checked) .world { --tint: var(--tint-golden); }
.worlds:has(#tod-dusk:checked) .world { --tint: var(--tint-dusk); }
.worlds:has(#tod-night:checked) .world { --tint: var(--tint-night); }
.worlds:has(#tod-golden:checked) .world-art::before { opacity: 0.55; }
.worlds:has(#tod-night:checked) .world-art::before { opacity: 1; }
.world-tags { position: absolute; z-index: 2; left: 10px; top: 10px; right: 10px; display: flex; flex-wrap: wrap; gap: 5px; margin: 0; }

/* little paper slips, like the labels the game pins on things: FREE, MEMBERS, a world's own rule */
.tag {
  display: inline-block; margin: 0;
  font-size: 10.5px; letter-spacing: 0.09em; line-height: 1;
  padding: 5px 7px 4px; border-radius: 3px;
  background: var(--paper-3); color: var(--ink);
  box-shadow: 0 1px 0 rgba(26, 20, 16, 0.22), 0 0 0 1px rgba(26, 20, 16, 0.08);
}
.tag-free { color: var(--pine); }
.tag-member { color: var(--ink-2); }
.tag-rule { background: var(--yellow); color: var(--ink); }

.world-body { padding: 16px 2px 0; display: flex; flex-direction: column; flex: 1; }
.world h3 { font-size: 24px; margin-bottom: 8px; line-height: 1.05; }
.world h3::after {
  /* a stroke of the world's own colour */
  content: ""; display: block; width: 58px; height: 8px; margin-top: 8px; background: var(--w);
  -webkit-mask: var(--brush) 0 0 / 100% 100% no-repeat; mask: var(--brush) 0 0 / 100% 100% no-repeat;
}
.world-body p { margin: 0; font-size: 16px; line-height: 1.5; }
@media (max-width: 599px) {
  .world-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 14px; }
  .world-body { padding-top: 10px; }
  .world h3 { font-size: 19px; }
  .world h3::after { width: 44px; height: 7px; margin-top: 6px; }
  .world-body p { font-size: 14px; line-height: 1.45; }
  .world-tags { left: 6px; top: 6px; right: 6px; gap: 4px; }
  .tag { font-size: 9.5px; padding: 4px 5px 3px; letter-spacing: 0.06em; }
}

.journey { display: grid; gap: 40px; align-items: center; margin-top: clamp(56px, 7vw, 96px); }
@media (min-width: 960px) {
  .journey { grid-template-columns: 1fr 1fr; gap: 56px; }
  .journey-shots { order: -1; }
}
.journey h3 { font-size: clamp(32px, 3.6vw, 46px); margin-bottom: 16px; max-width: 12em; }
.journey p { max-width: 32em; }
.facts { list-style: none; display: grid; margin: 26px 0 0; max-width: 32em; }
.facts li {
  display: grid; grid-template-columns: 2.6em 1fr; gap: 16px; align-items: baseline;
  padding: 14px 0 12px;
  background: var(--rule-a) 0 0 / 100% 8px no-repeat;
}
.facts li:nth-child(2) { background-image: var(--rule-b); }
.facts b { font: 400 34px/1 var(--display); color: var(--orange-ink); }
.journey-shots { display: flex; justify-content: center; align-items: flex-start; gap: clamp(16px, 3vw, 28px); padding: 0 4% 56px; }
.journey-shots .phone { width: min(46%, 250px); }
.journey-shots .phone:last-child { margin-top: 48px; }

/* ---------- dailies ---------- */
.daily-layout { display: grid; gap: 48px; align-items: center; }
@media (min-width: 960px) { .daily-layout { grid-template-columns: 1.25fr 0.75fr; gap: 64px; } }
.daily-list { list-style: none; display: grid; max-width: 38em; }
.daily {
  display: grid; grid-template-columns: 40px 1fr; gap: 18px; align-items: start;
  padding: 20px 0 18px;
  background: var(--rule-a) 0 0 / 100% 8px no-repeat;
}
.daily:nth-child(2) { background-image: var(--rule-b); }
.daily-icon { display: block; width: 36px; height: 36px; margin-top: 6px; }
.daily-icon svg { width: 36px; height: 36px; }
.daily h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 27px; margin: 4px 0 6px; }
.daily p { margin: 0; font-size: 16px; }
.daily-shot {
  display: flex; justify-content: center; padding-bottom: 40px;
  filter: drop-shadow(0 18px 28px rgba(48, 30, 14, 0.2)) drop-shadow(0 3px 6px rgba(48, 30, 14, 0.12));
}
/* the dailies sheet has nothing below its last line, so it is shown as the sheet itself, torn off there */
.sheet { position: relative; margin: 0; width: min(82%, 340px); transform: rotate(1.5deg); }
.sheet img {
  width: 100%; border-radius: 12px 12px 0 0; background: var(--paper-2);
  -webkit-mask: var(--torn-bottom) 0 0 / 100% 100% no-repeat; mask: var(--torn-bottom) 0 0 / 100% 100% no-repeat;
}
.sheet figcaption {
  position: absolute; left: 0; right: 0; top: calc(100% + 14px); text-align: center;
  font-family: var(--tag); font-weight: 900; font-variation-settings: "CASL" 0.6;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; color: var(--muted);
}

/* ---------- modes ---------- */
.modes-layout { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1040px) {
  .modes-layout { grid-template-columns: 0.65fr 1.35fr; gap: 64px; }
  .modes-shot { order: -1; }
}
.mode-list { list-style: none; display: grid; gap: 0 40px; }
@media (min-width: 620px) { .mode-list { grid-template-columns: 1fr 1fr; } }
.mode {
  --m: var(--gouache);
  padding: 22px 0 24px;
  background: var(--rule-b) 0 0 / 100% 8px no-repeat;
}
.mode:nth-child(odd) { background-image: var(--rule-a); }
.mode h3 {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--tag); font-weight: 900; font-variation-settings: "CASL" 0.6;
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px; line-height: 1.3; color: var(--muted);
  margin-bottom: 10px;
}
.mode h3::before {
  content: ""; width: 20px; height: 14px; flex: none; background: var(--m);
  -webkit-mask: var(--blob) center / contain no-repeat; mask: var(--blob) center / contain no-repeat;
}
.mode-rush { --m: #f2477e; }
.mode-zen { --m: #7fc6a4; }
.mode-duel { --m: #8f86ff; }
.mode-endless { --m: var(--yellow); }
.mode-big { font: 400 clamp(27px, 2.8vw, 34px) / 1.05 var(--display); color: var(--ink); margin: 0 0 10px; }
.mode p:last-child { margin: 0; font-size: 16px; }
.modes-shot { display: flex; justify-content: center; padding-bottom: 40px; }
.modes-shot .phone { width: min(70%, 280px); }

/* ---------- iPhone Duo ---------- */
.pose-grid { list-style: none; display: grid; gap: 30px 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .pose-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; } }
.pose svg { width: 100%; height: auto; margin-bottom: 14px; }
.pose h3 { font-size: 24px; margin-bottom: 6px; }
.pose p { margin: 0; font-size: 15px; line-height: 1.5; }
@media (max-width: 599px) {
  .pose h3 { font-size: 20px; }
  .pose p { font-size: 14px; }
}
.flip { display: grid; gap: 40px; align-items: center; margin-top: clamp(48px, 6vw, 80px); }
@media (min-width: 900px) {
  .flip { grid-template-columns: 1.2fr 0.8fr; gap: 56px; }
  .flip-shot { order: 1; }
}
.flip-shot { display: flex; justify-content: center; padding-bottom: 40px; }
.flip-shot .phone { width: min(70%, 280px); }
.flip h3 { font-size: clamp(32px, 3.6vw, 46px); margin-bottom: 16px; }
.flip .tag { margin-bottom: 18px; }
.flip p { max-width: 32em; }

/* ---------- the deal ---------- */
.deal-grid { display: grid; gap: 48px; align-items: start; }
@media (min-width: 960px) { .deal-grid { grid-template-columns: 1.1fr 0.9fr; gap: 64px; } }
.free-list { list-style: none; display: grid; gap: 12px; margin: 26px 0 0; }
.free-list li { position: relative; padding-left: 36px; }
.free-list li::before {
  content: ""; position: absolute; left: 0; top: 0.1em; width: 24px; height: 24px;
  background: var(--green);
  -webkit-mask: var(--tick) center / contain no-repeat; mask: var(--tick) center / contain no-repeat;
}
.nopes {
  list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 30px; padding-top: 22px;
  background: var(--rule-a) 0 0 / 100% 8px no-repeat;
  font-family: var(--tag); font-weight: 900; font-variation-settings: "CASL" 0.6;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 14px; color: var(--ink);
}
.nopes li { display: inline-flex; align-items: center; gap: 8px; }
.nopes li::before {
  content: ""; width: 15px; height: 15px; flex: none; background: var(--pink-ink);
  -webkit-mask: var(--cross) center / contain no-repeat; mask: var(--cross) center / contain no-repeat;
}

/* the one card on the page: a ticket, because membership is the one thing for sale */
.member-card {
  --pad: clamp(28px, 4vw, 40px);
  --title: clamp(38px, 4.4vw, 50px);
  --perf: calc(var(--pad) + 29.2px + 1.02 * var(--title) + 24px); /* stub: kicker + title + 24px */
  position: relative; padding: var(--pad) clamp(24px, 4vw, 40px);
  border-radius: 20px; background: var(--navy); color: var(--on-navy-2);
  box-shadow: 0 24px 50px rgba(48, 30, 14, 0.22);
  -webkit-mask: radial-gradient(circle 13px at 0 var(--perf), transparent 12.5px, #000 13px) 0 0 / 51% 100% no-repeat,
                radial-gradient(circle 13px at 100% var(--perf), transparent 12.5px, #000 13px) 100% 0 / 51% 100% no-repeat;
  mask: radial-gradient(circle 13px at 0 var(--perf), transparent 12.5px, #000 13px) 0 0 / 51% 100% no-repeat,
        radial-gradient(circle 13px at 100% var(--perf), transparent 12.5px, #000 13px) 100% 0 / 51% 100% no-repeat;
}
.member-card::before {
  /* the perforation between the stub and the ticket */
  content: ""; position: absolute; left: 22px; right: 22px; top: calc(var(--perf) - 1px);
  border-top: 2px dashed rgba(244, 241, 234, 0.22);
}
.member-card h3, .member-card b { color: var(--on-navy); }
.member-kicker {
  margin-bottom: 10px;
  font-family: var(--tag); font-weight: 900; font-variation-settings: "CASL" 0.6;
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px; color: #ffb36b;
}
.member-title { font-size: var(--title); margin-bottom: 48px; }
.member-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 8px; }
.member-price b { font: 400 clamp(46px, 5vw, 60px)/1 var(--display); color: var(--yellow); }
.member-price span { font-weight: 600; color: var(--on-navy-2); }
.member-trial { font-weight: 700; color: var(--on-navy); margin-bottom: 20px; }
.member-perks { list-style: none; display: grid; gap: 12px; margin-bottom: 20px; }
.member-perks li { padding-left: 30px; position: relative; }
.member-perks li::before {
  content: ""; position: absolute; left: 0; top: 0.2em; width: 18px; height: 18px; background: var(--yellow);
  -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat;
}
.member-note { margin: 0; font-size: 15px; }

/* ---------- closing band ---------- */
.launch {
  position: relative; text-align: center; color: var(--on-navy);
  padding: clamp(72px, 10vw, 136px) 0;
  background:
    linear-gradient(180deg, rgba(14, 19, 38, 0.62), rgba(14, 19, 38, 0.5) 45%, rgba(14, 19, 38, 0.85)),
    url("assets/paint/evergreen-finale.webp") center / cover no-repeat,
    var(--navy);
}
.launch-inner { display: grid; justify-items: center; gap: 8px; }
.launch-icon {
  width: clamp(104px, 13vw, 136px); border-radius: 22.4%; margin-bottom: 22px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}
.launch h2 { font-size: clamp(48px, 7.4vw, 104px); line-height: 1; margin-bottom: 14px; color: #fff; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); }
.launch p { font-size: 19px; max-width: 30em; margin-bottom: 30px; color: var(--on-navy); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); }

/* ---------- footer ---------- */
.footer { padding: 52px 0 64px; }
.footer-inner { display: grid; gap: 14px; justify-items: start; }
.footer .logo-mark { width: 146px; }
.footer-tag {
  margin: 0; font-family: var(--tag); font-weight: 900; font-variation-settings: "CASL" 0.6;
  text-transform: uppercase; letter-spacing: 0.22em; font-size: 12px; color: var(--muted);
}
.footer-links { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 8px 0; }
.footer-links a { font-weight: 700; color: var(--ink); text-decoration: none; padding-bottom: 6px; background: var(--squiggle-orange) 0 100% / 30px 4px repeat-x; }
.footer-links a:hover { color: var(--ink); background-image: var(--squiggle-ink); }
.footer-fine { margin: 0; font-size: 14px; color: var(--muted); }

/* ---------- sub pages (privacy / support) ---------- */
.page { padding: clamp(44px, 7vw, 92px) 0 clamp(64px, 9vw, 120px); }
.page .wrap { max-width: 760px; }
.page h1 { font-size: clamp(56px, 9vw, 96px); line-height: 1; margin-bottom: 18px; }
.page h2 { font-size: clamp(27px, 3vw, 34px); margin: 48px 0 12px; }
.page p, .page li { font-size: 17px; }
.page ul.list { padding-left: 1.2em; display: grid; gap: 8px; margin-bottom: 1em; }
.page ul.list li::marker { color: var(--orange-ink); }
.updated {
  font-family: var(--tag); font-weight: 900; font-variation-settings: "CASL" 0.6;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; color: var(--muted);
}
.callout-box {
  /* the game's "new to you" card: paper with a dashed gouache border */
  padding: 22px 24px; border-radius: 14px; margin: 26px 0;
  background: var(--paper-3); border: 2px dashed rgba(232, 101, 42, 0.55);
}
.callout-box p:last-child { margin: 0; }
.faq { display: grid; margin-top: 12px; }
.faq details { padding: 0; background: var(--rule-a) 0 0 / 100% 8px no-repeat; }
.faq details:nth-child(even) { background-image: var(--rule-b); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 0 18px;
  font-family: var(--display); color: var(--ink); font-size: 22px; line-height: 1.2;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--text); font-weight: 700; font-size: 28px; color: var(--orange-ink); line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq summary:focus-visible { outline-offset: 2px; border-radius: 6px; }
.faq details > div { padding: 0 0 22px; }
.faq details > div p:last-child { margin-bottom: 0; }
.mail { font-family: var(--display); font-size: 24px; }

/* ---------- phones: the label voice a size up and tracked tighter, so it reads at arm's length ---------- */
@media (max-width: 599px) {
  .label { font-size: 13px; letter-spacing: 0.06em; }
  .hero-status { font-size: 12.5px; letter-spacing: 0.05em; }
  .scoreboard span { font-size: 12px; letter-spacing: 0.05em; }
  .shape-tags { font-size: 13px; letter-spacing: 0.03em; }
  .shape-tags li:not(:last-child)::after { margin: 0 10px; }
  .phone figcaption, .sheet figcaption { font-size: 12px; letter-spacing: 0.06em; }
  .rule .rule-world, .mode h3 { font-size: 12.5px; letter-spacing: 0.06em; }
  .nopes { font-size: 13.5px; letter-spacing: 0.04em; gap: 10px 18px; }
  .footer-tag { font-size: 12.5px; letter-spacing: 0.12em; }
  .tod label small { font-size: 12px; letter-spacing: 0.04em; }
  .demo-title small, .demo-score small, .chip { font-size: 11.5px; letter-spacing: 0.06em; }
  .member-kicker, .updated { font-size: 12.5px; letter-spacing: 0.06em; }
  .tag { font-size: 10px; letter-spacing: 0.04em; }
}

/* ---------- the one orchestrated moment: on load the worm wiggles and the tune is written, note by note ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .mark-worm { animation: wiggle 1.4s 0.15s ease-in-out both; }
  .mark:hover .mark-worm { animation: wiggle 1.1s ease-in-out; }
  .tagline .w::before { animation: note-head 0.32s calc(0.55s + var(--k) * 0.2s) cubic-bezier(0.3, 1.7, 0.5, 1) both; }
  .tagline .w::after { animation: note-stem 0.22s calc(0.65s + var(--k) * 0.2s) ease-out both; }
}
@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  18% { transform: rotate(-6deg); }
  36% { transform: rotate(5deg); }
  54% { transform: rotate(-3deg); }
  72% { transform: rotate(1.5deg); }
}
@keyframes note-head { from { transform: rotate(-20deg) scale(0); } }
@keyframes note-stem { from { transform: scaleY(0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

@media print {
  .topbar, .marquee, .demo { display: none; }
}