/* ============================================================
   How To Play Cricket - field notebook stylesheet
   Palette and type tokens. Light = paper, dark = night notebook.
   ============================================================ */

:root {
  --paper:        #FFFFFF;
  --paper-2:      #F6F7F8;
  --paper-card:   #FBFBFC;
  --ink:          #101114;
  --ink-soft:     #5D6068;
  --ink-faint:    #6C6F76;
  --rule:         #E6E7EA;
  --rule-soft:    #F0F1F3;
  --red:          #9E1B1E;
  --green:        #2E5E3A;
  --teal:         #2E5E3A;
  --blue:         #33566E;
  --amber:        #A9762F;

  /* The four accents, named for what they are rather than for a slot.
     Crimson and forest carry meaning in the diagrams, wrong and right, and
     must not be reused for decoration. Ochre and slate are the neutral pair:
     ochre for the ground and anything structural, slate for eye lines, paths
     and anything analytical.

     Everything above is an alias onto these four, kept because the figures
     already reference the old slot names: --red onto crimson, --green and
     --teal onto forest, --amber onto ochre, --blue onto slate.
     Nothing on the site should introduce a fifth hue. */
  --crimson:      #9E1B1E;
  --forest:       #2E5E3A;
  --ochre:        #A9762F;
  --slate:        #33566E;
  /* The icon drawings are written against these names so the same file can
     draw them on the site and on a review page. On the site they are the four
     accents. Nothing else should use them: use the accent directly. */
  --c-crimson: var(--crimson);
  --c-forest:  var(--forest);
  --c-ochre:   var(--ochre);
  --c-slate:   var(--slate);
  --c-tint:    var(--rule-soft);
  --pencil:       #6C6F76;
  --grass:        #E4E9DE;
  --pitch:        #F7F7F8;
  --rope:         #C3C7CC;
  --seam:         #FFFFFF;
  --shadow:       rgba(16, 17, 20, 0.06);
  --tape:         transparent;

  --font-hand: 'Archivo', Helvetica, Arial, sans-serif;  /* labels and eyebrows */
  --font-ui:   'Archivo', Helvetica, Arial, sans-serif;
  --font-display: 'Archivo', Helvetica, Arial, sans-serif;
  --font-body: 'Archivo', Helvetica, Arial, sans-serif;

  /* The reading column, in em of the text's own size rather than a fixed
     number of pixels. 34rem was 544px at every font size, which is 66
     characters of 19px body copy and 86 characters of the 16px inside a
     feature chunk: the same column reads well in one place and badly in the
     other. 26em is about 66 characters in Archivo whatever size it is set
     at, because the em moves with the type. Anything a reader reads as
     sentences gets this. Figures, card grids and tables get the canvas. */
  --measure: 26em;
  --canvas: 1080px;

  /* Vertical rhythm. One ladder, roughly 1.6 apart, and every gap between
     the major blocks of a page comes off it. The section furniture had 72,
     56, 52, 44, 40, 30, 26, 18, 10 and 8 in it, which is nine picked numbers
     doing the work of six. */
  --s1: 6px;
  --s2: 10px;
  --s3: 16px;
  --s4: 26px;
  --s5: 42px;
  --s6: 68px;
  --s7: 110px;

  --radius: 8px;

  color-scheme: light;
}

/* One theme, and it is light.

   The site used to carry a full night palette, an automatic
   prefers-color-scheme switch and a Night mode button in the bar. On
   2026-08-26 the owner asked for light for every visitor, so the dark tokens
   and the toggle are gone rather than merely defaulted off: a switch nobody
   can reach is a thing that rots. color-scheme is declared unconditionally on
   :root above, so form controls, scrollbars and the space behind the page
   stay light on a phone whose system is set to dark. Git holds the dark
   palette if it is ever wanted back. */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
/* Anything an anchor can land on clears the sticky bar. Idea and figure
   anchors had no scroll margin at all, so every "see it on the page" link out
   of the diagnosis put its target 143px behind the header and the reader
   arrived at a card whose title was hidden. */
.idea[id], figure.fig[id], .subhead[id], [id^="idea-"], [id^="fig-"] {
  scroll-margin-top: 76px;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: var(--measure); }

/* ---------- the reading column ----------

   Two widths on this site and no third: the measure for anything read as
   sentences, the canvas for figures, card grids and tables. A wide screen
   then gets a composed page rather than the same page stretched, which is
   the whole of what "elegant on a desktop" means here.

   Measured on 2026-08-25 at 1440px before this went in: a figure note ran to
   115 characters a line, a quotation on the sources page to 141, and the
   search line under the subject cards to the full 1080. Nothing on a phone
   changes, because a phone is narrower than the measure at every font size
   the site uses. `_check_desktop.py` counts characters a line and fails
   anything past eighty.

   Cards are exempt by being narrower than the measure already, so this can
   be stated once and broadly rather than selector by selector. */
main p, main li, main dd, main dt,
.fig__note, .findline, footer.foot, .q blockquote p, .q figcaption, .q__use {
  max-width: var(--measure);
}
/* A figure, a plate, a table and a card grid are pictures, not sentences.
   They take the canvas and their own captions sit under them at the
   measure, which is the same rule seen from the other side. */
main figure, main .fig, main .plate, main table, main .map, main .ideas,
main .logs, main .pathway, main .quotes { max-width: none; }

/* The measure caps the words, never the box. A block that draws its own rule
   or panel and then stops at the measure leaves a hairline hanging in the
   middle of the page, which is what the five stages on the front door and
   the page footer both did the first time this rule went in. The box spans
   and the text inside it is capped instead. */
.start__stage, .start__body li, .checklist li, footer.foot { max-width: none; }
.start__body span, footer.foot > div { max-width: var(--measure); }

