/* ============================================================
   KAR Auto Research — about.css

   The About page as a narrative rather than a page of blocks.
   Loaded *after* index.css and depends on its tokens (--navy,
   --signal, --space-*, --font-display …) — this file adds the
   story sections only. Nothing here restyles shared chrome, so
   the header, footer, drawer and buttons stay identical to every
   other marketing page.

   Every class is namespaced .ab- so it can never collide with the
   homepage components it deliberately echoes (.rc-*, .out-*).
   ============================================================ */

/* ---------- Page container ----------
   The About page is the one marketing page with something living in its side
   margin: the chapter rail below is fixed to the gutter, not to the flow. So
   its content column stops short of the site-wide one (1360px rather than
   1520px) so the margin is always wide enough to hold the 97px rail clear of
   the text. At the site-wide width the gutter does not reach that until about
   1780px of viewport, which would mean either a rail overlapping the prose
   from 1400px to 1780px, or no rail at all across that whole range. */
.ab-page { --maxw: clamp(1152px, 80vw, 1360px); }

/* ---------- Shared narrative primitives ---------- */

/* Reveal-on-scroll. The hidden state is gated on .ab-motion, which the
   inline head script sets before first paint and removes again if
   /scripts/about.js never arrives — so a failed script can never leave
   the page blank. */
.ab-motion [data-ab-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--d, 0s);
}
.ab-motion [data-ab-reveal].is-in { opacity: 1; transform: none; }

/* A chapter is one section of the story. Dark chapters carry the
   product's own ground, so the page alternates rather than scrolling as
   one flat document. */
.ab-chapter { position: relative; padding: var(--section-y) 0; }
.ab-chapter--dark {
  background: var(--navy);
  color: var(--footer-fg);
  border-top: 1px solid rgba(244, 247, 251, 0.08);
  border-bottom: 1px solid rgba(244, 247, 251, 0.08);
}
.ab-chapter--dark h2,
.ab-chapter--dark h3 { color: #fff; }
.ab-chapter--dark .ab-lead { color: rgba(244, 247, 251, 0.7); }
.ab-chapter--tint {
  background: var(--mist);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Numbered chapter marker — the one piece of furniture that says this is
   a story with an order to it. */
.ab-mark {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.ab-chapter--dark .ab-mark { color: var(--signal); }
.ab-mark::after {
  content: "";
  flex: 1;
  max-width: 96px;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
}
.ab-mark b { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.06em; }

.ab-h { margin-top: var(--space-4); max-width: 22ch; }
.ab-h--wide { max-width: 28ch; }
.ab-lead {
  margin-top: var(--space-4);
  max-width: 48ch;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--muted);
}

/* A single sentence set as display type — used where the argument is
   better made by one line than by a paragraph. */
.ab-statement {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3vw, 1.95rem);
  line-height: 1.35;
  letter-spacing: -0.015em;
  max-width: 26ch;
  color: var(--navy);
}
.ab-statement em { font-style: normal; color: var(--accent); }
.ab-chapter--dark .ab-statement { color: #fff; }
.ab-chapter--dark .ab-statement em { color: var(--signal); }

/* ============================================================
   01 · HERO
   ============================================================ */
.ab-hero {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: var(--footer-fg);
  padding: clamp(56px, 9vw, 104px) 0 clamp(56px, 8vw, 96px);
}
.ab-hero-bg { position: absolute; inset: 0; z-index: 0; }
.ab-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; opacity: 0.22; }
/* Two washes, one job each: the radial pulls the eye into the headline
   column, the linear keeps the type legible all the way down. */
.ab-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(115% 90% at 6% 4%, rgba(15, 27, 61, 0.12) 0%, rgba(15, 27, 61, 0.82) 66%),
    linear-gradient(180deg, rgba(15, 27, 61, 0.3) 0%, rgba(15, 27, 61, 0.74) 52%, var(--navy) 100%);
}
.ab-hero > .wrap { position: relative; z-index: 1; }

