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

:root {
  /* Palette: exact tokens, do not introduce new hues */
  --white: #FFFFFF;
  --paper: #F4F0E8;
  --current: #102A2A;
  --current-rgb: 16, 42, 42;
  --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;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 44px; height: 44px;
  background: none;
  border: none;
  padding: 0;
  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: 44px; height: 44px;
  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; }
/* Light mode: show moon (click to go dark). Dark mode: show sun (click to go light). */
.theme-icon-sun { display: none; }
.theme-icon-moon { display: block; }
:root[data-theme="dark"] .theme-icon-sun { display: block; }
:root[data-theme="dark"] .theme-icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-icon-moon { display: none; }
}

@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); }

/* The diagram plays its automated sequence in place, wherever it naturally
   falls in normal document flow: no pinning, no added scroll height, on any
   breakpoint. Scrolling past it is never slowed or intercepted. */
.hero-scene { position: relative; }
.hero-sticky { position: static; }

.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(260px, 88%, 340px);
  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;
}
/* The centre is the "show everything" find: every ring edge's verb and
   both diagonal triangles brighten together, so the whole web of
   relationships reads at once instead of one at a time. */
.system-diagram.center-active .system-edge-hotspot .system-edge-dot,
.system-diagram.center-active .system-edge-hotspot .system-edge-label {
  opacity: 1;
}
.system-diagram.center-active .system-tri .system-edge-insight {
  opacity: 0.9;
  stroke-width: 2;
}

.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);
}

.story-carousel {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.25rem;
}
.system-caption {
  flex: 1;
  min-width: 0;
  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);
  }
}

/* Carousel controls: step the diagram's relationships back or forward,
   pausing the automatic pace for a few seconds rather than fighting it. A
   swipe on the diagram itself does the same thing. Deliberately
   camouflaged at rest, almost part of the page, rather than announcing
   itself as a button; a glassy blur and the accent colour only surface on
   hover or keyboard focus, so finding it feels like a small discovery.
   Hidden entirely (not just inert) when the carousel never runs in the
   first place, i.e. under prefers-reduced-motion. */
.story-nav {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--text-secondary);
  opacity: 0.28;
  cursor: pointer;
}
@media (prefers-reduced-motion: no-preference) {
  .story-nav {
    display: inline-flex;
    transition: opacity 220ms ease-out, background-color 220ms ease-out,
                border-color 220ms ease-out, color 220ms ease-out,
                backdrop-filter 220ms ease-out;
  }
  .story-nav:hover,
  .story-nav:focus-visible {
    opacity: 1;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-color: var(--border-interactive);
    color: var(--accent);
  }
}
.story-nav:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.story-nav-icon { width: 16px; height: 16px; }

@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 autoplay
   The automated cycle in main.js works entirely by adding/removing these
   classes on a fixed timer, never by reading scroll position. is-story-*
   are the settled "structure" and "whole system" stages; is-cycle-* are the
   two stages with their own motion (parts easing in, relationships lighting
   up one at a time). 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: 3.6;
}

.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;
}

/* Stage 2, "the six parts": each node eases from a touch smaller and
   muted to its normal size and full opacity, staggered per node via
   animation-delay set in JS rather than six separate CSS rules. */
