/* Typing Melody landing (2026-10-14). Values are the game's neon tokens (../../DESIGN.md), same names, so a change there
   can be copied here by name. Finger enamels and brass keep their meanings: orange is the pointer fingers, brass is
   "press me". */
@font-face { font-family: "Fredoka"; src: url("/fonts/fredoka-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --sky-top: #0d0722; --sky-mid: #1c0d3d; --horizon: #3a1460;
  --tin: #1d1238; --tin-2: #2a1a4f; --line: #3b2a66;
  --pewter: #dfe3df; --pewter-2: #c3b8dc; --pewter-3: #8f82ad;
  --brass-hi: #e2bd52; --brass-deep: #9c7d26; --btn-face-hover: #ecc962;
  --glow: #ff5fc8; --glow-2: #4ff0ff;
  --li: #ec8f51; --th: #d6d1cd; --wrong: #e5484d;
  --text: var(--pewter); --text-soft: var(--pewter-2); --text-muted: var(--pewter-3); --text-on-key: #10141f; --text-on-brass: #1a1408;
  --display: "Fredoka", system-ui, sans-serif; --body: "Inter", system-ui, sans-serif;
  --radius-panel: 16px; --radius-button: 14px; --radius-tile: 12px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1); --dur-press: .1s; --dur-hover: .15s; --dur-arrive: .7s;
  --shadow-panel: 0 18px 40px -12px rgba(4, 2, 12, .7), 0 0 0 1px color-mix(in srgb, var(--glow) 28%, transparent), 0 0 42px -10px color-mix(in srgb, var(--glow) 45%, transparent);
  --title-glow: 0 0 18px color-mix(in srgb, var(--glow) 55%, transparent);
  --wrap: 1120px;
  /* 2026-10-15: the page's rhythm. Sections are --space-section apart, a heading's intro sits --space-block above its
     content, things in a group are --space-gap apart. Every section and list below reads these, never its own px. */
  --space-page: clamp(20px, 4vw, 40px); --space-section: clamp(80px, 11vw, 144px); --space-block: clamp(28px, 4vw, 52px);
  --space-gap: clamp(14px, 1.8vw, 24px); --space-tight: 6px;
  --surface-panel-top: color-mix(in srgb, var(--tin-2) 92%, transparent); --surface-panel-bottom: color-mix(in srgb, var(--tin) 94%, transparent);
  --surface-paper: #f7f1df; --radius-chip: 10px; --radius-icon: 22%;
  --icon-world: clamp(76px, 8.4vw, 112px); --icon-badge: clamp(76px, 7vw, 100px); --icon-stage: clamp(96px, 10vw, 128px);
  --text-lead: clamp(1.1rem, 1.6vw, 1.28rem); --text-read: 1rem; --text-meta: .94rem;
  --weight-text: 500; --weight-label: 600; --weight-strong: 700;
}

