/* ============================================================================
   CodeCrafters Automation — design tokens, base and components.

   Hand-authored. Every colour in the site resolves to a token declared here;
   the build refuses to emit a page containing a raw hex value (see build.py
   and tests/test_content_rules.py). Layout conventions come from the design
   handoff: 1280px max content width, 820-860px for long-form prose, section
   padding clamp(56px, 7vw, 96px) clamp(20px, 4vw, 32px), alternating
   --surface-alt backgrounds separated by 1px --border rules, and every
   multi-column grid built on repeat(auto-fit, minmax(Npx, 1fr)).
   ========================================================================= */

:root {
  /* Palette — the only prominent accent is green. Never pure black. */
  --bg: #08111d;
  --surface: #111c2b;
  --surface-alt: #0b1522;
  --elevated: #162436;
  --green: #22c55e;
  --green-hover: #16a34a;
  --green-light: #86efac;
  --text: #f8fafc;
  --text-secondary: #cbd5e1;
  /* Lightened from the handoff's #64748B, which measured 3.98:1 on --bg and
     3.29:1 on --elevated — below the 4.5:1 WCAG AA floor for normal-size text,
     and this token is used for 14px body copy (footer links, notes, mono
     metadata). #8190a5 keeps the same slate hue and saturation and clears AA on
     every surface (worst case 4.83:1 on --elevated). Deviating from a supplied
     token is deliberate: the brief requires WCAG 2.2 AA and says never to trade
     accessibility for a score. tests/test_contrast.py enforces this. */
  --text-muted: #8190a5;
  --border: #243244;

  /* Derived accent washes. Declared once so no page invents its own alpha. */
  --green-wash: rgba(34, 197, 94, 0.06);
  --green-wash-strong: rgba(34, 197, 94, 0.08);
  --green-wash-solid: rgba(34, 197, 94, 0.14);
  --green-edge: rgba(34, 197, 94, 0.3);
  --green-edge-strong: rgba(34, 197, 94, 0.35);
  --header-bg: rgba(8, 17, 29, 0.86);
  --shadow-menu: 0 18px 40px rgba(0, 0, 0, 0.5);
  --diagram-accent-fill: #12311f;

  /* Type */
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Layout */
  --content-max: 1280px;
  --prose-max: 860px;
  --section-pad: clamp(56px, 7vw, 96px) clamp(20px, 4vw, 32px);
  --gutter: clamp(20px, 4vw, 32px);
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* Minimum comfortable interactive target. WCAG 2.2 AA target size. */
  --tap: 44px;
}

/* ---------------------------------------------------------------- base ---- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Sticky header is 72px; keep anchor targets clear of it. */
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--green-light);
  text-decoration: none;
}

a:hover {
  color: var(--green);
}

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

::selection {
  background: var(--green);
  color: var(--bg);
}

:focus-visible {
  outline: 2px solid var(--green-light);
  outline-offset: 3px;
  border-radius: 2px;
}

@keyframes cc-pulse {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

/* The only animations in the site are one status pulse and hover transitions.
   Both are surrendered on request. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ----------------------------------------------------------- skip link ---- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 99;
  background: var(--green);
  color: var(--bg);
  padding: 10px 16px;
  font-weight: 600;
  font-size: 14px;
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
  left: 0;
  color: var(--bg);
}

/* -------------------------------------------------------------- layout ---- */

.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section {
  border-bottom: 1px solid var(--border);
}

.section--alt {
  background: var(--surface-alt);
}

.section--hero {
  position: relative;
  overflow: hidden;
}

.section__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--section-pad);
  position: relative;
}

.section__inner--tight {
  padding: clamp(48px, 6vw, 72px) var(--gutter);
}

.section__inner--wide {
  padding: clamp(64px, 8vw, 104px) var(--gutter);
}

.prose-wrap {
  max-width: var(--prose-max);
  margin: 0 auto;
  padding: var(--section-pad);
}

/* Restrained background grid, hero sections only, masked with a radial
   gradient so it fades out rather than tiling the whole viewport. */
