/* =========================================================================
   Co-LMLM project page — styles.css
   Design system per plan/PLAN.md §4. Tokens as CSS custom properties;
   light default + dark (media query and [data-theme] override, both ways).
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------------------- */
:root {
  /* Brand / data hues — light mode */
  --c-colmlm:        #E85D42;
  --c-colmlm-strong: #B23A22;   /* deep enough for coral TEXT to clear AA on the coral tint (5.1:1) — DSG-14 */
  --c-colmlm-soft:   #F6C3B4;
  --c-colmlm-tint:   #FCEAE3;
  --c-colmlm-deep:   #9E3B32;

  --c-rel:        #E7962B;
  --c-rel-strong: #8B580E;   /* AA on white (6.0:1) and rel-tint (5.3:1) — DSG-3 */
  --c-rel-soft:   #F4D79A;
  --c-rel-tint:   #FAF0D9;

  --c-std:      #163E5F;
  --c-std-soft: #B7C6D4;
  --c-std-tint: #E7EDF2;

  --c-ref: #5B6B7A;

  --c-annot:        #4C79B8;
  --c-annot-strong: #345C93;
  --c-annot-soft:   #C4D8EE;
  --c-annot-tint:   #E9F1FA;

  --c-pos: #256B45;   /* darkened so +Δ deltas clear AA on coral-tint rows (5.5:1) — DSG-3 */
  --c-neg: #B23A22;   /* darkened so −Δ deltas clear AA on coral-tint rows (5.1:1) — DSG-3 */

  /* Fixed saturated coral for white-text-on-fill surfaces (same in both themes so
     white never lands on a lightened dark-mode fill). White on #B23A22 = 5.96:1 — DSG-1 */
  --coral-fill: #B23A22;

  /* Neutrals — warm gray on near-white */
  --bg:             #FBFAF7;
  --surface:        #FFFFFF;
  --surface-2:      #F4F1EC;
  --figure-surface: #FFFFFF;
  --border:         #E7E2DA;
  --border-strong:  #D6CFC4;
  --text:           #2B2724;
  --text-muted:     #6A635C;
  --text-subtle:    #6F6760;   /* AA everywhere incl. tints (≥4.70:1) — DSG-3 */
  --link:           #B23A22;   /* AA on white and all tints (≥5.05:1) — DSG-3 */
  --focus:          #1E66C7;

  /* Theme-flipping component tokens — defined in :root AND both dark scopes so an
     OS-dark visitor who never toggles gets the correct value too. — DSG-12 / DSG-16 */
  --chip-value-fg:  #8F3229;                 /* retrieved-fact chip text on coral-soft (5.0:1) */
  --figure-inset:   0 0 0 0 rgba(0,0,0,0);   /* no-op in light; softens the white panel in dark */

  /* Typography */
  --font-serif: "Charter", "Bitstream Charter", "Sitka Text", Cambria, "Iowan Old Style", Georgia, serif;
  --font-sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:  ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --fs-hero:  clamp(2.2rem, 1.4rem + 3.2vw, 3.4rem);
  --fs-h1:    clamp(1.8rem, 1.35rem + 1.6vw, 2.4rem);
  --fs-h2:    1.6rem;
  --fs-h3:    1.25rem;
  --fs-lead:  1.3rem;
  --fs-body:  1.0rem;      /* 18px via root font-size */
  --fs-small: 0.875rem;

  /* Spacing (4px base) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  --container: 1120px;   /* nav bar only (.nav__inner) */
  --content:   1000px;   /* the single content column: text, figures, tables, captions all share it */
  --measure:   100%;     /* text now fills the content column (was 68ch) — round-09 unified width */

  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(43,39,36,.06), 0 1px 3px rgba(43,39,36,.05);
  --shadow-2: 0 4px 16px rgba(43,39,36,.08);

  --nav-h: 60px;

  color-scheme: light;
}

/* Dark tokens — shared block applied by media query and explicit toggle */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #191512;
    --surface:       #221E19;
    --surface-2:     #2A251F;
    --border:        #37312A;
    --border-strong: #4A4239;
    --text:          #EDE8E1;
    --text-muted:    #B4ABA0;
    --text-subtle:   #9A9289;   /* lightened so subtle labels clear AA on dark surface-2 (≥4.5:1) — DSG-22 */

    --c-colmlm:        #F0745B;
    --c-colmlm-strong: #F58E77;
    --c-colmlm-soft:   #6B3226;
    --c-colmlm-tint:   rgba(240,116,91,0.12);
    --c-colmlm-deep:   #C86D5C;

    --c-rel:        #EDAE4A;
    --c-rel-strong: #F0BC6B;
    --c-rel-soft:   #5C4620;
    --c-rel-tint:   rgba(237,174,74,0.12);

    --c-std:      #6C9AC9;
    --c-std-soft: #3A5670;
    --c-std-tint: rgba(108,154,201,0.12);

    --c-ref: #93A1AE;

    --c-annot:        #7BA6DA;
    --c-annot-strong: #9BBDE6;
    --c-annot-soft:   #2E4666;
    --c-annot-tint:   rgba(123,166,218,0.12);

    --c-pos: #5FB98A;
    --c-neg: #F58E77;

    --link: var(--c-colmlm-strong);
    --focus: #6BA5F2;

    --chip-value-fg: #F6BBAD;                 /* light coral on dark coral-soft (6.0:1) — DSG-12 */
    --figure-inset:  inset 0 0 0 1px rgba(0,0,0,.05);  /* DSG-16 */

    --shadow-1: 0 1px 2px rgba(0,0,0,.35);
    --shadow-2: 0 6px 20px rgba(0,0,0,.45);

    color-scheme: dark;
  }
}