@media (prefers-reduced-motion: no-preference) {
  .system-node.is-cycle-intro .system-node-dot {
    animation: systemNodeIntro var(--dur-card) var(--ease) both;
  }
  .system-node.is-cycle-intro text {
    animation: systemLabelIntro var(--dur-card) var(--ease) both;
  }
}
@keyframes systemNodeIntro {
  0% { transform: scale(0.96); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes systemLabelIntro {
  0% { opacity: 0.55; }
  100% { opacity: 1; }
}

/* Stage 4, "the less obvious relationships": each diagonal segment
   brightens in turn, ahead of the calmer, uniform is-story-final look
   stage 5 settles into across both triangles at once. */
.system-edge-insight.is-cycle-glow {
  opacity: 0.85;
  stroke-width: 1.9;
}
.system-edge-insight.is-story-active {
  opacity: 1;
  stroke-width: 4.8;
}

@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;
  /* The real, permanent blur already lives in the image file itself (baked
     in for privacy); this filter is a light layer on top for the resting
     vs. focused effect below, not a second full blur pass. */
  filter: blur(1.17px) saturate(0.95);
  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(10.53px) 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(0px) 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(var(--current-rgb), 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; }
}

/* Portrait resting motion: a barely-there breathing drift once the entrance
   above has settled, applied to the frame rather than .portrait-photo so it
   never competes with that element's own pointer-tilt transform. Six
   seconds out, six seconds back, three seconds resting flat before it
   repeats; main.js adds/removes is-breathing rather than pausing mid-cycle,
   so it's always a fresh, complete breath, never interrupted partway. */
@media (prefers-reduced-motion: no-preference) {
  .portrait-frame.is-breathing {
    animation: portraitBreathe 15s ease-in-out infinite;
  }
}
@keyframes portraitBreathe {
  0% { transform: scale(1) translate(0, 0); }
  40% { transform: scale(1.013) translate(1.5px, -2px); }
  80%, 100% { transform: scale(1) translate(0, 0); }
}

/* ---- 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: var(--radius);
}
.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: var(--radius);
  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); }

/* ---- Newsletter subscribe: shared .newsletter-form primitives, reused on
   the homepage band, at the end of every article, and on /newsletter/. ---- */
.newsletter-widget {
  max-width: 640px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 2rem;
}

.newsletter-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}
.newsletter-form input[type="email"] {
  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;
}
.newsletter-form input[type="email"]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.newsletter-form .btn { flex-shrink: 0; padding: 0.7rem 1.25rem; font-size: 0.875rem; }

@media (min-width: 560px) {
  .newsletter-form { flex-direction: row; align-items: stretch; }
  .newsletter-form input[type="email"] { flex: 1 1 auto; }
}

.newsletter-privacy {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0.85rem 0 0;
}
.newsletter-success,
.newsletter-error {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  margin-top: 0.85rem;
}
.newsletter-success { color: var(--accent); }
.newsletter-error { color: var(--clay-text); }

/* End-of-article variant: narrower, centered, matching .article-share's
   uppercase label convention and the surrounding .article-end centering. */
.article-newsletter { max-width: 340px; margin: 2rem auto 0; }
.article-newsletter-label {
  font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-secondary); margin: 0 0 0.85rem;
}
.article-newsletter .newsletter-form { flex-direction: column; align-items: stretch; }
.article-newsletter .newsletter-form .btn { width: 100%; }

/* ============================================================
   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-term {
  display: block;
  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-desc {
  display: block;
  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-archive-link { font-weight: 600; }
.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, .tools-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);
}

/* Footer "Share" — tagged per-platform links (wired in main.js) so shares of
   the homepage attribute to the right source in analytics. */
.footer-share { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.footer-share-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}
.footer-share-links { display: flex; gap: 0.4rem; }
.footer-share-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-secondary);
  background: none;
  cursor: pointer;
  padding: 0;
}
.footer-share-link:hover, .footer-share-link:focus-visible { border-color: var(--accent); color: var(--accent); }
.footer-share-icon { width: 17px; height: 17px; }
.footer-share-status { font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .footer-share-link { transition: border-color 150ms var(--ease), color 150ms var(--ease); }
}

@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); }

/* Same warm-to-cool magnitude scale, reused for a weekday ranking: the
   highest count reads warmest, purely as a reading aid, not a value
   judgement about any particular day. */
/* Combo chart: transaction value as bars against its own zero-based left
   axis, active accounts as an overlaid line against its own zero-based
   right axis. Both axes start at zero, including the line's, rather than
   a zoomed range that would make the flatness look either more or less
   dramatic than it really is. Every figure is also given as plain text in
   the surrounding prose. */
