/* RAG Explained Better — design system.
   Built from scratch at the design gate; do NOT port aimemoryworks CSS.
   Source of truth: design/DESIGN-SYSTEM.md + design/pilot.html (approved 2026-07-22).

   Motif: the ranked list and the cut-off. Rank marks appear only where content is genuinely
   ordered; the cut-line marks only a real threshold; prose sits at 66ch and instruments
   (tables, code, figures) break out wider.

   Class convention is the theme's existing `is-` prefix — do not introduce a second scheme. */

/* ============================================================ 1. TOKENS */

:root {
  --paper:#F6F7F9; --surface:#FFFFFF; --ink:#14161C; --ink-2:#4A4F5C;
  --rule:#D9DCE4; --accent:#2438CE; --accent-wash:#E9EBFB;
  --pass:#1B6B4A; --warn:#B26A00; --fail:#A32235;

  /* Three type roles, assigned by job. No webfont is linked: a considered system stack beats a
     silent CDN fallback. If a face is licensed later, inline it as @font-face with a data URI. */
  --prose:"Charter","Bitstream Charter","Iowan Old Style",Georgia,serif;
  --ui:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --data:ui-monospace,"SF Mono",Menlo,"Cascadia Code",Consolas,monospace;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --measure:66ch; --shell:1120px; --radius:8px;
}

/* Light is the site default: the tokens above ship as-is regardless of OS preference. Dark is
   opt-in via the header toggle (persisted as data-theme). We deliberately do NOT switch on
   prefers-color-scheme — a reader on an OS-wide dark setting still lands on the light site first. */
:root[data-theme="dark"] {
  --paper:#0E1016; --surface:#161922; --ink:#E6E8EF; --ink-2:#9BA1B0;
  --rule:#262B36; --accent:#8898FF; --accent-wash:#1B2038;
  --pass:#5FCB9B; --warn:#E0A03A; --fail:#F0788C;
}
:root[data-theme="light"] {
  --paper:#F6F7F9; --surface:#FFFFFF; --ink:#14161C; --ink-2:#4A4F5C;
  --rule:#D9DCE4; --accent:#2438CE; --accent-wash:#E9EBFB;
  --pass:#1B6B4A; --warn:#B26A00; --fail:#A32235;
}

/* ============================================================ 2. BASE */

*, *::before, *::after { box-sizing:border-box; }

/* No element may push the page wider than the viewport. `clip` contains stray overflow without
   creating a scroll container, so position:sticky (the TOC rail) keeps working. Wide instruments
   still scroll inside their own .is-scroller; this only stops accidental sideways page scroll. */
html { overflow-x:clip; }

body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--prose); font-size:1.0625rem; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100dvh; display:flex; flex-direction:column;
  overflow-x:clip; max-width:100%;
}

/* Long URLs, code spans and unbroken tokens wrap instead of forcing a horizontal scrollbar. */
.is-prose { overflow-wrap:break-word; }

#main { flex:1 0 auto; }

h1,h2,h3,h4,h5,h6 { margin:0; line-height:1.2; text-wrap:balance; font-weight:650; }
h1 { font-size:2.4rem; letter-spacing:-.02em; }
h2 { font-size:1.5rem; letter-spacing:-.01em; }
h3 { font-size:1.25rem; }
h4 { font-size:1.0625rem; }
p, ul, ol, figure, table, pre { margin:0; }

a { color:var(--accent); text-underline-offset:.18em; text-decoration-thickness:1px; }
a:hover { text-decoration-thickness:2px; }
:where(a, button, summary, input, select, textarea):focus-visible {
  outline:2px solid var(--accent); outline-offset:3px; border-radius:2px;
}

img, svg, video { max-width:100%; height:auto; }
::selection { background:var(--accent-wash); color:var(--ink); }