.ab-hero .eyebrow { color: var(--signal); }
.ab-hero h1 {
  margin-top: var(--space-4);
  max-width: 17ch;
  color: #fff;
  font-size: clamp(2.15rem, 6vw, 3.9rem);
  line-height: 1.08;
}
/* The clause carrying the promise takes the signal colour, so the
   headline reads as one sentence with one emphasis. */
.ab-hero h1 .ab-lit { color: var(--signal); }
.ab-hero-lead {
  margin-top: var(--space-5);
  max-width: 54ch;
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.65;
  color: rgba(244, 247, 251, 0.78);
}
.ab-hero .btn-row { margin-top: var(--space-6); gap: 14px; }

/* ---- The weeks/minutes scale ----
   One diagram carrying the whole argument: the long track is the research
   a buyer runs by hand, the short one is the same work done once. Drawn to
   scale, and neither track claims a number. */
.ab-scale {
  margin-top: clamp(40px, 6vw, 68px);
  padding-top: clamp(28px, 4vw, 40px);
  border-top: 1px solid rgba(244, 247, 251, 0.14);
  display: grid;
  gap: 26px;
}
.ab-scale-row { display: grid; gap: 10px; }
.ab-scale-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.78rem;
}
.ab-scale-k { color: rgba(244, 247, 251, 0.62); }
.ab-scale-v {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: rgba(244, 247, 251, 0.9);
  white-space: nowrap;
}
.ab-scale-row--kar .ab-scale-k,
.ab-scale-row--kar .ab-scale-v { color: var(--signal); }

.ab-track {
  position: relative;
  height: 30px;
  border-radius: 2px;
  background: rgba(244, 247, 251, 0.06);
  border: 1px solid rgba(244, 247, 251, 0.1);
  overflow: hidden;
}
.ab-track > i {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  width: 0;
  background: var(--c-inverse-text-3);
  transition: width 2.2s cubic-bezier(0.35, 0, 0.2, 1);
}
.ab-track.is-run > i { width: 100%; }
/* The floor keeps the short track visible on a phone; below it the bar
   would read as a rounding error rather than as a measurement. */
.ab-scale-row--kar .ab-track { width: 13%; min-width: 64px; }
.ab-scale-row--kar .ab-track > i {
  background: var(--kar-copper-lit);
  transition-duration: 0.55s;
  transition-delay: 0.2s;
}

/* The stops along the track are the actual jobs a buyer does, so the
   track reads as a route rather than a progress bar. */
