/* Generated by scripts/build.ts from assets/fonts/. Self-hosted, same-origin. */

@font-face {
  font-family: "Estedad";
  src: url("fonts/Estedad[wght].woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200D, U+2010-2027, U+FB50-FDFF, U+FE70-FEFF;
}

/* ═══════════════════════════════════════════════════════════════════════════════════
   @font-face is NOT declared here. scripts/build.ts generates it from whatever actually
   exists in assets/fonts/, and prepends it to the stylesheet it emits.

   Why: a hardcoded @font-face for a file that is not present makes the browser request it and
   fail — three 404s per page load, measured in the console, for a font nobody has. Generating
   the rules means zero requests when the directory is empty and correct rules the moment a
   .woff2 is dropped in, with no code change. See assets/fonts/README.md.
   ═══════════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════════
   راهنمای سه سال اول — stylesheet

   Direction: the subject is a recorded lecture series that argues almost entirely in month
   boundaries. So the organising object is a measuring rule, not a grid of cards, and the
   palette is ink-indigo structure on warm chalk with saffron used once — only ever to mark
   "you are here". Teal belongs to evidence. Clay belongs to the safety boundary and nothing
   else. A colour that means one thing keeps meaning it.

   Typography is self-hosted Estedad (see the @font-face block above), a geometric Persian face
   under SIL OFL 1.1, with the platform Arabic face behind it. Nothing is fetched from another
   origin, which is what keeps the offline mode honest.
   ═══════════════════════════════════════════════════════════════════════════════════ */

:root {
  /* Structure */
  --ink: #183e35;
  --ink-2: #244b3f;
  --ink-3: #486954;

  /* Ground */
  --hero-surface: #eeece2;
  --accent-solid: #244b3f;
  --accent-on: #fffefa;
  --button-icon-filter: brightness(0) invert(1);
  --icon-filter: invert(22%) sepia(14%) saturate(1090%) hue-rotate(104deg) brightness(92%);
  --paper: #f8f7f2;
  --paper-2: #efeee7;
  --paper-3: #e3e3d8;
  --card: #fffefa;

  /* Text */
  --text: #263d34;
  --text-2: #59675e;
  /* Darkened from #6f7788, which measured 3.5:1 on the teal evidence card — below AA. */
  --text-3: #5e6b60;

  /* Accents — each has exactly one job */
  /* Text-safe saffron: clears 4.5:1 on paper, card AND the teal evidence card, which is where
     .source-caveat sits. The brighter value below is for shapes, not words. */
  --saffron: #865e27; /* "you are here", and nothing else */
  /* Graphical-only saffron for the ruler's active band and the toggle. Large filled shapes
     need 3:1, not 4.5:1, so the signature moment keeps its vividness. Never use for text. */
  --saffron-bright: #b99253;
  --saffron-soft: #f1e8d5;
  --teal: #356951; /* evidence and provenance */
  --teal-soft: #e8eee5;
  --clay: #8f3229; /* safety boundary only */
  --clay-soft: #f3ddd9;

  --line: #e1e3d9;
  --line-strong: #b5bdb1;

  /* Semantic TEXT roles, separate from the structure and ground tokens above.
     They exist because --ink-* is structure and --paper is ground: both flip to their dark
     counterparts under prefers-color-scheme, so using one as a text colour silently inverts it.
     Measured in dark mode before this existed: --ink-2 as link text 1.14:1, --paper as the
     current nav label 1.01:1 — invisible, and passing in light mode the whole time.
     A token named for its ROLE cannot make that mistake. Light values are identical to what
     they replace, so light mode is unchanged. */
  --link: #244b3f; /* link text */
  --text-strong: #244b3f; /* emphasis text, and link hover on cards */
  /* Text on the always-dark chrome: header, footer, offline panel. These get NO dark-mode
     counterparts on purpose — those surfaces are dark in BOTH themes, so their foreground is
     light either way. Redefining one per theme is exactly what broke the nav label.
     Three steps replace eight near-identical greys that were scattered as literals
     (#eae7df #cfd4de #dfe3ea #cfd6e2 #b6bdcb #9aa4b8 #8d97a9) — differences the eye does not
     resolve, which only cost consistency. Ratios are against --ink light / --ink dark. */
  --on-ink: #f8f7f2; /* primary   — 13.9:1 / 16.0:1 */
  --on-ink-2: #cfd4de; /* secondary — 10.5:1 / 12.0:1 */
  --on-ink-3: #9aa4b8; /* tertiary  —  6.2:1 /  7.1:1 */
  --on-ink-max: #fff; /* the one place maximum contrast is wanted: skip link, hover */
  --on-ink-clay: #e8b3aa; /* the safety line in the footer — clay, but readable on ink */
  --on-ink-saffron: #e2a253; /* footer link hover. Equal to dark --saffron by eye, but it must
                                NOT follow the theme: the footer is dark in both. */
  /* The update notice is its own fixed surface — a saffron button on dark chrome — so it needs
     its own pair rather than borrowing --saffron-bright, which flips per theme. */
  --btn-accent: #d98a2c;
  --on-btn-accent: #14203a;
  /* Text on the saffron-soft conflict panel. This one DOES flip, because --saffron-soft does. */
  --on-saffron-soft: #5c3a06;

  /* Boundaries of interactive CONTROLS — pills, inputs, selects. WCAG 1.4.11 asks 3:1 of the
     visual information that identifies a component and its states, and --line-strong measured
     1.82:1 light / 1.83:1 dark on these: the outline that says "this is pressable" was fainter
     than the text rule it sits beside. The hover value is a state change, which the same
     criterion covers — it was 2.76:1 in dark.
     Structural hairlines (.guidance, .pager, .tile, .source-panel) deliberately keep --line
     and --line-strong: they are decoration, which 1.4.11 exempts, and dragging them to 3:1
     would turn the quiet rules this design is built on into boxes. */
  --control-border: #8f8878; /* 3.47:1 on card, 3.15:1 on paper */
  --control-border-hover: #486954; /* 7.44:1 / 6.75:1 */
  /* Same job, but for controls sitting on the always-dark header, so it is one value for both
     themes like the rest of the on-ink family. 14% white measured 1.5:1 — the outline of a
     button, fainter than the hairline under a paragraph. 40% clears 3:1 on both inks. */
  --control-border-on-ink: rgb(255 255 255 / 40%);

  /* Height of the sticky header, so anything else that pins can sit under it rather than
     behind it. The client republishes the measured value — the nav wraps, so the real height
     is not a constant — but this default keeps the offset right for a reader with no
     JavaScript at all, and is the value the desktop header actually measures. */
  --header-h: 69px;

  --radius: 10px;
  --radius-lg: 18px;
  --wrap: 82rem;
  --measure: 38rem;

  /* Estedad first: it is bundled in assets/fonts as a variable woff2 and served same-origin,
     so it is the face that actually renders. Geometric and even-toned, which is what the
     redesign asked for.
     Inter Variable second: it carries NO Arabic glyphs, so Persian skips straight past it to
     system-ui, while Latin runs — digits, caption filenames, YouTube URLs — pick it up. That
     split is the point of having it in a Persian stack, not an oversight.
     system-ui third is the platform's own Arabic-capable UI face (SF Arabic on Apple, Segoe UI
     Variable on Windows, Roboto/Noto on Android), the fallback if the woff2 fails to load.
     Nothing is downloaded from another origin; zero remote requests.
     Kalameh was the original ask and is deliberately absent: it is proprietary, sold only via
     fontiran.com, and web use needs a per-project commercial licence. Buy one and adding it to
     the front of this stack plus assets/fonts/ is the whole change. */
  --font-farsi: "Estedad", "Inter Variable", system-ui, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;

  /* Type scale. Three small steps instead of the six near-identical sizes this file grew:
     differences under ~1px are invisible and only cost rhythm. */
  --fs-micro: 0.72rem;  /* eyebrows, badges, counts — museum label scale */
  --fs-small: 0.9rem;   /* metadata, captions, chips  */
  --fs-body: 1.0625rem; /* body                       */
  --fs-lead: 1.16rem;   /* lede, synthesis            */

  /* Persian needs more leading than Latin at the same size; citations most of all. */
  --lh-tight: 1.5;
  --lh-body: 1.9;
  --lh-quote: 2.05;

  /* Spacing scale — a 2px grid (4px past 24, 8px past 48), one token per step, named for
     its pixel value so an off-grid number is obvious on sight. Every spacing declaration in
     this file resolves through it; the largest value any of them moved to get here was 1.6px,
     on one declaration. A --step token used to sit here, referenced nowhere. */
  --space-2: 0.125rem;
  --space-4: 0.25rem;
  --space-6: 0.375rem;
  --space-8: 0.5rem;
  --space-10: 0.625rem;
  --space-12: 0.75rem;
  --space-14: 0.875rem;
  --space-16: 1rem;
  --space-18: 1.125rem;
  --space-20: 1.25rem;
  --space-22: 1.375rem;
  --space-24: 1.5rem;
  --space-28: 1.75rem;
  --space-32: 2rem;
  --space-36: 2.25rem;
  --space-40: 2.5rem;
  --space-44: 2.75rem;
  --space-48: 3rem;
  --space-56: 3.5rem;
  --space-64: 4rem;
  --space-88: 5.5rem;
  --space-96: 6rem;
  --shadow: 0 1px 2px rgb(22 35 63 / 6%), 0 8px 24px -16px rgb(22 35 63 / 24%);
}

/* The dark palette lives here ONCE. scripts/build.ts re-emits this same block under
   :root[data-theme="dark"] so the header toggle can force dark on a light system without a
   hand-maintained second copy drifting out of step — the same reason @font-face is generated
   rather than written out. The :not() is what lets an explicit light choice beat the OS. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --ink: #102a23;
    --ink-2: #183e35;
    --ink-3: #557865;

    --hero-surface: #25372c;
    --accent-solid: #b6d5b9;
    --accent-on: #15261f;
    --button-icon-filter: brightness(0);
    --icon-filter: invert(89%) sepia(9%) saturate(359%) hue-rotate(63deg);
    --paper: #15261f;
    --paper-2: #1d3027;
    --paper-3: #2b4035;
    --card: #1c3026;

    --text: #eeeede;
    --text-2: #bac5b9;
    --text-3: #9cab9e;

    --saffron: #e2a253;
    --saffron-bright: #e8ab5f;
    --saffron-soft: #3a2b16;
    --teal: #6fb3ab;
    --teal-soft: #122d2a;
    --clay: #e08d82;
    --clay-soft: #331916;

    --line: #344a3c;
    --line-strong: #536554;

    --link: #b6d5b9;
    --text-strong: #e3ecdf;
    --on-saffron-soft: #e2a253;
    --control-border: #7f9480; /* 3.40:1 on card, 3.70:1 on paper */
    --control-border-hover: #a7c3a8; /* 6.18:1 / 6.73:1 */
    /* --on-ink is deliberately NOT redefined here: the header and footer are dark in both
       themes, so their text stays the same light value. Redefining it is what broke it. */

    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px -16px rgb(0 0 0 / 60%);
  }
}

/* ── Reset ───────────────────────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-farsi);
  font-size: var(--fs-body);
  /* 500, not 650: the old value existed because system-ui had to be pushed to read as a
     semibold. Estedad is bundled and variable, so a true 500 renders — and the restraint is
     the point of this design, not an accident of the fallback. */
  font-weight: 500;
  font-style: normal;
  line-height: var(--lh-body);
  font-feature-settings: "ss01";
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

h1,
h2,
h3 {
  line-height: 1.28;
  margin: 0;
  /* Body is 500, so 750 keeps the same visible step above it without shouting. */
  font-weight: 750;
  /* Never track Persian headings. Arabic script is connected; negative tracking damages the
     joins between letters. This file previously set -0.01em here and -0.03em on the hero,
     which measured as -2.4px at the 80px display size. */
  letter-spacing: 0;
}

p {
  margin: 0 0 1em;
}

ul,
ol {
  margin: 0 0 1em;
  padding-inline-start: 1.25em;
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

a:hover {
  color: var(--saffron);
}

img,
svg {
  max-width: 100%;
}

code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--paper-2);
  padding: 0.1em 0.4em;
  border-radius: var(--radius);
}

/* Focus: one visible treatment everywhere, never removed. */
:focus-visible {
  outline: 2.5px solid var(--saffron);
  outline-offset: 3px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  /* Fixed, not absolute: an absolutely-positioned skip link is anchored to the DOCUMENT, so
     tabbing to it part-way down a 7500px stage page reveals it at document top — off-screen,
     which defeats the whole control. Fixed anchors it to the viewport at any scroll offset. */
  position: fixed;
  inset-inline-start: var(--space-16);
  top: -4rem;
  z-index: 100;
  background: var(--ink);
  color: var(--on-ink-max);
  padding: var(--space-12) var(--space-20);
  border-radius: var(--radius);
  transition: top 0.15s;
}

.skip-link:focus {
  top: 1rem;
  color: var(--on-ink-max);
}

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(var(--space-18), 4vw, var(--space-48));
}

/* ── Header ──────────────────────────────────────────────────────────────────────── */

.site-header {
  background: var(--ink);
  color: var(--on-ink);
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid rgb(255 255 255 / 8%);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-16) var(--space-24);
  flex-wrap: wrap;
  padding-block: var(--space-12);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  color: inherit;
  text-decoration: none;
  margin-inline-end: auto;
}

/* The mark is a three-tick fragment of the ruler — the site's object at 16px. */
.brand-mark {
  inline-size: 26px;
  block-size: 26px;
  flex: none;
  background-image: linear-gradient(var(--saffron-bright) 0 0), linear-gradient(var(--on-ink) 0 0),
    linear-gradient(var(--on-ink) 0 0), linear-gradient(var(--on-ink-3) 0 0);
  background-repeat: no-repeat;
  background-size: 2px 18px, 2px 12px, 2px 12px, 22px 2px;
  background-position: right 2px top 2px, right 9px top 2px, right 16px top 2px,
    right 2px bottom 4px;
}

.brand-text strong {
  display: block;
  font-size: 1.02rem;
  line-height: 1.3;
}

.brand-text small {
  display: block;
  font-size: var(--fs-micro);
  color: var(--on-ink-3);
  line-height: 1.5;
}

.site-nav {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
}

/* ── The phone navigation sheet ────────────────────────────────────────────────────
   On a phone the five nav links used to scroll sideways under a "swipe for more" hint, and
   they were the first of three sideways lists stacked down the page — the reader could not
   tell which one their thumb was in, and vertical scrolling was captured by whichever it
   landed on. The links are a vertical sheet here instead. Nothing on a phone scrolls
   sideways any more.

   The button appears only with JavaScript, so it is never a dead control; without it the same
   list wraps onto a second row, which costs a little height and no function. */
.menu-toggle,
.nav-sheet-head {
  display: none;
}

.nav-link {
  color: var(--on-ink-2);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding: var(--space-6) var(--space-12);
  border-radius: var(--radius);
  font-size: var(--fs-small);
}

.nav-link:hover {
  background: rgb(255 255 255 / 8%);
  color: var(--on-ink-max);
}

.nav-link.is-current {
  color: var(--on-ink);
  box-shadow: inset 0 -2px 0 var(--saffron-bright);
}

.source-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  min-inline-size: 44px;
  gap: var(--space-8);
  background: rgb(255 255 255 / 7%);
  color: var(--on-ink-2);
  border: 1px solid var(--control-border-on-ink);
  border-radius: 100px;
  padding: var(--space-6) var(--space-14) var(--space-6) var(--space-8);
  font: inherit;
  font-size: var(--fs-small);
  cursor: pointer;
}

/* Hidden until the pre-paint script confirms JS, so a reader without it is never handed a
   button that does nothing. display:none keeps it out of the accessibility tree too, and
   because .has-js lands before first paint there is no pop-in. */
.theme-toggle {
  display: none;
}

:root.has-js .theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  min-inline-size: 44px;
  background: none;
  border: 1px solid var(--control-border-on-ink);
  border-radius: 100px;
  color: var(--on-ink-2);
  cursor: pointer;
  padding: 0;
}

.theme-toggle:hover {
  background: rgb(255 255 255 / 7%);
  color: var(--on-ink-max);
}

/* One button, three icons, and CSS picks the one that matches the current state — so the right
   glyph is already painted when the pre-paint script sets data-theme, with nothing for the
   client to swap in afterwards. */
.theme-toggle svg {
  display: none;
}

:root:not([data-theme]) .theme-toggle .icon-system,
:root[data-theme='light'] .theme-toggle .icon-light,
:root[data-theme='dark'] .theme-toggle .icon-dark {
  display: block;
}

.source-toggle:hover {
  background: rgb(255 255 255 / 12%);
}

.toggle-track {
  inline-size: 34px;
  block-size: 19px;
  border-radius: 100px;
  background: rgb(255 255 255 / 18%);
  position: relative;
  flex: none;
  transition: background 0.18s;
}

.toggle-thumb {
  position: absolute;
  inset-block-start: 2.5px;
  inset-inline-start: 2.5px;
  inline-size: 14px;
  block-size: 14px;
  border-radius: 50%;
  background: var(--on-ink);
  transition: translate 0.18s;
}

.source-toggle[aria-pressed="true"] .toggle-track {
  background: var(--saffron-bright);
}

.source-toggle[aria-pressed="true"] .toggle-thumb {
  translate: -15px 0; /* RTL: the thumb travels leftwards when switched on */
}

/* ── The ruler ───────────────────────────────────────────────────────────────────── */

.ruler {
  margin-block: clamp(var(--space-28), 5vw, var(--space-48));
}

.ruler svg {
  display: block;
  inline-size: 100%;
  /* Museum: the rule is the page's dominant graphic, so it gets real height. */
  block-size: clamp(88px, 12vw, 132px);
  overflow: visible;
}

.rule-spine {
  stroke: var(--line-strong);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.rule-tick {
  stroke: var(--line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transform-origin: center top;
  animation: tick-in 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
  animation-delay: calc(var(--i) * 14ms);
}

.rule-tick.is-major {
  /* Full ink, not ink-3: the six-month marks carry the structure now. */
  stroke: var(--ink);
  stroke-width: 2;
}

@keyframes tick-in {
  from {
    scale: 1 0;
    opacity: 0;
  }
}

.rule-num {
  fill: var(--text-2);
  font-family: var(--font-farsi);
  /* Was 15px — the smallest text on the page, on the element the whole design is built
     around. These are the units the source material argues in; they earn real size. */
  font-size: 19px;
  font-weight: 600;
}

.rule-band {
  fill: var(--paper-3);
  transition: fill 0.18s;
}

/* Separator between stage bands. The 2.23px SVG gap measured invisible at every width, so
   the bands read as one bar and the stage structure — the point of the ruler — was lost. */
.rule-sep {
  stroke: var(--paper);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.rule-band-link:hover .rule-band {
  fill: var(--ink-3);
}

.rule-band.is-active {
  fill: var(--saffron-bright);
}

/* "Your child is here". Fill is already spoken for — saffron fill means "you are here" — so this
   claim takes the other channel and outlines the band in ink. Both marks can then sit on one band
   without either losing its meaning, and a stroke survives greyscale, print and colour-vision
   differences the way a second hue would not. non-scaling-stroke because the SVG is
   preserveAspectRatio="none", exactly like the ticks and separators. */
.rule-band.is-child {
  stroke: var(--ink-2);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

/* The active stage also gets a caret above the rule, so "you are here" survives being
   printed, being viewed in greyscale, or being read by someone who cannot separate the
   saffron from the stone fill. Colour is never the only signal. */
.rule-marker {
  fill: var(--saffron);
}

.rule-band-link {
  cursor: pointer;
}

.rule-band-link:focus-visible {
  outline-offset: 1px;
}

.ruler-caption {
  display: flex;
  justify-content: space-between;
  margin: var(--space-8) 0 0;
  font-size: 0.8rem;
  color: var(--text-3);
  letter-spacing: 0; /* Persian: no tracking — it breaks cursive joins */
}

.ruler-wide {
  border-block: 1px solid var(--line);
  margin-block-end: clamp(var(--space-32), 5vw, var(--space-56));
}

/* ── Hero ────────────────────────────────────────────────────────────────────────── */

.hero {
  padding-block: clamp(var(--space-40), 8vw, var(--space-88)) 0;
}

.hero-kicker,
.page-kicker {
  font-size: var(--fs-micro);
  letter-spacing: 0; /* Persian: no tracking — it breaks cursive joins */
  color: var(--text-3);
  margin: 0 0 var(--space-16);
  text-transform: none;
}

.page-kicker a {
  color: inherit;
}

.hero-title {
  font-size: clamp(2.35rem, 7.2vw, 4.5rem);
  line-height: 1.18; /* Persian ascenders/descenders need more room than 1.08 allowed */
  letter-spacing: 0;
  /* Was 18ch, which broke "…ماه به ماه." so the final glyph sat alone on line 2 (measured:
     637px line 1, 23px line 2). Wider measure + a non-breaking last pair prevents the orphan. */
  max-inline-size: 24ch;
  text-wrap: balance;
}

.hero-dot {
  color: var(--saffron);
}

.hero-lede {
  font-size: clamp(1.05rem, 1.7vw, var(--fs-lead));
  color: var(--text-2);
  max-inline-size: var(--measure);
  margin-block-start: var(--space-22);
  line-height: 1.85;
}

.hero-note {
  font-size: var(--fs-small);
  color: var(--text-3);
  margin: 0;
}

/* "This is about your child, tap to go there" — one treatment wherever it appears: the pill on the
   landing page and the line in the /stages/ header are the same promise on two pages, so they share
   a shape rather than making a reader learn two accents. Saffron is already the "you are here"
   accent on the ruler, so it reads as a continuation of the band it points at rather than a fifth
   door competing with the four below. min-height 44px because on a phone this is the first thing a
   returning reader reaches for. */
.resume-link,
.child-stage-note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-block-size: 44px;
  margin-block: var(--space-14) var(--space-4);
  padding: var(--space-6) var(--space-14);
  border: 1px solid var(--saffron);
  border-radius: 100px;
  background: var(--saffron-soft);
  color: var(--text);
  font-size: var(--fs-small);
  text-decoration: none;
}

/* Any display value on the class beats the UA's [hidden] { display: none }, so without this the
   pill shows for everyone — including a first-time reader, whose stage name is empty. Caught in a
   browser, not by the markup test, which only sees that the attribute is there. */
.resume-link[hidden],
.child-stage-note[hidden] {
  display: none;
}

.resume-link:hover,
.child-stage-note:hover {
  border-color: var(--saffron-bright);
}

.resume-lede {
  /* --text-3 is tuned for the paper ground, not for the saffron pill this sits on: it measured
     4.57:1 light and 4.42:1 dark — one side already failing. --text-2 clears both comfortably. */
  color: var(--text-2);
}

.resume-stage,
.child-stage-name {
  font-weight: 700;
}

/* ── Doors ───────────────────────────────────────────────────────────────────────── */

.doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-block: clamp(var(--space-32), 6vw, var(--space-56));
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-width: var(--wrap);
}

.door {
  background: var(--card);
  padding: var(--space-24) var(--space-22) var(--space-28);
  text-decoration: none;
  color: inherit;
  display: grid;
  align-content: start;
  gap: var(--space-6);
  position: relative;
  transition: background 0.16s;
}

.door:hover {
  background: var(--paper-2);
  color: inherit;
}

.door-kicker {
  font-size: var(--fs-micro);
  color: var(--text-3);
  letter-spacing: 0; /* Persian: no tracking — it breaks cursive joins */
}

.door-title {
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.4;
}

.door-blurb {
  font-size: var(--fs-small);
  color: var(--text-2);
  line-height: 1.75;
}

/* ── Page heads and sections ─────────────────────────────────────────────────────── */

.page-head {
  padding-block: clamp(var(--space-32), 6vw, var(--space-56)) var(--space-24);
}

.page-title {
  font-size: clamp(1.85rem, 4.6vw, 2.9rem);
  letter-spacing: 0;
  max-inline-size: 24ch;
  text-wrap: balance;
}

.page-lede {
  font-size: clamp(1rem, 1.5vw, var(--fs-lead));
  color: var(--text-2);
  max-inline-size: var(--measure);
  margin-block-start: var(--space-16);
}

.section-title,
.group-title {
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  margin-block-end: var(--space-18);
  padding-block-end: var(--space-8);
  border-block-end: 1px solid var(--line);
}

/* ── Subject preview and the stage x subject page ─────────────────────────────────── */

/* The count beside a subject heading is the subject's TRUE size, while the cards below it are a
   preview of six. Without the number the reader has no way to know more exists until they reach
   the link at the bottom; with it, the heading itself is the promise the link keeps. */
.group-count,
.sideways-count,
.group-more-count {
  display: inline-block;
  margin-inline-start: var(--space-8);
  font-size: 0.72em;
  font-weight: 400;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

/* A full-row target, like the contents rows — same reason, and the same treatment: a hairline
   and air, not a box. The guidance blocks above already separate themselves that way, and a
   bordered pill here would be the only boxed thing on the page. */
.group-more {
  margin-block-start: var(--space-8);
}

.group-more a,
.sideways-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  min-block-size: 44px;
  border-block-start: 1px solid var(--line);
  text-decoration: none;
  color: var(--text-2);
}

.sideways-list a {
  border-block-start: 0;
  border-block-end: 1px solid var(--line);
}

.group-more a:hover,
.sideways-list a:hover {
  color: var(--text-strong);
}

.sideways-list {
  display: grid;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* «خواب» is the h1 and «در ۲۴ تا ۳۶ ماهگی» qualifies it. One heading, two weights — so the
   subject is what the reader's eye lands on and the stage is the context, rather than a title
   that reads as one long string with no shape. */
.title-qualifier {
  display: block;
  margin-block-start: var(--space-4);
  font-size: 0.5em;
  font-weight: 400;
  color: var(--text-2);
}

.crumb-sep {
  margin-inline: var(--space-8);
  color: var(--text-3);
}

.page-meta {
  margin-block-start: var(--space-8);
  font-size: var(--fs-micro);
  color: var(--text-3);
}

/* ── Bands inside one subject ─────────────────────────────────────────────────────── */

/* A large subject on a stage page is split by card kind (bandsWithin() in pages.ts says when and
   why). The band heading has to read as subordinate to the subject above it without becoming a
   third weight of rule — the guidance blocks already own the hairline. So: smaller, uppercase-ish
   tracking is wrong for Persian, and a rule would compete. Colour and size do the work. */
.card-band {
  margin-block-end: clamp(var(--space-24), 4vw, var(--space-36));
}

.card-band:last-child {
  margin-block-end: 0;
}

.band-title {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  font-size: clamp(0.95rem, 1.7vw, 1.05rem);
  font-weight: 600;
  color: var(--text-2);
  margin-block: 0 var(--space-12);
  /* Sits above the first block's hairline, so it needs no rule of its own. */
}

.band-count {
  font-size: 0.8em;
  font-weight: 400;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.stage-body,
.prose {
  padding-block-end: var(--space-64);
}

.card-group,
.related,
.changed {
  margin-block-end: clamp(var(--space-36), 6vw, var(--space-56));
}

/* ── Tiles ───────────────────────────────────────────────────────────────────────── */

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--space-16);
  padding-block-end: var(--space-64);
}

.tile {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-22) var(--space-20) var(--space-24);
  text-decoration: none;
  color: inherit;
  display: grid;
  align-content: start;
  gap: var(--space-6);
  transition: border-color 0.16s, transform 0.16s;
}

.tile:hover {
  border-color: var(--ink-3);
  transform: translateY(-2px);
  color: inherit;
}

.tile.is-empty {
  background: transparent;
  border-style: dashed;
}

.tile-title {
  font-size: 1.1rem;
}

.stage-range {
  font-size: var(--fs-small);
  color: var(--saffron);
  font-variant-numeric: tabular-nums;
}

.tile-blurb {
  font-size: var(--fs-small);
  color: var(--text-2);
  margin: 0;
  line-height: 1.7;
}

.tile-count {
  font-size: 0.8rem;
  color: var(--text-3);
  margin: var(--space-4) 0 0;
}

/* ── Guidance ────────────────────────────────────────────────────────────────────── */

.guidance-list {
  display: grid;
  /* No gap: the hairline on each block is the separator now. */
  gap: 0;
}

.guidance {
  /* Museum label: no box. A rule above and air around it do the separating, which scales to a
     stage page of nineteen items far better than nineteen stacked cards. */
  background: none;
  border: 0;
  border-block-start: 1px solid var(--line);
  border-radius: 0;
  padding: var(--space-32) 0 var(--space-36);
  scroll-margin-top: var(--space-96);
}

/* Everything a jump strip or a distribution column points at. The header is sticky, so
   without this the heading the reader asked for lands underneath it and the page looks like
   it scrolled to the wrong place — .guidance had the rule and its neighbours never did. */
.topic-stage,
.group-title,
.band-title {
  scroll-margin-top: var(--space-96);
}

.guidance:target {
  /* The target marker is a heavier rule, not a glow — same channel, more of it. */
  border-block-start: 2px solid var(--saffron);
}

.guidance-kind {
  font-size: var(--fs-micro);
  letter-spacing: 0; /* Persian: no tracking — it breaks cursive joins */
  color: var(--text-3);
  margin: 0 0 var(--space-6);
}

.guidance-title {
  font-size: 1.22rem;
  margin-block-end: var(--space-10);
}

.guidance-summary {
  color: var(--text-2);
  max-inline-size: 46rem;
  margin-block-end: var(--space-14);
}

.guidance-action {
  /* Unfilled: one fewer grey box per item. The rule alone marks it. */
  background: none;
  border-inline-start: 2px solid var(--line-strong);
  padding: var(--space-2) var(--space-14);
  border-radius: 0;
  font-size: var(--fs-body);
  margin-block-end: var(--space-14);
}

.action-label {
  display: block;
  font-size: var(--fs-micro);
  letter-spacing: 0; /* Persian: no tracking — it breaks cursive joins */
  color: var(--text-3);
  margin-block-end: var(--space-2);
}

.note {
  font-size: var(--fs-small);
  padding: var(--space-12) var(--space-14);
  border-radius: var(--radius);
  margin-block-end: var(--space-14);
  line-height: 1.75;
}

.note-caveat {
  background: none;
  border-inline-start: 1px solid var(--line-strong);
  padding-inline-start: var(--space-14);
  color: var(--text-2);
}

.note-conflict {
  background: var(--saffron-soft);
  /* One token instead of a base value plus a dark override: the role is "text on saffron-soft",
     and the token flips because that surface does. */
  color: var(--on-saffron-soft);
}

.note-label {
  display: block;
  font-weight: 700;
  font-size: var(--fs-micro);
  letter-spacing: 0; /* Persian: no tracking — it breaks cursive joins */
  margin-block-end: var(--space-4);
}

.guidance-provenance {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
  margin: 0;
  padding-block-start: var(--space-14);
  border-block-start: 1px solid var(--line);
  font-size: var(--fs-small);
}

.chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--control-border);
  border-radius: 100px;
  padding: var(--space-4) var(--space-12);
  font-size: var(--fs-small);
  text-decoration: none;
  color: var(--text-2);
  background: transparent;
}

