/* ===========================================================================
   system.css: the shared visual system for the write-ups under /blog/.
   Loaded LAST on every write-up (after base.css and the article's own CSS),
   so it wins over the older per-article rules it replaces.

   One rule carries most of it:
     figures are SCREENS  (near-black, hairline, everything inside the panel)
     the text's furniture is PAPER  (tables, callouts, the CTA: a lifted grey)
   Mono means data (axes, readouts, annotations, footers). Captions are prose,
   so they're sans. Fonts (Uncut Sans, Geist Mono) are declared in base.css.
   =========================================================================== */

/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root {
  /* Surfaces */
  --surface-page:   oklch(0.162 0 0);
  --surface-paper:  oklch(0.196 0 0);        /* tables, callouts, CTA */
  --surface-screen: oklch(0.135 0 0);        /* every figure */
  --surface-lift:   oklch(1 0 0 / 0.045);    /* an area inside a screen */
  --hairline:        oklch(1 0 0 / 0.09);
  --hairline-soft:   oklch(1 0 0 / 0.055);
  --hairline-strong: oklch(1 0 0 / 0.18);

  /* Ink (unchanged from theme.css) */
  --ink-1: oklch(0.95 0 0);   /* headings, values */
  --ink-2: oklch(0.77 0 0);   /* body: grey, so white is for headings, values and links */
  --ink-3: oklch(0.60 0 0);   /* meta, captions, axes */
  --ink-4: oklch(0.42 0 0);   /* disabled, placeholders */

  /* One accent: blue. Also the single-hue sequential scale. */
  --accent: #2997ff;   /* Apple blue, bright step for dark grounds */
  --seq-0: oklch(1 0 0 / 0.05);
  --seq-1: color-mix(in oklch, var(--accent) 25%, transparent);
  --seq-2: color-mix(in oklch, var(--accent) 45%, transparent);
  --seq-3: color-mix(in oklch, var(--accent) 70%, transparent);
  --seq-4: var(--accent);

  /* Categorical: four muted hues, always in this order, then neutral.
     Validated (dataviz validator, all pairs): dark worst CVD ΔE 9.1,
     normal 16.7. Deliberately lighter than the validator's dark band to keep
     the muted look; contrast still ≥ 3:1 on the screen surface. */
  --cat-1: oklch(0.76 0.12 250);   /* blue   #73b6fa */
  --cat-2: oklch(0.76 0.12 60);    /* orange #e99e5e */
  --cat-3: oklch(0.80 0.12 165);   /* green  #69d6aa */
  --cat-4: oklch(0.62 0.13 315);   /* violet #a36cbc */
  --cat-n: oklch(0.60 0 0);        /* neutral / other */

  /* Status: reserved, always with a word (Pass, Fail, !) */
  --good: oklch(0.82 0.13 172);  --good-bg: oklch(0.72 0.12 172 / 0.13);
  --bad:  oklch(0.78 0.16 25);   --bad-bg:  oklch(0.72 0.16 25 / 0.14);

  /* Radii */
  --r-cell: 2px;    /* heatmap cells, strips */
  --r-sm: 6px;      /* buttons inside a track, small cards */
  --r-md: 8px;      /* inner cards, wells, inputs */
  --r-lg: 14px;     /* panels, images, tables, the CTA */
  --r-pill: 999px;  /* chips, badges, segmented tracks, buttons */

  /* Type */
  --font-sans: "Uncut Sans", "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --t-mono: 11px;
  --t-caption: 12.5px;
  --t-small: 13px;
  --t-ui: 14px;
  --t-body: 16px;
  --t-h3: 15px;
  --t-h2: 18px;
  --t-lede: 18px;

  /* Widths */
  --measure: 44rem;   /* 704px text column */
  --wide-out: 9rem;   /* figures break out to 992px at ≥1240 */
}