/* Who stands behind the ideas, on the front door rather than only on the page
   that holds them. Every checkout page in the world puts its evidence at the
   bottom and makes it a link; this site's evidence is that named players and
   coaches said these things, and until now the only way to that was the top
   nav.

   A link and not a sentence with a link in it: the whole strip is the target,
   it is 44px, and it carries its own count so it reads as something to open
   rather than as more footer text. */
.foot__proof {
  display: flex; align-items: baseline; gap: 12px;
  max-width: var(--measure); margin-top: var(--s3);
  padding: 13px 16px; min-height: 44px;
  border: 1.5px solid var(--find-b-line); border-radius: 12px;
  background: var(--find-b); color: var(--ink); text-decoration: none;
}
.foot__proof:hover {
  border-color: var(--green);
  background: color-mix(in srgb, var(--green) 20%, var(--paper));
}
.foot__proof:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.foot__proof-n {
  flex: 0 0 auto;
  font-family: var(--font-display); font-size: 1.5rem; line-height: 1;
  color: var(--green);
}
.foot__proof-t { font-size: 0.95rem; line-height: 1.45; }

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

.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 16px;
  padding: 10px 24px;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
/* The wrapper exists only for the phone, where the mark scrolls away and the
   subject row stays. Up here it dissolves and the bar is one flex row. */
.topbar__top { display: contents; }
/* The wrapper puts the toggle next to the mark in the markup; order puts it
   back on the right of the bar where it has always been. */
.topbar__mark { order: 0; }
.topbar .nav--go { order: 1; }
.topbar .nav--subjects { order: 2; }
.topbar__mark {
  font-family: var(--font-ui);
  font-size: 1.45rem; font-weight: 700;
  letter-spacing: 0.2px; white-space: nowrap;
}
.topbar .nav { display: flex; gap: 4px; flex-wrap: wrap; }
.topbar .nav--go { margin-left: auto; }
.topbar .nav--subjects {
  margin-right: 8px; padding-left: 12px;
  border-left: 1px solid var(--rule);
}
.topbar .nav a, .topbar .nav .topsearch__btn {
  font-family: var(--font-ui);
  font-size: 1.15rem;
  color: var(--ink-soft); text-decoration: none;
  padding: 3px 10px; border-radius: 20px;
}
.topbar .nav a:hover, .topbar .nav .topsearch__btn:hover { color: var(--ink); background: var(--rule-soft); }
/* the mark and the short label are a phone treatment; text only up here */
.topbar .nav__icon, .topbar .nav__short { display: none; }

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

.hero { padding: var(--s6) 0 var(--s5); }
.hero--slim { padding: var(--s5) 0 var(--s4); }
.hero__kicker {
  font-family: var(--font-hand); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.3;
  color: var(--red); margin: 0 0 var(--s2);
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 700; font-size: clamp(2.6rem, 7vw, 4.6rem);
  line-height: 1.04; margin: 0 0 var(--s3); letter-spacing: -0.038em;
  text-wrap: balance;
}
.hero__sub { font-size: 1.22rem; color: var(--ink-soft); max-width: var(--measure);
  margin: 0 0 var(--s2); }
.hero__by { font-size: 1rem; color: var(--ink-faint); }

/* ---------- section furniture ---------- */

section.band { padding: var(--s6) 0 var(--s2); }
.band + .band { border-top: 1px dashed var(--rule); }

.sectionhead { margin-bottom: var(--s4); }
.sectionhead__num {
  font-family: var(--font-hand); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.3;
  color: var(--red); display: block; margin-bottom: 8px;
}
.sectionhead h2 {
  font-family: var(--font-display); font-weight: 600;
  text-wrap: balance;
  font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1.1;
  margin: 0 0 var(--s2); letter-spacing: -0.028em;
}
.sectionhead p { color: var(--ink-soft); max-width: var(--measure); margin: 0; }

h3.subhead {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.45rem; margin: var(--s5) 0 var(--s2); letter-spacing: -0.018em;
}

/* ---------- the map ---------- */

.map { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.mapcard {
  position: relative;
  display: block; text-decoration: none; color: inherit;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 20px 20px 18px;
  box-shadow: none;
  transition: transform .16s ease, box-shadow .16s ease;
}
.mapcard:hover { transform: translate(-1px, -2px); box-shadow: 0 2px 8px var(--shadow); }
.mapcard__n {
  font-family: var(--font-hand); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.3;
  color: var(--red);
}
.mapcard h3 {
  font-family: var(--font-display); letter-spacing: -0.012em; font-size: 1.32rem; font-weight: 600;
  margin: 2px 0 8px;
}
.mapcard p { margin: 0 0 12px; font-size: 0.96rem; color: var(--ink-soft); line-height: 1.5; }
.mapcard ul { margin: 0; padding-left: 18px; font-size: 0.9rem; color: var(--ink-faint); line-height: 1.55; }
.mapcard--spine { background: var(--paper-2); border-color: var(--ink-faint); }

/* ---------- idea cards ---------- */

.ideas { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); margin: 24px 0 8px; }

.idea {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius);
  padding: 17px 19px 15px;
}
.idea--red   { border-left-color: var(--red); }
.idea--green { border-left-color: var(--green); }
.idea--amber { border-left-color: var(--amber); }
.idea--blue  { border-left-color: var(--blue); }
.idea h4 {
  font-family: var(--font-display); letter-spacing: -0.012em; font-size: 1.14rem; font-weight: 600;
  margin: 0 0 6px; line-height: 1.25;
}
.idea p { margin: 0 0 9px; font-size: 0.99rem; line-height: 1.55; }
.idea p:last-child { margin-bottom: 0; }

.who {
  display: block; font-size: 0.9rem;
  color: var(--ink-faint); line-height: 1.35; margin-top: 8px;
}
.who b { color: var(--ink-soft); font-weight: 700; }

/* level ladder */
.levels { display: flex; gap: 5px; margin-bottom: 9px; }
.lv {
  font-family: var(--font-ui); font-size: 0.95rem; line-height: 1;
  padding: 3px 8px 4px; border-radius: 20px;
  border: 1px solid var(--rule); color: var(--ink-faint);
}
.lv[data-on="1"] { border-color: var(--green); color: var(--green); font-weight: 700; }

