/* ============================================================
   Reuben Gbarinaa: brand tokens
   ============================================================ */

:root {
  /* Palette: exact tokens, do not introduce new hues */
  --white: #FFFFFF;
  --paper: #F4F0E8;
  --current: #102A2A;
  --graphite: #31383B;
  --emerald: #0B7850;
  --olive: #65703A;
  --gold: #C58A32;
  --clay: #A9553F;

  /* Type */
  --font-display: 'Newsreader', Georgia, serif;
  --font-body: 'Archivo', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', Consolas, monospace;

  /* Light mode roles */
  --bg: var(--paper);
  --surface: var(--white);
  --surface-alt: var(--paper);
  --text: var(--current);
  --text-secondary: var(--graphite);
  --border: rgba(49, 56, 59, 0.16);
  --border-strong: rgba(49, 56, 59, 0.28);
  /* Meets WCAG 1.4.11 non-text contrast (>=3:1) for interactive borders */
  --border-interactive: rgba(49, 56, 59, 0.6);
  --accent: var(--emerald);
  --focus-ring: var(--accent);
  /* Olive and Clay at brand value fail AA text contrast on dark surfaces; these are the readable variants */
  --olive-text: var(--olive);
  --clay-text: var(--clay);
  /* White on light-mode accent is 5.5:1; on the brighter dark-mode accent it drops to 3.04:1
     and fails AA, so primary-button text swaps to dark text in dark mode (4.98:1). */
  --btn-primary-text: var(--white);

  --radius: 3px;
  --container-max: 1120px;
  --gutter: 1.5rem;

  /* Motion system: one easing family, duration scaled to the size of the change */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-micro: 180ms;
  --dur-control: 200ms;
  --dur-card: 260ms;
  --dur-section: 480ms;
  --dur-map: 800ms;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: var(--current);
  --surface: rgba(255, 255, 255, 0.04);
  --surface-alt: rgba(255, 255, 255, 0.02);
  --text: var(--paper);
  --text-secondary: rgba(244, 240, 232, 0.72);
  --border: rgba(244, 240, 232, 0.14);
  --border-strong: rgba(244, 240, 232, 0.24);
  --border-interactive: rgba(244, 240, 232, 0.45);
  --accent: #14a877;
  /* Lightened along the same hue/saturation as the brand colour; 4.75:1 and 4.64:1 on Deep Current */
  --olive-text: #88974E;
  --clay-text: #C67B67;
  --btn-primary-text: var(--current);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--current);
    --surface: rgba(255, 255, 255, 0.04);
    --surface-alt: rgba(255, 255, 255, 0.02);
    --text: var(--paper);
    --text-secondary: rgba(244, 240, 232, 0.72);
    --border: rgba(244, 240, 232, 0.14);
    --border-strong: rgba(244, 240, 232, 0.24);
    --border-interactive: rgba(244, 240, 232, 0.45);
    --accent: #14a877;
    --olive-text: #88974E;
    --clay-text: #C67B67;
    --btn-primary-text: var(--current);
    color-scheme: dark;
  }
}

/* ============================================================
   Reset
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; }
img, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ============================================================
   Base
   ============================================================ */

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
}
@media (prefers-reduced-motion: no-preference) {
  body { transition: background-color 200ms ease, color 200ms ease; }
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  color: var(--text);
}

h1 { font-size: clamp(2.5rem, 5vw + 1rem, 4.25rem); font-weight: 600; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.75rem, 2.4vw + 1rem, 2.5rem); }
h3 { font-size: clamp(1.25rem, 1vw + 1rem, 1.5rem); font-weight: 600; }

p { color: var(--text-secondary); }

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { padding-block: clamp(3.5rem, 8vw, 7rem); }

/* Kickers / labels */
.kicker {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}
.kicker-emerald { color: var(--accent); }
.kicker-olive { color: var(--olive-text); }

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

/* Links with grow-underline hover */
.link-underline {
  position: relative;
  display: inline-block;
}
.link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
}
@media (prefers-reduced-motion: no-preference) {
  .link-underline::after { transition: transform 200ms ease-out; }
}
.link-underline:hover::after,
.link-underline:focus-visible::after {
  transform: scaleX(1);
}

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

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  background: var(--current);
  color: var(--paper);
  padding: 0.6rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  border-radius: var(--radius);
  z-index: 100;
}
@media (prefers-reduced-motion: no-preference) {
  .skip-link { transition: top 150ms ease-out; }
}
.skip-link:focus {
  top: 1rem;
}

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .btn {
    transition: background-color var(--dur-control) var(--ease),
                border-color var(--dur-control) var(--ease),
                color var(--dur-control) var(--ease),
                transform var(--dur-control) var(--ease);
  }
  .btn:hover, .btn:focus-visible { transform: translateY(-1px); }
}
.btn-primary {
  background: var(--accent);
  color: var(--btn-primary-text);
}
.btn-primary:hover {
  background: var(--text);
  color: var(--bg);
}
.btn-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border-interactive);
}
.btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ============================================================
   Header
   ============================================================ */