/* Explicit dark toggle — wins over media query in both directions */
:root[data-theme="dark"] {
  --bg:            #191512;
  --surface:       #221E19;
  --surface-2:     #2A251F;
  --border:        #37312A;
  --border-strong: #4A4239;
  --text:          #EDE8E1;
  --text-muted:    #B4ABA0;
  --text-subtle:   #9A9289;   /* lightened so subtle labels clear AA on dark surface-2 (≥4.5:1) — DSG-22 */

  --c-colmlm:        #F0745B;
  --c-colmlm-strong: #F58E77;
  --c-colmlm-soft:   #6B3226;
  --c-colmlm-tint:   rgba(240,116,91,0.12);
  --c-colmlm-deep:   #C86D5C;

  --c-rel:        #EDAE4A;
  --c-rel-strong: #F0BC6B;
  --c-rel-soft:   #5C4620;
  --c-rel-tint:   rgba(237,174,74,0.12);

  --c-std:      #6C9AC9;
  --c-std-soft: #3A5670;
  --c-std-tint: rgba(108,154,201,0.12);

  --c-ref: #93A1AE;

  --c-annot:        #7BA6DA;
  --c-annot-strong: #9BBDE6;
  --c-annot-soft:   #2E4666;
  --c-annot-tint:   rgba(123,166,218,0.12);

  --c-pos: #5FB98A;
  --c-neg: #F58E77;

  --link: var(--c-colmlm-strong);
  --focus: #6BA5F2;

  --chip-value-fg: #F6BBAD;                 /* light coral on dark coral-soft (6.0:1) — DSG-12 */
  --figure-inset:  inset 0 0 0 1px rgba(0,0,0,.05);  /* DSG-16 */

  --shadow-1: 0 1px 2px rgba(0,0,0,.35);
  --shadow-2: 0 6px 20px rgba(0,0,0,.45);

  color-scheme: dark;
}

/* -------------------------------------------------------------------------
   2. Reset & base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;                 /* never a horizontal body scroll; clip keeps sticky working */
}

img { max-width: 100%; height: auto; display: block; }

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

strong { font-weight: 650; }

code, pre, .token { font-family: var(--font-mono); }

:where(h1,h2,h3) {
  font-family: var(--font-serif);
  letter-spacing: -0.01em;
  color: var(--text);
}

.tabular, .num, .stat__value, .ppl-fact__values, .nlu-pair__vals { font-variant-numeric: tabular-nums; }

/* Focus visibility everywhere */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--s-3); top: -60px; z-index: 200;
  background: var(--coral-fill); color: #fff; padding: var(--s-2) var(--s-4);
  border-radius: var(--r-sm); font-weight: 600; text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: var(--s-3); }

/* -------------------------------------------------------------------------
   3. Layout helpers
   ------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--content);   /* the single 1000px content column (the nav bar uses its own wider --container via .nav__inner) */
  margin-inline: auto;
  padding-inline: var(--s-5);
}
@media (min-width: 1025px) { .container { padding-inline: var(--s-7); } }

.measure { max-width: var(--measure); }
/* When .container and .measure are on the SAME element, keep the container column
   width (avoid the .measure:100% rule collapsing it to full-bleed). */
.container.measure { max-width: var(--content); }

.section {
  padding-block: var(--s-7);
  border-top: 1px solid var(--border);
  scroll-margin-top: calc(var(--nav-h) + var(--s-4));
}
@media (min-width: 1025px) { .section { padding-block: var(--s-9); } }

.section--tint-colmlm { background: var(--c-colmlm-tint); }
.section--tint-annot  { background: var(--c-annot-tint); }
.section--tint-std    { background: var(--c-std-tint); }
/* Neutral wash — for sections not about a specific model family (keeps family tints semantic) — DSG-17 */
.section--neutral     { background: var(--surface-2); }

/* round-12: #prior-work merged into #idea; its rule removed. */

.section__kicker {
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--c-colmlm-strong);   /* #B23A22 light / #F58E77 dark — clears AA on every tint in both themes (DSG-14) */
  margin-bottom: var(--s-3);
}
.section__title { font-size: var(--fs-h1); line-height: 1.12; font-weight: 700; margin-bottom: var(--s-5); }
.section__lead  { font-size: var(--fs-lead); line-height: 1.5; color: var(--text); margin-bottom: var(--s-5); }
.section__body  { margin-bottom: var(--s-5); }

.subhead { font-family: var(--font-serif); font-size: var(--fs-h3); margin: var(--s-5) 0 var(--s-3); }

/* round-10: bridges, boxed takeaways, and mini-takeaways were removed (author
   "less furniture" — GEN-1/GEN-2). Sections now open with a plain lead paragraph. */

/* TL;DR block (hero) — a plain label + paragraph, no box. */
.tldr { margin: var(--s-5) 0 var(--s-6); max-width: var(--measure); }
.tldr__label {
  font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 700; color: var(--c-colmlm-strong); margin-bottom: var(--s-2);
}
.tldr__body { font-size: var(--fs-lead); line-height: 1.55; color: var(--text); }
.tldr__body strong { font-weight: 650; }