/* ---------- pull quote ---------- */

blockquote.pull {
  margin: var(--s4) 0; padding: 4px 0 4px 22px;
  border-left: 3px solid var(--amber);
  font-family: var(--font-display); font-size: 1.28rem;
  font-style: italic; line-height: 1.45; color: var(--ink);
  /* 42rem was 672px, which is 83 characters of a 20px italic. The measure is
     in em, so a pull quote set larger than the body copy gets a column that
     is wider in pixels and the same in characters. */
  max-width: var(--measure);
}
blockquote.pull cite {
  display: block; margin-top: 9px;
  font-family: var(--font-hand); font-style: normal;
  font-size: 1.15rem; color: var(--ink-faint);
}

/* ---------- diagram frame ---------- */

.fig {
  margin: 30px 0 34px;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: none;
  overflow: hidden;
}
.fig__head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 13px 18px 10px; border-bottom: 1px dashed var(--rule);
}
.fig__label {
  font-family: var(--font-hand); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.3;
  color: var(--red);
}
.fig__title { font-family: var(--font-display); letter-spacing: -0.012em; font-weight: 600; font-size: 1.16rem; }
.fig__ctl { margin-left: auto; display: flex; gap: 7px; }
.btn {
  font-family: var(--font-ui); font-size: 1.05rem; line-height: 1;
  background: transparent; color: var(--ink-soft);
  border: 1px solid var(--rule); border-radius: 20px;
  padding: 6px 13px 7px; cursor: pointer;
}
.btn:hover { color: var(--ink); border-color: var(--ink-faint); background: var(--rule-soft); }
.btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.fig__body { padding: 10px 14px 4px; overflow-x: auto; }
.fig__notebtn { display: none; }
.lvline { display: none; }
.fig__body svg { display: block; width: 100%; height: auto; max-width: 100%; }
.fig__note {
  padding: 4px 18px 16px;
  font-size: 0.9rem; color: var(--ink-faint); line-height: 1.4;
}

/* svg text defaults */
svg text { font-family: var(--font-hand); fill: var(--ink); }
svg .t-sm { font-size: 13px; }
svg .t-md { font-size: 16px; }
svg .t-lg { font-size: 21px; }
svg .t-soft { fill: var(--ink-faint); }
svg .t-red { fill: var(--red); }
svg .t-blue { fill: var(--blue); }
svg .t-green { fill: var(--green); }
svg .t-mono { font-family: var(--font-body); font-size: 14px; }
svg .stroke-ink   { stroke: var(--ink);   fill: none; stroke-linecap: round; stroke-linejoin: round; }
svg .stroke-soft  { stroke: var(--ink-faint); fill: none; stroke-linecap: round; }
svg .stroke-red   { stroke: var(--red);   fill: none; stroke-linecap: round; stroke-linejoin: round; }
svg .stroke-blue  { stroke: var(--blue);  fill: none; stroke-linecap: round; stroke-linejoin: round; }
svg .stroke-green { stroke: var(--green); fill: none; stroke-linecap: round; stroke-linejoin: round; }
svg .fill-paper { fill: var(--paper-card); }
svg .sketch { filter: url(#sketchy); }

/* corrections list on the sources page: one paragraph per correction, so the
   heading and the footer can count them instead of stating a number that goes
   stale the moment a fourth one turns up */
p.corr { margin: 0 0 10px; }
p.corr b { color: var(--ink); }

/* Icons: one flat shape carries each drawing, ink line does the detail. Every
   one is a <use> of a symbol in the per page sprite, so a given icon exists as
   a drawing exactly once. */
.i4 { display: block; width: 100%; height: 100%; }

/* ============================================================
   Special feature: a long piece broken into marked chunks

   A feature is longer than an idea card and shorter than a page. It is
   chunked so it can be read in any order and abandoned at any point, which
   is the only honest way to put fifteen hundred words in front of a twelve
   year old. Each chunk carries its own mark, so somebody scrolling fast can
   tell what a block is before reading a word of it.

   The icons are drawn against --c-* names so the same drawing works on the
   site and on a review page. Here those names alias onto the site's four.
   ============================================================ */

.feat {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 26px 28px 24px;
  margin: 34px 0;
}
.feat__eyebrow {
  font-family: var(--font-hand); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--red); margin: 0 0 var(--s2);
}
.feat > h3 {
  font-family: var(--font-display); letter-spacing: -0.024em;
  font-size: 1.9rem; line-height: 1.12; font-weight: 700;
  margin: 0 0 12px; text-wrap: balance; max-width: 30rem;
}
.feat__stand {
  font-size: 1.08rem; line-height: 1.55; color: var(--ink-soft);
  margin: 0; max-width: var(--measure);
}
.feat__src {
  font-size: 0.86rem; line-height: 1.5; color: var(--ink-faint);
  margin: 14px 0 0; max-width: var(--measure);
}

.chunk { border-top: 1px solid var(--rule); padding-top: 20px; margin-top: 22px; }
.chunk__head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
.chunk .i4 { width: 60px; height: 60px; flex: 0 0 60px; margin-top: -6px; }
.chunk__t { min-width: 0; }
.chunk__n {
  display: block; font-family: var(--font-hand); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 4px;
}
.chunk h4 {
  font-family: var(--font-display); letter-spacing: -0.018em;
  font-size: 1.22rem; line-height: 1.22; font-weight: 700; margin: 0;
  text-wrap: balance;
}
.chunk p, .chunk li { font-size: 1rem; line-height: 1.62; }
.chunk p { margin: 0 0 12px; max-width: var(--measure); }
.chunk p:last-child { margin-bottom: 0; }
.chunk ul, .chunk ol { margin: 0 0 6px; padding-left: 21px; max-width: var(--measure); }
.chunk li { margin-bottom: 10px; }
.chunk .fig { margin: 18px 0 16px; }
.feat__pull {
  font-family: var(--font-display); font-size: 1.3rem; line-height: 1.32;
  font-weight: 700; letter-spacing: -0.02em; color: var(--red);
  margin: 0 0 14px; max-width: 26rem;
}

@media (max-width: 640px) {
  .feat { padding: 20px 16px 18px; border-radius: var(--radius); }
  .feat > h3 { font-size: 1.55rem; }
  .chunk .i4 { width: 48px; height: 48px; flex: 0 0 48px; }
  .chunk__head { gap: 11px; }
  .feat .fig { margin-left: -16px; margin-right: -16px; border-radius: 0;
               border-left: none; border-right: none; }
}

/* fig-firstover: two bars to scale, two wicket marks the same size */
.fovBarA { fill: var(--crimson); }
.fovBarB { fill: var(--slate); }
.fovDot  { fill: var(--ink); }
.fovIn   { fill: var(--paper-card); font-weight: 700; }
.fovOn   { fill: var(--paper-card); }
/* This figure is mostly text, and at 390px a 720 unit viewBox scales it to
   about half size. Its own labels are bumped there instead of the shared
   t-* classes, because every line in it sits on its own row and so has the
   room. Verified with CHECKW=390 python3 _check_labels.py. */
@media (max-width: 640px) {
  [data-fig="fig-firstover"] text { font-size: 21px; }
  [data-fig="fig-firstover"] .fovName { font-size: 25px; }
}

/* ---------- the Theo section ---------- */

.theo { background: var(--paper-2); }
.theo .sectionhead h2 { color: var(--red); }

.logs { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); margin-top: 22px; }
.log {
  background: var(--paper-card); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 15px 17px;
}
.log__date {
  font-family: var(--font-hand); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.3;
  color: var(--red);
}
.log h4 { font-family: var(--font-display); letter-spacing: -0.012em; font-size: 1.08rem; margin: 3px 0 7px; font-weight: 600; }
.log ul { margin: 0; padding-left: 17px; font-size: 0.97rem; line-height: 1.55; }
.log li { margin-bottom: 4px; }