.is-skip {
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--surface); color:var(--ink); font-family:var(--ui);
  padding:var(--s3) var(--s4); border:1px solid var(--rule); border-radius:0 0 var(--radius) 0;
}
.is-skip:focus { left:0; }

/* ============================================================ 3. LAYOUT */

.is-container { max-width:var(--shell); margin-inline:auto; padding-inline:var(--s5); }
.is-section { padding-block:var(--s8); }
.is-section--tight { padding-block:var(--s7); }

/* Prose is capped at the measure; instruments break out of it. Spacing comes from the flow
   rule below, never from per-element margins that collapse or double. */
.is-prose { max-width:var(--measure); }
.is-prose > * + * { margin-block-start:var(--s5); }
.is-prose > h2 { margin-block-start:var(--s7); }
.is-prose > h3 { margin-block-start:var(--s6); }
.is-prose ul, .is-prose ol { padding-inline-start:1.4em; }
.is-prose li + li { margin-block-start:var(--s2); }

/* The rail + measure frame used by every article-layout page type. */
.is-frame {
  display:grid; grid-template-columns:15rem minmax(0,1fr);
  gap:var(--s7); align-items:start; max-width:var(--shell);
  margin-inline:auto; padding-inline:var(--s5);
}

/* ============================================================ 4. TYPE UTILITIES */

.is-eyebrow {
  font-family:var(--ui); font-size:.75rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2);
}
.is-lead { font-size:1.25rem; line-height:1.5; color:var(--ink-2); max-width:var(--measure); }
.is-meta { font-family:var(--ui); font-size:.8125rem; color:var(--ink-2); }
.is-mono, .is-num { font-family:var(--data); font-variant-numeric:tabular-nums; }
.is-small { font-size:.8125rem; }
.is-dim { color:var(--ink-2); }

/* ============================================================ 5. MASTHEAD / FOOTER */

.is-masthead { border-bottom:1px solid var(--rule); background:var(--surface); }
.is-masthead__in {
  max-width:var(--shell); margin-inline:auto; padding:var(--s4) var(--s5);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4); flex-wrap:wrap;
}
.is-brand {
  font-family:var(--ui); font-weight:650; font-size:1rem;
  letter-spacing:-.015em; color:var(--ink); text-decoration:none;
}
.is-brand span { color:var(--accent); }

.is-nav__list {
  list-style:none; margin:0; padding:0;
  display:flex; gap:var(--s4); flex-wrap:wrap; align-items:baseline;
}
.is-nav__list a { font-family:var(--ui); font-size:.875rem; color:var(--ink-2); text-decoration:none; }
.is-nav__list a:hover { color:var(--ink); }
.is-nav__list .current-menu-item > a,
.is-nav__list a[aria-current] { color:var(--ink); box-shadow:inset 0 -2px 0 var(--accent); }

.is-theme-toggle {
  font-family:var(--ui); font-size:.8125rem; color:var(--ink-2);
  background:transparent; border:1px solid var(--rule); border-radius:999px;
  padding:5px 12px; cursor:pointer;
}
.is-theme-toggle:hover { color:var(--ink); border-color:var(--ink-2); }

/* Right-hand cluster: hamburger (mobile only) + theme toggle, kept adjacent at every width. */
.is-masthead__controls { display:flex; align-items:center; gap:var(--s3); }
/* The hamburger is a mobile affordance — hidden until the nav collapses (see §18). */
.is-navtoggle { display:none; }

