/* =====================================================================
   ANTAEUS — web design tokens
   ---------------------------------------------------------------------
   A direct port of src/theme/{colors,typography,spacing,radius}.ts.
   The app is the source of truth: when a token changes there, change it
   here, with the same name. Nothing on this site should introduce a
   colour, size, or radius that the app doesn't have.

   Doctrine carried over from docs/design-reference/INSTRUMENT_SPEC.md:
     1. Ink first — the ledger is monochrome; hue is information only.
     2. ONE status scale for value-vs-band (ok / under / over / none).
     3. Accent attaches to a RELATIONSHIP (a completion, a delta, a PR),
        never to nav chrome, never to a workflow button.
     4. Chamfers, never pills. Nothing rounder than 12.
     5. Rules and alignment delimit information — not cards.
   ===================================================================== */

/* --- faces (self-hosted; both are SIL OFL, safe to serve) ----------- */
@font-face {
  font-family: 'Barlow SC';
  src: url('fonts/BarlowSemiCondensed-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow SC';
  src: url('fonts/BarlowSemiCondensed-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('fonts/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('fonts/IBMPlexMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

:root {
  /* --- typography ------------------------------------------------- */
  --f-sys: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI',
    Roboto, 'Helvetica Neue', sans-serif;
  --f-display: 'Barlow SC', 'Helvetica Neue Condensed', Impact, sans-serif;
  --f-mono: 'Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- spacing (spacing.ts) --------------------------------------- */
  --s-xxs: 2px;
  --s-xs: 4px;
  --s-sm: 8px;
  --s-md: 12px;
  --s-lg: 16px;
  --s-xl: 20px;
  --s-xxl: 24px;
  --s-xxxl: 32px;
  --s-huge: 48px;

  /* --- radius (radius.ts) — chamfer, never pill -------------------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;

  --maxw: 1080px;
  --gutter: 32px;

  /* --- DARK is the app's default; declared here so an un-stamped
         document with a dark OS lands on it via the media query below,
         and so [data-theme="dark"] can force it. Light is the bare
         :root fallback further down. ------------------------------- */
}

/* =====================================================================
   LIGHT — the app's lightPalette, verbatim. NOT an inversion: it was
   contrast-tuned on its own terms (textMuted #6B6B73 is ~7:1 on white,
   an explicit audit fix), and accent drops to the darker green that
   survives on a white ground.
   ===================================================================== */
:root {
  --bg: #f4f4f5;
  --surface: #ffffff;
  --card: #ffffff;
  --card-el: #ffffff;
  --border: #e0e0e3;
  --border-sub: #ececef;

  --t1: #0a0a0b;
  --t2: #52525a;
  --t3: #6b6b73;

  --accent: #1f8a3a;
  --accent-muted: #0d5c24;
  --accent-soft: rgba(31, 138, 58, 0.1);

  --danger: #b83b3b;
  --danger-soft: rgba(184, 59, 59, 0.1);
  --warn: #8f6404;
  --warn-soft: rgba(143, 100, 4, 0.1);
  --tip: #b58500;
  --info: #3460c2;
  --info-soft: rgba(52, 96, 194, 0.1);

  --ring-train: #b8355c;
  --ring-fuel: #0f7280;

  --ghost: rgba(10, 10, 11, 0.58);
  --ghost-outline: rgba(10, 10, 11, 0.45);
  --tick: #d4d4d9;
  --lift: #ffffff;
  --keycap: #e6e6ea;
  --inverse: #0a0a0b;
  --inverse-text: #f4f4f5;

  --overlay: rgba(0, 0, 0, 0.4);
  --shadow: 0 1px 2px rgba(10, 10, 11, 0.06), 0 8px 24px rgba(10, 10, 11, 0.06);

  color-scheme: light;
}

/* --- DARK via system preference, unless light was explicitly chosen -- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #09090b;
    --surface: #0f0f12;
    --card: #141417;
    --card-el: #1a1a1e;
    --border: #222226;
    --border-sub: #1a1a1e;

    --t1: #f2f2f4;
    --t2: #a1a1a8;
    --t3: #8a8a92;

    --accent: #86e07b;
    --accent-muted: #4a8542;
    --accent-soft: rgba(134, 224, 123, 0.1);

    --danger: #e0655a;
    --danger-soft: rgba(224, 101, 90, 0.12);
    --warn: #e0a64b;
    --warn-soft: rgba(224, 166, 75, 0.12);
    --tip: #f2c94c;
    --info: #6e9bdd;
    --info-soft: rgba(110, 155, 221, 0.12);

    --ring-train: #e4589b;
    --ring-fuel: #45c4ce;

    --ghost: rgba(242, 242, 244, 0.55);
    --ghost-outline: rgba(242, 242, 244, 0.38);
    --tick: #2a2a2f;
    --lift: #17171b;
    --keycap: #26262b;
    --inverse: #f2f2f4;
    --inverse-text: #0b0b0d;

    --overlay: rgba(0, 0, 0, 0.6);
    --shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 24px 60px rgba(0, 0, 0, 0.45);

    color-scheme: dark;
  }
}

/* --- DARK forced by the toggle -------------------------------------- */
:root[data-theme='dark'] {
  --bg: #09090b;
  --surface: #0f0f12;
  --card: #141417;
  --card-el: #1a1a1e;
  --border: #222226;
  --border-sub: #1a1a1e;

  --t1: #f2f2f4;
  --t2: #a1a1a8;
  --t3: #8a8a92;

  --accent: #86e07b;
  --accent-muted: #4a8542;
  --accent-soft: rgba(134, 224, 123, 0.1);

  --danger: #e0655a;
  --danger-soft: rgba(224, 101, 90, 0.12);
  --warn: #e0a64b;
  --warn-soft: rgba(224, 166, 75, 0.12);
  --tip: #f2c94c;
  --info: #6e9bdd;
  --info-soft: rgba(110, 155, 221, 0.12);

  --ring-train: #e4589b;
  --ring-fuel: #45c4ce;

  --ghost: rgba(242, 242, 244, 0.55);
  --ghost-outline: rgba(242, 242, 244, 0.38);
  --tick: #2a2a2f;
  --lift: #17171b;
  --keycap: #26262b;
  --inverse: #f2f2f4;
  --inverse-text: #0b0b0d;

  --overlay: rgba(0, 0, 0, 0.6);
  --shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 24px 60px rgba(0, 0, 0, 0.45);

  color-scheme: dark;
}

/* =====================================================================
   RESET + BASE
   ===================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--t2);
  font-family: var(--f-sys);
  font-size: 15px;
  line-height: 22px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--t1);
  text-decoration-color: var(--border);
  text-underline-offset: 3px;
}
a:hover {
  text-decoration-color: currentColor;
}

/* Focus: a real, visible ring in both themes (the app has no hover, so
   the web version must at least be keyboard-honest). */
:focus-visible {
  outline: 2px solid var(--t1);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

::selection {
  background: var(--accent-soft);
  color: var(--t1);
}

/* =====================================================================
   TYPE REGISTERS — the app's three, and only these three.
   ===================================================================== */

/* Measurement register: Barlow Semi Condensed, tabular. Numerals and
   the one editorial headline size. Never below 15px. */
.display {
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--t1);
  margin: 0;
}
.metric {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.2px;
  font-variant-numeric: tabular-nums;
  color: var(--t1);
}
.metric-lg {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 30px;
  line-height: 34px;
  letter-spacing: -0.4px;
  font-variant-numeric: tabular-nums;
  color: var(--t1);
}
.exercise {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 26px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--t1);
}
.agate {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.2px;
  font-variant-numeric: tabular-nums;
}
.ghost-fig {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  font-variant-numeric: tabular-nums;
  color: var(--ghost);
}

/* Micro register: IBM Plex Mono, ALWAYS CAPS for overlines. The app's
   connective tissue — section heads, labels, units, legends, buttons. */
.mono {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--t3);
}
.mono-13 {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.4px;
  font-variant-numeric: tabular-nums;
  color: var(--t3);
}

/* Prose register: system face, invisible and fast. */
.lede {
  font-size: 17px;
  line-height: 26px;
  color: var(--t2);
}
.cap {
  font-size: 13px;
  line-height: 18px;
  color: var(--t2);
  font-variant-numeric: tabular-nums;
}
.strong {
  font-weight: 600;
  color: var(--t1);
  font-variant-numeric: tabular-nums;
}

/* =====================================================================
   THE LEDGER GRAMMAR — ports of the app's shared components.
   ===================================================================== */

/* SectionRule: mono overline caps sitting ON a hairline rule, with an
   optional right-aligned caption. Never floating bold text. */
.rule {
  display: flex;
  align-items: flex-end;
  gap: var(--s-sm);
  padding-bottom: var(--s-sm);
  border-bottom: 1px solid var(--border);
  margin: 0 0 var(--s-md);
}
.rule > .mono:first-child {
  color: var(--t2);
}
.rule .rule-cap {
  margin-left: auto;
  text-align: right;
  font-size: 13px;
  line-height: 18px;
  color: var(--t3);
}

/* LedgerStatRow: fixed mono label column, figure in the measurement
   face, baseline-aligned. The anti-KPI-tile. */
.lrow {
  display: flex;
  align-items: baseline;
  gap: var(--s-md);
  min-height: 28px;
  padding: var(--s-xs) 0;
}
.lrow > .mono:first-child {
  width: 116px;
  flex: none;
}
.lrow .lrow-val {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  font-variant-numeric: tabular-nums;
  color: var(--t1);
}
.lrow .lrow-suffix {
  margin-left: var(--s-xs);
}

/* Ruled record rows — the app's `entryRow` + hairline separation. */
.entries > * + * {
  border-top: 1px solid var(--border-sub);
}
.entry {
  display: flex;
  gap: var(--s-md);
  padding: var(--s-md) 0;
  align-items: flex-start;
}
/* The margin tick: a 2×14 ink stroke at the left edge of a record row. */
.tick {
  width: 2px;
  height: 14px;
  background: var(--t1);
  flex: none;
  margin-top: 3px;
}
.tick.ok { background: var(--accent); }
.tick.warn { background: var(--warn); }
.tick.over { background: var(--danger); }
.tick.none { background: var(--tick); }

/* AppButton: an OUTLINED chamfered ledger cell, never a filled slab.
   Hierarchy reads from border + label colour. Labels are mono caps. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-sm);
  min-height: 44px;
  padding: var(--s-sm) var(--s-lg);
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--t2);
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, opacity 120ms ease;
}
.btn:hover { background: var(--lift); }
.btn:active { opacity: 0.85; }
.btn.primary {
  border-color: var(--t1);
  color: var(--t1);
}
/* Accent is a COMPLETION colour. On this site it appears on exactly one
   thing per page — never on a nav item or a workflow button. */
.btn.accent {
  border-color: var(--accent);
  color: var(--accent);
}
.btn.ghost {
  border-color: transparent;
  color: var(--t1);
  padding-left: 0;
  padding-right: 0;
}
.btn.lg { min-height: 52px; padding: var(--s-md) var(--s-xl); }
.btn.sm { min-height: 36px; padding: var(--s-xs) var(--s-md); font-size: 11px; }
.btn[disabled],
.btn[aria-disabled='true'] {
  opacity: 0.45;
  pointer-events: none;
}

/* EmptyState: the unwritten ledger entry — a DASHED chamfered slot,
   left-aligned, one strong line + one muted line + one quiet action.
   The only dashed border in the system. */
.empty {
  border: 1px dashed var(--border);
  border-radius: var(--r-sm);
  padding: var(--s-lg);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-xs);
}
.empty h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--t1);
}
.empty p {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--t3);
  max-width: 46ch;
}