.hero-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: 0.28;
  -webkit-mask-image: radial-gradient(120% 90% at 30% 0%, #000 20%, transparent 75%);
  mask-image: radial-gradient(120% 90% at 30% 0%, #000 20%, transparent 75%);
  pointer-events: none;
}

.grid {
  display: grid;
  gap: 20px;
}

/* No fixed column counts anywhere — every grid is auto-fit. */
.grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.grid--auto-sm {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.grid--auto-lg {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.grid--split {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(32px, 5vw, 56px);
}

/* -------------------------------------------------------------- header ---- */

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

.site-header__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 14px var(--gutter);
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.site-header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.site-header__logo svg {
  display: block;
  height: 42px;
  width: auto;
}

.nav-desktop {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: auto;
  flex-wrap: wrap;
}

.nav-desktop a {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
  padding: 4px 0;
  transition: color 0.15s ease;
}

.nav-desktop a:hover {
  color: var(--text);
}

.nav-desktop a[aria-current='page'] {
  color: var(--text);
  border-bottom: 1.5px solid var(--green);
}

/* Mobile navigation is a <details>/<summary> disclosure: keyboard-operable and
   Escape-closable natively, no JavaScript, no focus trap to get wrong. */
.nav-mobile {
  display: none;
  margin-left: auto;
  position: relative;
}

.nav-mobile__toggle {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  min-height: var(--tap);
}

.nav-mobile__toggle::-webkit-details-marker {
  display: none;
}

.nav-mobile__bars {
  display: grid;
  gap: 4px;
}

.nav-mobile__bars span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--text);
}

.nav-mobile__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 250px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: var(--shadow-menu);
}

.nav-mobile__panel a {
  font-size: 15px;
  color: var(--text-secondary);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  min-height: var(--tap);
  display: flex;
  align-items: center;
}

.nav-mobile__panel a:hover {
  background: var(--elevated);
  color: var(--text);
}

.nav-mobile__panel a[aria-current='page'] {
  font-weight: 500;
  color: var(--text);
  background: var(--elevated);
}

/* Child routes under a parent, e.g. "— Pipeline" beneath Operations Center. */
.nav-mobile__panel a.is-child {
  padding-left: 26px;
}

@media (max-width: 1000px) {
  .nav-desktop {
    display: none;
  }
  .nav-mobile {
    display: block;
  }
}

/* --------------------------------------------------------- breadcrumbs ---- */

.breadcrumbs {
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
}

.breadcrumbs ol {
  list-style: none;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}

.breadcrumbs a {
  color: var(--text-muted);
}

.breadcrumbs a:hover {
  color: var(--text);
}

.breadcrumbs [aria-current='page'] {
  color: var(--text-secondary);
}

/* ----------------------------------------------------------- typography --- */

.eyebrow {
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
}

.eyebrow--muted {
  color: var(--text-muted);
}

.eyebrow--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* Fluid headings. Body text never drops below 14px anywhere in the site. */
.h1 {
  margin: 0;
  font-size: clamp(34px, 4.6vw, 50px);
  line-height: 1.07;
  letter-spacing: -0.032em;
  font-weight: 600;
  text-wrap: pretty;
}

.h1--hero {
  font-size: clamp(38px, 5.4vw, 60px);
  line-height: 1.04;
}

.h2 {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.028em;
  font-weight: 600;
  text-wrap: pretty;
}

.h2--lg {
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
}

.label {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
}

.lede {
  margin: 22px 0 0;
  font-size: 18px;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 62ch;
  text-wrap: pretty;
}

.lede--lg {
  font-size: 19px;
  line-height: 1.6;
  max-width: 56ch;
}

.body {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.note {
  margin: 20px 0 0;
  font-size: 14px;
  color: var(--text-muted);
  max-width: 80ch;
  line-height: 1.7;
}

.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.7;
}

/* ------------------------------------------------------------- buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  padding: 13px 22px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  min-height: var(--tap);
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn--primary {
  color: var(--bg);
  background: var(--green);
}

.btn--primary:hover {
  background: var(--green-hover);
  color: var(--bg);
}

.btn--secondary {
  color: var(--text);
  border-color: var(--border);
  background: var(--surface);
}

.btn--secondary:hover {
  border-color: var(--green);
  color: var(--text);
}

.btn--sm {
  font-size: 14px;
  padding: 9px 16px;
}

.btn--block {
  width: 100%;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.btn-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Inline forward link, e.g. "All case studies →". */
.link-arrow {
  font-size: 15px;
  font-weight: 600;
  color: var(--green-light);
}