.is-footer {
  border-top:1px solid var(--rule); margin-block-start:var(--s7);
  padding-block:var(--s7) var(--s8); color:var(--ink-2);
  font-family:var(--ui); font-size:.875rem;
  flex:none;
}
.is-footer__in { display:flex; flex-direction:column; gap:var(--s6); }
.is-footer__top {
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,2.4fr);
  gap:var(--s7); align-items:start;
}
.is-footer__brand { display:flex; flex-direction:column; gap:var(--s4); max-width:36rem; }
.is-footer__brand .is-brand { font-size:1.0625rem; }
.is-footer__navs {
  display:grid; grid-template-columns:repeat(5, minmax(0,1fr));
  gap:var(--s5);
}
.is-footer__col { display:flex; flex-direction:column; gap:var(--s3); min-width:0; }
.is-footer__col .is-eyebrow { color:var(--ink); }
.is-footer__list {
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:var(--s2);
}
.is-footer__list a {
  font-family:var(--ui); font-size:.875rem; color:var(--ink-2); text-decoration:none;
  line-height:1.4;
}
.is-footer__list a:hover { color:var(--ink); }
.is-footer__meta {
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s4);
  border-top:1px solid var(--rule); padding-block-start:var(--s5);
}
.is-footer a { color:var(--ink-2); }
.is-footer a:hover { color:var(--ink); }
/* Footer disclosure uses the brand column, not the article measure — full shell pages stay aligned. */
.is-footer .is-disclosure { max-width:none; margin:0; line-height:1.55; }

/* ============================================================ 6. THE MOTIF */

/* Cut-line: only at a real threshold (top-k boundary; symptom → measurement). Never decorative. */
.is-cutline { display:flex; align-items:center; gap:var(--s3); margin-block:var(--s5); }
.is-cutline::before, .is-cutline::after {
  content:""; height:1px; background:var(--accent); flex:1; opacity:.45;
}
.is-cutline > span {
  font-family:var(--ui); font-size:.6875rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent); white-space:nowrap;
}

/* Rank mark: real ranks only. Decorative 01/02/03 sequencing is banned by this system. */
.is-rank {
  font-family:var(--data); font-variant-numeric:tabular-nums; font-size:.8125rem;
  color:var(--accent); min-width:2.2ch; text-align:right; flex:none;
}

/* Break-out: instruments escape the measure. */
.is-breakout { max-width:none; margin-block:var(--s6); }
.is-scroller {
  overflow-x:auto; border:1px solid var(--rule);
  border-radius:var(--radius); background:var(--surface);
}

/* Raster diagrams (PNG): replace former inline SVGs. Light canvas; readable in dark mode too. */
.is-diagram {
  display:block; width:100%; height:auto;
  border:1px solid var(--rule); border-radius:var(--radius);
  background:var(--surface);
}

/* Figures ship a light and a dark raster. The viewer's toggle must win over the OS preference here
   exactly as it does for the tokens, so the switch is driven by the same [data-theme] hooks. */
.is-figure { margin:var(--s6) 0; }
.is-figure figcaption { margin-block-start:var(--s3); max-width:66ch; }
.is-figure__dark { display:none; }
/* Default (light) shows the light raster; dark is opt-in via the toggle, matching the token model. */
:root[data-theme="dark"] .is-figure__light { display:none; }
:root[data-theme="dark"] .is-figure__dark { display:block; }
:root[data-theme="light"] .is-figure__light { display:block; }
:root[data-theme="light"] .is-figure__dark { display:none; }

/* ============================================================ 7. TOC RAIL */

.is-rail { position:sticky; top:var(--s5); display:flex; flex-direction:column; gap:var(--s3); }
.is-rail ol { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--s2); }
.is-rail li { display:flex; gap:var(--s3); align-items:baseline; }
.is-rail a { font-family:var(--ui); font-size:.875rem; line-height:1.35; color:var(--ink-2); text-decoration:none; }
.is-rail a:hover { color:var(--ink); }
.is-rail li[aria-current] a { color:var(--ink); font-weight:600; }

/* ============================================================ 8. ARTICLE HEADER */

.is-article-hero { display:flex; flex-direction:column; gap:var(--s3); max-width:var(--measure); }
.is-byline {
  display:flex; flex-wrap:wrap; gap:var(--s4); align-items:baseline;
  font-family:var(--ui); font-size:.8125rem; color:var(--ink-2);
  border-block:1px solid var(--rule); padding-block:var(--s3);
  margin-block-start:var(--s4); max-width:var(--measure);
}
.is-asof { font-family:var(--data); font-size:.75rem; color:var(--ink-2); }

