/* Paper / Forest design. Load after site.css and the home-only artwork styles. */
:root {
  color-scheme: light;
  --paper: #f7fbf7;
  --surface: #ffffff;
  --surface-soft: #edf4ee;
  --surface-hover: #e2eee4;
  --ink: #173d32;
  --ink-soft: #52695d;
  --biro: #23644d;
  --teal: #23644d;
  --teal-pale: #e2eee4;
  --grid: #d4e2d7;
  --marker: #d7263d;      /* a moving point on a graph: red, so it is found at a glance */
  --border-hover: #8eb49a;
  --highlighter: #e2eee4;
  --solid: #23644d;
  --on-solid: #ffffff;
  --shadow: 0 5px 18px #173d3206;
  --radius: 12px;
  --text-hero: clamp(1.875rem, 1.2rem + 2vw, 2.625rem);
  --text-2xl: clamp(1.875rem, 1.2rem + 2vw, 2.625rem);
  --focus: 3px solid var(--biro);
}
html[data-theme="forest"] {
  color-scheme: dark;
  --paper: #071e18;
  --surface: #102c23;
  --surface-soft: #183a2d;
  --surface-hover: #214b39;
  --ink: #ffffff;
  --ink-soft: #b5cbbb;
  --biro: #b6e3bd;
  --teal: #b6e3bd;
  --teal-pale: #183a2d;
  --grid: #2c4c3b;
  --marker: #ff6b6b;
  --border-hover: #729d7e;
  --highlighter: #214b39;
  --solid: #b6e3bd;
  --on-solid: #102c23;
  --shadow: 0 5px 18px #00000010;
}
body { min-height: 100svh; }
.wrap { width: min(1152px, calc(100% - 80px)); padding-inline: 0; }
h1, h2, h3, .site-header__name { color: var(--ink); letter-spacing: -.025em; }
h1 { text-wrap: balance; line-height: 1.15; }
a { text-decoration-thickness: 1px; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
:focus-visible { outline: var(--focus); outline-offset: 4px; }
.site-header, .site-footer { background: var(--paper); border-color: var(--grid); }
.site-header__inner { min-height: 88px; padding-block: 16px; gap: 16px 24px; }
.site-header__name { font-size: 30px; gap: 11px; padding: 0; }
.site-header__mark { width: 52px; height: auto; fill: currentColor; }
.site-header__name:hover { text-decoration: none; opacity: .8; }
.site-nav { gap: 26px; font-size: 15px; }
.site-nav a { font-size: inherit; font-weight: 400; white-space: nowrap; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; }
.site-footer__inner { justify-content: space-between; align-items: center; padding-block: 24px; gap: 12px 24px; }
.site-footer__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.site-footer p, .site-footer__links { margin: 0; }
.site-footer a { color: var(--ink-soft); }
.tmm-field { position: relative; isolation: isolate; --field-paper: var(--paper); --field-ink: var(--ink); --field-accent: var(--teal); color: var(--ink); }
.tmm-field[data-field-theme="forest"] { --field-paper: var(--paper); --field-ink: var(--ink); --field-accent: #a7e4ad; }
.static-field { background: radial-gradient(ellipse 640px 430px at 100% 0%, color-mix(in srgb, var(--surface-hover) 55%, transparent), transparent), var(--paper); }
.appearance-row { position: absolute; inset: 22px 0 auto; display: flex; justify-content: flex-end; align-items: center; gap: 10px; pointer-events: none; z-index: 2; }
.appearance-row > * { pointer-events: auto; }
.theme-switch { display: inline-flex; padding: 4px; gap: 2px; border: 1px solid var(--grid); border-radius: 100px; background: var(--surface-soft); }
.theme-switch button { color: var(--ink-soft); border: 0; background: transparent; border-radius: 100px; font-size: 13px; line-height: 1.2; padding: 6px 12px; min-height: 30px; }
.theme-switch button[aria-pressed="true"] { background: var(--solid); color: var(--on-solid); }
.theme-switch button:hover:not([aria-pressed="true"]) { background: var(--surface-hover); color: var(--ink); }
.tmm-field__motion { width: 42px; height: 42px; color: var(--ink); border: 1px solid var(--grid); background: var(--surface-soft); }
.tmm-field__motion:hover { background: var(--surface-hover); }
.page, .hero--inner { padding-top: 30px; padding-bottom: 90px; }
.breadcrumbs { min-height: 34px; margin: 0 0 36px; font-size: 14px; line-height: 1.6; }
.breadcrumbs a { color: var(--ink-soft); text-decoration: none; }
.breadcrumbs a:hover { color: var(--ink); text-decoration: underline; }
.breadcrumbs > span[aria-hidden] { margin-inline: 7px; opacity: .6; }
.hero--inner .breadcrumbs { margin-bottom: 52px; }
.hero--inner .hero__title {
  max-width: 960px;
  min-height: 112px;
  margin: 0 0 32px;
  /* Shared title slot keeps every qualification chooser at the same vertical position. */
}
.home-field .hero { padding: 342px 0 44px; }
.home-field .hero__title { text-align: center; margin-bottom: 32px; }
.home-field .choose__note { text-align: center; font-size: 14px; }
.tmm-field__canvas { height: 780px; }
.choose { grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); gap: 18px; }
.choose__card { border: 1px solid var(--grid); border-radius: 16px; padding: 24px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); min-width: 0; }
.choose__title { font-size: 23px; line-height: 1.2; margin: 0 0 24px; }
.choose__boards { display: grid; gap: 8px; }
.choose__boards a { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 17px; line-height: 1.25; font-weight: 400; min-height: 46px; padding: 12px 14px; background: var(--surface-soft); color: var(--ink); border: 1px solid transparent; border-radius: 9px; text-decoration: none; }
.choose__boards a::after { content: "↗"; font-size: 20px; font-weight: 400; flex: none; }
.choose__boards a:hover, .choose__boards a:focus-visible { background: var(--surface-hover); border-color: var(--border-hover); }
.choose__card--link { position: relative; display: flex; flex-direction: column; min-height: 204px; text-decoration: none; }
.choose__card--link::after { content: "↗"; display: grid; place-items: center; width: 38px; height: 38px; margin-top: auto; align-self: flex-end; border: 1px solid var(--grid); border-radius: 50%; font-size: 24px; line-height: 1; background: var(--surface-soft); color: var(--ink); }
.choose__card--link .choose__title { margin: 0 0 20px; }
.choose__card--link:hover, .choose__card--link:focus-visible { background: var(--surface-hover); border-color: var(--border-hover); }
.choose__card--link:hover .choose__title { text-decoration: none; }
.choose__card--link:hover::after { color: var(--on-solid); background: var(--solid); border-color: var(--solid); }
.choose__card--other p { font-size: 15px; line-height: 1.6; margin: 0 0 20px; }
.hub-notes { max-width: 540px; margin-top: 38px; }
.hub-notes h2 { font-size: 20px; margin-bottom: 16px; }
.hub-notes .choose__boards { list-style: none; }
.page > h1 { max-width: 980px; margin-bottom: 28px; }
.spec-code { white-space: nowrap; font-size: .7em; }
.board-bar { gap: 16px 22px; margin: 0 0 28px; }
.board-bar__note { font-size: 15px; }
.board-bar__note a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; border: 1px solid var(--grid); border-radius: 10px; background: var(--surface); color: var(--ink); line-height: 1.4; text-decoration: none; }
.board-bar__note a:hover, .board-bar__note a:focus-visible { background: var(--surface-hover); border-color: var(--border-hover); }
.board-bar__count { padding-top: 4px; }
.switch { padding: 4px; gap: 4px; border: 1px solid var(--grid); border-radius: 100px; background: var(--surface-soft); flex-wrap: wrap; }
.switch a { min-width: 0; padding: 8px 17px; border: 0; border-radius: 100px; font-size: 15px; }
.switch a + a { border: 0; }
.switch a[aria-current="page"] { background: var(--solid); color: var(--on-solid); }
.switch a:not([aria-current]):hover { background: var(--surface-hover); }
.switch a:focus-visible { outline: var(--focus); outline-offset: -2px; }
.paper-grid-scroll { border: 1px solid var(--grid); border-radius: 16px; background: var(--surface); }
.paper-grid { border-collapse: separate; border-spacing: 0; }
.paper-grid th, .paper-grid td { padding: 22px 18px; border-color: var(--grid); }
.paper-grid thead th { padding-block: 16px; border-bottom: 1px solid var(--grid); color: var(--ink-soft); background: var(--surface-soft); font-size: 14px; font-weight: 400; }
.paper-grid tbody th { font-size: 18px; }
.paper-grid tbody th a { text-decoration: none; }
.paper-grid tbody th a:hover { text-decoration: underline; }
.paper-grid tbody tr:last-child > * { border-bottom: 0; }
.is-newest th a { background: none; margin: 0; padding: 0; }
.newest-tag { width: fit-content; margin-top: 9px; padding: 3px 9px; color: var(--biro); background: var(--surface-soft); border-radius: 30px; font-size: 12px; line-height: 1.4; }
.doc-links { gap: 7px; }
.doc-link { display: inline-flex; align-items: center; padding: 9px 12px; min-height: 42px; border: 1px solid var(--grid); border-radius: 9px; background: var(--surface-soft); color: var(--ink); font-size: 14px; line-height: 1.4; text-decoration: none; }
.doc-link:hover, .doc-link:focus-visible { border-color: var(--border-hover); background: var(--surface-hover); }
.series-paper { padding: 22px; border: 1px solid var(--grid); border-radius: 14px; background: var(--surface); margin-bottom: 12px; }
.series-paper h3 { margin: 0; }
.page > .board-bar__formulae { margin-bottom: 24px; }
.series-nav a { padding: 10px 16px; border: 1px solid var(--grid); border-radius: 10px; background: var(--surface); text-decoration: none; }
.series-nav a:hover { background: var(--surface-hover); border-color: var(--border-hover); }
.strand h2 { font-size: 23px; padding-bottom: 16px; margin-top: 40px; border-bottom: 1px solid var(--grid); }
.strand h2.strand__heading { padding: 0; border: 0; }
.strand-toggle { display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; min-height: 58px; padding: 8px 0 16px; border: 0; border-bottom: 1px solid var(--grid); background: transparent; color: var(--ink); font: inherit; line-height: 1.3; letter-spacing: inherit; text-align: left; }
.strand-toggle__icon { display: grid; place-items: center; flex: 0 0 32px; height: 32px; border: 1px solid var(--grid); border-radius: 50%; background: var(--surface-soft); }
.strand-toggle__icon::before { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.strand-toggle[aria-expanded="false"] .strand-toggle__icon::before { transform: translateX(-2px) rotate(-45deg); }
.strand-toggle:hover { color: var(--biro); border-color: var(--border-hover); }
.strand-toggle:hover .strand-toggle__icon { background: var(--surface-hover); border-color: var(--border-hover); }
.sheet { align-items: center; margin: 0 0 10px; padding: 20px 22px; border: 1px solid var(--grid); border-radius: 12px; background: var(--surface); }
.sheet:hover, .sheet:focus-within { background: var(--surface); border-color: var(--border-hover); }
.sheet__name a { text-decoration: none; }
.sheet__name a:hover { text-decoration: underline; }
.sheet__meta { font-size: 14px; }
/* A practice topic has one destination: the whole bubble is a native link. */
.sheet.sheet--topic { padding: 0; }
.sheet__topic { display: block; width: 100%; min-width: 0; padding: 20px 22px; border-radius: inherit; color: var(--ink); text-decoration: none; }
.sheet__topic:hover { text-decoration: none; }
.sheet__title { font-weight: 700; }
.sheet--topic:hover, .sheet--topic:focus-within { background: var(--surface-hover); border-color: var(--border-hover); }
/* Keep all resource lists compact, while giving titles and grade badges the full
   space remaining beside the buttons rather than a fixed narrow column. */
.sheets, .mock-set { max-width: 760px; }
.page:has(.sheets) .controls { width: 100%; max-width: 760px; }
.sheet:not(:has(> .doc-links)) { grid-template-columns: minmax(0, 1fr); }
.sheet:has(> .doc-links) { grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; }
.sheet:has(> .doc-links) .sheet__name { min-width: 0; }
.sheet:has(> .doc-links) .sheet__meta { display: block; margin: 5px 0 0; }
.sheet:has(> .doc-links) > .doc-links { justify-content: flex-start; }
@media (max-width: 760px) {
  .sheet:has(> .doc-links) { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
.tag, .tier-tag { font-size: 12px; padding: 3px 8px; border-color: var(--grid); background: var(--surface-soft); border-radius: 30px; vertical-align: .1em; }
.controls { padding: 22px; border-radius: 14px; background: var(--surface); gap: 16px; }
.controls select, .controls input, .answer__input { border: 1px solid var(--grid); border-radius: 9px; background: var(--paper); }
.controls[data-focus-method="pointer"] select { outline: none; border-color: var(--grid); }
.controls__field { min-width: 0; }
.controls__field--search { flex: 0 1 320px; width: 320px; max-width: 100%; }
.jump__list a { display: block; padding: 8px 14px; border: 1px solid var(--grid); border-radius: 9px; background: var(--surface); text-decoration: none; color: var(--ink); }
.jump__list a:hover { background: var(--surface-hover); border-color: var(--border-hover); }
/* Equal-sized question squares in rows of five (Ben, 10 Oct 2026), so the challenges (16 to 20) are a row
   of their own; the rule after keeps that true if the challenges ever start elsewhere. */
.jump__list { display: grid; grid-template-columns: repeat(5, 44px); gap: 8px 6px; }
.jump__list a { display: grid; place-items: center; width: 44px; min-height: 44px; padding: 8px 0; }
.jump__list > li:not(:has(> .jump__challenge)) + li:has(> .jump__challenge) { grid-column-start: 1; }
.jump__list a.is-done { background: var(--surface-hover); border-color: var(--border-hover); }
.jump__list a[aria-current="true"], .jump__list a[aria-current="true"]:hover { background: var(--solid); border-color: var(--solid); color: var(--on-solid); }
.question__prev, .question__next { min-height: 44px; padding: 10px 20px; border: 1px solid var(--grid); border-radius: 10px; background: var(--surface-soft); color: var(--ink); line-height: 1.4; font-weight: 700; text-decoration: none; }
.question__next { background: var(--solid); border-color: var(--solid); color: var(--on-solid); }
.question__prev:hover, .question__next:hover { text-decoration: none; filter: brightness(.92); }
/* The pen-and-paper note, the squares and "Show all questions" are one panel (.jump-panel). On a wide screen it
   sits to the right of the question, in the space that was empty, and stays in view as the page scrolls, so the
   question starts straight under the title (Ben, 10 Oct 2026). Narrower than that it sits above the question.
   The breakpoint is the reading column, the gap and the five squares, plus the page's side margins. */
.jump-panel .practice-note { margin-bottom: 16px; }
.jump-panel .jump__list { margin-bottom: 12px; }
.jump-panel .jump__all { margin-bottom: 0; }
.jump-panel { margin-bottom: 28px; }
@media (min-width: 1140px) {
  .topic-content:has(.jump) { max-width: none; display: flex; align-items: flex-start; gap: 48px; }
  .topic-content:has(.jump) > .questions { order: 1; flex: 0 1 760px; min-width: 0; }
  .topic-content:has(.jump) > .jump-panel { order: 2; flex: 0 0 244px; position: sticky; top: 24px; margin: 0; }
  .jump-panel .practice-note { font-size: 15px; }
}
.button, .answer .button, .example__next { min-height: 44px; padding: 10px 20px; border: 1px solid var(--grid); border-radius: 10px; background: var(--surface-soft); color: var(--ink); line-height: 1.4; font-weight: 700; text-decoration: none; }
.button:first-child, .answer .button, .example__next { background: var(--solid); border-color: var(--solid); color: var(--on-solid); }
.button:hover { text-decoration: none; filter: brightness(.92); }
.facts, .boundaries { padding: 24px; border: 1px solid var(--grid); border-radius: 12px; background: var(--surface); }
.boundaries { max-width: 100%; overflow-x: auto; }
.boundaries table { max-width: 100%; }
.reading { max-width: 760px; margin-inline: 0; }
.reading > h1 { margin-bottom: 24px; }
/* One shared origin for every topic resource, aligned with the site header.
   Keep the heading outside .notes so its generous reading line-height cannot
   change tab heights or move the content when switching resource. */
.topic-heading { line-height: 1.55; }
.topic-heading h1 { max-width: 760px; margin: 0 0 24px; }
.topic-heading .topic-bar { margin-bottom: 28px; }
.topic-heading .topic-bar a, .topic-heading .topic-bar span { display: flex; align-items: center; min-height: 44px; line-height: 1.4; }
.topic-content { width: 100%; max-width: 760px; margin-inline: 0; display: flow-root; }
.topic-content > :first-child { margin-top: 0; }
.topic-content .notice { max-width: none; line-height: 1.55; }
.topic-content .hero__lead { font-size: 19px; line-height: 1.7; color: var(--ink-soft); }
.topic-content .facts, .topic-content .buttons { max-width: none; }
.topic-content .facts { width: 100%; }
.topic-bar { border: 0; max-width: none; margin-bottom: 26px; }
/* On a wide screen the topic bar (Notes, Practice questions, Worksheet) stands as a column on the left of the page
   and stays in view, with the page's content beside it, so the content starts straight under the title (Ben,
   10 Oct 2026). The header is dissolved into the page's grid so that its breadcrumb and title span both columns
   while the bar takes the left one. Narrower screens keep the bar as a row under the title. */
@media (min-width: 1140px) {
  .topic-page:has(.topic-bar) { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 40px; align-items: start; }
  .topic-page:has(.topic-bar) > .topic-heading { display: contents; }
  .topic-page:has(.topic-bar) > .topic-heading > .breadcrumbs { grid-column: 1 / -1; grid-row: 1; }
  /* The title starts where the content does, over it, not over the tabs (Ben, 10 Oct 2026). */
  .topic-page:has(.topic-bar) > .topic-heading > h1 { grid-column: 2; grid-row: 2; }
  .topic-page:has(.topic-bar) > .topic-heading > .topic-bar { grid-column: 1; grid-row: 3; position: sticky; top: 24px; margin: 0; }
  .topic-page:has(.topic-bar) .topic-bar ul { flex-direction: column; gap: 8px; }
  .topic-page:has(.topic-bar) .topic-bar a, .topic-page:has(.topic-bar) .topic-bar span { width: 100%; box-sizing: border-box; }
  .topic-page:has(.topic-bar) > .topic-content { grid-column: 2; grid-row: 3; }
  /* The first tab, the pen-and-paper note and the question box share a top edge: the box's own top margin goes
     below it instead, and the note loses its line's half-leading. */
  .questions > .question { margin-top: 0; margin-bottom: 32px; }
  .jump-panel .practice-note { margin-top: -4px; }
  /* A topic page may run to 1280px wide, 128px more than the rest of the site (Ben, 10 Oct 2026, on his 15"
     MacBook), so the question column keeps its 760px between the tabs and the squares. Its left edge stays
     where the header's name and every other page's content begin; the extra width is taken on the right. */
  .wrap.topic-page {
    max-width: none;
    width: min(1280px, calc(100% - 40px - max(40px, (100% - 1152px) / 2)));
    margin-left: max(40px, calc((100% - 1152px) / 2));
    margin-right: 0;
  }
}
.topic-bar ul { gap: 8px; }
.topic-bar a, .topic-bar span { padding: 8px 16px; border: 1px solid var(--grid); border-radius: 9px; background: var(--surface); font-size: 15px; margin-bottom: 0; }
.topic-bar [aria-current] { background: var(--solid); border-color: var(--solid); color: var(--on-solid); }
.topic-bar a:hover { background: var(--surface-hover); border-color: var(--border-hover); }
.notice { border: 1px solid var(--grid); background: var(--surface-soft); padding: 12px 16px; border-radius: 10px; }
.notes .hero__lead { font-size: 19px; color: var(--ink-soft); line-height: 1.7; }
.notes-section { margin-top: 42px; }
.notes-section__title { font-size: 25px; }
.notes #quadratic-graph-notes {
  border: 1px solid var(--grid);
  border-left: 4px solid var(--biro);
  border-radius: 12px;
  background: var(--surface-soft);
  padding: 20px 24px;
}
.notes #quadratic-graph-notes .notes-section__title { font-size: 21px; }
.example, .question { border: 1px solid var(--grid); border-radius: 16px; padding: 26px; background: var(--surface); box-shadow: var(--shadow); }
.example .notes-section__title { font-size: 22px; }
.example__question { padding-bottom: 12px; }
.example__controls { margin-top: 24px; }
.reveal { border-radius: 10px; background: var(--surface-soft); overflow: hidden; }
.reveal summary { padding: 13px 17px; }
.question__title { font-size: 22px; }
.question__diagram { background: #ffffff; color: #173d32; border-radius: 12px; padding: 14px; }
.question__diagram svg { margin-inline: auto; }
/* Notes diagrams sit close to the explanation they illustrate. */
.notes .question__diagram { margin-block: 12px; padding-block: 8px; }
.graph--live { max-width: 100%; padding: 24px; border: 1px solid var(--grid); border-radius: 16px; background: var(--surface); }
.graph__plot { max-width: 440px; margin-inline: auto; background: var(--paper); }
.graph__sliders, .graph__facts, .graph__hint { max-width: 440px; margin-inline: auto; }
.listen__voice { background: var(--surface); color: var(--ink); border-color: var(--grid); }
.listen__voice[aria-pressed="true"] { background: var(--solid); color: var(--on-solid); }
.listen__button, .listen__section { color: var(--biro); }
/* Keep native, keyboard-accessible menus, with the same finish as secondary buttons. */
.player__speed { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.player__speed select {
  -webkit-appearance: none;
  appearance: none;
  min-height: 44px;
  padding: 10px 34px 10px 14px;
  border: 1px solid var(--grid);
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
}
.player__speed::after {
  content: "";
  position: absolute;
  right: 14px;
  top: calc(50% - 5px);
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--biro);
  border-bottom: 2px solid var(--biro);
  transform: rotate(45deg);
  pointer-events: none;
}
.player__speed select:hover { background: var(--surface-hover); border-color: var(--border-hover); }
.key { border-color: var(--grid); background: var(--surface-soft); border-radius: 8px; }
.practice-foot { border-top: 1px solid var(--grid); padding-top: 26px; }
.paper-grid--stacked { background: var(--paper); }
.paper-grid--stacked tbody { gap: 18px; }
.paper-grid--stacked tbody tr { background: var(--surface); border-radius: 14px; }
.paper-grid--stacked tbody th { border-bottom: 1px solid var(--grid); background: var(--surface-soft); }
.paper-grid--stacked .newest-tag { margin-top: 0; }
@media (prefers-reduced-motion: no-preference) {
  .choose__card, .choose__boards a, .doc-link, .theme-switch button { transition: background-color .16s ease, border-color .16s ease; }
}
@media (max-width: 1000px) {
  .wrap { width: calc(100% - 48px); }
  .choose { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-header__name { font-size: 27px; }
  .site-header__mark { width: 47px; }
  .sheet { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 704px) {
  .paper-grid-scroll { border: 0; background: transparent; overflow: visible; }
  .paper-grid tbody tr { border-radius: 14px; background: var(--surface); }
  .paper-grid tbody th { background: var(--surface-soft); border-bottom: 1px solid var(--grid); }
  .paper-grid th, .paper-grid td { padding: 18px; }
  .paper-grid td { grid-template-columns: minmax(90px, 32%) 1fr; gap: 12px; }
  .paper-grid .newest-tag { margin-top: 0; }
}
@media (max-width: 700px) {
  .site-header__inner { flex-direction: column; gap: 15px; padding-block: 20px; }
  .site-header__name { font-size: 28px; }
  .site-nav { gap: 28px; font-size: 14px; }
}
@media (max-width: 600px) {
  .wrap { width: calc(100% - 36px); }
  /* On a phone the header is just the linked site name (Ben, 9 Oct 2026): the three section links are
     hidden, since the home page and the breadcrumbs lead everywhere. */
  .site-header nav[aria-label="Main"] { display: none; }
  .site-header__inner { min-height: 0; }
  .appearance-row { top: 18px; }
  .page, .hero--inner { padding-bottom: 56px; }
  .breadcrumbs { margin-bottom: 26px; font-size: 13px; }
  .hero--inner .breadcrumbs { margin-bottom: 28px; }
  /* On a phone the title takes only the room it needs (no shared slot) and a single-link card is one row:
     title on the left, arrow on the right (Ben, 9 Oct 2026: less to scroll past). */
  .hero--inner .hero__title { min-height: 0; font-size: 30px; margin-bottom: 20px; }
  .choose { grid-template-columns: 1fr; gap: 12px; }
  .choose__card { padding: 18px 20px; }
  .choose__title { font-size: 20px; margin-bottom: 14px; }
  .choose__card--link { min-height: 0; }
  .choose__card--link:not(.choose__card--other) { flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; }
  .choose__card--link:not(.choose__card--other) .choose__title { margin: 0; }
  .choose__card--link::after { margin-top: 0; flex-shrink: 0; width: 34px; height: 34px; font-size: 21px; }
  /* On the home page the cards sit two across, so a single-link card is as tall as its neighbour:
     its title stays at the top and the arrow at the bottom right (Ben, 9 Oct 2026). */
  .home-field .choose__card--link:not(.choose__card--other) { align-items: flex-start; }
  .home-field .choose__card--link:not(.choose__card--other)::after { align-self: flex-end; }
  /* The "Other qualifications" card keeps its description under the title, with the arrow below. */
  .choose__card--other .choose__title { margin: 0 0 10px; }
  .choose__card--other p { margin: 0 0 14px; }
  .home-field .hero { padding: 266px 0 36px; }
  .home-field .hero__title { font-size: 30px; }
  .home-field .choose { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .home-field .choose__card { padding: 16px; }
  .home-field .choose__title { font-size: 20px; }
  .home-field .choose__boards a { font-size: 15px; padding: 10px; }
  .home-field .choose__boards a::after { font-size: 17px; }
  .home-field .choose__card--other p { font-size: 13px; }
  .tmm-field__canvas { height: 620px; }
  .site-footer__inner { font-size: 14px; }
  .sheet { padding: 20px; }
  .sheet__topic { padding: 20px; }
  .sheet__meta { margin: 6px 0 0; }
  .sheet__tags:empty { display: none; }
  .controls { padding: 18px; }
  .controls__field { flex: 1 1 120px; }
  .controls__field--search { flex-basis: 100%; }
  .topic-bar a, .topic-bar span { padding: 8px 11px; font-size: 14px; }
  .example, .question { padding: 20px 16px; }
  .graph--live { padding: 18px 12px; }
  .reading { font-size: 16px; }
  .series-paper { padding: 20px; }
}
@media (max-width: 380px) {
  .site-header__name { font-size: 25px; }
  .site-header__mark { width: 42px; }
  .site-nav { gap: 18px; font-size: 13px; }
  .home-field .choose { grid-template-columns: 1fr; }
  .home-field .choose__card { padding: 22px; }
}
@media (forced-colors: active) {
  .static-field { background: Canvas; }
  .theme-switch button[aria-pressed="true"], .topic-bar [aria-current] { outline: 2px solid ButtonText; }
  .player__speed select { -webkit-appearance: auto; appearance: auto; }
  .player__speed::after { display: none; }
}