.checklist {
  background: var(--paper-card); border: 1px solid var(--ink-faint);
  border-radius: var(--radius); padding: 20px 24px; margin-top: 26px;
  box-shadow: none;
}
.checklist h3 { font-family: var(--font-display); letter-spacing: -0.012em; font-size: 1.35rem; margin: 0 0 4px; }
.checklist > p { margin: 0 0 14px; color: var(--ink-soft); font-size: 1rem; }
.checklist ol { margin: 0; padding-left: 0; list-style: none; counter-reset: ck; }
.checklist li {
  counter-increment: ck; position: relative;
  padding: 7px 0 7px 40px; border-bottom: 1px dashed var(--rule);
  font-size: 1.03rem;
}
.checklist li:last-child { border-bottom: 0; }
.checklist li::before {
  content: counter(ck); position: absolute; left: 0; top: 7px;
  width: 26px; height: 26px; border: 1px solid var(--rule);
  border-radius: 50%; text-align: center; line-height: 25px;
  font-family: var(--font-hand); font-size: 1.05rem; color: var(--red);
}

/* ---------- pathway ---------- */

.pathway { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: 24px; }
.rung {
  background: var(--paper-card); border: 1px solid var(--rule);
  border-top: 4px solid var(--green); border-radius: var(--radius);
  padding: 18px 20px;
}
.rung--2 { border-top-color: var(--amber); }
.rung--3 { border-top-color: var(--red); }
.rung__lv {
  font-family: var(--font-hand); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.3;
  color: var(--ink-faint);
}
.rung h4 { font-family: var(--font-display); letter-spacing: -0.012em; font-size: 1.2rem; margin: 2px 0 9px; font-weight: 600; }
.rung ul { margin: 0; padding-left: 18px; font-size: 0.97rem; line-height: 1.55; }
.rung li { margin-bottom: 5px; }

/* ---------- sources ---------- */

.sources { font-size: 0.95rem; color: var(--ink-soft); }
.sources ul { padding-left: 18px; }
.sources li { margin-bottom: 7px; }