/* ============================================================ 9. TABLES */

.is-scroller table { border-collapse:collapse; width:100%; font-family:var(--ui); font-size:.875rem; }
.is-scroller caption {
  text-align:left; font-family:var(--ui); font-size:.8125rem; color:var(--ink-2);
  padding:var(--s3) var(--s4); border-bottom:1px solid var(--rule);
}
.is-scroller th, .is-scroller td {
  padding:var(--s3) var(--s4); text-align:left;
  border-top:1px solid var(--rule); vertical-align:top;
}
.is-scroller thead th {
  font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-2); font-weight:600; border-top:0; white-space:nowrap;
}
/* Every numeral in a table is mono and tabular. */
.is-scroller td.is-num, .is-scroller th.is-num {
  text-align:right; font-family:var(--data);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.is-scroller tbody tr.is-lead { background:var(--accent-wash); }
.is-scroller tbody tr.is-below td { color:var(--ink-2); }
.is-scroller tr.is-cutrow td { padding:0; border-top:0; }
.is-scroller tr.is-cutrow .is-cutline { margin:0; padding:var(--s2) var(--s4); }

/* ============================================================ 10. STATE PILLS */
/* Semantic colour is a separate axis from the accent, and never carries meaning alone —
   every pill contains a word. */

.is-pill {
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--ui); font-size:.75rem; font-weight:600;
  padding:2px 9px; border-radius:999px; border:1px solid currentColor; white-space:nowrap;
}
.is-pill[data-state="pass"] { color:var(--pass); }
.is-pill[data-state="warn"] { color:var(--warn); }
.is-pill[data-state="fail"] { color:var(--fail); }

/* ============================================================ 11. CODE */

.is-code {
  border:1px solid var(--rule); border-radius:var(--radius);
  overflow:hidden; background:var(--surface);
}
.is-code__bar {
  display:flex; gap:var(--s3); align-items:center; flex-wrap:wrap;
  padding:var(--s2) var(--s4); border-bottom:1px solid var(--rule);
  font-family:var(--ui); font-size:.75rem; color:var(--ink-2);
}
.is-chip {
  font-family:var(--data); font-size:.6875rem;
  padding:2px 7px; border:1px solid var(--rule); border-radius:4px;
}
.is-code pre { padding:var(--s4); overflow-x:auto; font-family:var(--data); font-size:.8125rem; line-height:1.6; }
.is-prose :not(pre) > code {
  font-family:var(--data); font-size:.875em;
  background:var(--accent-wash); padding:1px 5px; border-radius:4px;
}

/* ============================================================ 12. CALLOUTS */
/* Three kinds and no more. A `finding` carries a number and a source, or it is a `note`. */

.is-callout {
  border:1px solid var(--rule); border-radius:var(--radius);
  padding:var(--s4) var(--s5); background:var(--surface);
  display:flex; flex-direction:column; gap:var(--s2); max-width:var(--measure);
}
.is-callout[data-kind="finding"] { background:var(--accent-wash); border-color:transparent; }
.is-callout[data-kind="caution"] { box-shadow:inset 3px 0 0 var(--warn); }

.is-cite { font-family:var(--ui); font-size:.8125rem; color:var(--ink-2); }
.is-cite code { font-family:var(--data); font-size:.75rem; }

/* ============================================================ 13. FAILURE BLOCK (page type 9) */
/* The spine: symptom → detection → cause → fix, in that order. The detection step is what no
   competitor in the cluster carries, so it is never optional. */