/* --------------------------------------------------------------- cards ---- */

.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-alt);
  padding: 26px;
}

.card--flat {
  background: var(--bg);
}

.card--accent {
  border-color: var(--green-edge);
  background: var(--green-wash);
}

.card--link {
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: inherit;
  transition: border-color 0.15s ease;
}

.card--link:hover {
  border-color: var(--green);
  color: inherit;
}

.card__title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}

.card__title--lg {
  font-size: 21px;
  line-height: 1.25;
}

.card__body {
  margin: 9px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Hairline-separated list: the 1px gap plus a border reads as dividers. */
.stack-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.stack-list > li {
  background: var(--surface-alt);
  padding: 26px 28px;
  transition: background-color 0.15s ease;
}

.stack-list > li:hover {
  background: var(--surface);
}

/* --------------------------------------------------------------- chips ---- */

.chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 7px 13px;
}

.chip--link:hover {
  border-color: var(--green);
  color: var(--text);
}

.chip--accent {
  border-color: var(--green-edge-strong);
  color: var(--green-light);
}

/* Typographic organisation name. Deliberately NOT a logo — see the footer
   disclaimer. Never swap these for official trademarks without licensing. */
.org-name {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 8px 14px;
}

.org-name:hover {
  color: var(--text);
}

/* -------------------------------------------------------------- badges ---- */

.badge {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--green-light);
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid var(--green-edge);
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.06em;
}

.status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  animation: cc-pulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}

.status-dot--lg {
  width: 8px;
  height: 8px;
}

/* ------------------------------------------------------------- metrics ---- */

.metrics {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.metrics > div {
  padding: 36px 32px;
  border-right: 1px solid var(--border);
}

.metrics > div:first-child {
  padding-left: 0;
}

.metrics > div:last-child {
  border-right: 0;
  padding-right: 0;
}

.metrics dt {
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.metrics dd {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--text-muted);
}

.metrics .arrow {
  color: var(--text-muted);
}

.metrics .to {
  color: var(--green);
}

/* Metric cells stack on narrow screens; side borders would then be wrong. */
@media (max-width: 700px) {
  .metrics > div,
  .metrics > div:first-child,
  .metrics > div:last-child {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding: 28px 0;
  }
  .metrics > div:last-child {
    border-bottom: 0;
  }
}

/* -------------------------------------------------------------- ticked ---- */

/* Checked/arrow lists. The glyph is decorative; the text carries the meaning. */
.ticks {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.ticks li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
}

.tick {
  color: var(--green);
}

.tick--arrow {
  color: var(--green-light);
}

.tick--dash {
  color: var(--text-muted);
}

/* ------------------------------------------------------------ pipeline ---- */

/* Desktop: a horizontal run of numbered stages joined by a connector line.
   Mobile: the connectors are hidden and it becomes a plain vertical list. */
.pipeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 28px 0;
}

.pipeline > li {
  position: relative;
  padding: 0 12px;
}

.pipeline__connector {
  position: absolute;
  top: 13px;
  left: 50%;
  right: -50%;
  height: 1px;
  background: var(--border);
}

.pipeline__num {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--green);
  background: var(--bg);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--green);
}

.pipeline__num--result {
  border-color: var(--green-light);
  background: var(--green-wash-solid);
  color: var(--green-light);
}

.pipeline h3 {
  margin: 16px 0 0;
  font-size: 15px;
  font-weight: 600;
}

.pipeline p {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

@media (max-width: 760px) {
  .pipeline__connector {
    display: none;
  }
}

/* Stage rows on the pipeline detail page: number, description, evidence. */
.stage {
  display: grid;
  grid-template-columns: 44px 1fr minmax(0, 260px);
  gap: clamp(18px, 3vw, 32px);
  align-items: start;
}

.stage__num {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--green);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--green);
}

.stage__num--result {
  border-color: var(--green-light);
  background: var(--green-wash-solid);
  color: var(--green-light);
}

.stage--result {
  background: rgba(34, 197, 94, 0.07);
}

.stage__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

.stage__meta--accent {
  color: var(--green-light);
}

/* The stage grid collapses to one column before the evidence card squeezes. */
@media (max-width: 900px) {
  .stage {
    grid-template-columns: 34px 1fr;
  }
  .stage__evidence,
  .stage__meta {
    grid-column: 1 / -1;
    white-space: normal;
  }
}