a.chip {
  /* Chips are the primary navigation on the start page, so they get a full-size target. */
  min-block-size: 44px;
}

a.chip:hover {
  border-color: var(--control-border-hover);
  color: var(--text-strong);
}

.chip-part {
  border-color: var(--teal);
  color: var(--teal);
}

.chip-lg {
  padding: var(--space-8) var(--space-18);
  font-size: var(--fs-small);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.link-source {
  color: var(--teal);
  font-weight: 600;
  /* Measured 26px tall: clears the 24px WCAG 2.5.8 AA floor but is tight for a thumb.
     44px is the comfortable target and costs nothing here. */
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding-inline: var(--space-2);
}

.bookmark {
  margin-inline-start: auto;
  background: none;
  border: 1px solid transparent;
  border-radius: 100px;
  padding: var(--space-4) var(--space-10);
  font: inherit;
  font-size: var(--fs-small);
  color: var(--text-3);
  cursor: pointer;
  display: inline-flex;
  gap: var(--space-4);
  align-items: center;
}

.bookmark {
  min-block-size: 44px;
}

.bookmark:hover {
  border-color: var(--line-strong);
  color: var(--text-2);
}

.bookmark[aria-pressed="true"] {
  color: var(--saffron);
}

/* ── Source panel: hidden by default, revealed by the toggle ─────────────────────── */

.source-panel {
  margin-block-start: var(--space-14);
  border-block-start: 1px dashed var(--line);
  padding-block-start: var(--space-14);
}

/* The toggle is off by default. /source/<id>/ pages always show evidence regardless, so
   nothing is ever unreachable — including with JavaScript disabled. */
:root.sources-off .source-panel {
  display: none;
}

/* Both evidence disclosures present identically; only their visibility rules differ. */
.source-panel > summary,
.saved-evidence > summary {
  cursor: pointer;
  min-block-size: 44px;
  display: flex;
  align-items: center;
  font-size: var(--fs-small);
  color: var(--teal);
  font-weight: 600;
  list-style-position: inside;
}

.source-panel > summary::marker,
.saved-evidence > summary::marker {
  /* Was --line-strong: 1.82:1 light, 1.99:1 dark — under the 3:1 floor for a control. */
  color: var(--text-3);
}

.source-list {
  display: grid;
  gap: var(--space-14);
  margin-block-start: var(--space-14);
  animation: reveal 0.25s ease;
}

@keyframes reveal {
  from {
    opacity: 0;
    translate: 0 -4px;
  }
}

.source-card {
  margin: 0;
  background: var(--teal-soft);
  border: 1px solid color-mix(in srgb, var(--teal) 28%, transparent);
  border-radius: var(--radius-lg);
  padding: var(--space-16) var(--space-18);
}

.source-head {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
  margin-block-end: var(--space-12);
  font-size: 0.8rem;
}

.source-part {
  font-weight: 700;
  color: var(--teal);
}

.source-lines {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-3);
  background: var(--card);
  padding: var(--space-2) var(--space-8);
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.badge {
  border-radius: 100px;
  padding: var(--space-2) var(--space-10);
  font-size: var(--fs-micro);
  border: 1px solid currentcolor;
}

.badge-time.is-verified {
  color: var(--teal);
  font-variant-numeric: tabular-nums;
}

.badge-time.is-approx {
  color: var(--saffron);
}

/* The common case for this corpus. Muted rather than alarming — it is a known limit, not an
   error — but never absent, because a missing timestamp must always be visible as missing. */
.badge-time.is-unknown {
  color: var(--text-3);
  border-style: dashed;
}

.source-quote {
  margin: 0 0 var(--space-12);
  padding-inline-start: var(--space-14);
  border-inline-start: 2px solid color-mix(in srgb, var(--teal) 45%, transparent);
}

.source-quote p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-quote);
  color: var(--text);
}

.source-meta {
  margin: 0 0 var(--space-12);
  font-size: var(--fs-micro);
  color: var(--text-3);
  display: grid;
  gap: var(--space-4);
}

.source-caveat {
  color: var(--saffron);
}

.source-actions {
  margin: 0;
  display: flex;
  gap: var(--space-12);
  align-items: center;
  flex-wrap: wrap;
}

.source-nolink {
  font-size: var(--fs-micro);
  color: var(--text-3);
}

.source-footnote {
  font-size: var(--fs-small);
  color: var(--text-3);
}

.source-index {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-8);
}

.source-index li {
  display: flex;
  gap: var(--space-12);
  flex-wrap: wrap;
  align-items: baseline;
  font-size: var(--fs-small);
  padding-block-end: var(--space-8);
  border-block-end: 1px solid var(--line);
}

/* ── Buttons ─────────────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  gap: var(--space-6);
  border-radius: var(--radius);
  padding: var(--space-8) var(--space-14);
  font: inherit;
  font-size: var(--fs-small);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid var(--teal);
  color: var(--teal);
  background: var(--card);
  transition: background 0.14s, color 0.14s;
}

.btn:hover {
  background: var(--teal);
  color: var(--card);
}

.btn-primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink-max);
  padding-inline: var(--space-24);
}

.btn-primary:hover {
  background: var(--ink-2);
  color: var(--on-ink-max);
}

.btn-ext {
  font-size: 0.8em;
}

/* ── Lists on topic pages ────────────────────────────────────────────────────────── */

.synthesis,
.action-list,
.conflict-list,
.changed-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-12);
}

.synthesis li,
.action-list li,
.conflict-list li {
  padding-inline-start: var(--space-16);
  border-inline-start: 2px solid var(--line);
  font-size: var(--fs-body);
  color: var(--text-2);
}

.conflict-list li {
  border-inline-start-color: var(--saffron);
}

.action-list li,
.conflict-list li {
  display: grid;
  gap: var(--space-2);
}

.action-list span,
.conflict-list span {
  font-size: var(--fs-small);
  color: var(--text-3);
}

.changed-list li {
  padding-inline-start: var(--space-16);
  border-inline-start: 2px solid var(--saffron);
}

.timeline {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0;
  border-inline-start: 2px solid var(--line);
}

.timeline-row {
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) 1fr;
  gap: var(--space-8) var(--space-24);
  padding: var(--space-14) var(--space-18);
  position: relative;
}

.timeline-row + .timeline-row {
  border-block-start: 1px solid var(--line);
}

.timeline-row::before {
  content: "";
  position: absolute;
  inset-inline-start: -6px;
  inset-block-start: var(--space-22);
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--line-strong);
}

.timeline-stage {
  font-weight: 700;
  font-size: var(--fs-small);
  text-decoration: none;
  color: var(--text-strong);
}

.timeline-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-4);
  font-size: var(--fs-small);
}

/* ── Claim grid ──────────────────────────────────────────────────────────────────── */

.band-claim {
  padding-block: clamp(var(--space-24), 4vw, var(--space-40));
}

.claim-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--space-16);
}

.claim {
  padding: var(--space-20) var(--space-22);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--card);
}

.claim h3 {
  font-size: var(--fs-small);
  letter-spacing: 0; /* Persian: no tracking — it breaks cursive joins */
  margin-block-end: var(--space-10);
}

.claim.is-yes h3 {
  color: var(--teal);
}

.claim.is-no h3 {
  color: var(--clay);
}

.claim ul {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--text-2);
  display: grid;
  gap: var(--space-6);
}

/* ── Steps ───────────────────────────────────────────────────────────────────────── */

.step {
  margin-block-end: clamp(var(--space-32), 5vw, var(--space-48));
}

.step-title {
  display: flex;
  align-items: baseline;
  gap: var(--space-12);
  font-size: 1.2rem;
  margin-block-end: var(--space-16);
}

.step-num {
  inline-size: 1.9rem;
  block-size: 1.9rem;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--saffron);
  color: var(--saffron);
  display: grid;
  place-items: center;
  font-size: var(--fs-small);
}

.step-body {
  max-inline-size: var(--measure);
  color: var(--text-2);
  font-size: var(--fs-body);
}

/* ── Safety ──────────────────────────────────────────────────────────────────────── */

.safety {
  background: var(--clay-soft);
  border: 1px solid color-mix(in srgb, var(--clay) 32%, transparent);
  border-radius: var(--radius-lg);
  padding: var(--space-20) var(--space-22);
  margin-block: var(--space-32) var(--space-56);
  max-inline-size: 52rem;
}

.safety-title {
  font-size: 1.05rem;
  color: var(--clay);
  margin-block-end: var(--space-10);
}

.safety p {
  font-size: var(--fs-small);
  color: var(--text-2);
  margin-block-end: var(--space-10);
}

.safety p:last-child {
  margin-block-end: 0;
}

/* Specificity, not !important: .safety p (0,1,1) sets size and colour, so a bare .safety-fine
   (0,1,0) loses. Qualifying it (0,2,1) wins honestly and stays overridable. */
.safety p.safety-fine {
  font-size: 0.85rem;
  color: var(--text-3);
}

.safety-block {
  margin-block-start: var(--space-16);
}

/* ── Search ──────────────────────────────────────────────────────────────────────── */

.search-shell {
  padding-block-end: var(--space-64);
}

.search-form {
  display: flex;
  gap: var(--space-10);
  margin-block-end: var(--space-16);
}

.search-input {
  flex: 1;
  min-inline-size: 0;
  font: inherit;
  font-size: 1.05rem;
  padding: var(--space-12) var(--space-16);
  border: 1.5px solid var(--control-border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--text);
}

.search-input:focus {
  border-color: var(--control-border-hover);
}

.search-filters {
  margin-block-end: var(--space-20);
}

.filter-set {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: var(--space-16);
  flex-wrap: wrap;
  align-items: center;
  font-size: var(--fs-small);
  color: var(--text-2);
}

.filter-set legend {
  padding: 0;
  font-size: var(--fs-micro);
  color: var(--text-3);
  letter-spacing: 0; /* Persian: no tracking — it breaks cursive joins */
}

.filter-set label {
  display: inline-flex;
  gap: var(--space-6);
  align-items: center;
  cursor: pointer;
}

.search-status {
  font-size: var(--fs-small);
  color: var(--text-3);
  min-block-size: 1.5em;
}

/* Which words chose the results.
   Persian grammar words are substrings of most of the corpus — «را» is in 751 of 752 guidance
   items — so they are not allowed to select results, only to order them. This row says so
   rather than leaving the reader to wonder why one extra word changed everything. */
.search-terms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
  margin-block: 0 var(--space-12);
  font-size: var(--fs-small);
  color: var(--text-2);
}

.search-terms[hidden] {
  display: none;
}

.qterm-lead,
.qterm-why {
  color: var(--text-3);
  font-size: var(--fs-micro);
}

.qterm {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-10);
  border: 1px solid var(--control-border);
  border-radius: 100px;
  background: var(--card);
  color: var(--text);
  font-size: var(--fs-small);
}

.qterm.is-ignored {
  border-style: dashed;
  border-color: var(--line-strong);
  background: none;
  color: var(--text-3);
  text-decoration: line-through;
  /* Far enough from the glyphs that Persian descenders are not struck twice. */
  text-decoration-thickness: 1px;
  text-underline-offset: 0;
}

.search-results {
  display: grid;
  gap: var(--space-14);
}

.result {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-18) var(--space-20);
  animation: reveal 0.2s ease backwards;
}

.result-passage {
  background: transparent;
  border-style: dashed;
}

.result-kind {
  font-size: var(--fs-micro);
  letter-spacing: 0; /* Persian: no tracking — it breaks cursive joins */
  color: var(--text-3);
  margin: 0 0 var(--space-4);
}

.result-nosource {
  color: var(--saffron);
}

.result-title {
  font-size: 1.05rem;
  margin-block-end: var(--space-6);
}

.result-title a {
  text-decoration: none;
}

.result-snippet {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--text-2);
  line-height: 1.9;
}

/* ── Empty states ────────────────────────────────────────────────────────────────── */

.empty {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-24), 5vw, var(--space-44));
  text-align: start;
  max-inline-size: 46rem;
}

.empty h2 {
  font-size: 1.15rem;
  margin-block-end: var(--space-10);
}

.empty p {
  color: var(--text-2);
  font-size: var(--fs-body);
  margin-block-end: var(--space-8);
}

/* Same as .safety p.safety-fine: outrank .empty p (0,1,1) rather than shout over it. */
.empty p.empty-fine {
  font-size: 0.85rem;
  color: var(--text-3);
}

/* ── Prose ───────────────────────────────────────────────────────────────────────── */

.prose {
  max-inline-size: 48rem;
}

.prose h2 {
  font-size: 1.3rem;
  margin-block: var(--space-36) var(--space-14);
  padding-block-end: var(--space-6);
  border-block-end: 1px solid var(--line);
}

.prose p,
.prose li {
  color: var(--text-2);
}

.prose ul {
  display: grid;
  gap: var(--space-6);
}

.callout {
  background: var(--paper-2);
  border-inline-start: 3px solid var(--saffron);
  padding: var(--space-16) var(--space-20);
  border-radius: var(--radius);
}

/* ── Pager ───────────────────────────────────────────────────────────────────────── */

.pager {
  display: flex;
  justify-content: space-between;
  gap: var(--space-16);
  padding-block: var(--space-24);
  border-block-start: 1px solid var(--line);
  margin-block-end: var(--space-16);
}

.pager-link {
  text-decoration: none;
  color: inherit;
  display: grid;
  align-content: center;
  min-block-size: 44px;
  gap: var(--space-2);
  font-size: var(--fs-small);
  max-inline-size: 20rem;
}

.pager-link span {
  font-size: var(--fs-micro);
  color: var(--text-3);
}

.pager-link.is-next {
  text-align: start;
}

.pager-link.is-prev {
  text-align: end;
}

/* ── Footer ──────────────────────────────────────────────────────────────────────── */

.site-footer {
  background: var(--ink);
  color: var(--on-ink-2);
  padding-block: var(--space-40) var(--space-48);
  font-size: var(--fs-small);
}

.footer-inner {
  display: grid;
  gap: var(--space-12);
  max-inline-size: 60rem;
}

.footer-inner p {
  margin: 0;
  line-height: 1.85;
}

.footer-scope {
  color: var(--on-ink-2);
}

.footer-safety {
  color: var(--on-ink-clay);
}

.footer-license {
  color: var(--on-ink-3);
  font-size: var(--fs-small);
}

.site-footer a {
  color: var(--on-ink-2);
}

/* The light-theme saffron is too dark against the ink footer (3.76:1); this alias is the
   dark-theme value, which measures 7.08:1 on the same ground. */
.site-footer a:hover {
  color: var(--on-ink-saffron);
}

/* ── Installed-app chrome ─────────────────────────────────────────────────────────
   When launched from the home screen there is no browser UI, so the header sits under the
   status bar / notch and the footer under the home indicator unless the safe areas are
   respected. `viewport-fit=cover` in the meta tag is what exposes these. */

@supports (padding: env(safe-area-inset-top)) {
  .site-header {
    padding-block-start: env(safe-area-inset-top);
  }

  .site-footer {
    padding-block-end: calc(var(--space-48) + env(safe-area-inset-bottom));
  }

  .wrap {
    padding-inline: max(clamp(var(--space-18), 4vw, var(--space-48)), env(safe-area-inset-right));
  }
}

/* ── Stage orientation strip ──────────────────────────────────────────────────────
   A stage page can run to 19 cards and ~7500px. This is the "what's in here, and how much"
   line that was missing, built from the groups that already exist on the page. */

/* Sticky rather than a block the reader scrolls past once.

   Measured on a 375px phone, this page put 964px of orientation above the first word of
   guidance — more than one full screen — and then offered no sense of position at all across
   the 13 screens that followed. This strip was part of the first problem and the answer to the
   second, so it moves: out of the flow at the top, and into view while reading. It reclaims its
   own height from the run-up and tells a reader which of the four groups they are in.

   nowrap with a scroller because on a phone four labelled groups do not fit a line, and
   wrapping to three rows would cost more than it saved. */
.stage-jump {
  position: sticky;
  /* Below the sticky header, not under it. The header's height depends on how its nav wraps
     (147px on a phone, 67px on a desktop), so the client publishes the measured value rather
     than this guessing per breakpoint. The 0 fallback only applies before that runs, and the
     strip does not stick until ~700px of scroll, long after. */
  inset-block-start: var(--header-h, 0px);
  z-index: 1;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  gap: var(--space-8);
  margin-block-end: clamp(var(--space-28), 4vw, var(--space-40));
  padding-block: var(--space-10) var(--space-12);
  border-block-end: 1px solid var(--line-strong);
  /* Opaque: cards scroll underneath it. */
  background: var(--paper);
}

.stage-jump::-webkit-scrollbar {
  display: none;
}

.stage-jump-label {
  flex: none;
}

/* The group the reader is currently in. Same inversion the stage list uses for the current
   stage, so "you are here" reads the same way in both strips. No weight change: this row is a
   horizontal scroller and a heavier pill is a wider pill, which shifts every pill after it. */
.stage-jump a.is-current {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
}

.stage-jump a.is-current .count {
  color: var(--on-ink-2);
}

/* How far through the stage. Pushed to the far end so it never sits between the pills and
   move them around as the number grows. */
.stage-progress {
  flex: none;
  margin-inline-start: auto;
  align-self: center;
  padding-inline: var(--space-8);
  font-size: var(--fs-micro);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stage-progress[hidden] {
  display: none;
}

/* ── Stage contents ───────────────────────────────────────────────────────────────
   Closed by default, so it adds a summary line and nothing else to the run-up. Museum
   treatment: a rule and a row per group, no card, no fill. */

.stage-contents {
  margin-block-end: clamp(var(--space-28), 4vw, var(--space-40));
}

.stage-contents > summary {
  cursor: pointer;
  font-size: var(--fs-small);
  color: var(--text-2);
  padding-block: var(--space-10);
  border-block-end: 1px solid var(--line);
}

.stage-contents > summary:hover {
  color: var(--text-strong);
}

.stage-contents-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.stage-contents-list a {
  display: flex;
  align-items: flex-start;
  gap: var(--space-14);
  /* Full-width target: the row is the link, not just the words in it. */
  min-block-size: 44px;
  padding-block: var(--space-14);
  border-block-end: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}

.stage-contents-list a:hover .stage-contents-name {
  color: var(--text-strong);
}

.stage-contents-count {
  flex: none;
  inline-size: 30px;
  block-size: 30px;
  border: 1px solid var(--control-border);
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-micro);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.stage-contents-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.stage-contents-name {
  font-size: var(--fs-body);
  font-weight: 700;
}

.stage-contents-first {
  font-size: var(--fs-small);
  color: var(--text-2);
  line-height: var(--lh-tight);
}

.stage-jump-label {
  font-size: var(--fs-micro);
  color: var(--text-3);
  align-self: center;
  margin-inline-end: var(--space-4);
}

.stage-jump a {
  display: inline-flex;
  align-items: center;
  /* flex-none + nowrap because the strip is a scroller now, not a wrapping block. */
  flex: none;
  white-space: nowrap;
  gap: var(--space-6);
  min-block-size: 44px;
  padding-inline: var(--space-14);
  border: 1px solid var(--control-border);
  border-radius: 100px;
  text-decoration: none;
  color: var(--text-2);
  font-size: var(--fs-small);
  background: var(--card);
}

.stage-jump a:hover {
  border-color: var(--control-border-hover);
  color: var(--text-strong);
}

.stage-jump .count {
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
  font-size: var(--fs-micro);
}

/* ── Ruler hit target ─────────────────────────────────────────────────────────────
   The visible band is 26 SVG units tall, which measured 26x29 CSS px — over the 24px AA
   floor but tight for a thumb. This transparent overlay is the actual link surface, so the
   band can stay visually thin while the tap area is comfortable. */

.rule-hit {
  fill: transparent;
  /* Grow the target vertically without moving the artwork. */
  transform: scaleY(1.7);
  transform-origin: center;
  transform-box: fill-box;
}

.ruler-interactive .rule-band-link {
  cursor: pointer;
}

.ruler-interactive .rule-band-link:hover + .rule-sep {
  stroke: var(--paper);
}

/* ── Saved list ───────────────────────────────────────────────────────────────────
   The retrieval half of the bookmark feature. Rows ship hidden and the client reveals the
   saved ones, so this page needs no fetch and works offline. */

.saved-count {
  font-size: var(--fs-small);
  color: var(--text-3);
  margin-block-end: var(--space-16);
}

.saved-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-32);
  display: grid;
  gap: var(--space-12);
  max-inline-size: 52rem;
}

.saved-list[hidden] {
  display: none;
}

.saved-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-16);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-18) var(--space-20);
}

.saved-row[hidden] {
  display: none;
}

.saved-row-main {
  flex: 1;
  min-inline-size: 0;
}

.saved-row-title {
  font-size: 1.08rem;
  font-weight: 800;
  text-decoration: none;
  color: var(--text-strong);
  display: inline-block;
  min-block-size: 44px;
}

.saved-row-title:hover {
  color: var(--saffron);
}

.saved-row-summary {
  font-size: var(--fs-small);
  color: var(--text-2);
  margin: var(--space-4) 0 var(--space-10);
}

.saved-row-meta {
  margin: 0;
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
}

