/* ==========================================================================
   The Deck: Damilola Oke
   Black and white, typographic, accessible by default.
   Every reading mode is a set of token overrides on <html>.
   ========================================================================== */

/* ---------- Tokens: light (default) ---------- */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --fg: #0a0a0a;
  --muted: #4d4d4d;          /* 8.6:1 on white */
  --line: #d6d6d6;           /* decorative rules only */
  --line-strong: #0a0a0a;
  --surface: #f4f4f4;
  --inverse-bg: #0a0a0a;
  --inverse-fg: #ffffff;
  --focus: #0a0a0a;

  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-text: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;

  --mode-scale: 1;
  --user-scale: 1;
  --display-scale: 1;
  --leading: 1.6;
  --tracking: 0;
  --word: normal;
  --measure: 66ch;
  --space: 1;
  --radius: 20px;
  --border: 1px;

  /* Motion system: one set of durations and curves for the whole site */
  --ease: cubic-bezier(0.25, 1, 0.5, 1);  /* soft ease-out: quick start, long gentle landing */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-reveal: cubic-bezier(0.22, 1, 0.36, 1);  /* long, soft landing for headline and image reveals */
  --d1: 220ms;   /* small feedback: presses, ticks, colour changes */
  --d2: 460ms;   /* hovers, fills, panels */
  --d3: 880ms;   /* reveals and entrances */
  --rise: 16px;
  --fan: 1;
  --stagger: 60ms;
  --tilt: 6deg;      /* card tilt under the pointer */
  --press: 0.97;     /* scale while pressed */

  --gutter: clamp(16px, 4vw, 56px);
  --max: 1320px;
}

/* ---------- Dark theme ---------- */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0b0b;
  --fg: #f2f2f2;
  --muted: #b3b3b3;          /* 9.4:1 on #0b0b0b */
  --line: #333333;
  --line-strong: #f2f2f2;
  --surface: #171717;
  --inverse-bg: #f2f2f2;
  --inverse-fg: #0b0b0b;
  --focus: #f2f2f2;
}
/* No-JS fallback: follow the device */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    color-scheme: dark;
    --bg: #0b0b0b; --fg: #f2f2f2; --muted: #b3b3b3; --line: #333333;
    --line-strong: #f2f2f2; --surface: #171717; --inverse-bg: #f2f2f2;
    --inverse-fg: #0b0b0b; --focus: #f2f2f2;
  }
}

/* ---------- Reading modes ---------- */
/* Calm: softer contrast (still AAA), generous space, slow fades only */
html[data-mode="calm"] {
  --bg: #f3f3f1; --fg: #262626; --muted: #555555; --surface: #e9e9e6;
  --space: 1.35; --leading: 1.75; --measure: 60ch;
  --d1: 300ms; --d2: 640ms; --d3: 1200ms; --rise: 0px; --fan: 0.4; --tilt: 0deg; --press: 1;
}
html[data-mode="calm"][data-theme="dark"] {
  --bg: #1b1b1b; --fg: #d9d9d9; --muted: #a6a6a6; --surface: #242424; --line: #3a3a3a;
}
/* Clear: maximum contrast, larger type, summaries first */
html[data-mode="clear"] {
  --bg: #ffffff; --fg: #000000; --muted: #262626; --line: #000000; --surface: #f0f0f0;
  --mode-scale: 1.15; --border: 2px; --leading: 1.65;
}
html[data-mode="clear"][data-theme="dark"] {
  --bg: #000000; --fg: #ffffff; --muted: #e0e0e0; --line: #ffffff; --surface: #141414;
}
/* Fine-tune: high contrast, without Clear mode's larger type */
html[data-a11y~="contrast"] { --bg: #ffffff; --fg: #000000; --muted: #262626; --line: #000000; --surface: #f0f0f0; --border: 2px; }
html[data-a11y~="contrast"][data-theme="dark"] { --bg: #000000; --fg: #ffffff; --muted: #e0e0e0; --line: #ffffff; --surface: #141414; }
/* Dyslexia-friendly: spacing, left alignment, short lines, no all-caps */
html:is([data-mode="dyslexia"], [data-a11y~="dys"]) {
  --tracking: 0.035em; --word: 0.16em; --leading: 1.85; --measure: 58ch; --space: 1.15;
}
html:is([data-mode="dyslexia"], [data-a11y~="dys"]) * { text-transform: none !important; text-align: left !important; font-style: normal !important; }
/* Bold: the full expressive version */
html[data-mode="bold"] { --display-scale: 1.22; --rise: 40px; --fan: 1.6; --d3: 1000ms; --tilt: 10deg; }

/* Text size control */
html[data-size="2"] { --user-scale: 1.15; }
html[data-size="3"] { --user-scale: 1.3; }

/* Font choice */
html[data-font="system"] { --font-text: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
html[data-font="serif"] { --font-text: Georgia, "Iowan Old Style", "Times New Roman", serif; }

/* Motion off: Still mode, or the device asks for less motion */
html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  transition-delay: 0ms !important;
  scroll-behavior: auto !important;
}

/* Cross-document page transitions, progressive */
@view-transition { navigation: auto; }
/* The new page wipes up over the old one like a curtain; the old page eases up and dims beneath it */
::view-transition-old(root) { animation: vt-old calc(var(--d3) * 1.15) var(--ease-in-out) both; }
::view-transition-new(root) { animation: vt-curtain calc(var(--d3) * 1.15) var(--ease-in-out) both; }
@keyframes vt-old { to { transform: translateY(-6%); opacity: 0.35; } }
@keyframes vt-curtain { from { clip-path: inset(100% 0 0 0 round 28px 28px 0 0); } to { clip-path: inset(0 0 0 0 round 0); } }
/* Calm keeps the plain crossfade */
html[data-mode="calm"]::view-transition-old(root) { animation: vt-out var(--d2) var(--ease) both; }
html[data-mode="calm"]::view-transition-new(root) { animation: vt-in var(--d3) var(--ease) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(calc(var(--rise) * 0.5)); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-size: calc(100% * var(--mode-scale) * var(--user-scale));
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: var(--leading);
  letter-spacing: var(--tracking);
  word-spacing: var(--word);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--d3) var(--ease), color var(--d3) var(--ease);
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { font-weight: 400; margin: 0; line-height: 1.08; letter-spacing: -0.01em; }
html:is([data-mode="dyslexia"], [data-a11y~="dys"]) h1, html:is([data-mode="dyslexia"], [data-a11y~="dys"]) h2, html:is([data-mode="dyslexia"], [data-a11y~="dys"]) h3 { letter-spacing: 0.01em; line-height: 1.25; }
p { margin: 0 0 calc(1em * var(--space)); max-width: var(--measure); }
p, li, dd, h1, h2, h3, a { overflow-wrap: break-word; }
h1, h2 { text-wrap: balance; }
/* Card and list titles fill their width; "pretty" only stops a lone last word */
h3 { text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
@media (hover: hover) and (pointer: fine) { a:hover { text-decoration-thickness: 2px; } }
html[data-links="underline"] a, html:is([data-mode="clear"], [data-a11y~="contrast"]) a { text-decoration: underline !important; text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; word-spacing: inherit; }
::selection { background: var(--fg); color: var(--bg); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Paired ring so focus shows on any background */
:focus-visible { box-shadow: 0 0 0 6px var(--bg); }

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

.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 100;
  background: var(--inverse-bg); color: var(--inverse-fg);
  padding: 12px 18px; border-radius: 999px; text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--d2) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 860px; }

/* ---------- Type scale ---------- */
.display {
  font-family: var(--font-display);
  font-size: calc(clamp(3rem, 1.2rem + 9vw, 10.5rem) * var(--display-scale));
  line-height: 0.92;
  letter-spacing: -0.02em;
}
.h1 { font-family: var(--font-display); font-size: calc(clamp(2.5rem, 1.4rem + 4.6vw, 5.5rem) * var(--display-scale)); line-height: 1; }
.h2 { font-family: var(--font-display); font-size: calc(clamp(2rem, 1.4rem + 2.6vw, 3.5rem) * var(--display-scale)); }
.h3 { font-family: var(--font-text); font-size: 1.375rem; line-height: 1.3; font-weight: 700; letter-spacing: 0; }
.lede { font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem); line-height: 1.4; max-width: 34ch; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); margin-bottom: 20px;
}
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.muted { color: var(--muted); }
.serif { font-family: var(--font-display); }
.italic { font-style: italic; }

/* Placeholders from the brief, kept visible for the handover */
.todo {
  background: none; color: inherit;
  border-bottom: 1px dashed currentColor;
  font-style: italic; opacity: 0.85;
}

/* ---------- Section rhythm ---------- */
.section { padding-block: calc(clamp(64px, 9vw, 140px) * var(--space)); }
.section + .section { border-top: var(--border) solid var(--line); }
.section-head { display: grid; gap: 24px; margin-bottom: calc(48px * var(--space)); }
/* About: CV, Certifications and Recognition read as one run, so the gaps between them are half a section */
#cv.section { padding-bottom: calc(clamp(32px, 4.5vw, 70px) * var(--space)); }
#certifications.section { padding-block: calc(clamp(32px, 4.5vw, 70px) * var(--space)); }
#recognition.section { padding-top: calc(clamp(32px, 4.5vw, 70px) * var(--space)); }
@media (min-width: 900px) {
  .section-head { grid-template-columns: 1fr 1fr; align-items: end; }
  .section-head p { justify-self: end; }
}
.split { display: grid; gap: 32px; }
/* Grid children may shrink below their content width, so long text wraps instead of widening the page */
.split > *, .section-head > *, .lead > *, .hero__meta > * { min-width: 0; }
@media (min-width: 900px) { .split { grid-template-columns: 4fr 8fr; gap: 64px; } }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.2) blur(12px);
  -webkit-backdrop-filter: saturate(1.2) blur(12px);
  border-bottom: var(--border) solid transparent;
  transition: border-color var(--d2) var(--ease), background-color var(--d3) var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
/* Clear at the top of the page; the background fades in once the page scrolls.
   Needs JS, which sets .is-scrolled, so without it the header keeps its background. */
html.js .site-header:not(.is-scrolled) {
  background-color: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* Home: the header sits over the dark portrait, so it uses light ink until it fills in */
html.js[data-page="home"][data-stage="deck"] .site-header:not(.is-scrolled) {
  --fg: #f4f4f4; --line: rgba(244, 244, 244, 0.4); --surface: rgba(244, 244, 244, 0.14);
  --inverse-bg: #f4f4f4; --inverse-fg: #0b0b0b;
  color: var(--fg);
}
/* In the light theme the portrait is on white, so the header keeps dark ink */
html.js[data-theme="light"][data-page="home"][data-stage="deck"] .site-header:not(.is-scrolled) {
  --fg: #0b0b0b; --line: rgba(11, 11, 11, 0.35); --surface: rgba(11, 11, 11, 0.08);
  --inverse-bg: #0b0b0b; --inverse-fg: #f4f4f4;
}
.site-header .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 24px; min-height: 72px; padding-block: 10px;
}
.brand {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; font-weight: 700; letter-spacing: 0.01em; min-height: 44px;
}
.brand__logo { width: auto; height: 22px; flex: none; fill: currentColor; overflow: visible; }
.brand__o { transition: transform var(--d2) var(--ease); }
/* On hover or keyboard focus the O rolls in to meet the D */
.brand:focus-visible .brand__o { transform: translateX(-35px); }
@media (hover: hover) and (pointer: fine) { .brand:hover .brand__o { transform: translateX(-35px); } }
.gate__name .brand__logo { height: 26px; }
.nav { display: flex; align-items: center; gap: 4px 6px; flex-wrap: wrap; }
.nav ul { display: flex; flex-wrap: wrap; gap: 2px; list-style: none; }
.nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  text-decoration: none; border-radius: 999px; font-size: 0.9375rem;
  transition: background-color var(--d1) var(--ease), color var(--d1) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .nav a:hover { background: var(--surface); } }