/* The coach callout — hairline box with a 3px status left edge, a tip
   bulb, a mono kicker and one line of prose. Used verbatim in the app
   on Today, the body map, and the coach inbox. */
.callout {
  display: flex;
  gap: var(--s-md);
  border: 1px solid var(--border);
  border-left: 3px solid var(--warn);
  border-radius: var(--r-lg);
  padding: var(--s-lg);
  background: var(--card);
}
.callout.ok { border-left-color: var(--accent); }
.callout.info { border-left-color: var(--info); }
.callout .bulb { color: var(--tip); flex: none; margin-top: 1px; }
.callout p { margin: var(--s-xxs) 0 0; color: var(--t1); font-weight: 600; }
.callout .cap { font-weight: 400; }

/* Inputs: flat blocks with a hairline bottom border, never outlined
   pills (INSTRUMENT_SPEC §5). */
.field {
  width: 100%;
  background: var(--surface);
  color: var(--t1);
  border: 1px solid var(--border-sub);
  border-bottom-color: var(--border);
  border-radius: var(--r-sm);
  padding: var(--s-md);
  font-family: var(--f-sys);
  font-size: 16px; /* ≥16 so iOS doesn't zoom on focus */
  line-height: 22px;
  min-height: 48px;
}
.field::placeholder { color: var(--t3); }
.field:focus-visible {
  outline: 2px solid var(--t1);
  outline-offset: 1px;
}
textarea.field {
  min-height: 104px;
  resize: vertical;
}
select.field {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--t3) 50%),
    linear-gradient(135deg, var(--t3) 50%, transparent 50%);
  background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