footer.foot {
  margin-top: 60px; padding: 26px 0 50px;
  border-top: 1px solid var(--rule);
  font-size: 0.95rem; color: var(--ink-faint);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ---------- phone layout ---------- */
@media (max-width: 720px) {
  body { font-size: 17px; line-height: 1.6; }

  /* The bar was 159px and sticky, which is a fifth of a phone spent on
     navigation at every scroll position and about seven screens of reading
     area over the length of the batting page. Only the five subjects are
     navigation you need while reading, so the header dissolves into the flow
     and that one row is what stays. Measured: 159 down to 56. */
  .topbar {
    display: contents;
  }
  .topbar__top {
    display: flex; align-items: center; gap: 12px;
    padding: 7px 14px 4px;
    background: var(--paper);
  }
  .topbar__mark { font-size: 1.15rem; flex: 1 1 auto;
                  display: inline-flex; align-items: center; min-height: 36px; }
  /* Never a sideways scroller: it hides the last item off the right edge,
     which is the same defect as a panning diagram, just smaller. */
  .topbar .nav--go {
    margin-left: 0; padding: 0 14px 6px; gap: 6px;
    background: var(--paper);
  }
  .topbar .nav--go a {
    white-space: nowrap; flex: 0 0 auto;
    padding: 4px 12px; min-height: 32px;
    display: inline-flex; align-items: center;
    border: 1px solid var(--rule); border-radius: 20px;
    font-size: 0.96rem;
  }
  /* The five subjects, as marks. A mark at 44 keeps its fine detail, which is
     the size the icon system's floor is measured at, and six of them across
     a phone is one row where the text version was three. The column count is
     stated rather than auto, so adding a subject wraps the strip to a second
     row until this number is changed with it. That is deliberate: a second
     row of navigation is a decision, not an accident.

     Eight since universal search arrived, which at 390px is a 44px cell
     holding a 40px mark. That is the floor exactly: the marks cannot come
     down, because under 40px their fine detail goes grey, so a ninth cell
     means either a second row or a different bar. Seven of the eight are
     subjects and the eighth is the search, which is tinted so it does not
     read as one. */
  .topbar .nav--subjects {
    position: sticky; top: 0; z-index: 50;
    display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
    margin: 0; padding: 3px 12px 2px;
    border-left: none; border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    backdrop-filter: blur(8px);
  }
  .topbar .nav--subjects a,
  .topbar .nav--subjects .topsearch__btn {
    display: flex; flex-direction: column; align-items: center; gap: 0;
    padding: 2px 2px 3px; border-radius: 10px; min-height: 44px;
    font-size: 0.7rem; line-height: 1.1; text-align: center;
  }
  .topbar .nav__icon { display: block; width: 44px; height: 44px; }
  .topbar .nav__icon svg { width: 44px; height: 44px; display: block; }
  .topbar .nav--subjects .nav__full { display: none; }
  .topbar .nav--subjects .nav__short { display: block; }
  .topbar .nav a[aria-current="page"] {
    background: var(--ink); color: var(--paper); border-color: var(--ink);
  }
  .topbar .nav--subjects a[aria-current="page"] { background: var(--rule-soft); color: var(--ink); }

  /* Cards are 53 per cent of the batting page and 65 of them are stacked one
     per row down here, so the padding is paid 65 times. 17/19 down to 13/15,
     and the grid gap from 20 to 9. */
  .ideas { gap: 9px; margin: 16px 0 6px; }
  .idea { padding: 13px 15px 12px; }
  .idea h4 { font-size: 1.08rem; margin-bottom: 4px; }

  /* Forty six of the sixty five cards are marked now, next and advanced,
     which is three pills and 33 pixels to say the idea applies to everybody.
     Those lose the row entirely. The cards that do say something get one
     line of text instead, which is a third of the height. */
  .levels { display: none; }
  .lvline {
    display: block; margin-bottom: 5px;
    font-family: var(--font-hand); font-size: 0.68rem; font-weight: 600;
    letter-spacing: 0.09em; text-transform: uppercase; color: var(--green);
  }

  /* A figure box was 585px around a 189px drawing. The note folds behind a
     tap, the head goes to one line, and the picture takes the width back. */
  .fig { margin: 18px -18px 20px; border-radius: 0; border-left: none; border-right: none; }
  .fig__head { padding: 9px 14px 8px; gap: 4px 10px; }
  .fig__label { font-size: 0.64rem; }
  .fig__title { font-size: 1rem; line-height: 1.25; }
  .fig__body { padding: 6px 6px 2px; }
  .fig__note { display: none; padding-top: 4px; }
  .fig--open .fig__note { display: block; }
  .fig__notebtn {
    display: block; width: 100%; text-align: left; cursor: pointer;
    background: none; border: none; border-top: 1px dashed var(--rule);
    padding: 10px 14px; margin: 0;
    font-family: var(--font-hand); font-size: 0.74rem; font-weight: 600;
    letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-faint);
  }
  .fig--open .fig__notebtn { color: var(--ink-soft); }

  .wrap { padding: 0 18px; }
  .hero { padding: var(--s5) 0 var(--s4); }
  .hero h1 { font-size: clamp(2.3rem, 12vw, 3.2rem); }
  .hero__sub { font-size: 1.1rem; }
  section.band { padding: var(--s5) 0 var(--s1); }

  /* one column everywhere, so nothing is squeezed */
  .map, .ideas, .logs, .pathway { grid-template-columns: 1fr; }
  blockquote.pull { font-size: 1.14rem; }
  h3.subhead { margin-top: var(--s4); }

  /* comfortable tap targets */
  .btn { min-height: 40px; padding: 9px 15px; }
  .fig__head { gap: 8px 10px; }
  .fig__ctl { margin-left: 0; width: 100%; flex-wrap: wrap; gap: 8px; }
  .printcard { padding: 20px 18px; }
}

/* On narrow screens the wide diagrams pan inside their own frame rather than
   shrinking to unreadable text. The page body itself never scrolls sideways. */
/* Diagrams ALWAYS fit their container. Never force a nested horizontal
   scroller on a phone: panning a narrow window over a wide diagram reads as
   content bleeding off the screen. Detail comes from Enlarge (zoom.js), which
   turns the diagram sideways to use the screen's long edge. */
@media (max-width: 760px) {
  .fig__head { padding-bottom: 8px; }
  .fig__ctl { margin-left: 0; width: 100%; flex-wrap: wrap; }
}

/* ============================================================
   Added for the multi-page build.
   ============================================================ */


/* current page in the nav */
.topbar .nav a[aria-current="page"] { color: var(--ink); background: var(--rule-soft); }

/* ---------- the fine register ----------

   The second icon set, at half the weight of the bold one, for the things
   there are ninety of: the fifty six causes in the diagnosis, the twenty four
   section headings, and the ten complaints. Its floor was measured the same
   way the bold set's was, on rendered strips at 40, 44, 48, 56 and 72px: at
   44px a 0.5 and a 0.6 unit stroke go grey, 0.7 holds and 0.8 is a clean thin
   line. The fine weight is 0.9, so no surface may draw one of these below
   40px, and 44 is the size the diagnosis uses. */
.i5 { display: block; width: 44px; height: 44px; flex: 0 0 44px; }

/* A section heading and its mark, side by side. The mark is 40, the floor,
   because a heading is a line of text and a 44 beside it starts competing
   with the words rather than pointing at them. */
h3.subhead { display: flex; align-items: center; gap: 12px; }
.subhead__mark { flex: 0 0 40px; }
.subhead__mark .i5 { width: 40px; height: 40px; flex: 0 0 40px; }