/* Info-tip — small superscript ⓘ with an accessible hover/focus popover (HOW-1). */
.info-tip {
  position: relative; cursor: help; color: var(--c-colmlm-strong);
  font-size: 0.7em; vertical-align: super; line-height: 0; margin-left: 1px;
  border-radius: 50%;
}
.info-tip__pop {
  position: absolute; left: 0; top: 1.4em; z-index: 30;
  width: min(20rem, 70vw); padding: var(--s-3) var(--s-4);
  font-size: var(--fs-small); font-weight: 400; line-height: 1.5;
  vertical-align: baseline; text-transform: none; letter-spacing: normal;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.info-tip:hover .info-tip__pop,
.info-tip:focus .info-tip__pop,
.info-tip:focus-within .info-tip__pop { opacity: 1; visibility: visible; transform: translateY(0); }

/* -------------------------------------------------------------------------
   4. Nav (sticky) + theme toggle
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--border);
}
.nav__inner {
  max-width: var(--container); /* nav gets the reserved wider 1120px column so the 11 links never wrap; content column stays 1000px */
  margin-inline: auto;
  padding-inline: var(--s-5);
  height: var(--nav-h);
  display: flex; align-items: center; gap: var(--s-4);
}
@media (min-width: 1025px) { .nav__inner { padding-inline: var(--s-7); } }

.nav__brand { text-decoration: none; flex: 0 0 auto; }
.nav__brand-mark {
  font-family: var(--font-serif);
  font-weight: 700; font-size: 1.15rem;
  color: var(--c-colmlm-strong);
  letter-spacing: -0.01em;
}

.nav__menu { display: flex; align-items: center; gap: var(--s-4); margin-left: auto; }
.nav__links { list-style: none; display: flex; gap: 2px; padding: 0; flex-wrap: wrap; }
.nav__link {
  display: inline-flex; align-items: center; min-height: 44px;  /* ≥44px hit target — DSG-8 */
  padding: 0 5px;
  font-size: 0.82rem; font-weight: 500;
  color: var(--text-muted); text-decoration: none;
  border-bottom: 2px solid transparent;
  border-radius: 4px 4px 0 0;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
.nav__link:hover { color: var(--text); }
.nav__link.is-active, .nav__link[aria-current="true"] {
  color: var(--c-colmlm-strong);
  border-bottom-color: var(--c-colmlm);
}

.nav__hamburger {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  background: transparent; border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); cursor: pointer;
  align-items: center; justify-content: center;
}
.nav__hamburger-bars, .nav__hamburger-bars::before, .nav__hamburger-bars::after {
  content: ""; display: block; width: 20px; height: 2px; background: var(--text);
  transition: transform .2s ease, opacity .2s ease;
}
.nav__hamburger-bars { position: relative; }
.nav__hamburger-bars::before { position: absolute; top: -6px; }
.nav__hamburger-bars::after  { position: absolute; top: 6px; }
.nav__hamburger[aria-expanded="true"] .nav__hamburger-bars { background: transparent; }
.nav__hamburger[aria-expanded="true"] .nav__hamburger-bars::before { top: 0; transform: rotate(45deg); }
.nav__hamburger[aria-expanded="true"] .nav__hamburger-bars::after  { top: 0; transform: rotate(-45deg); }

.theme-toggle {
  width: 44px; height: 44px; flex: 0 0 auto;   /* ≥44px hit target — DSG-8 */
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--border-strong);
  border-radius: var(--r-pill); cursor: pointer; color: var(--text);
  font-size: 1rem; line-height: 1;
}
.theme-toggle:hover { border-color: var(--c-colmlm); }
.theme-toggle__icon--moon { display: none; }
:root[data-theme="dark"] .theme-toggle__icon--sun { display: none; }
:root[data-theme="dark"] .theme-toggle__icon--moon { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__icon--sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle__icon--moon { display: inline; }
  :root[data-theme="light"] .theme-toggle__icon--sun { display: inline; }
  :root[data-theme="light"] .theme-toggle__icon--moon { display: none; }
}

/* Mobile / condensed nav — collapse at ≤1340px so the now-12 single-row links (Overview
   added round-12) only show above ~1340px, where they fit the ~1024px inner bar cleanly — DSG-3.
   The hamburger dropdown is a JS enhancement (`.js` set pre-paint); with JS OFF the
   menu falls back to a plain wrapped link list so section nav stays reachable — DSG-29. */