.nav a[aria-current="page"] { background: var(--inverse-bg); color: var(--inverse-fg); }
.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  border-radius: 999px; border: var(--border) solid var(--line); background: transparent; cursor: pointer;
  transition: background-color var(--d1) var(--ease), transform var(--d1) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .icon-btn:hover { background: var(--surface); } }
.icon-btn:active { transform: scale(0.94); }
.icon-btn svg { width: 20px; height: 20px; }
.theme-toggle .i-sun { display: none; }
html[data-theme="dark"] .theme-toggle .i-sun { display: block; }
html[data-theme="dark"] .theme-toggle .i-moon { display: none; }
@media (max-width: 760px) {
  .site-header { position: relative; }
  .site-header .wrap { position: relative; }
  .nav { width: 100%; }
  .nav ul { margin-inline: -10px; }
  .nav a { padding: 0 10px; font-size: 0.9375rem; }
}
@media (max-width: 430px) {
  .nav ul { margin-inline: -8px; }
  .nav a { padding: 0 8px; font-size: 0.875rem; }
  /* Theme toggle sits on the brand row instead of taking a row of its own */
  .theme-toggle { position: absolute; top: 10px; right: var(--gutter); }
}

/* Phones: the menu folds into a round button beside the theme toggle and opens as a panel under the header.
   Needs JS (which unhides the button); without it the links stay on show. */
.menu-toggle svg path { transition: transform var(--d2) var(--ease); transform-origin: 12px 12px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__top { transform: translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bottom { transform: translateY(-4px) rotate(-45deg); }
@media (max-width: 760px) {
  html.js .site-header .wrap { flex-wrap: nowrap; }
  html.js .nav { width: auto; flex-wrap: nowrap; gap: 8px; }
  html.js .menu-toggle { display: inline-grid; order: 2; }
  html.js .theme-toggle { position: static; order: 1; }
  html.js .nav ul {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 2; margin: 0;
    display: grid; gap: 4px; padding: 12px var(--gutter) 20px;
    background: var(--bg); color: var(--fg); border-bottom: var(--border) solid var(--line);
    box-shadow: 0 18px 30px -18px rgba(0, 0, 0, 0.25);
    opacity: 0; translate: 0 -8px; visibility: hidden;
    transition: opacity var(--d2) var(--ease), translate var(--d2) var(--ease), visibility 0s linear var(--d2);
  }
  html.js .nav.is-open ul { opacity: 1; translate: 0 0; visibility: visible; transition-delay: 0s; }
  html.js .nav ul a { min-height: 48px; padding: 0 16px; font-size: 1.0625rem; width: 100%; }
}
.menu-toggle[hidden] { display: none; }
@media (min-width: 761px) { .menu-toggle { display: none !important; } }

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: 999px;
  border: var(--border) solid var(--fg); background: var(--inverse-bg); color: var(--inverse-fg);
  font-weight: 700; text-decoration: none !important; cursor: pointer;
  transition: transform var(--d1) var(--ease), background-color var(--d2) var(--ease), color var(--d2) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .btn:hover { transform: translateY(-2px); } }
.btn:active { transform: translateY(0) scale(0.98); }
.btn--ghost { background: transparent; color: var(--fg); }
@media (hover: hover) and (pointer: fine) { .btn--ghost:hover { background: var(--surface); } }
.btn .arrow { transition: transform var(--d2) var(--ease); }
@media (hover: hover) and (pointer: fine) { .btn:hover .arrow { transform: translateX(4px); } }
.text-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700;
  text-decoration: underline; text-underline-offset: 0.3em;
}
.chip {
  display: inline-flex; align-items: center; min-height: 32px; padding: 2px 12px;
  border: var(--border) solid var(--line); border-radius: 999px; font-size: 0.875rem; color: var(--muted);
}

/* ---------- Reveal on scroll ---------- */
html.js[data-motion="on"] [data-reveal] {
  opacity: 0; transform: translateY(var(--rise));
  transition: opacity var(--d3) var(--ease), transform var(--d3) var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
html.js[data-motion="on"] [data-reveal].is-in { opacity: 1; transform: none; }

/* ==========================================================================
   Gate
   ========================================================================== */
.gate {
  min-height: 100svh; display: grid; align-content: center;
  padding-block: 48px 120px;
}
html.js[data-stage="deck"] .gate { display: none; }
html.js[data-stage="gate"] .home { display: none; }
html.js[data-stage="gate"] .site-header,
html.js[data-stage="gate"] .site-footer,
html.js[data-stage="gate"] .reading-card { display: none; }
html:not(.js) .gate { display: none; }
.gate__name { font-weight: 700; margin-bottom: 40px; display: flex; gap: 12px; align-items: center; }
.gate__title { margin-bottom: 16px; }
.gate__intro { color: var(--muted); font-size: 1.125rem; margin-bottom: 40px; }
.gate__options { display: grid; gap: 14px; list-style: none; }
@media (min-width: 640px) { .gate__options { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .gate__options { grid-template-columns: repeat(3, 1fr); } }
.option {
  width: 100%; height: 100%; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: 72px 1fr; gap: 18px; align-items: center;
  padding: 18px; border-radius: var(--radius);
  border: var(--border) solid var(--line); background: var(--bg);
  transition: transform var(--d2) var(--ease), border-color var(--d2) var(--ease), background-color var(--d2) var(--ease);
  animation: rise-in var(--d3) var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms + 120ms);
}
@media (hover: hover) and (pointer: fine) { .option:hover { transform: translateY(-4px); border-color: var(--fg); } }
.option[aria-pressed="true"] { border-color: var(--fg); background: var(--surface); }
.option__sample {
  width: 72px; height: 88px; border-radius: 12px; border: var(--border) solid var(--fg);
  display: grid; place-items: center; font-family: var(--font-display); font-size: 2.25rem;
}
.option__title { display: block; font-weight: 700; font-size: 1.125rem; }
.option__desc { display: block; color: var(--muted); font-size: 0.9375rem; line-height: 1.45; }
.option--calm .option__sample { border-color: var(--line); color: var(--muted); }
.option--clear .option__sample { border-width: 3px; font-family: var(--font-text); font-weight: 700; }
.option--dyslexia .option__sample { font-family: var(--font-text); letter-spacing: 0.2em; font-size: 1.75rem; }
.option--bold .option__sample { background: var(--inverse-bg); color: var(--inverse-fg); font-style: italic; font-size: 2.75rem; }
.option--plain { grid-template-columns: 1fr auto; border-style: dashed; }
.option--plain .arrow { font-size: 1.5rem; }
.gate__note { margin-top: 28px; color: var(--muted); font-size: 0.9375rem; }
.gate__status { margin-top: 20px; min-height: 1.6em; font-weight: 700; }
.gate.is-leaving { animation: gate-out var(--d3) var(--ease-in-out) both; }
@keyframes gate-out { to { opacity: 0; transform: translateY(calc(var(--rise) * -2)) scale(0.98); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(var(--rise)); } }

/* ==========================================================================
   Home: hero and the deck
   ========================================================================== */
.hero { padding-top: clamp(40px, 8vw, 120px); }
.hero__name { margin-bottom: 28px; }
.hero__name span { display: block; }
.hero__name span:last-child { padding-left: clamp(0px, 10vw, 180px); font-style: italic; }
.hero__meta { display: grid; gap: 24px; align-items: end; }
@media (min-width: 900px) { .hero__meta { grid-template-columns: 1fr auto; } }
.hero__meta > .btn { justify-self: start; }
.hero__line { font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem); line-height: 1.3; max-width: 26ch; margin: 0; }
html.js[data-motion="on"] .hero__name span { animation: rise-in var(--d3) var(--ease) both; }
html.js[data-motion="on"] .hero__name span:last-child { animation-delay: 90ms; }

.deck-intro { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: baseline; margin-bottom: 32px; }
.deck {
  list-style: none; display: grid; gap: 16px;
  padding-block: 24px 40px;
}
.card-link {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  height: 100%; min-height: 0; padding: 20px 22px; border-radius: var(--radius);
  border: var(--border) solid var(--fg); background: var(--bg); color: var(--fg); text-decoration: none !important;
  box-shadow: 0 1px 0 var(--line), 0 18px 40px -28px rgba(0,0,0,0.35);
  transition: transform var(--d2) var(--ease), background-color var(--d2) var(--ease), color var(--d2) var(--ease), box-shadow var(--d2) var(--ease);
}
.card-link__top { display: flex; justify-content: space-between; align-items: flex-start; }
.card-link__num { font-family: var(--font-display); font-size: 1.75rem; line-height: 1; }
.card-link__suit { width: 22px; height: 22px; }
.card-link__title { display: block; font-family: var(--font-display); font-size: clamp(2rem, 1.5rem + 1.4vw, 2.75rem); line-height: 1; }
.card-link__desc { display: block; color: var(--muted); font-size: 0.9375rem; line-height: 1.45; margin: 10px 0 0; }
.card-link__inside { display: block; font-size: 0.8125rem; color: var(--muted); border-top: var(--border) solid var(--line); padding-top: 12px; }
.card-link__inside b { color: var(--fg); }
.card-link__corner { position: absolute; right: 18px; bottom: 16px; font-family: var(--font-display); font-size: 1.25rem; transform: rotate(180deg); }
.card-link:focus-visible { background: var(--inverse-bg); color: var(--inverse-fg); }
@media (hover: hover) and (pointer: fine) { .card-link:hover { background: var(--inverse-bg); color: var(--inverse-fg); } }
.card-link:focus-visible .card-link__desc, .card-link:focus-visible .card-link__inside, .card-link:focus-visible .card-link__inside b { color: inherit; }
@media (hover: hover) and (pointer: fine) { .card-link:hover .card-link__desc, .card-link:hover .card-link__inside, .card-link:hover .card-link__inside b { color: inherit; } }
html[data-mode="bold"] .deck > li:nth-child(3) .card-link { background: var(--inverse-bg); color: var(--inverse-fg); }
html[data-mode="bold"] .deck > li:nth-child(3) .card-link__desc,
html[data-mode="bold"] .deck > li:nth-child(3) .card-link__inside { color: inherit; }