.site-header {
  background: var(--bg);
  border-bottom: 1px solid transparent;
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1rem;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: flex-start;
}
.brand-lockup {
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 0.15rem;
}
.brand-first {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--accent);
  padding-left: 0.15rem;
}
.brand-last-row {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.brand-last {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  color: var(--text);
}
.bracket {
  color: var(--accent);
  width: 9px;
  height: 26px;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .bracket-left { animation: bracketOpenLeft 170ms ease-out both; }
  .bracket-right { animation: bracketOpenRight 170ms ease-out both; }
}
@keyframes bracketOpenLeft {
  from { opacity: 0; transform: translateX(5px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes bracketOpenRight {
  from { opacity: 0; transform: translateX(-5px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Nav toggle (mobile) */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
}
.nav-toggle-bar {
  width: 20px;
  height: 2px;
  background: var(--text);
}
@media (prefers-reduced-motion: no-preference) {
  .nav-toggle-bar { transition: transform 150ms ease-out, opacity 150ms ease-out; }
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.primary-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.primary-nav ul {
  display: flex;
  gap: 1.75rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9375rem;
}
.primary-nav a {
  position: relative;
  padding-block: 0.25rem;
}
.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}
@media (prefers-reduced-motion: no-preference) {
  .primary-nav a::after { transition: transform 200ms ease-out; }
}
.primary-nav a:hover::after,
.primary-nav a:focus-visible::after,
.primary-nav a.is-active::after {
  transform: scaleX(1);
}
.primary-nav a.is-active { color: var(--accent); }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  background: none;
  border: 1px solid var(--border-interactive);
  border-radius: 50%;
  color: var(--text);
  cursor: pointer;
}
@media (prefers-reduced-motion: no-preference) {
  .theme-toggle { transition: border-color 150ms ease-out, color 150ms ease-out; }
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-icon { width: 18px; height: 18px; }
.theme-icon-moon { display: none; }
:root[data-theme="dark"] .theme-icon-sun { display: none; }
:root[data-theme="dark"] .theme-icon-moon { display: block; }

@media (max-width: 799px) {
  .primary-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem var(--gutter) 2rem;
    gap: 1.5rem;
    transform-origin: top;
    transform: scaleY(0);
    opacity: 0;
    pointer-events: none;
  }
  .primary-nav.is-open {
    transform: scaleY(1);
    opacity: 1;
    pointer-events: auto;
  }
  .primary-nav ul {
    flex-direction: column;
    gap: 1.25rem;
    font-size: 1.0625rem;
  }
}
@media (max-width: 799px) and (prefers-reduced-motion: no-preference) {
  .primary-nav { transition: transform 200ms ease-out, opacity 200ms ease-out; }
}
@media (min-width: 800px) {
  .nav-toggle { display: none; }
}

/* ============================================================
   Page-frame bracket (decorative, scroll-linked watermark)
   ============================================================ */

.page-bracket {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* Only shows once the viewport is wide enough that the container's own
   outer margin can fit the mark at its widest without ever reaching the
   1120px content column. */
@media (min-width: 1400px) and (prefers-reduced-motion: no-preference) {
  .page-bracket { display: block; }
}
.page-bracket-mark {
  position: absolute;
  top: 50%;
  width: 26px;
  height: min(56vh, 460px);
  color: var(--accent);
  opacity: 0.16;
  will-change: left, right;
}
.page-bracket-left { left: 32px; transform: translateY(-50%); }
.page-bracket-right { right: 32px; transform: translateY(-50%); }

/* ============================================================
   Reveal-on-scroll
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  [data-animate] {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 200ms ease-out, transform 200ms ease-out;
  }
  [data-animate].is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   Hero
   ============================================================ */

.hero { background: var(--bg); padding-top: clamp(4rem, 10vw, 8rem); }

/* Desktop: the scene provides the extra scroll distance the diagram's story
   plays out over; the sticky layer pins the existing hero content (unchanged,
   same padding as always, since it sits above this and is untouched) in
   place while that happens, then releases immediately once the scene ends.
   Mobile gets a different, lighter mode (.has-motion below): the diagram
   plays its sequence as it naturally passes through the viewport during
   ordinary scrolling, no pinning and no added scroll distance, since a long
   sticky section is exactly the "stuck" feeling to avoid on a small screen.
   All of this is a no-op (auto height, static position) unless JS has
   confirmed the relevant mode can run, so a no-JS visit or a reduced-motion
   visit never pays for dead scroll space or sees anything different. */
.hero-scene { position: relative; }
@media (min-width: 1000px) {
  .hero-scene.has-story { height: 200vh; }
}
.hero-sticky { position: static; }
@media (min-width: 1000px) {
  .hero-scene.has-story .hero-sticky {
    position: sticky;
    top: var(--header-height, 0px);
  }
}

.hero-grid {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  width: 100%;
}
@media (min-width: 1000px) {
  .hero-grid { grid-template-columns: minmax(0, 620px) minmax(260px, 340px); gap: 3rem; }
}

.hero-inner { max-width: 760px; }
.hero-lede {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.4vw + 0.8rem, 1.5rem);
  color: var(--text);
  margin-top: 1.5rem;
  line-height: 1.5;
}
.hero-proof {
  margin-top: 1.25rem;
  max-width: 620px;
  font-size: 0.9375rem;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
}

/* ============================================================
   Hero system diagram
   ============================================================ */

.hero-system {
  display: block;
  width: clamp(280px, 95%, 380px);
  margin-inline: auto;
}
@media (min-width: 1000px) {
  .hero-system { width: 100%; max-width: 100%; margin-inline: 0; }
}

.system-diagram {
  width: 100%;
  height: auto;
  overflow: visible;
}

.system-edge {
  fill: none;
  stroke: var(--border-interactive);
  stroke-width: 1;
  opacity: 0.45;
}
.system-edge.is-curved {
  opacity: 0.7;
  stroke-width: 1.4;
}

/* Each edge is a quadratic curve whose control point sits at the chord's midpoint
   (rendering as a straight line) until hovered, when it moves out to the point on
   the hexagon's circumscribed circle, so the edge bows into that circle's arc. If
   every edge does this at once, the hexagon becomes a circle. */
.system-edge-0 { d: path("M200,60 Q260.5,95 321,130"); }
.system-edge-1 { d: path("M321,130 Q321,200 321,270"); }
.system-edge-2 { d: path("M321,270 Q260.5,305 200,340"); }
.system-edge-3 { d: path("M200,340 Q139.5,305 79,270"); }
.system-edge-4 { d: path("M79,270 Q79,200 79,130"); }
.system-edge-5 { d: path("M79,130 Q139.5,95 200,60"); }

.system-edge-hit { fill: transparent; pointer-events: all; cursor: pointer; }
.system-edge-dot {
  fill: var(--accent);
  opacity: 0;
}
/* The verb sitting between two points. It never rotates to follow the edge, so it
   always reads left to right like ordinary text, whatever angle the line is at. */
.system-edge-label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  fill: var(--accent);
  opacity: 0;
  pointer-events: none;
}
.system-edge-hotspot:hover .system-edge-dot,
.system-edge-hotspot.is-active .system-edge-dot,
.system-edge-hotspot:hover .system-edge-label,
.system-edge-hotspot.is-active .system-edge-label {
  opacity: 1;
}

/* The centre point and its spokes are a hidden find, not a standing part of the
   diagram: nothing marks where they are until the cursor lands on the exact spot. */
.system-spoke {
  stroke: var(--accent);
  stroke-width: 1;
  opacity: 0;
}
.system-diagram.center-active .system-spoke {
  opacity: 0.75;
}

.system-edge-insight {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0.35;
}

/* A section currently in view (About or Connect the thought) gently pre-warms its
   related triangle, so the diagram already reflects context when you scroll back up. */
.system-diagram.scroll-hint-a .system-tri-a .system-edge-insight,
.system-diagram.scroll-hint-b .system-tri-b .system-edge-insight {
  opacity: 0.6;
}

.system-diagram.group-a-active .system-tri-a .system-edge-insight,
.system-diagram.group-b-active .system-tri-b .system-edge-insight {
  opacity: 0.9;
  stroke-width: 2;
}

.system-node { cursor: pointer; }
.system-node:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}
.system-node-hit { fill: transparent; pointer-events: all; }
.system-node-dot {
  fill: var(--bg);
  stroke: var(--border-interactive);
  stroke-width: 1.5;
  transform-origin: center;
  transform-box: fill-box;
}
.system-node text {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  fill: var(--text-secondary);
}
@media (max-width: 480px) {
  .system-node text { font-size: 12px; }
  .system-edge-label { font-size: 14px; }
}

.system-diagram.scroll-hint-a .system-node[data-group="a"] .system-node-dot,
.system-diagram.scroll-hint-b .system-node[data-group="b"] .system-node-dot {
  stroke: var(--accent);
}

.system-diagram.group-a-active .system-node[data-group="a"] .system-node-dot,
.system-diagram.group-b-active .system-node[data-group="b"] .system-node-dot {
  fill: var(--accent);
  stroke: var(--accent);
  transform: scale(1.35);
}
.system-diagram.group-a-active .system-node[data-group="b"] .system-node-dot,
.system-diagram.group-b-active .system-node[data-group="a"] .system-node-dot {
  opacity: 0.4;
}

/* Selecting a node (tap or keyboard) brightens the two ring edges that
   actually touch it and quietly dims the rest, without hiding them, so the
   diagram still reads as one connected shape rather than an isolated point. */
.system-edge.is-tap-selected {
  stroke: var(--accent);
  opacity: 1;
  stroke-width: 1.8;
}
.system-edge.is-tap-dimmed { opacity: 0.2; }

.system-node-center { opacity: 0; }
.system-diagram.center-active .system-node-center { opacity: 1; }
.system-diagram.center-active .system-node-center .system-node-dot {
  fill: var(--accent);
  stroke: var(--accent);
  transform: scale(1.35);
}

.system-caption {
  margin-top: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 30ch;
  min-height: 3.75rem;
}
@media (prefers-reduced-motion: no-preference) {
  .system-caption {
    transition: opacity 220ms var(--ease), transform 220ms var(--ease);
  }
  .system-caption.is-swapping {
    opacity: 0;
    transform: translateY(6px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .system-edge-insight {
    stroke-dasharray: 250;
    stroke-dashoffset: 250;
    transition: stroke-dashoffset var(--dur-map) var(--ease),
                opacity var(--dur-card) var(--ease),
                stroke-width var(--dur-card) var(--ease);
  }
  .hero-system.is-visible .system-edge-insight { stroke-dashoffset: 0; }
  .system-node-dot {
    transition: transform var(--dur-card) var(--ease),
                fill var(--dur-card) var(--ease),
                stroke var(--dur-card) var(--ease),
                opacity var(--dur-card) var(--ease);
  }
  .system-node-dot.is-popping { animation: systemNodePop var(--dur-card) var(--ease) both; }

  .system-edge {
    transition: d var(--dur-card) var(--ease),
                opacity var(--dur-control) var(--ease),
                stroke-width var(--dur-control) var(--ease);
  }
  .system-edge-0.is-curved, .system-diagram.center-active .system-edge-0 { d: path("M200,60 Q279.38,62.5 321,130"); }
  .system-edge-1.is-curved, .system-diagram.center-active .system-edge-1 { d: path("M321,130 Q358.76,200 321,270"); }
  .system-edge-2.is-curved, .system-diagram.center-active .system-edge-2 { d: path("M321,270 Q279.38,337.5 200,340"); }
  .system-edge-3.is-curved, .system-diagram.center-active .system-edge-3 { d: path("M200,340 Q120.62,337.5 79,270"); }
  .system-edge-4.is-curved, .system-diagram.center-active .system-edge-4 { d: path("M79,270 Q41.24,200 79,130"); }
  .system-edge-5.is-curved, .system-diagram.center-active .system-edge-5 { d: path("M79,130 Q120.62,62.5 200,60"); }

  /* Hitting the hidden centre point moves all six edges at once. The 260ms tuned
     for one hovered edge reads as an abrupt snap when six move together, so this
     specific gesture gets a slower, lightly staggered pace instead. */
  .system-diagram.center-active .system-edge-0 { transition: d 460ms var(--ease) 0ms, opacity var(--dur-control) var(--ease), stroke-width var(--dur-control) var(--ease); }
  .system-diagram.center-active .system-edge-1 { transition: d 460ms var(--ease) 30ms, opacity var(--dur-control) var(--ease), stroke-width var(--dur-control) var(--ease); }
  .system-diagram.center-active .system-edge-2 { transition: d 460ms var(--ease) 60ms, opacity var(--dur-control) var(--ease), stroke-width var(--dur-control) var(--ease); }
  .system-diagram.center-active .system-edge-3 { transition: d 460ms var(--ease) 90ms, opacity var(--dur-control) var(--ease), stroke-width var(--dur-control) var(--ease); }
  .system-diagram.center-active .system-edge-4 { transition: d 460ms var(--ease) 120ms, opacity var(--dur-control) var(--ease), stroke-width var(--dur-control) var(--ease); }
  .system-diagram.center-active .system-edge-5 { transition: d 460ms var(--ease) 150ms, opacity var(--dur-control) var(--ease), stroke-width var(--dur-control) var(--ease); }

  .system-edge-dot,
  .system-edge-label { transition: opacity var(--dur-control) var(--ease); }
  .system-spoke { transition: opacity 420ms var(--ease); }
  .system-node-center { transition: opacity 420ms var(--ease); }
}
@keyframes systemNodePop {
  0% { transform: scale(1); }
  55% { transform: scale(1.55); }
  100% { transform: scale(1.35); }
}

/* ============================================================
   Hero diagram scroll story
   A relationship at a time activates as the scene scrolls, settles to a
   quieter "visited" look once passed, then the final segment brightens both
   diagonal triangles together. Driven entirely by scroll progress in
   main.js; every property here is opacity/stroke/transform so nothing forces
   layout. Colour is never the only signal: stroke-width and dot fill/scale
   change alongside it too.
   ============================================================ */

.system-edge.is-story-visited {
  stroke: var(--accent);
  opacity: 0.7;
  stroke-width: 1.3;
}
.system-edge.is-story-active {
  stroke: var(--accent);
  opacity: 1;
  stroke-width: 1.8;
}

.system-edge-hotspot.is-story-visited .system-edge-label { opacity: 0.55; }
.system-edge-hotspot.is-story-active .system-edge-dot,
.system-edge-hotspot.is-story-active .system-edge-label { opacity: 1; }

.system-node.is-story-visited .system-node-dot {
  fill: var(--accent);
  stroke: var(--accent);
}
.system-node.is-story-active .system-node-dot {
  fill: var(--accent);
  stroke: var(--accent);
  transform: scale(1.08);
}

.system-tri.is-story-final .system-edge-insight {
  opacity: 0.95;
  stroke-width: 2;
}

@media (prefers-reduced-motion: no-preference) {
  .system-edge.is-story-visited,
  .system-edge.is-story-active,
  .system-edge.is-tap-selected,
  .system-edge.is-tap-dimmed {
    transition: stroke var(--dur-control) var(--ease),
                opacity var(--dur-control) var(--ease),
                stroke-width var(--dur-control) var(--ease);
  }
  .system-edge-hotspot .system-edge-dot,
  .system-edge-hotspot .system-edge-label {
    transition: opacity var(--dur-control) var(--ease);
  }
  .system-node.is-story-visited .system-node-dot,
  .system-node.is-story-active .system-node-dot {
    transition: transform var(--dur-card) var(--ease),
                fill var(--dur-control) var(--ease),
                stroke var(--dur-control) var(--ease);
  }
  .system-tri .system-edge-insight {
    transition: opacity var(--dur-card) var(--ease),
                stroke-width var(--dur-card) var(--ease);
  }
}

/* ============================================================
   What are you trying to improve?
   ============================================================ */

.improve { background: var(--bg); }

.improve-widget {
  display: grid;
  gap: 2rem;
  max-width: 780px;
}

.improve-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.improve-option {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.7rem 1.25rem;
  border-radius: 999px;
  border: 1px solid var(--border-interactive);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
@media (prefers-reduced-motion: no-preference) {
  .improve-option {
    transition: background-color var(--dur-control) var(--ease),
                border-color var(--dur-control) var(--ease),
                color var(--dur-control) var(--ease);
  }
}
.improve-option:hover { border-color: var(--accent); color: var(--accent); }
.improve-option[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--btn-primary-text);
}

.improve-response {
  min-height: 6rem;
  border-left: 2px solid var(--border);
  padding-left: 1.5rem;
}
.improve-placeholder {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--text-secondary);
}
.improve-answer p {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--text);
  max-width: 62ch;
}
.improve-link {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--accent);
}

@media (prefers-reduced-motion: no-preference) {
  .improve-answer:not([hidden]) {
    animation: improveIn var(--dur-card) var(--ease) both;
  }
}
@keyframes improveIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   About
   ============================================================ */

.about { background: var(--surface); }

.about-inner {
  display: grid;
  gap: 3rem;
  align-items: start;
}
@media (min-width: 800px) {
  .about-inner { grid-template-columns: 0.85fr 1.15fr; gap: 4rem; }
}

.portrait-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--text-secondary);
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.portrait-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(7px) saturate(0.9);
  transform: scale(1.08);
}