@media (max-width: 1340px) {
  .js .nav__hamburger { display: inline-flex; }
  .js .nav__menu {
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: var(--s-3);
    background: var(--surface); border-bottom: 1px solid var(--border);
    padding: var(--s-4) var(--s-5) var(--s-5);
    box-shadow: var(--shadow-2);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .js .nav__menu.is-open { transform: translateY(0); opacity: 1; visibility: visible; }

  /* No-JS fallback: let the bar grow and the menu drop to a full-width column list. */
  :root:not(.js) .nav__inner { height: auto; min-height: var(--nav-h); flex-wrap: wrap; padding-block: var(--s-2); }
  :root:not(.js) .nav__menu { width: 100%; margin-left: 0; flex-direction: column; align-items: stretch; gap: var(--s-2); padding-bottom: var(--s-2); }

  /* Shared mobile link styling (both the JS dropdown and the no-JS list). */
  .nav__links { flex-direction: column; gap: var(--s-1); }
  .nav__link { display: flex; padding: var(--s-3) var(--s-2); font-size: 1rem; border-bottom: none; border-left: 3px solid transparent; }
  .nav__link.is-active { border-left-color: var(--c-colmlm); border-bottom-color: transparent; }
  .theme-toggle { align-self: flex-start; }
}

/* -------------------------------------------------------------------------
   5. Buttons, badges, chips
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-5); min-height: 44px;
  font-family: var(--font-sans); font-size: 0.95rem; font-weight: 600;
  border-radius: var(--r-sm); border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer; line-height: 1.2;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn--sm { min-height: 44px; padding: var(--s-2) var(--s-4); font-size: 0.85rem; } /* ≥44px hit target — DSG-8 */
.btn:hover { transform: translateY(-1px); }
/* Fixed saturated coral so white text clears AA in both themes (5.96:1) — DSG-1 */
.btn--primary { background: var(--coral-fill); color: #fff; box-shadow: var(--shadow-1); }
.btn--primary:hover { box-shadow: var(--shadow-2); background: #9E3B32; }
.btn--outline { background: transparent; border-color: var(--border-strong); color: var(--text); }
.btn--outline:hover { border-color: var(--c-colmlm); }
.btn--ghost { background: transparent; color: var(--link); padding-inline: var(--s-3); }
.btn--disabled {
  background: var(--surface-2); color: var(--text-subtle);
  border-color: var(--border); cursor: not-allowed; box-shadow: none;
}
.btn--disabled:hover { transform: none; }
.btn__sub { font-weight: 400; font-size: 0.8em; }
.btn__icon { width: 1.1em; height: 1.1em; vertical-align: -0.15em; flex: none; } /* GitHub / Hugging Face marks — TL0-3/4 (.btn already gaps children) */

.badge {
  display: inline-flex; align-items: center;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px var(--s-3); border-radius: var(--r-pill);
}
.badge--preprint { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border-strong); }

.tag {
  display: inline-block; font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.03em; text-transform: uppercase;
  padding: 1px var(--s-2); border-radius: var(--r-pill);
  vertical-align: middle;
}
.ref-star { color: var(--c-ref); font-weight: 700; }

/* Token chips (mono pills) */
.token { font-size: 0.9em; font-weight: 500; }
.chip {
  display: inline-block; font-family: var(--font-mono);
  font-size: 0.82em; font-weight: 600; line-height: 1.4;
  padding: 1px 6px; border-radius: var(--r-sm); white-space: nowrap;
}
.chip--fact  { background: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong); }
/* Both chips are driven by tokens that flip in BOTH dark scopes, so they stay
   legible under OS-dark-without-toggle too. — DSG-12 */
.chip--factq { background: var(--c-annot-soft); color: var(--c-annot-strong); }
.chip--value { background: var(--c-colmlm-soft); color: var(--chip-value-fg); }

/* -------------------------------------------------------------------------
   6. Hero
   ------------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; padding-block: var(--s-8) var(--s-8); border-top: none; }
@media (min-width: 1025px) { .hero { padding-block: var(--s-9) var(--s-9); } }
.hero__flourish {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(52rem 30rem at 88% -10%, var(--c-colmlm-tint), transparent 60%),
    radial-gradient(40rem 26rem at 0% 8%, var(--c-annot-tint), transparent 55%);
  opacity: .9;
}
.hero__inner { position: relative; z-index: 1; }

.hero__eyebrow {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 600; color: var(--text-muted); margin-bottom: var(--s-5);
}
.hero__title { font-size: var(--fs-hero); line-height: 1.08; font-weight: 700; max-width: 26ch; margin-bottom: var(--s-5); } /* calmer 2–3 line title — DSG-11 */
.hero__brand { color: var(--c-colmlm); }
.hero__dek { font-size: var(--fs-lead); line-height: 1.5; color: var(--text); margin-bottom: var(--s-5); } /* full page width — TL0-1 */
.hero__dek strong { color: var(--c-colmlm-strong); font-weight: 650; }

.hero__authors { font-size: 0.95rem; color: var(--text-muted); line-height: 1.6; margin-bottom: var(--s-5); } /* full page width — TL0-2 */
.hero__affil { display: block; font-size: var(--fs-small); }

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-2); }

.hero__stats {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4);
}
@media (max-width: 640px) { .hero__stats { grid-template-columns: 1fr; } }

.stat {
  background: var(--surface); border: 1px solid var(--border);
  border-top: 3px solid var(--border-strong);
  border-radius: var(--r-md); padding: var(--s-5); box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; gap: var(--s-1);
}
.stat--accent-colmlm { border-top-color: var(--c-colmlm); }
/* Primary tiles (row 1: PPL + SimpleQA) read louder than the two secondary tiles — round-10 OVW-1 */
.stat--primary { border-top-width: 5px; }
.stat--primary .stat__value { font-size: clamp(2.2rem, 1.6rem + 1.6vw, 2.8rem); }
.stat__value { font-family: var(--font-serif); font-size: var(--fs-h1); font-weight: 700; color: var(--c-colmlm-strong); line-height: 1.05; }
.stat__label { font-weight: 650; font-size: 1rem; }
.stat__note { font-size: var(--fs-small); color: var(--text-muted); line-height: 1.45; }