@media (min-width: 640px) and (max-width: 1199px) {
  .deck { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deck > li:last-child { grid-column: 1 / -1; }
  .card-link { min-height: 280px; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  /* Three cards over two: no card sits alone in a row */
  .deck { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .deck > li { grid-column: span 2; }
  .deck > li:nth-child(n+4) { grid-column: span 3; }
  .deck > li:last-child { grid-column: span 3; }
}
@media (min-width: 1200px) {
  .deck { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding-block: 48px 72px; padding-inline: 8px; }
  .deck > li {
    --o: calc(var(--i) - 2);
    --abs: max(var(--o), calc(var(--o) * -1));
    transform: rotate(calc(var(--o) * 3deg * var(--fan))) translateY(calc(var(--abs) * 14px * var(--fan)));
    transform-origin: 50% 120%;
    transition: transform var(--d3) var(--ease);
    transition-delay: calc(var(--abs) * 50ms);
  }
  .card-link { min-height: 380px; }
  .deck[data-state="stacked"] > li {
    transform: translateX(calc(var(--o) * -100% - var(--o) * 12px)) rotate(calc(var(--o) * 1.2deg));
    transition-duration: 0s;
  }
  .deck > li:focus-within { transform: translateY(-18px) rotate(0deg); z-index: 2; transition-delay: 0ms; transition-duration: var(--d2); }
  @media (hover: hover) and (pointer: fine) { .deck > li:hover { transform: translateY(-18px) rotate(0deg); z-index: 2; transition-delay: 0ms; transition-duration: var(--d2); } }
}

/* Recognition strip */
.strip { display: grid; gap: 0; list-style: none; border-top: var(--border) solid var(--fg); }
.strip li { display: grid; grid-template-columns: 1fr; gap: 4px 24px; padding: 18px 0; border-bottom: var(--border) solid var(--line); }
@media (min-width: 760px) { .strip li { grid-template-columns: 120px 1fr auto; align-items: baseline; } }
.strip .year { font-family: var(--font-display); font-size: 1.5rem; }
.strip a { font-weight: 700; }
/* Certifications: the name, with who awarded it underneath */
.cert__name { display: block; font-weight: 700; }
.cert__issuer { display: block; margin-top: 2px; font-size: 0.9375rem; color: var(--muted); }
/* "In progress" and "Sept 2021" need a little more room than a year range */
@media (min-width: 760px) { .strip--certs li { grid-template-columns: 140px 1fr; } }

/* Big statement band (Instrument "Shape a better future") */
.statement { font-family: var(--font-display); font-size: calc(clamp(2.5rem, 1rem + 6vw, 7rem) * var(--display-scale)); line-height: 0.98; letter-spacing: -0.02em; }
.statement .ghost { color: var(--muted); font-style: italic; }

/* ==========================================================================
   Index lists (Collins programmes, writing index)
   ========================================================================== */
.index { list-style: none; border-top: var(--border) solid var(--fg); counter-reset: idx; }
.index > li { border-bottom: var(--border) solid var(--line); }
.index__row {
  display: grid; gap: 6px 32px; padding: 22px 0; grid-template-columns: 1fr;
}
@media (min-width: 800px) { .index__row { grid-template-columns: 64px 5fr 7fr; align-items: baseline; } }
.index__num { font-family: var(--font-display); font-size: 1.375rem; color: var(--muted); }
.index__title { font-size: 1.375rem; font-weight: 700; line-height: 1.3; }
.index__body { color: var(--muted); margin: 0; }

/* ==========================================================================
   Flip labels (labels first, stories second)
   ========================================================================== */
.labels { list-style: none; display: grid; gap: 14px; }
@media (min-width: 700px) { .labels { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .labels { grid-template-columns: repeat(3, 1fr); } }
.flip { perspective: 1400px; height: 100%; }
.flip__inner {
  display: grid; height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--d3) var(--ease-in-out);
}
.flip__face {
  grid-area: 1 / 1; display: flex; flex-direction: column; gap: 10px;
  padding: 22px; border-radius: var(--radius); border: var(--border) solid var(--fg);
  background: var(--bg); min-height: 220px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.flip__back { transform: rotateY(180deg); background: var(--inverse-bg); color: var(--inverse-fg); }
.flip__back .muted { color: inherit; opacity: 0.85; }
.flip.is-flipped .flip__inner { transform: rotateY(180deg); }
html[data-mode="calm"] .flip__inner, html[data-motion="off"] .flip__inner { transform: none !important; }
html[data-mode="calm"] .flip__back, html[data-motion="off"] .flip__back { transform: none; opacity: 0; transition: opacity var(--d3) var(--ease); }
html[data-mode="calm"] .flip__front, html[data-motion="off"] .flip__front { transition: opacity var(--d3) var(--ease); }
html[data-mode="calm"] .flip.is-flipped .flip__back, html[data-motion="off"] .flip.is-flipped .flip__back { opacity: 1; }
html[data-mode="calm"] .flip.is-flipped .flip__front, html[data-motion="off"] .flip.is-flipped .flip__front { opacity: 0; }
.flip__face[inert] { pointer-events: none; }
.flip__meta { font-size: 0.875rem; color: var(--muted); }
.flip__title { font-weight: 700; font-size: 1.1875rem; line-height: 1.3; }
.flip__btn {
  margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  border: var(--border) solid currentColor; background: transparent; font-weight: 700; font-size: 0.9375rem;
  transition: background-color var(--d1) var(--ease), color var(--d1) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .flip__front .flip__btn:hover { background: var(--fg); color: var(--bg); } }
@media (hover: hover) and (pointer: fine) { .flip__back .flip__btn:hover { background: var(--inverse-fg); color: var(--inverse-bg); } }
.flip__icon { transition: transform var(--d2) var(--ease); }
@media (hover: hover) and (pointer: fine) { .flip__btn:hover .flip__icon { transform: rotate(180deg); } }

/* ==========================================================================
   Portfolio
   ========================================================================== */
.toolbar { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; margin-bottom: 32px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.pill {
  min-height: 44px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  border: var(--border) solid var(--line); background: transparent; font-weight: 700; font-size: 0.9375rem;
  transition: background-color var(--d1) var(--ease), color var(--d1) var(--ease), border-color var(--d1) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .pill:hover { border-color: var(--fg); } }
.pill[aria-pressed="true"] { background: var(--inverse-bg); color: var(--inverse-fg); border-color: var(--fg); }
.switch {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer;
  background: none; border: 0; padding: 0; font-weight: 700;
}
.switch__track {
  width: 46px; height: 28px; border-radius: 999px; border: 2px solid var(--fg); position: relative;
  transition: background-color var(--d2) var(--ease);
}
.switch__track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--fg); transition: transform var(--d2) var(--ease), background-color var(--d2) var(--ease);
}
.switch[aria-pressed="true"] .switch__track, .switch[aria-checked="true"] .switch__track { background: var(--fg); }
.switch[aria-pressed="true"] .switch__track::after, .switch[aria-checked="true"] .switch__track::after { transform: translateX(18px); background: var(--bg); }

.leads { list-style: none; display: grid; gap: calc(64px * var(--space)); }
.lead { display: grid; gap: 28px; }
@media (min-width: 960px) {
  .lead { grid-template-columns: 7fr 5fr; gap: 56px; align-items: center; }
  .leads > li:nth-child(even) .lead__media { order: 2; }
}
.frame {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden;
  border: var(--border) solid var(--fg); background: var(--surface);
  display: grid; place-items: end start; padding: 18px;
}
.frame--tall { aspect-ratio: 4 / 5; }
/* Uploaded images fill their frame; the caption sits on top */
.frame--image { padding: 0; display: block; }
.frame--image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.frame--image .frame__label { position: absolute; left: 18px; bottom: 18px; margin-right: 18px; }
.frame--wide { aspect-ratio: 16 / 9; }
.frame__pattern { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--line); }
.frame__label { position: relative; max-width: 100%; font-size: 0.8125rem; background: var(--bg); padding: 6px 12px; border-radius: 999px; border: var(--border) solid var(--line); color: var(--muted); }
.frame__big {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); font-size: clamp(2.25rem, 1.2rem + 5vw, 7rem); line-height: 0.9; text-align: center; padding: 24px 24px 64px;
  overflow-wrap: anywhere;
  transition: transform var(--d3) var(--ease);
}
@media (hover: hover) and (pointer: fine) { a:hover .frame__big, .lead:hover .frame__big { transform: scale(1.03); } }
.label-strip { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin-bottom: 18px; }
.lead__title { margin-bottom: 14px; }
.lead[hidden], .work-item[hidden] { display: none; }

.evidence { margin-top: 40px; padding: 28px; border-radius: var(--radius); background: var(--inverse-bg); color: var(--inverse-fg); }
.evidence .muted { color: inherit; opacity: 0.85; }
.evidence ol { list-style: none; display: grid; gap: 0; margin-top: 18px; }
.evidence li { display: grid; gap: 4px 24px; padding: 14px 0; border-top: 1px solid color-mix(in srgb, var(--inverse-fg) 30%, transparent); }
@media (min-width: 760px) { .evidence li { grid-template-columns: 140px 1fr; } }
.evidence[hidden] { display: none; }
html.js[data-motion="on"] .evidence:not([hidden]) { animation: rise-in var(--d3) var(--ease) both; }

.work-grid { list-style: none; display: grid; gap: 14px; }
@media (min-width: 700px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .work-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Testimonials (Portfolio) ---------- */
.testimonials { list-style: none; display: grid; gap: 14px; }
@media (min-width: 900px) { .testimonials { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.testimonials > li { display: grid; }
.testimonial { margin: 0; display: grid; grid-template-rows: auto 1fr auto; gap: 18px; padding: clamp(22px, 2.6vw, 34px); background: var(--box); border-radius: var(--box-r); }
.testimonial__title { margin: 0; font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem); line-height: 1.1; }
.testimonial__title::before { content: "\201C"; } .testimonial__title::after { content: "\201D"; }
.testimonial__quote { margin: 0; }
.testimonial__quote p { margin: 0; max-width: none; font-size: 1rem; line-height: var(--leading, 1.6); text-wrap: pretty; }
.testimonial__by { display: grid; gap: 2px; padding-top: 16px; border-top: var(--border) solid var(--line); }
.testimonial__by b { font-weight: 700; }
.testimonial__by span { font-size: 0.875rem; color: var(--muted); }

/* ---------- Clients (Portfolio) ---------- */
.clients { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .clients { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .clients { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.client { display: grid; }
.client, .client__link { min-height: 132px; }
.client > *, .client__link { min-width: 0; }
.client { place-items: center; align-content: center; gap: 12px; padding: 18px 14px; background: var(--box); border-radius: var(--box-r); text-align: center; }
.client__link { display: grid; place-items: center; align-content: center; gap: 12px; width: 100%; color: inherit; text-decoration: none; }
.client__mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 999px; background: var(--fg); color: var(--bg); font-family: var(--font-display); font-size: 1.375rem; letter-spacing: 0.02em; }
.client__logo { display: block; max-width: 70%; max-height: 56px; width: auto; height: auto; object-fit: contain; filter: grayscale(1); }
html[data-theme="dark"] .client__logo { filter: grayscale(1) invert(1); }
.client__name { font-size: 0.875rem; font-weight: 700; line-height: 1.3; overflow-wrap: break-word; }
.work-item { border: var(--border) solid var(--line); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 10px; height: 100%; }
.work-item h3 { font-size: 1.1875rem; font-weight: 700; line-height: 1.3; }
.work-item h3 a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .work-item h3 a:hover { text-decoration: underline; } }
.work-item__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; border: var(--border) solid var(--line); }
.work-item p { margin: 0; color: var(--muted); font-size: 0.9375rem; }
.work-item .chip { align-self: flex-start; margin-top: auto; }

/* Plain-language summaries */
.plain { border: var(--border) solid var(--fg); border-radius: var(--radius); margin-bottom: 32px; max-width: 760px; }
.plain summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  min-height: 52px; padding: 10px 20px; font-weight: 700;
}
.plain summary::-webkit-details-marker { display: none; }
.plain summary::after { content: "+"; font-size: 1.5rem; line-height: 1; transition: transform var(--d2) var(--ease); }
.plain[open] summary::after { transform: rotate(45deg); }
.plain__body { padding: 0 20px 18px; }
.plain__body p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Case study
   ========================================================================== */
.cs-hero { padding-block: clamp(40px, 7vw, 96px) 40px; }
.back-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-bottom: 24px; text-decoration: none; font-weight: 700; }
.back-link .arrow { transition: transform var(--d2) var(--ease); }
@media (hover: hover) and (pointer: fine) { .back-link:hover .arrow { transform: translateX(-4px); } }
.facts { display: grid; gap: 0; border-top: var(--border) solid var(--fg); margin-top: 40px; }
@media (min-width: 760px) { .facts { grid-template-columns: repeat(5, 1fr); } }
.facts div { padding: 16px 16px 16px 0; border-bottom: var(--border) solid var(--line); }
.facts dt { font-size: 0.8125rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.facts dd { margin: 4px 0 0; }
.one-liner { font-family: var(--font-display); font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem); line-height: 1.15; max-width: none; text-wrap: pretty; }
.steps { list-style: none; display: grid; gap: 14px; counter-reset: step; }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(5, 1fr); }
  /* Keep rows full when a project has 4 or 6 steps */
  .steps:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); }
  .steps:has(> li:nth-child(6):last-child) { grid-template-columns: repeat(3, 1fr); }
}
.steps li { border-top: 2px solid var(--fg); padding-top: 16px; counter-increment: step; }
.steps li::before { content: "0" counter(step); display: block; font-family: var(--font-display); font-size: 2rem; margin-bottom: 8px; }
.steps h3 { font-weight: 700; font-size: 1.0625rem; line-height: 1.35; margin-bottom: 6px; }
.steps p { color: var(--muted); font-size: 0.9375rem; margin: 0; }
.gallery { display: grid; gap: 14px; }
/* Desktop: the tall image on the left; the next two share its height on the right, with no gaps */
@media (min-width: 800px) {
  .gallery { grid-template-columns: 3fr 2fr; }
  .gallery > :first-child { grid-row: span 2; }
  .gallery > :nth-child(2), .gallery > :nth-child(3) { aspect-ratio: auto; min-height: 0; }
  .gallery > :nth-child(2) img, .gallery > :nth-child(3) img { position: absolute; inset: 0; }
  .gallery > :nth-child(n+4) { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
}
.pull {
  font-family: var(--font-display); font-size: clamp(2rem, 1.2rem + 3vw, 4rem); line-height: 1.08;
  margin: 0; max-width: 22ch;
}
.pull::before { content: "\201C"; }
.pull::after { content: "\201D"; }
.pull-cite { display: block; margin-top: 18px; font-size: 1rem; color: var(--muted); font-style: normal; }

/* ==========================================================================
   Work with me: doors and form
   ========================================================================== */
.doors { list-style: none; display: grid; gap: 14px; }
@media (min-width: 900px) { .doors { grid-template-columns: repeat(2, 1fr); } }
.door { border: var(--border) solid var(--fg); border-radius: var(--radius); overflow: hidden; height: 100%; }
.door__btn {
  width: 100%; text-align: left; cursor: pointer; background: transparent; border: 0;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 22px;
  min-height: 96px;
  transition: background-color var(--d2) var(--ease), color var(--d2) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .door__btn:hover { background: var(--surface); } }
.door__btn[aria-expanded="true"] { background: var(--inverse-bg); color: var(--inverse-fg); }
.door__num { font-family: var(--font-display); font-size: 2rem; line-height: 1; }
.door__name { font-family: var(--font-display); font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem); line-height: 1; display: block; }
.door__for { display: block; font-size: 0.9375rem; opacity: 0.8; margin-top: 6px; }
.door__icon { font-size: 1.75rem; line-height: 1; transition: transform var(--d2) var(--ease); }
.door__btn[aria-expanded="true"] .door__icon { transform: rotate(45deg); }
@media (max-width: 480px) {
  .door__btn { gap: 12px; padding: 18px 16px; }
  .door__num { font-size: 1.5rem; }
  .door__panel-inner { padding: 4px 16px 20px; }
}
.door__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--d3) var(--ease); }
.door__panel > div { overflow: hidden; }
.door__panel-inner { padding: 4px 22px 24px; }
.door.is-open .door__panel { grid-template-rows: 1fr; }
.door__panel[hidden] { display: grid; }
html:not(.js) .door__panel { grid-template-rows: 1fr; }

