/* Flap & Jack site. One stylesheet for every page.
   Colours are the art kit's light theme (flap-and-jack-light-artkit-v1/metadata/palette.json).
   Text pairs are checked against WCAG 4.5:1: ink, muted and the two name-label colours on sky
   and cream, ink on water, cream on navy. The ampersand uses a darker beak orange for that reason. */

@font-face {
  font-family: "Nunito";
  src: url("/assets/fonts/Nunito-Variable.ttf") format("truetype");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --sky: #FFF0BF;
  --cloud: #FFF8DA;
  --cream: #FFF8E7;
  --ink: #10213A;
  --muted: #526873;
  --line: #C1CEBD;
  --flap: #FF7568;
  --flap-wing: #DB514D;
  --flap-label: #B9413F;
  --touch-flap: #FFC8BE;
  --jack: #17C4D8;
  --jack-wing: #079BAE;
  --jack-label: #006F85;
  --touch-jack: #93E4EA;
  --amp: #AA5311;
  --mountain-far: #B8DAD0;
  --water-top: #25C8DC;
  --water: #0BAECC;
  --water-deep: #0799B7;
  --stone: #657496;

  --wrap: 68rem;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --radius-panel: 28px;
  --radius-plate: 18px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 1.5rem; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--sky);
  color: var(--ink);
  font-family: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: hidden;
}
main { flex: 1 0 auto; }
img { display: block; max-width: 100%; }
h1, h2, h3 { font-weight: 900; line-height: 1.1; margin: 0; letter-spacing: -0.01em; }
p { margin: 0 0 1rem; }

a { color: var(--jack-label); text-decoration: underline; text-decoration-thickness: 0.09em; text-underline-offset: 0.18em; }
a:hover { color: var(--ink); text-decoration-color: var(--jack); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 10;
  background: var(--ink); color: var(--cream); padding: 0.6rem 1rem; border-radius: 12px;
  font-weight: 800; text-decoration: none;
}
.skip:focus { top: 1rem; }
.skip:focus-visible { outline-color: var(--ink); }

/* ------------------------------------------------------------------ header */

.bar { position: relative; z-index: 3; }
.bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.1rem; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--ink); text-decoration: none; font-weight: 900; font-size: 1.15rem; white-space: nowrap; }
.brand img { width: 36px; height: 36px; border-radius: 9px; }
.brand:hover { color: var(--ink); }
.brand .amp { color: var(--amp); }
.nav { display: flex; gap: 0.35rem; }
.nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.95rem;
  border-radius: 999px; color: var(--ink); font-weight: 800; text-decoration: none;
}
.nav a:hover { background: var(--cloud); }
.nav a[aria-current="page"] { background: var(--cream); box-shadow: inset 0 0 0 2px var(--line); }
@media (max-width: 26rem) { .nav a { padding: 0 0.8rem; } }
@media (max-width: 22.5rem) {
  /* Icon-only brand on the narrowest phones; the name stays in the accessibility tree. */
  .brand > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .nav a { padding: 0 0.75rem; }
  .soon { font-size: 0.9rem; padding: 0.6rem 1rem; }
}

/* ------------------------------------------------------------------ hero */

.hero { position: relative; isolation: isolate; padding: clamp(1.5rem, 5vw, 3.5rem) 0 clamp(2.5rem, 6vw, 4.5rem); text-align: center; }

.wordmark { font-size: clamp(2.6rem, 14vw, 8.5rem); letter-spacing: -0.02em; line-height: 1; }
.wordmark .w { position: relative; display: inline-block; }
.wordmark .w::after {
  content: ""; position: absolute; left: 0.04em; bottom: -0.1em;
  width: 0.42em; height: 0.075em; border-radius: 1em;
}
.wordmark .w-flap::after { background: var(--flap); }
.wordmark .w-jack::after { background: var(--jack); left: 0.02em; }
.wordmark .amp { color: var(--amp); margin-inline: 0.04em; }