.evidence {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  padding: 16px;
}

.evidence--accent {
  border-color: var(--green-edge);
  background: var(--green-wash);
}

.evidence__value {
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.evidence__detail {
  margin: 5px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--green-light);
}

/* ------------------------------------------------------------ terminal ---- */

/* Framed panel with a title bar — used for pipeline runs and PR previews. */
.panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-alt);
  overflow: hidden;
}

.panel--dark {
  background: var(--bg);
}

.panel__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
}

.panel__body {
  padding: 22px;
}

.panel__split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px;
  background: var(--border);
  border-top: 1px solid var(--border);
}

.panel__split > div {
  background: var(--surface-alt);
  padding: 24px 20px;
}

.term {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-secondary);
}

.term-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-secondary);
}

.check-rows {
  display: grid;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
}

.check-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.check-row .pass {
  color: var(--green-light);
}

.run-list {
  list-style: none;
  margin: 0;
  padding: 16px 18px 20px;
  display: grid;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: 13px;
}

.run-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
}

.run-list li:hover {
  background: var(--surface);
}

.run-list__name {
  color: var(--text-secondary);
  flex: 1;
}

.run-list__detail {
  color: var(--text-muted);
}

.run-list li.is-result {
  background: var(--green-wash-strong);
  border: 1px solid var(--green-edge);
  margin-top: 8px;
}

.run-list li.is-result .run-list__name {
  color: var(--text);
}

.run-list li.is-result .run-list__detail {
  color: var(--green-light);
}

/* ------------------------------------------------------------ callouts ---- */

.callout {
  border-left: 3px solid var(--green);
  background: var(--green-wash);
  padding: 20px 22px;
}

.callout__title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.callout p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* Security notes are visually distinct from ordinary callouts so a reader
   scanning for constraints finds them. */
.security-note {
  border: 1px solid var(--border);
  border-left: 3px solid var(--green-light);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface-alt);
  padding: 20px 22px;
}

.security-note__label {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-light);
}

/* An unresolved question, deliberately visible. Every one of these is a real
   open item that needs Jairo's confirmation before publication — see
   docs/OPEN-QUESTIONS.md. Do not delete one by guessing the answer. */
.todo-note {
  margin: 20px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 80ch;
  border-left: 2px dashed var(--border);
  padding-left: 14px;
}

/* --------------------------------------------------------- diagram/fig ---- */

.figure {
  margin: 36px 0 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-alt);
  padding: clamp(16px, 3vw, 28px);
}

/* Diagrams stay inline SVG and scale with the container. Labels are sized in
   viewBox units at >=14px so they stay legible when the diagram shrinks. */
.figure svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Wide diagrams and tables scroll inside their own box. The page body must
   never scroll horizontally. */
.figure--scroll {
  overflow-x: auto;
}

.figure--scroll svg {
  min-width: 640px;
}

.figure figcaption {
  margin: 20px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
}

/* ---------------------------------------------------------- code block ---- */

.code {
  margin: 26px 0 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-alt);
  overflow: hidden;
}

.code figcaption,
.code__name {
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}

.code pre {
  margin: 0;
  padding: 18px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
  -webkit-overflow-scrolling: touch;
}

.code code {
  font-family: inherit;
}

/* ------------------------------------------------------------ timeline ---- */

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.timeline > li {
  position: relative;
  padding: 0 0 40px 32px;
  border-left: 1px solid var(--border);
}

.timeline > li:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}

.timeline__dot {
  position: absolute;
  left: -5px;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
}

.timeline__period {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.timeline__role {
  margin: 8px 0 0;
  font-size: 19px;
  font-weight: 600;
}

.timeline__org {
  margin: 4px 0 0;
  font-size: 15px;
  color: var(--green-light);
}

/* --------------------------------------------------------------- table ---- */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-top: 24px;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.table th,
.table td {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
}

.table th {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
}

.table tr:last-child td {
  border-bottom: 0;
}

/* ---------------------------------------------------------------- form ---- */

.form {
  display: grid;
  gap: 22px;
}

.field {
  display: grid;
  gap: 8px;
}

.field label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.field .req {
  color: var(--green-light);
}

.field .hint {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
}

.field input,
.field select,
.field textarea {
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  min-height: var(--tap);
  width: 100%;
}

.field textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.6;
}