.form { display: grid; gap: 28px; max-width: 720px; }
.field { display: grid; gap: 8px; }
.field label, .field legend { font-weight: 700; font-size: 1.0625rem; }
.hint { color: var(--muted); font-size: 0.9375rem; margin: 0; }
.input, .textarea, .select {
  width: 100%; min-height: 52px; padding: 12px 16px; border-radius: 12px;
  border: 2px solid var(--fg); background: var(--bg);
  transition: box-shadow var(--d1) var(--ease);
}
.textarea { min-height: 160px; resize: vertical; line-height: 1.5; }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.choices { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice span {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border-radius: 999px;
  border: 2px solid var(--line); font-weight: 700;
  transition: background-color var(--d1) var(--ease), color var(--d1) var(--ease), border-color var(--d1) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .choice input:hover + span { border-color: var(--fg); } }
.choice input:checked + span { background: var(--inverse-bg); color: var(--inverse-fg); border-color: var(--fg); }
.choice input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }
.error-text { display: flex; gap: 8px; align-items: flex-start; font-weight: 700; margin: 0; }
.error-text::before { content: "!"; flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--fg); color: var(--bg); font-size: 0.8125rem; margin-top: 2px; }
.error-text[hidden] { display: none; }
[aria-invalid="true"] { border-width: 3px; border-style: dashed; }
.error-summary { border: 3px solid var(--fg); border-radius: var(--radius); padding: 20px 22px; }
.error-summary h2 { font-family: var(--font-text); font-size: 1.25rem; font-weight: 700; margin-bottom: 8px; }
.error-summary ul { padding-left: 1.2em; }
.error-summary[hidden] { display: none; }
.success { border: 2px solid var(--fg); border-radius: var(--radius); padding: 28px; }
.success[hidden] { display: none; }
html.js[data-motion="on"] .success:not([hidden]) { animation: rise-in var(--d3) var(--ease) both; }

.kit { list-style: none; display: grid; gap: 0; border-top: var(--border) solid var(--fg); }
.kit li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 16px 0; border-bottom: var(--border) solid var(--line); }
.kit li > * { min-width: 0; }
/* A name with a one-line description always stacks, so every row reads the same however long the line is */
.kit li > b + .muted { flex-basis: 100%; }

/* ==========================================================================
   Blog and research
   ========================================================================== */
.themes { list-style: none; display: grid; gap: 14px; counter-reset: th; }
@media (min-width: 560px) { .themes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 800px) { .themes { grid-template-columns: repeat(4, 1fr); } }
.themes li { border-top: 2px solid var(--fg); padding-top: 14px; counter-increment: th; }
.themes li::before { content: counter(th, upper-roman) "."; font-family: var(--font-display); font-size: 1.5rem; display: block; margin-bottom: 6px; }
.themes h3 { font-weight: 700; font-size: 1.0625rem; line-height: 1.35; margin-bottom: 4px; }
.themes p { color: var(--muted); font-size: 0.9375rem; margin: 0; }
.posts { list-style: none; border-top: var(--border) solid var(--fg); }
.post { display: grid; gap: 6px 32px; padding: 26px 0; border-bottom: var(--border) solid var(--line); }
@media (min-width: 860px) { .post { grid-template-columns: 64px 1fr 220px; align-items: baseline; } }
.post__num { font-family: var(--font-display); font-size: 1.5rem; color: var(--muted); }
.post__title { font-family: var(--font-display); font-size: clamp(1.625rem, 1.2rem + 1.2vw, 2.25rem); line-height: 1.1; margin-bottom: 8px; }
.post__takeaway { margin: 0; color: var(--muted); }
.post__meta { font-size: 0.875rem; color: var(--muted); display: grid; gap: 2px; }

.paper { border: var(--border) solid var(--fg); border-radius: var(--radius); padding: clamp(22px, 4vw, 44px); }
.paper + .paper { margin-top: 24px; }
.paper__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-bottom: 24px; }
.paper dl { display: grid; gap: 0; margin: 24px 0; border-top: var(--border) solid var(--line); }
.paper dl > div { display: grid; gap: 4px 32px; padding: 16px 0; border-bottom: var(--border) solid var(--line); }
@media (min-width: 800px) { .paper dl > div { grid-template-columns: 200px 1fr; } }
.paper dt { font-weight: 700; }
.paper dd { margin: 0; max-width: var(--measure); }
.paper dd ul { padding-left: 1.2em; }
.cite { display: grid; gap: 12px; padding: 18px 20px; background: var(--surface); border-radius: 14px; }
.cite p { margin: 0; font-family: var(--font-display); font-size: 1.1875rem; line-height: 1.4; }
.cite__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ==========================================================================
   Footer (Collins-style big links)
   ========================================================================== */
.site-footer { background: var(--inverse-bg); color: var(--inverse-fg); margin-top: 0; padding-block: clamp(64px, 9vw, 120px) 104px; } /* bottom room for the reading card */
.site-footer .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
.site-footer a { color: inherit; }
.site-footer :focus-visible { outline-color: var(--inverse-fg); box-shadow: 0 0 0 6px var(--inverse-bg); }
.footer__cta { font-family: var(--font-display); font-size: clamp(2.25rem, 1.2rem + 4vw, 5rem); line-height: 1; max-width: 16ch; margin: 0 auto 32px; text-wrap: balance; }
.site-footer .footer__cta-btn { background: var(--inverse-fg); color: var(--inverse-bg); border-color: var(--inverse-fg); }
.footer__base {
  display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%;
  margin-top: 64px; padding-top: 24px; border-top: 1px solid color-mix(in srgb, var(--inverse-fg) 30%, transparent);
  font-size: 0.9375rem;
}
.footer__base p { margin: 0; max-width: none; }
.footer__base ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; list-style: none; }
.footer__base a { display: inline-flex; min-height: 44px; align-items: center; }

/* ==========================================================================
   Reading card + accessibility panel
   ========================================================================== */
.reading-card {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 50;
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 8px 18px 8px 8px; border-radius: 16px;
  background: var(--inverse-bg); color: var(--inverse-fg); border: 2px solid var(--inverse-bg);
  cursor: pointer; text-align: left; box-shadow: 0 12px 32px -12px rgba(0,0,0,0.45);
  transition: transform var(--d2) var(--ease), box-shadow var(--d2) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .reading-card:hover { transform: translateY(-3px) rotate(-1deg); } }
.reading-card:focus-visible { outline: 3px solid var(--fg); box-shadow: 0 0 0 6px var(--bg); }
.reading-card__icon svg { width: 24px; height: 24px; }
.reading-card__icon {
  width: 40px; height: 40px; border-radius: 10px; background: var(--inverse-fg); color: var(--inverse-bg);
  display: grid; place-items: center; font-family: var(--font-display); font-size: 1.375rem;
}
.reading-card__text { display: grid; line-height: 1.2; }
.reading-card__label { font-weight: 700; font-size: 0.9375rem; }
.reading-card__mode { font-size: 0.8125rem; opacity: 0.85; }
/* Phones: a round icon button, so it never sits over the words. The label stays in the button for screen readers. */
@media (max-width: 560px) {
  .reading-card { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: 56px; height: 56px; min-height: 0; padding: 0; gap: 0; border-radius: 999px; justify-content: center; }
  .reading-card__icon { width: 44px; height: 44px; border-radius: 999px; font-size: 1.125rem; }
  .reading-card__icon svg { width: 26px; height: 26px; }
  .reading-card__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

.panel {
  width: min(460px, calc(100vw - 24px)); max-height: calc(100dvh - 24px);
  margin: auto 12px 12px auto; padding: 0;
  border: 2px solid var(--fg); border-radius: 24px; background: var(--bg); color: var(--fg);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.5);
  overflow: auto; overscroll-behavior: contain;
}
.panel::backdrop { background: rgba(0,0,0,0.35); }
.panel[open] { animation: panel-in var(--d2) var(--ease) both; }
.panel[open]::backdrop { animation: fade-in var(--d2) var(--ease) both; }
.panel.is-closing { animation: panel-out var(--d1) var(--ease) both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } }
@keyframes panel-out { to { opacity: 0; transform: translateY(12px) scale(0.98); } }
@keyframes fade-in { from { opacity: 0; } }
@media (max-width: 560px) { .panel { margin: auto 12px 12px; } }
.panel__head { position: sticky; top: 0; z-index: 1; background: var(--bg); display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 22px 22px 12px; }
.panel__head h2 { font-family: var(--font-display); font-size: 2rem; }
.panel__head p { margin: 6px 0 0; font-size: 0.9375rem; color: var(--muted); }
.panel__body { padding: 8px 22px 22px; display: grid; gap: 22px; }
.panel fieldset { display: grid; gap: 8px; }
.panel legend { font-weight: 700; margin-bottom: 8px; font-size: 1rem; }
.mode-list { display: grid; gap: 8px; }
.mode {
  position: relative; display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start;
  padding: 12px 14px; border: var(--border) solid var(--line); border-radius: 14px; cursor: pointer;
  transition: border-color var(--d1) var(--ease), background-color var(--d1) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .mode:hover { border-color: var(--fg); } }