/* -------------------------------------------------------------------------
   7. Cards (limitations, stages, unlocks)
   ------------------------------------------------------------------------- */
/* round-13 (DSG-3): the .cards / .cards--limits limitation-card CSS was removed with the
   §2/§3 merge (the amber limitation cards are gone). */

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--s-5); box-shadow: var(--shadow-1);
}
.card__title { font-family: var(--font-serif); font-size: var(--fs-h3); margin-bottom: var(--s-2); }
.card__body { color: var(--text-muted); font-size: 0.95rem; }
.card__note { font-size: var(--fs-small); color: var(--text-subtle); margin-top: var(--s-3); }
.card__list { margin: var(--s-2) 0 0; padding-left: var(--s-5); display: grid; gap: var(--s-3); }
.card__list li { color: var(--text); font-size: 0.95rem; }

/* Family accents (3px left border + dot) */
.accent-colmlm { border-left: 3px solid var(--c-colmlm); }
.accent-rel    { border-left: 3px solid var(--c-rel); }
.accent-std    { border-left: 3px solid var(--c-std); }
.accent-annot  { border-left: 3px solid var(--c-annot); }

/* Method / pipeline stages — full-width, stacked top-to-bottom (round-10 HOW-3/ANN-3) */
.stages, .pipeline { display: grid; grid-template-columns: 1fr; gap: var(--s-4); margin-block: var(--s-6); }

.card--stage { position: relative; }
/* Stage number is now an inline numbered badge at the card heading's left */
.stage__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.7em; height: 1.7em; margin-right: var(--s-2); vertical-align: -0.25em;
  font-family: var(--font-sans); font-size: 0.8em; font-weight: 700; line-height: 1;
  color: #fff; background: var(--coral-fill); border-radius: 50%;
}
.card--stage.accent-annot .stage__num { background: var(--c-annot-strong); }
.card--stage.accent-rel .stage__num { background: var(--c-rel-strong); }
/* In dark mode the annot/rel -strong fills lighten, so flip the digit to dark ink.
   Applied in BOTH dark scopes (toggle + OS preference) so OS-dark visitors aren't broken. — DSG-1 */
:root[data-theme="dark"] .card--stage.accent-annot .stage__num,
:root[data-theme="dark"] .card--stage.accent-rel .stage__num { color: #201a16; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card--stage.accent-annot .stage__num,
  :root:not([data-theme="light"]) .card--stage.accent-rel .stage__num { color: #201a16; }
}

.example { margin-top: var(--s-4); background: var(--surface-2); border-radius: var(--r-md); padding: var(--s-4); }
.example__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-subtle); font-weight: 700; margin-bottom: var(--s-2); }
.example__text { font-size: 0.92rem; line-height: 1.9; margin-bottom: var(--s-3); }
.example__text:last-child { margin-bottom: 0; }
.example__q { font-style: italic; }

/* -------------------------------------------------------------------------
   8. "What we'd want" row, unlocks-mini list, reasons
   ------------------------------------------------------------------------- */
.wants {
  list-style: none; padding: 0; margin: var(--s-6) 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4);
}
@media (max-width: 700px) { .wants { grid-template-columns: repeat(2, 1fr); } }
.want {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--s-4); text-align: center; box-shadow: var(--shadow-1);
}
.want__icon { display: flex; justify-content: center; color: var(--c-colmlm); margin-bottom: var(--s-2); }
.want__icon svg { width: 28px; height: 28px; } /* inline SVG renders identically everywhere — DSG-18 */
.want__label { display: block; font-weight: 700; }
.want__desc { display: block; font-size: var(--fs-small); color: var(--text-muted); }

.unlocks-mini { margin: var(--s-4) 0; padding-left: var(--s-5); display: grid; gap: var(--s-2); }
.unlocks-mini li { line-height: 1.5; }

.reasons { padding-left: var(--s-5); display: grid; gap: var(--s-3); margin-bottom: var(--s-4); }

/* -------------------------------------------------------------------------
   9. Figures
   ------------------------------------------------------------------------- */
.figure { margin-block: var(--s-6); }
.figure--inset { margin-block: var(--s-5); }
.figure__frame {
  background: var(--figure-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--shadow-2), var(--figure-inset);  /* inset softens the white panel in BOTH dark scopes — DSG-16 */
}
/* Schematic figures (overview / method / annotation): no card frame — full content-column
   width, no background/border/shadow/padding. The image keeps its own white bg. — GEN-2 */