/* ── Search scope notice ──────────────────────────────────────────────────────────
   Shown while only the inlined core index is loaded, so a reader offline knows what is and is
   not being searched rather than assuming the corpus has no match. */

.search-scope {
  background: var(--paper-2);
  border-inline-start: 3px solid var(--ink-3);
  border-radius: var(--radius);
  padding: var(--space-12) var(--space-16);
  font-size: var(--fs-small);
  color: var(--text-2);
  margin-block-end: var(--space-16);
  max-inline-size: 46rem;
}

.search-scope[hidden] {
  display: none;
}

.filter-set label.is-unavailable {
  color: var(--text-3);
  cursor: default;
}

/* ── Age filter ───────────────────────────────────────────────────────────────────
   A native select: the platform supplies keyboard, screen-reader and mobile-picker behaviour,
   so there is no bespoke widget to get wrong. */

.filter-age {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  margin: var(--space-12) 0 0;
  flex-wrap: wrap;
}

.filter-age label {
  font-size: var(--fs-micro);
  color: var(--text-3);
}

.filter-age select {
  font: inherit;
  font-size: var(--fs-small);
  min-block-size: 44px;
  padding-inline: var(--space-12);
  border: 1px solid var(--control-border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--text);
  max-inline-size: 100%;
}

.filter-age select:hover {
  border-color: var(--control-border-hover);
}

/* The one-tap age shortcut. Saffron because it is the same "you are here" claim the ruler makes —
   this is about *this* reader's child — and it sits at the select's 44px so the pair reads as one
   control rather than a control plus an ornament. */
.age-suggest {
  font: inherit;
  font-size: var(--fs-small);
  min-block-size: 44px;
  padding-inline: var(--space-14);
  border: 1px dashed var(--saffron);
  border-radius: 100px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.age-suggest:hover {
  background: var(--saffron-soft);
  border-style: solid;
}

.age-suggest-stage {
  font-weight: 700;
}

/* Same trap .filter-age-note already guards against: the display above would otherwise beat the
   UA's [hidden] rule and show an unlabelled suggestion to every reader. */
.age-suggest[hidden] {
  display: none;
}

.filter-age-note {
  font-size: var(--fs-small);
  color: var(--text-2);
  background: var(--paper-2);
  border-inline-start: 3px solid var(--line-strong);
  border-radius: var(--radius);
  padding: var(--space-10) var(--space-14);
  margin-block-end: var(--space-16);
  max-inline-size: 46rem;
}

.filter-age-note[hidden] {
  display: none;
}

/* ── Saved-row evidence ───────────────────────────────────────────────────────────
   Same evidence component as everywhere else, but its own class: .source-panel is hidden by
   :root.sources-off (the default), and on /saved/ the reader asked for this page on purpose. */

.saved-evidence {
  margin-block-start: var(--space-12);
  border-block-start: 1px dashed var(--line);
  padding-block-start: var(--space-12);
}

.saved-evidence[open] > summary {
  margin-block-end: var(--space-8);
}

/* The link that is there before, and instead of, a fetch: no JS, offline miss, or a 404.
   Padded to a 24px box: it is the only route to the evidence when the lift fails, so it should
   not be the hardest thing on the row to hit. No dimming while aria-busy — measured at opacity
   0.55 the link fell from 10.7:1 to 3.06:1, and a loading hint is not worth failing 1.4.3. */
.evidence-fallback {
  font-size: var(--fs-small);
}

.evidence-fallback a {
  display: inline-block;
  padding-block: var(--space-4);
}

/* A row reached by #id gets the same "you are here" treatment a guidance card does. */
.saved-row:target {
  border-color: var(--saffron);
  box-shadow: 0 0 0 3px var(--saffron-soft);
}

/* ── Mobile ──────────────────────────────────────────────────────────────────────── */

@media (max-width: 44.9375rem) {
  body {
    font-size: 1rem;
  }

  /* One row, and it has to fit 375px: brand 179 + menu 44 + theme 44 + sources 52 = 319, so
     the gaps are the whole budget. Anything added here wraps the header to a second row and
     pushes every page's first word down by another 54px. */
  .header-inner {
    padding-block: var(--space-10);
    gap: var(--space-8);
    flex-wrap: nowrap;
  }

  .brand-text small {
    display: none;
  }

  .brand-text strong {
    font-size: 0.95rem;
  }

  /* Icon only. The word stays for screen readers — the button has no other name. */
  :root.has-js .menu-toggle {
    min-inline-size: 44px;
    justify-content: center;
  }

  :root.has-js .menu-toggle-text {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
  }

  .page-home .site-main > * {
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  /* The compact stage list replaces the SVG band links as the tap target here.
     147px was the three-row header: brand, the sideways nav, and its hint. With the links in
     a sheet the header is one row. The client still publishes the measured value; this is
     only what the sticky strip uses before that runs. */
  :root {
    --header-h: 64px;
  }

  /* Density for the run-up, compact screens only.

     Five orientation devices stack before any guidance here — header, heading, ruler, stage
     list, group strip — and each carried the full-width breathing room, so 124px of the 876px
     above the first word was gap between them. They are one contiguous run of navigation, not
     five separate sections, and they do not each need a section's worth of air. Desktop keeps
     the original spacing: there the run is short and the room is real. */
  .ruler {
    margin-block: var(--space-14);
  }

  .stage-nav-compact {
    margin-block: var(--space-12);
  }

  .page-head,
  .stage-head {
    padding-block: var(--space-20) var(--space-14);
  }

  /* The strip is sticky and opaque, so cards pass under it rather than butting against it —
     it does not need a section's gap beneath it as well. This is the last 16px between the
     first guidance title and the first screen of a 375x812 phone. */
  .stage-jump {
    margin-block-end: var(--space-12);
  }

  .stage-nav-compact {
    display: block;
  }

  /* The rule stays visible as orientation, but its 29px bands stop being links, so there is
     exactly one way to choose a stage on a phone and it is the labelled list above. */
  .ruler-interactive .rule-band-link {
    display: none;
  }

  /* No JavaScript: the list wraps onto a second row. It does not scroll sideways.

     .header-inner is `nowrap` so the JS header stays one 65px row, and a flex item cannot
     wrap out of a nowrap container however wide it asks to be — so without this the nav was
     not moving to a second row at all, it was being squeezed onto the first beside the brand.
     The comment described a layout that never happened. */
  :root:not(.has-js) .header-inner {
    flex-wrap: wrap;
  }

  .site-nav {
    order: 3;
    inline-size: 100%;
    flex-wrap: wrap;
    overflow: visible;
  }

  :root.has-js .menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
    min-block-size: 44px;
    padding-inline: var(--space-12);
    background: none;
    border: 1px solid var(--control-border-on-ink);
    border-radius: 100px;
    color: var(--on-ink-2);
    font: inherit;
    font-size: var(--fs-small);
    cursor: pointer;
  }

  :root.has-js .menu-toggle:hover {
    color: var(--on-ink-max);
  }

  /* With JavaScript the links leave the header row entirely, so the header is one line. */
  :root.has-js .site-nav {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    inline-size: auto;
    padding: var(--space-16) var(--space-16) var(--space-32);
    padding-block-start: calc(var(--space-12) + env(safe-area-inset-top, 0px));
    background: var(--paper);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  :root.has-js[data-nav-open] .site-nav {
    display: flex;
  }

  /* The page behind the sheet must not scroll under it. */
  :root.has-js[data-nav-open] body {
    overflow: hidden;
  }

  :root.has-js .nav-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
    margin-block-end: var(--space-8);
  }

  .nav-sheet-title {
    margin: 0;
    font-size: var(--fs-micro);
    color: var(--text-3);
  }

  .nav-sheet-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 44px;
    min-inline-size: 44px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--text-2);
    cursor: pointer;
  }

  /* In the sheet the links are rows on paper, not pills on ink. */
  :root.has-js .site-nav .nav-link {
    min-block-size: 52px;
    padding-inline: 0;
    border-radius: 0;
    border-block-end: 1px solid var(--line);
    color: var(--text);
    font-size: var(--fs-body);
  }

  :root.has-js .site-nav .nav-link:hover {
    background: none;
    color: var(--text);
  }

  :root.has-js .site-nav .nav-link.is-current {
    color: var(--saffron);
    font-weight: 600;
  }

  .nav-link {
    white-space: nowrap;
    padding-inline: var(--space-10);
  }

  /* Visually hidden, NOT display:none — the button's only accessible name lives in this
     span, and removing it from the box tree would leave an unlabelled control. */
  .toggle-label {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .source-toggle {
    padding: var(--space-6) var(--space-8);
  }

  /* Thumb-friendly: the timeline collapses to a single column with the stage on top. */
  .timeline-row {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .guidance,
  .tile,
  .door,
  .result {
    padding-inline: var(--space-18);
  }

  /* The last of the three sideways lists, and on a phone it is redundant. Wrapped it measured
     267px — the biggest single block in the run-up — and the <details class="stage-contents">
     directly beneath it carries the same anchors and the same counts PLUS the first item of
     each group, at 48px closed. Two answers to "what is in this stage" is one too many when
     the first guidance card is already below the fold.

     Desktop keeps the strip: there it is one sticky row that never overflows, and the
     contents disclosure is the secondary of the two.

     ONLY where that disclosure exists, which is the stage page. The 72 stage×subject leaves
     render the same component over their own bands and have nothing beneath it — hiding it
     there took away the only way to move around a page of up to 182 cards and left the reader
     with the scrollbar. Those keep it, wrapped rather than scrolling, since two to four bands
     cost one row and the redesign's rule is that nothing on a phone scrolls sideways. */
  .stage-jump:not(.stage-jump-bands) {
    display: none;
  }

  .stage-jump-bands {
    flex-wrap: wrap;
    overflow-x: visible;
    /* Static here, unlike the desktop strip. Wrapped to three rows it measures 171px, and
       pinned under the 65px header that is 28% of a 390x844 screen held permanently for
       navigation the reader uses twice. It reads once at the top instead: the first guidance
       card still lands at 538px, inside the first screen, with the strip above it. */
    position: static;
  }

  .stage-jump-label {
    display: none;
  }

  .saved-row {
    flex-direction: column;
    gap: var(--space-8);
    padding-inline: var(--space-18);
  }

  .saved-row .bookmark {
    align-self: flex-start;
  }

  .stage-jump a {
    min-block-size: 44px;
    padding-inline: var(--space-10);
    font-size: var(--fs-micro);
  }

  /* Provenance must stay readable on the device most people will read it on. */
  .source-lines {
    font-size: var(--fs-small);
  }

  .source-meta {
    font-size: var(--fs-small);
  }

  .search-form {
    flex-wrap: wrap;
  }

  .search-input {
    flex-basis: 100%;
  }

  .btn-primary {
    inline-size: 100%;
    justify-content: center;
    padding-block: var(--space-12);
  }

  .pager {
    flex-direction: column;
  }

  .pager-link.is-prev {
    text-align: start;
  }
}

/* ── Tablet ───────────────────────────────────────────────────────────────────────
   Between the compact and desktop states the header has room for the brand and nav on one
   row but not for the full three-column desktop arrangement, so it gets its own grid rather
   than inheriting whichever neighbour happens to be closer. */

@media (min-width: 45rem) and (max-width: 56.25rem) {
  .header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand toggle" "nav nav";
    align-items: center;
    gap: var(--space-8) var(--space-16);
  }

  .brand {
    grid-area: brand;
  }

  .source-toggle {
    grid-area: toggle;
  }

  .site-nav {
    grid-area: nav;
    flex-wrap: wrap;
  }

  .doors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 320px: the narrowest supported width. Nothing may overflow horizontally here. */
@media (max-width: 22.5rem) {
  .wrap {
    padding-inline: var(--space-14);
  }

  .hero-title {
    font-size: 2.05rem;
  }

  /* No font-size override here: 0.66rem was below the legibility floor for the one piece of
     text that proves where a claim came from. */
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .tile:hover {
    transform: none;
  }
}

@media print {
  .site-header,
  .site-nav,
  .source-toggle,
  .bookmark,
  .pager {
    display: none;
  }

  /* Evidence should survive printing even if the reader had sources switched off. */
  :root.sources-off .source-panel {
    display: block;
  }

  /* The only colour literals left in the file, and deliberately so: paper is white and ink is
     black. These must not follow the screen theme, so they take no token. */
  body {
    background: #fff;
    color: #000;
  }
}

/* ── Compact stage navigation ─────────────────────────────────────────────────────
   The SVG rule is proportional and beautiful, but it is a poor list: on a phone the bands
   are 29px wide and unlabelled until tapped. This is the same navigation as text — a real
   list of links, horizontally scrollable, each one a full-size target with its own name.
   Both are offered; neither is a fallback for the other. */

.stage-nav-compact {
  /* Visible by default and hidden on wide screens (below), rather than hidden by default and
     revealed at the breakpoint. Same result, but it cannot lose to source order: this block
     sits after the compact media query, so a base `display: none` here silently beat the
     `display: block` override and left phones with no labelled stage list at all. */
  margin-block: clamp(var(--space-20), 3vw, var(--space-32));
  padding-block-end: var(--space-16);
  border-block-end: 1px solid var(--line);
}

.stage-nav-summary {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-block-size: 44px;
  cursor: pointer;
  list-style: none;
}

.stage-nav-summary::-webkit-details-marker {
  display: none;
}

/* The site's own disclosure chevron, rotated when open. */
.stage-nav-summary::after {
  content: "";
  inline-size: 8px;
  block-size: 8px;
  margin-inline-start: auto;
  border-inline-end: 1.5px solid var(--text-3);
  border-block-end: 1.5px solid var(--text-3);
  transform: rotate(45deg);
  transform-origin: center;
}

.stage-nav-disclosure[open] .stage-nav-summary::after {
  transform: rotate(-135deg);
}

.stage-nav-heading {
  font-size: var(--fs-small);
  color: var(--text-3);
  margin: 0;
}

/* Wraps. This list used to scroll sideways under its own "swipe for more" hint, stacked
   between two other sideways lists. Open, it is two or three rows of pills that all stay put. */
.stage-nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  padding-block: var(--space-10) var(--space-2);
}

.stage-nav-link {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding-inline: var(--space-14);
  border: 1px solid var(--control-border);
  border-radius: 100px;
  background: var(--card);
  color: var(--text-2);
  text-decoration: none;
  font-size: var(--fs-small);
  white-space: nowrap;
}

.stage-nav-link:hover {
  border-color: var(--control-border-hover);
  color: var(--text-strong);
}

.stage-nav-link.is-current {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
  /* Deliberately NO font-weight change. Estedad is variable, so a heavier current pill is a
     wider one, and in a wrapping list that can push the last pill onto a new row on click.
     The full inversion above already says "current" without moving anything. */
}

/* Wide screens use the proportional rule as the navigator, so the redundant list goes away.
   Mutually exclusive with the compact breakpoint, so source order is irrelevant here. */
@media (min-width: 45rem) {
  .stage-nav-compact {
    display: none;
  }
}

/* What still works without a connection, and what does not. Ticks and dashes rather than one
   reassuring sentence: the raw-transcript index is 2 MB and deliberately not precached, so it
   is the one thing that stops working, and saying so is kinder than an empty result list. */
.offline-scope {
  list-style: none;
  margin: var(--space-24) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  max-inline-size: 46rem;
}

.offline-scope li {
  display: flex;
  align-items: start;
  gap: var(--space-10);
  padding-block: var(--space-12);
  border-block-start: 1px solid var(--line);
  font-size: var(--fs-small);
  line-height: 1.7;
}

.offline-scope li svg {
  flex: none;
  margin-block-start: 0.2em;
}

.offline-scope .is-available {
  color: var(--text-2);
}

.offline-scope .is-available svg {
  color: var(--teal);
}

.offline-scope .is-unavailable {
  color: var(--text-3);
}

/* How much the series actually says about a subject. Neutral by design: this is magnitude,
   and both accents are spoken for — saffron says "you are here", teal says "evidence". */
.tile-measure {
  display: block;
  block-size: 4px;
  margin-block-start: var(--space-10);
  background: var(--paper-3);
}

.tile-measure > span {
  display: block;
  block-size: 4px;
  background: var(--control-border);
}

/* ── A subject's shape across 36 months ───────────────────────────────────────────
   One column per dated stage, sized by that stage's row. RTL puts the first list item at the
   right, so birth is on the right and 36 months on the left — the same direction as the ruler
   everywhere else on the site. */
.topic-shape {
  margin-block: var(--space-16) var(--space-28);
  max-inline-size: 34rem;
}

.topic-shape-cols {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.topic-shape-cols > li {
  flex: 1;
  min-inline-size: 0;
}

.topic-shape-cols a,
.topic-shape-cols > li.is-empty {
  display: flex;
  flex-direction: column;
  block-size: 100%;
  text-decoration: none;
  /* A 44px target even where the bar itself is short. */
  min-block-size: 44px;
}

.topic-shape-bar {
  display: flex;
  align-items: flex-end;
  block-size: 56px;
  padding-inline: 1px;
  border-block-end: 1px solid var(--line-strong);
}

.topic-shape-bar > span {
  display: block;
  inline-size: 100%;
  background: var(--paper-3);
}

.topic-shape-cols a:hover .topic-shape-bar > span {
  background: var(--control-border);
}

.topic-shape-tick {
  display: block;
  padding-block-start: var(--space-4);
  font-size: var(--fs-micro);
  color: var(--text-3);
  text-align: center;
}

.topic-shape-note {
  margin: var(--space-8) 0 0;
  font-size: var(--fs-micro);
  line-height: 1.6;
  color: var(--text-3);
}

/* ── The receipt ──────────────────────────────────────────────────────────────────
   /source/<id>/ is the one page whose subject is the EVIDENCE, not the guidance. Everywhere
   else the distilled claim leads and the transcript sits under a disclosure; here the claim is
   the caption and the caption is the point, so the two swap weight. Nothing else changes: same
   components, same tokens, same order. */
.page-source .page-title {
  font-size: clamp(1.28rem, 2.6vw, 1.5rem);
  max-inline-size: var(--measure);
}

.page-source .page-lede {
  font-size: var(--fs-small);
  color: var(--text-2);
  margin-block-start: var(--space-10);
}

.page-source .source-quote p {
  font-size: var(--fs-lead);
}

.page-source .source-card {
  padding: var(--space-20) var(--space-20);
}

/* The six caption files, sized by how much of each became cited evidence. Teal, because that
   is the evidence job — the same accent the source cards carry. */
.source-index-figures {
  display: block;
  font-size: var(--fs-micro);
  color: var(--text-3);
  padding-block-start: var(--space-4);
}

.source-index-measure {
  display: block;
  /* Its parent is a wrapping flex row, so without a full basis this sizes to its content —
     and its content is one empty span. Six bars, every one of them 0px wide, under a note
     saying the bar is the number beside it. */
  inline-size: 100%;
  block-size: 4px;
  margin-block-start: var(--space-6);
  background: var(--paper-3);
}

.source-index-measure > span {
  display: block;
  block-size: 4px;
  background: var(--teal);
}

.source-index-note {
  font-size: var(--fs-micro);
  line-height: 1.7;
  color: var(--text-3);
  max-inline-size: var(--measure);
}

/* Saved items, filed by the age they speak to. A parent who starred something at four months
   and comes back at two years should be able to see at a glance which of their kept items is
   about now — and the site already remembers which stage they were last reading. */
.saved-group {
  display: flex;
  align-items: baseline;
  gap: var(--space-10);
  margin-block: var(--space-24) var(--space-8);
  padding-block-end: var(--space-6);
  border-block-end: 1px solid var(--line-strong);
  list-style: none;
}

.saved-group:first-child {
  margin-block-start: 0;
}

.saved-group-title {
  margin: 0;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-2);
}

/* Saffron's one job on this site: you are here. */
.saved-group.is-here .saved-group-title {
  color: var(--saffron);
}

.saved-group-here {
  margin-inline-start: auto;
  font-size: var(--fs-micro);
  color: var(--saffron);
}

/* ── The age, asked once ──────────────────────────────────────────────────────────
   A parent knows a number of months; the site is organised in ten bands. Every page has been
   asking them to do that conversion. This does it for them, and writes the answer down.

   JavaScript only — the chip row beneath it is the working no-JS way to choose, so the control
   is never a dead button. */
.age-set {
  display: none;
}

:root.has-js .age-set {
  display: block;
  margin-block-end: var(--space-20);
}

.age-set-q {
  margin: 0 0 var(--space-12);
  font-size: var(--fs-small);
  color: var(--text-2);
}

.age-set-row {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.age-set-value {
  font-size: 1.6rem;
  font-weight: 700;
  min-inline-size: 6ch;
}

.age-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  min-inline-size: 44px;
  padding: 0;
  border: 1px solid var(--control-border);
  border-radius: 100px;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
}

.age-step:hover {
  border-color: var(--control-border-hover);
}

/* The ruler's own bands, as tap targets. RTL puts the first one — birth — at the right, the
   same direction the rule reads everywhere else on the site. */
.age-bands {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--space-2);
  margin-block-start: var(--space-14);
}

.age-band {
  min-block-size: 44px;
  padding: 0;
  border: 1px solid var(--control-border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--text-2);
  font: inherit;
  font-size: var(--fs-small);
  cursor: pointer;
}

.age-band.is-current {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
}

.age-set-result {
  margin: var(--space-12) 0 0;
  font-size: var(--fs-small);
  color: var(--text-2);
  min-block-size: 1.6em;
}

/* ── The concerns ─────────────────────────────────────────────────────────────────
   The site is indexed the way the corpus is organised; a parent arrives with a symptom. These
   are the symptoms, in a parent's words, with the count each opens onto under the filters as
   they stand — so a chip never promises more than it delivers. */
/* Buttons with no href: without the client script they would do nothing at all, and the
   counts on them would never be filled. Same rule as every other control here — shown only
   once there is something behind it. The search box above works either way. */
.concerns {
  display: none;
}

:root.has-js .concerns {
  display: block;
  margin-block: var(--space-16) var(--space-20);
}

.concerns-lead {
  margin: 0 0 var(--space-10);
  font-size: var(--fs-micro);
  color: var(--text-3);
}

.concern-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  list-style: none;
  margin: 0;
  padding: 0;
}

.concern {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-block-size: 44px;
  padding-inline: var(--space-14);
  border: 1px solid var(--control-border);
  border-radius: 100px;
  background: var(--card);
  color: var(--text-2);
  font: inherit;
  font-size: var(--fs-small);
  cursor: pointer;
}

.concern:hover {
  border-color: var(--control-border-hover);
  color: var(--text-strong);
}

.concern.is-current {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
}

.concern-count {
  font-size: var(--fs-micro);
  color: var(--text-3);
}

.concern.is-current .concern-count {
  color: var(--on-ink-3);
}

/* Nothing at this age. Left visible and dimmed rather than removed: a chip that vanishes when
   the age changes reads as a glitch, and "the series does not discuss this at this age" is
   itself an answer. */
.concern.is-empty {
  border-style: dashed;
  border-color: var(--line-strong);
  background: none;
  color: var(--text-3);
  cursor: default;
}

/* The evidence switch, shown next to the thing it acts on.
   It lived only in the header, where a reader could flip it and see nothing change on the page
   that was describing it. Here it sits above a real guidance card whose evidence panel opens
   and closes as it is flipped. */
.sources-demo {
  margin-block: var(--space-16) var(--space-8);
  padding: var(--space-16);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-2);
}

.sources-demo .source-toggle {
  color: var(--text-2);
  border-color: var(--control-border);
}

.sources-demo-note {
  margin: var(--space-12) 0 var(--space-4);
  font-size: var(--fs-micro);
  color: var(--text-3);
}

/* The card inside the demo sits on the panel's own ground, not on a second card surface. */
.sources-demo .guidance {
  background: var(--card);
  padding-inline: var(--space-16);
}

/* Where a quote was cut out of continuous speech. Quiet on purpose — it is punctuation, not a
   feature, and the words beside it are what the reader came for. */
.quote-elision {
  color: var(--text-3);
}

/* ── Update notice ───────────────────────────────────────────────────────────────
   Shown only when a new build is waiting, and only acted on when the reader agrees — a page
   should never swap out from under someone mid-sentence. */

.pwa-update {
  position: fixed;
  inset-block-end: calc(var(--space-16) + env(safe-area-inset-bottom, 0px));
  inset-inline: var(--space-16);
  z-index: 60;
  margin-inline: auto;
  max-inline-size: 32rem;
  display: flex;
  align-items: center;
  gap: var(--space-14);
  justify-content: space-between;
  background: var(--ink);
  color: var(--on-ink);
  border-radius: var(--radius-lg);
  padding: var(--space-14) var(--space-16);
  font-size: var(--fs-small);
  box-shadow: var(--shadow);
}

.pwa-update[hidden] {
  display: none;
}

.pwa-update p {
  margin: 0;
}

.btn.pwa-refresh {
  flex: none;
  background: var(--saffron-bright);
  border-color: var(--saffron-bright);
  color: var(--on-btn-accent);
  min-block-size: 44px;
}

.btn.pwa-refresh:hover {
  background: var(--btn-accent);
  border-color: var(--btn-accent);
  color: var(--on-btn-accent);
}

.btn.pwa-refresh:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ── Offline page ────────────────────────────────────────────────────────────────── */

.offline-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-8);
  max-inline-size: 34rem;
}

.offline-list a {
  display: flex;
  align-items: center;
  min-block-size: 44px;
  padding-inline: var(--space-16);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-lg);
  background: var(--card);
  text-decoration: none;
  color: var(--text-2);
}