.mode:has(input:checked) { border-color: var(--fg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--fg); }
.mode input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--fg); }
.mode b { display: block; font-size: 1rem; }
.mode span { display: block; color: var(--muted); font-size: 0.875rem; line-height: 1.4; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 2px solid var(--fg); border-radius: 999px; padding: 3px; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.seg span { display: grid; place-items: center; min-height: 40px; border-radius: 999px; font-weight: 700; font-size: 0.875rem; text-align: center; padding: 0 6px; transition: background-color var(--d1) var(--ease), color var(--d1) var(--ease); }
.seg input:checked + span { background: var(--inverse-bg); color: var(--inverse-fg); }
.seg input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.check { display: flex; gap: 12px; align-items: center; min-height: 44px; cursor: pointer; font-weight: 700; }
.check input { width: 22px; height: 22px; flex: none; accent-color: var(--fg); }
.panel__foot { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; padding-top: 6px; border-top: var(--border) solid var(--line); padding-block: 16px 0; }
.panel__foot .text-link { font-size: 0.9375rem; }

.toast {
  position: fixed; left: 50%; bottom: 88px; z-index: 60; transform: translate(-50%, 20px);
  background: var(--inverse-bg); color: var(--inverse-fg); padding: 12px 20px; border-radius: 999px; font-weight: 700;
  opacity: 0; pointer-events: none; transition: opacity var(--d2) var(--ease), transform var(--d2) var(--ease);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ==========================================================================
   Motion and interaction layer
   Every effect reads the motion tokens, so Calm softens it, Bold amplifies it,
   and Still or a reduced-motion device switches it off (html[data-motion="off"]).
   ========================================================================== */

/* Press feedback for every control, touch included */
.pill:active, .option:active, .door__btn:active, .flip__btn:active, .icon-btn:active,
.choice input:active + span, .mode:active, .reading-card:active { transform: scale(var(--press)); }
.card-link:active { transform: scale(var(--press)); }

/* Hero name: each line rises out of a mask */
.hero__name span { overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero__name span > i { display: inline-block; font-style: inherit; }
html.js[data-motion="on"] .hero__name span { animation: none; }
html.js[data-motion="on"] .hero__name span > i { animation: line-up var(--d3) var(--ease) both; }
html.js[data-motion="on"] .hero__name span:last-child > i { animation-delay: 110ms; }
html.js[data-motion="on"][data-mode="calm"] .hero__name span > i { animation-name: fade-in; }
@keyframes line-up { from { transform: translateY(105%); } }

/* Statement: words fill in as it scrolls through the screen (--p is 0 to 1) */
/* Words move from the muted grey (still AA contrast) to full ink; the italic tail stays muted */
.statement > .w { transition: color var(--d1) linear; }
html.js[data-motion="on"] .statement[data-words] > .w {
  color: color-mix(in srgb, var(--fg) calc(clamp(0, var(--p, 1) * (var(--n) + 4) - var(--i), 1) * 100%), var(--muted));
}

/* Image frames unmask from the bottom edge instead of sliding */
/* The mask sits on the frame's contents, not the frame: a fully clipped element
   never counts as on screen, so the observer would never reveal it */
html.js[data-motion="on"] .frame[data-reveal] { transform: none; }
html.js[data-motion="on"] .frame[data-reveal] > img,
html.js[data-motion="on"] .frame[data-reveal] > .frame__pattern { clip-path: inset(100% 0 0 0); transition: clip-path var(--d3) var(--ease-in-out), transform var(--d3) var(--ease); }
html.js[data-motion="on"] .frame[data-reveal].is-in > img,
html.js[data-motion="on"] .frame[data-reveal].is-in > .frame__pattern { clip-path: inset(0 0 0 0); }
html.js[data-motion="on"][data-mode="calm"] .frame[data-reveal] > img,
html.js[data-motion="on"][data-mode="calm"] .frame[data-reveal] > .frame__pattern { clip-path: none; }
html.js[data-motion="on"] .frame--image img { transition: transform var(--d3) var(--ease); }
html.js[data-motion="on"] .frame[data-reveal]:not(.is-in) img { transform: scale(1.08); }

/* Card tilt follows the pointer (set by script on fine pointers only) */
.card-link { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.card-link.is-tilting { transition: background-color var(--d2) var(--ease), color var(--d2) var(--ease); }

/* Nav: the hovered link fills with a soft grey that fades in */
.nav a { transition: background-color var(--d2) var(--ease), color var(--d2) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .nav a:not([aria-current="page"]):hover { background: var(--box-2); }
}

/* Ghost buttons fill from the left on hover */
.btn--ghost { position: relative; overflow: hidden; isolation: isolate; }
.btn--ghost::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fg); transform: scaleX(0); transform-origin: right; transition: transform var(--d2) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .btn--ghost:hover { background: transparent; color: var(--bg); }
  .btn--ghost:hover::before { transform: scaleX(1); transform-origin: left; }
}

/* Index rows, posts and work cards respond to the pointer */
.index__row, .post > div, .work-item { transition: transform var(--d2) var(--ease), border-color var(--d2) var(--ease); }
.index > li, .posts > li { position: relative; }
.index > li::before, .posts > li::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--fg); transform: scaleX(0); transform-origin: left; transition: transform var(--d3) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .index > li:hover .index__row, .posts > li:hover > div { transform: translateX(10px); }
  .index > li:hover::before, .posts > li:hover::before { transform: scaleX(1); }
  .work-item:hover { border-color: var(--fg); transform: translateY(-4px); }
}

/* Rules draw in as sections arrive */
html.js[data-motion="on"] .strip[data-reveal], html.js[data-motion="on"] .index { border-top-color: transparent; background: linear-gradient(var(--fg), var(--fg)) top left / 0% var(--border) no-repeat; transition: background-size var(--d3) var(--ease); }
html.js[data-motion="on"] .strip[data-reveal].is-in, html.js[data-motion="on"] .index.is-in { background-size: 100% var(--border); }

/* Reading panel: options settle in one after another */
html.js[data-motion="on"] .panel[open] .mode { animation: rise-in var(--d2) var(--ease) both; }
html.js[data-motion="on"] .panel[open] .mode:nth-child(2) { animation-delay: 30ms; }
html.js[data-motion="on"] .panel[open] .mode:nth-child(3) { animation-delay: 60ms; }
html.js[data-motion="on"] .panel[open] .mode:nth-child(4) { animation-delay: 90ms; }
html.js[data-motion="on"] .panel[open] .mode:nth-child(5) { animation-delay: 120ms; }
html.js[data-motion="on"] .panel[open] .mode:nth-child(6) { animation-delay: 150ms; }

/* Theme toggle: the icon turns as the theme changes */
.theme-toggle svg { transition: transform var(--d3) var(--ease); }
html[data-theme="dark"] .theme-toggle svg { transform: rotate(180deg); }

/* Theme switch: the new theme spreads out from the toggle (see main.js) */
html.theme-switching::view-transition-old(root),
html.theme-switching::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* Reading progress on long pages */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 70; background: var(--fg); transform-origin: left; transform: scaleX(var(--progress, 0)); pointer-events: none; }
html[data-motion="off"] .progress { transition: none; }

/* ---------- Print ---------- */
@media print {
  .site-header, .reading-card, .panel, .site-footer, .skip-link, .toast { display: none !important; }
  body { padding: 0; background: #fff; color: #000; }
}

/* ===================== Home hero: full-width portrait ===================== */
.hero-e { position: relative; }
/* The portrait runs up behind the clear header (JS measures the header into --header-h) */
html.js[data-stage="deck"] .hero-e { margin-top: calc(var(--header-h, 0px) * -1); }
html.js[data-stage="deck"] .hero-e .opt-e { min-height: min(calc(820px + var(--header-h, 0px)), 100svh); }
.opt-e {
  --hero-bg: #1a1a1a; --hero-ink: #f4f4f4; --hero-kicker: #e6e6e6; --hero-desc: #e0e0e0;
  --hero-shade: linear-gradient(180deg, rgba(10,10,10,0.7) 0, rgba(10,10,10,0.45) 120px, transparent 240px), linear-gradient(90deg, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.55) 45%, rgba(10,10,10,0.2) 70%), linear-gradient(0deg, rgba(10,10,10,0.85) 0%, transparent 50%);
}
/* Light theme: the cut-out portrait on white (from the Figma file), with dark ink over it.
   Every wash eases out along a smooth curve (many small steps), so no fade shows an edge or a band.
   The bottom fade starts about halfway down and ends in solid white. */
html[data-theme="light"] .opt-e {
  --hero-bg: #ffffff; --hero-ink: #0b0b0b; --hero-kicker: #1a1a1a; --hero-desc: #1a1a1a;
  --hero-shade: linear-gradient(180deg, rgba(255,255,255,0.55) 0, rgba(255,255,255,0.3) 50px, rgba(255,255,255,0.1) 100px, transparent 150px), linear-gradient(0deg, rgba(255,255,255,1.0) 0%, rgba(255,255,255,1.0) 4.0%, rgba(255,255,255,0.997) 7.29%, rgba(255,255,255,0.977) 10.57%, rgba(255,255,255,0.931) 13.86%, rgba(255,255,255,0.855) 17.14%, rgba(255,255,255,0.754) 20.43%, rgba(255,255,255,0.632) 23.71%, rgba(255,255,255,0.5) 27.0%, rgba(255,255,255,0.368) 30.29%, rgba(255,255,255,0.246) 33.57%, rgba(255,255,255,0.145) 36.86%, rgba(255,255,255,0.069) 40.14%, rgba(255,255,255,0.023) 43.43%, transparent 46.71%, transparent 50.0%);
}
/* Wide screens: a light wash from the left (behind the headline), the bottom fade,
   and a soft wash just behind the intro so it never sits on the sleeve */
@media (min-width: 1100px) {
  html[data-theme="light"] .opt-e {
    --hero-shade: radial-gradient(ellipse 30% 15% at 81% 63%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.9) 30%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.45) 66%, rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.06) 91%, transparent 100%), linear-gradient(180deg, rgba(255,255,255,0.55) 0, rgba(255,255,255,0.3) 50px, rgba(255,255,255,0.1) 100px, transparent 150px), linear-gradient(90deg, rgba(255,255,255,0.85) 0.0%, rgba(255,255,255,0.847) 4.0%, rgba(255,255,255,0.83) 8.0%, rgba(255,255,255,0.791) 12.0%, rgba(255,255,255,0.727) 16.0%, rgba(255,255,255,0.641) 20.0%, rgba(255,255,255,0.537) 24.0%, rgba(255,255,255,0.425) 28.0%, rgba(255,255,255,0.313) 32.0%, rgba(255,255,255,0.209) 36.0%, rgba(255,255,255,0.123) 40.0%, rgba(255,255,255,0.059) 44.0%, rgba(255,255,255,0.02) 48.0%, transparent 52.0%, transparent 56.0%), linear-gradient(0deg, rgba(255,255,255,1.0) 0%, rgba(255,255,255,1.0) 4.0%, rgba(255,255,255,0.997) 7.29%, rgba(255,255,255,0.977) 10.57%, rgba(255,255,255,0.931) 13.86%, rgba(255,255,255,0.855) 17.14%, rgba(255,255,255,0.754) 20.43%, rgba(255,255,255,0.632) 23.71%, rgba(255,255,255,0.5) 27.0%, rgba(255,255,255,0.368) 30.29%, rgba(255,255,255,0.246) 33.57%, rgba(255,255,255,0.145) 36.86%, rgba(255,255,255,0.069) 40.14%, rgba(255,255,255,0.023) 43.43%, transparent 46.71%, transparent 50.0%);
  }
}
/* The light portrait is on plain white, so on wide screens it shows whole, sitting on the bottom edge,
   instead of being cropped and zoomed to fill very wide windows (which pushed the face under the headline) */