@media (prefers-reduced-motion: no-preference) {
  .portrait-photo {
    transition: filter var(--dur-section) var(--ease), opacity var(--dur-map) var(--ease), transform 200ms ease-out;
  }
  .about-media:not(.is-visible) .portrait-photo {
    filter: blur(22px) saturate(0.8);
    opacity: 0.5;
  }
}

.portrait-frame:hover .portrait-photo,
.portrait-frame:focus-visible .portrait-photo,
.portrait-frame.is-focused .portrait-photo {
  filter: blur(2.5px) saturate(1.05);
}

.portrait-caption {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  max-width: calc(100% - 3rem);
  padding: 0.55rem 1rem;
  border-radius: var(--radius);
  background: rgba(16, 42, 42, 0.72);
  color: var(--paper);
}
.portrait-caption-active { display: none; }
.portrait-frame:hover .portrait-caption-default,
.portrait-frame:focus-visible .portrait-caption-default,
.portrait-frame.is-focused .portrait-caption-default {
  display: none;
}
.portrait-frame:hover .portrait-caption-active,
.portrait-frame:focus-visible .portrait-caption-active,
.portrait-frame.is-focused .portrait-caption-active {
  display: block;
}

.portrait-bracket {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 0 solid var(--accent);
  pointer-events: none;
}
.portrait-bracket-tl { top: 16px; left: 16px; border-top-width: 2px; border-left-width: 2px; }
.portrait-bracket-tr { top: 16px; right: 16px; border-top-width: 2px; border-right-width: 2px; }
.portrait-bracket-bl { bottom: 16px; left: 16px; border-bottom-width: 2px; border-left-width: 2px; }
.portrait-bracket-br { bottom: 16px; right: 16px; border-bottom-width: 2px; border-right-width: 2px; }

