/* Readability first. Big headings in Fredoka 600 (rounded like the game, no strokes); card titles and text in Nunito.
   The game's look comes from its painted environment, the key art, the wordmark and the type colours. One light look. */
@font-face { font-family: "Fredoka"; font-weight: 600; font-style: normal; font-display: swap; src: url(/fonts/Fredoka-SemiBold.woff2) format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 600; font-style: normal; font-display: swap; src: url(/fonts/Nunito-SemiBold.woff2) format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 700; font-style: normal; font-display: swap; src: url(/fonts/Nunito-Bold.woff2) format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 800; font-style: normal; font-display: swap; src: url(/fonts/Nunito-ExtraBold.woff2) format("woff2"); }

:root {
  --ground: #F3F8FB; --sky: #E3F1F8; --sky-2: #D3EAF6; --panel: #FFFFFF; --line: #D8E5EC;
  --ink: #1E2A44; --text: #2B3242; --muted: #5A6577;
  --go: #2C8A3C; --go-lip: #1F6E2D; --blue: #2463A8; --blue-lip: #1D4F86; --sun: #FFD23F;
  --head: "Fredoka", "Arial Rounded MT Bold", system-ui, sans-serif;
  --body: "Nunito", system-ui, -apple-system, sans-serif;
  --shadow: 0 1px 2px rgba(30,42,68,.06), 0 10px 30px rgba(30,42,68,.07);
  --gutter: 16px;
  color-scheme: light;
}
@media (min-width: 720px) { :root { --gutter: 32px; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--text); font-family: var(--body); font-weight: 600; font-size: 18px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--blue); }
.in { max-width: 1240px; margin: 0 auto; padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
h1, h2 { font-family: var(--head); color: var(--ink); font-weight: 600; line-height: 1.1; letter-spacing: -.005em; margin: 0; text-wrap: balance; }
h3 { font-family: var(--body); color: var(--ink); font-weight: 800; line-height: 1.25; margin: 0; text-wrap: balance; }
p { margin: 0; }
/* a list laid out as cards or tiles: no bullets, no indent; later rules may add a margin */
.bare { list-style: none; margin: 0; padding: 0; }
/* short labels sit tight when they wrap; paragraphs keep the body's 1.5 */
.kicker, .eyebrow, .facts dt, .meta, .lineup .role, .ult .k, .ult b, .picker .count, .person .role, .files .what, .files .meta2,
.soon .k, .soon li b, .close .sign, .mail, .btn { line-height: 1.25; }

/* hero: the game's painted meadow behind, a light wash on the text side so it reads at a glance */
.hero { background:
    linear-gradient(90deg, rgba(243,248,251,.97) 0%, rgba(243,248,251,.93) 40%, rgba(243,248,251,.35) 64%, rgba(243,248,251,0) 82%),
    url(/assets/meadow.jpg) center 42% / cover no-repeat; border-bottom: 1px solid var(--line); }
.hero .in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px 44px; align-items: center; padding-block: 40px 56px; }
.hero-copy { display: grid; gap: 18px; min-width: 0; }
.wordmark { width: 170px; }
.kicker { font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hero h1 { font-size: clamp(38px, 4.6vw, 56px); }
.hero h1 em { font-style: normal; color: var(--blue); }
.comp { font-size: clamp(18px, 1.8vw, 21px); font-weight: 700; color: var(--ink); max-width: 30em; }
/* the Duo opened like a laptop fills the wider column; the shadow follows the device's outline, never a box */
.hero-shot { position: relative; min-width: 0; }
.hero-shot img { width: 100%; filter: drop-shadow(0 18px 30px rgba(30,42,68,.28)); }

.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 10px 22px 13px; border-radius: 14px; border: 0;
  font-family: var(--body); font-weight: 800; font-size: 18px; color: #fff; text-decoration: none; background: var(--go); box-shadow: inset 0 -4px 0 var(--go-lip);
  cursor: pointer; transition: transform .08s ease, box-shadow .08s ease; }
.btn:active { transform: translateY(2px) scale(.97); box-shadow: inset 0 -2px 0 var(--go-lip); }
.btn.blue { background: var(--blue); box-shadow: inset 0 -4px 0 var(--blue-lip); }
.btn.blue:active { box-shadow: inset 0 -2px 0 var(--blue-lip); }
.btn.off { background: var(--panel); color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--line); font-size: 16px; cursor: default; }
.btn.off:active { transform: none; }
.btn svg { width: 18px; height: 18px; }