/* =====================================================================
   LAYOUT
   ===================================================================== */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* The machinist ruler — a hairline and tick marks down the left edge.
   Carried over from the previous site; it's the cheapest, most
   distinctive brand mark the page has. */
body::before,
body::after {
  content: '';
  position: fixed;
  top: 0;
  bottom: 0;
  left: 22px;
  pointer-events: none;
  z-index: 0;
}
body::before {
  width: 1px;
  background: var(--border-sub);
}
body::after {
  width: 7px;
  background: repeating-linear-gradient(
    to bottom,
    var(--border) 0 1px,
    transparent 1px 72px
  );
}

/* =====================================================================
   NAV + FOOTER
   ===================================================================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  /* Opaque, not 92% — once the bar actually stuck, the page text slid
     under it and showed through the wordmark. Translucent chrome over
     moving content is the glass effect this design system rejects
     anyway; there is no blur to hide behind. */
  background: var(--bg);
  /* iOS lets the page scroll UNDER the status bar, and a bar stuck at
     top:0 stops short of it — so lines of body text drifted across the
     notch above the wordmark. Growing the bar by the safe-area inset
     paints its own background up there instead. */
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid var(--border-sub);
}
.nav-in {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--s-md) var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--s-lg);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-sm);
  text-decoration: none;
  color: var(--t1);
}
.brand svg { width: 22px; height: 22px; }
.brand span {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--s-lg);
  margin-left: auto;
}
.nav-links a {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--t3);
  text-decoration: none;
  padding: var(--s-sm) 0;
}
.nav-links a:hover { color: var(--t1); }
.nav-links a[aria-current='page'] {
  color: var(--t1);
  box-shadow: inset 0 -2px 0 var(--t1);
}