.is-failure {
  display:flex; flex-direction:column;
  border:1px solid var(--rule); border-radius:var(--radius);
  overflow:hidden; background:var(--surface);
}
.is-failure__step {
  display:grid; grid-template-columns:8.5rem minmax(0,1fr);
  gap:var(--s4); padding:var(--s5); border-top:1px solid var(--rule);
}
.is-failure__step:first-child { border-top:0; }
.is-failure__step > .is-eyebrow { padding-block-start:.25em; }
.is-failure__step[data-kind="symptom"] { box-shadow:inset 3px 0 0 var(--fail); }
.is-failure__step[data-kind="detect"]  { box-shadow:inset 3px 0 0 var(--accent); }
.is-failure__step[data-kind="cause"]   { box-shadow:inset 3px 0 0 var(--warn); }
.is-failure__step[data-kind="fix"]     { box-shadow:inset 3px 0 0 var(--pass); }

/* ============================================================ 14. HUB ROUTER (page type 2) */
/* One row per child and nothing else. A hub that tries to be an article competes with its
   own children. The one-line promise is also the anchor text — layout and link contract are
   the same object. */

.is-router {
  display:flex; flex-direction:column; border:1px solid var(--rule);
  border-radius:var(--radius); overflow:hidden; background:var(--surface);
}
.is-router a {
  display:grid; grid-template-columns:2.5rem minmax(0,15rem) minmax(0,1fr);
  gap:var(--s4); padding:var(--s4) var(--s5); align-items:baseline;
  border-top:1px solid var(--rule); text-decoration:none; color:inherit;
}
.is-router a:first-child { border-top:0; }
.is-router a:hover { background:var(--accent-wash); }
.is-router b { font-family:var(--ui); font-weight:600; font-size:.9375rem; color:var(--accent); }
.is-router span { font-size:.9375rem; color:var(--ink-2); line-height:1.45; }

/* ============================================================ 15. FAQ */

.is-faq { display:flex; flex-direction:column; gap:var(--s3); max-width:var(--measure); }
.is-faq details {
  border:1px solid var(--rule); border-radius:var(--radius);
  background:var(--surface); padding:var(--s4) var(--s5);
}
.is-faq summary {
  cursor:pointer; font-family:var(--ui); font-weight:600; font-size:.9375rem; list-style:none;
}
.is-faq summary::-webkit-details-marker { display:none; }
.is-faq summary::after { content:" +"; color:var(--accent); font-family:var(--data); }
.is-faq details[open] summary::after { content:" \2212"; }
.is-faq details[open] summary { margin-block-end:var(--s3); }

/* ============================================================ 15b. END NAV (interlink contract) */
/* After the article: breadcrumb, site roadmap, editorial bridges, cluster siblings, next read. */

.is-endnav {
  display:flex; flex-direction:column; gap:var(--s6);
  margin-block-start:var(--s7); padding-block-start:var(--s6);
  border-top:1px solid var(--rule);
}
.is-endnav__block { display:flex; flex-direction:column; gap:var(--s3); }
.is-endnav__intro { margin:0; max-width:52ch; }
.is-endnav__router { margin:0; }

/* Hub child index: a dense, scannable directory of every page under the hub. */
.is-endnav__index {
  list-style:none; margin:0; padding:0;
  columns:2; column-gap:var(--s6);
  font-family:var(--ui); font-size:.9375rem;
}
.is-endnav__index li { break-inside:avoid; margin:0 0 var(--s3); }
.is-endnav__index a {
  display:block; line-height:1.4; text-decoration:none; color:var(--accent);
}
.is-endnav__index a:hover { color:var(--ink); }
@media (min-width:900px) { .is-endnav__index { columns:3; } }

.is-crumb {
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:var(--s2) var(--s3);
  font-family:var(--ui); font-size:.875rem;
}
.is-crumb li { display:flex; align-items:center; gap:var(--s3); }
.is-crumb li + li::before {
  content:"/"; color:var(--ink-2); font-family:var(--data); font-size:.75rem;
}
.is-crumb a { color:var(--ink-2); text-decoration:none; }
.is-crumb a:hover { color:var(--ink); }