/* ---------- map cards carrying a live micro-diagram ---------- */
/* The five cards used to carry a hand drawn line illustration each, in the
   one uniform stroke style that was rejected, one of them still calling for a
   handwriting face that is not loaded. They carry the category icon now, so
   the front page uses the same drawings as the finder, the spine and the
   feature chunks. */
.mapcard__icon { display: block; width: 108px; height: 108px; margin: 8px 0 14px; }

/* ---------- clip: the lesson, with its source underneath ---------- */
.clip {
  margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--rule);
}
.clip__lesson { font-size: 0.96rem; line-height: 1.5; color: var(--ink-soft); margin: 0 0 6px; }
.clip__link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-hand); font-size: 1.05rem;
  color: var(--ink-faint); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.clip__link:hover { color: var(--red); border-bottom-color: var(--red); }
.clip__link svg { width: 13px; height: 13px; flex: 0 0 13px; }
.clip__src { font-size: 0.86rem; color: var(--ink-faint); }

/* ---------- the printable card ---------- */
.printcard {
  background: var(--paper-card); border: 2px solid var(--ink);
  border-radius: var(--radius); padding: 26px 30px;
  box-shadow: 0 2px 8px var(--shadow); max-width: 30rem;
}
.printcard h3 { font-family: var(--font-display); letter-spacing: -0.012em; font-size: 1.4rem; margin: 0 0 2px; }
.printcard__sub { font-size: 0.92rem; color: var(--ink-faint); margin: 0 0 16px; }
.printcard ol { margin: 0; padding-left: 0; list-style: none; counter-reset: pc; }
.printcard li {
  counter-increment: pc; position: relative; padding: 8px 0 8px 34px;
  border-bottom: 1px dashed var(--rule); font-size: 1.04rem; line-height: 1.4;
}
.printcard li:last-child { border-bottom: 0; }
.printcard li::before {
  content: counter(pc); position: absolute; left: 0; top: 9px;
  width: 22px; height: 22px; border: 1px solid var(--rule); border-radius: 50%;
  text-align: center; line-height: 21px; font-family: var(--font-hand);
  font-size: 1rem; color: var(--red);
}
.printbtn { margin-top: 14px; }

@media print {
  body { background: #fff; }
  .topbar, .fig, .band:not(.printable), footer.foot, .printbtn { display: none !important; }
  .printable { padding: 0 !important; border: 0 !important; }
  .printcard { box-shadow: none; border: 2px solid #000; max-width: 100%; page-break-inside: avoid; }
}

/* ---------- ambient looping motion, folded in from the canvas ---------- */
@keyframes ambientTrail {
  0% { stroke-dashoffset: var(--len, 400); opacity: 0; }
  8% { opacity: 1; }
  55%, 80% { stroke-dashoffset: 0; opacity: 1; }
  95%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes ambientSeam { to { transform: rotate(360deg); } }
@keyframes ambientSwing {
  0%, 55% { transform: rotate(0deg); }
  68% { transform: rotate(-52deg); }
  100% { transform: rotate(0deg); }
}
@keyframes ambientArm { to { transform: rotate(360deg); } }
@keyframes ambientPulseDot {
  0%, 100% { r: 5; opacity: .45; }
  50% { r: 8; opacity: 1; }
}
@keyframes ambientTick {
  0%, 18% { stroke-dashoffset: 28; }
  32%, 88% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 28; }
}
@keyframes ambientSweep { 0% { transform: translateX(-40%); } 100% { transform: translateX(340%); } }

.amb-trail { animation: ambientTrail 3.6s cubic-bezier(.4,0,.6,1) infinite; }
.amb-seam  { animation: ambientSeam 1.1s linear infinite; transform-origin: center; }
.amb-swing { animation: ambientSwing 3.6s cubic-bezier(.3,0,.4,1) infinite; }
.amb-arm   { animation: ambientArm 3s linear infinite; }
.amb-dot   { animation: ambientPulseDot 2.6s ease-in-out infinite; }
.amb-tick  { animation: ambientTick 4.2s ease-in-out infinite; }

/* the mind slab, with a pulse running through it */
.slab {
  /* The slab is a dark block in both themes, so its own colours must not
     invert with the page. They are declared here, on the element, rather
     than taken from the page tokens: --paper and --rule flip in dark mode
     and used to leave the heading at about 1:1 against the background. */
  --slab-bg:     #101114;
  --slab-fg:     #FFFFFF;
  --slab-soft:   #E6E7EA;
  --slab-accent: #E4756C;
  --slab-line:   color-mix(in srgb, var(--ochre) 38%, #101114);
  position: relative; overflow: hidden;
  background: var(--slab-bg); color: var(--slab-fg);
  border-radius: var(--radius); padding: 30px 34px; margin: 26px 0 8px;
}
.slab::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 26%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--slab-accent) 22%, transparent), transparent);
  animation: ambientSweep 5.5s cubic-bezier(.5,0,.5,1) infinite;
}
.slab > * { position: relative; }
.slab h3 { font-family: var(--font-display); letter-spacing: -0.012em; font-size: 1.9rem; margin: 0 0 10px; color: var(--slab-fg); }
.slab p { color: var(--slab-soft); margin: 0; max-width: 34rem; }
.slab__levers { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 16px; }
.slab__levers span {
  font-family: var(--font-hand); font-size: 1.1rem;
  padding: 5px 15px 6px; border: 1px solid var(--slab-line); border-radius: 20px; color: var(--slab-soft);
}
@media (prefers-reduced-motion: reduce) {
  .amb-trail, .amb-seam, .amb-swing, .amb-arm, .amb-dot, .amb-tick, .slab::before {
    animation: none !important;
  }
}


/* ============================================================
   Enlarge: the full-screen diagram view (zoom.js)
   ============================================================ */

.fig__body { overflow: hidden; }
.fig__body svg { width: 100%; height: auto; max-width: 100%; }