/* fact strip */
.facts { background: var(--panel); border-bottom: 1px solid var(--line); }
/* margin-block only: .in's auto side margins are what centre the strip */
.facts dl { margin-block: 0; padding-block: 18px; text-align: center; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 24px; }
.facts div { min-width: 0; }
.facts dt { font-size: 12.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 2px 0 0; font-size: 16px; font-weight: 800; line-height: 1.25; color: var(--ink); }

/* sections */
section { padding-block: clamp(56px, 8vw, 100px) 0; }
.head { display: grid; gap: 12px; margin-bottom: 30px; max-width: 720px; }
.eyebrow { font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.head h2 { font-size: clamp(30px, 3.6vw, 44px); }
.head p { font-size: clamp(17px, 1.6vw, 19px); color: var(--muted); max-width: 40em; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); min-width: 0; }

figure { margin: 0; display: grid; gap: 10px; min-width: 0; }
.shot { border-radius: 16px; overflow: hidden; background: var(--ink); box-shadow: 0 1px 2px rgba(30,42,68,.1), 0 10px 24px rgba(30,42,68,.12); }
/* a screenshot in Apple's device frame: the device is the picture, so no box, fill or shadow behind it */
.shot.device { border-radius: 0; overflow: visible; background: none; box-shadow: none; }
figcaption { line-height: 1.25; font-size: 14.5px; font-weight: 700; color: var(--muted); text-align: center; }

.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.tile { padding: 14px 14px 22px; display: grid; gap: 12px; align-content: start; }
.tile h3 { font-size: 20px; padding-inline: 6px; }
.tile p { font-size: 16.5px; color: var(--muted); padding-inline: 6px; }
/* the Duo's three poses at one scale: each column is its device's width in points (--pt, 2056.3 pt in all) plus the
   tile's 28px padding and 2px border, and subgrid rows bottom-align the devices on one baseline and line up the titles under them */
.poses { --u: calc((100% - 48px - 90px) / 2056.3); grid-template-columns: calc(var(--u) * 833 + 30px) calc(var(--u) * 510.3 + 30px) calc(var(--u) * 713 + 30px); row-gap: 0; }
.poses .tile { grid-row: span 3; grid-template-rows: subgrid; }
.poses figure { align-self: end; }
.after { margin-top: 22px; font-size: 17px; font-weight: 700; color: var(--ink); }