.article-linechart {
  padding: 1.25rem 1.25rem 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.article-linechart:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
/* Scaling the SVG to 100% of a narrow phone width shrinks its text past
   legible size; a 560px floor keeps labels readable and lets the card
   scroll horizontally instead, the same trade-off article-table-wrap
   makes for wide tables. */
.linechart-svg { width: 100%; min-width: 560px; height: auto; display: block; }
.linechart-grid { stroke: var(--border); stroke-width: 1; }
.linechart-baseline { stroke: var(--border-interactive); stroke-width: 1; }
.linechart-axis-label {
  font-family: var(--font-mono); font-size: 10px; fill: var(--text-secondary);
}
.linechart-panel-label {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.04em; fill: var(--text);
}
.linechart-bar { fill: var(--gold); }
.linechart-bar-label { font-family: var(--font-mono); font-size: 11px; font-weight: 600; fill: var(--gold); }
.linechart-combo-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.linechart-combo-point { fill: var(--accent); }
.linechart-combo-label { font-family: var(--font-mono); font-size: 11px; font-weight: 600; fill: var(--accent); }
.linechart-legend-swatch-bar { fill: var(--gold); }
.linechart-legend-swatch-line { stroke: var(--accent); stroke-width: 2; }

/* One colour for every day: a red-to-green magnitude scale here would
   read as a value judgement about which day is "best", when this chart
   is a neutral count, not a ranking of good and bad days. */
.funnel-row-wed .funnel-fill,
.funnel-row-thu .funnel-fill,
.funnel-row-tue .funnel-fill,
.funnel-row-mon .funnel-fill,
.funnel-row-sun .funnel-fill,
.funnel-row-fri .funnel-fill,
.funnel-row-sat .funnel-fill { background: var(--accent); }
.funnel-row-wed .funnel-fill { width: 100%; }
.funnel-row-thu .funnel-fill { width: 67%; }
.funnel-row-tue .funnel-fill { width: 67%; }
.funnel-row-mon .funnel-fill { width: 50%; }
.funnel-row-sun .funnel-fill { width: 50%; }
.funnel-row-fri .funnel-fill { width: 33%; }
.funnel-row-sat .funnel-fill { width: 17%; }

/* ============================================================
   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-share { margin-bottom: 2rem; }
.article-share-label {
  font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-secondary); margin: 0 0 0.85rem;
}
.article-share-links { display: flex; justify-content: center; gap: 0.6rem; }
.article-share-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  background: none; border: 1px solid var(--border-interactive); border-radius: 50%;
  color: var(--text-secondary); cursor: pointer; font: inherit;
}
.article-share-link:hover, .article-share-link:focus-visible { border-color: var(--accent); color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .article-share-link { transition: border-color 150ms var(--ease), color 150ms var(--ease); }
}
.article-share-icon { width: 17px; height: 17px; }
.article-share-status { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--accent); margin: 0.85rem 0 0; }

/* The inline touchpoint sits inside .article-body, where ".article-body a"
   would otherwise force prose link colour and underline onto icon buttons. */
.article-body .article-share-link, .article-body .article-share-link:hover, .article-body .article-share-link:focus-visible {
  text-decoration: none;
}
.article-body .article-share-link { color: var(--text-secondary); }
.article-body .article-share-link:hover, .article-body .article-share-link:focus-visible { color: var(--accent); }

/* Persistent share trigger: stays reachable while scrolling, opens a small
   flyout with the same links rather than following the reader down the page
   as a full bar. Hidden until the reader scrolls past the article header,
   and hidden again once the native end-of-article share block is in view. */
.article-share-float {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;
}
.article-share-float.is-visible { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
@media (prefers-reduced-motion: no-preference) {
  .article-share-float { transition: opacity 200ms var(--ease), transform 200ms var(--ease), visibility 200ms; }
}
.article-share-trigger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: var(--surface); border: 1px solid var(--border-interactive); border-radius: 50%;
  color: var(--text-secondary); cursor: pointer; font: inherit;
}
.article-share-trigger:hover, .article-share-trigger:focus-visible, .article-share-trigger[aria-expanded="true"] {
  border-color: var(--accent); color: var(--accent);
}
@media (prefers-reduced-motion: no-preference) {
  .article-share-trigger { transition: border-color 150ms var(--ease), color 150ms var(--ease); }
}
.article-share-trigger-icon { width: 19px; height: 19px; }
.article-share-flyout {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.75rem);
  min-width: 176px;
  padding: 0.85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.article-share-flyout[hidden] { display: none; }
.article-share-flyout .article-share { margin-bottom: 0; }
.article-share-flyout .article-share-links { justify-content: center; }

.article-end-next { color: var(--text-secondary); margin-bottom: 1.5rem; }
.article-end-next a { font-weight: 600; }
.article-end-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

/* ============================================================
   Notes archive
   Deliberately plainer than the Writing cards: notes are short, so the
   list reads as a list, not a row of decorative cards.
   ============================================================ */

.notes-list { border-top: 1px solid var(--border); margin-top: 2rem; }
.notes-item {
  display: block;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border);
}
.notes-item-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.4rem;
}
.notes-item-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.notes-item-title { margin: 0 0 0.4rem; font-size: 1.0625rem; }
.notes-item-title a { color: var(--text); }
.notes-item-title a:hover, .notes-item-title a:focus-visible { color: var(--accent); }
.notes-item-excerpt { margin: 0; max-width: 62ch; }