.figure--schematic .figure__frame {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
/* Dark mode only: the frameless white schematic images are hard-edged slabs on the dark page.
   Add a subtle 1px edge ring (not a card background) so the image edge reads. Applied in BOTH
   dark scopes for parity (toggle + OS preference). — DSG-2 */
:root[data-theme="dark"] .figure--schematic .figure__img { outline: 1px solid var(--border-strong); outline-offset: -1px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .figure--schematic .figure__img { outline: 1px solid var(--border-strong); outline-offset: -1px; }
}
.figure-scroll { overflow-x: auto; }
.figure__img { margin-inline: auto; border-radius: 4px; }
/* Wide anchor figures: force a legible min width on phones so the overflow-x
   scroll container actually engages instead of the img shrinking to a sliver — DSG-15 */
@media (max-width: 700px) {
  .figure--wide .figure__img { min-width: 640px; }
}
/* Tall figure (fact_vs_nlu) is portrait — cap its height so it doesn't dominate */
.figure__img--tall { max-height: 460px; width: auto; }
.figure__caption { font-size: var(--fs-small); color: var(--text-muted); line-height: 1.5; margin-top: var(--s-3); max-width: var(--measure); }
.figure__caption strong { color: var(--text); }
.figure__legend { display: block; margin-top: var(--s-1); }
.figure__fullsize { color: var(--link); margin-left: var(--s-2); white-space: nowrap; } /* JS-free full-size view — DSG-23 */

.legend-key { font-weight: 600; }
.legend-key--std { color: var(--c-std); }
.legend-key--rel { color: var(--c-rel-strong); }
.legend-key--colmlm { color: var(--c-colmlm-strong); }

.figure-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); align-items: start; }
@media (max-width: 860px) { .figure-pair { grid-template-columns: 1fr; } }
/* Equal-height PPL figures where they sit side by side (round-10 R2-3) */
@media (min-width: 861px) {
  .figure-pair .figure__img { height: 300px; width: auto; max-width: 100%; object-fit: contain; }
}

/* -------------------------------------------------------------------------
   11. Tables (data + interactive)
   ------------------------------------------------------------------------- */
.table-tools { margin-top: var(--s-5); }
.filters {
  display: flex; flex-wrap: wrap; gap: var(--s-5);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--s-4); margin-bottom: var(--s-4);
}
.filter-group { border: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.filter-group legend {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 700; color: var(--text-subtle); float: left; width: 100%; margin-bottom: var(--s-2);
}
.filter-chip {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; /* ≥44px hit target — DSG-25 */
  font-size: 0.85rem; padding: var(--s-2) var(--s-3);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-pill); cursor: pointer; user-select: none;
}
.filter-chip input { accent-color: var(--c-colmlm); width: 16px; height: 16px; }
.filter-chip:hover { border-color: var(--c-colmlm); }

.table-scroll { overflow-x: auto; margin-block: var(--s-4); border-radius: var(--r-md); }
.data-table {
  width: 100%; border-collapse: collapse; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden;
  font-family: var(--font-sans);   /* explicit so tables never fall back to a UA serif — DSG-13 */
  /* Compact sizing so the 6-column tables fit the --content column on desktop with no scroll;
     the mobile overflow-x fallback + sticky first column still handle small screens. — round-09 */
  font-size: 0.86rem; min-width: 560px;
}
.data-table--compact { min-width: 520px; }
.table-caption, .data-table caption {
  caption-side: top; text-align: left; font-size: var(--fs-small);
  color: var(--text-muted); padding: 0 0 var(--s-3); max-width: var(--measure);
}
.data-table thead th {
  background: var(--surface-2); text-align: left; font-weight: 650;
  padding: var(--s-2) var(--s-3); border-bottom: 2px solid var(--border-strong);
  font-size: 0.74rem; white-space: normal; vertical-align: bottom; color: var(--text); /* headers may wrap (e.g. SimpleQA-Verified) so the column stays narrow */
}
.data-table th.num, .data-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table tbody th, .data-table tbody td { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--border); }
.data-table tbody tr:last-child th, .data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody th.model { font-weight: 600; text-align: left; white-space: nowrap; }
.data-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }

/* Family emphasis — left accent lives on the row's first cell so it renders
   reliably under border-collapse (box-shadow on <tr> is inconsistent). */
.fam-colmlm { background: var(--c-colmlm-tint) !important; }
.fam-colmlm th.model { border-left: 3px solid var(--c-colmlm); }
.fam-colmlm.emph th.model { color: var(--c-colmlm-strong); }
.fam-rel th.model { border-left: 3px solid var(--c-rel); color: var(--c-rel-strong); }
.fam-std th.model { border-left: 3px solid var(--c-std); } /* base navy so the accent reads (~11:1) — DSG-4 */
.fam-ref { color: var(--text-subtle); }
.fam-ref th.model { border-left: 3px solid var(--border-strong); }
.fam-ref th.model, .fam-ref td { font-style: italic; }
/* Ablation rows (e.g. LMLM-Asker, a Co-LMLM variant) — neutral accent, NOT a family hue,
   so one-hue-per-family stays trustworthy. — CLR-2 */
.fam-ablation th.model { border-left: 3px solid var(--border-strong); color: var(--text-muted); }

.up { color: var(--text-subtle); font-weight: 400; }
.gain { color: var(--c-pos); font-size: 0.74em; font-weight: 700; margin-left: 2px; }
.loss { color: var(--c-neg); font-size: 0.74em; font-weight: 700; margin-left: 2px; }
/* In the compact comparison tables (no-KB / Asker / timing) the +Δ/−Δ drops below the
   value so the wide "before → after (delta)" cells fit the --content column. — round-09 */
.data-table--compact .gain, .data-table--compact .loss { display: block; margin-left: 0; }
.data-table.hide-gains .gain { display: none; }

.data-table tr.is-hidden { display: none; }

/* Pin the model-name column while the table scrolls horizontally on phones — DSG-9.
   Opaque background required (dark tints are semi-transparent). */
@media (max-width: 640px) {
  .data-table th.model {
    position: sticky; left: 0; z-index: 2;
    background: var(--surface);
    border-right: 1px solid var(--border-strong);
  }
}

.table-foot, .table-caption code { font-size: var(--fs-small); }
.table-foot { color: var(--text-muted); font-size: var(--fs-small); margin-top: var(--s-2); max-width: var(--measure); line-height: 1.5; }