.is-roadmap__steps {
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:var(--s2);
}
.is-roadmap__steps a {
  display:inline-flex; align-items:center;
  font-family:var(--ui); font-size:.8125rem; font-weight:600;
  padding:6px 12px; border:1px solid var(--rule); border-radius:999px;
  text-decoration:none; color:var(--ink-2); background:var(--surface);
}
.is-roadmap__steps a:hover { color:var(--ink); border-color:var(--ink-2); }
.is-roadmap__steps [aria-current="step"] a {
  color:var(--accent); border-color:var(--accent); background:var(--accent-wash);
}

.is-endnav__hub {
  display:flex; flex-direction:column; gap:var(--s2);
  font-family:var(--ui); font-size:.9375rem;
}
.is-endnav__hub a { color:var(--accent); font-weight:600; text-decoration:none; }
.is-endnav__hub a:hover { color:var(--ink); }

.is-readnext {
  border:1px solid var(--accent); border-radius:var(--radius);
  padding:var(--s5); background:var(--accent-wash);
  display:flex; flex-direction:column; gap:var(--s3);
}
.is-readnext__link {
  display:flex; flex-direction:column; gap:var(--s2);
  text-decoration:none; color:inherit;
}
.is-readnext__title {
  font-family:var(--ui); font-weight:650; font-size:1.0625rem; color:var(--accent);
}
.is-readnext__desc { font-size:.9375rem; color:var(--ink-2); line-height:1.45; max-width:52ch; }
.is-readnext__link:hover .is-readnext__title { color:var(--ink); }

/* ============================================================ 16. PAGE-TYPE MODIFIERS */
/* Set from _reb_page_type by ragexplainedbetter_body_class(). Layout follows type
   (architecture.md §8) — these adjust the frame, never re-declare component styles. */

/* Block layout (root-pillar / hub only): one width for the whole page — the shell.
   Do not pinch the hero, lead, FAQ or paragraphs to 66ch while diagrams and routers run
   full-bleed inside the same container; that reads as half-page vs full-page. */
body:is(.is-type-root-pillar, .is-type-hub) .is-prose,
body:is(.is-type-root-pillar, .is-type-hub) .is-prose > p,
body:is(.is-type-root-pillar, .is-type-hub) .is-article-hero,
body:is(.is-type-root-pillar, .is-type-hub) .is-lead,
body:is(.is-type-root-pillar, .is-type-hub) .is-byline,
body:is(.is-type-root-pillar, .is-type-hub) .is-faq,
body:is(.is-type-root-pillar, .is-type-hub) .is-callout,
body:is(.is-type-root-pillar, .is-type-hub) .is-disclosure,
body:is(.is-type-root-pillar, .is-type-hub) .is-endnav {
  max-width:none;
}

/* Verdict-first: a comparison opens with its verdict, above the fold. */
.is-type-comparison .is-verdict {
  border:1px solid var(--accent); border-radius:var(--radius);
  padding:var(--s5); background:var(--accent-wash); max-width:var(--measure);
}
/* Profiles and surveys carry volatile claims, so the as-of stamp is part of the header. */
.is-type-profile .is-byline, .is-type-flagship-survey .is-byline { border-block-end:0; }

/* Trust pages read narrower — they are read, not scanned. */
.is-type-trust .is-prose { max-width:60ch; }

/* ============================================================ 17. MOTION + PRINT */

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html { scroll-behavior:auto !important; }
}