.offline-list a:hover {
  border-color: var(--control-border-hover);
  color: var(--text-strong);
}
/* The premium reading experience. Shared palette and dark-mode tokens live in site.css. */
:root { --home-section-space: clamp(3.25rem, 6vw, 5.5rem); }
.ui-icon { display: inline-block; flex: none; inline-size: 22px; block-size: 22px; object-fit: contain; filter: var(--icon-filter); vertical-align: middle; }
.visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.eyebrow { color: var(--text-3); font-size: .76rem; line-height: 1.8; font-weight: 550; margin-block-end: .65rem; }
.premium-button { display: inline-flex; align-items: center; justify-content: center; gap: 1.3rem; padding: .85rem 1.4rem; min-block-size: 52px; background: var(--accent-solid); color: var(--accent-on); border: 1px solid var(--accent-solid); border-radius: 11px; text-decoration: none; font-size: .86rem; font-weight: 650; transition: transform 180ms ease, box-shadow 180ms ease; }
.premium-button .ui-icon { filter: var(--button-icon-filter); opacity: .9; }
.premium-button:hover { color: var(--accent-on); transform: translateY(-2px); box-shadow: 0 6px 18px rgb(21 50 38 / 14%); }
.quiet-link, .section-link { display: inline-flex; align-items: center; gap: .8rem; min-block-size: 44px; color: var(--text-strong); font-size: .8rem; text-decoration: none; }
.quiet-link:hover, .section-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.welcome { display: grid; grid-template-columns: minmax(0,1.12fr) minmax(0,1fr); gap: clamp(2rem,5.3vw,5rem); align-items: center; padding-block: 3.7rem 3.3rem; }
.welcome-copy { padding-block: 1rem; min-inline-size: 0; }
.welcome-eyebrow { display: flex; align-items: center; gap: .65rem; color: var(--text-strong); }
.eyebrow-line { inline-size: 26px; block-size: 2px; background: var(--saffron-bright); }
.welcome h1 { font-size: clamp(2rem,3.5vw,3.3rem); line-height: 1.68; font-weight: 760; margin-block: .5rem 1.1rem; color: var(--text-strong); }
.welcome h1 span { color: var(--teal); }
.welcome-lede { max-inline-size: 34rem; color: var(--text-2); font-weight: 420; font-size: .98rem; line-height: 2.15; margin-block-end: 1.65rem; }
.welcome-actions { display: flex; flex-wrap: wrap; gap: .6rem 1.25rem; align-items: center; margin-block-end: 1.65rem; }
.home-search { display: flex; align-items: center; gap: .7rem; background: var(--card); border: 1px solid var(--control-border); border-radius: 12px; padding: .35rem .75rem .35rem .35rem; max-inline-size: 34rem; }
.home-search:focus-within { outline: 2px solid var(--teal); outline-offset: 3px; }
.home-search input { inline-size: 100%; min-inline-size: 0; background: transparent; border: 0; outline: none; padding: .45rem 0; font-family: inherit; color: var(--text); font-size: .86rem; font-weight: 450; }
.home-search input::placeholder { color: var(--text-3); opacity: 1; }
.home-search button { display: grid; place-items: center; border: 0; border-radius: 8px; inline-size: 44px; block-size: 44px; flex: none; background: var(--paper-2); cursor: pointer; }
.welcome-scope { display: flex; align-items: center; gap: .5rem; margin-block: .8rem 0; font-size: .65rem; color: var(--text-3); }
.welcome-scope .ui-icon { inline-size: 16px; block-size: 16px; }
.welcome-visual { position: relative; margin: 0 0 1.2rem; min-inline-size: 0; }
.welcome-image { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 1 / 1.08; object-fit: cover; border-radius: 130px 130px 22px 22px; background: #e9e1d1; }
.visual-caption { position: absolute; inset-inline-start: 1.6rem; inset-block-start: 2rem; display: flex; flex-direction: column; color: #244b3f; font-size: .73rem; line-height: 1.95; }
.visual-caption strong { font-size: .9rem; font-weight: 700; }
.visual-caption-line { block-size: 1px; inline-size: 38px; background: #8c7854; margin-block-start: .5rem; }
.visual-note { display: flex; align-items: center; gap: .8rem; position: absolute; inset-inline: 1.5rem; inset-block-end: -1.2rem; border: 1px solid var(--line); padding: 1rem 1.3rem; border-radius: 14px; background: var(--card); box-shadow: 0 12px 30px -12px rgb(41 43 26 / 20%); }
.visual-note > .ui-icon { inline-size: 28px; block-size: 28px; }
.visual-note span { display: flex; flex-direction: column; gap: .25rem; }
.visual-note strong { font-size: .8rem; font-weight: 600; }
.visual-note small { color: var(--text-3); font-size: .65rem; }
.resume-link { gap: .5rem; margin-block: .8rem 0; border-radius: 9px; font-size: .76rem; }
.library-strip { display: grid; grid-template-columns: 1.6fr repeat(3,1fr) 1.2fr; align-items: center; gap: 1.5rem; padding-block: 1.65rem; border-block: 1px solid var(--line); }
.library-intro { font-size: .73rem; color: var(--text-3); line-height: 2; }
.library-intro strong { font-weight: 500; color: var(--text-2); }
.library-strip > div { display: flex; align-items: center; gap: .7rem; padding-inline-start: 1.5rem; border-inline-start: 1px solid var(--line); }
.library-strip > div > strong { font-size: 1.65rem; font-weight: 650; line-height: 1.4; white-space: nowrap; }
.library-strip > div > span { color: var(--text-3); font-size: .67rem; max-inline-size: 5rem; }
.library-strip > a { display: flex; align-items: center; justify-content: end; gap: .8rem; text-decoration: none; font-size: .7rem; min-block-size: 44px; }
.journey-section { padding-block: var(--home-section-space) 0; scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-block-end: 1rem; }
.section-heading h2 { font-size: clamp(1.45rem,2.6vw,2rem); line-height: 1.6; font-weight: 720; }
.section-heading .eyebrow { margin-block-end: .45rem; }
.section-intro { font-size: .87rem; color: var(--text-2); font-weight: 450; margin-block-end: 1.8rem; }
.journey-surface { border: 1px solid var(--line); border-radius: 20px; background: var(--card); overflow: hidden; }
.journey-controls { display: none; }
:root.has-js .journey-controls { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); padding: 1.2rem 1.5rem 0; gap: .45rem; }
.journey-tab { font-family: inherit; padding: .9rem .45rem 1rem; border: 1px solid transparent; border-radius: 12px 12px 0 0; background: transparent; color: var(--text-2); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .15rem; min-inline-size: 0; transition: background 150ms ease; }
.journey-tab:hover { background: var(--paper-2); }
.journey-tab[aria-selected='true'] { background: var(--teal-soft); color: var(--text-strong); border-color: var(--line); border-block-end-color: transparent; }
.journey-age { font-size: 1.25rem; font-weight: 650; line-height: 1.5; direction: ltr; unicode-bidi: isolate; display: inline-flex; align-items: baseline; }
.journey-age > span { margin-inline: .12rem; font-size: .9rem; font-weight: 400; }
.journey-unit { font-size: .65rem; }
.journey-count { font-size: .64rem; color: var(--text-3); }
.journey-bar { margin-block: .65rem .35rem; display: block; inline-size: 100%; block-size: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
.journey-bar > span { display: block; inline-size: max(4px, var(--amount)); block-size: 100%; background: var(--teal); opacity: .65; border-radius: inherit; }
.journey-tab[aria-selected='true'] .journey-bar > span { background: var(--saffron-bright); opacity: 1; }
.journey-panel { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3.5rem; padding: 2.2rem 2.5rem; border-block-start: 1px solid var(--line); background: var(--teal-soft); min-block-size: 275px; }
.journey-panel[hidden] { display: none; }
.journey-summary .eyebrow { font-size: .66rem; }
.journey-summary h3 { font-size: 1.55rem; margin-block: .5rem .8rem; }
.journey-summary p { color: var(--text-2); font-size: .84rem; font-weight: 430; max-inline-size: 31rem; line-height: 2; }
.journey-summary .premium-button { padding: .65rem 1rem; min-block-size: 46px; font-size: .77rem; gap: 1.4rem; }
.journey-subjects { align-self: center; }
.journey-subjects-label { font-size: .68rem; color: var(--text-3); margin-block-end: .2rem; }
.journey-subjects > a { display: flex; align-items: center; gap: .8rem; padding-block: .8rem; min-block-size: 52px; border-block-end: 1px solid var(--line-strong); text-decoration: none; }
.journey-subjects > a:last-child { border: 0; }
.journey-subjects > a > span { flex: 1; font-size: .85rem; }
.journey-subjects > a > small { font-size: .67rem; color: var(--text-3); }
.journey-subjects .row-arrow { inline-size: 16px; block-size: 16px; }
.journey-footnote { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem .6rem; padding-block: .8rem; font-size: .67rem; color: var(--text-3); }
.journey-footnote p { margin: 0; margin-inline-end: auto; }
.journey-footnote a { display: inline-flex; align-items: center; min-block-size: 44px; text-underline-offset: 5px; }
.journey-fallback { display: flex; flex-wrap: wrap; gap: 1rem; padding: 1rem; }
.topic-section { padding-block: var(--home-section-space) 0; }
.home-topics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; margin-block-start: 1.8rem; }
.home-topic { display: flex; flex-direction: column; align-items: start; padding: 1.5rem; text-decoration: none; border: 1px solid var(--line); border-radius: 16px; background: var(--card); transition: transform 180ms ease,border-color 180ms ease,box-shadow 180ms ease; }
.home-topic:hover { transform: translateY(-4px); border-color: var(--teal); box-shadow: 0 12px 22px -15px rgb(34 56 40 / 20%); }
.topic-icon { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 12px; background: var(--paper-2); margin-block-end: 1rem; }
.home-topic[data-topic='sleep'] .topic-icon { background: #ebe9f0; }
.home-topic[data-topic='feeding'] .topic-icon { background: #f0e5d4; }
.home-topic[data-topic='crying'] .topic-icon { background: #f2e3dc; }
.home-topic[data-topic='attachment'] .topic-icon { background: #e7eddf; }
.home-topic[data-topic='play'] .topic-icon { background: #eee8d0; }
.home-topic[data-topic='language'] .topic-icon { background: #dfeae8; }
.topic-icon .ui-icon { filter: invert(25%) sepia(12%) saturate(900%) hue-rotate(95deg); }
.home-topic h3 { font-size: 1.1rem; line-height: 1.6; margin-block-end: .65rem; }
.home-topic p { font-size: .79rem; color: var(--text-2); font-weight: 430; line-height: 1.9; margin-block-end: 1.15rem; }
.topic-bottom { display: flex; align-items: center; justify-content: space-between; inline-size: 100%; margin-block-start: auto; padding-block-start: 1rem; border-block-start: 1px solid var(--line); font-size: .67rem; color: var(--text-3); }
.topic-bottom .ui-icon { inline-size: 18px; block-size: 18px; }
.page-home .band-claim { padding-block: var(--home-section-space) 0; }
.trust-story { display: grid; grid-template-columns: 1fr 1.1fr; gap: 4rem; padding: 2.8rem; background: var(--paper-2); border-radius: 20px; }
.trust-intro h2 { font-size: clamp(1.45rem,2.5vw,2rem); line-height: 1.7; margin-block: .7rem 1rem; }
.trust-intro p { font-size: .85rem; color: var(--text-2); font-weight: 430; line-height: 2; }
.trust-points { display: grid; align-content: center; gap: 1.4rem; }
.trust-points > div { display: flex; align-items: start; gap: 1rem; }
.trust-points .ui-icon { margin-block-start: .3rem; }
.trust-points span { display: flex; flex-direction: column; gap: .5rem; }
.trust-points strong { font-size: .88rem; font-weight: 650; }
.trust-points small { font-size: .77rem; color: var(--text-2); font-weight: 430; line-height: 1.9; }
.home-safety { padding-block: 2rem 3rem; }
.home-safety .safety { max-inline-size: none; margin: 0; border-radius: 12px; padding: 1.25rem 1.5rem; }
.home-safety .safety h2 { font-size: .9rem; }
.home-safety .safety p { font-size: .77rem; }
/* Reading pages share the same typography and visual hierarchy. */
.page-head { padding-block: 3rem 1.8rem; }
.page-title { font-size: clamp(1.7rem,3.1vw,2.5rem); line-height: 1.6; }
.page-lede { font-size: .99rem; font-weight: 430; line-height: 2.1; }
.tile { padding: 1.65rem; border-radius: 16px; }
.tile-title { line-height: 1.7; }
.tile-measure, .tile-measure > span { border-radius: 4px; }
.guidance-title { line-height: 1.75; font-weight: 700; }
.guidance-summary { font-weight: 430; line-height: 2.15; }
.group-title { line-height: 1.8; }
.search-form input[type='search'] { border-radius: 12px; }
.chip { transition: background 160ms ease,border-color 160ms ease; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
@media (max-width: 64rem) {
  .welcome { gap: 2rem; padding-block: 2.6rem; }
  .welcome h1 { font-size: clamp(1.8rem,3.4vw,2.8rem); }
  .welcome-actions { gap: .6rem; }
  .welcome-actions .premium-button { font-size: .78rem; padding-inline: 1rem; }
  .welcome-actions .quiet-link { font-size: .7rem; }
  .library-strip { gap: .8rem; grid-template-columns: 1.2fr repeat(3,1fr); }
  .library-strip > a { display: none; }
  .library-strip > div { padding-inline-start: .8rem; }
  .journey-panel { gap: 2rem; padding: 1.8rem; }
  .trust-story { gap: 2rem; padding: 2rem; }
}
@media (max-width: 44.9375rem) {
  :root { --home-section-space: 3.25rem; }
  .wrap { padding-inline: 1.25rem; }
  .page-home .site-main { display: block; }
  .welcome { grid-template-columns: minmax(0,1fr); gap: 1.6rem; padding-block: 1.7rem 2.2rem; }
  .welcome-copy { padding: 0; }
  .welcome h1 { font-size: clamp(1.85rem,6.75vw,2.8rem); line-height: 1.75; margin-block: .45rem .85rem; }
  .welcome-lede { font-size: .88rem; line-height: 2.05; margin-block-end: 1.25rem; }
  .welcome-eyebrow { font-size: .67rem; }
  .welcome-actions { margin-block-end: 1rem; gap: .45rem .8rem; }
  .welcome-actions .premium-button { flex: 1; padding-inline: .9rem; gap: .9rem; min-block-size: 50px; font-size: .79rem; }
  .welcome-actions .quiet-link { font-size: .67rem; }
  .home-search { max-inline-size: none; padding-inline-start: .6rem; }
  .home-search input { font-size: 16px; }
  .home-search > .ui-icon { inline-size: 19px; block-size: 19px; }
  .welcome-scope { font-size: .7rem; line-height: 1.8; align-items: start; }
  .welcome-scope .ui-icon { margin-block-start: 2px; }
  .welcome-visual { margin: 0 0 1.2rem; }
  .welcome-image { aspect-ratio: 1.45; border-radius: 80px 80px 16px 16px; object-position: 50% 55%; }
  .visual-caption { inset-inline-start: 1.2rem; inset-block-start: 1.2rem; font-size: .63rem; }
  .visual-caption strong { font-size: .77rem; }
  .visual-note { inset-inline: 1rem; padding: .7rem .9rem; gap: .6rem; }
  .visual-note > .ui-icon { inline-size: 22px; block-size: 22px; }
  .visual-note strong { font-size: .72rem; }
  .visual-note small { font-size: .68rem; }
  .library-strip { grid-template-columns: repeat(3,minmax(0,1fr)); gap: .25rem; padding-block: 1.15rem; }
  .library-intro { display: none; }
  .library-strip > div { padding: 0 .35rem; flex-direction: column; text-align: center; gap: .35rem; }
  .library-strip > div:nth-of-type(1) { border: 0; }
  .library-strip > div > strong { font-size: 1.4rem; }
  .library-strip > div > span { font-size: .69rem; max-inline-size: none; }
  .section-heading { gap: .7rem; align-items: center; }
  .section-heading h2 { font-size: 1.35rem; }
  .section-heading .eyebrow { font-size: .65rem; }
  .section-link { font-size: .66rem; gap: .35rem; white-space: nowrap; }
  .section-link .ui-icon { inline-size: 17px; block-size: 17px; }
  .section-intro { font-size: .79rem; line-height: 1.9; margin-block-end: 1.2rem; }
  :root.has-js .journey-controls { grid-template-columns: repeat(4,minmax(0,1fr)); gap: .4rem; padding: .75rem; }
  .journey-tab { border-radius: 9px; padding: .5rem .3rem; }
  .journey-tab[aria-selected='true'] { border-block-end-color: var(--line); }
  .journey-age { font-size: 1.08rem; }
  .journey-unit { font-size: .66rem; }
  .journey-count { font-size: .66rem; }
  .journey-bar { margin-block: .35rem .15rem; }
  .journey-panel { grid-template-columns: minmax(0,1fr); padding: 1.3rem; gap: 1rem; min-block-size: 0; }
  .journey-summary h3 { font-size: 1.3rem; }
  .journey-summary p { font-size: .81rem; }
  .journey-summary .premium-button { inline-size: 100%; justify-content: space-between; }
  .journey-subjects > a { min-block-size: 52px; padding-block: .65rem; }
  .journey-subjects > a > span { font-size: .8rem; }
  .journey-subjects > a > small { font-size: .65rem; }
  .journey-footnote { font-size: .7rem; gap: 0 .55rem; }
  .journey-footnote p { inline-size: 100%; margin-block-end: .15rem; line-height: 1.9; }
  .home-topics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; margin-block-start: 1.1rem; }
  .home-topic { padding: 1rem .85rem; border-radius: 12px; }
  .topic-icon { inline-size: 38px; block-size: 38px; margin-block-end: .8rem; }
  .topic-icon .ui-icon { inline-size: 21px; block-size: 21px; }
  .home-topic h3 { font-size: .9rem; margin-block-end: .5rem; }
  .home-topic p { font-size: .8rem; line-height: 1.9; margin-block-end: .75rem; }
  .topic-bottom { font-size: .68rem; padding-block-start: .65rem; gap: .35rem; }
  .topic-bottom .ui-icon { inline-size: 16px; block-size: 16px; }
  .trust-story { grid-template-columns: minmax(0,1fr); gap: 1.5rem; padding: 1.5rem; border-radius: 16px; }
  .trust-intro h2 { font-size: 1.5rem; }
  .trust-intro p { font-size: .8rem; }
  .trust-points { gap: 1.2rem; }
  .trust-points strong { font-size: .8rem; }
  .trust-points small { font-size: .72rem; }
  .home-safety { padding-block: 1.25rem 2rem; }
  .home-safety .safety { padding: 1rem; }
  .page-head { padding-block: 1.8rem 1.25rem; }
  .page-title { font-size: 1.65rem; }
  .page-lede { font-size: .9rem; }
  .guidance-title { font-size: 1.08rem; }
  .guidance-summary { font-size: .94rem; }
  .tile-grid { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 360px) {
  .wrap { padding-inline: 1rem; }
  .welcome-actions { flex-direction: column; align-items: stretch; }
  .welcome-actions .quiet-link { justify-content: center; min-block-size: 36px; }
  .welcome h1 { font-size: 1.78rem; }
  .section-heading { flex-wrap: wrap; gap: .25rem; }
  .topic-bottom { font-size: .64rem; }
}
@media (prefers-reduced-motion: reduce) {
  .premium-button:hover, .home-topic:hover { transform: none; }
}
@media print {
  .welcome-visual, .home-search, .journey-controls, .mobile-dock { display: none !important; }
  .journey-panel[hidden] { display: block; }
}

/* Search puts results before optional discovery. Native disclosure preserves keyboard access. */
.search-discovery { display: none; }
:root.has-js .search-discovery { display: block; margin-block: .6rem 1.25rem; border-block-end: 1px solid var(--line); }
.search-discovery summary { cursor: pointer; min-block-size: 48px; padding-block: .55rem; font-size: .82rem; color: var(--text-strong); }
.search-discovery .concerns { margin-block: .4rem 1rem; }
.search-filters { display: flex; align-items: end; flex-wrap: wrap; gap: 1rem 2rem; padding-block: .25rem 1.3rem; border-block-end: 1px solid var(--line); }
.search-filters .filter-age { margin: 0; }
.search-filters .filter-set label { min-block-size: 44px; }
.search-status { padding-block: .2rem; font-size: .8rem; }
.search-result { border-radius: 12px; }
.guide-context { margin-block: 0 2rem; padding: clamp(1.2rem, 3vw, 2rem); background: var(--card); border: 1px solid var(--line); border-inline-start: 3px solid var(--teal); border-radius: 16px; scroll-margin-block-start: calc(var(--header-h, 6rem) + 1rem); }
.guide-context > p { max-inline-size: 66ch; line-height: 2.05; }
.guide-context > .page-kicker { line-height: 1.7; }
.guide-context .context-attribution { border-block-start: 1px solid var(--line); padding-block-start: 1rem; margin-block-start: 1.3rem; color: var(--text-3); font-size: .78rem; }
.link-context { color: var(--link); text-underline-offset: .25em; }
.content-review-summary { padding: clamp(1.2rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: 16px; background: var(--card); margin-block: 0 2.5rem; }
.content-review-summary h2 { margin-block-start: .4rem; }
.content-review-summary .context-attribution { border-block-start: 1px solid var(--line); padding-block-start: 1rem; color: var(--text-3); font-size: .8rem; }
@media (max-width: 44.9375rem) {
  .page-search .page-head { padding-block-end: 1.2rem; }
  .page-search .page-lede { font-size: .84rem; }
  .search-form { flex-direction: row; gap: .5rem; }
  .search-form .search-input { font-size: 16px; padding: .7rem; inline-size: 0; }
  .search-form .btn { flex: none; inline-size: auto; min-inline-size: 64px; border-radius: 11px; font-size: .8rem; padding-inline: 1rem; }
  .search-filters { gap: .5rem; padding-block-end: 1rem; }
  .search-filters .filter-set { inline-size: 100%; font-size: .8rem; }
  .search-filters .filter-age { inline-size: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
  .search-filters .filter-age select { flex: 1; min-inline-size: 0; min-block-size: 44px; }
  .search-discovery summary { font-size: .76rem; }
  .search-discovery .concern { font-size: .76rem; }
}
/* Shared chrome: the page stays quiet around the editorial content. All foreground and
   surface colors use the same theme tokens as the reading experience. */

.site-header {
  background: var(--paper);
  color: var(--text);
  border-block-end: 1px solid var(--line);
}

.header-inner {
  display: grid;
  grid-template-columns: minmax(13rem, 1fr) auto 44px auto;
  align-items: center;
  gap: 1rem;
  min-block-size: 94px;
  padding-block: 1rem;
}

.brand {
  min-inline-size: 0;
  margin-inline-end: 0;
  gap: 0.8rem;
}

.brand-mark {
  inline-size: 42px;
  block-size: 44px;
  border-radius: 13px 13px 5px 13px;
  background-color: var(--ink);
  background-size: 2px 19px, 2px 13px, 2px 9px, 22px 2px;
  background-position: right 11px top 10px, right 18px top 10px,
    right 25px top 10px, right 11px bottom 10px;
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.brand-text strong {
  color: var(--text-strong);
  font-size: 1.08rem;
  font-weight: 750;
  line-height: 1.6;
  white-space: nowrap;
}

.brand-text small {
  color: var(--text-3);
  font-size: 0.64rem;
  line-height: 1.6;
}

.site-nav {
  gap: 0.1rem;
  flex-wrap: nowrap;
}

.site-header .nav-link {
  position: relative;
  color: var(--text-2);
  font-size: 0.8rem;
  font-weight: 500;
  padding-inline: 0.7rem;
  border-radius: 9px;
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease;
}

.site-header .nav-link:hover {
  background: var(--paper-2);
  color: var(--text-strong);
}

.site-header .nav-link.is-current {
  color: var(--text-strong);
  background: var(--paper-2);
  box-shadow: none;
  font-weight: 700;
}

.site-header .nav-link.is-current::after {
  content: "";
  position: absolute;
  inset-block-end: 4px;
  inset-inline: calc(50% - 7px);
  block-size: 2px;
  background: var(--saffron);
  border-radius: 2px;
}

.site-header .source-toggle,
:root.has-js .site-header .theme-toggle {
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  min-inline-size: 44px;
  min-block-size: 44px;
}

.site-header .source-toggle {
  gap: 0.55rem;
  padding-inline: 0.65rem;
  font-size: 0.71rem;
  white-space: nowrap;
}

.site-header .source-toggle:hover,
:root.has-js .site-header .theme-toggle:hover {
  color: var(--text-strong);
  border-color: var(--control-border);
  background: var(--paper-2);
}

.site-header .toggle-track {
  background: var(--text-3);
}

.site-header .toggle-thumb {
  background: var(--card);
}

.site-header .source-toggle[aria-pressed="true"] .toggle-track {
  background: var(--teal);
}

:root:not(.has-js) .site-header .source-toggle {
  display: none;
}

.mobile-dock {
  display: none;
}

.site-footer {
  padding-block: 4rem 2rem;
  border-start-start-radius: 32px;
  border-start-end-radius: 32px;
}

.footer-inner {
  max-inline-size: var(--wrap);
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 2.8rem 6rem;
}

.footer-intro {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 0.8rem;
}

.site-footer .footer-brand {
  color: var(--on-ink);
  font-size: 1.45rem;
  font-weight: 750;
  text-decoration: none;
  line-height: 1.7;
}

.footer-tagline {
  color: var(--on-ink-2);
  font-size: 0.86rem;
}

.footer-series {
  color: var(--on-ink-3);
  font-size: 0.75rem;
  max-inline-size: 24rem;
}

.site-footer .footer-method {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  min-block-size: 44px;
  color: var(--on-ink);
  font-size: 0.8rem;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--on-ink-3);
}

.footer-disclosures {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.footer-heading {
  color: var(--on-ink);
  margin: 0;
  font-size: 0.93rem;
  font-weight: 600;
}

.footer-scope,
.footer-safety {
  font-size: 0.8rem;
}

.footer-inner .footer-license {
  grid-column: 1 / -1;
  border-block-start: 1px solid rgb(255 255 255 / 14%);
  padding-block-start: 1.35rem;
  font-size: 0.72rem;
  line-height: 2.1;
}

@media (min-width: 45rem) and (max-width: 72rem) {
  .header-inner {
    grid-template-columns: minmax(0, 1fr) 44px auto;
    grid-template-areas: "brand theme sources" "nav nav nav";
    gap: 0.35rem 0.8rem;
    padding-block: 0.8rem 0.5rem;
  }

  .brand {
    grid-area: brand;
  }

  .site-nav {
    grid-area: nav;
    justify-content: center;
    flex-wrap: wrap;
  }

  .site-header .theme-toggle {
    grid-area: theme;
  }

  .site-header .source-toggle {
    grid-area: sources;
  }
}

@media (max-width: 44.9375rem) {
  body {
    padding-block-end: calc(76px + env(safe-area-inset-bottom, 0px));
  }

  .header-inner {
    grid-template-columns: minmax(0, 1fr) repeat(3, 44px);
    gap: 0.35rem;
    min-block-size: 76px;
    padding-block: 0.7rem;
  }

  .brand {
    gap: 0.4rem;
  }

  .brand-mark {
    inline-size: 30px;
    block-size: 36px;
    border-radius: 10px 10px 4px 10px;
    background-size: 2px 17px, 2px 11px, 2px 7px, 20px 2px;
    background-position: right 5px top 8px, right 12px top 8px,
      right 19px top 8px, right 5px bottom 7px;
  }

  .brand-text {
    gap: 0.15rem;
  }

  .brand-text strong {
    font-size: 0.89rem;
    letter-spacing: -0.025em;
  }

  .brand-text small {
    display: block;
    font-size: 0.53rem;
  }

  :root.has-js .site-header .menu-toggle {
    color: var(--text-2);
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    padding: 0;
    min-inline-size: 44px;
    min-block-size: 44px;
  }

  :root.has-js .site-header .menu-toggle:hover {
    color: var(--text-strong);
    background: var(--paper-2);
  }

  .site-header .source-toggle {
    inline-size: 44px;
    padding: 0;
  }

  .site-header .toggle-track {
    inline-size: 28px;
    block-size: 17px;
  }

  .site-header .toggle-thumb {
    inline-size: 12px;
    block-size: 12px;
  }

  .site-header .source-toggle[aria-pressed="true"] .toggle-thumb {
    translate: -11px 0;
  }

  :root.has-js .site-nav {
    padding: max(1.5rem, env(safe-area-inset-top)) 1.5rem 2rem;
  }

  :root.has-js .nav-sheet-head {
    margin-block-end: 1.6rem;
  }

  .nav-sheet-title {
    color: var(--text-strong);
    font-size: 1.35rem;
    font-weight: 650;
  }

  .nav-sheet-close {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 12px;
  }

  :root.has-js .site-nav .nav-link {
    min-block-size: 66px;
    padding-inline: 1rem;
    border-radius: 12px;
    border-block-end: 0;
    margin-block-end: 0.4rem;
  }

  :root.has-js .site-nav .nav-link:hover,
  :root.has-js .site-nav .nav-link.is-current {
    color: var(--text-strong);
    background: var(--paper-2);
  }

  .site-header .nav-link.is-current::after {
    inset-inline: auto 0;
    inset-block: calc(50% - 9px);
    inline-size: 3px;
    block-size: 18px;
  }

  :root:not(.has-js) .header-inner {
    display: flex;
    flex-wrap: wrap;
  }

  :root:not(.has-js) .site-nav {
    inline-size: 100%;
    display: flex;
    flex-wrap: wrap;
    overflow: visible;
  }

  .mobile-dock {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 35;
    gap: 0.3rem;
    padding: 8px max(18px, env(safe-area-inset-left, 0px))
      calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--card);
    border-block-start: 1px solid var(--line);
    box-shadow: 0 -4px 24px rgb(0 0 0 / 3%);
  }

  .mobile-dock-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-block-size: 60px;
    min-inline-size: 44px;
    padding: 6px;
    color: var(--text-3);
    border-radius: 13px;
    text-decoration: none;
    font-size: 0.68rem;
    line-height: 1.5;
  }

  .mobile-dock-link svg {
    flex: none;
  }

  .mobile-dock-link:hover {
    color: var(--text-strong);
    background: var(--paper-2);
  }

  .mobile-dock-link.is-current {
    color: var(--teal);
    background: var(--teal-soft);
    font-weight: 700;
  }

  .site-footer {
    border-start-start-radius: 24px;
    border-start-end-radius: 24px;
    padding-block: 2.5rem 1.75rem;
  }

  .footer-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .footer-intro {
    gap: 0.6rem;
  }

  .site-footer .footer-brand {
    font-size: 1.3rem;
  }

  .footer-scope,
  .footer-safety {
    font-size: 0.83rem;
  }

  .footer-inner .footer-license {
    font-size: 0.75rem;
  }

  .pwa-update {
    inset-block-end: calc(88px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 23.5rem) {
  .brand-mark {
    display: none;
  }
}

@media print {
  body {
    padding-block-end: 0;
  }

  .mobile-dock {
    display: none;
  }
}
/* A visible path from domain to topic to a readable branch. Colors identify the four
   domains; only the small, labelled bars encode the actual number of articles. */
:where(.knowledge-hero, .knowledge-atlas, .knowledge-topic-intro,
  .knowledge-branch-body, .knowledge-reading-layout, .knowledge-invitation,
  .knowledge-path-strip, .knowledge-breadcrumb, .kr-breadcrumb) {
  --knowledge-accent: var(--teal);
  --knowledge-tint: color-mix(in srgb, var(--knowledge-accent) 7%, var(--card));
  --knowledge-stem: color-mix(in srgb, var(--knowledge-accent) 33%, var(--line));
  min-inline-size: 0;
}

:where(.knowledge-domain, .knowledge-orbit-node, .knowledge-topic-intro,
  .knowledge-subtopic-card, .knowledge-invitation, .knowledge-reading-layout, .knowledge-branch-body)[data-domain='care'] {
  --knowledge-accent: var(--teal);
}
:where(.knowledge-domain, .knowledge-orbit-node, .knowledge-topic-intro,
  .knowledge-subtopic-card, .knowledge-invitation, .knowledge-reading-layout, .knowledge-branch-body)[data-domain='connection'] {
  --knowledge-accent: color-mix(in srgb, var(--text-strong) 42%, #bc7658);
}
:where(.knowledge-domain, .knowledge-orbit-node, .knowledge-topic-intro,
  .knowledge-subtopic-card, .knowledge-invitation, .knowledge-reading-layout, .knowledge-branch-body)[data-domain='discovery'] {
  --knowledge-accent: var(--saffron);
}
:where(.knowledge-domain, .knowledge-orbit-node, .knowledge-topic-intro,
  .knowledge-subtopic-card, .knowledge-invitation, .knowledge-reading-layout, .knowledge-branch-body)[data-domain='family'] {
  --knowledge-accent: color-mix(in srgb, var(--text-strong) 65%, #91a191);
}

.knowledge-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(1.8rem, 4vw, 4rem);
  padding-block: clamp(2.5rem, 5vw, 4.5rem) 2.75rem;
}
.knowledge-hero-copy { min-inline-size: 0; }
.knowledge-hero-copy > .eyebrow {
  display: flex;
  align-items: center;
  gap: .65rem;
  color: var(--text-strong);
}
.knowledge-hero-copy > .eyebrow::before {
  content: '';
  inline-size: 1.6rem;
  block-size: 2px;
  background: var(--saffron-bright);
}
.knowledge-hero h1 {
  max-inline-size: 15em;
  margin-block: .65rem 1rem;
  color: var(--text-strong);
  font-size: clamp(2rem, 3.4vw, 3.2rem);
  font-weight: 760;
  line-height: 1.65;
  text-wrap: balance;
}
.knowledge-hero h1 span { color: var(--teal); }
.knowledge-hero-copy > p:not(.eyebrow) {
  max-inline-size: 32rem;
  margin-block: 0 1.4rem;
  color: var(--text-2);
  font-size: .94rem;
  font-weight: 430;
  line-height: 2.15;
}
.knowledge-hero-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.7rem;
  margin-block-start: 1.75rem;
}
.knowledge-hero-stats > div { display: flex; align-items: baseline; gap: .5rem; }
.knowledge-hero-stats strong { color: var(--text-strong); font-size: 1.5rem; font-weight: 650; }
.knowledge-hero-stats span { color: var(--text-3); font-size: .73rem; }
.knowledge-orbit {
  position: relative;
  isolation: isolate;
  min-inline-size: 0;
  inline-size: 100%;
  aspect-ratio: 640 / 460;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: color-mix(in srgb, var(--paper-2) 60%, var(--card));
}
.knowledge-orbit-lines {
  position: absolute;
  inset: 0;
  z-index: -1;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
  fill: none;
  stroke: color-mix(in srgb, var(--teal) 40%, var(--line));
  stroke-width: 1.5;
}
.knowledge-orbit-lines path { vector-effect: non-scaling-stroke; }
.knowledge-orbit-lines circle { opacity: .28; stroke-width: 1; stroke-dasharray: 3 7; }
.knowledge-orbit-root {
  position: absolute;
  inset-inline-start: 38%;
  inset-block-start: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .4rem;
  inline-size: 24%;
  min-block-size: 92px;
  padding: .75rem .4rem;
  border: 1px solid var(--accent-solid);
  border-radius: 18px;
  background: var(--accent-solid);
  color: var(--accent-on);
  text-align: center;
  box-shadow: 0 0 0 9px var(--paper-2);
}
.knowledge-orbit-root strong { font-size: 1rem; font-weight: 650; line-height: 1.7; }
.knowledge-orbit-root small { font-size: .66rem; opacity: .85; }
.knowledge-orbit-root > .ui-icon { inline-size: 20px; block-size: 20px; filter: var(--button-icon-filter); }
.knowledge-orbit-node {
  --orbit-x: 19.53125%;
  --orbit-y: 21.73913%;
  position: absolute;
  inset-inline-start: calc(var(--orbit-x) - 14%);
  inset-block-start: var(--orbit-y);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  inline-size: 28%;
  min-block-size: 106px;
  padding: .75rem .4rem;
  border: 1px solid color-mix(in srgb, var(--knowledge-accent) 25%, var(--line));
  border-radius: 16px;
  background: var(--card);
  color: var(--text-strong);
  text-align: center;
  text-decoration: none;
  box-shadow: 0 5px 20px -14px rgb(24 62 53 / 24%);
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.knowledge-orbit-node[data-domain='connection'] { --orbit-x: 80.46875%; }
.knowledge-orbit-node[data-domain='discovery'] { --orbit-y: 79.34783%; }
.knowledge-orbit-node[data-domain='family'] { --orbit-x: 80.46875%; --orbit-y: 79.34783%; }
.knowledge-orbit-node:hover {
  color: var(--text-strong);
  border-color: var(--knowledge-accent);
  background: color-mix(in srgb, var(--knowledge-accent) 5%, var(--card));
  box-shadow: 0 8px 22px -14px rgb(24 62 53 / 30%);
}
.knowledge-orbit-icon {
  display: grid;
  place-items: center;
  inline-size: 30px;
  block-size: 30px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--knowledge-accent) 10%, var(--card));
}
.knowledge-orbit-icon .ui-icon { inline-size: 19px; block-size: 19px; }
.knowledge-orbit-node strong { font-size: .77rem; font-weight: 600; line-height: 1.75; }
.knowledge-orbit-node small { color: var(--text-3); font-size: .66rem; }

.knowledge-atlas { padding-block: 1.25rem 3rem; }
.knowledge-toolbar {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  margin-block-end: 1.6rem;
  padding-block: 1rem;
  border-block: 1px solid var(--line);
}
:root.has-js .knowledge-toolbar { display: flex; }
.knowledge-toolbar [data-domain-filter] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-block-size: 46px;
  padding: .65rem 1rem;
  border: 1px solid var(--control-border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text-2);
  font: inherit;
  font-size: .78rem;
  line-height: 1.6;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.knowledge-toolbar [data-domain-filter]:hover { border-color: var(--teal); color: var(--text-strong); }
.knowledge-toolbar [data-domain-filter]:is([aria-pressed='true'], [aria-selected='true'], .is-active) {
  border-color: var(--accent-solid);
  background: var(--accent-solid);
  color: var(--accent-on);
}
.knowledge-toolbar > p { margin: 0; margin-inline-end: auto; color: var(--text-3); font-size: .75rem; }
.knowledge-domain {
  --knowledge-tint: color-mix(in srgb, var(--knowledge-accent) 7%, var(--card));
  --knowledge-stem: color-mix(in srgb, var(--knowledge-accent) 33%, var(--line));
  min-inline-size: 0;
  padding-block: 2rem 2.4rem;
  scroll-margin-block-start: calc(var(--header-h) + 1.25rem);
}
.knowledge-domain + .knowledge-domain { border-block-start: 1px solid var(--line); }
.knowledge-domain[hidden] { display: none; }
.knowledge-domain-head {
  display: grid;
  grid-template-columns: 2.1rem 3rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .85rem;
  margin-block-end: 1.5rem;
}
.knowledge-domain-number { align-self: start; padding-block-start: .5rem; color: var(--knowledge-accent); font-size: .91rem; font-weight: 450; }
.knowledge-domain-icon {
  display: grid;
  place-items: center;
  inline-size: 46px;
  block-size: 46px;
  border: 1px solid color-mix(in srgb, var(--knowledge-accent) 20%, var(--line));
  border-radius: 13px;
  background: var(--knowledge-tint);
}
.knowledge-domain-icon .ui-icon { inline-size: 24px; block-size: 24px; }
.knowledge-domain-head h2 { margin: 0; color: var(--text-strong); font-size: 1.45rem; font-weight: 700; line-height: 1.75; }
.knowledge-domain-head p { max-inline-size: 48rem; margin: .3rem 0 0; color: var(--text-2); font-size: .81rem; line-height: 1.95; }
.knowledge-domain-count { display: flex; align-items: baseline; gap: .45rem; padding-inline-start: 1rem; white-space: nowrap; }
.knowledge-domain-count strong { color: var(--text-strong); font-size: 1.35rem; font-weight: 550; }
.knowledge-domain-count small { color: var(--text-3); font-size: .69rem; }
.knowledge-topic-grid { display: grid; grid-template-columns: repeat(var(--topic-columns, 3), minmax(0, 1fr)); gap: 1.15rem; }
.knowledge-topic {
  min-inline-size: 0;
  padding: 1.3rem 1.2rem .9rem;
  border: 1px solid var(--line);
  border-block-start: 3px solid var(--knowledge-accent);
  border-radius: 14px;
  background: var(--card);
}
.knowledge-topic-head { display: flex; align-items: start; gap: .7rem; padding-block-end: .65rem; }
.knowledge-topic-head > .ui-icon { inline-size: 22px; block-size: 22px; margin-block-start: .35rem; }
.knowledge-topic-head > div { flex: 1; min-inline-size: 0; }
.knowledge-topic-head h3 { margin: 0; font-size: .99rem; font-weight: 650; line-height: 1.8; }
.knowledge-topic-head h3 a { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--text-strong); text-decoration: none; }
.knowledge-topic-head h3 a:hover { text-decoration: underline; text-underline-offset: 5px; }
.knowledge-topic-head :is(.knowledge-topic-count, .topic-count),
.knowledge-topic-head > div > span { color: var(--text-3); font-size: .67rem; line-height: 1.9; }
.knowledge-branches { list-style: none; margin: .35rem 0 0; padding: 0; }
.knowledge-branches > li { position: relative; margin: 0; padding-inline-start: 1.15rem; }
.knowledge-branches > li::before {
  content: '';
  position: absolute;
  inset-inline-start: .1rem;
  inset-block: 0;
  inline-size: 1px;
  background: var(--knowledge-stem);
}
.knowledge-branches > li:last-child::before { inset-block-end: auto; block-size: 1.8rem; }
.knowledge-branches > li::after {
  content: '';
  position: absolute;
  inset-inline-start: .1rem;
  inset-block-start: 1.8rem;
  inline-size: .7rem;
  block-size: 1px;
  background: var(--knowledge-stem);
}
.knowledge-branch-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .3rem .65rem;
  min-block-size: 65px;
  padding: .75rem .55rem;
  border-radius: 9px;
  color: var(--text);
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease;
}
.knowledge-branch-row:hover { background: var(--knowledge-tint); color: var(--text-strong); }
.knowledge-branch-name { min-inline-size: 0; font-size: .78rem; font-weight: 480; line-height: 1.9; overflow-wrap: anywhere; }
.knowledge-branch-meta { display: inline-flex; align-items: center; gap: .3rem; color: var(--text-3); font-size: .63rem; white-space: nowrap; }
.knowledge-branch-meta .ui-icon { inline-size: 13px; block-size: 13px; }
.knowledge-branch-track { grid-column: 1 / -1; display: block; block-size: 2px; border-radius: 2px; background: var(--paper-2); overflow: hidden; }
.knowledge-branch-track > span { display: block; inline-size: clamp(0%, var(--branch-share, 0%), 100%); block-size: 100%; border-radius: inherit; background: var(--knowledge-accent); opacity: .65; }
.knowledge-branch-row:hover .knowledge-branch-track > span { opacity: 1; }
.knowledge-legend { display: flex; flex-wrap: wrap; align-items: start; gap: .5rem 1.5rem; margin-block: 1.5rem 0; padding-block: 1rem; border-block-start: 1px solid var(--line); color: var(--text-3); font-size: .71rem; line-height: 2; }
.knowledge-legend p { margin: 0; }
.knowledge-legend > .ui-icon { inline-size: 18px; block-size: 18px; margin-block-start: .15rem; }

.knowledge-invitation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-block: var(--home-section-space, 4rem) 0;
  padding: clamp(1.5rem, 3vw, 2.6rem);
  border: 1px solid color-mix(in srgb, var(--saffron) 20%, var(--line));
  border-radius: 20px;
  background: color-mix(in srgb, var(--saffron) 7%, var(--card));
}
.knowledge-invitation > div { min-inline-size: 0; }
.knowledge-invitation > div:first-child { flex: 1; }
.knowledge-invitation h2 { margin-block: .3rem .75rem; color: var(--text-strong); font-size: clamp(1.35rem, 2.4vw, 1.9rem); font-weight: 700; line-height: 1.7; }
.knowledge-invitation p:not(.eyebrow) { max-inline-size: 43rem; margin-block: 0; color: var(--text-2); font-size: .85rem; line-height: 2; }
.knowledge-invitation > .premium-button { flex: none; white-space: nowrap; }
.knowledge-invitation .premium-button { margin-block-start: 1.25rem; font-size: .8rem; }
.knowledge-invitation-tree { position: relative; flex: 0 1 24rem; min-inline-size: 0; padding-inline-start: 1.3rem; }
.knowledge-invitation-tree::before { content: ''; position: absolute; inset-inline-start: 0; inset-block: 1.9rem; inline-size: 1px; background: var(--line-strong); }
.knowledge-invitation-tree > a { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: .7rem; min-block-size: 60px; padding: .85rem .65rem; border-block-end: 1px solid color-mix(in srgb, var(--saffron) 12%, var(--line)); color: var(--text-strong); text-decoration: none; font-size: .81rem; }
.knowledge-invitation-tree > a:last-child { border-block-end: 0; }
.knowledge-invitation-tree > a::before { content: ''; position: absolute; inset-inline-start: -1.3rem; inset-block-start: 50%; inline-size: 1rem; block-size: 1px; background: var(--line-strong); }
.knowledge-invitation-tree > a:hover { background: color-mix(in srgb, var(--saffron) 5%, var(--card)); border-radius: 8px; }
.knowledge-invitation-tree > a small { color: var(--text-3); font-size: .68rem; white-space: nowrap; }
.knowledge-map-key { display: inline-flex; align-items: center; gap: .5rem; color: var(--text-3); font-size: .7rem; line-height: 1.9; }
.knowledge-map-key i { display: block; flex: none; inline-size: 6px; block-size: 6px; background: var(--saffron); border-radius: 50%; }
.knowledge-topic-total { color: var(--text-3); font-size: .73rem; line-height: 1.9; }

.knowledge-breadcrumb ol,
.knowledge-path-strip ol,
.kr-breadcrumb-list { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .55rem; list-style: none; padding: 0; margin: 0; }
.knowledge-breadcrumb,
.kr-breadcrumb { padding-block: 1.25rem .25rem; color: var(--text-3); font-size: .73rem; line-height: 1.9; }
:is(.knowledge-breadcrumb, .knowledge-path-strip) li,
.kr-breadcrumb-list > li { display: flex; align-items: center; gap: .55rem; min-inline-size: 0; }
:is(.knowledge-breadcrumb, .knowledge-path-strip) li + li::before,
.kr-breadcrumb-list > li + li::before { content: '/'; color: var(--line-strong); font-size: .75rem; }
:is(.knowledge-breadcrumb, .knowledge-path-strip) a,
.kr-breadcrumb-list a { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--text-2); text-decoration: none; }
:is(.knowledge-breadcrumb, .knowledge-path-strip) a:hover,
.kr-breadcrumb-list a:hover { color: var(--text-strong); text-decoration: underline; text-underline-offset: 5px; }
:is(.knowledge-breadcrumb, .knowledge-path-strip) [aria-current='page'],
.kr-breadcrumb-current { color: var(--text-strong); font-weight: 600; }
.knowledge-topic-intro { padding-block: 2rem 2.25rem; }
.knowledge-topic-intro h1 { margin-block: .35rem 1rem; color: var(--text-strong); font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1.7; font-weight: 740; }
.knowledge-topic-intro > p:not(.eyebrow) { max-inline-size: 48rem; color: var(--text-2); font-size: .95rem; line-height: 2.1; }
.knowledge-topic-intro > .ui-icon { inline-size: 32px; block-size: 32px; margin-block-end: .65rem; }
.knowledge-subtopics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-block: .5rem 2.5rem; }
.knowledge-subtopic-card {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: .7rem;
  min-inline-size: 0;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  color: var(--text);
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.knowledge-subtopic-card:hover { color: var(--text-strong); border-color: var(--knowledge-accent); box-shadow: 0 8px 20px -16px rgb(24 62 53 / 24%); }
.knowledge-subtopic-card h2,
.knowledge-subtopic-card h3,
.knowledge-subtopic-card > strong { margin: 0; color: var(--text-strong); font-size: 1.03rem; font-weight: 650; line-height: 1.8; }
.knowledge-subtopic-card p { margin: 0; color: var(--text-2); font-size: .8rem; line-height: 1.95; }
.knowledge-subtopic-card small { margin-block-start: auto; color: var(--text-3); font-size: .7rem; }
.knowledge-subtopic-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; inline-size: 100%; margin-block-end: .35rem; }
.knowledge-subtopic-top > span:last-child { display: inline-flex; align-items: center; gap: .55rem; color: var(--text-3); font-size: .69rem; }
.knowledge-subtopic-top .ui-icon { inline-size: 17px; block-size: 17px; }
.knowledge-subtopic-number { color: var(--knowledge-accent); font-size: .91rem; font-weight: 450; }
.knowledge-subtopic-example { display: block; inline-size: 100%; margin-block-start: auto; padding-block-start: 1rem; border-block-start: 1px solid var(--line); color: var(--text-3); font-size: .7rem; line-height: 1.9; }
.knowledge-article-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-block: 1.5rem 3rem; }
.knowledge-article-grid > * { min-inline-size: 0; }
.knowledge-article-entry[hidden] { display: none; }
.knowledge-article-entry > .guidance { margin: 0; }
.knowledge-branch-body { min-inline-size: 0; }
.knowledge-branch-tools { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1rem 1.25rem; border-block-end: 1px solid var(--line); }
.knowledge-branch-tools > div { min-inline-size: 0; }
.knowledge-branch-tools h2 { margin: 0 0 .4rem; color: var(--text-strong); font-size: 1.25rem; line-height: 1.8; }
.knowledge-branch-tools p { margin: 0; color: var(--text-2); font-size: .8rem; line-height: 1.9; }
.knowledge-age-filter { display: none; flex-direction: column; gap: .4rem; flex: 0 1 13rem; color: var(--text-3); font-size: .72rem; }
:root.has-js .knowledge-age-filter { display: flex; }
.knowledge-age-filter select { min-inline-size: 0; max-inline-size: 100%; inline-size: 100%; min-block-size: 46px; padding: .65rem .75rem; border: 1px solid var(--control-border); border-radius: 9px; background: var(--card); color: var(--text); font: inherit; font-size: .79rem; cursor: pointer; }
.knowledge-filter-status { margin-block: .85rem 0; color: var(--text-3); font-size: .72rem; line-height: 1.9; }
.knowledge-next-branches { padding-block: 2rem 1rem; border-block-start: 1px solid var(--line); }
.knowledge-age-view { margin-block: .5rem 3rem; border-block: 1px solid var(--line); }
.knowledge-age-view > summary { min-block-size: 56px; padding: 1rem .25rem; color: var(--text-strong); font-size: .87rem; line-height: 1.9; cursor: pointer; }
.knowledge-age-view > summary::marker { color: var(--teal); }
.knowledge-age-view[open] > summary { border-block-end: 1px solid var(--line); }
.knowledge-path-strip { margin-block: .75rem 1.5rem; padding: .5rem 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-2); font-size: .73rem; line-height: 1.8; }
.knowledge-reading-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "article map"; align-items: start; gap: clamp(1.5rem, 3.2vw, 3rem); margin-block: 1.25rem 3rem; }
.knowledge-reading-main { grid-area: article; min-inline-size: 0; }
.knowledge-reader-aside { grid-area: map; position: sticky; inset-block-start: calc(var(--header-h) + 1rem); align-self: start; min-inline-size: 0; max-block-size: calc(100dvh - var(--header-h) - 2rem); overflow: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }

/* The article's native-details tree works with or without JavaScript. */
.kr-map { border: 1px solid var(--line); border-radius: 14px; background: var(--card); overflow: hidden; }
.kr-map-summary { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; min-block-size: 56px; padding: 1rem; color: var(--text-strong); font-size: .78rem; font-weight: 600; line-height: 1.8; list-style: none; cursor: pointer; }
.kr-map-summary::-webkit-details-marker,
.kr-branch-summary::-webkit-details-marker { display: none; }
.kr-map-summary::after,
.kr-branch-summary::after { content: ''; flex: none; inline-size: 10px; block-size: 7px; margin-inline-start: auto; background: currentColor; clip-path: polygon(0 0, 50% 50%, 100% 0, 100% 35%, 50% 85%, 0 35%); transition: transform 160ms ease; }
.kr-map[open] > .kr-map-summary::after,
.kr-branch[open] > .kr-branch-summary::after { transform: rotate(180deg); }
.kr-map-current { max-inline-size: 100%; color: var(--text-3); font-size: .69rem; font-weight: 450; }
.kr-map[open] > .kr-map-summary { border-block-end: 1px solid var(--line); background: var(--paper-2); }
.kr-wayfinding { padding: 1.15rem; }
.kr-eyebrow { margin: 0 0 .75rem; color: var(--text-strong); font-size: .85rem; font-weight: 650; line-height: 1.8; }
.kr-path { list-style: none; margin: 0 0 1rem; padding: 0; }
.kr-path > li { position: relative; min-inline-size: 0; }
.kr-path > li + li { margin-inline-start: .7rem; padding-inline-start: .65rem; border-inline-start: 1px solid var(--line-strong); }
.kr-path a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-block-size: 44px; padding-block: .4rem; color: var(--text-2); font-size: .76rem; line-height: 1.9; text-decoration: none; }
.kr-path a:hover { color: var(--text-strong); text-decoration: underline; text-underline-offset: 4px; }
.kr-count { flex: none; color: var(--text-3); font-size: .65rem; font-weight: 400; white-space: nowrap; }
.kr-branches { border-block-start: 1px solid var(--line); }
.kr-branch { margin: 0; border-block-end: 1px solid var(--line); }
.kr-branch-summary { display: flex; align-items: center; gap: .55rem; min-block-size: 54px; padding-block: .8rem; color: var(--text-2); font-size: .76rem; line-height: 1.85; list-style: none; cursor: pointer; }
.kr-branch-name { min-inline-size: 0; flex: 1; }
.kr-branch-summary:hover { color: var(--text-strong); }
.kr-branch-summary::after { margin-inline-start: 0; inline-size: 8px; block-size: 6px; }
.kr-branch.is-current > .kr-branch-summary { color: var(--text-strong); font-weight: 650; }
.kr-branch.is-current > .kr-branch-summary::before { content: ''; flex: none; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--saffron); }
.kr-branch-body { padding-block: .2rem 1rem; }
.kr-section-label { margin: 0 0 .55rem; color: var(--text-3); font-size: .66rem; font-weight: 500; line-height: 1.9; }
.kr-nearby { list-style: none; margin: 0; padding: 0; padding-inline-start: .55rem; }
.kr-nearby > li { position: relative; min-inline-size: 0; padding-inline-start: .75rem; border-inline-start: 1px solid var(--line-strong); }
.kr-nearby > li::before { content: ''; position: absolute; inset-inline-start: -.2rem; inset-block-start: 1.05rem; inline-size: .35rem; block-size: .35rem; border-radius: 50%; background: var(--line-strong); box-shadow: 0 0 0 3px var(--card); }
.kr-nearby a,
.kr-nearby [aria-current='page'] { display: block; min-block-size: 44px; padding: .55rem .35rem; color: var(--text-2); font-size: .73rem; line-height: 1.95; text-decoration: none; overflow-wrap: anywhere; }
.kr-nearby a:hover { color: var(--text-strong); text-decoration: underline; text-underline-offset: 4px; }
.kr-nearby .is-current::before { background: var(--saffron); }
.kr-nearby [aria-current='page'] { color: var(--text-strong); font-weight: 600; }
.kr-all { display: inline-flex; align-items: center; gap: .5rem; min-block-size: 44px; margin-block-start: .3rem; color: var(--text-strong); font-size: .71rem; text-underline-offset: 5px; }
.kr-broader { margin-block-start: 1.3rem; }
.kr-next-branch { display: flex; align-items: start; justify-content: space-between; gap: .6rem; min-block-size: 44px; padding-block: .35rem; color: var(--text-strong); text-decoration: none; }
.kr-next-branch strong { font-size: .79rem; font-weight: 550; line-height: 1.9; }
.kr-next-branch:hover strong { text-decoration: underline; text-underline-offset: 5px; }
.kr-next-branch .kr-count { margin-block-start: .3rem; }
.kr-description { margin: .25rem 0 0; color: var(--text-3); font-size: .7rem; line-height: 1.95; }

:where(.knowledge-hero, .knowledge-atlas, .knowledge-subtopics,
  .knowledge-reading-layout, .knowledge-invitation, .knowledge-path-strip,
  .knowledge-breadcrumb, .kr-breadcrumb) :focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }

