/* =========================================================================
   LastApollo — marketing site.
   Direction: INSTRUCTION BOOKLET (2026-07-28 redesign).

   The previous build was the old AnyDaruma landing skeleton with pixel paint
   on it — sticky pill nav, copy-left/device-right hero, alternating grids of
   colour-topped cards, ± accordion, dark column footer. The bones are what
   made it read as generic, so the bones are what changed.

   The page is now built as the printed booklet that shipped in the box with a
   16bit cartridge, because the app IS a 16bit cartridge-looking app and the
   booklet's own devices map onto the content exactly:

     the ground rules  → the hazard-banded NOTICE page every manual opens with
     the two entries   → a drawn fork, not two cards
     the four screens  → a parts list with dot leaders
     the privacy list  → a data sheet, with "never exists" drawn as an empty plate
     the FAQ           → a troubleshooting table, everything visible at once

   SUBSTRATE, not screen. The app's five colour keys are kept verbatim
   (purple=action · red=brand/danger · blue=data · green=good · yellow=notice)
   but they are now treated as SPOT INKS on paper stock rather than UI fills.
   The app's hard shadow (offset only, blur 0) is reinterpreted as PRINT
   MISREGISTRATION: the colour plate sits a few px off the black keyline, the
   way a cheap 90s booklet came off the press. Same mechanic as the app, and
   the reason plate offsets are coloured rather than grey.

   Light = paper stock. Dark = the same plates on black stock — only the stock
   and the ink flip; the spot inks keep their app values.

   Deliberately NOT here: paper texture, scanlines, CRT curvature, halftone.
   Those are the costume version of this idea.

   Still true from before: no JavaScript anywhere, self-hosted OFL fonts, no
   third-party requests, English only.
   ========================================================================= */

/* ---- Fonts (self-hosted, SIL OFL 1.1 — same files the app ships) --------
   Roles are the booklet's, not the app's: the cartridge logo face appears
   BIG and rarely, the label face carries every tag and running head, and the
   body face is set small and tight the way printed body copy is. */