/* colored inline values */
.c-colmlm { color: var(--c-colmlm-strong); font-weight: 650; }
.c-colmlm-deep { color: var(--c-colmlm-deep); font-weight: 650; }
.c-std { color: var(--c-std); font-weight: 650; }
.c-rel { color: var(--c-rel-strong); font-weight: 650; }
.c-ref { color: var(--c-ref); font-weight: 650; }

/* round-11 (DSG-5): all inline-SVG charts were removed across rounds 10–11 (FactScore
   bar, Factuality-vs-NLU scatter, No-KB paired bars); their CSS is deleted. */

/* -------------------------------------------------------------------------
   13. Perplexity facts, NLU strip, compare strip
   ------------------------------------------------------------------------- */
.ppl-facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-block: var(--s-5); }
@media (max-width: 640px) { .ppl-facts { grid-template-columns: 1fr; } }
.ppl-fact { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-5); box-shadow: var(--shadow-1); }
.ppl-fact__head { font-weight: 650; margin-bottom: var(--s-3); font-size: 0.95rem; }
.ppl-fact__values { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700; line-height: 1.3; }
.ppl-fact__size { font-family: var(--font-sans); font-size: 0.8rem; font-weight: 400; color: var(--text-subtle); }
.ppl-fact__note { font-size: var(--fs-small); color: var(--text-muted); margin-top: var(--s-2); }

.compare-strip { margin-block: var(--s-5); overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: 0.9rem; min-width: 560px; }
.compare-table th, .compare-table td { padding: var(--s-3) var(--s-4); border: 1px solid var(--border); text-align: left; vertical-align: top; }
.compare-table thead th { background: var(--surface-2); font-family: var(--font-serif); }
.compare-table tbody th { background: var(--surface); font-weight: 650; }
/* Pin the row-label column while the compare-table scrolls on phones — DSG-28 */
@media (max-width: 640px) {
  .compare-table tbody th { position: sticky; left: 0; z-index: 2; background: var(--surface); border-right: 1px solid var(--border-strong); }
}
.compare-table td { color: var(--text-muted); background: var(--surface); }
.compare-table .c-colmlm { color: var(--c-colmlm-strong); }
.compare-table .c-rel { color: var(--c-rel-strong); }
.compare-table .c-std { color: var(--c-std); }

.nlu-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); margin-block: var(--s-5); }
@media (max-width: 640px) { .nlu-strip { grid-template-columns: 1fr; } }
.nlu-pair { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-5); text-align: center; box-shadow: var(--shadow-1); }
.nlu-pair__size { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-subtle); font-weight: 700; }
.nlu-pair__vals { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 700; margin: var(--s-2) 0; }
.nlu-pair__vs { font-family: var(--font-sans); font-size: 0.8rem; font-weight: 400; color: var(--text-subtle); }
.nlu-pair__cap { font-size: var(--fs-small); color: var(--text-muted); }

/* -------------------------------------------------------------------------
   14. Unlocks section
   ------------------------------------------------------------------------- */
.unlock {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--s-6); box-shadow: var(--shadow-1);
  margin-block: var(--s-5);
}
.unlock__head { display: flex; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-4); }
.unlock__tag {
  font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700;
  color: #fff; background: var(--coral-fill); padding: 2px var(--s-2);
  border-radius: var(--r-sm); flex: 0 0 auto;  /* fixed coral: white 5.96:1 both themes — DSG-1 */
}
.unlock__title { font-family: var(--font-serif); font-size: var(--fs-h2); font-weight: 650; }

.latency { margin-top: var(--s-5); background: var(--surface-2); border-radius: var(--r-md); padding: var(--s-5); }
.latency__title { font-size: var(--fs-small); font-weight: 700; color: var(--text-muted); margin-bottom: var(--s-3); }
/* Value sits OUTSIDE the fill in body-text colour, so no white-on-lightened-fill — DSG-1 */
.latency__row { display: grid; grid-template-columns: 8rem 1fr auto; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.latency__label { font-size: 0.85rem; font-weight: 600; }
.latency__bar { height: 22px; border-radius: var(--r-sm); width: var(--pct); min-width: 6px; transition: width .6s ease; }
.latency__bar--asker { background: var(--c-ref); }
.latency__bar--colmlm { background: var(--c-colmlm); }
.latency__val { font-size: 0.85rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.latency__note { font-size: var(--fs-small); color: var(--text-subtle); margin-top: var(--s-2); }
@media (max-width: 520px) { .latency__row { grid-template-columns: 5rem 1fr auto; } }

/* -------------------------------------------------------------------------
   15. Two-column meaning/limits
   ------------------------------------------------------------------------- */
/* Conclusion columns: plain text columns, no boxes (v2-E "no boxes" — DSG-4).
   A thin rule between them on desktop; stacked with a top rule on mobile. */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7); margin-top: var(--s-4); }
.two-col__side + .two-col__side { border-left: 1px solid var(--border); padding-left: var(--s-7); }
@media (max-width: 820px) {
  .two-col { grid-template-columns: 1fr; gap: var(--s-6); }
  .two-col__side + .two-col__side { border-left: none; border-top: 1px solid var(--border); padding-left: 0; padding-top: var(--s-6); }
}
.two-col__side .subhead { margin-top: 0; }
.meaning { padding-left: var(--s-5); display: grid; gap: var(--s-4); }
.meaning li { line-height: 1.55; }