/* genre rows */
/* the stills get the wider column: .media comes first in the markup, and .flip moves it to the right */
.row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 32px 48px; align-items: center; }
.row.flip { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); }
.row.flip > .media { order: 2; }
.media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: end; }
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.points li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; }
.points li::before { content: ""; width: 26px; height: 26px; border-radius: 8px; background: var(--sky-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232463A8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 15px no-repeat; margin-top: 2px; }
.points b { display: block; font-weight: 800; font-size: 18.5px; color: var(--ink); line-height: 1.3; }
.points span { display: block; margin-top: 2px; line-height: 1.45; color: var(--muted); font-size: 17px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-top: 26px; }
.stat { padding: 14px 16px; }
.stat b { display: block; font-family: var(--head); font-weight: 600; font-size: 32px; line-height: 1.05; color: var(--ink); }
.stat span { display: block; margin-top: 4px; line-height: 1.25; font-size: 14.5px; font-weight: 700; color: var(--muted); }

/* type chips: fills are the game's type colours (Tokens.uss); text colours are dark shades chosen for contrast */
.types { display: flex; flex-wrap: wrap; gap: 6px; }
.type { font-size: 13px; font-weight: 800; border-radius: 999px; padding: 2px 10px; }
.t-fire { background: #FF8A1F; color: #3D1800; } .t-plant { background: #B6F27A; color: #2F6B12; } .t-water { background: #6FF0FF; color: #0E5A73; }
.t-lightning { background: #FFF27A; color: #7A5A00; } .t-metal { background: #39E5FF; color: #0E5466; } .t-stone { background: #FFB347; color: #7A4A0C; } .t-normal { background: #FFE3A3; color: #6B5520; }

/* the run's rooms and items: two tabs over a wrapping grid of the game's icons, and one panel that reads the picked one */
.run { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.media.one { grid-template-columns: minmax(0, 420px); justify-content: center; }
.explore { padding: 14px; display: grid; gap: 12px; grid-template-areas: "tabs" "icons" "pick"; }
.explore .tabs { grid-area: tabs; }
.explore .pick { grid-area: pick; }
.tabs { display: flex; gap: 6px; padding: 4px; background: var(--ground); border-radius: 14px; width: fit-content; }
.tabs button { min-height: 40px; padding: 6px 18px 8px; border: 0; border-radius: 10px; background: none; font-family: var(--body); font-size: 16px; font-weight: 800; line-height: 1.2; color: var(--muted); cursor: pointer; }
.tabs button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: var(--shadow); }
/* Why: both grids share one cell and the closed one only turns invisible (out of the tab order and the accessibility tree, and inert),
   so the card is always as tall as the taller grid and switching tabs never moves the doors beside it. */
.icons { grid-area: icons; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; }
.icons[hidden] { display: flex; visibility: hidden; }
.icons button { width: 56px; height: 56px; padding: 4px; border-radius: 14px; border: 2px solid transparent; background: var(--ground); cursor: pointer; display: grid; place-items: center; transition: transform .12s ease, border-color .12s ease, background .12s ease; }
.icons button img { width: 46px; height: 46px; }
.icons button:hover { transform: translateY(-2px); }
.icons button[aria-pressed="true"] { border-color: var(--blue); background: #fff; box-shadow: var(--shadow); }
.tabs button:focus-visible, .icons button:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.pick { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; min-height: 96px; padding: 12px 14px; background: var(--ground); border: 1px solid var(--line); border-radius: 14px; }
.pick img { width: 72px; height: 72px; }
.pick b { display: block; font-weight: 800; font-size: 18px; line-height: 1.25; color: var(--ink); }
.pick span { display: block; margin-top: 2px; font-size: 16px; line-height: 1.4; color: var(--muted); }
/* Why: the script stacks every room's and item's name and line, invisible, in the same cell as the shown one,
   so the panel is as tall as its longest line at every width and picking an icon never changes its height. */
.pick .says { display: grid; }
.pick .says > * { grid-area: 1 / 1; }
.pick .now { align-self: center; }
.pick .size { visibility: hidden; }

/* REVIEW ONLY: marks each slot that will become a video. tools/site/deploy.sh live refuses while any remain. */
.planned-video { display: inline-block; max-width: calc(100% - 16px); padding: 3px 10px 4px; border: 1.5px dashed var(--ink); border-radius: 999px;
  background: var(--sun); color: var(--ink); font-family: var(--body); font-size: 12.5px; font-weight: 800; line-height: 1.3; text-align: left;
  box-shadow: 0 2px 6px rgba(30,42,68,.18); }
.has-planned { position: relative; }
.has-planned > .planned-video { position: absolute; z-index: 2; top: 8px; left: 8px; }
/* on a card, the pill sits on its top edge so it covers none of the list */
.card.has-planned > .planned-video { top: -12px; left: auto; right: 16px; }
.review-note { display: block; margin: 16px auto 0; width: fit-content; max-width: calc(100% - 2 * var(--gutter)); border-radius: 14px; text-align: center; }

/* pals: the key art as the band, then the starters, then the roster */
.band { margin-top: clamp(56px, 8vw, 100px); background: url(/assets/keyart.jpg) center 70% / cover no-repeat; aspect-ratio: 16 / 7; max-height: 560px; width: 100%; display: grid; }
.band .in { width: 100%; padding-block: clamp(22px, 3vw, 44px); }
.band h2 { font-size: clamp(32px, 4.6vw, 56px); display: inline-block; background: rgba(255,255,255,.93); border-radius: 18px; padding: 6px 20px 9px; box-shadow: var(--shadow); }
.starters { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px 44px; align-items: center; margin-top: 44px; }
.lines { display: grid; gap: 14px; }
.lineup { padding: 16px 18px; display: grid; gap: 8px; }
.lineup .top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.lineup h3 { font-size: 21px; }
.lineup .role { font-size: 14.5px; font-weight: 800; color: var(--muted); }
.evo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 16px; color: var(--muted); }
.evo b { color: var(--ink); font-weight: 800; }
.evo svg { width: 14px; height: 14px; flex: 0 0 auto; }

.evo-art { display: grid; grid-template-columns: minmax(0,1fr) 16px minmax(0,1fr) 16px minmax(0,1fr); align-items: end; gap: 6px; }
.evo-art .form { gap: 2px; text-align: center; }
.evo-art .form img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.evo-art .form figcaption { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.evo-art .chev { width: 16px; height: 16px; align-self: center; }
.pals { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); overflow: hidden; margin-top: 18px; }
.stage { position: relative; min-height: 420px; display: grid; place-items: center; padding: 28px; background: radial-gradient(ellipse 60% 55% at 50% 58%, var(--tint, #FFE3A3) 0%, rgba(255,255,255,0) 70%), linear-gradient(180deg, #F7FBFD 0%, var(--sky) 100%); transition: background .35s ease; }
.stage::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 46px; height: 22px; border-radius: 50%; background: radial-gradient(closest-side, rgba(30,42,68,.22), rgba(30,42,68,0)); }
.stage img { position: relative; z-index: 1; height: 340px; width: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 12px 18px rgba(30,42,68,.18)); }
.stage img.enter { animation: palIn .45s cubic-bezier(.2,.9,.3,1.25) both; }
@keyframes palIn { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }
.idle { animation: bob 3.2s ease-in-out infinite; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.info { padding: 30px 30px 26px; display: grid; gap: 14px; align-content: center; border-left: 1px solid var(--line); }
.info h3 { font-family: var(--head); font-weight: 600; font-size: clamp(30px, 3.2vw, 40px); }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 15px; font-weight: 800; color: var(--muted); }
.line { font-size: 16px; color: var(--muted); }
.line b { color: var(--ink); }
.ult { background: var(--ground); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.ult .k { font-size: 12.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.ult b { display: block; font-weight: 800; font-size: 18px; color: var(--ink); }
.ult p { font-size: 16px; }
.picker { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; padding: 14px; border-top: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.picker button { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 18px; border: 2px solid transparent; background: var(--ground); padding: 6px; cursor: pointer; transition: transform .12s ease, border-color .12s ease, background .12s ease; }
.picker button img { width: 100%; height: 100%; object-fit: contain; }
.picker button:hover { transform: translateY(-2px); }
.picker button[aria-pressed="true"] { border-color: var(--blue); background: #fff; box-shadow: var(--shadow); }
.picker button:focus-visible, .arrows button:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.picker .count { margin-left: auto; padding-inline: 8px; font-size: 14.5px; font-weight: 800; color: var(--muted); white-space: nowrap; }
.arrows { display: flex; gap: 8px; }
.arrows button { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: #fff; cursor: pointer; display: grid; place-items: center; }
.arrows svg { width: 18px; height: 18px; }

/* the label beside a short list, each line led by its bold word in one column */
.soon { margin-top: 24px; padding: 18px 22px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 8px 28px; background: var(--ink); color: #E8EEF6; border-radius: 18px; font-size: 17px; }
.soon .k { font-weight: 800; color: var(--sun); }
.soon ul { display: grid; gap: 6px; }
.soon li { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 2px 14px; }
.soon li b { font-weight: 800; color: #fff; }

/* team */
.team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.person { padding: 24px; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 6px 18px; align-content: start; }
.person img { grid-row: span 2; width: 84px; height: 84px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--line); }
.person h3 { font-family: var(--head); font-weight: 600; font-size: 28px; align-self: end; }
.person .role { font-size: 14px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--blue); }
.person ul { grid-column: 1 / -1; margin: 10px 0 0; padding-left: 20px; display: grid; gap: 6px; color: var(--muted); font-size: 16.5px; }

/* media */
.two { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 24px; }
.files { padding: 4px 22px; }
.files ul { list-style: none; margin: 0; padding: 0; }
.files li { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
/* a preview of each download, on a light tile so the white wordmark reads */
.files .thumb { flex: 0 0 auto; width: 112px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--sky-2); display: grid; place-items: center; }
.files .thumb img { width: 100%; height: 100%; object-fit: cover; }
.files .thumb img.fit { object-fit: contain; padding: 6px; }
.files .thumb img.icon { width: 50px; height: 50px; border-radius: 12px; }
.files .name { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; }
.files li:last-child { border-bottom: 0; }
.files .what { font-weight: 800; color: var(--ink); }
.files .meta2 { color: var(--muted); font-size: 15px; }
.files a.what { color: var(--blue); }
.files .later { padding: 14px 0 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; }
.contact { padding: 24px; display: grid; gap: 10px; align-content: start; }
.contact h3 { font-size: 20px; }
.mail { font-size: 19px; font-weight: 800; color: var(--ink); user-select: all; overflow-wrap: anywhere; }

/* close */
.close { margin-top: clamp(64px, 9vw, 112px); background: url(/assets/meadow.jpg) center 60% / cover no-repeat; }
.close .in { display: grid; justify-items: center; text-align: center; gap: 12px; padding-block: 56px 64px; }
.close h2 { font-size: clamp(30px, 4.4vw, 50px); background: rgba(255,255,255,.94); border-radius: 18px; padding: 8px 22px 10px; box-shadow: var(--shadow); }
.close .sign { font-weight: 800; color: var(--ink); background: rgba(255,255,255,.94); border-radius: 12px; padding: 4px 14px; }
footer { background: var(--ink); color: #BFC9D9; font-size: 14px; }
footer .in { padding-block: 20px 26px; display: grid; gap: 4px; }

/* one-screen pages (the root page and the 404): the wordmark on the meadow */
.hold { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; background: url(/assets/meadow.jpg) center 60% / cover no-repeat; }
.hold .in { width: 100%; display: grid; justify-items: center; text-align: center; gap: 20px; padding-block: 48px; }
.hold .wordmark { order: 0; width: min(100%, 420px); }
.hold h1 { font-size: clamp(28px, 6vw, 44px); background: rgba(255,255,255,.94); border-radius: 18px; padding: 8px 22px 10px; box-shadow: var(--shadow); }
/* a one-screen page with a footer: the meadow takes what the footer leaves, so the pair is one screen tall */
body.one { min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
body.one .hold { min-height: 0; }
footer a { color: #fff; }
footer nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }

/* text pages (the privacy policy): the light sky behind, the title on it, and the text on one white card */
body.doc-page { background: var(--ground) linear-gradient(180deg, var(--sky-2) 0%, var(--sky) 320px, var(--ground) 760px) no-repeat; }
.doc-top .in, .doc { max-width: calc(760px + 2 * var(--gutter)); }
.doc-top .in { padding-block: 24px 0; }
.doc-top .wordmark { width: 120px; }
.doc { padding-block: 28px 72px; }
.doc h1 { font-size: clamp(34px, 6vw, 50px); }
.doc .updated { margin-top: 10px; }
.doc-card { margin-top: 26px; padding: clamp(24px, 5vw, 48px); font-size: 17.5px; line-height: 1.55; color: var(--ink); }
.doc-card h2 { font-size: clamp(23px, 3vw, 27px); margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--line); }
.doc-card p, .doc-card ul { margin: 12px 0 0; }
.doc-card > :first-child { margin-top: 0; }
.doc-card ul { padding-left: 1.3em; display: grid; gap: 12px; }
.doc-card li { padding-left: 4px; }
.doc-card li::marker { color: var(--blue); }
.doc-card b { font-weight: 800; }
.doc-card a { color: var(--blue); font-weight: 800; overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .hero { background:
      linear-gradient(180deg, rgba(243,248,251,.97) 0%, rgba(243,248,251,.93) 34%, rgba(243,248,251,.2) 58%, rgba(243,248,251,0) 70%),
      url(/assets/meadow.jpg) center 70% / cover no-repeat; }
  .hero .in { grid-template-columns: minmax(0, 1fr); padding-block: 22px 32px; gap: 16px; }
  .hero-copy { display: contents; }
  .wordmark { order: 1; width: 140px; } .kicker { order: 2; } .hero h1 { order: 3; } .comp { order: 4; }
  .hero h1 { font-size: clamp(31px, 8.6vw, 40px); } .comp { font-size: 17px; }
  .hero-shot { order: 5; width: 100%; } .btns { order: 6; }
  .facts dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid3, .team, .two, .row, .row.flip, .starters { grid-template-columns: minmax(0, 1fr); }
  .row.flip > .media { order: 0; }
  .pals { grid-template-columns: minmax(0, 1fr); }
  .stage { min-height: 300px; } .stage img { height: 240px; }
  .info { border-left: 0; border-top: 1px solid var(--line); padding: 22px 20px; }
  .band { aspect-ratio: 4 / 3; background-position: 40% 80%; }
  .starters figure { max-width: 320px; justify-self: center; }
  .tile figure { width: min(100%, 360px); justify-self: center; }
  /* stacked, the poses keep their one scale: the laptop fills the tile, the others take their share of its width */
  .poses { row-gap: 24px; }
  .poses .tile { grid-row: auto; grid-template-rows: none; }
  .poses figure { width: calc(min(100%, 520px) * var(--pt) / 833); }
  .media.one { grid-template-columns: minmax(0, 360px); }
}
@media (max-width: 520px) {
  .btns { flex-wrap: nowrap; gap: 10px; }
  .btn { flex: 1 1 0; min-width: 0; padding-inline: 10px; font-size: 15.5px; text-align: center; }
  .btn.off { font-size: 14px; }
  .soon { grid-template-columns: minmax(0, 1fr); }
  .soon li { grid-template-columns: minmax(0, 1fr); }
  .picker button { width: 60px; height: 60px; }
  .files .name { flex-direction: column; align-items: flex-start; }
}
/* The press keeps its squeeze and drops the travel. */
@media (prefers-reduced-motion: reduce) {
  .stage img.enter, .idle { animation: none; }
  .btn:active { transform: scale(.97); }
}