/* Theme toggle — an InkCell, exactly like the app's segment control. */
.theme-toggle {
  display: inline-flex;
  border: 1px solid var(--border-sub);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--lift);
}
.theme-toggle button {
  min-width: 34px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--t3);
  cursor: pointer;
  padding: 0 var(--s-sm);
}
.theme-toggle button[aria-pressed='true'] {
  color: var(--t1);
  box-shadow: inset 0 0 0 1px var(--t1);
  border-radius: var(--r-xs);
}
.theme-toggle svg { width: 15px; height: 15px; }

/* Mobile disclosure menu. <details> so it opens with no JavaScript;
   theme.js only adds the niceties (close on Escape, on outside tap, and
   after following a link). Hidden above the breakpoint, where the full
   link row fits. */
.navmenu { position: relative; margin-left: auto; display: none; }
.navmenu > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--s-sm);
  min-height: 36px;
  padding: 0 var(--s-sm) 0 var(--s-md);
  border: 1px solid var(--border-sub);
  border-radius: var(--r-sm);
  background: var(--lift);
  color: var(--t2);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.navmenu > summary::-webkit-details-marker { display: none; }
.navmenu > summary::marker { content: ''; }
.navmenu > summary:focus-visible { outline: 2px solid var(--t1); outline-offset: 1px; }
/* Three ruled bars — the same hairline vocabulary as the section rules,
   not a rounded icon-font glyph. */