@media (prefers-reduced-motion: no-preference) {
  .portrait-bracket { transition: transform 280ms ease-out, opacity 280ms ease-out, width 280ms ease-out, height 280ms ease-out; }

  /* Entrance only: brackets sit slightly further out and faint until the
     portrait scrolls into view, then draw inward to their resting corners,
     like a frame settling into place. Independent of (and finishes well
     before) the hover interaction, which pulls them in further still. */
  .about-media:not(.is-visible) .portrait-bracket { opacity: 0.4; }
  .about-media:not(.is-visible) .portrait-bracket-tl { transform: translate(-5px, -5px); }
  .about-media:not(.is-visible) .portrait-bracket-tr { transform: translate(5px, -5px); }
  .about-media:not(.is-visible) .portrait-bracket-bl { transform: translate(-5px, 5px); }
  .about-media:not(.is-visible) .portrait-bracket-br { transform: translate(5px, 5px); }
}
.portrait-frame:hover .portrait-bracket,
.portrait-frame:focus-visible .portrait-bracket,
.portrait-frame.is-focused .portrait-bracket {
  width: 18px;
  height: 18px;
}
.portrait-frame:hover .portrait-bracket-tl,
.portrait-frame:focus-visible .portrait-bracket-tl,
.portrait-frame.is-focused .portrait-bracket-tl { transform: translate(8px, 8px); }
.portrait-frame:hover .portrait-bracket-tr,
.portrait-frame:focus-visible .portrait-bracket-tr,
.portrait-frame.is-focused .portrait-bracket-tr { transform: translate(-8px, 8px); }
.portrait-frame:hover .portrait-bracket-bl,
.portrait-frame:focus-visible .portrait-bracket-bl,
.portrait-frame.is-focused .portrait-bracket-bl { transform: translate(8px, -8px); }
.portrait-frame:hover .portrait-bracket-br,
.portrait-frame:focus-visible .portrait-bracket-br,
.portrait-frame.is-focused .portrait-bracket-br { transform: translate(-8px, -8px); }