.ab-stops {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 0;
  padding: 0;
  font-size: 0.72rem;
  color: rgba(244, 247, 251, 0.66);
}
.ab-stops li {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid rgba(244, 247, 251, 0.12);
  border-radius: var(--r-sm);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.ab-stops li.is-in { opacity: 1; transform: none; }
.ab-scale-row--kar .ab-stops li {
  border-color: rgba(69, 224, 200, 0.35);
  color: rgba(244, 247, 251, 0.85);
}

.ab-hero-note { margin-top: var(--space-5); font-size: 0.8rem; color: rgba(244, 247, 251, 0.62); }

/* ============================================================
   02 · THE FRICTION
   ============================================================ */
.ab-sources {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: var(--space-7) 0 0;
  padding: 0;
}
.ab-source {
  position: relative;
  padding: 18px 18px 26px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
/* A hairline that stops well short of the edge: every source answers part
   of the question and then runs out. */
.ab-source::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 14px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent) 0 34%, var(--border) 34% 100%);
  opacity: 0.5;
}
.ab-source-tag {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.ab-source-k {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.3;
  color: var(--navy);
}
.ab-source-v { margin-top: 6px; font-size: 0.82rem; line-height: 1.55; color: var(--muted); }

.ab-friction-close {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 860px) {
  .ab-friction-close { grid-template-columns: 1.05fr 1fr; gap: var(--space-8); align-items: start; }
}
.ab-friction-close p { color: var(--muted); font-size: 0.95rem; line-height: 1.7; }
.ab-friction-close p + p { margin-top: var(--space-4); }

/* ============================================================
   03 · WHAT KAR AI DOES — the brief translator
   ============================================================ */
.ab-translate { margin-top: var(--space-7); }

.ab-briefs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ab-brief {
  appearance: none;
  border: 1px solid rgba(244, 247, 251, 0.18);
  background: rgba(244, 247, 251, 0.04);
  color: rgba(244, 247, 251, 0.66);
  font: inherit;
  font-size: 0.78rem;
  padding: 8px 14px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.ab-brief:hover { color: #fff; border-color: rgba(69, 224, 200, 0.45); }
.ab-brief.is-on {
  color: var(--navy);
  background: var(--signal);
  border-color: var(--signal);
  font-weight: 600;
}
.ab-brief:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

.ab-panel {
  border: 1px solid rgba(244, 247, 251, 0.14);
  border-radius: var(--radius);
  background: rgba(244, 247, 251, 0.045);
  overflow: hidden;
}
.ab-scene[hidden] { display: none; }
/* The panels hold text and nothing focusable, so they carry tabindex="0" —
   without it a keyboard user can reach the tabs but never the content they
   open. The ring rule below does the same job for the dimension panels. */
.ab-scene:focus-visible,
.ab-dim:focus-visible { outline: 2px solid var(--signal); outline-offset: 6px; border-radius: 2px; }
.ab-stage { display: grid; }
@media (min-width: 900px) { .ab-stage { grid-template-columns: 1fr 1fr; } }

/* Left half: what a person actually says. */
.ab-said { padding: clamp(22px, 3vw, 34px); border-bottom: 1px solid rgba(244, 247, 251, 0.12); }
@media (min-width: 900px) {
  .ab-said { border-bottom: 0; border-right: 1px solid rgba(244, 247, 251, 0.12); }
}
.ab-step-k {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 247, 251, 0.62);
}
.ab-quote {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  line-height: 1.45;
  color: #fff;
}
/* The caret runs only while a panel is resolving, so it reads as the
   sentence being taken in rather than as permanent decoration. */
.ab-caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 3px;
  vertical-align: -0.16em;
  background: var(--signal);
  opacity: 0;
}
.ab-panel.is-reading .ab-caret { opacity: 1; animation: abBlink 1s steps(2, start) infinite; }
@keyframes abBlink { 50% { opacity: 0; } }

/* Right half: what that sentence turns into. */
.ab-read { padding: clamp(22px, 3vw, 34px); }
.ab-facets { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.ab-facet {
  display: grid;
  grid-template-columns: minmax(78px, auto) 1fr;
  gap: 4px 14px;
  align-items: baseline;
  padding: 9px 12px;
  border-left: 2px solid var(--accent);
  background: rgba(244, 247, 251, 0.05);
  font-size: 0.85rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.ab-facet.is-in { opacity: 1; transform: none; }
.ab-facet:nth-child(even) { border-left-color: var(--signal); }
.ab-facet-k {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 247, 251, 0.66);
}
.ab-facet-v { color: rgba(244, 247, 251, 0.92); }
@media (max-width: 419px) { .ab-facet { grid-template-columns: 1fr; } }

.ab-outcome {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 16px clamp(22px, 3vw, 34px);
  border-top: 1px solid rgba(244, 247, 251, 0.12);
  background: rgba(15, 27, 61, 0.5);
  font-size: 0.86rem;
  color: rgba(244, 247, 251, 0.78);
}
.ab-outcome b { color: var(--signal); font-family: var(--font-display); font-weight: 700; }

.ab-translate-note { margin-top: var(--space-4); font-size: 0.8rem; color: rgba(244, 247, 251, 0.62); }

/* ============================================================
   04 · THE INTELLIGENCE MAP
   ============================================================ */
.ab-map-grid { display: grid; gap: var(--space-7); margin-top: var(--space-7); align-items: center; }
@media (min-width: 960px) {
  .ab-map-grid { grid-template-columns: minmax(320px, 460px) 1fr; gap: var(--space-8); }
}

.ab-ring { position: relative; width: min(100%, 460px); margin: 0 auto; aspect-ratio: 1; }
.ab-ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ab-ring-svg .ab-ring-track { fill: none; stroke: rgba(244, 247, 251, 0.16); stroke-width: 1; }
.ab-ring-svg line {
  stroke: rgba(244, 247, 251, 0.16);
  stroke-width: 1;
  transition: stroke 0.35s var(--ease), stroke-width 0.35s var(--ease);
}
.ab-ring-svg line.is-on { stroke: var(--signal); stroke-width: 2; }

/* Each node is parked on the ring by a percentage pair worked out from its
   angle, so one rule places all nine and the geometry survives any ring
   size without container queries. */
.ab-node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
}
.ab-node-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid rgba(244, 247, 251, 0.2);
  border-radius: var(--r-md);
  background: rgba(15, 27, 61, 0.94);
  color: rgba(244, 247, 251, 0.72);
  font: inherit;
  font-size: 0.72rem;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.ab-node-btn:hover { transform: translateY(-1px); color: #fff; border-color: rgba(69, 224, 200, 0.5); }
.ab-node-btn[aria-selected="true"] {
  color: var(--navy);
  background: var(--signal);
  border-color: var(--signal);
  font-weight: 600;
}
.ab-node-btn:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.ab-node-n { font-family: var(--font-display); font-size: 0.68rem; opacity: 0.8; }
.ab-node-btn[aria-selected="true"] .ab-node-n { opacity: 1; }

/* The hub restates the current dimension, so the ring always has a
   subject even before anything is touched. */
.ab-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46%;
  text-align: center;
  pointer-events: none;
}
.ab-hub-k { display: block; font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--signal); }
.ab-hub-v {
  display: block;
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 2vw, 1.2rem);
  line-height: 1.25;
  color: #fff;
}