* { box-sizing: border-box; }
html { background: var(--sky-top); color-scheme: dark; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100dvh; color: var(--text); font: 500 18px/1.6 var(--body);
  background:
    radial-gradient(1px 1px at 12% 18%, #fff8 50%, transparent), radial-gradient(1px 1px at 33% 8%, #fff6 50%, transparent),
    radial-gradient(1.5px 1.5px at 58% 22%, #fff7 50%, transparent), radial-gradient(1px 1px at 81% 12%, #fff8 50%, transparent),
    radial-gradient(1px 1px at 92% 30%, #fff5 50%, transparent), radial-gradient(1.5px 1.5px at 6% 40%, #fff5 50%, transparent),
    radial-gradient(120% 60% at 50% 46%, color-mix(in srgb, var(--glow) 22%, transparent), transparent 60%) 0 0 / 100% 900px no-repeat,
    linear-gradient(var(--sky-top), var(--sky-mid) 520px, var(--horizon) 880px, var(--sky-top) 1500px) 0 0 / 100% 1500px no-repeat,
    var(--sky-top);
}
::selection { background: var(--pewter); color: var(--sky-top); }
a { color: var(--brass-hi); text-underline-offset: .2em; text-decoration-thickness: 1.5px; }
a:hover { color: var(--btn-face-hover); }
:focus-visible { outline: 3px solid var(--brass-hi); outline-offset: 3px; border-radius: 6px; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.12; text-wrap: balance; margin: 0 0 .5em; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.3rem, 5.6vw, 4.1rem); text-shadow: var(--title-glow); }
/* the one highlighted word, same as the share card: music is what sets this typing game apart (2026-10-15) */
h1 em { font-style: normal; color: var(--brass-hi); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); font-weight: 600; }
p { margin: 0 0 1em; max-width: 65ch; }
/* no orphans (2026-10-14 audit): paragraphs, list items and questions never end on one lonely word */
p, li, summary, figcaption { text-wrap: pretty; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -70px; padding: 12px 16px; min-height: 44px; background: var(--brass-hi); color: var(--text-on-brass); border-radius: 10px; z-index: 5; }
.skip:focus { top: 12px; }

/* buttons: brass with an edge that sinks on press, the game's .btn */
.btn {
  display: inline-block; font: 700 1.1rem/1 var(--display); color: var(--text-on-brass); text-decoration: none;
  background: var(--brass-hi); border-radius: var(--radius-button); padding: 14px 22px;
  box-shadow: 0 4px 0 var(--brass-deep), 0 0 26px -6px color-mix(in srgb, var(--brass-hi) 70%, transparent);
  transition: transform var(--dur-press) var(--ease), box-shadow var(--dur-press) var(--ease), background var(--dur-hover);
}
.btn:hover { background: var(--btn-face-hover); color: var(--text-on-brass); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--brass-deep), 0 0 26px -6px color-mix(in srgb, var(--brass-hi) 70%, transparent); }
.btn-big { font-size: clamp(1.2rem, 2.2vw, 1.45rem); padding: 18px 30px; }
.btn-small { font-size: 1.05rem; padding: 13px 18px; min-height: 44px; box-shadow: 0 3px 0 var(--brass-deep); }

.top { max-width: var(--wrap); margin: 0 auto; padding: 18px var(--space-page); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--text); text-decoration: none; font: 700 1.35rem/1 var(--display); }
.brand img { filter: drop-shadow(0 2px 6px rgba(4, 2, 12, .6)); }
.brand:hover { color: #fff; }
/* 2026-10-15: poke the logo (js/poke.js, after Sheep Tag's header). Hover plays one random move, a click bounces it, plays
   the next note of a tune and floats a note up. The moves animate translate / rotate / scale, which add to the
   transform key-hop and key-bob animate, so a poke never stops the bob. --hop is how high a hop goes on each logo. */
.p-host { position: relative; display: block; flex: none; }
.p-host img { --hop: -9px; }
.lk-key { --hop: -9%; }
.lockup { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.p-say { position: absolute; left: 2px; top: calc(100% + 10px); padding: 7px 12px; border-radius: 4px 14px 14px 14px; background: var(--pewter);
  color: var(--sky-top); font: 600 15px/1.2 var(--display); white-space: nowrap; pointer-events: none; z-index: 5;
  box-shadow: 0 8px 18px -6px rgba(4, 2, 12, .7), 0 0 18px -4px color-mix(in srgb, var(--glow) 55%, transparent);
  opacity: 0; transform: translateY(-6px) scale(.9); transform-origin: 0 0; transition: opacity .18s ease, transform .3s var(--ease); }
.p-host.saying .p-say { opacity: 1; transform: none; }
.p-note { position: absolute; z-index: 4; width: 34px; height: 34px; margin-left: -17px; pointer-events: none; background: var(--nc, var(--brass-hi));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v10.55A4 4 0 1 0 14 17V7h4V3z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v10.55A4 4 0 1 0 14 17V7h4V3z'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 8px var(--glow)); --rise: -90px; animation: p-note 1.3s cubic-bezier(.2, .7, .3, 1) forwards; }
.p-host .p-note { width: 18px; height: 18px; margin-left: -9px; --rise: -38px; }
@media (prefers-reduced-motion: no-preference) {
  .p-hop { animation: p-hop .6s var(--ease); }
  .p-wiggle { animation: p-wiggle .6s ease-out; }
  .p-squish { animation: p-squish .55s var(--ease); }
  .p-tilt { animation: p-tilt .7s var(--ease); }
  .p-spin { animation: p-spin .8s var(--ease); }
  .p-bounce { animation: p-bounce .62s ease-out; }
  /* the hero key already runs key-hop and key-bob on animation; a poke joins them instead of replacing them */
  .lk-key.p-hop { animation: p-hop .6s var(--ease), key-bob 3.4s ease-in-out 1s infinite alternate; }
  .lk-key.p-wiggle { animation: p-wiggle .6s ease-out, key-bob 3.4s ease-in-out 1s infinite alternate; }
  .lk-key.p-squish { animation: p-squish .55s var(--ease), key-bob 3.4s ease-in-out 1s infinite alternate; }
  .lk-key.p-tilt { animation: p-tilt .7s var(--ease), key-bob 3.4s ease-in-out 1s infinite alternate; }
  .lk-key.p-spin { animation: p-spin .8s var(--ease), key-bob 3.4s ease-in-out 1s infinite alternate; }
  .lk-key.p-bounce { animation: p-bounce .62s ease-out, key-bob 3.4s ease-in-out 1s infinite alternate; }
}
@keyframes p-hop { 30% { translate: 0 var(--hop); rotate: -8deg; } 60% { translate: 0 0; scale: 1.08 .9; } 80% { translate: 0 calc(var(--hop) * .25); scale: 1; } }
@keyframes p-wiggle { 20% { rotate: -11deg; } 40% { rotate: 9deg; } 60% { rotate: -6deg; } 80% { rotate: 3deg; } }
@keyframes p-squish { 30% { scale: .84 1.14; } 62% { scale: 1.1 .9; } 84% { scale: .98 1.02; } }
@keyframes p-tilt { 35% { rotate: -14deg; translate: calc(var(--hop) * .4) 0; } 70% { rotate: 4deg; translate: 0 0; } }
@keyframes p-spin { 100% { rotate: y 360deg; } }
@keyframes p-bounce { 18% { scale: 1.14 .84; } 45% { translate: 0 calc(var(--hop) * 1.3); scale: .92 1.1; } 70% { translate: 0 0; scale: 1.06 .94; } 86% { scale: .98 1.02; } }
@keyframes p-note { 0% { opacity: 0; transform: translateY(6px) scale(.5); } 16% { opacity: 1; transform: translate(calc(var(--nx) * .2), calc(var(--rise) * .15)) scale(1.15); } 62% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--nx), var(--rise)) rotate(var(--nr)) scale(1.1); } }