.about-copy > * + * { margin-top: 1.25rem; }
.about-copy p { max-width: 60ch; }
@media (min-width: 800px) {
  .about-copy { align-self: center; }
}

/* Portrait entrance: a slightly closer crop settling to true size as it
   scrolls into view, on top of the generic [data-animate] fade/rise already
   applied to both elements. The name/role copy follows a beat behind via
   transition-delay, a stagger with no extra JS. Both pieces are still driven
   entirely by the shared [data-animate] IntersectionObserver, so this is a
   no-op under reduced motion (nothing here overrides the base, motion-free
   state) and needs no separate JS to reverse when scrolling back up. */
@media (prefers-reduced-motion: no-preference) {
  .about-media[data-animate] {
    transform: translateY(10px) scale(1.035);
    transition: opacity 260ms ease-out, transform 420ms ease-out;
  }
  .about-media[data-animate].is-visible { transform: translateY(0) scale(1); }

  .about-copy[data-animate] { transition-delay: 90ms; }
}

/* ---- How I think ---- */

.how-i-think {
  margin-top: 3.5rem;
  padding-top: 3rem;
  border-top: 1px solid var(--border);
}
.how-i-think-heading { margin-top: 0.5rem; font-size: clamp(1.25rem, 1.2vw + 1rem, 1.625rem); }

.process-list {
  list-style: none;
  margin-top: 2rem;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  max-width: 780px;
}

.process-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.process-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.25rem;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
}
.process-index {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent);
  letter-spacing: 0.05em;
}
.process-trigger:hover .process-name,
.process-trigger:focus-visible .process-name { color: var(--accent); }
.process-chevron { margin-left: auto; width: 14px; height: 14px; color: var(--text-secondary); flex-shrink: 0; }
.process-trigger[aria-expanded="true"] .process-chevron { transform: rotate(180deg); }

.process-detail { padding: 0 1.25rem 1.25rem 3.05rem; }
.process-detail p { max-width: 58ch; }
.process-example {
  margin-top: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--olive-text);
}

.process-trigger[aria-expanded="false"] + .process-detail { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .process-chevron { transition: transform var(--dur-control) var(--ease); }
  .process-trigger[aria-expanded="true"] + .process-detail {
    animation: improveIn var(--dur-card) var(--ease) both;
  }
}

/* ============================================================
   Connect the thought
   ============================================================ */

.connect { background: var(--surface); }

.connect-widget { max-width: 780px; }

.connect-chips {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .connect-chips { grid-template-columns: 1fr 1fr; }
}

/* A grid item stretches to match the tallest item in its row by default, so
   equal card height falls out of the grid itself; the column layout below
   just keeps the heading and sentence from centring oddly inside the extra
   space instead of stacking from the top. */