.ab-dim-detail { min-height: 190px; }
.ab-dim-name {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  line-height: 1.25;
  color: #fff;
}
.ab-dim-body { margin-top: 14px; font-size: 0.98rem; line-height: 1.7; color: rgba(244, 247, 251, 0.75); max-width: 48ch; }
.ab-dim-meta {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(244, 247, 251, 0.14);
  font-size: 0.8rem;
  line-height: 1.6;
  color: rgba(244, 247, 251, 0.66);
}
.ab-dim-meta b { color: var(--signal); font-weight: 600; }
.ab-map-hint { margin-top: var(--space-5); font-size: 0.78rem; color: rgba(244, 247, 251, 0.62); }

/* Under 720px nine labels cannot share a ring. The nodes keep their
   geometry but shrink to their numbers, and the name lives in the hub and
   the detail panel — which is where a thumb is looking anyway. */
@media (max-width: 719px) {
  .ab-ring { width: min(100%, 330px); }
  .ab-node-label { display: none; }
  .ab-node-btn { padding: 0; width: 34px; height: 34px; justify-content: center; border-radius: 50%; }
  .ab-node-n { font-size: 0.74rem; opacity: 1; }
  .ab-hub { width: 54%; }
}

/* ============================================================
   05 · THE SHIFT — before / after
   ============================================================ */
.ab-shift-grid { display: grid; gap: 18px; margin-top: var(--space-7); align-items: start; }
@media (min-width: 880px) {
  .ab-shift-grid { grid-template-columns: 1fr auto 1fr; gap: 28px; }
}

.ab-col {
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  transition: filter 0.9s var(--ease);
}
/* The old process visibly loses its colour as the section arrives; the KAR
   column keeps it. Grayscale rather than a fade: dimming the opacity took the
   body text under 3:1, and this column is content, not decoration. */
.ab-shift.is-in .ab-col--before { filter: grayscale(1); }
.ab-col--after { border-color: rgba(59, 111, 160, 0.4); box-shadow: var(--shadow-2); }

.ab-col-k { font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.ab-col--after .ab-col-k { color: var(--accent); }
.ab-col-h { margin-top: 8px; font-family: var(--font-display); font-size: 1.25rem; color: var(--navy); }

.ab-steps { list-style: none; margin: 18px 0 0; padding: 0; counter-reset: abstep; }
.ab-steps li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
  color: var(--muted);
}
.ab-steps li::before {
  counter-increment: abstep;
  content: counter(abstep, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: 0.72rem;
  color: var(--accent);
}
.ab-col--after .ab-steps li { color: var(--fg); font-weight: 500; }
/* The last line of the old column is the loop itself. */
.ab-loop {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--muted);
}
.ab-loop span[aria-hidden] { font-style: normal; color: var(--accent); }
.ab-col-out {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--fg);
}