@media (min-width: 1100px) {
  html[data-theme="light"] .opt-e__img .photo--light { object-fit: contain; object-position: 50% 100%; }
}
/* Mid widths: the intro sits closer to the portrait, so its wash is a little larger */
@media (min-width: 1100px) and (max-width: 1279px) {
  html[data-theme="light"] .opt-e {
    --hero-shade: radial-gradient(ellipse 34% 16% at 80% 66%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.9) 30%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.45) 66%, rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.06) 91%, transparent 100%), linear-gradient(180deg, rgba(255,255,255,0.55) 0, rgba(255,255,255,0.3) 50px, rgba(255,255,255,0.1) 100px, transparent 150px), linear-gradient(90deg, rgba(255,255,255,0.85) 0.0%, rgba(255,255,255,0.847) 3.57%, rgba(255,255,255,0.83) 7.14%, rgba(255,255,255,0.791) 10.71%, rgba(255,255,255,0.727) 14.29%, rgba(255,255,255,0.641) 17.86%, rgba(255,255,255,0.537) 21.43%, rgba(255,255,255,0.425) 25.0%, rgba(255,255,255,0.313) 28.57%, rgba(255,255,255,0.209) 32.14%, rgba(255,255,255,0.123) 35.71%, rgba(255,255,255,0.059) 39.29%, rgba(255,255,255,0.02) 42.86%, transparent 46.43%, transparent 50.0%), linear-gradient(0deg, rgba(255,255,255,1.0) 0%, rgba(255,255,255,1.0) 4.0%, rgba(255,255,255,0.997) 7.29%, rgba(255,255,255,0.977) 10.57%, rgba(255,255,255,0.931) 13.86%, rgba(255,255,255,0.855) 17.14%, rgba(255,255,255,0.754) 20.43%, rgba(255,255,255,0.632) 23.71%, rgba(255,255,255,0.5) 27.0%, rgba(255,255,255,0.368) 30.29%, rgba(255,255,255,0.246) 33.57%, rgba(255,255,255,0.145) 36.86%, rgba(255,255,255,0.069) 40.14%, rgba(255,255,255,0.023) 43.43%, transparent 46.71%, transparent 50.0%);
  }
}
/* Each theme shows only its own portrait (the theme qualifier outweighs the general .photo display rule below) */
html:not([data-theme="light"]) .opt-e__img .photo--light { display: none; }
html[data-theme="light"] .opt-e__img .photo--light { display: block; filter: none; }
html[data-theme="light"] .opt-e__img .photo--dark { display: none; }
/* The light photo keeps its tone as it settles in (no extra greyscale) */
html.js[data-motion="on"][data-theme="light"] .opt-e.play .opt-e__img .photo--light { animation-name: settle-colour; }
@keyframes settle-colour { from { scale: 1.08; filter: blur(8px); } }
/* A soft halo keeps the small text crisp where it meets the picture */
html[data-theme="light"] :is(.opt-e__kicker, .opt-e__desc) { text-shadow: 0 0 10px rgba(255,255,255,0.9), 0 0 4px rgba(255,255,255,0.9); }
.opt-e { position: relative; overflow: hidden; background: var(--hero-bg); color: var(--hero-ink); display: grid; align-content: end; min-height: min(820px, 88vh); }
.opt-e__img { position: absolute; inset: 0; }
/* Both portraits sit centred */
.opt-e__img .photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; filter: grayscale(1); }
/* Wide screens: both portraits sit a little higher. The photo box is taller than the hero and lifted,
   so the bottom stays covered while the person moves up. */
@media (min-width: 1100px) {
  .opt-e__img .photo { height: 112%; translate: 0 -9%; }
}
.opt-e__img::after { content: ""; position: absolute; inset: 0; background: var(--hero-shade); }
/* Extra space at the bottom keeps the CTA clear of the fixed "Change how I read" button */
/* Same container, side gutter and section spacing as the rest of the site */
.opt-e__body {
  position: relative; display: grid; gap: 28px;
  width: 100%; max-width: var(--max); margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: calc(clamp(64px, 9vw, 140px) * var(--space)) calc(clamp(64px, 9vw, 140px) * var(--space) + 56px);
}
.opt-e__kicker { font-size: 1.125rem; line-height: 1.35; margin-bottom: 14px; color: var(--hero-kicker); }
.opt-e__title { font-family: var(--font-display); font-weight: 400; font-size: calc(clamp(3rem, 1.2rem + 5.5vw, 7rem) * var(--display-scale)); line-height: 0.92; letter-spacing: -0.02em; max-width: 12ch; }
.opt-e__desc { margin: 0; color: var(--hero-desc); max-width: 36ch; }
.opt-e__cta { justify-self: start; }
/* The CTA sits under the headline on the left, away from the bottom-right corner */
@media (min-width: 900px) {
  .opt-e__body { grid-template-columns: 3fr 2fr; grid-template-areas: "head desc" "cta ."; align-items: end; row-gap: 32px; }
  .opt-e__head { grid-area: head; } .opt-e__desc { grid-area: desc; justify-self: end; text-align: right; } .opt-e__cta { grid-area: cta; }
}
html.js[data-motion="on"] .opt-e.play .opt-e__img .photo { animation: settle 1.4s var(--ease) both; }
@keyframes settle { from { scale: 1.08; filter: grayscale(1) blur(8px); } }
/* The button takes the opposite ink to the photo it sits on */
.opt-e__cta { background: var(--hero-ink); color: var(--hero-bg); border-color: var(--hero-ink); }
.opt-e__cta:focus-visible { outline: 3px solid var(--hero-ink); outline-offset: 3px; }
/* Bold mode fans the deck wider; keep the page from scrolling sideways */
.home { overflow-x: clip; }

/* ===================== Home: the idea, centred ===================== */
.idea { display: grid; justify-items: center; text-align: center; gap: 28px; }
.idea__label { margin: 0; font-size: 0.875rem; color: var(--muted); letter-spacing: 0.02em; }
.idea .statement { font-size: calc(clamp(2.25rem, 1.3rem + 3vw, 4rem) * var(--display-scale)); line-height: 1.05; max-width: 18ch; margin: 0; }
.idea__lede { margin: 0; max-width: 44ch; font-size: 1.125rem; color: var(--muted); }
.idea__cta { min-height: 44px; padding: 0 20px; font-size: 0.9375rem; gap: 10px; }
.idea__cta::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* "people's stories" stays on one line; the headline is never narrower than that line */
.opt-e__title { max-width: none; }
.opt-e__title .ln--nowrap { white-space: nowrap; }
/* Readers who chose the largest text keep it full size; the line may wrap for them on small phones */
html[data-size="3"] .opt-e__title .ln--nowrap { white-space: normal; }
/* Phones and tablets: the portrait becomes its own block and the words sit underneath it on the page,
   so no text ever runs over the face. The photo fades into the page colour at its foot. */
@media (max-width: 1099px) {
  .opt-e, html[data-theme="light"] .opt-e {
    --hero-bg: var(--bg); --hero-ink: var(--fg); --hero-kicker: var(--fg); --hero-desc: var(--muted);
    --hero-shade: linear-gradient(180deg, color-mix(in srgb, var(--bg) 45%, transparent) 0, transparent 120px), linear-gradient(0deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 60%, transparent) 12%, transparent 32%);
    display: block; min-height: 0;
  }
  html.js[data-stage="deck"] .hero-e .opt-e { min-height: 0; }
  .opt-e__img { position: relative; inset: auto; width: 100%; height: min(125vw, 78svh); overflow: hidden; }
  .opt-e__img .photo { object-position: 50% 18%; }
  html[data-theme="light"] .opt-e__img .photo--light { object-position: 50% 12%; }
  html[data-theme="light"] :is(.opt-e__kicker, .opt-e__desc) { text-shadow: none; }
  /* Light: the photo eases into the page along a smooth curve, ending in solid page colour */
  html[data-theme="light"] .opt-e {
    --hero-shade: linear-gradient(180deg, color-mix(in srgb, var(--bg) 45%, transparent) 0, transparent 120px), linear-gradient(0deg, var(--bg) 0%, var(--bg) 3.0%, color-mix(in srgb, var(--bg) 99.7%, transparent) 5.36%, color-mix(in srgb, var(--bg) 97.7%, transparent) 7.71%, color-mix(in srgb, var(--bg) 93.1%, transparent) 10.07%, color-mix(in srgb, var(--bg) 85.5%, transparent) 12.43%, color-mix(in srgb, var(--bg) 75.4%, transparent) 14.79%, color-mix(in srgb, var(--bg) 63.2%, transparent) 17.14%, color-mix(in srgb, var(--bg) 50.0%, transparent) 19.5%, color-mix(in srgb, var(--bg) 36.8%, transparent) 21.86%, color-mix(in srgb, var(--bg) 24.6%, transparent) 24.21%, color-mix(in srgb, var(--bg) 14.5%, transparent) 26.57%, color-mix(in srgb, var(--bg) 6.9%, transparent) 28.93%, color-mix(in srgb, var(--bg) 2.3%, transparent) 31.29%, transparent 33.64%, transparent 36.0%);
  }
  .opt-e__body { padding-block: 8px calc(clamp(48px, 8vw, 96px) * var(--space)); }
}
/* Phones: the words under the portrait are centred */
@media (max-width: 760px) {
  .opt-e__body { justify-items: center; text-align: center; }
  .opt-e__title { margin-inline: auto; }
  .opt-e__desc { margin-inline: auto; }
  .opt-e__cta { justify-self: center; }
}
@media (min-width: 600px) and (max-width: 1099px) {
  .opt-e__img { height: min(68.75vw, 72svh); }
}

/* ==========================================================================
   Boxes, not lines
   Dividers and outlines give way to shaded boxes. Two shades are mixed from
   each theme's own ink and paper, so they work in light, dark and every mode.
   ========================================================================== */
:root {
  --box: color-mix(in srgb, var(--fg) 5%, var(--bg));
  --box-2: color-mix(in srgb, var(--fg) 10%, var(--bg));
  --box-3: color-mix(in srgb, var(--fg) 16%, var(--bg));
  --box-r: 18px;
}

/* Section dividers and header/footer rules */
.section + .section { border-top: 0; }
.site-header, .site-header.is-scrolled { border-bottom-color: transparent; }
.footer__base { border-top: 0; }
.panel__foot { border-top: 0; }

/* Lists of rows become stacks of boxes */
.strip, .index, .facts, .kit, .posts, .paper dl { border-top: 0; display: grid; gap: 8px; }
html.js[data-motion="on"] .strip[data-reveal], html.js[data-motion="on"] .index { background: none; }
.strip li, .kit li, .paper dl > div { border-bottom: 0; background: var(--box); border-radius: var(--box-r); padding: 18px 22px; }
.index > li { border-bottom: 0; background: var(--box); border-radius: var(--box-r); }
.index__row { padding: 22px; }
.post { border-bottom: 0; background: var(--box); border-radius: var(--box-r); padding: 24px; }
.facts div { border-bottom: 0; background: var(--box); border-radius: 14px; padding: 16px 18px; }
.index > li::before, .posts > li::before { display: none; }
@media (hover: hover) and (pointer: fine) {
  .index > li:hover, .posts > li:hover .post { background: var(--box-2); }
}
.steps li, .themes li { border-top: 0; background: var(--box); border-radius: var(--box-r); padding: 22px; }
.evidence ol { gap: 8px; }
.evidence li { border-top: 0; background: color-mix(in srgb, var(--inverse-fg) 9%, transparent); border-radius: 14px; padding: 14px 18px; }