.connect-chip {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: left;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border-interactive);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.4;
  cursor: pointer;
}
.connect-chip-heading {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.connect-chip-body { line-height: 1.4; }
@media (prefers-reduced-motion: no-preference) {
  .connect-chip {
    transition: border-color var(--dur-control) var(--ease),
                background-color var(--dur-control) var(--ease),
                color var(--dur-control) var(--ease);
  }
}
.connect-chip:hover { border-color: var(--accent); }
.connect-chip[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--btn-primary-text);
}
.connect-chip[aria-pressed="true"] .connect-chip-heading {
  color: var(--btn-primary-text);
  opacity: 0.8;
}

.connect-result {
  margin-top: 2rem;
  min-height: 4rem;
  border-left: 2px solid var(--border);
  padding-left: 1.5rem;
}
.connect-hint {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--text-secondary);
}
.connect-insight {
  font-family: var(--font-display);
  font-size: 1.125rem;
  color: var(--text);
  max-width: 62ch;
}
@media (prefers-reduced-motion: no-preference) {
  .connect-insight.is-active {
    animation: improveIn var(--dur-section) var(--ease) both;
  }
}

/* ============================================================
   Selected work
   ============================================================ */

.work { background: var(--bg); }

.section-intro { max-width: 640px; margin-bottom: 3rem; }
.section-lede { margin-top: 0.5rem; font-family: var(--font-display); font-size: 1.125rem; color: var(--text); }

.case-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 800px) {
  .case-grid { grid-template-columns: repeat(2, 1fr); }
}

.case-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  position: relative;
}
.case-card h3 { margin: 0; }
.case-card:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}
.case-card.is-highlighted {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
@media (prefers-reduced-motion: no-preference) {
  .case-card {
    transition: transform var(--dur-card) var(--ease),
                border-color var(--dur-section) var(--ease),
                box-shadow var(--dur-section) var(--ease);
  }
  .case-card:hover { transform: translateY(-3px); border-color: var(--border-strong); }
}

.case-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.25rem;
  margin-bottom: 0.85rem;
}
.case-logo-wrap {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  border-radius: 3px;
}
.case-logo {
  display: block;
  height: 26px;
  width: auto;
}
/* The mark's darkest tones read at ~1.4:1 against the dark page background,
   nearly invisible, so give it a Warm Paper backing in dark mode only. */
:root[data-theme="dark"] .case-logo-wrap {
  background: var(--paper);
  padding: 0.25rem 0.35rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .case-logo-wrap {
    background: var(--paper);
    padding: 0.25rem 0.35rem;
  }
}

.teaser-issue { font-size: 0.9375rem; margin-bottom: 0.85rem; }

.teaser-stat {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}
.teaser-stat a { color: var(--accent); }

.teaser-blur {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
  filter: blur(2.5px);
}
.teaser-blur span {
  display: block;
  height: 0.7rem;
  border-radius: 3px;
  background: var(--border-strong);
}
.teaser-blur span:nth-child(1) { width: 92%; }
.teaser-blur span:nth-child(2) { width: 78%; }
.teaser-blur span:nth-child(3) { width: 85%; }

.teaser-reveal {
  position: relative;
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--accent);
  cursor: pointer;
}
.teaser-reveal::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
}
@media (prefers-reduced-motion: no-preference) {
  .teaser-reveal::after { transition: transform 200ms ease-out; }
}
.teaser-reveal:hover::after,
.teaser-reveal:focus-visible::after { transform: scaleX(1); }

.teaser-waitlist-heading {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 0.5rem;
}
.teaser-waitlist p { font-size: 0.9375rem; margin: 0 0 1rem; }

.waitlist-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}
.waitlist-form input[type="email"],
.waitlist-form input[type="text"] {
  width: 100%;
  min-width: 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border-interactive);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.9375rem;
}
.waitlist-form input[type="email"]:focus-visible,
.waitlist-form input[type="text"]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.waitlist-form .btn {
  flex-shrink: 0;
  padding: 0.7rem 1.25rem;
  font-size: 0.875rem;
}
.waitlist-privacy {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
}

.waitlist-success,
.waitlist-error {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  margin-top: 0.85rem;
}
.waitlist-success { color: var(--accent); }
.waitlist-error { color: var(--clay-text); }

/* ============================================================
   Writing
   ============================================================ */

.writing { background: var(--surface); }

.now-block {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  padding: 1.75rem 2rem;
  max-width: 640px;
  margin-bottom: 2rem;
}
.now-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.now-header .kicker { margin-bottom: 0; }
.now-live { display: inline-flex; align-items: center; }

.now-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.now-live .now-dot { margin-right: 0.55rem; }
.now-dot-emerald { background: var(--accent); }
.now-dot-gold { background: var(--gold); }
.now-dot-olive { background: var(--olive-text); }

.now-list { display: grid; gap: 1.1rem; }
.now-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}
.now-item .now-dot { margin-top: 0.55rem; }
.now-item dt {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--olive-text);
  margin-bottom: 0.25rem;
}
.now-item dd {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.writing-empty {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 2.5rem;
  max-width: 640px;
}
.writing-empty p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.0625rem;
}

/* Article discovery: one wide, editorial card per entry. Stacks vertically as more
   are published, so the layout scales without ever leaving an awkward empty column. */
.writing-list {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}
.writing-card {
  position: relative;
  max-width: 780px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2.25rem;
}
.writing-card.is-highlighted {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
@media (prefers-reduced-motion: no-preference) {
  .writing-card {
    transition: transform var(--dur-card) var(--ease),
                border-color var(--dur-section) var(--ease),
                box-shadow var(--dur-section) var(--ease);
  }
  .writing-card:hover { transform: translateY(-3px); border-color: var(--border-strong); }
}
@media (min-width: 640px) {
  .writing-card { padding: 2.75rem 3rem; }
}

.writing-card-flag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  margin-bottom: 1.35rem;
}
.writing-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-bottom: 0.9rem;
}
.writing-card-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

.writing-card-title { margin: 0 0 0.9rem; }
.writing-card-title a { color: var(--text); }
.writing-card-title a:hover, .writing-card-title a:focus-visible { color: var(--accent); }