.ab-shift-arrow { display: none; align-self: center; font-size: 1.6rem; color: var(--accent); }
@media (min-width: 880px) { .ab-shift-arrow { display: block; } }

.ab-shift-note { margin-top: var(--space-6); font-size: 0.85rem; line-height: 1.7; color: var(--muted); max-width: 58ch; }

/* ============================================================
   06 · VISION
   ============================================================ */
.ab-vision-h {
  margin-top: var(--space-5);
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 5vw, 3rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: #fff;
}
.ab-vision-h em { font-style: normal; color: var(--signal); }
.ab-vision-body { margin-top: var(--space-5); max-width: 56ch; font-size: 1.02rem; line-height: 1.7; color: rgba(244, 247, 251, 0.72); }
.ab-vision-body + .ab-vision-body { margin-top: var(--space-4); }

.ab-horizon { list-style: none; display: grid; gap: 0; margin: clamp(40px, 6vw, 64px) 0 0; padding: 0; }
@media (min-width: 820px) { .ab-horizon { grid-template-columns: repeat(3, 1fr); } }
.ab-horizon li { padding: 22px 24px 22px 0; border-top: 1px solid rgba(244, 247, 251, 0.16); }
@media (min-width: 820px) {
  .ab-horizon li + li { padding-left: 28px; border-left: 1px solid rgba(244, 247, 251, 0.14); }
}
.ab-horizon-k { font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--signal); }
.ab-horizon-h { margin-top: 10px; font-family: var(--font-display); font-size: 1.15rem; color: #fff; }
.ab-horizon-v { margin-top: 8px; font-size: 0.88rem; line-height: 1.65; color: rgba(244, 247, 251, 0.66); }

/* ============================================================
   07 · THE PEOPLE
   ============================================================ */
.ab-people-rail { display: grid; gap: 18px; margin-top: var(--space-7); }
@media (min-width: 900px) {
  /* A rail rather than a grid: the portraits in one row read as one team.
     auto-fit rather than a forced single row, so the team can keep growing
     and the cards wrap to a second line instead of being squeezed thin. */
  .ab-people-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
}

.ab-person {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ab-person:hover,
.ab-person:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--shadow-3);
  border-color: rgba(59, 111, 160, 0.45);
}
/* Capped so a single-column card on a tablet does not open with a 400px
   photograph before a word of the bio. */