:root[data-theme="light"] {
  --surface-page:   oklch(0.988 0 0);
  --surface-paper:  oklch(0.965 0 0);
  --surface-screen: oklch(1 0 0);
  --surface-lift:   oklch(0 0 0 / 0.035);
  --hairline:        oklch(0 0 0 / 0.10);
  --hairline-soft:   oklch(0 0 0 / 0.06);
  --hairline-strong: oklch(0 0 0 / 0.20);
  --ink-1: oklch(0.24 0 0); --ink-2: oklch(0.40 0 0); --ink-3: oklch(0.55 0 0); --ink-4: oklch(0.72 0 0);
  --accent: #0071e3;   /* Apple system blue */
  --seq-0: oklch(0 0 0 / 0.05);
  /* light steps: worst CVD ΔE 9.5, normal 19.4 */
  --cat-1: oklch(0.58 0.15 255);   /* #337bd0 */
  --cat-2: oklch(0.64 0.14 55);    /* #cb7229 */
  --cat-3: oklch(0.62 0.12 165);   /* #249c74 */
  --cat-4: oklch(0.45 0.15 315);   /* #73348d */
  --cat-n: oklch(0.62 0 0);
  --good: oklch(0.45 0.11 172); --good-bg: oklch(0.62 0.12 172 / 0.15);
  --bad:  oklch(0.50 0.19 25);  --bad-bg:  oklch(0.62 0.18 25 / 0.15);
}

/* Map the old article tokens onto the system, so existing figure code that
   reads --accent, --hl, --fig-bg, --lk-* etc. picks the system up for free. */
:root, :root[data-theme="light"] {
  --bg: var(--surface-page);
  --bg-elevated: var(--surface-paper);
  --text: var(--ink-1); --text-secondary: var(--ink-2); --text-tertiary: var(--ink-3); --text-disabled: var(--ink-4);
  --border: var(--hairline); --border-light: var(--hairline-soft);
  --font: var(--font-sans); --mono: var(--font-mono);
  --hl: var(--accent);
  --fig-bg: var(--surface-screen); --fig-ring: var(--hairline); --fig-empty: var(--seq-0);
  --c-craft: var(--cat-1); --c-life: var(--cat-2); --c-work: var(--cat-3); --c-self: var(--cat-4); --c-other: var(--cat-n);
  --lk-clue: var(--cat-1); --lk-grudge: var(--bad); --lk-secret: var(--cat-4); --lk-close: var(--cat-3); --lk-work: var(--cat-n);
  --ok: var(--good); --ok-bg: var(--good-bg); --warn: var(--bad); --warn-bg: var(--bad-bg);
  --tg-warn: var(--bad);
  --ctrl-rule: var(--cat-3); --ctrl-cost: var(--cat-1); --ctrl-timing: var(--cat-4);
  --ctrl-rule-bg: color-mix(in oklch, var(--cat-3) 16%, transparent);
  --ctrl-cost-bg: color-mix(in oklch, var(--cat-1) 16%, transparent);
  --ctrl-timing-bg: color-mix(in oklch, var(--cat-4) 22%, transparent);
  --pill-active-bg: oklch(from var(--ink-1) l c h / 0.10);
}

/* ── Prose ─────────────────────────────────────────────────────────────────── */
body { font-family: var(--font-sans); background: var(--surface-page); }
/* Body text is 16px on every write-up (the mystery's was, by accident). */
.section > p, .intro p, .section > ul > li, .section > ol > li { font-size: var(--t-body); line-height: 1.6; color: var(--ink-2); }
.section > p, .intro p { margin-bottom: 14px; }
.section > p:last-child, .intro p:last-child { margin-bottom: 0; }
.section h2 { font-size: var(--t-h2); line-height: 1.3; font-weight: 650; letter-spacing: -0.01em; color: var(--ink-1); text-wrap: balance; }
.section h3 { font-size: var(--t-h3); line-height: 1.4; font-weight: 600; color: var(--ink-1); }
.mono { font-family: var(--font-mono); font-size: var(--t-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* ── Badge / eyebrow ───────────────────────────────────────────────────────── */
.badge { border-radius: var(--r-pill); border-color: var(--hairline); color: var(--ink-2); }

/* ── Hero media: one treatment for photo, screenshot or a live figure ───────── */
.hero-media { margin: 48px 0 0; }
.hero .hero-media { text-align: left; }
.photo { margin: 32px 0; }
.hero-media > .fig { margin: 0; box-shadow: 0 0 0 1px var(--hairline), 0 24px 60px oklch(0 0 0 / 0.35); }
.hero-media > img, .hero-media > .hero-screen, .photo > img {
  display: block; width: 100%; height: auto; border-radius: var(--r-lg);
  box-shadow: 0 0 0 1px var(--hairline), 0 24px 60px oklch(0 0 0 / 0.35);
}
.hero-media figcaption, .photo figcaption, .fig-cap--below {
  margin-top: 12px; font-size: var(--t-caption); line-height: 1.5; color: var(--ink-3); text-align: center; text-wrap: balance;
}

/* ── Figure: a screen that holds everything ───────────────────────────────────
   head (title + how-to, controls right) → body → foot (mono readout · key)
   → caption (prose, under a hairline). */
.fig {
  position: relative; margin: 32px 0 40px; padding: 20px 24px;
  background: var(--surface-screen); border-radius: var(--r-lg);
  box-shadow: 0 0 0 1px var(--hairline);
}
.fig-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 24px; margin-bottom: 20px; }
.fig-head > div:first-child { flex: 1 1 18rem; min-width: 0; }
.fig-title { font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--ink-1); text-wrap: balance; }
.fig-sub { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--ink-3); text-wrap: pretty; max-width: 62ch; }
.fig-body { position: relative; }
.fig-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  margin-top: 16px; min-height: 26px; font-family: var(--font-mono); font-size: var(--t-mono); color: var(--ink-3);
}
.fig-cap {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hairline-soft);
  font-family: var(--font-sans); font-size: var(--t-caption); line-height: 1.55; color: var(--ink-3); text-wrap: pretty;
}
.fig-cap strong { color: var(--ink-1); font-weight: 600; }
.fig-well { background: var(--surface-lift); border-radius: var(--r-md); padding: 16px; }