@media (min-width: 64rem) {
  .kr-map[open] > .kr-map-summary { font-size: .7rem; font-weight: 500; }
  .kr-map-current { inline-size: 100%; }
  .kr-map[open] > .kr-map-summary::after { position: absolute; inset-inline-end: 1rem; }
  .kr-map-summary { position: relative; padding-inline-end: 2rem; }
}
@media (max-width: 71rem) {
  .knowledge-topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .knowledge-hero { gap: 1.8rem; }
  .knowledge-orbit-node { min-block-size: 94px; }
  .knowledge-orbit-root { min-block-size: 80px; }
  .knowledge-orbit-root strong { font-size: .88rem; }
  .knowledge-orbit-node strong { font-size: .71rem; }
}
@media (max-width: 63.9375rem) {
  .knowledge-reading-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "map" "article"; gap: 1.25rem; }
  .knowledge-reader-aside { position: static; max-block-size: none; overflow: visible; }
  .kr-wayfinding { padding: 1.25rem; }
  .kr-map-summary { padding: .85rem 1.15rem; }
  .kr-map-current { margin-inline-start: auto; }
  .kr-map-summary::after { margin-inline-start: 0; }
  .knowledge-subtopics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 49.9375rem) {
  .knowledge-hero { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; padding-block: 2rem 1.5rem; }
  .knowledge-hero-copy > p:not(.eyebrow) { max-inline-size: 40rem; }
  .knowledge-hero h1 { max-inline-size: 22em; font-size: clamp(1.8rem, 5.5vw, 2.6rem); }
  .knowledge-orbit { max-inline-size: 36rem; justify-self: center; }
  .knowledge-hero-stats { gap: 1rem 1.4rem; margin-block-start: 1.2rem; }
  .knowledge-invitation { align-items: start; flex-direction: column; gap: 1.2rem; }
  .knowledge-invitation-tree { flex: auto; inline-size: 100%; }
}
@media (max-width: 44.9375rem) {
  .mobile-dock { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .knowledge-topic-grid,
  .knowledge-subtopics { grid-template-columns: minmax(0, 1fr); }
  .knowledge-toolbar { gap: .5rem; margin-block-end: .7rem; }
  .knowledge-toolbar > p { inline-size: 100%; }
  .knowledge-toolbar [data-domain-filter] { flex: 1 1 auto; padding: .65rem .75rem; font-size: .72rem; }
  .knowledge-domain { padding-block: 1.75rem 2rem; }
  .knowledge-domain-head { grid-template-columns: 38px minmax(0, 1fr) auto; gap: .7rem; align-items: start; margin-block-end: 1.15rem; }
  .knowledge-domain-number { display: none; }
  .knowledge-domain-icon { inline-size: 38px; block-size: 38px; border-radius: 11px; }
  .knowledge-domain-icon .ui-icon { inline-size: 21px; block-size: 21px; }
  .knowledge-domain-head h2 { font-size: 1.16rem; line-height: 1.8; }
  .knowledge-domain-head p { font-size: .76rem; }
  .knowledge-domain-count { flex-direction: column; align-items: center; gap: 0; padding-inline-start: .25rem; }
  .knowledge-domain-count strong { font-size: 1.13rem; line-height: 1.7; }
  .knowledge-domain-count small { font-size: .63rem; }
  .knowledge-topic { padding: 1.1rem 1rem .75rem; }
  .knowledge-topic-head h3 { font-size: .97rem; }
  .knowledge-branch-row { min-block-size: 64px; gap: .4rem .6rem; }
  .knowledge-branch-name { font-size: .8rem; }
  .knowledge-branch-meta { font-size: .68rem; }
  .knowledge-legend { font-size: .7rem; }
  .knowledge-invitation { padding: 1.4rem; border-radius: 16px; }
  .knowledge-invitation p:not(.eyebrow) { font-size: .8rem; }
  .knowledge-invitation > .premium-button { inline-size: 100%; justify-content: space-between; }
  .knowledge-invitation .premium-button { inline-size: 100%; justify-content: space-between; }
  .knowledge-invitation-tree > a { grid-template-columns: 24px minmax(0, 1fr) auto; gap: .5rem; font-size: .78rem; }
  .knowledge-map-key { inline-size: 100%; font-size: .67rem; }
  .knowledge-atlas > .section-heading,
  .knowledge-topic-intro > .section-heading { flex-wrap: wrap; }
  .knowledge-topic-intro { padding-block: 1.25rem 1.5rem; }
  .knowledge-topic-intro h1 { font-size: 1.8rem; }
  .knowledge-topic-intro > p:not(.eyebrow) { font-size: .85rem; }
  .knowledge-subtopic-card { padding: 1.25rem; }
  .knowledge-branch-tools { align-items: start; flex-direction: column; gap: 1rem; }
  .knowledge-age-filter { flex: auto; inline-size: 100%; }
  .knowledge-age-filter select { font-size: 16px; }
  .knowledge-next-branches { padding-block-start: 1.5rem; }
  .knowledge-breadcrumb,
  .kr-breadcrumb { padding-block-start: .75rem; font-size: .68rem; }
  .knowledge-path-strip { padding-inline: .75rem; font-size: .69rem; }
  .knowledge-reading-layout { margin-block-start: .7rem; }
  .kr-map-summary { gap: .25rem .5rem; font-size: .75rem; }
  .kr-map-current { inline-size: calc(100% - 1.25rem); margin-inline-start: 0; font-size: .7rem; }
  .kr-wayfinding { padding: 1rem; }
  .kr-branch-summary { min-block-size: 56px; font-size: .8rem; }
  .kr-nearby a,
  .kr-nearby [aria-current='page'] { font-size: .77rem; }
}
@media (max-width: 24.9375rem) {
  .knowledge-orbit { border-radius: 20px; }
  .knowledge-orbit-node { inset-inline-start: calc(var(--orbit-x) - 16%); inline-size: 32%; min-block-size: 80px; padding: .5rem .25rem; gap: .15rem; border-radius: 11px; }
  .knowledge-orbit-icon { inline-size: 23px; block-size: 23px; border-radius: 7px; }
  .knowledge-orbit-icon .ui-icon { inline-size: 16px; block-size: 16px; }
  .knowledge-orbit-node strong { font-size: .67rem; line-height: 1.65; }
  .knowledge-orbit-node small { font-size: .61rem; }
  .knowledge-orbit-root { inset-inline-start: 37%; inline-size: 26%; min-block-size: 65px; padding: .55rem .2rem; gap: .2rem; border-radius: 12px; box-shadow: 0 0 0 5px var(--paper-2); }
  .knowledge-orbit-root strong { font-size: .76rem; }
  .knowledge-orbit-root small { font-size: .59rem; }
  .knowledge-hero-stats { gap: .8rem 1rem; }
  .knowledge-hero-stats strong { font-size: 1.3rem; }
  .knowledge-hero-stats span { font-size: .69rem; }
  .knowledge-branch-row { grid-template-columns: minmax(0, 1fr); }
  .knowledge-branch-meta { justify-self: start; }
  .knowledge-branches > li:last-child::before { block-size: 1.85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .knowledge-orbit-node,
  .knowledge-toolbar [data-domain-filter],
  .knowledge-branch-row,
  .knowledge-subtopic-card,
  .kr-map-summary::after,
  .kr-branch-summary::after { transition: none; }
}
@media (forced-colors: active) {
  .knowledge-orbit-lines { stroke: CanvasText; }
  .knowledge-orbit-root { border-color: CanvasText; }
  .knowledge-branches > li::before,
  .knowledge-branches > li::after,
  .knowledge-branch-track > span,
  .kr-nearby > li::before,
  .kr-branch.is-current > .kr-branch-summary::before,
  .kr-map-summary::after,
  .kr-branch-summary::after { background: CanvasText; }
}
/* Editorial chapter pages with generous reading space.
   Kind colors describe the content; they never imply reading progress. */
.leaf-page {
  --leaf-accent: var(--teal);
  --knowledge-accent: var(--leaf-accent);
  --leaf-kind: var(--teal);
  --leaf-surface: color-mix(in srgb, var(--leaf-accent) 5%, var(--card));
  --leaf-reading-measure: 66ch;
  min-inline-size: 0;
  padding-block-end: 3rem;
}
.leaf-page[data-domain='connection'] { --leaf-accent: color-mix(in srgb, var(--text-strong) 42%, #bc7658); }
.leaf-page[data-domain='discovery'] { --leaf-accent: var(--saffron); }
.leaf-page[data-domain='family'] { --leaf-accent: color-mix(in srgb, var(--text-strong) 65%, #91a191); }
.leaf-page :where(.leaf-card, [data-leaf-index-item], [data-leaf-kind])[data-kind='focus'],
.leaf-page [data-leaf-kind='focus'] { --leaf-kind: var(--teal); }
.leaf-page :where(.leaf-card, [data-leaf-index-item], [data-leaf-kind])[data-kind='try'],
.leaf-page [data-leaf-kind='try'] { --leaf-kind: var(--saffron); }
.leaf-page :where(.leaf-card, [data-leaf-index-item], [data-leaf-kind])[data-kind='watch'],
.leaf-page [data-leaf-kind='watch'] { --leaf-kind: color-mix(in srgb, var(--text-strong) 40%, #bc7658); }
.leaf-page :where(.leaf-card, [data-leaf-index-item], [data-leaf-kind])[data-kind='says'],
.leaf-page [data-leaf-kind='says'] { --leaf-kind: color-mix(in srgb, var(--text-3) 72%, var(--teal)); }

.leaf-page > .knowledge-breadcrumb { padding-block: 1.4rem .35rem; font-size: .78rem; }
.leaf-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, .8fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding-block: clamp(2rem, 4vw, 3.5rem) clamp(2.5rem, 4vw, 4rem);
}
.leaf-hero-copy { min-inline-size: 0; padding-block: .5rem; }
.leaf-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; margin-block: 0 1rem; color: var(--text-2); font-size: .82rem; font-weight: 500; line-height: 1.8; }
.leaf-kicker > .ui-icon { inline-size: 22px; block-size: 22px; }
.leaf-kicker a { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--text-2); text-decoration: none; }
.leaf-kicker a:hover { color: var(--text-strong); text-decoration: underline; text-underline-offset: 5px; }
.leaf-hero h1 { max-inline-size: 18em; margin-block: 0 1.2rem; color: var(--text-strong); font-size: clamp(2rem, 3.4vw, 3.25rem); font-weight: 750; line-height: 1.65; text-wrap: balance; }
.leaf-description { max-inline-size: 43rem; margin-block: 0 1.5rem; color: var(--text-2); font-size: 1.0625rem; font-weight: 430; line-height: 2.15; }
.leaf-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1.3rem; margin-block-start: 1.65rem; }
.leaf-hero-actions .premium-button { min-block-size: 52px; font-size: .87rem; }
.leaf-hero-actions .quiet-link { min-block-size: 44px; font-size: .82rem; }

.leaf-reading-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; grid-template-areas: 'reading index'; align-items: start; gap: clamp(1.5rem, 3.5vw, 3.5rem); padding-block-start: 1rem; border-block-start: 1px solid var(--line); }
.leaf-reading-main { grid-area: reading; min-inline-size: 0; }
.leaf-index-aside { grid-area: index; position: sticky; inset-block-start: calc(var(--header-h, 6rem) + 1.25rem); min-inline-size: 0; margin-block-start: 1rem; }
.leaf-index { border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.leaf-index > summary { display: flex; align-items: center; gap: .6rem; min-block-size: 62px; padding: 1rem 1.1rem; color: var(--text-strong); font-size: .87rem; font-weight: 600; line-height: 1.8; list-style: none; cursor: pointer; }
.leaf-index > summary::-webkit-details-marker { display: none; }
.leaf-index > summary > span:first-child { flex: 1; min-inline-size: 0; }
.leaf-index > summary > span:not(:first-child) { flex: none; color: var(--text-3); font-size: .74rem; font-weight: 450; }
.leaf-index > summary :is(.ui-icon, svg, [aria-hidden='true']) { flex: none; inline-size: 16px; block-size: 16px; transition: transform 160ms ease; }
.leaf-index > summary > span[aria-hidden='true'] { display: grid; place-items: center; font-size: 1.15rem; line-height: 1; }
.leaf-index[open] > summary { border-block-end: 1px solid var(--line); background: var(--paper-2); border-start-start-radius: 13px; border-start-end-radius: 13px; }
.leaf-index[open] > summary :is(.ui-icon, svg, [aria-hidden='true']) { transform: rotate(180deg); }
.leaf-index nav { max-block-size: min(38rem, calc(100dvh - var(--header-h, 6rem) - 11rem)); padding: .7rem; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.leaf-index ol { margin: 0; padding: 0; list-style: none; }
.leaf-index li { margin: 0; padding: 0; min-inline-size: 0; }
.leaf-index a[data-leaf-index-link] { display: grid; grid-template-columns: 25px minmax(0, 1fr); align-items: baseline; gap: .6rem; min-block-size: 48px; padding: .75rem .55rem; border: 1px solid transparent; border-radius: 9px; color: var(--text-2); font-size: .79rem; font-weight: 450; line-height: 1.95; text-decoration: none; transition: color 150ms ease, background 150ms ease, border-color 150ms ease; }
.leaf-index-number { color: var(--text-3); font-size: .67rem; font-weight: 450; line-height: 2; font-variant-numeric: tabular-nums; }
.leaf-index a[data-leaf-index-link]:hover { background: var(--paper-2); color: var(--text-strong); }
.leaf-index a[data-leaf-index-link][aria-current='location'] { border-color: color-mix(in srgb, var(--leaf-kind) 28%, var(--line)); background: color-mix(in srgb, var(--leaf-kind) 8%, var(--card)); color: var(--text-strong); font-weight: 600; }
.leaf-index a[aria-current='location'] .leaf-index-number { color: var(--leaf-kind); font-weight: 650; }
.leaf-index-note { margin: 0; padding: .85rem 1.1rem 1rem; border-block-start: 1px solid var(--line); color: var(--text-3); font-size: .71rem; font-weight: 430; line-height: 1.95; }

.leaf-page :is(#branch-reading, #leaf-contents) { scroll-margin-block-start: calc(var(--header-h, 6rem) + 1.25rem); }
.leaf-page #leaf-contents { scroll-margin-block-start: calc(var(--header-h, 6rem) + 5rem); }
.leaf-page .knowledge-branch-tools { align-items: center; padding-block: 1rem 1.25rem; }
.leaf-page .knowledge-branch-tools h2 { margin-block: 0 .45rem; color: var(--text-strong); font-size: 1.4rem; font-weight: 700; line-height: 1.7; }
.leaf-page .knowledge-branch-tools p { color: var(--text-2); font-size: 1rem; font-weight: 430; line-height: 2; }
.leaf-page .knowledge-branch-tools .eyebrow { margin-block-end: .5rem; color: var(--text-3); font-size: .73rem; line-height: 1.8; }
.leaf-page .knowledge-age-filter { flex-basis: 12rem; font-size: .77rem; }
.leaf-page .knowledge-age-filter select { min-block-size: 48px; padding: .65rem .7rem; font-size: .87rem; }
.leaf-kind-filters { display: none; }
:root.has-js .leaf-kind-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-block: 1.15rem .8rem; }
.leaf-kind-filters button[data-leaf-kind] { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-block-size: 44px; padding: .6rem .85rem; border: 1px solid var(--control-border); border-radius: 9px; background: var(--card); color: var(--text-2); font: inherit; font-size: .77rem; line-height: 1.6; cursor: pointer; transition: color 150ms ease, border-color 150ms ease, background 150ms ease; }
.leaf-kind-filters button[data-leaf-kind]:hover { color: var(--text-strong); border-color: var(--leaf-kind); background: color-mix(in srgb, var(--leaf-kind) 5%, var(--card)); }
.leaf-kind-filters button[data-leaf-kind]:is([aria-pressed='true'], [aria-selected='true']) { border-color: var(--accent-solid); background: var(--accent-solid); color: var(--accent-on); }
.leaf-kind-filters button :is(span, small, strong):last-child { font-weight: 450; font-size: .73rem; font-variant-numeric: tabular-nums; }
.leaf-page .knowledge-filter-status { margin-block: .7rem 1.1rem; color: var(--text-3); font-size: .77rem; line-height: 1.9; }
.leaf-page .knowledge-article-grid { gap: 1.35rem; margin-block: 1.25rem 3rem; }

.leaf-card {
  min-inline-size: 0;
  padding: clamp(1.35rem, 2.6vw, 2.15rem);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--leaf-kind);
  border-radius: 18px;
  background: var(--card);
  box-shadow: 0 6px 24px -21px rgb(24 62 53 / 22%);
  scroll-margin-block-start: calc(var(--header-h, 6rem) + 1.5rem);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.leaf-card:has(.guidance:target),
.leaf-card:has(.guidance:focus-visible),
.leaf-card:target { border-color: var(--leaf-kind); box-shadow: 0 0 0 3px color-mix(in srgb, var(--leaf-kind) 11%, transparent); }
.leaf-card-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-block-end: .6rem; }
.leaf-card-number { display: inline-flex; align-items: center; gap: .6rem; color: var(--leaf-kind); font-size: 1.12rem; font-weight: 500; line-height: 1.7; font-variant-numeric: tabular-nums; }
.leaf-card-number::after { content: ''; inline-size: 24px; block-size: 1px; background: color-mix(in srgb, var(--leaf-kind) 40%, var(--line)); }
.leaf-card-age { color: var(--text-3); font-size: .74rem; font-weight: 430; line-height: 1.9; text-align: end; }
.leaf-card .guidance { margin: 0; padding: .45rem 0 0; border: 0; border-radius: 0; background: transparent; scroll-margin-block-start: calc(var(--header-h, 6rem) + 1.5rem); }
.leaf-card .guidance:target { border: 0; }
.leaf-card .guidance:focus { outline: none; }
.leaf-card .guidance-kind { display: inline-flex; align-items: center; gap: .45rem; margin: .15rem 0 .45rem; color: var(--leaf-kind); font-size: .74rem; font-weight: 550; line-height: 1.8; }
.leaf-card .guidance-kind::before { content: ''; inline-size: 5px; block-size: 5px; border-radius: 50%; background: currentColor; }
.leaf-card .guidance-title { max-inline-size: 34em; margin-block: .25rem .9rem; color: var(--text-strong); font-size: clamp(1.24rem, 1.75vw, 1.58rem); font-weight: 700; line-height: 1.85; text-wrap: pretty; }
.leaf-card .guidance-title a { display: inline-flex; align-items: center; min-block-size: 44px; color: inherit; text-decoration: none; }
.leaf-card .guidance-title a:hover { text-decoration: underline; text-decoration-color: var(--leaf-kind); text-underline-offset: 7px; }
.leaf-card .guidance-summary { max-inline-size: var(--leaf-reading-measure); margin-block: 0 1.35rem; color: var(--text-2); font-size: 1.0625rem; font-weight: 430; line-height: 2.2; }
.leaf-card .guidance-action { max-inline-size: var(--leaf-reading-measure); margin-block: .5rem 1.25rem; padding: 1rem 1.15rem; border-inline-start: 2px solid var(--teal); border-radius: 10px; background: color-mix(in srgb, var(--teal) 5%, var(--card)); color: var(--text); font-size: 1rem; font-weight: 450; line-height: 2.1; }
.leaf-card .action-label { margin-block-end: .35rem; color: var(--teal); font-size: .75rem; font-weight: 600; line-height: 1.8; }
.leaf-card .note { max-inline-size: var(--leaf-reading-measure); margin-block: .5rem 1.25rem; padding: 1rem 1.15rem; border-radius: 10px; font-size: 1rem; font-weight: 430; line-height: 2.05; }
.leaf-card .note-caveat { border-inline-start: 2px solid var(--line-strong); background: var(--paper-2); color: var(--text-2); }
.leaf-card .note-conflict { background: var(--saffron-soft); color: var(--on-saffron-soft); }
.leaf-card .note-label { margin-block-end: .35rem; font-size: .76rem; font-weight: 600; line-height: 1.85; }
.leaf-card :is(.guidance-provenance, .guidance-meta) { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .8rem; margin: 1.5rem 0 0; padding-block-start: 1.05rem; border-block-start: 1px solid var(--line); font-size: .81rem; }
.leaf-card .chip-part { padding: .3rem .6rem; border-color: color-mix(in srgb, var(--teal) 30%, var(--line)); border-radius: 6px; color: var(--text-3); font-size: .68rem; font-weight: 450; line-height: 1.8; }
.leaf-card .link-context { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--text-strong); font-size: .83rem; font-weight: 550; text-underline-offset: 5px; }
.leaf-card .link-source { min-block-size: 44px; color: var(--teal); font-size: .8rem; font-weight: 500; }
.leaf-card .bookmark { min-inline-size: 44px; min-block-size: 44px; margin-inline-start: auto; padding: .5rem .75rem; gap: .4rem; border: 1px solid var(--control-border); border-radius: 9px; background: var(--card); color: var(--text-2); font-size: .77rem; line-height: 1.7; }
.leaf-card .bookmark:hover { background: var(--paper-2); color: var(--text-strong); border-color: var(--control-border-hover); }
.leaf-card .bookmark[aria-pressed='true'] { background: var(--saffron-soft); border-color: var(--saffron); color: var(--on-saffron-soft); }
.leaf-card .bookmark-icon { font-size: 1.15rem; line-height: 1; }
.leaf-card .source-panel { margin-block-start: 1.15rem; padding-block-start: .65rem; border-block-start: 1px dashed var(--line-strong); }
.leaf-card .source-panel > summary { min-block-size: 48px; font-size: .86rem; line-height: 1.9; }
.leaf-card .source-list { gap: .85rem; }
.leaf-card .source-card { min-inline-size: 0; padding: 1.15rem; border-radius: 12px; }
.leaf-card .source-quote { margin-inline: 0; color: var(--text); font-size: 1rem; font-weight: 430; line-height: 2.15; }
.leaf-card .source-quote p { font-size: inherit; line-height: inherit; }
.leaf-card .source-head { font-size: .8rem; }
.leaf-card .source-lines { max-inline-size: 100%; white-space: normal; overflow-wrap: anywhere; }
.leaf-card :is(.source-meta, .source-caveat, .evidence-fallback) { font-size: .9rem; line-height: 2; }
.leaf-card .evidence-fallback a { display: inline-flex; align-items: center; min-block-size: 44px; }

/* Explicitly retain native filtering and the original evidence visibility behavior. */
.leaf-page :is(.leaf-card, [data-leaf-index-item], [data-branch-empty])[hidden] { display: none; }
.leaf-page :is(a, button, summary, select):focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }

@media (max-width: 71rem) {
  .leaf-hero { gap: 2rem; grid-template-columns: minmax(0, 1fr) minmax(280px, .7fr); }
  .leaf-reading-layout { grid-template-columns: minmax(0, 1fr) 270px; gap: 1.5rem; }
  .leaf-card { padding: 1.5rem; }
  .leaf-index a[data-leaf-index-link] { font-size: .76rem; }
  .leaf-page .knowledge-branch-tools { flex-wrap: wrap; gap: 1rem; }
  .leaf-page .knowledge-age-filter { flex-basis: 100%; }
  .leaf-page .knowledge-age-filter select { max-inline-size: 19rem; }
}
@media (max-width: 63.9375rem) {
  .leaf-reading-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'index' 'reading'; gap: 1rem; }
  .leaf-index-aside { position: static; margin-block-start: 0; }
  .leaf-index nav { max-block-size: min(27rem, 60dvh); }
  .leaf-index a[data-leaf-index-link] { font-size: .85rem; min-block-size: 52px; }
  .leaf-page .knowledge-age-filter { flex: 0 1 13rem; }
  .leaf-page .knowledge-branch-tools { flex-wrap: nowrap; }
}
@media (max-width: 49.9375rem) {
  .leaf-hero { grid-template-columns: minmax(0, 1fr); gap: 1.7rem; padding-block: 1.5rem 2.25rem; }
  .leaf-hero-copy { padding: 0; }
  .leaf-hero h1 { max-inline-size: 22em; font-size: clamp(1.85rem, 5.2vw, 2.6rem); }
  .leaf-description { max-inline-size: 42rem; }
}
@media (max-width: 44.9375rem) {
  .leaf-page > .knowledge-breadcrumb { padding-block: .8rem .25rem; font-size: .7rem; }
  .leaf-hero h1 { margin-block-end: 1rem; font-size: clamp(1.85rem, 6.5vw, 2.55rem); line-height: 1.7; }
  .leaf-kicker { margin-block-end: .6rem; font-size: .77rem; }
  .leaf-description { margin-block-end: 1.15rem; font-size: 1rem; line-height: 2.1; }
  .leaf-hero-actions { margin-block-start: 1.15rem; gap: .55rem .8rem; }
  .leaf-hero-actions .premium-button { flex: 1 1 auto; justify-content: space-between; min-block-size: 50px; padding-inline: 1rem; font-size: .82rem; }
  .leaf-hero-actions .quiet-link { flex: 1 1 auto; justify-content: center; font-size: .77rem; }
  .leaf-reading-layout { padding-block-start: 1.25rem; }
  .leaf-index > summary { min-block-size: 58px; padding: .9rem 1rem; font-size: .84rem; }
  .leaf-index nav { padding: .5rem; }
  .leaf-index a[data-leaf-index-link] { grid-template-columns: 24px minmax(0, 1fr); gap: .55rem; padding-block: .8rem; font-size: .81rem; }
  .leaf-page .knowledge-branch-tools { align-items: start; flex-direction: column; gap: 1rem; padding-block: .75rem 1.2rem; }
  .leaf-page .knowledge-branch-tools h2 { font-size: 1.25rem; }
  .leaf-page .knowledge-branch-tools p { font-size: 1rem; line-height: 1.95; }
  .leaf-page .knowledge-age-filter { flex: auto; inline-size: 100%; }
  .leaf-page .knowledge-age-filter select { max-inline-size: none; min-block-size: 48px; font-size: 16px; }
  :root.has-js .leaf-kind-filters { gap: .45rem; margin-block-start: 1rem; }
  .leaf-kind-filters button[data-leaf-kind] { flex: 1 1 auto; padding: .65rem .75rem; font-size: .74rem; }
  .leaf-page .knowledge-article-grid { gap: 1rem; margin-block-start: 1rem; }
  .leaf-card { padding: 1.25rem 1.15rem; border-radius: 14px; }
  .leaf-card-top { gap: .5rem; padding-block-end: .45rem; }
  .leaf-card-number { font-size: 1rem; }
  .leaf-card-number::after { inline-size: 19px; }
  .leaf-card-age { font-size: .71rem; }
  .leaf-card .guidance-kind { margin-block-end: .4rem; font-size: .72rem; }
  .leaf-card .guidance-title { font-size: 1.25rem; line-height: 1.9; margin-block-end: .85rem; }
  .leaf-card .guidance-summary { font-size: 1rem; line-height: 2.15; margin-block-end: 1.15rem; }
  .leaf-card .guidance-action,
  .leaf-card .note { padding: .9rem; font-size: 1rem; line-height: 2.05; }
  .leaf-card :is(.guidance-provenance, .guidance-meta) { gap: .5rem .7rem; margin-block-start: 1.25rem; padding-block-start: .85rem; }
  .leaf-card .link-context { font-size: .8rem; }
  .leaf-card .link-source { font-size: .77rem; }
  .leaf-card .bookmark { padding-inline: .65rem; font-size: .74rem; }
  .leaf-card .source-card { padding: .9rem; }
  .leaf-card .source-quote { font-size: 1rem; }
}
@media (max-width: 24.9375rem) {
  .leaf-card { padding: 1.1rem .9rem; }
  .leaf-card-age { max-inline-size: 70%; }
  .leaf-card .guidance-title { font-size: 1.17rem; }
  .leaf-card .guidance-action,
  .leaf-card .note { padding: .8rem .75rem; }
  .leaf-card .bookmark { margin-inline-start: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .leaf-index > summary :is(.ui-icon, svg, [aria-hidden='true']),
  .leaf-index a[data-leaf-index-link],
  .leaf-kind-filters button[data-leaf-kind],
  .leaf-card { transition: none; }
  .leaf-card .source-list { animation: none; }
}
@media (forced-colors: active) {
  .leaf-card { border-color: CanvasText; }
  .leaf-card-number::after,
  .leaf-card .guidance-kind::before { background: CanvasText; }
  .leaf-index a[aria-current='location'] { border-color: Highlight; }
  .leaf-kind-filters button[data-leaf-kind]:is([aria-pressed='true'], [aria-selected='true']) { border-color: Highlight; color: Highlight; }
  .leaf-card:has(.guidance:target),
  .leaf-card:target { outline: 2px solid Highlight; box-shadow: none; }
}
@media print {
  .leaf-reading-layout { display: block; }
  .leaf-index-aside,
  :root.has-js .leaf-kind-filters { display: none; }
  .leaf-card { box-shadow: none; break-inside: avoid; }
  .leaf-card .guidance-title a { color: inherit; }
}
/* A content map: names explain the choices; each link goes straight to the article. */
.leaf-hero { display: block; padding-block: 2rem 2.5rem; }
.leaf-hero-copy { max-inline-size: 56rem; padding: 0; }
.leaf-hero h1 { max-inline-size: 22em; }
.leaf-description { max-inline-size: 52rem; }
.leaf-directory { margin-block: .5rem 3rem; padding: clamp(1.1rem, 2.5vw, 2rem); border: 1px solid var(--line); border-radius: 22px; background: color-mix(in srgb, var(--leaf-accent) 3%, var(--card)); scroll-margin-block-start: calc(var(--header-h, 6rem) + 1rem); }
.directory-header { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem 2rem; margin-block-end: 2rem; }
.directory-kicker { margin: 0 0 .5rem; color: var(--teal); font-size: .75rem; font-weight: 550; line-height: 1.9; }
.directory-header h2 { margin: 0; color: var(--text-strong); font-size: clamp(1.3rem, 2vw, 1.65rem); line-height: 1.8; font-weight: 700; }
.directory-intro { margin: .6rem 0 0; color: var(--text-3); font-size: .79rem; line-height: 2; }
.directory-intro [role='status'] { color: var(--text-2); }
.directory-search-control { display: none; flex: 0 0 17rem; min-inline-size: 0; }
.has-directory-search .directory-search-control { display: block; }
.directory-search-control label { display: block; margin-block-end: .5rem; color: var(--text-2); font-size: .75rem; line-height: 1.9; }
.directory-search-field { display: flex; align-items: center; gap: .5rem; min-block-size: 50px; padding-inline: .8rem .25rem; border: 1px solid var(--control-border); border-radius: 10px; background: var(--card); }
.directory-search-field > .ui-icon { flex: none; inline-size: 19px; block-size: 19px; opacity: .7; }
.directory-search-field:focus-within { border-color: var(--teal); outline: 2px solid color-mix(in srgb, var(--teal) 22%, transparent); outline-offset: 2px; }
.directory-search-field input { flex: 1; min-inline-size: 0; inline-size: 100%; min-block-size: 48px; padding: .6rem 0; border: 0; border-radius: 0; outline: 0; box-shadow: none; background: transparent; color: var(--text); font: inherit; font-size: .84rem; }
.directory-search-field input:focus { outline: 0; box-shadow: none; }
.directory-search-field input::placeholder { color: var(--text-3); opacity: 1; }
.directory-search-field input::-webkit-search-cancel-button { display: none; }
.directory-search-field button { flex: none; display: grid; place-items: center; inline-size: 44px; min-block-size: 44px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); font: inherit; font-size: 1.35rem; cursor: pointer; }
.directory-search-field button:hover { color: var(--text-strong); background: var(--paper-2); }
.directory-sections { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 1rem; }
.directory-section { --section-accent: var(--teal); position: relative; min-inline-size: 0; border: 1px solid var(--line); border-block-start: 3px solid var(--section-accent); border-radius: 13px; background: var(--card); }
.directory-section:nth-child(2) { --section-accent: color-mix(in srgb, var(--text-strong) 45%, #bc7658); }
.directory-section:nth-child(3) { --section-accent: var(--saffron); }
.directory-section:nth-child(4) { --section-accent: var(--leaf-accent); }
.directory-section > summary { display: flex; align-items: center; gap: .7rem; min-block-size: 104px; padding: 1rem; border-radius: 10px; list-style: none; cursor: pointer; }
.directory-section > summary::-webkit-details-marker { display: none; }
.directory-section > summary:hover { background: color-mix(in srgb, var(--section-accent) 5%, var(--card)); }
.directory-section-icon { display: grid; place-items: center; flex: none; inline-size: 36px; block-size: 40px; border: 1px solid color-mix(in srgb, var(--section-accent) 23%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--section-accent) 7%, var(--card)); }
.directory-section-icon .ui-icon { inline-size: 20px; block-size: 20px; }
.directory-section-heading { flex: 1; min-inline-size: 0; }
.directory-section-heading h3 { margin: 0 0 .4rem; color: var(--text-strong); font-size: 1rem; font-weight: 650; line-height: 1.95; }
.directory-section-heading [data-section-count] { color: var(--text-3); font-size: .71rem; line-height: 1.8; }
.directory-chevron { flex: none; inline-size: 16px; block-size: 16px; color: var(--text-3); transition: transform 160ms ease; }
.directory-section[open] > summary .directory-chevron { transform: rotate(180deg); }
.directory-section-body { padding: 0 1rem .7rem; }
.directory-section-description { min-block-size: 3.8em; margin: 0 0 .9rem; color: var(--text-3); font-size: .81rem; line-height: 1.95; }
.directory-section ul { margin: 0; padding: 0; list-style: none; }
.directory-section li { margin: 0; padding: 0; min-inline-size: 0; border-block-start: 1px solid var(--line); }
.directory-section a[data-directory-link] { display: flex; align-items: center; justify-content: space-between; gap: .65rem; min-block-size: 62px; padding: .8rem .2rem; border-radius: 6px; color: var(--text-2); font-size: .95rem; line-height: 1.95; font-weight: 450; text-decoration: none; transition: background 150ms ease, color 150ms ease; }
.directory-item-title { min-inline-size: 0; }
.directory-section a[data-directory-link] .ui-icon { flex: none; inline-size: 16px; block-size: 16px; opacity: .45; }
.directory-section a[data-directory-link]:hover { background: color-mix(in srgb, var(--section-accent) 6%, var(--card)); color: var(--text-strong); }
.directory-section a[data-directory-link]:hover .ui-icon { opacity: 1; }
.directory-section a[aria-current='location'] { color: var(--teal); font-weight: 600; background: color-mix(in srgb, var(--teal) 7%, var(--card)); }
.directory-sections.is-single { grid-template-columns: minmax(0, 1fr); }
.directory-sections.is-single ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.5rem; }
.directory-sections.is-single .directory-section-description { min-block-size: 0; }
.directory-empty { margin: 0; padding: 1.5rem; border: 1px dashed var(--line-strong); border-radius: 10px; color: var(--text-2); font-size: .9rem; line-height: 2; }
.leaf-directory :is([data-directory-item], [data-directory-section], [data-directory-empty], [data-directory-clear])[hidden] { display: none; }
.leaf-directory :is(a, summary, button):focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
@media (min-width: 75rem) {
  .directory-sections:not(.is-single) { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-block-start: 1rem; }
  .directory-sections:not(.is-single)::before { content: ''; position: absolute; inset-block-start: 0; inset-inline: 12.5%; border-block-start: 1px solid var(--line-strong); }
  .directory-sections:not(.is-single) > .directory-section::before { content: ''; position: absolute; inset-block-start: calc(-1rem - 3px); inset-inline-start: 50%; block-size: 1rem; border-inline-start: 1px solid var(--line-strong); }
}
.leaf-directory[data-filtered='true'] .directory-sections { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.leaf-directory[data-filtered='true'] .directory-sections::before,
.leaf-directory[data-filtered='true'] .directory-section::before { display: none; }
.leaf-directory[data-filtered='true'] .directory-section-description { min-block-size: 0; }
@media (max-width: 63.9375rem) {
  .directory-header { align-items: start; flex-direction: column; gap: 1.1rem; }
  .directory-search-control { flex: auto; inline-size: 100%; }
  .directory-sections.is-single ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 47.9375rem) {
  .leaf-hero { padding-block: 1.5rem 1.75rem; }
  .leaf-directory { margin-block: .3rem 2rem; border-radius: 16px; }
  .directory-header { margin-block-end: 1.3rem; }
  .directory-sections, .directory-sections.is-single ul { grid-template-columns: minmax(0, 1fr); }
  .directory-section > summary { min-block-size: 96px; padding: .95rem .85rem; }
  .directory-section-description { min-block-size: 0; }
  .directory-section a[data-directory-link] { font-size: .9rem; min-block-size: 60px; }
  .directory-search-field input { font-size: 1rem; }
  .directory-intro { font-size: .77rem; }
}
@media (prefers-reduced-motion: reduce) { .directory-chevron, .directory-section a[data-directory-link] { transition: none; } }
@media (forced-colors: active) {
  .directory-section, .directory-search-field, .directory-section-icon { border-color: CanvasText; }
  .directory-section a[aria-current='location'] { outline: 1px solid Highlight; }
}
@media print {
  .leaf-directory { display: none; }
}
/* Enhanced age controls inherit the site's light/dark palette. Native controls work until ready. */
.premium-select {
  display: block;
  min-inline-size: 0;
  inline-size: 100%;
  color: var(--text);
}
.premium-select[hidden],
.premium-select-popup[hidden],
.premium-select-native[hidden] { display: none !important; }
.premium-select-sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.premium-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.1rem;
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 50px;
  margin: 0;
  padding-block: .65rem;
  padding-inline: 1rem 1.25rem;
  border: 1px solid var(--control-border);
  border-radius: 11px;
  background: var(--card);
  color: var(--text-strong);
  font: inherit;
  font-size: .87rem;
  font-weight: 500;
  line-height: 1.9;
  text-align: start;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.premium-select-value { min-inline-size: 0; overflow-wrap: anywhere; }
.premium-select-chevron {
  flex: none;
  inline-size: 19px;
  block-size: 19px;
  color: var(--text-2);
  transition: transform 160ms ease;
}
.premium-select-trigger[aria-expanded='true'] {
  border-color: var(--control-border-hover);
  background: var(--paper);
  box-shadow: 0 0 0 3px var(--teal-soft);
}
.premium-select-trigger[aria-expanded='true'] .premium-select-chevron { transform: rotate(180deg); }
.premium-select-trigger:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
}
.premium-select-trigger:disabled { cursor: not-allowed; opacity: .55; }
.premium-select-popup {
  position: fixed;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  max-inline-size: calc(100vw - 24px);
  padding: .4rem;
  border: 1px solid var(--control-border);
  border-radius: 15px;
  background: var(--card);
  color: var(--text);
  box-shadow: 0 22px 55px -20px rgb(0 0 0 / 32%), 0 4px 14px -7px rgb(0 0 0 / 18%);
  font-family: inherit;
  font-size: .9rem;
  line-height: 1.8;
  text-align: start;
  isolation: isolate;
}
.premium-select-heading {
  flex: none;
  padding: .55rem .9rem .65rem;
  margin-block-end: .3rem;
  border-block-end: 1px solid var(--line);
  color: var(--text-3);
  font-size: .72rem;
  font-weight: 450;
  line-height: 1.85;
}
.premium-select-list {
  position: relative;
  min-block-size: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  -webkit-overflow-scrolling: touch;
}
.premium-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-block-size: 50px;
  box-sizing: border-box;
  padding: .65rem .85rem;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--text-2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.premium-select-option + .premium-select-option { margin-block-start: .2rem; }
.premium-select-option-copy { display: flex; flex-direction: column; gap: .1rem; min-inline-size: 0; }
.premium-select-option-label { color: inherit; font-size: .86rem; font-weight: 500; overflow-wrap: anywhere; }
.premium-select-option-detail { color: var(--text-3); font-size: .7rem; font-weight: 400; line-height: 1.8; }
.premium-select-check { flex: none; inline-size: 19px; block-size: 19px; color: var(--teal); opacity: 0; }
.premium-select-option[aria-selected='true'] { background: var(--teal-soft); color: var(--text-strong); }
.premium-select-option[aria-selected='true'] .premium-select-option-label { font-weight: 650; }
.premium-select-option[aria-selected='true'] .premium-select-check { opacity: 1; }
.premium-select-option.is-active { border-color: var(--control-border-hover); background: var(--paper-2); color: var(--text-strong); }
.premium-select-option.is-active[aria-selected='true'] { background: var(--teal-soft); }
.premium-select-option[aria-disabled='true'] { opacity: .45; cursor: not-allowed; }
@media (hover: hover) {
  .premium-select-trigger:hover:not(:disabled) { border-color: var(--control-border-hover); background: var(--paper); }
  .premium-select-option:hover:not([aria-disabled='true']) { background: var(--paper-2); color: var(--text-strong); }
  .premium-select-option[aria-selected='true']:hover { background: var(--teal-soft); }
}
@media (max-width: 600px) {
  .premium-select-trigger { font-size: 16px; min-block-size: 52px; padding-inline-end: 1.35rem; }
  .premium-select-option { min-block-size: 52px; padding-block: .7rem; }
  .premium-select-option-label { font-size: 16px; }
  .premium-select-heading { font-size: .77rem; }
}
@media (prefers-reduced-motion: reduce) {
  .premium-select-trigger, .premium-select-chevron { transition: none; }
}
@media (forced-colors: active) {
  .premium-select-trigger, .premium-select-popup { border-color: ButtonText; background: Canvas; color: CanvasText; box-shadow: none; }
  .premium-select-trigger:focus-visible { outline-color: Highlight; }
  .premium-select-trigger[aria-expanded='true'] { border-color: Highlight; box-shadow: none; }
  .premium-select-option { color: CanvasText; }
  .premium-select-option[aria-selected='true'] { border-color: ButtonText; background: Canvas; color: CanvasText; }
  .premium-select-option.is-active, .premium-select-option.is-active[aria-selected='true'] { background: Highlight; color: HighlightText; border-color: Highlight; forced-color-adjust: none; }
  .premium-select-check, .premium-select-chevron, .premium-select-option-detail { color: inherit; }
}
@media print { .premium-select-popup { display: none !important; } }
/* Reading actions stay available independently of the optional source detail layer. */
.guidance .guidance-provenance {
  display: block;
  margin: 1.6rem 0 0;
  padding-block-start: 1.2rem;
  border-block-start: 1px solid var(--line);
}
.guidance-reading-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0; }
.guidance-context { grid-area: 1 / 1 / 2 / -1; min-inline-size: 0; }
.guidance-context > summary { display: flex; align-items: center; justify-content: flex-start; gap: .6rem; inline-size: fit-content; max-inline-size: calc(100% - 7rem); min-block-size: 46px; padding: .6rem .25rem; color: var(--text-strong); font-size: .85rem; font-weight: 600; line-height: 1.9; cursor: pointer; list-style: none; }
.guidance-context > summary::-webkit-details-marker { display: none; }
.guidance-context > summary:hover { color: var(--teal); }
.guidance .reading-chevron { flex: none; inline-size: 18px; block-size: 18px; transition: transform 160ms ease; }
.guidance-context .context-label-open { display: none; }
.guidance-context[open] .context-label-closed { display: none; }
.guidance-context[open] .context-label-open { display: inline; }
.guidance-context[open] > summary .reading-chevron { transform: rotate(180deg); }
.guidance-context-copy { margin-block-start: 1rem; padding: clamp(1rem, 2.5vw, 1.6rem); border: 1px solid var(--line); border-inline-start: 3px solid var(--teal); border-radius: 12px; background: var(--paper-2); }
.guidance-context-copy > p { max-inline-size: 66ch; margin: 0 0 1rem; color: var(--text-2); font-size: 1rem; font-weight: 430; line-height: 2.2; }
.guidance-context-copy > .context-kicker { margin-block-end: .8rem; color: var(--teal); font-size: .73rem; font-weight: 550; line-height: 1.9; }
.guidance-permalink { display: inline-flex; align-items: center; gap: .7rem; min-block-size: 44px; color: var(--text-3); font-size: .75rem; line-height: 1.9; text-underline-offset: .3em; }
.guidance-permalink:hover { color: var(--teal); }
.guidance .bookmark {
  grid-area: 1 / 2;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-inline-size: 44px;
  min-block-size: 46px;
  margin-inline-start: auto;
  padding: .6rem .85rem;
  border: 1px solid var(--control-border);
  border-radius: 10px;
  background: transparent;
  color: var(--text-2);
  font-size: .78rem;
  font-weight: 500;
  line-height: 1.8;
  transition: background 160ms ease, border-color 160ms ease;
}
.guidance .bookmark:hover { border-color: var(--control-border-hover); background: var(--paper-2); color: var(--text-strong); }
.guidance .bookmark[aria-pressed='true'] { border-color: var(--saffron); color: var(--on-saffron-soft); background: var(--saffron-soft); }
.guidance .bookmark-icon { font-size: 1.25rem; line-height: 1; }
.guidance-source-info { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .8rem; margin-block: .5rem .9rem; }
.guidance-source-parts { display: flex; flex-wrap: wrap; gap: .35rem; min-inline-size: 0; }
.guidance .chip-part { padding: .25rem .55rem; border: 1px solid var(--line); border-radius: 6px; background: var(--paper-2); color: var(--text-3); font-size: .68rem; font-weight: 450; line-height: 1.8; }
.guidance .source-panel { margin-block-start: .8rem; padding-block-start: .6rem; border-block-start: 1px solid var(--line); }
.guidance .source-panel > summary { display: flex; align-items: center; gap: .6rem; min-block-size: 46px; padding: .6rem .1rem; color: var(--text-2); font-size: .79rem; font-weight: 500; line-height: 1.9; list-style: none; }
.guidance .source-panel > summary::-webkit-details-marker { display: none; }
.guidance .source-panel > summary .source-count { margin-inline-start: auto; color: var(--text-3); font-size: .71rem; font-weight: 430; }
.guidance .source-panel[open] > summary .reading-chevron { transform: rotate(180deg); }
:root.sources-off :is(.guidance-source-info, .footer-source-detail, [data-source-detail]) { display: none; }