.figzoom__open {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 2px 18px 12px; padding: 8px 14px; min-height: 40px;
  font-family: var(--font-ui); font-size: 1.05rem; line-height: 1;
  color: var(--ink-soft); background: transparent;
  border: 1px solid var(--rule); border-radius: 20px; cursor: pointer;
}
.figzoom__open:hover { color: var(--ink); border-color: var(--ink-faint); background: var(--rule-soft); }
.figzoom__open svg { width: 15px; height: 15px; flex: 0 0 15px; }

.figzoom { position: fixed; inset: 0; z-index: 200; }
.figzoom[hidden] { display: none; }
.figzoom__scrim { position: absolute; inset: 0; background: var(--paper); }
.figzoom__stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.figzoom__slot {
  flex: 0 0 auto;               /* never let the stage shrink it: at 100vh wide
                                    inside a 390px flex row it would collapse */
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center; padding: 14px;
}
.figzoom__slot svg { width: 100%; height: 100%; max-height: 100%; }

/* portrait phone: turn the diagram sideways so its long edge runs down the screen */
/* turned: the element's right edge lands at the bottom of the screen, so that
   is the side that needs clearance for the control bar */
.figzoom[data-turned="1"] .figzoom__slot {
  width: 100vh; height: 100vw;
  transform: rotate(90deg);
  padding: 16px 78px 16px 16px;
}