/* The figure code's own inner boxes step aside: the panel is the screen now.
   A figure with two plots gets a hairline between them. */
.fig .fig-box { background: none; box-shadow: none; padding: 0; border-radius: 0; }
.fig .fig-box + .fig-box { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--hairline-soft); }
.fig .module-head { margin-bottom: 20px; }
.fig .module-head:has(+ .fig-desc) { margin-bottom: 4px; }
.fig .module-title { font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--ink-1); text-wrap: balance; }
.fig .module-sub, .fig .fig-desc { margin: 4px 0 20px; min-height: 0; font-size: 14px; line-height: 1.5; color: var(--ink-3); text-wrap: pretty; max-width: 62ch; }
.fig .fig-desc a { color: var(--ink-2); }
.fig .fig-foot { margin-top: 16px; }
.fig .rules-table { background: none; }
.fig > :last-child { margin-bottom: 0; }

@media (max-width: 560px) {
  .fig { padding: 16px; border-radius: 12px; }
  .fig-head { margin-bottom: 16px; }
}

@media (min-width: 1240px) { .hero-media, .photo--wide, .fig.fig--wide { margin-left: calc(-1 * var(--wide-out)); margin-right: calc(-1 * var(--wide-out)); } }

/* ── Chips (pill): legend keys and choices ─────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip, .pick {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px;
  border: 0; border-radius: var(--r-pill); background: none; box-shadow: 0 0 0 1px var(--hairline);
  font: 400 12px var(--font-sans); color: var(--ink-2); white-space: nowrap; cursor: pointer;
  transition: color 160ms, box-shadow 160ms, scale 160ms;
}
.chip i, .key i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.chip--key { cursor: default; color: var(--ink-3); }
.pick:hover { color: var(--ink-1); }
.pick.is-active, .chip.is-active { color: var(--ink-1); box-shadow: 0 0 0 1px var(--ink-3); background: var(--surface-lift); }
.pick:active { scale: 0.96; }
.icon-btn { width: 26px; padding: 0; justify-content: center; }

/* Segmented: same family, for one-of-n modes */
.segmented { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; background: none; border: 0; box-shadow: 0 0 0 1px var(--hairline); border-radius: var(--r-pill); }
.seg-btn { border-radius: var(--r-pill); padding: 5px 12px; font-size: 12.5px; }
.seg-btn.is-active { background: var(--pill-active-bg); color: var(--ink-1); }

/* Key items in a legend (non-interactive, line or dot) */
.keys { display: flex; flex-wrap: wrap; gap: 6px 16px; font: 12px var(--font-sans); color: var(--ink-2); }
.key { display: inline-flex; align-items: center; gap: 8px; }
.key .line { width: 18px; border-top: 2px solid; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border: 0; border-radius: var(--r-pill); font: 500 14px var(--font-sans); cursor: pointer; white-space: nowrap; transition: opacity 160ms, scale 160ms; }
.btn:active { scale: 0.97; }
a.btn { text-decoration: none; }
.btn--primary { background: var(--ink-1); color: var(--surface-page); }
.btn--primary:hover { opacity: 0.9; }
.btn--ghost { background: none; color: var(--ink-1); box-shadow: 0 0 0 1px var(--hairline-strong); }
.rp-btn { border-radius: var(--r-pill); }