.writing-card-excerpt { max-width: 62ch; margin-bottom: 1.5rem; }
.writing-card-cta {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--accent);
}

/* ============================================================
   Share your pain
   ============================================================ */

.pain { background: var(--bg); }

.pain-widget {
  max-width: 640px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 2rem;
  scroll-margin-top: 5rem;
}
.pain-widget.is-highlighted {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
@media (prefers-reduced-motion: no-preference) {
  .pain-widget {
    transition: border-color var(--dur-section) var(--ease), box-shadow var(--dur-section) var(--ease);
  }
}

.pain-textarea {
  width: 100%;
  display: block;
  resize: none;
  overflow: hidden;
  min-height: 6.75rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border-interactive);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.pain-textarea::placeholder { color: var(--text-secondary); opacity: 0.75; }
.pain-textarea:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.pain-hint {
  margin-top: 0.6rem;
  min-height: 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--olive-text);
}

.pain-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.1rem;
}
.pain-tag span {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border-interactive);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.pain-tag:hover span { border-color: var(--accent); color: var(--accent); }
.pain-tag-input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--btn-primary-text);
}
.pain-tag-input:focus-visible + span {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  .pain-tag span {
    transition: background-color var(--dur-control) var(--ease),
                border-color var(--dur-control) var(--ease),
                color var(--dur-control) var(--ease);
  }
}

.pain-reply {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.pain-reply-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--text);
  cursor: pointer;
}
.pain-reply-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--border-interactive);
  border-radius: 4px;
  color: var(--white);
  flex-shrink: 0;
}
.pain-reply-box svg { width: 12px; height: 12px; }
.pain-reply-box svg path { stroke-dasharray: 14; stroke-dashoffset: 14; }
.pain-reply-input:checked + .pain-reply-box {
  background: var(--accent);
  border-color: var(--accent);
}
.pain-reply-input:checked + .pain-reply-box svg path { stroke-dashoffset: 0; }
.pain-reply-input:focus-visible + .pain-reply-box {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  .pain-reply-box { transition: background-color var(--dur-control) var(--ease), border-color var(--dur-control) var(--ease); }
  .pain-reply-box svg path { transition: stroke-dashoffset var(--dur-control) var(--ease); }
}

.pain-email-field { flex: 1 1 220px; min-width: 0; }
.pain-email-field input {
  width: 100%;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--border-interactive);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.9375rem;
}
.pain-email-field input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .pain-email-field:not([hidden]) { animation: improveIn var(--dur-card) var(--ease) both; }
}

.pain-submit { margin-top: 1.75rem; }
.pain-submit:disabled { opacity: 0.45; cursor: not-allowed; }

.pain-success,
.pain-error {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  margin-top: 0.5rem;
}
.pain-success { color: var(--accent); }
.pain-error { color: var(--clay-text); }

/* ============================================================
   Contact
   ============================================================ */

.contact { background: var(--bg); }
.contact-inner { max-width: 640px; }
.contact-lede { margin-top: 1.25rem; font-size: 1rem; max-width: 56ch; }

.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

.contact-noscript {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

/* ============================================================
   Footer
   ============================================================ */

.site-footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
}

.footer-inner {
  padding-block: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.bracket-symbol { width: 22px; height: 22px; color: var(--accent); }

.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
}
.footer-nav a { display: inline-block; }

.footer-meta { text-align: right; }
.footer-meta .kicker { margin-bottom: 0.35rem; }
.footer-copyright {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-secondary);
}

@media (max-width: 640px) {
  .footer-inner { flex-direction: column; align-items: flex-start; text-align: left; }
  .footer-meta { text-align: left; }
}

/* ============================================================
   Article (dedicated reading page)
   ============================================================ */

.reading-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 60;
  background: transparent;
}
.reading-progress-bar {
  height: 100%;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}

.article { background: var(--bg); }
.article-container { max-width: 900px; padding-block: 2rem 5rem; }

.article-header .kicker a { color: inherit; }
.article-title { margin-top: 0.5rem; }
.article-subtitle {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.125rem, 1vw + 1rem, 1.375rem);
  color: var(--text);
  max-width: 60ch;
}
.article-meta {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--text-secondary);
}
.article-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

@media (prefers-reduced-motion: no-preference) {
  .article-header { animation: articleFadeIn var(--dur-section) var(--ease) both; }
}
@keyframes articleFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.article-layout { margin-top: 3rem; }
.article-toc { display: none; }
@media (min-width: 1200px) {
  .article-layout {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 3.5rem;
    align-items: start;
  }
  .article-toc {
    display: block;
    position: sticky;
    top: 6rem;
  }
}
.article-toc-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}
.article-toc ul { display: grid; gap: 0.65rem; }
.article-toc a {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--text-secondary);
  border-left: 2px solid var(--border);
  padding-left: 0.75rem;
}
.article-toc a:hover, .article-toc a:focus-visible { color: var(--text); }
.article-toc a.is-active { color: var(--accent); border-color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .article-toc a { transition: color var(--dur-control) var(--ease), border-color var(--dur-control) var(--ease); }
}

.article-body > * + * { margin-top: 1.5rem; }
.article-body p {
  max-width: 70ch;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--text-secondary);
}
.article-body h2 {
  margin-top: 3rem;
  font-size: clamp(1.375rem, 1.2vw + 1rem, 1.75rem);
}
.article-body > h2:first-child { margin-top: 0; }
.article-body strong { color: var(--text); font-weight: 700; }
.article-body a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--border-interactive);
  text-underline-offset: 3px;
}
.article-body a:hover, .article-body a:focus-visible { text-decoration-color: currentColor; }

.article-body ul, .article-body ol {
  max-width: 70ch;
  padding-left: 1.35rem;
  display: grid;
  gap: 0.75rem;
}
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-secondary);
  padding-left: 0.3rem;
}