.figzoom__bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--paper-card); border-top: 1px solid var(--rule);
}
.figzoom__bar::before {
  content: attr(data-title); flex: 1; min-width: 0;
  font-family: var(--font-ui); font-size: 1.1rem; color: var(--ink-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.figzoom__btn {
  flex: 0 0 auto; min-height: 42px; padding: 0 18px; cursor: pointer;
  font-family: var(--font-ui); font-size: 1.1rem; line-height: 1;
  color: var(--ink-soft); background: transparent;
  border: 1px solid var(--rule); border-radius: 21px;
}
.figzoom__btn--close { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ============================================================
   Sources: quotations set as the primary content, not as decoration
   ============================================================ */

.quotes { display: flex; flex-direction: column; gap: 4px; margin: 24px 0 8px; }

.q {
  margin: 0; padding: 22px 0 20px;
  border-top: 1px solid var(--rule);
}
.q:last-child { border-bottom: 1px solid var(--rule); }

.q blockquote { margin: 0 0 12px; }
.q blockquote p {
  margin: 0 0 12px;
  font-size: 1.12rem; line-height: 1.55; color: var(--ink);
  text-wrap: pretty;
}
.q blockquote p:last-child { margin-bottom: 0; }

.q--short blockquote p { font-size: 1.32rem; font-weight: 500; }

.q figcaption {
  font-size: 0.94rem; line-height: 1.5; color: var(--ink-soft);
}
.q figcaption b { color: var(--ink); font-weight: 600; }
.q__use {
  display: block; margin-top: 5px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-faint);
}
.q__use a { color: var(--red); text-decoration: none; border-bottom: 1px solid transparent; }
.q__use a:hover { border-bottom-color: var(--red); }

@media (max-width: 720px) {
  .q { padding: 18px 0 16px; }
  .q blockquote p { font-size: 1.05rem; }
  .q--short blockquote p { font-size: 1.2rem; }
}

/* ------------------------------------------------------------------
   The front door: one path, then the subjects

   The homepage used to open with the five tab finder and the map, which
   meant a reader met two navigation systems and a subject page's worth
   of writing before a sentence about cricket. It offers one thing to do
   first now, and the five stages below are one innings in the order it
   happens to you, because the order is the argument.
   ------------------------------------------------------------------ */
.lede { margin: 26px 0 0; }
.lede p { font-size: 1.08rem; line-height: 1.65; color: var(--ink-soft); margin: 0; }
.lede p b { color: var(--ink); font-weight: 600; }

.start { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.start__stage {
  display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 18px;
  padding: 26px 0; border-top: 1px solid var(--rule);
}
.start__stage:first-child { border-top: none; padding-top: 6px; }
.start__n {
  font-family: var(--font-display); font-size: 2.4rem; line-height: 1;
  color: var(--amber);
}
.start__body h3 {
  font-family: var(--font-display); font-size: 1.3rem; margin: 0 0 12px; font-weight: 400;
}
.start__body ul { list-style: none; margin: 0; padding: 0; }
.start__body li { border-top: 1px dashed var(--rule); }
.start__body li:first-child { border-top: none; }
.start__body a {
  display: block; padding: 11px 0; text-decoration: none; color: inherit;
}
.start__body a:hover b { color: var(--red); }
.start__body b { display: block; font-size: 1.02rem; font-weight: 600; }
.start__body span {
  display: block; margin-top: 3px; font-size: 0.94rem; line-height: 1.55;
  color: var(--ink-soft);
}

/* ---------- the five subject cards ----------

   A card on the front door is a door, not a summary. The bullet lists were
   twenty five more lines to read before the reader had read anything, so the
   front page variant drops them and the icon comes down from 108.

   Three arrangements of the same five cards, each drawn for the screen it is
   on rather than one of them reflowed into the others. The argument is the
   same in all three: one way of thinking, then four skills.

     phone     three marks, then two. Short names, no sentences, and the whole
               section inside one screen.
     tablet    the mind as a banner, the four skills two by two.
     desktop   the mind as a banner, the four skills in one row.

   `repeat(auto-fit, minmax(290px, 1fr))` used to do all three by itself and
   left a hole: at 1080 it made three columns for five cards, so the last row
   was two cards and a third of a row of nothing. Measured on 2026-08-25.
   A designed set of five is arranged, not flowed. */
.map--front { grid-template-columns: repeat(4, 1fr); gap: 14px; }
.map--front .mapcard { padding: 16px 18px; }
.map--front .mapcard__icon { width: 64px; height: 64px; margin: 4px 0 10px; }
.map--front .mapcard p { margin: 0; }
.mapcard__short { display: none; }

/* The mind is not a fifth skill and the section heading says so in words.
   On a wide screen it says it in layout too: a banner across the top, the
   icon big on the left, the sentence beside it at the measure. */
.map--front .mapcard--spine {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 84px minmax(0, 1fr);
  gap: 0 var(--s4); align-items: center;
  padding: var(--s4) var(--s4) var(--s4) var(--s4);
}
.map--front .mapcard--spine .mapcard__icon {
  grid-row: 1 / 4; width: 84px; height: 84px; margin: 0;
}
.map--front .mapcard--spine .mapcard__n { grid-column: 2; }
.map--front .mapcard--spine h3 { grid-column: 2; font-size: 1.5rem; margin: 2px 0 var(--s1); }
.map--front .mapcard--spine p { grid-column: 2; }

/* Between a phone and a laptop the four skills go two by two. Four across at
   900px puts each card at 205, where the sentence runs to six lines in a
   column narrower than the icon is wide. */
@media (max-width: 1023px) {
  .map--front { grid-template-columns: repeat(2, 1fr); }
}

.findline { margin: 22px 0 0; font-size: 0.96rem; color: var(--ink-soft); }
.findline a { color: var(--green); font-weight: 600; }

.hero--sub h1 { font-size: clamp(2.1rem, 7vw, 3rem); }

@media (max-width: 640px) {
  .start__stage { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 20px 0; }
  .start__n { font-size: 1.9rem; }

  /* The phone arrangement, chosen on 2026-08-25 from four that were measured
     in a real browser at 390x844. Three marks then two, on a six column grid
     so the second row is two halves and not two thirds and a hole. It takes
     the section from 1141px to 281px and from two cards on the screen to all
     five. What it gives up is the sentence and the long name, so the tile
     carries the short name the nav bar already uses. */
  .map--front { grid-template-columns: repeat(6, 1fr); gap: 8px; }
  .map--front .mapcard { grid-column: span 2; padding: 12px 10px 13px; text-align: center; }
  .map--front .mapcard:nth-child(4),
  .map--front .mapcard:nth-child(5) { grid-column: span 3; }
  .map--front .mapcard__icon { width: 48px; height: 48px; margin: 2px auto 6px; }
  .map--front .mapcard__n { font-size: 0.64rem; }
  .map--front .mapcard h3 { font-size: 0.94rem; margin: 2px 0 0; letter-spacing: -0.02em; }
  .map--front .mapcard p { display: none; }
  .mapcard__full { display: none; }
  .mapcard__short { display: inline; }

  /* the banner unwinds back into a tile like the other four */
  .map--front .mapcard--spine {
    display: block; padding: 12px 10px 13px;
  }
  .map--front .mapcard--spine .mapcard__icon { width: 48px; height: 48px; margin: 2px auto 6px; }
  .map--front .mapcard--spine h3 { font-size: 0.94rem; margin: 2px 0 0; }
}

/* The "what happened" way in, on the front door.

   It was one line of small text at the very bottom of the homepage, under
   everything, which is no way to reach the thing somebody opens the site to
   use when it went badly on Saturday. */
.band--tight { padding-top: 0; }
.askbox {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: 14px;
  padding: 22px 24px;
}
.askbox__text { flex: 1 1 300px; min-width: 0; }
.askbox__eyebrow {
  display: block; font-family: var(--font-hand); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); margin-bottom: 6px;
}
.askbox h2 { font-size: 1.4rem; margin: 0 0 6px; }
.askbox p { margin: 0; font-size: 0.98rem; line-height: 1.55; color: var(--ink-soft); }
.askbox__go { flex: 0 0 auto; display: flex; gap: 8px; flex-wrap: wrap; }
.askbox__go a {
  display: inline-flex; align-items: center; padding: 11px 18px; border-radius: 999px;
  background: var(--green); color: var(--paper); text-decoration: none;
  font-weight: 600; font-size: 0.98rem; min-height: 44px;
}
.askbox__go a:hover { background: var(--ink); }
@media (max-width: 640px) {
  .askbox { padding: 18px; gap: 16px; }
  .askbox__go { width: 100%; }
  .askbox__go a { flex: 1 1 auto; justify-content: center; }
}

/* The diagnosis sits above everything: the reader who arrives because
   Saturday went wrong is the one who most needs the site, and they were
   being asked to read an innings first. */
.band--top { padding-top: var(--s2); }

/* ---------------------------------------------------------------- plates
   A multi panel technical figure. Four panels across on a wide screen, two
   on a tablet and one on a phone, because four 200 unit panels on a 390px
   screen puts each one at 95px and the angle readings go to nothing. The
   panels are separate SVGs in a grid rather than one wide SVG for exactly
   that reason: one SVG can only shrink, a grid can reflow. */
.plate__grid{display:grid;grid-template-columns:1fr;gap:.75rem 1rem}
.plate__cell svg{width:100%;height:auto;display:block}
.plate__cap{margin:.15rem 0 0;font-size:.82rem;line-height:1.4;color:var(--ink-soft)}
@media (min-width:34rem){.plate__grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:62rem){.plate__grid{grid-template-columns:repeat(4,1fr)}}

/* The clinic. A second feature format: same component, different job. The
   Special feature takes one player's strength and works it through; the
   clinic takes one player's fault and does the same. Marked apart by the
   eyebrow colour rather than by a different shape, because they are meant to
   read as siblings and not as two unrelated boxes. */
.feat--clinic { border-color: var(--amber, var(--rule)); }
.feat--clinic .feat__eyebrow { color: var(--amber, var(--red)); }

/* A sub-head inside a chunk. Tell 15: four paragraphs in a row with nothing
   between them is a wall, and a boy cannot see the shape of it. This is a
   signpost on its own line, which is a different thing from a bold label
   glued to the front of a sentence. */
.chunk__sub {
  font-family: var(--font-hand); font-size: 0.95rem; font-weight: 700;
  color: var(--ink); margin: 18px 0 6px; letter-spacing: -0.01em;
}
.chunk__sub:first-child { margin-top: 0; }