/*
 * THE SITE ON PAPER. One theme for every page of drawmaha.app, carried into
 * the five visualizers and linked by the static pages (the build copies this
 * file to /theme.css):
 *
 *   1. Paper, ink and one accent. Warm paper for the page, near-black ink for
 *      text and the primary series, and oxblood, the chip's red deepened, as
 *      the only accent: the winning series in a chart, bet / raise, a link,
 *      the focus ring.
 *      The action triplet is bet oxblood, call green, check / fold blue.
 *   2. Two voices and the chip's mono. Newsreader (serif) for display,
 *      headings and the research body; Geist (sans) for the UI, tables, charts
 *      and captions, with tabular numerals wherever a number appears. IBM
 *      Plex Mono has two jobs, the glyph grid of the chip and inline code and
 *      commands; it is never a prose or UI voice.
 *   3. The chip is the mark: the ASCII chip turning in the top bar, a red
 *      chip with black indents, and again where the footer closes
 *      the page. Nothing else moves on load.
 *   4. Figures are titled blocks, not windows: a number, a bold title that
 *      states the finding, a one-line sub-title naming the measure and the
 *      run, the figure, a caption of at most two sentences, on a top hairline.
 *   5. Anything tabular is hairline rows, never cards. The only radii on the
 *      site are 6 px on buttons and controls; nothing casts a shadow.
 */

:root {
  color-scheme: light;

  /* the paper */
  --paper: #f7f5f0; /* the page */
  --paper-2: #efebe3; /* recessed cells, bar tracks, code */
  --paper-3: #e6e1d6; /* a deeper recess */
  --rule: #d8d2c6; /* hairlines, grid lines */
  --rule-2: #c2bbac; /* control borders */
  --card-face: #fffdf8; /* card stock, a shade lighter than the paper */

  /* the ink */
  --ink: #16140f; /* text, the primary chart series, the primary button */
  --ink-2: #4b4740; /* secondary text */
  --ink-3: #857f74; /* captions, muted series */

  /* the one accent, and the action triplet */
  --accent: #8e2038; /* oxblood, the chip's red deepened: the winning series, bet / raise, links, the focus ring */
  --accent-tint: #f0dfe3; /* the accent at its lightest: the homepage matrix's bet tint, text selection, a link's underline */
  --act-bet: var(--accent);
  --act-call: #2f7d4a;
  --act-check: #2f66a3; /* check and fold */

  /* charts: ink, accent, muted ink; a dash pattern for a fourth series */
  --series-1: var(--ink);
  --series-2: var(--accent);
  --series-3: var(--ink-3);
  --grid: var(--rule);

  /* the voices */
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Geist Sans', 'Geist', Inter, system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  /* the grid: 1160 px of content inside 40 px of page padding */
  --max: 1160px;
  --gutter: 40px;

  /* motion (see web/DESIGN.md): one curve for anything entering or settling,
     one for a thing that moves while on screen, and the press. The built-in
     keywords are too weak to read as intended; `ease` is kept only for a
     colour changing under the pointer. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --t-press: 160ms;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--paper);
  color: var(--ink);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'tnum' 1;
  overflow-x: hidden;
}

a {
  color: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

::selection {
  background: var(--accent-tint);
  color: var(--ink);
}

.wrap {
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- the top bar ------------------------------------------------- */

.top {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.top .wrap {
  display: flex;
  align-items: center;
  gap: 40px;
  height: 64px;
}

.chip-home {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.chip-home canvas {
  width: 46px;
  height: 46px;
  display: block;
}

.word {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}

.word small {
  font-size: inherit;
  font-weight: 400;
  color: var(--ink-3);
}

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
}

.navbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 10px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--ink-2);
  font: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    transform var(--t-press) var(--ease-out);
}

.navbtn:hover {
  background: var(--paper-2);
  color: var(--ink);
}

.navbtn[aria-current='page'] {
  color: var(--ink);
}

/* the page you are on: a 1 px ink line sitting on the bar's own hairline */
.navbtn[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -15px;
  height: 1px;
  background: var(--ink);
}

/* ---------- buttons ------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  padding: 9px 16px;
  border-radius: 6px;
  text-decoration: none;
  border: 1px solid var(--rule-2);
  background: var(--paper);
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s,
    color 0.15s,
    transform var(--t-press) var(--ease-out);
}

.btn:hover:not(:disabled) {
  border-color: var(--ink);
}

.btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.btn .k {
  color: var(--ink-3);
  font-weight: 400;
}

/* the one filled button on a page: the thing it asks you to do */
.btn.primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.btn.primary:hover:not(:disabled) {
  background: var(--ink-2);
  border-color: var(--ink-2);
}