/* Tables are deliberately not capped at the 70ch prose width: they get the full
   width of the article column, which is usually enough to avoid scrolling on
   desktop entirely. Headers wrap rather than forcing every column to its widest
   cell, so the table reads as a normal table instead of a cramped strip. */
.article-table-caption {
  margin-bottom: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}
.article-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  -webkit-overflow-scrolling: touch;
}
.article-table-wrap:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.article-table {
  width: 100%;
  min-width: 580px;
  border-collapse: collapse;
  background: var(--surface);
  font-size: 0.9375rem;
}
.article-table th, .article-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.article-table thead th {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  vertical-align: bottom;
  border-bottom: 1px solid var(--border-strong);
}
.article-table tbody tr:last-child th,
.article-table tbody tr:last-child td { border-bottom: none; }
.article-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.article-table tbody th {
  font-weight: 600;
  color: var(--text);
  text-align: left;
}
.article-table-hint {
  margin-top: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-secondary);
  display: none;
}

/* Below 640px there's no room for a real table, so rows become stacked
   cards instead: each <td> turns into a label/value pair using its
   data-label attribute, and the row's <th scope="row"> becomes the card's
   heading. The <thead> stays in the DOM (visually hidden, not display:none)
   so screen readers can still announce proper column headers per cell. */
@media (max-width: 640px) {
  .article-table-hint { display: none; }
  .article-table-wrap { overflow-x: visible; }
  .article-table {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .article-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .article-table tbody { display: block; width: 100%; }
  .article-table tbody tr {
    display: block;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--border);
  }
  .article-table tbody tr:last-child { border-bottom: none; }
  .article-table th, .article-table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.3rem 0;
    border-bottom: none;
    text-align: right;
  }
  .article-table tbody th {
    display: block;
    text-align: left;
    padding-bottom: 0.4rem;
  }
  .article-table td[data-label]::before {
    content: attr(data-label);
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    text-align: left;
  }
  .article-table .num { text-align: right; }
}

/* The four nested populations from the table above, redrawn as four
   same-size bars. Each bar's fill is the 12 cancellations' share of that
   row's own population, i.e. the same four percentages from the table.
   Every number is also present as real text in .funnel-figures, so nothing
   here depends on the bars rendering or on colour to be understood. */
.article-funnel {
  padding: 1.25rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.funnel-list {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.funnel-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.funnel-name {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.funnel-track {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}
.funnel-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px 0 0 999px;
}
.funnel-figures {
  font-size: 0.875rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
/* Fill colour scales with the percentage, using the brand's existing warm-to-cool
   range (emerald to clay) rather than a new hue, so a low share reads as
   understated and a high share reads as more attention-grabbing. This is a
   reading aid only, not a judgement: the article itself argues none of these
   four numbers is more "correct" than the others. */
.funnel-row-base .funnel-fill { width: 10%; background: var(--accent); }
.funnel-row-exposed .funnel-fill { width: 40%; background: var(--olive-text); }
.funnel-row-outcomes .funnel-fill { width: 60%; background: var(--gold); }
.funnel-row-responses .funnel-fill { width: 80%; background: var(--clay-text); }

/* ============================================================
   Article reader feedback
   ============================================================ */

.feedback { margin-top: 3.5rem; }
.feedback-widget {
  max-width: 640px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
  background: var(--surface);
}
.feedback-widget h2 { margin-top: 0.5rem; font-size: clamp(1.25rem, 1.2vw + 1rem, 1.625rem); }
.feedback-form { margin-top: 1.5rem; }

.feedback-rating { border: none; padding: 0; margin: 0 0 1.25rem; }
.feedback-rating-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.feedback-rating-option { cursor: pointer; }
.feedback-rating-option span {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border-interactive);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
}
.feedback-rating-option:hover span { border-color: var(--accent); color: var(--accent); }
.feedback-rating-input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--btn-primary-text);
}
.feedback-rating-input:focus-visible + span {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.feedback-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  margin-bottom: 0.4rem;
}

.feedback-textarea,
.feedback-row input[type="text"],
.feedback-row input[type="email"] {
  width: 100%;
  display: block;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border-interactive);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  resize: vertical;
}
.feedback-textarea::placeholder,
.feedback-row input::placeholder { color: var(--text-secondary); opacity: 0.75; }
.feedback-textarea:focus-visible,
.feedback-row input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.feedback-hint {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.feedback-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1.25rem;
}
@media (min-width: 480px) {
  .feedback-row { grid-template-columns: 1fr 1fr; }
}

.feedback-quote-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.25rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--text);
  cursor: pointer;
}
.feedback-quote-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--border-interactive);
  border-radius: 4px;
  color: var(--white);
  flex-shrink: 0;
}
.feedback-quote-box svg { width: 12px; height: 12px; }
.feedback-quote-box svg path { stroke-dasharray: 14; stroke-dashoffset: 14; }
.feedback-quote-input:checked + .feedback-quote-box {
  background: var(--accent);
  border-color: var(--accent);
}
.feedback-quote-input:checked + .feedback-quote-box svg path { stroke-dashoffset: 0; }
.feedback-quote-input:focus-visible + .feedback-quote-box {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  .feedback-rating-option span,
  .feedback-quote-box {
    transition: background-color var(--dur-control) var(--ease), border-color var(--dur-control) var(--ease), color var(--dur-control) var(--ease);
  }
  .feedback-quote-box svg path { transition: stroke-dashoffset var(--dur-control) var(--ease); }
}

.feedback-privacy {
  margin-top: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 46ch;
}

.feedback-form .btn { margin-top: 1.25rem; }

.feedback-success,
.feedback-error {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  margin-top: 1rem;
}
.feedback-success { color: var(--accent); }
.feedback-error { color: var(--clay-text); }

.article-end {
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
  text-align: center;
}
.article-end-mark { width: 26px; height: 26px; color: var(--accent); margin-inline: auto; margin-bottom: 1.5rem; }
.article-end-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}