/* ── Table (paper) ─────────────────────────────────────────────────────────── */
.table-wrap, .table-scroll { margin: 24px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-lg); background: var(--surface-paper); }
.table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table th { text-align: left; padding: 12px 16px; font-size: 12px; font-weight: 500; color: var(--ink-3); border-bottom: 1px solid var(--hairline); white-space: nowrap; }
.table td { padding: 12px 16px; font-size: var(--t-ui); line-height: 1.5; color: var(--ink-2); border-bottom: 1px solid var(--hairline-soft); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table td:first-child { color: var(--ink-1); font-weight: 600; }
.table .num { text-align: right; white-space: nowrap; }
/* inside a figure the table loses its own surface */
.fig .table-wrap, .fig .table-scroll { background: none; margin: 0; border-radius: 0; }
.fig .table th, .fig .table td { padding-left: 0; }
.status { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; margin-right: 6px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600; }
.status--good { color: var(--good); background: var(--good-bg); }
.status--bad { color: var(--bad); background: var(--bad-bg); }
.pf { border: 0; border-radius: var(--r-pill); padding: 2px 8px; }

/* The older .rules-table (all three write-ups) is the same paper table */
.rules-table { border-radius: var(--r-lg); background: var(--surface-paper); }
.table-wrap > .rules-table, .table-scroll > .rules-table { margin: 0; border-radius: 0; background: none; overflow: visible; }
.rules-table th { padding: 12px 16px; font-weight: 500; color: var(--ink-3); border-bottom-color: var(--hairline); white-space: nowrap; }
.rules-table td { padding: 12px 16px; font-size: var(--t-ui); line-height: 1.5; border-bottom-color: var(--hairline-soft); }
.rules-table td:first-child { color: var(--ink-1); }
.rules-table td:last-child { color: var(--ink-2); }

/* ── Install box (paper): a command to copy, for anything people can install ── */
.install { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 24px 0 0; padding: 16px 16px 16px 20px; border-radius: var(--r-lg); background: var(--surface-paper); box-shadow: 0 0 0 1px var(--hairline-soft); text-align: left; }
.install-copy { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.install-copy strong { color: var(--ink-1); font-weight: 600; }
.install-row { display: flex; flex-wrap: wrap; gap: 8px; }
.install-cmd {
  flex: 1 1 22rem; min-width: 0; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 5px 0 16px;
  border-radius: var(--r-pill); background: var(--surface-screen); box-shadow: inset 0 0 0 1px var(--hairline);
  font: 13px var(--font-mono); color: var(--ink-1);
}
.install-cmd .p { color: var(--ink-4); }
.install-cmd code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; scrollbar-width: none; font: inherit; }
.install-cmd code::-webkit-scrollbar { display: none; }
.install-cmd .btn { height: 30px; padding: 0 12px; font-size: 12.5px; }
.install-row > .btn { height: 40px; }
.cta-fine code, .install-copy code { font-family: var(--font-mono); font-size: 0.92em; color: var(--ink-1); overflow-wrap: anywhere; }
@media (max-width: 560px) { .install { padding: 14px; } .install-row > .btn { flex: 1; } }

/* ── Callouts (paper) ──────────────────────────────────────────────────────── */
.callout { margin: 24px 0; padding: 18px 22px; border-radius: var(--r-lg); background: var(--surface-paper); }
.callout-label { display: block; margin-bottom: 6px; font-family: var(--font-mono); font-size: var(--t-mono); color: var(--ink-3); }
.callout p { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.callout strong { color: var(--ink-1); }
/* A prompt or quote: mono, a rule on the left, no box */
.pq { margin: 16px 0 20px; padding: 6px 0 6px 16px; border-left: 2px solid var(--hairline-strong); font: 13.5px/1.6 var(--font-mono); color: var(--ink-2); }

/* ── CTA banner ────────────────────────────────────────────────────────────── */
.cta {
  position: relative; overflow: hidden; margin: 48px 0 0; padding: 28px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 28px; align-items: start;
  background: var(--surface-paper); border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--hairline-soft);
}
.cta::before { /* a faint wash of the accent from the top right */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in oklch, var(--accent) 9%, transparent), transparent 60%);
}
.cta > * { position: relative; }
/* Objects on the right only when the offer has them: one or two, never padded. */
.cta:has(> .cta-objects) { grid-template-columns: minmax(0, 1fr) 168px; }
.cta-objects:has(> .cta-obj:only-child) { align-self: center; }
.cta-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; font-family: var(--font-mono); font-size: var(--t-mono); color: var(--ink-3); }
.cta-eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.cta .cta-title { font-size: 20px; line-height: 1.25; font-weight: 650; letter-spacing: -0.015em; color: var(--ink-1); text-wrap: balance; }
.cta-text { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.cta-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.cta-list li { position: relative; padding-left: 20px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.cta-list li::before { content: ""; position: absolute; left: 2px; top: 0.45em; width: 9px; height: 5px; border-left: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); rotate: -45deg; }
.cta-list strong { color: var(--ink-1); font-weight: 600; }

.cta-fine { grid-column: 1 / -1; margin-top: -8px; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.cta-fine a { color: var(--ink-2); }
/* The offer as objects: what you actually get */
.cta-objects { display: grid; gap: 8px; padding-top: 4px; }
.cta-obj { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-screen); box-shadow: 0 0 0 1px var(--hairline); rotate: 2deg; }
.cta-obj:nth-child(2) { rotate: -2deg; margin-left: 12px; }
.cta-obj:only-child { rotate: -1.5deg; }
.cta-obj b { font: 500 12.5px var(--font-sans); color: var(--ink-1); }
.cta-obj span { font: var(--t-mono) var(--font-mono); color: var(--ink-3); }
/* Small CTA: one line of offer and the form, for mid-article. */
.cta--small { margin: 32px 0; padding: 18px 20px; gap: 12px; }
.cta--small::before { background: radial-gradient(90% 120% at 100% 0%, color-mix(in oklch, var(--accent) 7%, transparent), transparent 60%); }
.cta--small .cta-text { margin: 0; font-size: 14.5px; }
.cta--small .cta-text strong { color: var(--ink-1); font-weight: 600; }

/* The signup form (blog/_signup.html), inside a CTA or on its own */
.signup { grid-column: 1 / -1; }
.signup__label { display: block; margin-bottom: 8px; font-size: 13px; color: var(--ink-3); }
.signup__label.sr-only, .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Double ring: the field and button sit inside one pill, 4px in (after jakub.kr). */
.signup__row {
  display: flex; gap: 4px; max-width: 30rem; padding: 4px; border-radius: var(--r-pill);
  background: var(--surface-page); box-shadow: 0 0 0 1px var(--hairline); transition: box-shadow 160ms;
}
.signup__row:focus-within { box-shadow: 0 0 0 1px var(--ink-3); }
.signup__input {
  flex: 1; min-width: 0; height: 36px; padding: 0 12px; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--ink-1); font: 15px var(--font-sans);
}
.signup__input::placeholder { color: var(--ink-4); }
.signup__input:focus { outline: none; }
.signup__btn { flex: none; height: 36px; }
.signup__btn:disabled { opacity: 0.5; cursor: default; }
.signup__btn:focus-visible { outline: 1.5px solid var(--ink-3); outline-offset: 2px; }
.signup__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.signup__status { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.signup__status:empty { display: none; }
.signup.is-done .signup__row { display: none; }
.signup.is-done .signup__status { margin-top: 0; }
.signup.is-done .signup__status::before { content: ""; display: inline-block; width: 9px; height: 5px; margin: 0 10px 3px 2px; border-left: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); rotate: -45deg; }
.cta .signup__row { max-width: 34rem; }
.cta--small .signup__row { max-width: none; }