.ab-person-shot { position: relative; aspect-ratio: 16 / 10; max-height: 280px; overflow: hidden; background: var(--mist); }
.ab-person-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.ab-person:hover .ab-person-shot img { transform: scale(1.04); }
.ab-person-role {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 7px 12px;
  background: var(--navy);
  color: #fff;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ab-person-body { display: flex; flex-direction: column; flex: 1; padding: 20px 20px 22px; }
.ab-person-name { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.3; color: var(--navy); }
/* The one line that says what this person actually moves — the thing a
   generic bio card never tells you. */
.ab-person-does {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 0.82rem;
  line-height: 1.5;
  font-weight: 500;
  color: var(--accent);
}
.ab-person-bio { margin-top: 12px; font-size: 0.88rem; line-height: 1.65; color: var(--muted); }
.ab-person-bio + .ab-person-bio { margin-top: 10px; }
.ab-person .about-cta { margin-top: auto; padding-top: 18px; align-self: flex-start; }
/* The LinkedIn line always sits last in the card. When there is no CTA above
   it, it takes over the job of being pushed to the bottom of the body. */
.ab-person-linkedin {
  margin-top: auto;
  padding-top: 16px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  transition: color var(--dur) var(--ease);
}
.ab-person .about-cta ~ .ab-person-linkedin { margin-top: 0; padding-top: 12px; }
/* A card whose LinkedIn URL is not known yet has no LinkedIn line, so its CTA
   drops 32px lower than every other CTA in the rail — the exact height of that
   line (12px padding + 20px content). Reserve it so the buttons stay on one
   baseline. The rule stops applying by itself the moment the anchor is added,
   and browsers without :has() simply keep the old ragged bottom. */
.ab-person:not(:has(.ab-person-linkedin)) .about-cta { margin-bottom: 32px; }
.ab-person-linkedin svg { width: 15px; height: 15px; fill: currentColor; flex: none; }
.ab-person-linkedin:hover,
.ab-person-linkedin:focus-visible { color: var(--accent); }

/* ============================================================
   08 · CLOSING
   ============================================================ */
.ab-end { text-align: center; }
.ab-end .ab-mark { justify-content: center; }
.ab-end .ab-mark::after { display: none; }
.ab-end-h {
  margin: var(--space-5) auto 0;
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4.6vw, 2.8rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: #fff;
}
.ab-end-h em { font-style: normal; color: var(--signal); }
.ab-end-body { margin: var(--space-5) auto 0; max-width: 50ch; font-size: 1rem; line-height: 1.7; color: rgba(244, 247, 251, 0.72); }
.ab-end .btn-row { justify-content: center; }
.ab-end-note { margin-top: var(--space-5); font-size: 0.8rem; color: rgba(244, 247, 251, 0.62); }

/* ============================================================
   Chapter rail — a table of contents for the story, on screens wide
   enough to carry it beside the content. Real links, so it is
   keyboard-reachable and works with JavaScript off.
   ============================================================ */
.ab-rail { display: none; }
@media (min-width: 1400px) {
  /* Parked in the gutter rather than at a fixed inset, so it tracks the content
     column as that column grows: `max()` keeps it off the viewport edge on the
     narrowest screen that shows it, and the -150px pulls it clear of the text
     once there is room (~80px of air at 1920px and above). */
  .ab-rail {
    display: block;
    position: fixed;
    right: max(20px, calc((100vw - var(--maxw)) / 2 - 150px));
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
  }
  .ab-rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
  .ab-rail a {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    color: var(--muted);
    transition: color var(--dur) var(--ease);
  }
  .ab-rail a::after {
    content: "";
    width: 18px;
    height: 1px;
    background: currentColor;
    transition: width var(--dur) var(--ease), background var(--dur) var(--ease);
  }
  .ab-rail a:hover,
  .ab-rail a:focus-visible { color: var(--navy); }
  .ab-rail a[aria-current="true"] { color: var(--navy); font-weight: 600; }
  .ab-rail a[aria-current="true"]::after { width: 34px; background: var(--accent); }
  /* Over a dark chapter the rail has to invert or it disappears. */
  .ab-rail.on-dark a { color: rgba(244, 247, 251, 0.7); }
  .ab-rail.on-dark a:hover,
  .ab-rail.on-dark a:focus-visible,
  .ab-rail.on-dark a[aria-current="true"] { color: #fff; }
  .ab-rail.on-dark a[aria-current="true"]::after { background: var(--signal); }
}

/* ============================================================
   Reduced motion — every animated element is restored to its finished
   state rather than simply having its transition removed, so nothing is
   left invisible or half-drawn.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ab-motion [data-ab-reveal],
  .ab-motion [data-ab-reveal].is-in { opacity: 1; transform: none; transition: none; }
  .ab-track > i,
  .ab-stops li,
  .ab-facet,
  .ab-col,
  .ab-person,
  .ab-person-shot img,
  .ab-node-btn,
  .ab-brief,
  .ab-ring-svg line,
  .ab-rail a,
  .ab-rail a::after { transition: none; }
  .ab-stops li,
  .ab-facet { opacity: 1; transform: none; }
  .ab-panel.is-reading .ab-caret { animation: none; opacity: 0; }
  .ab-person:hover,
  .ab-person:focus-within,
  .ab-node-btn:hover { transform: none; }
  .ab-person:hover .ab-person-shot img { transform: none; }
}