.field select {
  /* Native control, but the dark background needs an explicit swatch or
     some browsers render white-on-white options. */
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 38px;
}

.field option {
  background: var(--surface);
  color: var(--text);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--green);
}

.field [aria-invalid='true'] {
  border-color: #f87171;
}

.field__error {
  font-size: 13px;
  color: #fca5a5;
  min-height: 0;
}

/* The honeypot must be reachable by bots and invisible to humans and screen
   readers alike — so it is hidden outright, not just visually. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Error summary receives focus on failed submit so keyboard and screen-reader
   users land on the list of problems rather than hunting for them. */
.form-summary {
  border: 1px solid #f87171;
  border-left: 3px solid #f87171;
  border-radius: var(--radius-sm);
  background: rgba(248, 113, 113, 0.08);
  padding: 18px 20px;
}

.form-summary[hidden] {
  display: none;
}

.form-summary h2 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.form-summary ul {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
  font-size: 14px;
  color: var(--text-secondary);
}

.form-summary a {
  color: #fca5a5;
}

.form-status {
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  font-size: 15px;
  line-height: 1.6;
}

.form-status[hidden] {
  display: none;
}

.form-status--ok {
  border: 1px solid var(--green-edge);
  border-left: 3px solid var(--green);
  background: var(--green-wash);
  color: var(--text-secondary);
}

.form-status--err {
  border: 1px solid #f87171;
  border-left: 3px solid #f87171;
  background: rgba(248, 113, 113, 0.08);
  color: var(--text-secondary);
}

.form-privacy {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0;
}

/* -------------------------------------------------------------- footer ---- */

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

.site-footer__cols {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 56px var(--gutter) 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 40px;
}

.site-footer__brand svg {
  display: block;
  height: 38px;
  width: auto;
}

.site-footer__tagline {
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--text-muted);
  max-width: 34ch;
}

.site-footer nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.site-footer nav h2 {
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 500;
}

.site-footer nav a {
  font-size: 14px;
  color: var(--text-muted);
}

.site-footer nav a:hover {
  color: var(--text);
}

.site-footer__legal {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 20px var(--gutter) 44px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
}

.site-footer__legal p {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
}

.site-footer__legal p:last-child {
  max-width: 70ch;
}

/* ------------------------------------------------------------- portrait --- */

/* The portrait appears exactly once in the whole site: the homepage hero.
   There is a test asserting that (tests/test_content_rules.py). */
.hero-portrait {
  align-self: stretch;
  position: relative;
  border-left: 1px solid var(--border);
  padding-left: 40px;
}

.hero-portrait__frame {
  position: relative;
  width: 100%;
  height: 420px;
  margin-top: 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.hero-portrait__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}

.hero-portrait__name {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.hero-portrait__role {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--text-muted);
}

@media (max-width: 760px) {
  .hero-portrait {
    border-left: 0;
    padding-left: 0;
    min-height: 0;
  }
}

/* --------------------------------------------------------------- prose ---- */

/* Long-form legal and article copy. Narrower measure than the page grid. */
.prose {
  color: var(--text-secondary);
}

.prose h2 {
  margin: 44px 0 0;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--text);
  text-wrap: pretty;
}