/* Cards and panels: filled, not outlined */
.card-link { border-color: transparent; background: var(--box-2); box-shadow: 0 18px 40px -30px rgba(0,0,0,0.35); }
.card-link__inside { border-top: 0; background: var(--bg); border-radius: 12px; padding: 10px 12px; }
.flip__face { border-color: transparent; }
.flip__front { background: var(--box-2); }
.flip__btn { border-color: transparent; background: color-mix(in srgb, currentColor 12%, transparent); }
.work-item { border-color: transparent; background: var(--box); }
@media (hover: hover) and (pointer: fine) { .work-item:hover { border-color: transparent; background: var(--box-2); } }
.frame { border-color: transparent; background: var(--box-2); }
.frame__label { border-color: transparent; }
.door { border-color: transparent; background: var(--box); }
@media (hover: hover) and (pointer: fine) { .door__btn:hover { background: var(--box-2); } }

/* Gate options and reading modes */
.option { border-color: transparent; background: var(--box); }
@media (hover: hover) and (pointer: fine) { .option:hover { border-color: transparent; background: var(--box-2); } }
.option[aria-pressed="true"] { border-color: transparent; background: var(--box-2); box-shadow: inset 0 0 0 2px var(--fg); }
.option--plain { border-style: solid; }
.option__sample { border-color: transparent; background: var(--bg); }
.option--calm .option__sample { border-color: transparent; }
.mode { border-color: transparent; background: var(--box); }
@media (hover: hover) and (pointer: fine) { .mode:hover { border-color: transparent; background: var(--box-2); } }
.mode:has(input:checked) { border-color: transparent; background: var(--box-2); box-shadow: inset 0 0 0 2px var(--fg); }

/* Buttons, pills and controls: filled shades */
.btn--ghost { border-color: transparent; background: var(--box-2); }
.icon-btn { border-color: transparent; background: var(--surface); }
.pill, .choice span { border-color: transparent; background: var(--box-2); }
@media (hover: hover) and (pointer: fine) {
  .pill:hover, .choice input:hover + span { border-color: transparent; background: var(--box-3); }
}
.pill[aria-pressed="true"], .choice input:checked + span { background: var(--inverse-bg); color: var(--inverse-fg); }
.seg { border: 0; background: var(--box-2); }
.switch__track { border-color: transparent; background: var(--box-3); }

/* Form fields: a soft fill with one firm line beneath, so the field stays easy to find */
.input, .textarea, .select { border-color: transparent; background: var(--box-2); border-radius: 12px; }
[aria-invalid="true"] { border-color: var(--fg); }

/* Clear mode is the high-contrast choice, so its boxes keep a firm outline */
html:is([data-mode="clear"], [data-a11y~="contrast"]) :is(.strip li, .kit li, .paper dl > div, .index > li, .post, .facts div, .steps li, .themes li,
  .card-link, .flip__front, .work-item, .door, .option, .mode, .pill, .choice span, .btn--ghost, .icon-btn) {
  box-shadow: inset 0 0 0 2px var(--fg);
}
html:is([data-mode="clear"], [data-a11y~="contrast"]) .input, html:is([data-mode="clear"], [data-a11y~="contrast"]) .textarea, html:is([data-mode="clear"], [data-a11y~="contrast"]) .select { border-color: var(--fg); }

/* Chips, summaries and research papers: filled, not outlined */
.chip { border-color: transparent; background: var(--box-2); }
.plain { border: 0; background: var(--box); }
.paper { border: 0; background: var(--box); }
.paper dl > div, .paper .plain, .paper .cite { background: var(--bg); }
.paper .chip { background: var(--bg); }
html:is([data-mode="clear"], [data-a11y~="contrast"]) :is(.chip, .plain, .paper) { box-shadow: inset 0 0 0 2px var(--fg); }
/* Study labels stay small pills instead of stretching into circles */
.paper__head { align-items: flex-start; }
.paper__head .chip { height: auto; align-self: flex-start; }
.paper__head > :last-child:not(:first-child) { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
/* Phones: five menu items on one row ("Thoughts" is longer than the old "Blog") */
@media (max-width: 430px) {
  .nav ul { margin-inline: -6px; gap: 0; }
  .nav a { padding: 0 6px; font-size: 0.8125rem; }
}
/* When a card turns dark (hover or keyboard focus), its "Inside" box darkens with it so the text stays readable */
.card-link:focus-visible .card-link__inside { background: color-mix(in srgb, var(--inverse-fg) 12%, transparent); color: inherit; }
.card-link:focus-visible .card-link__inside b { color: inherit; }
@media (hover: hover) and (pointer: fine) {
  .card-link:hover .card-link__inside { background: color-mix(in srgb, var(--inverse-fg) 12%, transparent); }
}
/* About: the pull quote closes "The story so far" */
.story__quote { margin: calc(56px * var(--space)) 0 0; padding: 0; }
.story__quote .pull { max-width: none; text-wrap: pretty; }

/* Two-line page headlines: set lines on wider screens, natural wrap on phones */
.h1--two { font-size: calc(clamp(2.25rem, 0.6rem + 4vw, 4.25rem) * var(--display-scale)); line-height: 1.05; max-width: none; }
@media (min-width: 900px) { .h1--two > span { display: block; } }

/* Enquiry topics: one row where the form is wide enough; wraps on narrow screens */
#enquiry .choices { gap: 8px; }
#enquiry .choice span { padding: 0 14px; font-size: 0.9375rem; white-space: nowrap; }

/* About intro line: one sentence per line */
.hero__line--two { max-width: none; }
.hero__line--two > span { display: block; }
@media (min-width: 560px) { .h1--two.h1--short > span { display: block; } }

/* Recognition and evidence rows: the link is an arrow button */
@media (min-width: 760px) { .strip li { align-items: center; } }
.strip .btn { justify-self: start; }
@media (hover: hover) and (pointer: fine) { .btn--ghost:hover .arrow { transform: translateX(4px); } }
@media (max-width: 759px) { .strip .btn { margin-top: 8px; } }

/* Case study details: each box hugs its content and the row wraps; long values wrap to two lines.
   On phones short boxes (Year, Country, Status) share a row and long ones take the full width. */
.facts--hug { display: flex; flex-wrap: wrap; }
.facts--hug > div { flex: 1 1 auto; min-width: 0; }
.facts--hug dd { overflow-wrap: break-word; }
@media (max-width: 759px) {
  .facts--hug { display: grid; grid-template-columns: repeat(3, minmax(min-content, 1fr)); grid-auto-flow: row dense; }
  .facts--hug > div { padding: 14px 12px; }
  .facts--hug dt { font-size: 0.75rem; }
  .facts--hug > :is(.facts__long, .facts__wide) { grid-column: 1 / -1; }
}
@media (min-width: 760px) {
  /* Long values get a fixed two-line width and their text fills it; short boxes take the spare room */
  .facts--hug > .facts__long { flex: 0 1 calc(30ch + 36px); }
}

/* Enquiry form sits in its own shaded panel; fields turn page-coloured so they stand out on it */
.form[data-enquiry], #form-success { background: var(--box); border-radius: var(--box-r); padding: clamp(20px, 3.5vw, 40px); max-width: none; }
#form-success { border: 0; }
.form[data-enquiry] :is(.input, .textarea, .select) { background: var(--bg); }
html:is([data-mode="clear"], [data-a11y~="contrast"]) .form[data-enquiry], html:is([data-mode="clear"], [data-a11y~="contrast"]) #form-success { box-shadow: inset 0 0 0 2px var(--fg); }

/* ---------- Thoughts: article pages ----------
   Centred title, a wide cover, then a sticky "Written by" column beside one reading column. */
.article__head { padding-block: clamp(32px, 6vw, 80px) clamp(28px, 4vw, 56px); text-align: center; }
.article__head .back-link { display: flex; width: fit-content; margin: 0 auto clamp(16px, 3vw, 40px); }
.article__theme { justify-content: center; }
.article__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: calc(clamp(2.5rem, 1.2rem + 5vw, 5.75rem) * var(--display-scale)); line-height: 1.02;
  max-width: 18ch; margin: 0 auto; text-wrap: balance;
}
.article__cover { display: grid; }
.article__frame { width: min(100%, 1040px); margin-inline: auto; aspect-ratio: 2 / 1; border: 0; background: var(--box); }
.article__frame .frame__pattern { color: var(--box-3); }

.article__layout { display: grid; gap: 28px; padding-block: clamp(40px, 6vw, 96px) 0; }
@media (min-width: 1000px) {
  .article__layout { grid-template-columns: minmax(180px, 1fr) minmax(0, 680px) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 64px); }
  .article__aside { grid-column: 1; }
  .article__body { grid-column: 2; }
  .article__sticky { position: sticky; top: 112px; }
}
.article__by { font-family: var(--font-display); font-style: italic; font-size: 1.375rem; margin: 0 0 10px; }
.article__author { display: flex; align-items: center; gap: 12px; font-size: 1.0625rem; margin: 0 0 14px; }
.article__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.article__when, .article__updated { font-size: 0.875rem; color: var(--muted); margin: 0; }
.article__updated { margin-top: 4px; }
@media (max-width: 999px) {
  .article__sticky { display: grid; gap: 8px; padding: 18px 20px; background: var(--box); border-radius: var(--box-r); }
  .article__by { font-size: 1.125rem; margin: 0; }
  .article__author, .article__updated { margin: 0; }
}

.article__note { margin: 0 0 20px; font-size: 0.9375rem; }
.article__takeaway { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem); line-height: 1.4; margin: 0 0 28px; text-wrap: pretty; }
.article__body > .plain { margin-bottom: 36px; }

.prose { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); line-height: 1.65; }
.prose > * + * { margin-top: 1em; }
.prose p, .prose ul { margin-bottom: 0; }
.prose h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.875rem, 1.3rem + 1.6vw, 2.75rem); line-height: 1.08; margin-top: 2em; }
.prose h2 + * { margin-top: 0.7em; }
.prose h2 + .article__quote { margin-top: 1.4em; }
.prose .article__quote + h2 { margin-top: 1.2em; }
.prose > .article__quote:first-child { margin-top: 0; }
.prose ul { padding-left: 1.25em; }
.prose li + li { margin-top: 0.4em; }
.prose strong { font-weight: 700; }
.prose .todo { font-size: 1rem; }
.article__quote { margin: 2.2em 0; padding: 0; }
.article__quote p {
  font-family: var(--font-display); font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.625rem); line-height: 1.12; margin: 0; text-wrap: balance;
}
.article__quote p::before { content: "\201C"; display: block; font-size: 2em; line-height: 0.75; height: 0.36em; }

.article__source { margin-top: clamp(40px, 6vw, 72px); padding: clamp(20px, 3vw, 32px); background: var(--box); border-radius: var(--box-r); display: grid; gap: 14px; justify-items: start; }
.article__source .eyebrow { margin: 0; }

/* More thoughts: a row of cards that scrolls sideways on smaller screens */
.related__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.related__list { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding-bottom: 12px; }
.related__card { position: relative; scroll-snap-align: start; display: grid; align-content: start; gap: 12px; }
.related__frame { aspect-ratio: 4 / 3; border: 0; background: var(--box); }
.related__frame .frame__pattern { color: var(--box-3); }
.related__frame .frame__big { font-size: clamp(1.75rem, 1.2rem + 1vw, 2.5rem); padding: 18px; overflow-wrap: normal; }
.related__title { font-family: var(--font-display); font-weight: 400; font-size: 1.375rem; line-height: 1.15; margin: 0; }
.related__link { text-decoration: none; }
.related__link::after { content: ""; position: absolute; inset: 0; }
.related__link:focus-visible { outline: none; }
.related__card:has(.related__link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: var(--radius); }
@media (hover: hover) and (pointer: fine) { .related__card:has(.related__link):hover .related__title { text-decoration: underline; text-underline-offset: 0.12em; } }
.related__card--soon .related__frame { opacity: 0.6; }
.related__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 0.875rem; color: var(--muted); margin: 0; }