/* Compact strip: a link down to the CTA, near the top of a piece */
.cta-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px;
  margin: 0 0 40px; padding: 12px 12px 12px 20px; border-radius: var(--r-pill);
  background: var(--surface-paper); box-shadow: 0 0 0 1px var(--hairline-soft);
  font-size: 14px; line-height: 1.5; color: var(--ink-2); text-decoration: none;
}
.cta-strip strong { color: var(--ink-1); font-weight: 600; }
.cta-strip .btn { height: 32px; padding: 0 14px; font-size: 13px; }
.cta-strip:hover .btn { opacity: 0.9; }

@media (max-width: 640px) {
  .cta, .cta:has(> .cta-objects) { grid-template-columns: 1fr; padding: 22px 20px; gap: 18px; }
  .cta--small { padding: 18px 16px; }
  .cta-objects { display: none; }
  .signup__row, .cta .signup__row { flex-direction: column; max-width: none; border-radius: 22px; }
  .signup__input { flex: none; width: 100%; height: 40px; }
  .signup__btn { width: 100%; }
  .cta-strip { border-radius: var(--r-lg); padding: 14px 16px; }
}

/* Tooltips and wide figures must never widen a phone's page */
.main { overflow-x: clip; }

/* Light pages need a much softer lift under hero media */
:root[data-theme="light"] .hero-media > img, :root[data-theme="light"] .hero-media > .fig, :root[data-theme="light"] .photo > img { box-shadow: 0 0 0 1px var(--hairline), 0 16px 40px oklch(0 0 0 / 0.08); }