.notes-empty {
  padding: 3rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-top: 2rem;
  color: var(--text-secondary);
  max-width: 52ch;
}

/* ============================================================
   Tools archive and the interactive denominator selector
   ============================================================ */

.tools-list {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
}
.tools-card {
  max-width: 780px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem 2.25rem;
}
@media (prefers-reduced-motion: no-preference) {
  .tools-card { transition: transform var(--dur-control) var(--ease), border-color var(--dur-control) var(--ease); }
  .tools-card:hover { transform: translateY(-3px); border-color: var(--border-strong); }
}
.tools-card-meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}
.tools-card-title { margin: 0 0 0.75rem; }
.tools-card-title a { color: var(--text); }
.tools-card-title a:hover, .tools-card-title a:focus-visible { color: var(--accent); }
.tools-card-excerpt { max-width: 62ch; margin-bottom: 1.25rem; }

.tool-intro { max-width: 68ch; }
.tool-source-link { margin-top: 0.5rem; }

.tool-selector {
  max-width: 640px;
  margin-top: 2.5rem;
  padding: 2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.tool-fieldset { border: none; padding: 0; margin: 0; }
.tool-legend {
  font-family: var(--font-display);
  font-size: 1.125rem;
  color: var(--text);
  padding: 0;
  margin-bottom: 1.25rem;
}
.tool-options { display: grid; gap: 0.75rem; list-style: none; margin: 0; padding: 0; }
.tool-option {
  display: block;
  cursor: pointer;
}
.tool-option-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--border-interactive);
  border-radius: var(--radius);
}
@media (prefers-reduced-motion: no-preference) {
  .tool-option-card { transition: border-color var(--dur-control) var(--ease), background var(--dur-control) var(--ease); }
}
.tool-option:hover .tool-option-card { border-color: var(--accent); }
.tool-option-input:checked + .tool-option-card {
  border-color: var(--accent);
  border-width: 2px;
  background: var(--surface-alt);
}
.tool-option-input:focus-visible + .tool-option-card {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.tool-option-name { font-weight: 600; }
.tool-option-count { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-secondary); }
/* Selection is never colour-only: the checked option also gets a visible
   "Selected" text label, shown only on the checked one. */
.tool-option-selected-flag { display: none; font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); margin-inline-start: 0.75rem; }
.tool-option-input:checked + .tool-option-card .tool-option-selected-flag { display: inline; }

.tool-result {
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
}
.tool-result-equation {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  color: var(--text);
  margin: 0 0 0.5rem;
}
.tool-result-equation strong { color: var(--accent); }
.tool-result-label { margin: 0; color: var(--text-secondary); }