.prose h3 {
  margin: 32px 0 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.prose p {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.75;
  text-wrap: pretty;
}

.prose ul,
.prose ol {
  margin: 16px 0 0;
  padding-left: 22px;
  display: grid;
  gap: 10px;
  font-size: 16px;
  line-height: 1.7;
}

.prose a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose strong {
  color: var(--text);
}

/* ---------------------------------------------------------- utilities ----- */

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

.flex-between {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.mt-0 { margin-top: 0; }
.mt-s { margin-top: 20px; }
.mt-m { margin-top: 32px; }
.mt-l { margin-top: 44px; }
.max-34 { max-width: 34ch; }
.max-40 { max-width: 40ch; }
.max-52 { max-width: 52ch; }
.max-62 { max-width: 62ch; }
.text-center { text-align: center; }
.push { margin-top: auto; }

/* ============================================================================
   Design-derived component variants.

   These are the modifiers and small helpers the design handoff uses that the
   core block definitions above do not cover on their own. They are named after
   what they are, and content/styles.py maps the design's inline declarations
   onto them. Anything still falling back to a generated atom class shows up in:

       python3 build.py --report-unmapped
   ========================================================================= */

/* headings ---------------------------------------------------------------- */
.h1--oc { font-size: clamp(36px, 4.8vw, 54px); line-height: 1.06; }
.h2--sm { font-size: clamp(26px, 3.2vw, 34px); line-height: 1.14; letter-spacing: -0.026em; }
.h3--21 { font-size: 21px; }
.h3--18 { font-size: 18px; }
.h3--16 { font-size: 16px; }
.h3--15 { font-size: 15px; }
.accent { color: var(--green-light); }
.strong-15 { margin: 0; font-size: 15px; font-weight: 600; }

/* measure caps used by the design ----------------------------------------- */
.max-22 { max-width: 22ch; }
.max-24 { max-width: 24ch; }
.max-26 { max-width: 26ch; }
.max-36 { max-width: 36ch; }
.max-38 { max-width: 38ch; }
.max-56 { max-width: 56ch; }
.max-60 { max-width: 60ch; }
.max-66 { max-width: 66ch; }
.max-70 { max-width: 70ch; }

/* eyebrow / label / lede / body variants ---------------------------------- */
.eyebrow--lg { font-size: 13px; letter-spacing: 0.14em; margin-bottom: 26px; }
.label--0  { margin-bottom: 0; }
.label--8  { margin-bottom: 8px; }
.label--10 { margin-bottom: 10px; }
.label--12 { margin-bottom: 12px; }
.label--16 { margin-bottom: 16px; }
.label--24 { margin-bottom: 24px; letter-spacing: 0.12em; }
.label--28 { margin-bottom: 28px; }
.lede--full { max-width: none; }
.lede--sm { font-size: 17px; }
.lede--prose { font-size: 16.5px; line-height: 1.75; max-width: 74ch; }
.body--145 { font-size: 14.5px; }
.body--165 { line-height: 1.65; }
.body--17 { line-height: 1.7; }
.card__body--145 { font-size: 14.5px; }
.card__lead { margin: 9px 0 0; font-size: 16px; line-height: 1.5; color: var(--text); font-weight: 500; }
.prose-p { margin: 14px 0 0; font-size: 16px; line-height: 1.75; color: var(--text-secondary); }
.prose-h2 {
  margin: 48px 0 0;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.022em;
  /* clears the 72px sticky header when linked to from a table of contents */
  scroll-margin-top: 100px;
}
.prose-h3 { margin: 44px 0 0; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }
.note--0 { margin-top: 0; }
.note--4 { margin: 4px 0 0; }
.note--6 { margin: 6px 0 0; }
.note--24 { margin-top: 24px; }
.note--inline { margin: 0; max-width: none; }

/* cards / cells ----------------------------------------------------------- */
.card--22 { padding: 22px; }
.card--24 { padding: 24px; }
.card--28 { padding: 28px; }
.cell { background: var(--surface-alt); padding: 24px; }
.cell--22 { padding: 22px; }
.cell--26 { padding: 26px; }
.cell--flat { background: var(--bg); }
.stack-list--10 { border-radius: var(--radius); }

/* Hairline metric cells: the 1px grid gap over a border-coloured background
   draws the dividers, so no per-cell borders are needed. */
.metric-cells {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.metric__value { font-size: 38px; font-weight: 600; letter-spacing: -0.03em; }
.metric__value--sm { font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -0.025em; }
.metric__label { margin: 6px 0 0; font-size: 14px; color: var(--text-muted); line-height: 1.5; }

/* chips / badges ---------------------------------------------------------- */
.chip--lg { padding: 9px 15px; }
.chip--plain { color: var(--text-muted); }
.chips--mono { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); gap: 10px; }
.badge--upper { letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; }

/* ticks ------------------------------------------------------------------- */
.ticks--flush { margin-top: 0; }
.ticks--sm { font-size: 14.5px; gap: 9px; }
.ticks--155 { font-size: 15.5px; }
.tick-row { display: grid; grid-template-columns: 14px 1fr; gap: 10px; }

/* pipeline / stages ------------------------------------------------------- */
.pipeline-item { position: relative; padding: 0 12px; }
.pipeline__desc { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.pipeline__num--static { position: static; width: 28px; height: 28px; background: transparent; }
.stage__num--32 { width: 32px; height: 32px; font-size: 12px; }
.glance__label { font-size: 13.5px; line-height: 1.45; color: var(--text-secondary); }
.num-accent { font-family: var(--font-mono); font-size: 13px; color: var(--green); }

/* panels ----------------------------------------------------------------- */
.panel__bar--start { justify-content: flex-start; padding: 14px 20px; }
.panel__split-cell { background: var(--surface-alt); padding: 24px 20px; }
.artifact {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-secondary);
}
.run-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
}
.run-list-item:hover { background: var(--surface); }
.run-list-item.is-result {
  background: var(--green-wash-strong);
  border: 1px solid var(--green-edge);
  margin-top: 8px;
}
.run-list__name--strong { color: var(--text); }
.mono--secondary { color: var(--text-secondary); }
.mono--13 { font-size: 13px; line-height: 1.8; }
.callout--tight { padding: 13px 14px; font-size: 14px; color: var(--text-secondary); }

/* rows used by consulting / insights lists -------------------------------- */
.service-row {
  background: var(--surface-alt);
  padding: 30px 32px;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 20px;
}
.insight-row {
  background: var(--surface-alt);
  padding: 26px 28px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: start;
}
/* Status pill would crush the title on a phone; let it wrap under instead. */
@media (max-width: 560px) {
  .insight-row { grid-template-columns: 1fr; }
}

/* timeline --------------------------------------------------------------- */
.timeline-row {
  display: grid;
  grid-template-columns: minmax(0, 180px) 1fr;
  gap: clamp(16px, 4vw, 44px);
  padding: clamp(28px, 4vw, 40px) 0;
  border-top: 1px solid var(--border);
}
.timeline__role-h { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.timeline__where { margin: 10px 0 0; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); line-height: 1.6; }
@media (max-width: 640px) {
  .timeline-row { grid-template-columns: 1fr; gap: 16px; }
}

/* section shell variants -------------------------------------------------- */
.section-top { border-top: 1px solid var(--border); }

/* interaction states lifted from the design's style-hover attributes ------ */
.hv-text:hover { color: var(--text); }
.hv-green-text:hover { color: var(--green); }
.hv-green:hover { background: var(--green-hover); }
.hv-surface:hover { background: var(--surface); }
.hv-elevated:hover { background: var(--elevated); color: var(--text); }
.hv-border:hover { border-color: var(--green); }

/* small helpers ---------------------------------------------------------- */
.reset-list { list-style: none; margin: 0; padding: 0; }
.d-block { display: block; }
.w-full { width: 100%; height: auto; }
.c-secondary { color: var(--text-secondary); }
.c-text { color: var(--text); }
.c-muted { color: var(--text-muted); }
.fw-400 { font-weight: 400; }
.col-10 { display: flex; flex-direction: column; gap: 10px; }
.grid-10 { display: grid; gap: 10px; }
.row-16 { display: flex; flex-wrap: wrap; gap: 16px; }
.row-baseline { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.row-center { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.field-label { display: block; font-size: 14px; font-weight: 500; color: var(--text); margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-14 { margin-bottom: 14px; }
.mb-16 { margin-bottom: 16px; }
.mb-18 { margin-bottom: 18px; }
.mt-7 { margin-top: 7px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.mt-18 { margin-top: 18px; }
.mt-24 { margin-top: 24px; }
.mt-52 { margin-top: 52px; }

/* long-form prose + remaining structural helpers -------------------------- */
.prose-wrap--820 { max-width: 820px; }
.prose-p--0 { margin-top: 0; }
.prose-list {
  margin: 14px 0 0;
  padding-left: 22px;
  display: grid;
  gap: 9px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
}
.self-center { align-self: center; }
.fw-600 { font-weight: 600; }
.mt-22 { margin-top: 22px; }
.pb-88 { padding-bottom: 88px; }
.chips--12 { gap: 12px; }
.grid--24 { gap: 24px; }
.rule-above { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--border); }

/* Metric cells with vertical rules; the rules are dropped once they stack. */
.metric-cell { padding: 36px 32px; border-right: 1px solid var(--border); }
.metric-cell--first { padding: 36px 32px 36px 0; }
.metric-cell--last { padding: 36px 0 36px 32px; border-right: 0; }
@media (max-width: 700px) {
  .metric-cell,
  .metric-cell--first,
  .metric-cell--last {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding: 28px 0;
  }
  .metric-cell--last { border-bottom: 0; }
}
.hero-portrait__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}

/* contact page direct-details list --------------------------------------- */
.contact-details {
  margin: 0;
  display: grid;
  gap: 22px;
}
.contact-details dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.contact-details dd {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
}
/* The form column needs breathing room from the details column on wide
   screens; the shared .grid--split gap handles the rest. */
.form-shell { display: grid; gap: 22px; }

/* pipeline "at a glance" strip -------------------------------------------- */
.grid--glance { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 20px 12px; }

/* Parent of the current page in the desktop nav: e.g. "Operations Center"
   while viewing /operations-center/pipeline. Distinguished from the current
   page itself, which gets aria-current and the green underline. */
.nav-desktop a.is-section { color: var(--text); }

.link-arrow--sm { font-size: 14px; }

/* ============================================================================
   Minimum sizes.

   Two rules from the brief drive this block:
     - body text never below 14px
     - hit targets never below 44px

   "Body text" means reading copy — sentences. The design deliberately sets
   eyebrows, labels, badges, chips, monospace technology lists and terminal-style
   UI at 11-13px; those are short non-prose labels and they stay as designed.
   What follows raises the places where actual sentences were under 14px, and
   pads the interactive targets that fell short.
   ========================================================================= */

/* Prose that was below the floor. */
.site-footer__legal p { font-size: 14px; }
.form-privacy { font-size: 14px; }
.field .hint { font-size: 14px; }
.pipeline__desc { font-size: 14px; }
.glance__label { font-size: 14px; }
.callout--tight { font-size: 14px; }

/* Hit targets.
   The header logo is a 42px-tall SVG in a link; two pixels short of the floor.
   Footer and mobile-panel links are single lines of 14px text, so they need
   vertical padding to become comfortable targets rather than hairlines. */
.site-header__logo { min-height: var(--tap); }

.site-footer nav a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
}

/* The column gap can shrink now that each link carries its own height. */
.site-footer nav { gap: 0; }
.site-footer nav h2 { margin-bottom: 8px; }

/* Breadcrumb links are small by design but must still be operable. */
.breadcrumbs a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}
.breadcrumbs ol { padding-top: 4px; padding-bottom: 4px; }

/* Inline "→" links sit in their own line; give them a real target box. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}

/* Filter and section chips are links on some pages. */
.chip--link, a.chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}
.mt-8 { margin-top: 8px; }