/* the secondary half of a button row: no box until the pointer finds it */
.btn.quiet {
  border-color: transparent;
  background: transparent;
  color: var(--ink-2);
}

.btn.quiet:hover:not(:disabled) {
  background: var(--paper-2);
  color: var(--ink);
}

.top .btn {
  padding: 7px 14px;
  font-size: 13px;
}

/* ---------- pressing ----------------------------------------------------- */

/* Every pressable thing on the site shrinks under the finger: 3%, 160 ms,
   the strong ease-out. It is the page saying "heard you" before anything
   else happens, and it is the same on a nav item, a button, a tab, a
   segment, a radio row and a rail link so the whole site presses alike. A
   disabled control does not answer. */
.btn:active:not(:disabled),
.navbtn:active,
.view:active,
.seg button:active:not(:disabled),
.radios label:active,
.rail a:active {
  transform: scale(0.97);
}

/* ---------- the page head ------------------------------------------------ */

main {
  padding-bottom: 40px;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 400;
  margin: 0;
}

h1 {
  font-size: 52px;
  line-height: 1.06;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

h2 {
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h3 {
  font-size: 22px;
  line-height: 1.25;
  font-weight: 500;
}

h1 em,
h2 em {
  font-style: italic;
  color: inherit;
}

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  padding: 56px 0 32px;
  border-bottom: 1px solid var(--rule);
}

.page-head-copy {
  min-width: 0;
  max-width: 760px;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 14px;
}

.page-head h1 {
  max-width: 24ch;
}

.lede {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 640px;
  margin: 18px 0 0;
}

.lede b,
.lede strong {
  color: var(--ink);
  font-weight: 500;
}

.page-head .controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  padding-bottom: 4px;
}

/* the note under the lede: what run the page draws from */
.note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
  max-width: 640px;
  margin: 14px 0 0;
}

.note b {
  color: var(--ink-2);
  font-weight: 500;
}

/* the way back from a game's page to the page that grades all four: one line under the lede */
.page-head .back {
  display: inline-block;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-2);
  transition:
    color 0.15s,
    border-color 0.15s;
}

.page-head .back:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* ---------- the split: eyebrow and sentences at left, the thing at right -- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  column-gap: 24px;
  align-items: start;
}

.split-aside {
  min-width: 0;
}

.split-aside h2 {
  margin-top: 10px;
}

.split-aside p {
  margin: 14px 0 0;
  color: var(--ink-2);
  max-width: 40ch;
}

.split-main {
  min-width: 0;
}

/* a section of the page under its own head: the reading guide in rung 0 and rung 1 */
section.stop {
  padding: 96px 0 0;
}

.stop-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: end;
}

.stop-head p {
  margin: 0;
  color: var(--ink-2);
  max-width: 44ch;
}

.stop-head .eyebrow {
  margin-bottom: 14px;
}

.kicker {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 14px;
}

/* ---------- figures: titled blocks on a hairline ---------------------------- */

.panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 24px;
  margin-top: 32px;
}

figure.fig {
  margin: 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--rule);
  min-width: 0;
}

.fig.wide {
  grid-column: 1 / -1;
}

.fig-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 14px;
}

.fig-n {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}

.fig-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-wrap: balance;
}

.fig-sub {
  font-size: 13px;
  color: var(--ink-3);
}

.fig-sub b {
  color: var(--ink-2);
  font-weight: 500;
}

.fig-body {
  min-width: 0;
}

.fig-body svg {
  display: block;
  width: 100%;
  height: auto;
}

.fig svg text {
  font-family: var(--sans);
}

.fig-cap {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
  margin: 10px 0 0;
  max-width: 640px;
}

.fig-cap b {
  color: var(--ink-2);
  font-weight: 500;
}

/* field/value rows inside a figure */
.fields {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}

.fields li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  line-height: 1.35;
}

.fields li span:first-child {
  color: var(--ink-3);
}

.legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  line-height: 1.3;
  color: var(--ink-2);
  margin: 14px 0 10px;
}

.legend .item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.legend .swatch {
  width: 14px;
  height: 2px;
  border-radius: 1px;
}

/* ---------- hairline rows ------------------------------------------------ */

table.hair,
.rows {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

table.hair th {
  text-align: left;
  font-weight: 500;
  color: var(--ink-3);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0 12px 10px 0;
  border-bottom: 1px solid var(--ink);
}

table.hair td,
.rows td {
  padding: 14px 12px 14px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  color: var(--ink-2);
}

table.hair td.k {
  color: var(--ink);
  font-weight: 500;
}

table.hair td.n {
  color: var(--ink);
}

table.hair td.r,
table.hair th.r {
  text-align: right;
  padding-right: 0;
  padding-left: 14px;
}

table.hair tr.dim td {
  color: var(--ink-3);
}

.rows {
  margin: 26px 0 0;
}

.rows tr:first-child td {
  border-top: 1px solid var(--rule);
}

.rows .g {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.2;
  color: var(--ink);
  width: 300px;
  padding-right: 24px;
}

.rows .n {
  width: 34px;
  font-size: 12px;
  color: var(--ink-3);
}

.rows .p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
  padding-left: 26px;
}