main > section { max-width: var(--wrap); margin: 0 auto; padding: var(--space-section) var(--space-page) 0; }
main > section > h2, .band > h2 { margin-bottom: .4em; }
.intro { font-size: var(--text-lead); color: var(--text-soft); margin-bottom: var(--space-block); }
/* the painted icons (spike/badges, from art/badges): drawn on a transparent tile, they sit straight on the page */
.ico { display: block; width: var(--s); height: var(--s); flex: none; filter: drop-shadow(0 10px 18px rgba(4, 2, 12, .55)); }

.hero { text-align: center; padding-top: clamp(28px, 5vw, 56px) !important; }
.hero-text { max-width: 820px; margin: 0 auto; }
/* 2026-10-15: the painted lockup as cut-out layers on the page's own sky (logo/final/build_layers.py), no box and no
   faded edge. Every layer shares one canvas, so they stack at inset 0. The key and its glow move together. */
.lockup { position: relative; width: min(540px, 90%); aspect-ratio: 1315 / 610; margin: 0 auto clamp(8px, 2vw, 18px); }
.lockup img, .lockup > div:not(.horizon) { position: absolute; inset: 0; width: 100%; height: 100%; }
/* 2026-10-15: the rounded horizon from the app icon, the logo standing on its meadow (Devin: "it communicates a meadow
   well"). One wide ellipse whose top is the horizon, so the curve is the same shape at every width (sizes in vw); its
   ground darkens just under the line and is gone well before the next section. Bushes sit on the curve near the edges:
   at u = 30% and 70% across the ellipse the arc is 4.2% of its height below the top. */