.tagline { font-size: clamp(1.35rem, 3.6vw, 2.1rem); font-weight: 800; margin: clamp(1.4rem, 3vw, 2rem) 0 1.25rem; }

.soon {
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: var(--ink); color: var(--cream);
  padding: 0.7rem 1.35rem; border-radius: var(--radius-plate);
  font-weight: 800; font-size: 1.05rem; margin: 0;
}
.soon::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--jack); box-shadow: 0 0 0 3px rgba(23, 196, 216, 0.28); }

.lede { max-width: 36rem; margin: 1.6rem auto 0; font-size: clamp(1.05rem, 2vw, 1.2rem); }

/* A small playfield built from kit art: two lanes split by the fold, Flap's on the left and
   Jack's on the right. Gates scroll through each lane at slightly different paces and stay
   clipped to their own lane, as in the game. Sizes are lane-relative; the 2:1 stage makes
   a lane square, so a stone 13.5% of the lane wide is 50.6% of it tall (128 x 480 art). */
.stage {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  width: 100%; max-width: 60rem; aspect-ratio: 2 / 1; margin: clamp(2rem, 5vw, 3.25rem) auto 0;
  border-radius: var(--radius-panel); overflow: hidden; background: var(--sky);
  box-shadow: inset 0 0 0 2px var(--line), 0 8px 0 rgba(16, 33, 58, 0.07);
  --gate-w: 13.5%; --bird-w: 18%;
}
.stage::after {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; z-index: 3;
  border-left: 3px dashed rgba(16, 33, 58, 0.24); transform: translateX(-1.5px);
}
/* Mountain layers are 2px taller than their box and bottom-aligned, so WebKit's tiling bleed
   along the top edge of a fractionally scaled SVG falls outside the box. */
.stage-mtn {
  position: absolute; left: 0; right: 0; bottom: 15%; height: 30%;
  background:
    url("/assets/img/mountains-near.svg") 0 100% / auto calc(100% + 2px) repeat-x,
    url("/assets/img/mountains-mid.svg") 38% 100% / auto calc(100% + 2px) repeat-x,
    url("/assets/img/mountains-far.svg") 71% 100% / auto calc(100% + 2px) repeat-x;
}
.stage-water {
  position: absolute; left: 0; right: 0; bottom: 0; height: 15%;
  background:
    url("/assets/img/water-reflections-loop.svg") 0 0 / auto 100% repeat-x,
    linear-gradient(var(--water-top) 0 7%, var(--water) 7% 52%, var(--water-deep) 52%);
  animation: ripple 24s linear infinite;
}
@keyframes ripple { to { background-position: -1024px 0, 0 0; } }

.stage-cloud { position: absolute; height: auto; animation: drift 20s ease-in-out infinite alternate; }
.stage-cloud--1 { width: 22%; top: 16%; left: 4%; }
.stage-cloud--2 { width: 17%; top: 30%; left: 58%; animation-duration: 26s; animation-delay: -9s; }
.lane { position: relative; overflow: hidden; }
.hud-name {
  position: absolute; top: 6%; left: 0; right: 0; z-index: 2; text-align: center;
  font-size: clamp(0.85rem, 2vw, 1.25rem); font-weight: 800; letter-spacing: 0.08em;
}
.hud-name--flap { color: var(--flap-label); }
.hud-name--jack { color: var(--jack-label); }

.gate { position: absolute; top: 0; bottom: 0; width: var(--gate-w); left: var(--x); animation: scroll var(--t) linear var(--d) infinite; }
.gate img { position: absolute; left: 0; width: 100%; height: auto; }
.gate-top { bottom: calc(100% - var(--gap-top)); }
.gate-bottom { top: var(--gap-bottom); }
.gate--a { --x: 62%; --t: 6s; --d: -2.4s; --gap-top: 34%; --gap-bottom: 62%; }
.gate--b { --x: 72%; --t: 7.4s; --d: -3.4s; --gap-top: 25%; --gap-bottom: 53%; }
@keyframes scroll { from { left: 104%; } to { left: calc(-1 * var(--gate-w) - 4%); } }