.rows .s {
  text-align: right;
  font-size: 12px;
  color: var(--ink-3);
  white-space: nowrap;
  padding-left: 20px;
}

.rows .s a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-2);
}

.rows .s a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.rows tr.pending .g,
.rows tr.pending .n {
  color: var(--ink-3);
}

/* ---------- views: the tabs under the page head -------------------------- */

.views {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--rule);
  margin-top: 32px;
  flex-wrap: wrap;
}

.view {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  text-align: left;
  padding: 0 0 12px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--ink-3);
  font-size: 14px;
  transition:
    color 0.15s,
    border-color 0.15s,
    transform var(--t-press) var(--ease-out);
}

.view:hover {
  color: var(--ink);
}

.view[aria-selected='true'],
.view.current {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.view b {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
}

.view span {
  font-size: 12px;
  color: var(--ink-3);
}

/* the footnote under a view */
.foot {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 100ch;
  margin: 28px 0 0;
}

/* ---------- the segmented control ----------------------------------------- */

.seg {
  display: inline-flex;
  border: 1px solid var(--rule-2);
  border-radius: 6px;
  overflow: hidden;
  font-size: 13px;
}

.seg button {
  padding: 6px 12px;
  color: var(--ink-2);
  font-weight: 500;
  background: transparent;
  border-right: 1px solid var(--rule-2);
  transition:
    background 0.15s,
    color 0.15s,
    transform var(--t-press) var(--ease-out);
}

.seg button:last-child {
  border-right: 0;
}

.seg button:hover:not(:disabled) {
  background: var(--paper-2);
  color: var(--ink);
}

.seg button[aria-pressed='true'] {
  background: var(--ink);
  color: var(--paper);
}

.seg button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ---------- radios: one choice from a short list -------------------------- */

.radios {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
}

.radios label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  margin: 0 -8px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--ink-2);
  transition:
    background 0.15s,
    color 0.15s,
    transform var(--t-press) var(--ease-out);
}

.radios label:hover {
  background: var(--paper-2);
  color: var(--ink);
}

.radios label:has(input:checked) {
  color: var(--ink);
}

.radios input {
  margin: 0;
  accent-color: var(--accent);
}

/* ---------- stats: a number with its name ----------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 24px;
  border-top: 1px solid var(--rule);
  padding-top: 16px;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.stat dt,
.stat .k {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.stat dd,
.stat .v {
  margin: 0;
  font-size: 28px;
  line-height: 1.1;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.stat small {
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-3);
}

/* ---------- the contents rail ----------------------------------------------- */

.rail {
  position: sticky;
  top: 24px;
  align-self: start;
  font-size: 13px;
  line-height: 1.4;
}

.rail .k {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 10px;
}

.rail ol,
.rail ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--rule);
}

.rail li {
  margin: 0;
}

.rail a {
  display: block;
  padding: 5px 0 5px 14px;
  margin-left: -1px;
  border-left: 1px solid transparent;
  color: var(--ink-3);
  text-decoration: none;
  transition:
    color 0.15s,
    border-color 0.15s,
    transform var(--t-press) var(--ease-out);
}

.rail a:hover {
  color: var(--ink);
}

.rail a[aria-current='true'] {
  color: var(--ink);
  border-left-color: var(--ink);
}

/* ---------- the footer --------------------------------------------------- */

footer {
  border-top: 1px solid var(--rule);
  margin-top: 96px;
  padding: 48px 0 40px;
  font-size: 14px;
  color: var(--ink-2);
}

.foot-cols {
  display: grid;
  grid-template-columns: 4fr 2fr 2fr 2fr;
  gap: 24px;
}

footer .chip-end {
  display: block;
  width: 80px;
  height: 80px;
}

footer .chip-end canvas {
  width: 80px;
  height: 80px;
  display: block;
}

.foot-about p {
  margin: 14px 0 0;
  max-width: 340px;
  line-height: 1.5;
  color: var(--ink-3);
}