main { overflow-x: clip; }  /* the horizon is wider than the page on purpose; on main, not body, which would hand it to the viewport as hidden-but-scrollable */
.hero { isolation: isolate; }  /* its own layer, so the horizon's z-index -1 lands above the sky, below the words */
.horizon { position: absolute; left: 50%; top: 68.5%; width: 220vw; aspect-ratio: 22 / 7; transform: translateX(-50%); pointer-events: none; z-index: -1; }  /* behind the headline, never over it */
.horizon i { position: absolute; display: block; }
.hz-line, .hz-glow { inset: 0; border-radius: 50%; border-top: 3px solid #7af7f2; }
.hz-glow { border-top: 12px solid color-mix(in srgb, var(--glow-2) 55%, transparent); filter: blur(10px); }
.hz-line { background: linear-gradient(color-mix(in srgb, #0a0520 70%, transparent), transparent 38%); }
.hz-haze { left: 22%; right: 22%; bottom: 100%; height: 9vw; background: radial-gradient(50% 100% at 50% 100%, color-mix(in srgb, var(--glow) 34%, transparent), transparent 75%);
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }  /* no straight edge where it stops */
/* 2026-10-15: the app icon's pink sky. Devin: the line looked like a bare metal rail; give it the icon's vibrant pink
   behind it. A glow cast up from the same ellipse, so it hugs the curve at every width; clipped to the top so the
   ellipse's far edges never glow further down the page. */
.hz-pink { inset: 0; border-radius: 50%; clip-path: inset(-30vw 0 88% 0);
  box-shadow: 0 min(-1.2vw, -8px) max(6vw, 44px) max(.6vw, 4px) color-mix(in srgb, var(--glow) 70%, transparent), 0 min(-.3vw, -3px) max(1.8vw, 14px) max(.1vw, 1px) color-mix(in srgb, var(--glow) 90%, transparent); }
.hz-line { z-index: 1; }  /* the line is drawn over the bushes' feet, so they stand on it */
/* bushes stand on the curve: their feet sit just under the line and they lean with it. At u = 30% and 70% across the
   ellipse the arc is 4.17% of its height below the top and slopes 7.9 degrees (b/a = 7/22). */
.hz-bush { top: 4.17%; width: clamp(64px, 8vw, 150px); aspect-ratio: 5 / 2; transform-origin: 50% 100%; transform: translate(-50%, calc(-100% + 3px)) rotate(var(--lean)) scaleX(var(--flip, 1));
  background: radial-gradient(28% 70% at 26% 100%, #3a3478 98%, transparent), radial-gradient(30% 92% at 56% 100%, #3a3478 98%, transparent),
    radial-gradient(22% 60% at 82% 100%, #3a3478 98%, transparent); }
.hz-l { left: 30%; --lean: -7.9deg; } .hz-r { left: 70%; --lean: 7.9deg; --flip: -1; }
/* on a phone there is no clear ground for them: at u = 30% they fall off the screen, further in the logo covers them */
@media (max-width: 600px) { .horizon .hz-bush { display: none; } }  /* beats .horizon i { display: block } */
.lk-key { transform-origin: 17.5% 88%; }
/* a living-logo moment (js/logo.js) plays over the still key; the still hides only while a clip's frame is up */
.lockup .lk-moment { position: absolute; object-fit: fill; pointer-events: none;
  --lw: min(540px, 90vw);  /* the lockup's width, so the glow scales with the logo like the still glow does */
  filter: drop-shadow(0 0 calc(var(--lw) * .018) rgba(108, 254, 216, .7)) drop-shadow(0 0 calc(var(--lw) * .042) rgba(108, 254, 216, .4)); }  /* the still glow's color (lockup-key-glow), drawn around each frame so it moves with the key */
[data-logolive] .lk-still { visibility: hidden; }
/* 2026-10-15: the clips carry the key's own glow, so the still glow steps aside while one plays; left up, it stayed put
   while the key moved and its outline showed (Devin) */
.lk-key .lk-glow { transition: opacity .25s var(--ease); }
[data-logolive] .lk-key .lk-glow { opacity: 0 !important; animation: none; }
/* the logo and the header key are pictures to poke, not files to drag out or save from a long press */
.lockup img, .lockup video, .brand img, .end-key { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.lockup { user-select: none; -webkit-user-select: none; }
@media (prefers-reduced-motion: no-preference) {
  /* the authored moment: the key hops up once as the page opens, then the meadow breathes */
  .lk-key { animation: key-hop .9s var(--ease) .1s both, key-bob 3.4s ease-in-out 1s infinite alternate; }
  .lk-key .lk-glow, .lk-words .lk-glow { animation: glow-breathe 4.2s ease-in-out infinite alternate; }
  .lk-words .lk-glow { animation-delay: -2.1s; }
  .lk-stars { animation: twinkle 2.8s ease-in-out infinite alternate; }
  @keyframes key-hop { 0% { transform: translateY(9%) scale(.94, .9); } 55% { transform: translateY(-4%) scale(.98, 1.03); } 100% { transform: none; } }
  @keyframes key-bob { to { transform: translateY(-2.2%) rotate(-2.5deg); } }
  @keyframes glow-breathe { from { opacity: .7; } to { opacity: 1; } }
  @keyframes twinkle { from { opacity: .55; } to { opacity: 1; } }
}
.hero .lead { font-size: clamp(1.15rem, 1.8vw, 1.32rem); color: var(--text-soft); margin: 0 auto 1.6em; }
.cta { margin: 0 0 .6em; max-width: none; }
.small { font-size: 1rem; color: var(--text-muted); margin: 0 auto; }
.hero .hero-shot { margin: clamp(36px, 5vw, 60px) auto 0; max-width: 1040px; }

.shot { margin: 0; border-radius: var(--radius-panel); overflow: hidden; box-shadow: var(--shadow-panel); background: var(--sky-top); }

/* the one authored moment: the hero picture rises out of the horizon glow once, from a visible start */
@media (prefers-reduced-motion: no-preference) {
  .hero-shot { animation: rise var(--dur-arrive) var(--ease) .15s both; }
  @keyframes rise { from { opacity: .35; transform: translateY(26px) scale(.985); } }
}

/* the try-it strip: the game's letter strip and keycaps, F and J in pointer orange */
.try { text-align: center; }
.try p { margin-left: auto; margin-right: auto; color: var(--text-soft); }
.strip { list-style: none; padding: 0; margin: 28px auto 26px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; font: 500 clamp(1.9rem, 4vw, 2.6rem)/1 var(--display); }
.strip li { min-width: 1ch; color: color-mix(in srgb, var(--pewter-2) 68%, transparent); position: relative; padding-bottom: 10px; transition: color var(--dur-hover), transform var(--dur-hover) var(--ease); }
.strip li.done { color: var(--brass-hi); }
.strip li.next { color: #fff; transform: translateY(-4px); text-shadow: 0 0 14px var(--glow-2); }
.strip li.next::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 2px; background: var(--li); }
.strip li.miss { animation: shake .28s var(--ease); }
.pads { display: flex; justify-content: center; gap: clamp(18px, 6vw, 56px); }
.pad {
  --k: clamp(78px, 16vw, 104px);
  width: var(--k); height: var(--k); border: 0; border-radius: calc(var(--k) * .18); cursor: pointer; position: relative;
  font: 600 calc(var(--k) * .4)/1 var(--display); color: var(--text-on-key);
  background: linear-gradient(color-mix(in srgb, var(--li) 88%, #fff), var(--li));
  box-shadow: 0 5px 0 color-mix(in srgb, var(--li) 55%, #000), 0 0 30px -6px var(--li);
  transition: transform var(--dur-press) var(--ease), box-shadow var(--dur-press) var(--ease);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.pad i { position: absolute; left: 50%; bottom: 16%; width: 24%; height: 5px; margin-left: -12%; border-radius: 3px; background: color-mix(in srgb, var(--text-on-key) 55%, transparent); }
.pad.next { outline: 3px solid #fff; outline-offset: 4px; }
.pad:focus-visible { outline: 3px solid var(--brass-hi); outline-offset: 4px; }
.pad.down, .pad:active { transform: translateY(4px); box-shadow: 0 1px 0 color-mix(in srgb, var(--li) 55%, #000), 0 0 40px -4px var(--li); }
.pad.miss { animation: shake .28s var(--ease); }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.said { margin-top: 26px !important; min-height: 3.2em; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.said b { color: var(--brass-hi); font-weight: 600; }
.again { font: 600 1rem/1 var(--body); color: var(--text); background: none; border: 2px solid var(--line); border-radius: var(--radius-tile); padding: 10px 16px; margin-left: 8px; cursor: pointer; transition: border-color var(--dur-hover); }
.again:hover { border-color: var(--text-muted); }

.how { display: grid; gap: clamp(48px, 7vw, 88px); }
.row { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.row.flip > figure { order: 2; }
.row p { color: var(--text-soft); font-size: 1.05rem; }

/* stages: three steps up, the icon grows with the age, so the row reads as a climb without numbers */
.stage-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-block); }
.stage-list li { display: grid; grid-template-rows: var(--icon-stage) auto 1fr; gap: var(--space-gap); }
.stage-list li .ico { align-self: end; }
.stage-list li:nth-child(1) .ico { --s: calc(var(--icon-stage) * .8); }
.stage-list li:nth-child(2) .ico { --s: calc(var(--icon-stage) * .9); }
.stage-list li:nth-child(3) .ico { --s: var(--icon-stage); }
.stage-list h3 { margin: 0; }
.stage-list h3 span { display: block; margin-top: var(--space-tight); font: var(--weight-label) var(--text-meta)/1.3 var(--body); color: var(--brass-hi); letter-spacing: .01em; }
.stage-list p { margin: 0; color: var(--text-soft); }

/* the seven worlds as a path: icons joined by a dotted brass trail, in the order a child plays them */
.worlds { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-gap); position: relative; }
.worlds::before { content: ""; position: absolute; left: 7%; right: 7%; top: calc(var(--icon-world) / 2); border-top: 3px dotted color-mix(in srgb, var(--brass-hi) 55%, transparent); }
.worlds li { position: relative; display: grid; justify-items: center; text-align: center; gap: var(--space-tight); }
.worlds .ico { --s: var(--icon-world); margin-bottom: var(--space-tight); }
.worlds b { font: var(--weight-label) 1.08rem/1.2 var(--display); text-wrap: balance; }
.worlds span { color: var(--text-muted); font-size: var(--text-meta); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* rewards: one raised tin band, the badges as a medal case, then the certificate on cream paper */
.rewards { max-width: calc(var(--wrap) + 2 * var(--space-page)) !important; }
.band { padding: var(--space-block) clamp(20px, 5vw, 64px) clamp(36px, 5vw, 64px); border-radius: var(--radius-panel); background: linear-gradient(var(--surface-panel-top), var(--surface-panel-bottom)); box-shadow: var(--shadow-panel); }
.badges { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-block) var(--space-gap); }
.badges li { display: grid; justify-items: center; align-content: start; text-align: center; gap: var(--space-tight); }
.badges .ico { --s: var(--icon-badge); margin-bottom: var(--space-tight); }
.badges b { font: var(--weight-label) 1.05rem/1.2 var(--display); }
.badges span { color: var(--text-muted); font-size: var(--text-meta); line-height: 1.4; max-width: 18ch; }
.cert { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; margin-top: var(--space-section); }
.cert-shot { margin: 0; transform: rotate(-1.5deg); border-radius: 4px; overflow: hidden; background: var(--surface-paper); box-shadow: 0 24px 48px -16px rgba(4, 2, 12, .8), 0 0 0 1px rgba(255, 255, 255, .06); }
.cert h3 { margin-bottom: .6em; }
.cert p { color: var(--text-soft); }
.cert p:last-child { margin-bottom: 0; }

.tunes { display: grid; grid-template-columns: 1fr 250px; gap: clamp(28px, 5vw, 64px); align-items: center; }
.tunes p { color: var(--text-soft); }
.phone { margin: 0; border-radius: 28px; overflow: hidden; box-shadow: var(--shadow-panel); border: 6px solid #120b26; }

.grownups ul { list-style: none; padding: 0; margin: var(--space-block) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-block) var(--space-block); }
.grownups li { color: var(--text-soft); padding-top: var(--space-gap); border-top: 2px solid var(--line); }
.grownups li b { color: var(--text); font: var(--weight-label) 1.15rem/1.3 var(--display); display: block; margin-bottom: var(--space-tight); }

.faq .qs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-block); align-items: start; margin-top: var(--space-block); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 20px 36px 20px 0; font: var(--weight-label) 1.15rem/1.35 var(--display); list-style: none; position: relative; min-height: 44px; transition: color var(--dur-hover); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font-size: 1.5rem; color: var(--brass-hi); transition: transform var(--dur-hover) var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: #fff; }
.faq details p { color: var(--text-soft); }

/* the last word stands on the same horizon as the logo, so the page ends where it began */
.end { position: relative; isolation: isolate; overflow: clip; text-align: center; padding-bottom: clamp(56px, 8vw, 96px) !important; }
.end .horizon { top: calc(100% - clamp(40px, 5vw, 64px)); }
.end-key { margin: 0 auto var(--space-gap); filter: drop-shadow(0 0 22px color-mix(in srgb, var(--glow) 55%, transparent)); }
.end p { margin-left: auto; margin-right: auto; color: var(--text-soft); }
.end .cta { margin-top: var(--space-gap); }

.foot { max-width: var(--wrap); margin: 0 auto; padding: 28px var(--space-page) 40px; border-top: 1px solid var(--line); color: var(--text-soft); font-size: 1rem; }
.foot p { margin: 0 0 .4em; }
.foot p + p a { display: inline-block; padding: 12px 2px; }  /* the standalone links: 44px tall to tap */
.foot p + p { display: flex; flex-wrap: wrap; gap: 0 18px; }

.lost { text-align: center; min-height: 70dvh; display: grid; place-content: center; }

/* /science (2026-10-14): a Read page. One column at reading measure; each finding ends with what the game does with it */
.science > section { max-width: 780px; padding-top: clamp(40px, 6vw, 72px); }
.science > .sci-intro { padding-top: clamp(28px, 5vw, 56px); }
.science p, .science li { color: var(--text-soft); }
.sci-intro .lead { font-size: clamp(1.15rem, 1.8vw, 1.32rem); }
.note { padding: 16px 20px; border-radius: var(--radius-tile); background: linear-gradient(var(--tin-2), var(--tin)); border: 1px solid var(--line); }
.did { padding-left: 18px; border-left: 3px solid var(--brass-hi); }
.did b { color: var(--text); font-weight: 600; }
.cite { display: inline-block; font-size: .8em; font-variant-numeric: tabular-nums; text-decoration: none; vertical-align: .25em; line-height: 1; padding: 2px 1px; }
.cite:hover { text-decoration: underline; }
.claims ul { padding-left: 1.2em; margin: 0 0 1.2em; }
.claims li { margin-bottom: .5em; max-width: 65ch; }
.claims li::marker { color: var(--wrong); }
.sources ol { padding-left: 2.2em; margin: 0; font-size: 1rem; font-variant-numeric: tabular-nums; }
.sources li { margin-bottom: .6em; max-width: 72ch; overflow-wrap: anywhere; }
.sources li:target { color: var(--text); }
.sources li:target::marker { color: var(--brass-hi); }
.sources a { overflow-wrap: anywhere; }
.sci-end { text-align: left; }

@media (max-width: 960px) {
  .badges { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grownups ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .row, .tunes, .cert, .faq .qs, .stage-list { grid-template-columns: 1fr; }
  .row.flip > figure { order: 0; }
  .tunes .phone { max-width: 260px; margin: 0 auto; }
  .stage-list li { grid-template-rows: none; grid-template-columns: auto 1fr; align-items: center; column-gap: var(--space-gap); }
  .stage-list li p { grid-column: 1 / -1; }
  .stage-list li .ico { --s: 76px !important; }
  /* the path turns downward: icon left, name and count right, the trail running down the icons */
  .worlds { grid-template-columns: 1fr; gap: var(--space-gap); }
  .worlds::before { left: calc(var(--icon-world) / 2); right: auto; top: 8%; bottom: 8%; border-top: 0; border-left: 3px dotted color-mix(in srgb, var(--brass-hi) 55%, transparent); }
  .worlds li { grid-template-columns: auto 1fr; justify-items: start; text-align: left; column-gap: var(--space-gap); row-gap: 0; align-items: center; }
  .worlds .ico { --s: 64px; grid-row: span 2; margin: 0; }
  .worlds { --icon-world: 64px; }
  .worlds b { align-self: end; }
  .worlds span { align-self: start; }
  .cert-shot { transform: none; }
}
@media (max-width: 560px) {
  .badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grownups ul { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .top .btn-small { padding: 9px 12px; }
  .brand { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}