.bird { position: relative; aspect-ratio: 128 / 112; }
.bird img { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage .bird { position: absolute; width: var(--bird-w); left: 22%; z-index: 1; }
.stage .bird--flap { top: 41.5%; }
.stage .bird--jack { top: 32.5%; }
.bird--flap { animation: bob 1.7s ease-in-out infinite alternate; }
.bird--jack { animation: bob 2.1s ease-in-out -0.6s infinite alternate; }
.bird .up { animation: wing-up 0.95s steps(1, end) infinite; }
.bird .down { opacity: 0; animation: wing-down 0.95s steps(1, end) infinite; }
.bird--jack .up, .bird--jack .down { animation-duration: 1.2s; animation-delay: -0.4s; }

@media (max-width: 40rem) {
  /* 4:3 stage: lanes are 1.5x as tall as wide, so widths scale up to keep the same shapes. */
  .stage { aspect-ratio: 4 / 3; --gate-w: 20.25%; --bird-w: 27%; border-radius: 20px; }
  .stage .bird { left: 14%; }
}

@keyframes bob { from { translate: 0 -6%; } to { translate: 0 6%; } }
@keyframes wing-up { 0%, 74% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes wing-down { 0%, 74% { opacity: 0; } 75%, 100% { opacity: 1; } }

/* Clouds and hanging stones behind the hero. */
.sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.cloud { position: absolute; height: auto; animation: drift 18s ease-in-out infinite alternate; }
.cloud--1 { width: clamp(150px, 22vw, 300px); top: 30%; left: -2%; }
.cloud--2 { width: clamp(120px, 16vw, 220px); top: 12%; right: 4%; animation-duration: 23s; animation-delay: -7s; }
.cloud--3 { width: clamp(130px, 18vw, 250px); top: 64%; right: -3%; animation-duration: 27s; }
.cloud--4 { width: clamp(110px, 14vw, 200px); top: 74%; left: 9%; animation-duration: 21s; animation-delay: -11s; }
@keyframes drift { from { translate: 0 0; } to { translate: 3.5rem 0; } }


/* ------------------------------------------------------------------ sections */

.section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.section-head { text-align: center; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.section-head h2 { font-size: clamp(2rem, 5vw, 3.1rem); }
.section-head p { color: var(--muted); margin: 0.75rem auto 0; max-width: 34rem; }
.kicker { display: block; font-size: 0.95rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--jack-label); margin-bottom: 0.6rem; }

/* Modes: a 2 x 2 grid in the title screen's order (Versus, Solo / Jack & Flap, Co-op). */
.modes { display: grid; gap: clamp(1rem, 2.4vw, 1.5rem); grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }
@media (min-width: 48rem) { .modes { grid-template-columns: 1fr 1fr; } }

.mode {
  position: relative; display: flex; flex-direction: column;
  background: var(--cream); border: 2px solid var(--line); border-radius: var(--radius-panel);
  padding: clamp(1.35rem, 3vw, 2rem); box-shadow: 0 6px 0 rgba(16, 33, 58, 0.07);
}
.mode h3 { font-size: clamp(1.8rem, 3.6vw, 2.3rem); }
.mode .caption { font-weight: 800; color: var(--muted); margin: 0.35rem 0 1.1rem; }
.mode .how { font-weight: 800; margin-bottom: 0.6rem; }
.mode p:last-child { margin-bottom: 0; }

.mode--versus { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.mode--versus .caption { color: var(--mountain-far); }
.mode--versus .badge {
  position: absolute; top: clamp(1.35rem, 3vw, 2rem); right: clamp(1.35rem, 3vw, 2rem);
  background: var(--flap); color: var(--ink); font-weight: 900; font-size: 0.85rem;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 0.3rem 0.7rem; border-radius: 999px;
}
.items { display: flex; flex-wrap: wrap; gap: 0.45rem; list-style: none; padding: 0; margin: 0 0 1rem; }
.items li { padding: 0.25rem 0.75rem; border-radius: 999px; font-weight: 800; font-size: 0.95rem; background: rgba(255, 248, 231, 0.1); box-shadow: inset 0 0 0 2px rgba(255, 248, 231, 0.32); }

/* A tiny landscape screen per mode: birds above, the touch cues for each half below. */
.mini {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  width: min(100%, 15rem); aspect-ratio: 2 / 1; margin: 0 0 1.25rem;
  background: var(--sky); border-radius: 16px; overflow: hidden;
  box-shadow: inset 0 0 0 2px var(--line);
}
.mode--versus .mini { box-shadow: none; }
.mini::before {
  content: ""; position: absolute; left: 50%; top: 10%; bottom: 10%;
  border-left: 2px dashed rgba(16, 33, 58, 0.25); transform: translateX(-1px);
}
.mini .half { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 8% 0 7%; }
.mini .half > img:first-child { width: 52%; height: auto; }
.mini .cue { width: 30%; height: auto; }
.mini .outward { transform: scaleX(-1); }
/* The feather pickup sits on a navy disc, as in the game, so it reads on the cream sky. */
.mini .feather { position: absolute; left: 50%; top: 42%; width: 17%; height: auto; aspect-ratio: 1; translate: -50% -50%; background: var(--ink); border-radius: 50%; padding: 2.5%; z-index: 1; }

/* Good to know: four plain facts. */
.facts { display: grid; gap: clamp(1rem, 2.4vw, 1.5rem); grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }
@media (min-width: 40rem) { .facts { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .facts { grid-template-columns: repeat(4, 1fr); } }
.fact { background: var(--cloud); border-radius: 22px; padding: 1.35rem 1.35rem 1.2rem; }
.fact img { width: 32px; height: 32px; margin-bottom: 0.75rem; }
.fact h3 { font-size: 1.3rem; margin-bottom: 0.45rem; }
.fact p { margin: 0; font-size: 1rem; }

/* ------------------------------------------------------------------ footer: mountains, then water */

.ground { position: relative; margin-top: clamp(1rem, 3vw, 2rem); flex-shrink: 0; }
.mountains {
  height: clamp(84px, 13vw, 176px);
  background:
    url("/assets/img/mountains-near.svg") 0 100% / auto calc(100% + 2px) repeat-x,
    url("/assets/img/mountains-mid.svg") 38% 100% / auto calc(100% + 2px) repeat-x,
    url("/assets/img/mountains-far.svg") 71% 100% / auto calc(100% + 2px) repeat-x;
}
.water {
  position: relative;
  background:
    url("/assets/img/water-reflections-loop.svg") 0 0 / 1024px 160px repeat-x,
    linear-gradient(var(--water-top) 0 10px, var(--water) 10px 11rem, var(--water-deep) 11rem);
  animation: tide 60s linear infinite;
  padding: clamp(2rem, 5vw, 3rem) 0 clamp(2rem, 5vw, 3rem);
  color: var(--ink);
}
@keyframes tide { to { background-position: -1024px 0, 0 0; } }

/* Stones stand in front of the mountains and sink behind the water's surface. */
.mountains { position: relative; }
.stone-rise { position: absolute; bottom: -2.5rem; width: clamp(64px, 6vw, 96px); display: none; }
.stone-rise img { width: 100%; height: auto; }
.stone-rise--l { left: clamp(0.5rem, 6vw, 6rem); height: 150%; }
.stone-rise--r { right: clamp(0.5rem, 4vw, 4rem); height: 125%; }
.stone-rise { overflow: hidden; }
.water { z-index: 1; }

.foot { position: relative; z-index: 2; display: grid; gap: 1.5rem; }
.foot-contact h2 { font-size: clamp(1.6rem, 3.4vw, 2.1rem); margin-bottom: 0.4rem; }
.foot-contact p { margin: 0; font-size: 1.1rem; }
.foot a { color: var(--ink); text-decoration-color: currentColor; }
.foot a:hover { text-decoration-thickness: 0.14em; }
.foot .mail { font-weight: 900; font-size: clamp(1.2rem, 3vw, 1.5rem); }
.foot-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; list-style: none; margin: 0; padding: 0; font-weight: 800; }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; }
.foot-links a[aria-current="page"] { text-decoration-thickness: 0.2em; }
.foot-legal { font-size: 0.9rem; font-weight: 600; max-width: 46rem; }
.foot-legal p { margin: 0 0 0.35rem; }

@media (min-width: 52rem) {
  .foot { grid-template-columns: 1fr auto; align-items: end; }
  .foot-legal { grid-column: 1 / -1; }
}

/* Decorative stones only where they clear the text. */
@media (min-width: 70rem) {
  .stone-rise { display: block; }
}

/* ------------------------------------------------------------------ privacy and support */

.doc-hero { position: relative; isolation: isolate; padding: clamp(1.5rem, 5vw, 3rem) 0 clamp(1.75rem, 4vw, 2.5rem); }
.doc-hero-inner { position: relative; display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 46rem) { .doc-hero-inner { grid-template-columns: 1fr auto; } }
.doc-hero h1 { font-size: clamp(2.6rem, 8vw, 4.6rem); margin-bottom: 1.6rem; }
.doc-hero h1 .kicker { font-size: 1rem; letter-spacing: 0.1em; line-height: 1.4; margin-bottom: 0.5rem; }
.doc-hero h1 .w { position: relative; display: inline-block; }
.doc-hero h1 .w::after { content: ""; position: absolute; left: 0.03em; bottom: -0.12em; width: 0.42em; height: 0.08em; border-radius: 1em; }
.doc-hero--privacy h1 .w::after { background: var(--flap); }
.doc-hero--support h1 .w::after { background: var(--jack); }
.doc-facts { margin: 0; font-weight: 600; }
.doc-facts strong { font-weight: 800; }
.doc-intro { max-width: 44rem; margin: 0 0 1rem; }
.doc-facts + .doc-intro { margin-top: 1rem; }
.doc-intro + .doc-facts { margin-top: 0.25rem; }
.doc-hero .bird { width: clamp(110px, 16vw, 168px); justify-self: center; }
@media (max-width: 45.99rem) {
  .doc-hero .bird { position: absolute; top: -0.6rem; right: 0; width: 72px; }
}

.short {
  margin-top: 1.5rem; max-width: 44rem; background: var(--ink); color: var(--cream);
  border-radius: 22px; padding: 1.1rem 1.4rem;
}
.short p { margin: 0; font-size: 1.12rem; }
.short strong { color: var(--touch-jack); }
.doc-hero--privacy .short strong { color: var(--touch-flap); }
.short a { color: var(--cream); }
.short a:focus-visible { outline-color: var(--cream); }

.doc-grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; padding-bottom: 1rem; }
@media (min-width: 62rem) { .doc-grid { grid-template-columns: 14rem minmax(0, 1fr); } }

.toc { background: var(--cloud); border-radius: 22px; padding: 0.6rem 1.25rem; }
@media (min-width: 62rem) { .toc { padding: 1.2rem 1.25rem; } }
@media (min-width: 62rem) { .toc { position: sticky; top: 1.5rem; } }
.toc h2 { font-size: 0.95rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.6rem; }
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
/* Phones and tablets get a collapsed disclosure; wide screens a sticky list beside the text. */
.toc-full { display: none; }
@media (min-width: 62rem) { .toc-fold { display: none; } .toc-full { display: block; } }
.toc-fold summary {
  display: flex; align-items: center; justify-content: space-between; min-height: 44px; cursor: pointer; list-style: none;
  font-size: 0.95rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink);
}
.toc-fold summary::-webkit-details-marker { display: none; }
.toc-fold summary::after {
  content: ""; width: 0.55rem; height: 0.55rem; margin-right: 0.4rem;
  border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: translateY(-25%) rotate(45deg);
}
.toc-fold[open] summary::after { transform: translateY(25%) rotate(-135deg); }
.toc-fold ol { margin-top: 0.4rem; }
@media (min-width: 36rem) and (max-width: 61.99rem) { .toc-fold ol { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.25rem; } }
.toc li { counter-increment: toc; }
.toc a {
  display: flex; gap: 0.6rem; align-items: baseline; padding: 0.35rem 0.25rem; min-height: 44px; align-content: center;
  color: var(--ink); text-decoration: none; font-weight: 700; line-height: 1.35; flex-wrap: nowrap;
}
.toc a::before { content: counter(toc, decimal-leading-zero); font-weight: 900; color: var(--jack-label); font-variant-numeric: tabular-nums; min-width: 1.6em; }
.toc a:hover { text-decoration: underline; text-underline-offset: 0.18em; }
@media (min-width: 62rem) { .toc a { min-height: 0; } }