.navmenu-bars,
.navmenu-bars::before,
.navmenu-bars::after {
  display: block;
  width: 15px;
  height: 1.5px;
  background: currentColor;
  content: '';
}
.navmenu-bars { position: relative; }
.navmenu-bars::before { position: absolute; top: -5px; }
.navmenu-bars::after { position: absolute; top: 5px; }
.navmenu[open] > summary { color: var(--t1); box-shadow: inset 0 0 0 1px var(--t1); }
.navmenu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--s-sm));
  min-width: 210px;
  display: flex;
  flex-direction: column;
  padding: var(--s-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 12px 28px rgb(0 0 0 / 28%);
}
.navmenu-panel a {
  padding: var(--s-md);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--t2);
  text-decoration: none;
  border-bottom: 1px solid var(--border-sub);
}
.navmenu-panel a:last-of-type { border-bottom: 0; }
.navmenu-panel a:hover { color: var(--t1); }
.navmenu-panel a[aria-current='page'] { color: var(--t1); }
.navmenu-panel .btn {
  margin-top: var(--s-sm);
  justify-content: center;
  border-bottom: 1px solid var(--accent);
}

.site-footer {
  border-top: 1px solid var(--border-sub);
  margin-top: var(--s-huge);
  padding: var(--s-xxl) 0 var(--s-huge);
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-lg) var(--s-xxl);
  align-items: baseline;
}
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-lg);
  margin-left: auto;
}
.site-footer a {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--t3);
  text-decoration: none;
}
.site-footer a:hover { color: var(--t1); }

/* =====================================================================
   UTILITIES
   ===================================================================== */
.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 {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--card);
  color: var(--t1);
  padding: var(--s-md);
  z-index: 100;
  border: 1px solid var(--t1);
  border-radius: var(--r-sm);
}
.skip:focus { left: var(--s-md); top: var(--s-md); }

.ok { color: var(--accent); }
.warn-c { color: var(--warn); }
.over-c { color: var(--danger); }
.muted { color: var(--t3); }
.t2 { color: var(--t2); }
.t1 { color: var(--t1); }

/* Motion: the app animates almost nothing. Two short fades, one earned
   draw-in, and Reduce Motion is honoured. Web follows the same budget. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Nothing may push the document wider than the viewport. */
/* `overflow-x: hidden` here was silently disabling the sticky header:
   clipping with `hidden` makes the element a scroll container, and a
   sticky descendant then sticks to THAT box instead of the viewport, so
   the nav scrolled away on every page. `clip` clips without creating a
   scroll container, so the nav sticks again. The fallback keeps the old
   behaviour (clipped, non-sticky) on engines without `clip`. */
html, body { max-width: 100%; overflow-x: clip; }
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}
/* The nav is sticky now, so in-page anchors have to clear it. */
html { scroll-padding-top: 72px; }

@media (max-width: 760px) {
  :root { --gutter: 22px; }
  body::before,
  body::after { display: none; }
  /* Brand + five links + a toggle cannot share one line on a phone.
     Hiding three of the five was the old answer, and it buried the two
     that matter — a reader had to scroll to the footer to find them.
     The whole row folds into the disclosure menu instead, so nothing is
     unreachable from the top of any page. */
  /* A label and a right-aligned caption can't share a phone-width line:
     the label wrapped mid-phrase while the caption hugged the right
     edge, and two adjacent rows ended up aligned opposite ways. Below
     this width the caption drops to its own line and reads left, like
     everything around it. */
  .rule { flex-wrap: wrap; }
  .rule .rule-cap { margin-left: 0; text-align: left; flex-basis: 100%; }

  .nav-in { gap: var(--s-sm); }
  .nav-links { display: none; }
  /* nav-links carried the margin-left:auto that pushed the right-hand
     group over. With it gone, the toggle has to take that job or it
     ends up sitting against the wordmark. */
  .theme-toggle { margin-left: auto; }
  .navmenu { display: block; margin-left: 0; }
  html { scroll-padding-top: 64px; }
  .site-footer .wrap { flex-direction: column; align-items: flex-start; }
  .site-footer nav { margin-left: 0; }
}