footer h4 {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

footer li {
  margin-bottom: 8px;
}

footer a {
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.15s;
}

footer a:hover {
  color: var(--ink);
}

.foot-line {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  color: var(--ink-3);
  font-size: 13px;
}

/* ---------- a playing card: the bleed pip --------------------------------- */

/* Every card on the site is one drawing at whatever size its surface sets in
   --w: the rank in the top-left in Geist 600, sized to read beside the pip,
   and one suit glyph too big for the card, cropped by its own lower-right
   edge, in the suit's ink at full strength. The card is mostly colour, which
   is what makes a hand legible across a table. The suits wear the site's
   inks: spades ink, hearts the oxblood, and the two minor suits borrow the
   action triplet, diamonds the check-blue and clubs the call-green; a suit's
   name carries no meaning in any of the games, so an ink shared with call
   text is a shared ink, not a shared meaning. A game of ranks and no suits
   (Kuhn, Leduc) sets .letter and draws its rank again instead, large in the
   serif, set low and right and barely cropped. A surface's own class sets
   --w and, where its box is not a card's 2.5 : 3.5, its own height. The rank
   has a floor so a face smaller than any the site sets would still read:
   15 px is 0.8 of a 19 px card, and the smallest card drawn with this rule
   is the 24 px hand in a line of text, so no card reaches it today. The one
   face narrower than that, the solver's deck tile (a column of its grid,
   14 px wide at the narrowest), overrides this rule with a clamp of its own
   whose floor is the same 15 px: there the rank is wider than its tile by
   design and the tile's sheet says why. A ten is T, so every rank is one
   character and none runs past the right edge.
   The rank and the pip are the card's own <b> and <i>, its direct children:
   every rule below reaches them through the child combinator, so an element
   a surface nests inside a card for its own purpose (the solver's deck tile
   carries a pot-lift bar whose fill is an <i>) is never drawn as a pip. */
.cardface {
  --w: 52px;
  position: relative;
  display: inline-block;
  flex: none;
  overflow: hidden;
  width: var(--w);
  height: calc(var(--w) * 1.385);
  border-radius: 6px;
  border: 1px solid var(--rule-2);
  background: var(--card-face);
  color: var(--ink);
  line-height: 1;
  vertical-align: middle;
}

.cardface > b {
  position: absolute;
  left: calc(var(--w) * 0.1);
  top: calc(var(--w) * 0.09);
  font: 600 max(15px, calc(var(--w) * 0.8)) / 1 var(--sans);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.cardface > i {
  position: absolute;
  right: calc(var(--w) * -0.28);
  bottom: calc(var(--w) * -0.44);
  font-style: normal;
  font-size: calc(var(--w) * 1.05);
  line-height: 1;
}

.cardface.su-s > i {
  color: var(--ink);
}

.cardface.su-h > i {
  color: var(--accent);
}

.cardface.su-d > i {
  color: var(--act-check);
}

.cardface.su-c > i {
  color: var(--act-call);
}

/* a rank-only game: the rank itself, large in the serif in the card's own ink,
   set low and right and barely cropped; letters differ too much in shape to
   survive the pip's crop (a cropped Q is an O) */
.cardface.letter > i {
  right: calc(var(--w) * 0.05);
  bottom: calc(var(--w) * -0.18);
  font: 500 calc(var(--w) * 0.8) / 1 var(--serif);
}

/* face down is the chip's oxblood pinstripe; a card not yet dealt is a dashed recess */
.cardface.back {
  background:
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--accent) 55%, transparent) 0 1px, transparent 1px 6px),
    var(--paper-2);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--rule-2));
}

.cardface.empty {
  border-style: dashed;
  background: var(--paper-2);
}

/* ---------- narrow -------------------------------------------------------- */

@media (max-width: 1240px) {
  .top .wrap {
    gap: 24px;
  }

  h1 {
    font-size: 44px;
  }
}

@media (max-width: 1024px) {
  .top .btn {
    display: none;
  }

  .page-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .split,
  .panels {
    grid-template-columns: minmax(0, 1fr);
  }

  .stop-head {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .rail {
    position: static;
  }

  .foot-cols {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  :root {
    --gutter: 20px;
  }

  .top .wrap {
    height: auto;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .word {
    display: none;
  }

  .nav {
    margin-left: 0;
    flex-wrap: wrap;
    gap: 0;
  }

  .navbtn[aria-current='page']::after {
    display: none;
  }

  h1 {
    font-size: 36px;
  }

  .lede {
    font-size: 18px;
  }

  .rows .g {
    width: auto;
    font-size: 19px;
  }

  .rows .p {
    padding-left: 14px;
  }

  .foot-cols {
    grid-template-columns: 1fr;
  }

  .foot-line {
    flex-direction: column;
    gap: 8px;
  }
}

/* Reduced motion means fewer and gentler, not none: colour still changes so a
   state change is still legible; nothing travels or scales. The chip is drawn
   once (mark.ts reads the same query). */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .btn:active:not(:disabled),
  .navbtn:active,
  .view:active,
  .seg button:active:not(:disabled),
  .radios label:active,
  .rail a:active {
    transform: none;
  }
}