/* -------------------------------------------------------------------------
   17. Walkthrough (stepper)
   ------------------------------------------------------------------------- */
.walkthrough {
  margin-block: var(--s-6); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-6);
}
.walkthrough__head { margin-bottom: var(--s-4); }
.walkthrough__title { font-family: var(--font-serif); font-size: var(--fs-h3); }
.walkthrough__caption { font-size: var(--fs-small); color: var(--text-muted); }
.walkthrough__steps { list-style: none; padding: 0; display: grid; gap: var(--s-3); }
.walk-step {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--c-colmlm); border-radius: var(--r-sm); padding: var(--s-4);
}
.walk-step__label { font-weight: 700; font-size: 0.85rem; color: var(--c-colmlm-strong); margin-bottom: var(--s-2); }
.walk-step__body { font-size: 0.95rem; line-height: 1.7; }
.walk-step__cost { display: block; margin-top: var(--s-2); font-size: var(--fs-small); color: var(--c-colmlm-strong); font-weight: 600; }
.tokens { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
.tok {
  display: inline-block; font-family: var(--font-mono); font-size: 0.8em;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px;
}
/* Stepper mode (JS active): overlay all steps in one grid cell so the container is
   ALWAYS the height of the tallest step (step 4). The current step is visible, the
   rest are visibility:hidden but still size the cell — so "Next" never moves, at any
   width, with no JS measurement. — DSG-2 / HOW-5 */
.walkthrough.is-stepper .walkthrough__steps { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); gap: 0; }
.walkthrough.is-stepper .walk-step { grid-area: 1 / 1; visibility: hidden; }
.walkthrough.is-stepper .walk-step.is-current { visibility: visible; }
.walkthrough__controls { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-4); }
.walkthrough__dots { display: inline-flex; gap: 2px; }
/* 9px visual dot with a transparent 44×44 tap area — DSG-25 */
.walk-dot {
  width: 44px; height: 44px; padding: 0; border: none; background: transparent;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.walk-dot::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--border-strong); transition: background .15s ease;
}
.walk-dot.is-on::before { background: var(--c-colmlm); }

/* -------------------------------------------------------------------------
   18. Authors / BibTeX / disclosure
   ------------------------------------------------------------------------- */
.authors { margin-block: var(--s-5); }
.authors__list { font-size: 1.05rem; line-height: 1.7; }
.authors__meta { font-size: var(--fs-small); color: var(--text-muted); margin-top: var(--s-2); }

.disclosure { margin-block: var(--s-4); }
.disclosure summary {
  cursor: pointer; font-weight: 600; color: var(--link);
  padding: var(--s-2) 0; list-style-position: inside;
}
.disclosure summary:hover { text-decoration: underline; }
.contrib { padding-left: var(--s-5); display: grid; gap: var(--s-2); margin-top: var(--s-3); font-size: 0.95rem; color: var(--text-muted); }
.contrib strong { color: var(--text); }

.bibtex { margin-top: var(--s-6); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); }
.bibtex__head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border); background: var(--surface); }
.bibtex__title { font-weight: 700; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.copy-btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: 0.82rem; font-weight: 600; padding: var(--s-2) var(--s-4); min-height: 44px; /* ≥44px — DSG-8 */
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  color: var(--text); cursor: pointer;
}
.copy-btn:hover { border-color: var(--c-colmlm); }
.copy-btn.is-copied { color: var(--c-pos); border-color: var(--c-pos); }
.bibtex__code { margin: 0; padding: var(--s-5); overflow-x: auto; font-size: 0.8rem; line-height: 1.6; color: var(--text); background: var(--surface); } /* two-tone raised affordance on the --surface-2 §11 — DSG-30 */
.bibtex__code code { font-family: var(--font-mono); white-space: pre; }
.bibtex__placeholder { font-size: var(--fs-small); color: var(--text-subtle); padding: 0 var(--s-5) var(--s-4); font-style: italic; }

/* -------------------------------------------------------------------------
   19. Footer
   ------------------------------------------------------------------------- */
.footer { border-top: 1px solid var(--border); padding-block: var(--s-7) var(--s-5); margin-top: var(--s-7); background: var(--surface); }
.footer__inner { display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: flex-start; justify-content: space-between; }
.footer__brand { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.footer__mark { font-family: var(--font-serif); font-weight: 700; color: var(--c-colmlm-strong); font-size: 1.1rem; }
.footer__lab { width: 100%; font-size: var(--fs-small); color: var(--text-muted); }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.footer__link { font-size: 0.9rem; color: var(--link); text-decoration: none; }
.footer__link:hover { text-decoration: underline; }
.footer__link--disabled { color: var(--text-subtle); cursor: not-allowed; }
.footer__fine { max-width: var(--content); margin: var(--s-5) auto 0; padding-inline: var(--s-5); font-size: var(--fs-small); color: var(--text-subtle); }
@media (min-width: 1025px) { .footer__fine { padding-inline: var(--s-7); } }

/* -------------------------------------------------------------------------
   20. Motion: scroll reveal + reduced motion
   ------------------------------------------------------------------------- */
/* Reveal is opt-in only when JS is present (.js on <html>), so content stays
   fully visible with JS disabled. */
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

@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;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .btn:hover { transform: none; }
}