/* This treatment is reserved for actual excerpts rendered by sourceCard(). */
.source-card {
  min-inline-size: 0;
  margin: 0;
  padding: 1.5rem 1.65rem;
  border: 1px solid color-mix(in srgb, var(--teal) 22%, var(--line));
  border-block-start: 3px solid color-mix(in srgb, var(--teal) 62%, var(--line));
  border-radius: 16px;
  background: color-mix(in srgb, var(--teal) 3%, var(--card));
}
.source-card .source-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .8rem 1rem; margin-block: 0 1.2rem; font-size: .8rem; }
.source-identity { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .7rem; min-inline-size: 0; }
.source-caption-label { color: var(--text-3); font-size: .7rem; font-weight: 450; line-height: 1.8; }
.source-card .source-part { color: var(--teal); font-size: .79rem; font-weight: 650; line-height: 1.8; }
.source-card .badge-time { justify-self: end; padding: .3rem .55rem; font-size: .67rem; font-weight: 450; line-height: 1.8; border-radius: 6px; }
.source-card .source-lines { grid-column: 1 / -1; justify-self: start; max-inline-size: 100%; padding: .35rem .55rem; border-radius: 5px; border-color: var(--line); background: var(--card); color: var(--text-3); font-size: .72rem; line-height: 1.85; white-space: normal; overflow-wrap: anywhere; }
.source-quotation { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: .75rem; align-items: start; padding-block: 1.3rem 1.4rem; border-block: 1px solid var(--line); }
.source-quote-mark { display: block; padding-block-start: .35rem; color: color-mix(in srgb, var(--teal) 65%, var(--line)); font-family: Georgia, 'Times New Roman', serif; font-size: 4.4rem; font-weight: 400; line-height: .85; direction: ltr; user-select: none; }
.source-card .source-quote { min-inline-size: 0; max-inline-size: 68ch; margin: 0; padding: 0; border: 0; }
.source-card .source-quote p { margin: 0; color: var(--text); font-size: 1.0625rem; font-weight: 450; line-height: 2.2; }
.source-card .quote-elision { color: var(--text-3); }
.source-card .source-meta { display: grid; gap: .5rem; margin: 1rem 0 1.1rem; color: var(--text-3); font-size: .8rem; font-weight: 430; line-height: 1.95; }
.source-card .source-caveat { padding-inline-start: .75rem; border-inline-start: 2px solid var(--saffron); color: var(--text-2); font-size: .86rem; line-height: 1.95; }
.source-card .source-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 0; }
.source-card .btn-watch { display: inline-flex; align-items: center; justify-content: center; gap: 1rem; min-block-size: 46px; padding: .65rem .9rem; border: 1px solid var(--control-border); border-radius: 9px; background: var(--card); color: var(--text-strong); font-size: .79rem; font-weight: 550; line-height: 1.8; text-decoration: none; }
.source-card .btn-watch:hover { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 7%, var(--card)); }
.source-card .source-nolink { flex: 1 1 15rem; color: var(--text-3); font-size: .77rem; font-weight: 430; line-height: 1.95; }
.leaf-card .source-card { padding: 1.25rem; }