html:is([data-mode="clear"], [data-a11y~="contrast"]) :is(.article__source, .article__frame, .related__frame) { box-shadow: inset 0 0 0 2px var(--fg); }
html:is([data-mode="dyslexia"], [data-a11y~="dys"]) .prose { line-height: 1.8; }
html:is([data-mode="dyslexia"], [data-a11y~="dys"]) :is(.article__head, .article__theme) { text-align: left; justify-content: flex-start; }
html:is([data-mode="dyslexia"], [data-a11y~="dys"]) .article__title { margin-inline: 0; }

/* Thoughts list: the whole card opens the post */
.post__link { text-decoration: none; }
.post__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.post:has(.post__link) { position: relative; cursor: pointer; }
.post:has(.post__link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.post__link:focus-visible { outline: none; }
@media (hover: hover) and (pointer: fine) { .post:has(.post__link):hover .post__title { text-decoration: underline; text-underline-offset: 0.12em; } }
@media (hover: hover) and (pointer: fine) { .post:has(.post__link):hover { background: var(--box-2); } }
html:is([data-mode="dyslexia"], [data-a11y~="dys"]) .article__head .back-link { margin-left: 0; }

/* ---------- Reading panel: Fine-tune switches ---------- */
.tune-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tune {
  display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 92px; padding: 14px 10px;
  border: 0; border-radius: 16px; background: var(--box); color: var(--fg);
  font: inherit; font-weight: 700; font-size: 0.9375rem; line-height: 1.2; text-align: center; cursor: pointer;
  transition: background-color var(--d1) var(--ease), color var(--d1) var(--ease), transform var(--d1) var(--ease);
}
.tune__icon { width: 26px; height: 26px; }
.tune__state { font-weight: 400; font-size: 0.8125rem; color: var(--muted); }
.tune[aria-pressed="true"] { background: var(--inverse-bg); color: var(--inverse-fg); }
.tune[aria-pressed="true"] .tune__state { color: inherit; }
.tune:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.tune:active { transform: scale(var(--press)); }
@media (hover: hover) and (pointer: fine) { .tune[aria-pressed="false"]:hover { background: var(--box-2); } }
html[data-mode="clear"] .tune, html[data-a11y~="contrast"] .tune { box-shadow: inset 0 0 0 2px var(--fg); }
.panel__reset { width: 100%; justify-content: center; }
.panel__reset svg { flex: none; }

/* ---------- Fine-tune effects ---------- */
/* Highlighted links: every link is underlined and outlined, buttons included */
html[data-links="underline"] a:not(.btn, .brand, .skip-link) { text-decoration: underline !important; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
html[data-links="underline"] :is(main, .site-footer) a:not(.btn, .brand, .skip-link, [aria-current]) { background: var(--box-2); border-radius: 4px; box-shadow: 0 0 0 2px var(--box-2); }
html[data-links="underline"] .nav a:not([aria-current]) { outline: 2px solid currentColor; outline-offset: -4px; }
html[data-links="underline"] a.btn { outline: 2px dashed currentColor; outline-offset: 3px; }

/* Text spacing: WCAG 1.4.12 values */
html[data-a11y~="spacing"] { --tracking: 0.12em; --word: 0.16em; }
html[data-a11y~="spacing"] p { margin-bottom: 1.5em; }

/* Taller lines */
html[data-a11y~="lineheight"] { --leading: 2; }
html[data-a11y~="lineheight"] :is(p, li, dd, .prose, .lede) { line-height: 2 !important; }

/* Left-align everything, including centred titles */
html[data-a11y~="left"] * { text-align: left !important; }
html[data-a11y~="left"] :is(.article__title, .footer__cta, .idea__lede, .idea .statement) { margin-inline: 0 !important; }
html[data-a11y~="left"] :is(.article__head .back-link, .article__theme, .idea, .site-footer .wrap) { justify-content: flex-start !important; justify-items: start !important; margin-left: 0 !important; }

/* Dyslexia-friendly font (Lexend loads only when this is on) */
html[data-a11y~="dys"] { --font-text: "Lexend", "Atkinson Hyperlegible Next", system-ui, sans-serif; }

/* Hide images: photos go blank; their space and descriptions stay */
html[data-a11y~="noimg"] :is(main, .site-footer) :is(img, video, picture) { visibility: hidden; }
html[data-a11y~="noimg"] :is(.frame--image, .opt-e__img, .lead__media) { background: var(--box); }

/* Desaturate (on main areas, so fixed buttons keep their position) */
html[data-a11y~="grey"] :is(main, .site-header, .site-footer, .reading-card) { filter: grayscale(1); }

/* Big cursor */
html[data-a11y~="cursor"], html[data-a11y~="cursor"] * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 8-6.5 1.8L9.5 19z' fill='%23000' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, auto !important;
}
html[data-a11y~="cursor"] :is(a, button, label, summary, select, [role="button"]), html[data-a11y~="cursor"] :is(a, button, label, summary) * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'%3E%3Cpath d='M9 11V4.5a1.5 1.5 0 0 1 3 0V10h.5V8.5a1.5 1.5 0 0 1 3 0V10h.5v-.5a1.5 1.5 0 0 1 3 0V15a7 7 0 0 1-7 7h-1a6 6 0 0 1-4.6-2.2L3 15.5a1.6 1.6 0 0 1 2.4-2.1L9 16z' fill='%23000' stroke='%23fff' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 12 4, pointer !important;
}
html[data-a11y~="cursor"] :is(input[type="text"], input[type="email"], textarea) { cursor: text !important; }

/* Reading guide: two fixed shades leave a clear band around the line being read */
.guide { position: fixed; left: 0; right: 0; z-index: 120; background: rgba(0, 0, 0, 0.55); pointer-events: none; }
.guide--top { top: 0; height: 0; }
.guide--bottom { bottom: 0; top: 100%; }

/* ---------- Reading panel, simplified: compact modes, grouped switches ---------- */
.panel__head { align-items: center; padding-bottom: 8px; }
.panel__body { gap: 18px; }
.modes { display: flex; flex-wrap: wrap; gap: 6px; }
.mode-pill { position: relative; }
.mode-pill input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mode-pill span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--box); font-weight: 700; font-size: 0.875rem; transition: background-color var(--d1) var(--ease), color var(--d1) var(--ease); }
.mode-pill input:checked + span { background: var(--inverse-bg); color: var(--inverse-fg); }
.mode-pill input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .mode-pill input:not(:checked):hover + span { background: var(--box-2); } }
.mode-note { margin: 4px 0 0; font-size: 0.875rem; color: var(--muted); min-height: 1.4em; }
.panel .tune-group legend { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 6px; }
.tune-grid { gap: 6px; }
.tune {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; justify-items: start; gap: 10px;
  min-height: 52px; padding: 8px 12px; text-align: left; font-size: 0.875rem; border-radius: 14px;
}
.tune__icon { width: 22px; height: 22px; }
.tune__state { grid-column: 2; grid-row: 2; margin-top: -4px; font-size: 0.75rem; }
.tune__check { width: 16px; height: 16px; grid-column: 3; grid-row: 1; opacity: 0; transform: scale(0.6); transition: opacity var(--d1) var(--ease), transform var(--d2) var(--ease-reveal); }
.tune[aria-pressed="true"] .tune__check { opacity: 1; transform: none; }
.panel__foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 4px; }
.panel__foot .btn { width: 100%; }
.panel__note { margin: 0; text-align: center; font-size: 0.8125rem; color: var(--muted); }
html[data-mode="clear"] .mode-pill span, html[data-a11y~="contrast"] .mode-pill span { box-shadow: inset 0 0 0 2px var(--fg); }
@media (max-width: 440px) {
  html:is([data-size], [data-mode="clear"]) .tune-grid { grid-template-columns: 1fr; }
}
/* Labels wrap between words, never inside one */
.tune__label { overflow-wrap: break-word; hyphens: manual; }
/* Every tile starts its icon, label and tick on the same top line, so labels line up across a row
   even when one tile carries a second line (Bigger text: Default / Larger / Largest) */
@media (min-width: 561px) {
  .tune { align-content: start; padding-block: 15px; }
  .tune__icon, .tune__label, .tune__check { grid-row: 1; align-self: center; }
}
/* Phones: the panel opens as a full screen sheet. Tiles put the icon above the words so the label gets
   the tile's full width, and Reset / Done stay pinned to the bottom while the settings scroll. */
@media (max-width: 560px) {
  .panel { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
  .panel__head { padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 10px; }
  .panel__head h2 { font-size: 1.625rem; }
  .panel__body { padding: 4px 16px 0; }
  .tune { position: relative; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; justify-items: start; align-content: start; gap: 6px; min-height: 84px; padding: 12px 34px 12px 12px; }
  .tune__icon { grid-column: 1; grid-row: auto; }
  .tune__state { grid-column: 1; grid-row: auto; margin-top: -2px; }
  .tune__check { position: absolute; top: 12px; right: 12px; }
  html:is([data-size], [data-mode="clear"]) .tune-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel__foot {
    position: sticky; bottom: 0; z-index: 1; margin-inline: -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--bg); box-shadow: 0 -12px 20px -16px rgba(0, 0, 0, 0.35);
  }
  .panel__note { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 340px) {
  .tune { padding-right: 30px; font-size: 0.8125rem; }
}

/* ---------- Replies on posts ---------- */
.replies { margin-top: clamp(48px, 7vw, 88px); display: grid; gap: 20px; }
.replies__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.875rem, 1.3rem + 1.6vw, 2.75rem); line-height: 1.05; display: flex; align-items: baseline; gap: 12px; }
.replies__count { font-family: var(--font-text); font-size: 0.9375rem; font-weight: 700; background: var(--box-2); border-radius: 999px; padding: 2px 10px; }
.replies__empty { color: var(--muted); margin: 0; }
.replies__list { list-style: none; display: grid; gap: 8px; padding: 0; }
.reply { background: var(--box); border-radius: var(--box-r); padding: 18px 20px; }
.reply p { margin: 0; }
.reply p + p { margin-top: 8px; }
.reply__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.reply__meta time { font-size: 0.875rem; color: var(--muted); }
.reply__answer { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: var(--bg); }
.reply__by { font-weight: 700; font-size: 0.875rem; }
.reply-form { max-width: none; gap: 20px; }
.reply-form__title { font-size: 1.25rem; margin: 0; }
.reply-form .hint { margin: -10px 0 0; }
.reply-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.reply-form .textarea { min-height: 140px; }
.reply-status { margin: 0; font-weight: 700; }
.reply-status:empty { display: none; }
.form[data-reply] { background: var(--box); border-radius: var(--box-r); padding: clamp(20px, 3.5vw, 32px); }
.form[data-reply] :is(.input, .textarea) { background: var(--bg); }
html:is([data-mode="clear"], [data-a11y~="contrast"]) :is(.reply, .form[data-reply]) { box-shadow: inset 0 0 0 2px var(--fg); }

/* ---------- CV ---------- */
.cv-tools { margin: 0 0 24px; }
/* Both download buttons share one width (the wider one sets it); on small phones they stack full width */
.cv-downloads { display: inline-grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.cv-downloads .btn { justify-content: center; width: 100%; }
@media (max-width: 520px) { .cv-downloads { display: grid; grid-template-columns: 1fr; } }
@media (hover: hover) and (pointer: fine) { .btn:hover .arrow--down { transform: translateY(3px); } }