.doc {
  background: var(--cream); border: 2px solid var(--line); border-radius: var(--radius-panel);
  padding: clamp(1.4rem, 4vw, 3rem); box-shadow: 0 6px 0 rgba(16, 33, 58, 0.07);
  font-weight: 500; line-height: 1.68; min-width: 0;
}
.doc > section { max-width: 42rem; scroll-margin-top: 1.5rem; }
.doc > section + section { margin-top: 2.25rem; padding-top: 2.25rem; border-top: 2px solid #EFE6CC; }
.doc h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); margin-bottom: 0.9rem; }
.doc h2::after { content: ""; display: block; width: 2.4rem; height: 0.3rem; border-radius: 1em; background: var(--flap); margin-top: 0.55rem; }
.doc > section:nth-child(even) h2::after { background: var(--jack); }
.doc h3 { font-size: 1.2rem; font-weight: 800; margin: 1.5rem 0 0.4rem; }
.doc strong { font-weight: 800; }
.doc ul, .doc ol { margin: 0 0 1rem; padding-left: 1.3rem; }
.doc li { margin: 0.35rem 0; }
.doc li::marker { color: var(--flap-label); font-weight: 800; }
.doc table { width: 100%; border-collapse: collapse; margin: 0 0 1rem; font-size: 0.98rem; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 0.6rem 0.75rem; border-bottom: 2px solid #EFE6CC; }
.doc th { font-weight: 800; background: var(--cloud); }
.table-scroll { overflow-x: auto; margin: 0 0 1rem; }
.table-scroll table { margin: 0; min-width: 32rem; }
.doc code { font: inherit; font-weight: 700; background: var(--cloud); padding: 0.05rem 0.4rem; border-radius: 6px; }

.doc-credit { max-width: 42rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 2px solid #EFE6CC; color: var(--muted); font-size: 0.92rem; font-weight: 600; }
.doc-credit p { margin: 0; }

/* ------------------------------------------------------------------ 404 */

.lost { text-align: center; padding: clamp(2rem, 7vw, 5rem) 0 0; }
.lost h1 { font-size: clamp(2.4rem, 8vw, 4.2rem); margin: 1rem 0 0.75rem; }
.lost .bird { width: clamp(120px, 20vw, 176px); margin: 0 auto; }
.button {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 1.5rem; border-radius: var(--radius-plate);
  background: var(--ink); color: var(--cream); font-weight: 800; text-decoration: none;
}
.button:hover { color: var(--cream); background: #1c3352; }

/* ------------------------------------------------------------------ load-in and motion */

.reveal { animation: rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.reveal-2 { animation-delay: 0.08s; }
.reveal-3 { animation-delay: 0.16s; }
.reveal-4 { animation-delay: 0.24s; }
.reveal-5 { animation-delay: 0.34s; }
@keyframes rise { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .bird .down { opacity: 0; }
}

@media print {
  .bar nav, .sky, .stage, .ground .mountains, .skip, .toc { display: none !important; }
  body { background: #fff; }
  .doc { border: 0; box-shadow: none; padding: 0; }
  .water { background: none; }
}