/* A quiet closing landmark with a direct route back into the guide. */
.site-footer { margin-block-start: 1rem; padding-block: clamp(2.7rem, 5vw, 4.5rem) 1.4rem; border-start-start-radius: 30px; border-start-end-radius: 30px; }
.site-footer .footer-inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr) minmax(0, 1.1fr); gap: 2rem clamp(1.8rem, 4vw, 4rem); max-inline-size: var(--wrap); }
.site-footer .footer-intro { gap: .9rem; }
.site-footer .footer-brand { display: inline-flex; align-items: center; gap: .9rem; min-block-size: 54px; color: var(--on-ink); text-decoration: none; }
.footer-brand .brand-mark { display: block; flex: none; inline-size: 36px; block-size: 42px; background-color: color-mix(in srgb, var(--on-ink) 12%, transparent); border: 1px solid rgb(255 255 255 / 25%); }
.footer-brand-copy { display: flex; flex-direction: column; gap: .3rem; min-inline-size: 0; }
.footer-brand-copy small { color: var(--on-ink-3); font-size: .65rem; font-weight: 450; line-height: 1.7; }
.footer-brand-copy strong { color: var(--on-ink); font-size: clamp(1.1rem, 1.7vw, 1.4rem); font-weight: 700; line-height: 1.7; }
.site-footer .footer-tagline { max-inline-size: 24rem; color: var(--on-ink-2); font-size: .83rem; font-weight: 430; line-height: 2; }
.site-footer .footer-series { max-inline-size: 24rem; color: var(--on-ink-3); font-size: .75rem; line-height: 2; }
.site-footer .footer-eyebrow { margin-block: 0 .8rem; color: var(--on-ink-3); font-size: .73rem; font-weight: 500; line-height: 1.9; }
.footer-navigation,
.footer-reading-note { min-inline-size: 0; }
.footer-nav-links { display: grid; gap: .2rem; }
.site-footer .footer-nav-links a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-block-size: 44px; padding-block: .55rem; border-block-end: 1px solid rgb(255 255 255 / 12%); color: var(--on-ink-2); font-size: .81rem; font-weight: 450; line-height: 1.9; text-decoration: none; }
.site-footer .footer-nav-links a:last-child { border-block-end: 0; }
.footer-nav-links a > span { color: var(--on-ink-3); }
.site-footer .footer-safety { color: var(--on-ink-2); font-size: .79rem; font-weight: 430; line-height: 2.1; }
.site-footer .footer-method { display: inline-flex; align-items: center; justify-content: space-between; gap: 1rem; min-block-size: 46px; margin-block-start: .8rem; padding: .55rem .75rem; border: 1px solid rgb(255 255 255 / 27%); border-radius: 9px; color: var(--on-ink); font-size: .76rem; font-weight: 500; line-height: 1.9; text-decoration: none; }
.site-footer .footer-method:hover { background: rgb(255 255 255 / 6%); }
.site-footer .footer-disclosures { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .85rem 2.5rem; margin-block-start: .25rem; padding: 1.3rem 1.5rem; border: 1px solid rgb(255 255 255 / 13%); border-radius: 12px; background: rgb(255 255 255 / 3%); }
.site-footer .footer-heading { grid-column: 1 / -1; color: var(--on-ink-2); font-size: .83rem; font-weight: 550; line-height: 1.9; }
.site-footer .footer-scope { color: var(--on-ink-3); font-size: .76rem; font-weight: 430; line-height: 2.05; }
.site-footer .footer-license { grid-column: auto; align-self: start; border: 0; padding: 0; color: var(--on-ink-3); font-size: .75rem; font-weight: 430; line-height: 2.05; }
.site-footer .footer-license a { display: inline-flex; align-items: center; min-block-size: 44px; text-underline-offset: 5px; }
.footer-bottom { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1.5rem; padding-block-start: 1.05rem; border-block-start: 1px solid rgb(255 255 255 / 14%); }
.site-footer .footer-attribution { color: var(--on-ink-3); font-size: .71rem; font-weight: 430; line-height: 1.95; }
.site-footer .footer-to-top { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-block-size: 44px; color: var(--on-ink-2); font-size: .72rem; line-height: 1.9; text-decoration: none; }
.site-footer .footer-to-top span { display: grid; place-items: center; inline-size: 30px; block-size: 30px; border: 1px solid rgb(255 255 255 / 25%); border-radius: 50%; font-size: 1rem; }
.site-footer :is(.footer-nav-links a, .footer-to-top):hover { color: var(--on-ink-saffron); }
.site-footer a:focus-visible { outline: 2px solid var(--on-ink-saffron); outline-offset: 4px; }
.guidance-provenance :is(a, button, summary):focus-visible,
.guidance .source-panel > summary:focus-visible,
.source-card a:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }

@media (max-width: 63.9375rem) {
  .site-footer .footer-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 3rem; }
  .site-footer .footer-intro { grid-column: 1 / -1; }
  .site-footer .footer-tagline { max-inline-size: none; }
}
@media (max-width: 44.9375rem) {
  .guidance .guidance-provenance { margin-block-start: 1.35rem; padding-block-start: 1rem; }
  .guidance-context > summary { font-size: .81rem; }
  .guidance-context-copy { padding: 1rem .85rem; }
  .guidance .bookmark { margin-inline-start: auto; padding-inline: .7rem; font-size: .75rem; }
  .source-card,
  .leaf-card .source-card { padding: 1.1rem; border-radius: 12px; }
  .source-card .source-head { grid-template-columns: minmax(0, 1fr); gap: .65rem; margin-block-end: 1rem; }
  .source-card .badge-time { justify-self: start; font-size: .7rem; }
  .source-card .source-lines { grid-column: auto; font-size: .75rem; }
  .source-quotation { grid-template-columns: 20px minmax(0, 1fr); gap: .5rem; padding-block: 1.1rem 1.2rem; }
  .source-quote-mark { font-size: 3.6rem; }
  .source-card .source-quote p { font-size: 1rem; line-height: 2.2; }
  .source-card .source-meta { font-size: .8rem; line-height: 2; }
  .source-card .source-caveat { font-size: .84rem; }
  .source-card .source-nolink { flex-basis: 100%; font-size: .78rem; }
  .source-card .btn-watch { inline-size: 100%; justify-content: space-between; font-size: .77rem; }
  .site-footer { padding-block: 2.5rem calc(1.2rem + env(safe-area-inset-bottom, 0px)); border-start-start-radius: 24px; border-start-end-radius: 24px; }
  .site-footer .footer-inner { grid-template-columns: minmax(0, 1fr); gap: 1.85rem; }
  .site-footer .footer-intro { gap: .8rem; }
  .footer-brand-copy strong { font-size: 1.2rem; }
  .site-footer .footer-nav-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem 1.25rem; }
  .site-footer .footer-nav-links a { font-size: .76rem; min-block-size: 48px; gap: .4rem; }
  .site-footer .footer-nav-links a:last-child { border-block-end: 1px solid rgb(255 255 255 / 12%); }
  .site-footer .footer-eyebrow { margin-block-end: .6rem; }
  .site-footer .footer-safety { max-inline-size: 40rem; font-size: .8rem; }
  .site-footer .footer-method { min-block-size: 46px; font-size: .77rem; }
  .site-footer .footer-disclosures { grid-template-columns: minmax(0, 1fr); gap: .75rem; padding: 1.15rem; }
  .site-footer .footer-scope,
  .site-footer .footer-license { font-size: .77rem; }
  .footer-bottom { gap: .65rem; padding-block-start: .9rem; }
  .site-footer .footer-attribution { font-size: .72rem; }
}
@media (max-width: 24.9375rem) {
  .guidance-context > summary { max-inline-size: calc(100% - 6rem); font-size: .78rem; gap: .35rem; }
  .guidance .source-panel > summary { flex-wrap: wrap; font-size: .76rem; }
  .guidance .source-panel > summary .source-count { font-size: .65rem; }
  .source-card,
  .leaf-card .source-card { padding: .9rem; }
  .source-quotation { display: block; }
  .source-quotation::after { content: ''; display: block; clear: both; }
  .source-quote-mark { float: right; inline-size: 18px; block-size: 28px; margin-inline-end: .5rem; font-size: 3rem; }
  .site-footer .footer-nav-links { column-gap: .85rem; }
  .site-footer .footer-nav-links a { font-size: .73rem; }
}
@media (prefers-reduced-motion: reduce) {
  .guidance .reading-chevron,
  .guidance .bookmark { transition: none; }
}
@media (forced-colors: active) {
  .guidance .bookmark,
  .source-card,
  .source-card .btn-watch { border-color: ButtonText; }
  .guidance .bookmark[aria-pressed='true'] { border-color: Highlight; color: Highlight; }
  .source-quote-mark { color: CanvasText; }
  .site-footer :is(.footer-disclosures, .footer-method, .footer-bottom),
  .site-footer .footer-nav-links a { border-color: CanvasText; }
  .site-footer a:focus-visible { outline-color: Highlight; }
}
@media print {
  .guidance .bookmark,
  .guidance-context > summary,
  .guidance-permalink,
  .footer-navigation,
  .footer-to-top { display: none; }
  .guidance-reading-actions { display: block; }
  .site-footer .footer-inner { display: block; }
  .site-footer .footer-disclosures { margin-block: 1rem; }
}
/* The same named sections orient the reader in the directory, sidebar and reading column. */
.leaf-visual-shortcuts { max-inline-size: 56rem; margin-block-start: 1.65rem; padding-block-start: 1.2rem; border-block-start: 1px solid var(--line); }
.leaf-visual-shortcuts > p { display: flex; align-items: center; gap: .55rem; margin: 0 0 .75rem; color: var(--text-3); font-size: .77rem; line-height: 1.9; }
.leaf-visual-shortcuts > p .ui-icon { inline-size: 18px; block-size: 18px; }
.leaf-visual-shortcuts > div { display: flex; flex-wrap: wrap; gap: .65rem; }
.leaf-visual-shortcuts a { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.15rem; max-inline-size: 100%; min-block-size: 48px; padding: .7rem .95rem; border: 1px solid color-mix(in srgb, var(--teal) 27%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--teal) 5%, var(--card)); color: var(--text-strong); font-size: .86rem; font-weight: 550; line-height: 1.9; text-decoration: none; }
.leaf-visual-shortcuts a:hover { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 10%, var(--card)); }
.leaf-visual-shortcuts a .ui-icon { flex: none; inline-size: 17px; block-size: 17px; }
.directory-section-start { display: flex; align-items: center; justify-content: space-between; gap: .7rem; min-block-size: 44px; margin-block: -.2rem .7rem; color: var(--teal); font-size: .78rem; font-weight: 600; text-decoration: none; }
.directory-section-start .ui-icon { inline-size: 17px; block-size: 17px; }
.directory-visual-link { display: grid; grid-template-columns: minmax(0, 1fr) 18px; gap: .3rem .65rem; padding: .85rem; margin-block-end: 1rem; border: 1px solid color-mix(in srgb, var(--teal) 32%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--teal) 7%, var(--card)); color: var(--text-strong); font-size: .85rem; line-height: 1.9; font-weight: 550; text-decoration: none; }
.directory-visual-label { grid-column: 1 / -1; color: var(--teal); font-size: .67rem; font-weight: 450; }
.directory-visual-link .ui-icon { align-self: center; inline-size: 18px; block-size: 18px; }
.directory-visual-link:hover { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 12%, var(--card)); }
.leaf-index-group + .leaf-index-group { border-block-start: 1px solid var(--line); margin-block-start: .7rem; padding-block-start: .7rem; }
.leaf-index-section-link { display: flex; align-items: center; min-block-size: 48px; padding: .6rem .65rem; border-radius: 8px; color: var(--text-strong); font-size: .85rem; line-height: 1.9; font-weight: 650; text-decoration: none; }
.leaf-index-section-link[aria-current='location'] { color: var(--teal); background: color-mix(in srgb, var(--teal) 7%, var(--card)); }
.leaf-index-visual-link { display: flex; align-items: center; gap: .6rem; min-block-size: 44px; margin: .2rem .3rem .5rem; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 8px; color: var(--teal); background: var(--paper-2); font-size: .72rem; line-height: 1.9; text-decoration: none; }
.leaf-index-visual-link .ui-icon { flex: none; inline-size: 17px; block-size: 17px; }
.leaf-page .knowledge-article-grid { gap: 3.5rem; }
.reading-subsection { min-inline-size: 0; scroll-margin-block-start: calc(var(--header-h, 6rem) + 1.5rem); }
.reading-subsection-header { padding-block: 1.2rem 1.5rem; border-block-start: 1px solid var(--line-strong); }
.reading-subsection-meta { display: flex; align-items: center; gap: 1rem; margin-block-end: .75rem; color: var(--teal); font-size: .73rem; line-height: 1.9; font-weight: 550; }
.reading-subsection-meta > :last-child { margin-inline-start: auto; color: var(--text-3); font-weight: 430; }
.reading-subsection-header h3 { max-inline-size: 34em; margin: 0 0 .55rem; color: var(--text-strong); font-size: clamp(1.35rem, 2.3vw, 1.8rem); line-height: 1.8; font-weight: 700; }
.reading-subsection-header p { max-inline-size: 64ch; margin: 0; color: var(--text-2); font-size: .95rem; line-height: 2.1; }
.reading-subsection-items { display: grid; gap: 1.25rem; min-inline-size: 0; }
.leaf-card .guidance > h4 { margin-block: 0 .75rem; color: var(--text-strong); font-size: clamp(1.18rem, 1.8vw, 1.5rem); font-weight: 650; line-height: 1.95; }
.leaf-card .guidance > h4 a { color: inherit; text-decoration: none; }
.leaf-card .guidance > h4 a:hover { color: var(--teal); }
.leaf-card .guidance > p { max-inline-size: 66ch; }

/* Each visual is grounded in a structure present in the text, with the original caveats. */
.reading-visual { --visual-accent: var(--teal); min-inline-size: 0; margin-block: 0 1.75rem; padding: clamp(1.1rem, 2.5vw, 1.8rem); border: 1px solid color-mix(in srgb, var(--visual-accent) 28%, var(--line)); border-block-start: 3px solid var(--visual-accent); border-radius: 18px; background: color-mix(in srgb, var(--visual-accent) 4%, var(--card)); scroll-margin-block-start: calc(var(--header-h, 6rem) + 1.5rem); }
.reading-visual-header { max-inline-size: 67ch; }
.reading-visual-kicker { margin: 0 0 .7rem; color: var(--visual-accent); font-size: .73rem; line-height: 1.9; font-weight: 550; }
.reading-visual-header h4 { margin: 0 0 .8rem; color: var(--text-strong); font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.85; font-weight: 700; }
.reading-visual-header > p:last-child { margin: 0; color: var(--text-2); font-size: .93rem; line-height: 2.05; }
.reading-visual-caveat { max-inline-size: 69ch; margin: 1.2rem 0; padding-inline-start: .85rem; border-inline-start: 2px solid var(--saffron); color: var(--text-2); font-size: .83rem; line-height: 2.1; }
.reading-visual-help { margin: 1.4rem 0 .9rem; color: var(--text-3); font-size: .75rem; line-height: 1.9; }
.reading-visual-entries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.reading-visual-entries > li { min-inline-size: 0; margin: 0; padding: 0; }
.visual-entry { min-inline-size: 0; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--card); }
.visual-entry > summary { display: flex; align-items: center; gap: .8rem; min-block-size: 82px; padding: 1rem; border-radius: 10px; list-style: none; cursor: pointer; }
.visual-entry > summary::-webkit-details-marker { display: none; }
.visual-entry > summary:hover { background: color-mix(in srgb, var(--visual-accent) 6%, var(--card)); }
.visual-entry-number { flex: none; align-self: center; display: grid; place-items: center; inline-size: 32px; block-size: 36px; border: 1px solid color-mix(in srgb, var(--visual-accent) 25%, var(--line)); border-radius: 7px; color: var(--visual-accent); background: color-mix(in srgb, var(--visual-accent) 6%, var(--card)); font-size: .8rem; font-weight: 600; }
.visual-entry-label { flex: 1; min-inline-size: 0; color: var(--text-strong); font-size: .96rem; line-height: 1.9; font-weight: 600; }
.visual-entry-dot { flex: none; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--visual-accent); }
.visual-entry-toggle { flex: none; display: grid; place-items: center; inline-size: 26px; block-size: 26px; color: var(--text-3); font-size: 1.35rem; line-height: 1; transition: transform 160ms ease; }
.visual-entry[open] { border-color: color-mix(in srgb, var(--visual-accent) 45%, var(--line)); }
.visual-entry[open] > summary { border-end-start-radius: 0; border-end-end-radius: 0; }
.visual-entry[open] .visual-entry-toggle { transform: rotate(45deg); color: var(--visual-accent); }
.visual-entry-copy { margin-inline: 1.1rem; padding-block: 1rem; border-block-start: 1px solid var(--line); }
.visual-entry-summary { max-inline-size: 64ch; margin: 0 0 1rem; color: var(--text); font-size: .95rem; font-weight: 430; line-height: 2.15; }
.visual-entry-action { margin: 0 0 1rem; padding: .8rem .9rem; border-radius: 8px; background: color-mix(in srgb, var(--visual-accent) 6%, var(--card)); color: var(--text-2); font-size: .88rem; line-height: 2.05; }
.visual-entry-action > span { display: block; margin-block-end: .4rem; color: var(--visual-accent); font-size: .71rem; font-weight: 550; }
.visual-entry-note { margin: 0 0 1rem; padding-inline-start: .75rem; border-inline-start: 2px solid var(--saffron); color: var(--text-2); font-size: .83rem; line-height: 2.05; }
.visual-entry-note strong { display: block; margin-block-end: .3rem; font-size: .74rem; font-weight: 600; }
.visual-reading-link { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-block-size: 44px; color: var(--teal); font-size: .79rem; font-weight: 550; line-height: 1.9; text-decoration: none; }
.visual-reading-link svg { flex: none; }
.visual-reading-link:hover { text-decoration: underline; text-underline-offset: .3em; }
.visual-original-context { margin-block-start: 1.2rem; border-block-start: 1px solid var(--line-strong); }
.visual-original-context > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-block-size: 52px; padding: .85rem .25rem; color: var(--text-strong); font-size: .84rem; line-height: 1.9; font-weight: 550; cursor: pointer; list-style: none; }
.visual-original-context > summary::-webkit-details-marker { display: none; }
.visual-original-context > summary > span { flex: none; font-size: 1.2rem; }
.visual-original-context[open] > summary > span { transform: rotate(45deg); }
.visual-original-context > div { max-inline-size: 66ch; padding: .6rem .25rem; color: var(--text-2); font-size: .95rem; line-height: 2.15; }
.visual-original-context p { margin: 0 0 .8rem; }
.reading-visual-connections { margin-block: 1.4rem 2rem; padding: 1.1rem 1.25rem; border: 1px solid color-mix(in srgb, var(--teal) 25%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--teal) 4%, var(--card)); }
.reading-visual-connections > p { margin: 0 0 .7rem; color: var(--text-3); font-size: .8rem; line-height: 1.9; }
.reading-visual-connections > a { display: flex; align-items: center; justify-content: space-between; gap: 1.1rem; min-block-size: 48px; padding-block: .65rem; color: var(--text-strong); font-size: .92rem; font-weight: 550; line-height: 1.9; text-decoration: none; }
.reading-visual-connections > a + a { border-block-start: 1px solid var(--line); }
.reading-visual-connections > a > :last-child { flex: none; color: var(--teal); }
.reading-visual-connections > a:hover { color: var(--teal); }
.visual-original-context > summary:focus-visible, .reading-visual-connections > a:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
.reading-visual--timeline .reading-visual-entries { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding-inline-start: 1rem; border-inline-start: 1px solid var(--line-strong); margin-inline-start: .75rem; }
.reading-visual--timeline .reading-visual-entries > li { position: relative; }
.reading-visual--timeline .reading-visual-entries > li::before { content: ''; position: absolute; inset-inline-start: calc(-1rem - 5px); inset-block-start: 2.15rem; inline-size: 9px; block-size: 9px; border: 2px solid var(--card); border-radius: 50%; background: var(--visual-accent); box-shadow: 0 0 0 1px var(--visual-accent); }
.reading-visual--timeline .visual-entry-number { border-radius: 50%; inline-size: 34px; block-size: 34px; }
.reading-visual--comparison { --visual-accent: var(--saffron); }
.reading-visual--comparison .visual-entry { border-block-start: 3px solid var(--saffron); }
.reading-visual--comparison li:nth-child(even) .visual-entry { border-block-start-color: var(--teal); }
.reading-visual--comparison li:nth-child(even) .visual-entry-dot { background: var(--teal); }
.reading-visual--comparison .reading-visual-entries { align-items: stretch; }
.reading-visual--comparison .visual-entry { block-size: 100%; }
.reading-visual--practice .reading-visual-entries { grid-template-columns: minmax(0, 1fr); }
.reading-visual--practice .visual-entry > summary { min-block-size: 68px; }
.reading-visual--practice .visual-entry-dot { border-radius: 2px; transform: rotate(45deg); }
.leaf-page :is([data-reading-subsection], [data-index-section], [data-reading-visual])[hidden] { display: none; }
.leaf-page :is([data-section-link], [data-visual-link], .visual-entry > summary, .visual-reading-link):focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
.reading-subsection:focus-visible, .reading-visual:focus-visible { outline: 2px solid var(--teal); outline-offset: 5px; }
@media (min-width: 75rem) {
  .reading-visual--framework[data-entry-count='3'] .reading-visual-entries { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 47.9375rem) {
  .leaf-visual-shortcuts a { inline-size: 100%; }
  .leaf-page .knowledge-article-grid { gap: 2.5rem; }
  .reading-subsection-header { padding-block: 1rem 1.25rem; }
  .reading-subsection-header p { font-size: .9rem; }
  .reading-visual { padding: 1rem; border-radius: 14px; }
  .reading-visual-entries { grid-template-columns: minmax(0, 1fr); }
  .visual-entry > summary { min-block-size: 72px; gap: .6rem; padding: .85rem; }
  .visual-entry-label { font-size: .95rem; }
  .visual-entry-copy { margin-inline: .9rem; }
  .reading-visual--timeline .reading-visual-entries { padding-inline-start: .85rem; margin-inline-start: .3rem; }
  .reading-visual--timeline .reading-visual-entries > li::before { inset-inline-start: calc(-.85rem - 5px); }
  .reading-subsection-items { gap: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .visual-entry-toggle { transition: none; } }
@media (forced-colors: active) {
  .reading-visual, .visual-entry, .visual-entry-number, .visual-entry-copy { border-color: CanvasText; }
  .visual-entry-dot, .reading-visual--timeline .reading-visual-entries > li::before { background: CanvasText; }
}
@media print {
  .leaf-visual-shortcuts { display: none; }
  .reading-visual { break-inside: auto; }
  .reading-visual-help, .visual-reading-link, .visual-entry-toggle { display: none; }
  .reading-visual-entries { display: block; }
  .reading-visual-entries > li { margin-block: .75rem; break-inside: avoid; }
}
/* Generated by scripts/build.ts from the @media block in site.css. Do not edit: the dark
   palette is written once there and mirrored here so the toggle can force it. */
:root[data-theme='dark'] {
    --ink: #102a23;
    --ink-2: #183e35;
    --ink-3: #557865;

    --hero-surface: #25372c;
    --accent-solid: #b6d5b9;
    --accent-on: #15261f;
    --button-icon-filter: brightness(0);
    --icon-filter: invert(89%) sepia(9%) saturate(359%) hue-rotate(63deg);
    --paper: #15261f;
    --paper-2: #1d3027;
    --paper-3: #2b4035;
    --card: #1c3026;

    --text: #eeeede;
    --text-2: #bac5b9;
    --text-3: #9cab9e;

    --saffron: #e2a253;
    --saffron-bright: #e8ab5f;
    --saffron-soft: #3a2b16;
    --teal: #6fb3ab;
    --teal-soft: #122d2a;
    --clay: #e08d82;
    --clay-soft: #331916;

    --line: #344a3c;
    --line-strong: #536554;

    --link: #b6d5b9;
    --text-strong: #e3ecdf;
    --on-saffron-soft: #e2a253;
    --control-border: #7f9480; /* 3.40:1 on card, 3.70:1 on paper */
    --control-border-hover: #a7c3a8; /* 6.18:1 / 6.73:1 */
    /* --on-ink is deliberately NOT redefined here: the header and footer are dark in both
       themes, so their text stays the same light value. Redefining it is what broke it. */

    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px -16px rgb(0 0 0 / 60%);
  }