@font-face { font-family:'PressStart2P'; src:url('assets/fonts/PressStart2P-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Silkscreen';   src:url('assets/fonts/Silkscreen-Regular.ttf')   format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'PixelifySans'; src:url('assets/fonts/PixelifySans-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'PixelifySans'; src:url('assets/fonts/PixelifySans-SemiBold.ttf') format('truetype'); font-weight:600; font-display:swap; }
@font-face { font-family:'VT323';        src:url('assets/fonts/VT323-Regular.ttf')        format('truetype'); font-weight:400; font-display:swap; }

/* ---- Tokens ------------------------------------------------------------ */
:root {
  color-scheme: light dark;

  /* stock + ink */
  --stock:#E9E8EF;      /* booklet paper */
  --stock-2:#DCDAE3;    /* the second tone — plate fills, table zebra */
  --sheet:#F7F6FA;      /* the bright plate reading blocks sit on */
  --ink:#1B1A22;        /* hard offset black-violet */
  /* Both secondaries clear 4.5:1 on the stock — ink-3 carries real content
     (spec labels, running heads, "Last updated"), not just decoration. */
  --ink-2:#4F4C60;
  --ink-3:#69667A;
  --rule:#1B1A22;       /* keylines are ink */
  --rule-soft:#B9B6C8;

  /* spot inks — the app's five keys, unchanged */
  --violet:#6F5FA8; --red:#DD4A50; --yellow:#E3B23A; --green:#48A266; --blue:#4A6FC4;
  /* the same inks, darkened to survive as small text on light stock */
  --violet-ink:#584A90; --red-ink:#B93940; --blue-ink:#3D5CAA; --green-ink:#357B4D;

  --reverse-fill:#1B1A22;   /* the back cover / reversed plates */
  --reverse-ink:#EDEBF4;
  --reverse-ink-2:#9E9BAF;
  --reverse-rule:#413E4E;

  /* rocket sprite — logo colourway */
  --rk-nose:var(--red); --rk-body:var(--violet); --rk-window:var(--yellow);
  --rk-flame-o:transparent; --rk-flame-i:transparent;

  --f-logo:'PressStart2P','Courier New',monospace;
  --f-label:'Silkscreen','Courier New',monospace;
  --f-body:'PixelifySans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-data:'VT323',ui-monospace,'SF Mono',Menlo,monospace;

  --wrap:1080px;
  --gut:34px;
  --sheet-pad:clamp(52px,7vw,88px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --stock:#1A1922; --stock-2:#242230; --sheet:#2E2B3A;
    --ink:#EDEBF4; --ink-2:#A9A6BA; --ink-3:#8B889E;
    --rule:#847FA0; --rule-soft:#4B4859;
    --violet:#8D7FC4; --red:#E0666B; --yellow:#E8BD52; --green:#5CB478; --blue:#6C8FDC;
    --violet-ink:#A99CD8; --red-ink:#E88185; --blue-ink:#8AA6E4; --green-ink:#78C692;
    --reverse-fill:#111017; --reverse-ink:#EDEBF4;
    --reverse-ink-2:#9E9BAF; --reverse-rule:#3A3746;
  }
}

/* ---- Reset ------------------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:80px; }
body {
  font-family:var(--f-body); font-size:15.5px; line-height:1.62;
  color:var(--ink); background:var(--stock);
  /* Upstream Pixelify Sans ships a broken fi/fl ligature whose glyph omits the
     second letter ("first" → "Arst"). The TTFs here have that feature stripped
     (tools/drop_pixelify_liga.py); this is the guard for any un-patched copy. */
  font-variant-ligatures:none;
  font-feature-settings:"liga" 0,"clig" 0,"dlig" 0;
}
a { color:inherit; text-decoration:none; }
svg { display:block; }
:focus-visible { outline:3px solid var(--violet); outline-offset:3px; }
::selection { background:var(--violet); color:#fff; }

/* ---- Primitives -------------------------------------------------------- */
.wrap { width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }

/* The plate: a keylined block. Its offset is a colour plate slipping off the
   black one — misregistration. Neutral by default; only the three plates that
   carry the page's argument get a spot ink. */
.plate { background:var(--sheet); border:2px solid var(--rule); box-shadow:4px 4px 0 var(--rule-soft); }
.plate--blue   { box-shadow:5px 5px 0 var(--blue); }
/* Absence, drawn: no fill, no offset, broken keyline. */
.plate--void   { background:transparent; border-style:dashed; box-shadow:none; }

.tag {
  display:inline-block; font-family:var(--f-label); font-size:10px;
  letter-spacing:2px; text-transform:uppercase; line-height:1;
  padding:6px 8px 5px; background:var(--ink); color:var(--stock);
}
.tag--yellow { background:var(--yellow); color:#1B1A22; }
.tag--blue   { background:var(--blue);   color:#fff; }
.tag--void   { background:transparent; color:var(--ink-2); border:2px dashed var(--rule-soft); padding:4px 6px 3px; }

.num { font-family:var(--f-data); font-size:20px; line-height:1; color:var(--violet-ink); }
.dots { flex:1; height:0; border-bottom:2px dotted var(--rule-soft); transform:translateY(-4px); min-width:24px; }

.lede { color:var(--ink-2); max-width:58ch; }
.copy { color:var(--ink-2); max-width:64ch; }

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--f-logo); font-size:11px; line-height:1;
  padding:16px 20px; border:2px solid var(--rule); cursor:pointer;
  transition:transform .1s linear, box-shadow .1s linear;
}
.btn--go { background:var(--violet); color:#fff; box-shadow:0 5px 0 var(--rule); }
.btn--go:active { transform:translateY(5px); box-shadow:none; }
.btn--alt { background:var(--sheet); color:var(--ink); box-shadow:4px 4px 0 var(--rule-soft); }
.btn--alt:active { transform:translate(4px,4px); box-shadow:none; }
.btn .tip { width:0; height:0; border-left:7px solid currentColor; border-top:5px solid transparent; border-bottom:5px solid transparent; }

/* ---- Label strip (sticky) ---------------------------------------------
   Not a nav bar: the spine of the booklet. Wordmark plate, the numbered
   running index, and the one action. */
.strip { position:sticky; top:0; z-index:60; background:var(--stock); border-bottom:2px solid var(--rule); }
.strip .wrap { display:flex; align-items:center; gap:20px; height:62px; }
.mark { display:inline-flex; align-items:center; gap:10px; flex:none; }
.mark .rk { width:20px; height:20px; }
.mark .wm { font-family:var(--f-logo); font-size:13px; }

.index { display:flex; align-items:baseline; gap:18px; margin-left:auto; }
.index a { display:inline-flex; align-items:baseline; gap:6px; white-space:nowrap; font-family:var(--f-label); font-size:10px; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink-2); padding-block:6px; border-bottom:2px solid transparent; }
.index a i { font-family:var(--f-data); font-size:15px; font-style:normal; color:var(--ink-3); }
.index a:hover { color:var(--ink); border-bottom-color:var(--violet); }
.index a:hover i { color:var(--violet-ink); }
.strip .btn { flex:none; padding:11px 14px; font-size:9px; }
.strip .index + .btn { margin-left:20px; }
.strip .mark + .btn { margin-left:auto; }

/* ---- Cover ------------------------------------------------------------- */
.cover { padding-block:clamp(48px,6vw,78px) clamp(36px,4vw,52px); }
.brow {
  font-family:var(--f-label); font-size:10.5px; letter-spacing:2.4px;
  text-transform:uppercase; color:var(--ink-3);
  display:flex; align-items:center; gap:12px;
}
.brow::after { content:""; flex:1; height:2px; background:var(--rule-soft); }
/* Both lines are 8 characters and Press Start 2P is monospaced on an 8px grid,
   so sizing to the measure sets them flush on both edges — the title is the
   cover art. 10.9vw keeps 8 chars inside the gutters at every width; the cap
   stops it growing past the container, which tops out at --wrap. */
.cover h1 {
  font-family:var(--f-logo); font-weight:400;
  font-size:min(10.9vw,122px); line-height:1.24; letter-spacing:-.02em;
  text-transform:uppercase; margin-top:30px;
}
.cover .lede { margin-top:38px; font-size:16px; }
.cover-go { display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }

/* ---- Sheets (sections) + running head ---------------------------------- */
.sheet { padding-block:var(--sheet-pad); border-top:2px solid var(--rule); }
.sheet--tint { background:var(--stock-2); }
.run { display:flex; align-items:center; gap:14px; font-family:var(--f-label); font-size:10.5px; letter-spacing:2.2px; text-transform:uppercase; color:var(--ink-3); }
.run i { font-family:var(--f-data); font-size:19px; font-style:normal; color:var(--violet-ink); }
.run .dots { border-bottom-color:var(--rule-soft); }
.run em { font-style:normal; font-family:var(--f-data); font-size:17px; color:var(--ink-3); }
.title { font-family:var(--f-logo); font-weight:400; font-size:clamp(15px,2.1vw,22px); line-height:1.42; margin-top:22px; }
.sheet .lede { margin-top:20px; }
.body { margin-top:clamp(30px,4vw,44px); }

/* ---- 01 Ground rules — the NOTICE page --------------------------------- */
/* Every cartridge booklet opens on a hazard-banded warning. This section is the
   store-review-critical one, so it gets the loudest treatment on the page and
   everything after it stays quiet. */
.hazard { height:14px; background:repeating-linear-gradient(-45deg,var(--yellow) 0 12px,var(--ink) 12px 24px); }
.notice { border:2px solid var(--rule); background:var(--sheet); box-shadow:5px 5px 0 var(--red); }
.notice-in { padding:clamp(26px,3.4vw,40px); }
.notice .tag { margin-bottom:20px; }
.notice h2 { font-family:var(--f-logo); font-weight:400; font-size:clamp(15px,2.1vw,22px); line-height:1.42; }
.split { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:0; margin-top:32px; border-top:2px solid var(--rule); }
.split > div { padding:24px 0 4px; }
.split > div + div { border-left:2px solid var(--rule-soft); padding-left:28px; }
.split > div:first-child { padding-right:28px; }
.split h3 { font-family:var(--f-label); font-size:11px; letter-spacing:2px; text-transform:uppercase; font-weight:400; color:var(--ink); }
.split .claim { font-family:var(--f-logo); font-size:12px; line-height:1.5; margin-top:14px; }
.split p.copy { margin-top:14px; font-size:14.5px; }
.sign { margin-top:26px; padding-top:20px; border-top:2px solid var(--rule-soft); font-size:14.5px; color:var(--ink-2); }
/* The table already closes with a rule; a second one right under it reads as a
   mistake. */
.compat + .sign { border-top:none; padding-top:0; }

/* ---- 02 Get in — the drawn fork ---------------------------------------
   One field at the top, two paths, one destination. The asymmetry IS the
   information: path A is three steps, path B is none. */
.fork { --fork-gap:clamp(20px,3vw,34px); margin-top:clamp(30px,4vw,44px); display:flex; flex-direction:column; align-items:center; }
.field { width:min(460px,100%); display:flex; align-items:center; gap:12px; padding:15px 18px; background:var(--sheet); border:2px solid var(--rule); box-shadow:4px 4px 0 var(--rule-soft); }
.field .cursor { width:9px; height:19px; background:var(--violet); flex:none; }
.field .ph { font-family:var(--f-data); font-size:20px; line-height:1; color:var(--ink-2); }

/* The bar ends on each column's centre line, which sits a quarter-gap inside
   the 25% mark — otherwise the drops miss the plates they belong to. */
.junction { position:relative; width:100%; height:54px; }
.j-stem { position:absolute; top:0; left:50%; width:2px; height:26px; background:var(--rule); transform:translateX(-1px); }
.j-bar  { position:absolute; top:26px; left:calc(25% - var(--fork-gap)/4); right:calc(25% - var(--fork-gap)/4); height:2px; background:var(--rule); }
.j-drop { position:absolute; top:26px; width:2px; height:28px; background:var(--rule); }
.j-a { left:calc(25% - var(--fork-gap)/4); } .j-b { right:calc(25% - var(--fork-gap)/4); }
.junction--up .j-stem { top:28px; }
.junction--up .j-bar  { top:26px; }
.junction--up .j-drop { top:0; height:28px; }

.paths { width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--fork-gap); align-items:stretch; }
.path { display:flex; flex-direction:column; background:var(--sheet); border:2px solid var(--rule); box-shadow:4px 4px 0 var(--rule-soft); }
.path-head { display:flex; align-items:baseline; gap:12px; padding:16px 22px; border-bottom:2px solid var(--rule); background:var(--stock-2); }
.path-head .ltr { font-family:var(--f-logo); font-size:14px; color:var(--violet-ink); }
.path-head .nm { font-family:var(--f-label); font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--ink-2); }
.step { display:grid; grid-template-columns:auto 1fr; gap:0 18px; padding:20px 22px; }
.step + .step { border-top:2px solid var(--rule-soft); }
.step .n { font-family:var(--f-data); font-size:24px; line-height:1; color:var(--violet-ink); }
.step .t { font-family:var(--f-logo); font-size:11px; line-height:1.2; align-self:center; }
.step .d { grid-column:2; margin-top:11px; font-size:14.5px; line-height:1.6; color:var(--ink-2); }
/* The solo plate is a single block, so it has no step numbers. It still runs
   the full height of the fork and parks its summary line on the floor — the
   empty middle is the point, not a layout accident. Named for its shape, not
   for which side of the fork it sits on. */
.path--solo .step { display:flex; flex-direction:column; flex:1; }
.path--solo .step .t { align-self:flex-start; }
.path--solo .step .d { grid-column:auto; }
.path--solo .step .mono-note { margin-top:auto; padding-top:24px; }
.mono-note { font-family:var(--f-data); font-size:18px; color:var(--ink-3); }

.fork-or { display:none; }
.terminal { display:inline-flex; align-items:center; gap:12px; padding:14px 22px; background:var(--violet); border:2px solid var(--rule); box-shadow:4px 4px 0 var(--rule); color:#fff; font-family:var(--f-logo); font-size:12px; }
.terminal .rk { width:18px; height:23px; --rk-nose:#FFD9A0; --rk-body:#FFFFFF; --rk-window:#B8E4FF; --rk-flame-o:#E3B23A; --rk-flame-i:#FFE9A8; }

/* ---- 03 The deck — parts list ------------------------------------------ */
.parts { border-top:2px solid var(--rule); }
.part { display:grid; grid-template-columns:56px 1fr; gap:0 22px; padding:26px 0; border-bottom:2px solid var(--rule-soft); }
.ltr-plate { width:44px; height:44px; display:grid; place-items:center; background:var(--sheet); border:2px solid var(--rule); box-shadow:3px 3px 0 var(--violet); font-family:var(--f-logo); font-size:14px; }
.part-head { display:flex; align-items:baseline; gap:14px; }
.part-head h3 { font-family:var(--f-logo); font-weight:400; font-size:13px; line-height:1.3; flex:none; }
.part-head .where { font-family:var(--f-label); font-size:10px; letter-spacing:1.6px; text-transform:uppercase; color:var(--ink-3); flex:none; }
.part p { margin-top:14px; font-size:14.5px; line-height:1.62; color:var(--ink-2); max-width:66ch; }

/* ---- 04 Devices — compatibility ---------------------------------------- */
.compat { border-top:2px solid var(--rule); }
.compat-row { display:grid; grid-template-columns:190px 1fr; gap:0 26px; padding:24px 0; border-bottom:2px solid var(--rule-soft); align-items:start; }
.compat-row h3 { font-family:var(--f-logo); font-weight:400; font-size:13px; line-height:1.3; }
.compat-row .req { font-family:var(--f-data); font-size:18px; color:var(--ink-3); margin-top:9px; }
.compat-row p { font-size:14.5px; line-height:1.62; color:var(--ink-2); max-width:62ch; }

/* ---- 05 Privacy — the data sheet --------------------------------------- */
.sheetdata { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; align-items:start; }
.col-in { padding:24px 24px 28px; }
.col-in h3 { font-family:var(--f-logo); font-weight:400; font-size:12px; line-height:1.45; margin:16px 0 14px; }
.col-in p { font-size:14.5px; line-height:1.62; color:var(--ink-2); }
.plate--void .col-in h3 { color:var(--ink-2); }

/* ---- 06 FAQ — troubleshooting table ------------------------------------
   Everything visible. A troubleshooting page you have to click open twelve
   times is not a troubleshooting page. */
.trouble { border-top:2px solid var(--rule); }
.tr-head { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:0 30px; padding:12px 0; border-bottom:2px solid var(--rule); }
.tr-head span { font-family:var(--f-label); font-size:9.5px; letter-spacing:2px; text-transform:uppercase; color:var(--ink-3); }
.tr { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:0 30px; padding:20px 0; border-bottom:2px solid var(--rule-soft); }
.tr dt { font-family:var(--f-body); font-weight:600; font-size:15.5px; line-height:1.5; color:var(--ink); }
.tr dd { font-size:14.5px; line-height:1.62; color:var(--ink-2); }
.tr dd a { color:var(--violet-ink); border-bottom:2px solid var(--violet-ink); }

/* ---- Back cover -------------------------------------------------------- */
/* Always reversed, in both schemes — the back of a booklet is a solid plate. */
.back { background:var(--reverse-fill); color:var(--reverse-ink); border-top:2px solid var(--rule); padding-block:clamp(46px,6vw,70px); }
.back .mark .wm { color:var(--reverse-ink); }
.back-top { display:flex; flex-wrap:wrap; gap:38px 64px; justify-content:space-between; }
.back .blurb { color:var(--reverse-ink-2); font-size:14.5px; line-height:1.62; margin-top:16px; max-width:38ch; }
.back-cols { display:flex; flex-wrap:wrap; gap:34px 62px; }
.back-cols h4 { font-family:var(--f-label); font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--reverse-ink-2); margin-bottom:12px; }
.back-cols a { display:block; font-size:14.5px; color:var(--reverse-ink); padding:4px 0; }
.back-cols a:hover { color:var(--yellow); }
.colophon { display:flex; flex-wrap:wrap; gap:10px 30px; justify-content:space-between; margin-top:42px; padding-top:20px; border-top:2px solid var(--reverse-rule); font-family:var(--f-data); font-size:18px; color:var(--reverse-ink-2); }

/* ---- Legal pages — the back matter ------------------------------------- */
.legal { padding-block:clamp(44px,5vw,70px); }
.legal-head { max-width:68ch; }
.legal-head h1 { font-family:var(--f-logo); font-weight:400; font-size:clamp(18px,3vw,30px); line-height:1.36; margin-top:22px; text-transform:uppercase; }
.legal-head .updated { font-family:var(--f-data); font-size:19px; color:var(--ink-3); margin-top:18px; }
.legal-head .intro { margin-top:18px; color:var(--ink-2); }
.toc { margin-top:34px; border-top:2px solid var(--rule); max-width:560px; }
.toc a { display:flex; align-items:baseline; gap:14px; padding:9px 0; border-bottom:2px solid var(--rule-soft); font-family:var(--f-label); font-size:10.5px; letter-spacing:1.6px; text-transform:uppercase; color:var(--ink-2); }
.toc a i { font-family:var(--f-data); font-size:17px; font-style:normal; color:var(--violet-ink); flex:none; }
.toc a:hover { color:var(--ink); }
.toc a:hover .dots { border-bottom-color:var(--violet); }
.legal-body { max-width:68ch; margin-top:clamp(34px,5vw,54px); }
.lsec { padding-block:clamp(24px,3vw,32px); border-top:2px solid var(--rule-soft); }
.lsec:first-child { border-top:none; padding-top:0; }
.lsec h2 { display:flex; gap:14px; align-items:baseline; font-family:var(--f-logo); font-weight:400; font-size:12.5px; line-height:1.5; }
.lsec h2 .num { flex:none; }
.lsec p { margin-top:14px; color:var(--ink-2); }
.lsec dl { margin-top:16px; display:grid; gap:16px; }
.lsec dt { font-family:var(--f-label); font-size:11px; letter-spacing:1.6px; text-transform:uppercase; color:var(--ink); }
.lsec dd { margin-top:6px; color:var(--ink-2); }
.lsec a { color:var(--violet-ink); border-bottom:2px solid var(--violet-ink); }
.lsec strong { color:var(--ink); font-weight:600; }

/* ---- Responsive -------------------------------------------------------- */
/* The strip is one non-wrapping row inside a container capped at --wrap, so a
   wider viewport buys it nothing: the index either fits at 1012px or it never
   does. Tighten once, then drop it — never let the one action get clipped. */
@media (max-width:1240px){
  .index { gap:12px; }
  .index a { font-size:9px; letter-spacing:1px; }
  .index a i { font-size:14px; }
}
@media (max-width:1080px){
  .index { display:none; }
}
@media (max-width:760px){
  :root { --gut:22px; }
  .paths { grid-template-columns:1fr; }
  /* Two parallel paths can't be drawn as a fork in one column; the junction
     rules would imply sequence. Drop them and let the plates stack. */
  .junction { height:26px; }
  .j-bar, .j-drop { display:none; }
  .junction .j-stem { top:0; height:26px; }
  .fork-or { display:flex; align-items:center; gap:14px; font-family:var(--f-label); font-size:10px; letter-spacing:2.4px; text-transform:uppercase; color:var(--ink-3); }
  .fork-or::before, .fork-or::after { content:""; flex:1; height:2px; background:var(--rule-soft); }
  .split > div + div { border-left:none; border-top:2px solid var(--rule-soft); padding-left:0; padding-top:24px; }
  .split > div:first-child { padding-right:0; }
  .tr, .tr-head { grid-template-columns:1fr; }
  .tr dd { margin-top:9px; }
  .tr-head span:last-child { display:none; }
  .compat-row { grid-template-columns:1fr; gap:12px; }
  .part { grid-template-columns:1fr; gap:16px; }
  .part-head { flex-wrap:wrap; gap:8px 14px; }
}
@media (max-width:520px){
  body { font-size:15px; }
  .cover h1 { letter-spacing:-.04em; }
  .strip .wrap { gap:10px; height:56px; }
  .mark .wm { font-size:11px; }
  .strip .btn { padding:10px 11px; font-size:8px; }
  .cover-go .btn { flex:1 1 100%; }
  .brow::after { display:none; }
  .colophon { font-size:16px; }
}

/* ---- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior:auto; }
  .btn { transition:none; }
}