/* Desktop nav links: 14px text on a 4px vertical pad is ~29px tall, and the
   shortest labels ("Home", "About") are under 44px wide. Both dimensions are
   padded to the floor. min-width with centred content keeps the row visually
   unchanged — the 22px gap absorbs the few extra pixels.

   Note on standards: WCAG 2.2 AA (SC 2.5.8) asks for 24x24 and exempts inline
   links, so these already passed AA at 29px. 44x44 is the brief's own stricter
   rule, and it is what is enforced here. */
.nav-desktop a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  min-width: var(--tap);
}

/* The "delivered out" evidence list on the homepage is monospace UI, but its
   lines read as sentences, so it takes the 14px floor too. */
.term-list { font-size: 14px; }

/* ============================================================================
   Links inside running text must not rely on colour alone.

   WCAG 1.4.1 (Use of Color): a link inside a block of text needs either 3:1
   contrast against the surrounding text or a non-colour cue. Green-light on
   muted grey measures 2.31:1, so the cue is an underline. Lighthouse reports
   the failure as `link-in-text-block` (weight 7).

   Scoped to prose containers, so buttons, chips, nav items and card links —
   which are visually obvious as controls on their own — stay unstyled.
   ========================================================================= */
.prose p a,
.prose li a,
.form-privacy a,
.note a,
.field .hint a,
.site-footer__legal a,
figcaption a,
.callout a,
.security-note a,
.card__body a,
.lede a,
.body a,
.prose-p a,
.prose-list a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.prose p a:hover,
.form-privacy a:hover,
.note a:hover,
.prose-p a:hover,
.prose-list a:hover {
  text-decoration-thickness: 2px;
}