@media print {
  .is-masthead, .is-rail, .is-theme-toggle, .is-skip { display:none; }
  body { background:#fff; color:#000; }
  .is-scroller { overflow:visible; }
}

/* ============================================================ 18. RESPONSIVE */

@media (max-width:900px) {
  .is-frame { grid-template-columns:minmax(0,1fr); gap:var(--s5); }
  .is-rail { position:static; }
  .is-rail ol { gap:var(--s3); }
  .is-failure__step { grid-template-columns:minmax(0,1fr); gap:var(--s2); }
  /* Two columns on mobile: the rank stays in its 2rem gutter; the title AND description share the
     wide 1fr column (title row 1, description row 2). Must scope by element — .is-rank is itself a
     <span>, so a blanket `.is-router span { grid-column:2 }` would shove the rank into column 2 and
     pinch the <b> title into the 2rem gutter (that was the every-word-wraps / overlap bug). */
  .is-router a { grid-template-columns:2rem minmax(0,1fr); row-gap:var(--s1); }
  .is-router a > .is-rank { grid-column:1; }
  .is-router a > b,
  .is-router a > span:not(.is-rank) { grid-column:2; }
  .is-roadmap__steps { gap:var(--s2); }
  .is-footer__top { grid-template-columns:minmax(0,1fr); gap:var(--s6); }
  .is-footer__navs { grid-template-columns:repeat(3, minmax(0,1fr)); }
  h1 { font-size:1.9rem; }
  .is-section { padding-block:var(--s7); }
}

/* Collapse the primary nav into a hamburger below tablet width. The links move into a full-width
   panel that opens under the masthead — the standard mobile menu pattern. Toggled by JS via
   data-nav="open" on .is-masthead; with JS off the panel is simply always-closed, so the footer
   sitemap remains the no-JS navigation path. */
@media (max-width:768px) {
  .is-masthead__in { padding-inline:var(--s4); gap:var(--s3) var(--s4); }

  .is-navtoggle {
    display:inline-flex; align-items:center; justify-content:center;
    width:42px; height:38px; padding:0;
    background:transparent; border:1px solid var(--rule); border-radius:var(--radius);
    color:var(--ink); cursor:pointer;
  }
  .is-navtoggle:hover { border-color:var(--ink-2); }
  .is-navtoggle__bars, .is-navtoggle__bars::before, .is-navtoggle__bars::after {
    content:""; display:block; width:18px; height:2px; background:currentColor; border-radius:2px;
    transition:transform .2s ease, opacity .2s ease;
  }
  .is-navtoggle__bars { position:relative; }
  .is-navtoggle__bars::before { position:absolute; left:0; top:-6px; }
  .is-navtoggle__bars::after  { position:absolute; left:0; top:6px; }
  /* Open → the bars fold into an ✕. */
  .is-masthead[data-nav="open"] .is-navtoggle__bars { background:transparent; }
  .is-masthead[data-nav="open"] .is-navtoggle__bars::before { transform:translateY(6px) rotate(45deg); }
  .is-masthead[data-nav="open"] .is-navtoggle__bars::after  { transform:translateY(-6px) rotate(-45deg); }

  #reb-primary-nav { order:5; flex-basis:100%; display:none; }
  .is-masthead[data-nav="open"] #reb-primary-nav { display:block; }
  #reb-primary-nav .is-nav__list {
    flex-direction:column; align-items:stretch; gap:0;
    border-top:1px solid var(--rule); margin-block-start:var(--s2);
  }
  #reb-primary-nav .is-nav__list a {
    display:block; padding:var(--s3) 0; font-size:1rem;
    border-bottom:1px solid var(--rule);
  }
  #reb-primary-nav .is-nav__list .current-menu-item > a,
  #reb-primary-nav .is-nav__list a[aria-current] { box-shadow:inset 3px 0 0 var(--accent); padding-inline-start:var(--s3); }
}

@media (max-width:600px) {
  :root { --s7:32px; --s8:48px; --s9:64px; }
  .is-container, .is-frame { padding-inline:var(--s4); }
  .is-footer__navs { grid-template-columns:repeat(2, minmax(0,1fr)); }
  h1 { font-size:1.65rem; }
  .is-lead { font-size:1.0625rem; }
}