/* Author bio: the last thing on every write-up, under a hairline */
.bio {
  display: flex; gap: 16px; align-items: flex-start;
  margin-top: 24px; padding-top: 32px; border-top: 1px solid var(--hairline);
}
.bio-avatar {
  flex: none; width: 48px; height: 48px; border-radius: 50%;
  background: #fff url("../img/aidan-photo.jpg?v=2") no-repeat center / cover;
  box-shadow: 0 0 0 1px var(--hairline);
}
.bio-body { min-width: 0; }
.bio-name { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ink-1); }
.bio-name a { color: inherit; text-decoration: none; }
.bio-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bio-text + .bio-text { margin-top: 8px; }
.bio-text { margin-top: 4px; max-width: 36rem; font-size: 14px; line-height: 1.55; color: var(--ink-3); text-wrap: pretty; }
.bio-links { display: flex; gap: 16px; margin-top: 10px; font-size: 14px; }
.bio-links a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--hairline-strong); text-underline-offset: 3px; }
.bio-links a:hover { color: var(--ink-1); text-decoration-color: currentColor; }

/* Back chip in the sticky top bar: home, from any write-up */
.back-chip {
  display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 12px 0 8px;
  border-radius: var(--r-pill); box-shadow: 0 0 0 1px var(--hairline);
  font: 500 13px var(--font-sans); color: var(--ink-2); text-decoration: none;
  transition: color 160ms, box-shadow 160ms, scale 160ms;
}
.back-chip:hover { color: var(--ink-1); box-shadow: 0 0 0 1px var(--hairline-strong); }
.back-chip:active { scale: 0.96; }
.back-chip:focus-visible { outline: 1.5px solid var(--ink-3); outline-offset: 2px; }

/* "New" next to Skill in the sidebar: the system's quiet pill, not a coloured tag */
.new-chip {
  color: var(--ink-2); background: none; border: 0; box-shadow: 0 0 0 1px var(--hairline);
  border-radius: var(--r-pill); font-weight: 500; padding: 1px 7px;
}

/* Toggle heading, like Notion's: a caret that turns, the content folded away */
.toggle > summary { display: flex; align-items: center; gap: 10px; list-style: none; cursor: pointer; }
.toggle > summary::-webkit-details-marker { display: none; }
.toggle > summary::before {
  content: ""; flex: none; width: 0; height: 0; margin-left: 2px;
  border-left: 7px solid var(--ink-3); border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  transition: rotate 200ms cubic-bezier(0.2, 0, 0, 1), border-color 160ms;
}
.toggle[open] > summary::before { rotate: 90deg; }
.toggle > summary:hover::before { border-left-color: var(--ink-1); }
.toggle > summary h2 { margin: 0; }
.toggle > summary:focus-visible { outline: 1.5px solid var(--ink-3); outline-offset: 4px; border-radius: 4px; }
.toggle[open] > summary { margin-bottom: var(--s3, 16px); }
@media (prefers-reduced-motion: reduce) { .toggle > summary::before { transition: none; } }

/* Author line under the lede: who wrote it and when. */
.byline { margin: 16px auto 0; font-size: 14px; line-height: 1.5; color: var(--ink-3); text-align: center; font-variant-numeric: tabular-nums; }
.byline a { color: var(--ink-2); text-decoration: none; font-weight: 500; }
.byline a:hover { color: var(--ink-1); text-decoration: underline; text-underline-offset: 3px; }

/* Quiet footer links under the author bio (partials/foot_links.html) */
.foot-links { display: flex; gap: 14px; margin-top: 40px; font-size: 12px; line-height: 1.5; }
.foot-links a { color: var(--ink-3); opacity: 0.6; text-decoration: none; transition: opacity 160ms; }
.foot-links a:hover { opacity: 1; }