/* ============================================================
   ATOMIC CUBIT — site stylesheet
   Implements WEBSITE/DESIGN_BAR.md exactly. Do not add tokens,
   sizes, colors, radii, or shadows not defined there.
   ============================================================ */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/Geist.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/SpaceGrotesk.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/Manrope.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Montserrat.woff2') format('woff2');
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/Quicksand.woff2') format('woff2');
}

/* ---------- A1. Tokens ---------- */
:root {
  --black: #000000;
  --white: #f7f9f9;
  --grey: #9aa2ad;
  --grey-2: #8b929e;
  --prose: #c9cfd8;
  --carbon: #0c0d0d;
  --line: rgba(247, 249, 249, 0.22);
  --line-soft: rgba(247, 249, 249, 0.08);
  --focus: #f7f9f9;
  --ice: #eaf2fb;
  --ice-2: #d8e7f7;
  --navy: #0c1b2c;
  --navy-soft: #3b5876;
  --accent: #7fb0e8;

  --section-y: clamp(64px, 12vh, 120px);
  --section-y-sm: clamp(40px, 7vh, 72px);
  --gutter: clamp(24px, 8vw, 120px);
  --row-y: 28px;
  --container: 1200px;
  --measure: 68ch;
  --measure-fine: 880px;

  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --brand-face: 'Space Grotesk', "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --ease-out-brand: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  min-height: 100dvh;
  background: var(--black);
  color: var(--white);
  font-family: 'Manrope', "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
[id] { scroll-margin-top: 96px; }
img, svg { max-width: 100%; }

/* ---------- A2. Type roles ---------- */
.display {
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(56px, 7.6vw, 118px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--white);
}
.h1 {
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 5.2vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.012em;
  color: var(--white);
}
.h2 {
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.008em;
  color: var(--white);
}
.h3 {
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(18px, 2.1vw, 22px);
  line-height: 1.35;
  color: var(--white);
}
.standfirst {
  font-weight: 500;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--grey);
}
.body, .prose p, .prose li {
  font-weight: 500;
  font-size: clamp(15.5px, 1.7vw, 17px);
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--prose);
}
.body strong, .prose strong { font-weight: 600; color: var(--white); }
.body-small {
  font-weight: 500;
  font-size: clamp(13px, 1.4vw, 14.5px);
  line-height: 1.7;
  letter-spacing: 0.01em;
  color: var(--grey);
}
.eyebrow {
  font-family: var(--brand-face);
  font-weight: 400;
  font-size: clamp(10.5px, 1.2vw, 12.5px);
  line-height: 1.4;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: var(--grey);
}
.label {
  font-family: var(--brand-face);
  font-weight: 400;
  font-size: clamp(10.5px, 1.1vw, 12.5px);
  line-height: 1.7;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
}
.fine {
  font-weight: 500;
  font-size: clamp(10.5px, 1.05vw, 12px);
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: var(--grey-2);
  max-width: var(--measure-fine);
}
.fine strong { font-weight: 600; color: var(--grey); }
.stat-l {
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(38px, 4.6vw, 68px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--white);
  white-space: nowrap;
}
.stat-m {
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--white);
  white-space: nowrap;
}
.stat-l sup, .stat-m sup { font-size: 0.42em; font-weight: 600; }
.stat-l sup a, .stat-m sup a { color: var(--grey); text-decoration: none; transition: color 180ms ease-out; }
.stat-l sup a:hover, .stat-m sup a:hover { color: var(--accent); }
.data {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--grey);
  background: var(--carbon);
  border-radius: 8px;
  padding: 3px 10px;
  display: inline-block;
}

/* ---------- Layout primitives ---------- */
.section { padding: var(--section-y) var(--gutter); }
.section > .inner { max-width: var(--container); margin: 0 auto; }
.hairline-top { border-top: 1px solid var(--line-soft); }
.sec-head { display: flex; flex-direction: column; align-items: flex-start; }
.sec-head .eyebrow { margin-bottom: 14px; }
.sec-head .standfirst { margin-top: 16px; max-width: 60ch; }
.sec-head + * { margin-top: var(--section-y-sm); }

/* ---------- B1. Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 10;
  background: var(--black);
  border-bottom: 1px solid var(--line-soft);
  height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter);
}
.nav .brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
  font-family: var(--brand-face);
  font-weight: 300; font-size: 12px; letter-spacing: 0.34em; text-indent: 0.17em;
  text-transform: uppercase; color: var(--white);
}
.nav .brand .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--white);
  animation: breathe 3s ease-in-out infinite;
}
.nav .links { display: flex; align-items: center; gap: 32px; }
.nav .links a.nl {
  font-weight: 600; font-size: 13px; line-height: 1; letter-spacing: 0.02em;
  color: var(--grey-2); text-decoration: none;
  transition: color 180ms ease-out;
}
.nav .links a.nl:hover { color: var(--white); }
.nav .links a.nl[aria-current="page"] {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.pill-cta {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 18px;
  font-weight: 600; font-size: 13.5px; letter-spacing: 0.02em;
  color: var(--white); text-decoration: none;
  transition: border-color 180ms ease-out, background-color 180ms ease-out;
}
.pill-cta:hover { border-color: var(--accent); background: rgba(127,176,232,0.08); }
.pill-cta.band { padding: 12px 26px; }
.pill-fill {
  display: inline-flex; align-items: center;
  background: var(--white); color: #000;
  border-radius: 999px; padding: 12px 26px;
  font-weight: 700; font-size: 13.5px; letter-spacing: 0.02em;
  text-decoration: none;
  transition: background-color 180ms ease-out;
}
.pill-fill:hover { background: #e3e6ea; }
.nav details.nav-menu { display: none; }

/* ---------- B2. Footer ---------- */
.footer {
  border-top: 1px solid var(--line-soft);
  padding: var(--section-y-sm) var(--gutter) 32px;
}
.footer .cols {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 32px;
}
.footer .col .label { margin-bottom: 12px; }
.footer .col a {
  display: block;
  font-weight: 500; font-size: clamp(13px, 1.4vw, 14.5px); line-height: 2.2;
  color: var(--grey-2); text-decoration: none;
  transition: color 180ms ease-out;
}
.footer .col a:hover { color: var(--white); }
.footer .legal {
  margin-top: 48px; text-align: center;
  font-family: var(--brand-face);
  font-weight: 300; font-size: 11.5px;
  letter-spacing: 0.22em; text-indent: 0.22em; text-transform: uppercase;
  color: var(--grey-2);
}

/* ---------- B3. Chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 22px;
  font-family: var(--brand-face);
  font-weight: 300; font-size: clamp(10.5px, 1.2vw, 12.5px);
  letter-spacing: 0.34em; text-indent: 0.17em; text-transform: uppercase;
  color: var(--white);
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--white); animation: breathe 3s ease-in-out infinite; }
.chip-cat {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 12px;
  font-weight: 600; font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: lowercase; color: var(--grey);
}

/* ---------- B5. Stat tiles + measurement notes ---------- */
.tiles {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(28px, 4vw, 56px);
}
.tile { text-align: left; }
.tile .lbl { margin-top: 14px; max-width: 26ch; }
.mnotes { margin-top: var(--section-y-sm); }
.mnotes .note { margin-top: 16px; }
.mnotes .note .marker { font-weight: 600; color: var(--grey); }
.mnotes .note a.back { color: var(--grey-2); text-decoration: none; }
.mnotes .note a.back:hover { color: var(--white); }

/* ---------- B6. Result ledger rows ---------- */
.ledger .row {
  border-top: 1px solid var(--line-soft);
  padding: var(--row-y) 0;
  display: grid;
  grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
}
.ledger .row .left .when { margin-top: 14px; }
.ledger .row .right .h3 {
  font-family: 'Geist', system-ui, sans-serif; margin-bottom: 12px; }
.ledger .row .right .body { max-width: var(--measure); }
.ledger .row .right .caveat { margin-top: 16px; }
.ledger .row .right .caveat .cv { font-family: var(--brand-face); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 400; color: var(--grey); }
.ledger .row .right .meta { margin-top: 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
a.verb {
  text-decoration-color: rgba(127,176,232,0.55);
  font-weight: 500; font-size: clamp(13px, 1.4vw, 14.5px);
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: rgba(247,249,249,0.4);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 180ms ease-out;
}
a.verb:hover { text-decoration-color: var(--accent); }

/* ---------- B8. Prose ---------- */
.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1em; }
.prose .h3 {
  font-family: 'Geist', system-ui, sans-serif; margin-top: 48px; margin-bottom: 16px; }
.prose a {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: rgba(247,249,249,0.4);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 180ms ease-out;
}
.prose a:hover { text-decoration-color: var(--white); }
.prose ul { list-style: none; padding-left: 0; }
.prose ul li { padding-left: 24px; position: relative; }
.prose ul li::before { content: "–"; position: absolute; left: 0; color: var(--grey); }
.prose ul li + li { margin-top: 8px; }
.prose blockquote {
  border-left: 2px solid var(--line);
  padding-left: 24px;
  color: var(--grey);
}

/* ---------- B9. Definitions box ---------- */
.defbox {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 32px;
  max-width: var(--measure-fine);
}
.defbox .label { margin-bottom: 16px; }
.defbox dl div + div { margin-top: 12px; }
.defbox dt { display: inline; font-weight: 600; font-size: clamp(13px,1.4vw,14.5px); color: var(--white); }
.defbox dd { display: inline; margin-left: 6px; font-weight: 500; font-size: clamp(13px,1.4vw,14.5px); line-height: 1.7; color: var(--grey); }

/* ---------- Router list (home) ---------- */

/* ---------- Announcement strip ---------- */
.strip {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 16px var(--gutter);
}
.strip .inner { max-width: var(--container); margin: 0 auto; }

/* ---------- Notes index ---------- */
.nrows .n-row {
  border-top: 1px solid var(--line-soft);
  padding: var(--row-y) 0;
  display: grid;
  grid-template-columns: minmax(140px, 180px) minmax(0,1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: baseline;
}
.nrows .n-row:last-child { border-bottom: 1px solid var(--line-soft); }
.nrows .n-title {
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 600; font-size: clamp(18px, 2.1vw, 22px); line-height: 1.35;
  color: var(--white); text-decoration: none;
}
.nrows a.n-title { text-decoration: underline; text-decoration-color: rgba(247,249,249,0.4); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color 180ms ease-out; }
.nrows a.n-title:hover { text-decoration-color: var(--white); }
.nrows .n-meta { margin-top: 8px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* ---------- CTA band ---------- */
.ctaband { text-align: left; }
.ctaband .actions { margin-top: 24px; display: flex; gap: 16px; flex-wrap: wrap; }

/* ---------- Entrance motion (one group per interior page) ---------- */
.enter-1, .enter-2, .enter-3 { animation: up 1000ms var(--ease-out-brand) both; }
.enter-1 { animation-delay: 200ms; }
.enter-2 { animation-delay: 450ms; }
.enter-3 { animation-delay: 700ms; }

@keyframes up      { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes draw    { to { stroke-dashoffset: 0; } }
@keyframes float   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes breathe { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes nudge   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* nav collapses to the Menu sheet below the desktop bar's true minimum width */
@media (max-width: 1180px) {
  .nav { height: 56px; }
  .nav .links { display: none; }
  .nav details.nav-menu { display: block; }
  .nav details.nav-menu summary {
    list-style: none; cursor: pointer;
    font-weight: 600; font-size: 13px; letter-spacing: 0.02em; color: var(--grey-2);
  }
  .nav details.nav-menu summary::-webkit-details-marker { display: none; }
  .nav details.nav-menu[open] > .sheet {
    position: fixed; left: 0; right: 0; top: 56px;
    background: var(--black);
    border-bottom: 1px solid var(--line-soft);
    z-index: 20;
  }
  .nav details.nav-menu .sheet a {
    display: flex; align-items: center;
    height: 52px; padding: 0 var(--gutter);
    border-top: 1px solid var(--line-soft);
    font-weight: 600; font-size: 13px; color: var(--grey-2); text-decoration: none;
  }
  .nav details.nav-menu .sheet a[aria-current="page"] { color: var(--white); }
  .nav > .pill-cta { display: none; }
}

/* ---------- Breakpoints ---------- */
@media (max-width: 860px) {
  .tiles { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ledger .row { grid-template-columns: 1fr; gap: 12px; }
  .nrows .n-row { grid-template-columns: 1fr; gap: 6px; }
  .footer .cols { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 480px) {
  .tiles { grid-template-columns: 1fr; }
  .footer .cols { grid-template-columns: 1fr; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .enter-1, .enter-2, .enter-3 { animation: none; }
  .nav .brand .dot, .chip .dot { animation: none; opacity: 0.8; }
  * { scroll-behavior: auto; }
}

/* ---------- v1.1 brand-caps roles ---------- */
.caps-display {
  font-family: var(--brand-face);
  font-weight: 200;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.3;
  letter-spacing: 0.30em;
  text-indent: 0.30em;
  text-transform: uppercase;
  color: var(--white);
}
.caps-standfirst {
  font-family: var(--brand-face);
  font-weight: 300;
  font-size: clamp(12px, 1.3vw, 15px);
  line-height: 1.9;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  color: var(--grey);
}

/* ---------- ICELINE: light band system ---------- */
.band-light { background: var(--ice); color: var(--navy); }
.band-light .eyebrow, .band-light .label { color: var(--navy-soft); }
.band-light .h2, .band-light .stat-l, .band-light .stat-m,
.band-light .tile .num { color: var(--navy); }
.band-light .stat-l sup a, .band-light .stat-m sup a { color: var(--navy-soft); }
.band-light .stat-l sup a:hover, .band-light .stat-m sup a:hover { color: var(--navy); }
.band-light .fine { color: var(--navy-soft); }
.band-light .fine strong { color: var(--navy); }
.band-light .data { background: #ffffff; color: var(--navy); }
.band-light a.verb { color: var(--navy); text-decoration-color: rgba(12,27,44,0.4); }
.band-light a.verb:hover { text-decoration-color: var(--navy); }
.band-light .note a.back { color: var(--navy-soft); }
.band-light .note a.back:hover { color: var(--navy); }

/* ---------- photo band ---------- */
.imgband { position: relative; width: 100%; }
.imgband img { display: block; width: 100%; height: auto; aspect-ratio: 21/9; object-fit: cover; }
.imgband .credit {
  position: absolute; right: var(--gutter); bottom: 14px;
  font-family: var(--brand-face); font-weight: 400;
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(247,249,249,0.75);
}

/* ---------- ICELINE: circulating-border white cards ---------- */
@property --spin { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.cards3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(20px, 2.5vw, 32px); }
@media (max-width: 860px) { .cards3 { grid-template-columns: 1fr; } }
.cardx {
  display: block;
  border: 2px solid transparent;
  border-radius: 16px; padding: clamp(24px, 2.6vw, 36px);
  color: var(--navy); text-decoration: none;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    conic-gradient(from var(--spin),
      #7fb0e8, #eaf2fb, #4c7fc0, #cfe2f8, #9cc3ee, #7fb0e8) border-box;
  animation: cardspin 7s linear infinite;
}
@keyframes cardspin { to { --spin: 360deg; } }
.cardx .c-title { font-family: 'Geist', system-ui, sans-serif; font-weight: 650;
  font-size: clamp(20px, 2.2vw, 26px); line-height: 1.2; letter-spacing: -0.01em; color: var(--navy); }
.cardx .c-title .arr { color: #4c7fc0; }
.cardx .c-dek { margin-top: 10px; font-weight: 500; font-size: clamp(13.5px, 1.4vw, 15px);
  line-height: 1.6; color: var(--navy-soft); }
@media (prefers-reduced-motion: reduce) { .cardx { animation: none; } }

/* ============================================================
   ICELINE LIGHT-FIRST — the site is white/ice; navy is the ink.
   This layer overrides the dark-era tokens page-wide.
   ============================================================ */
:root {
  --lf-bg: #f8fbfe;
  --lf-band: #e9f1fa;
  --lf-ink: #0c1b2c;
  --lf-ink2: #33506b;
  --lf-ink3: #5a7490;
  --lf-line: rgba(12, 27, 44, 0.16);
  --lf-line-soft: rgba(12, 27, 44, 0.08);
  --lf-accent: #2f6fb8;
  --lf-ring1: #7fb0e8;
}
body { background: var(--lf-bg); color: var(--lf-ink); }
.display, .h1, .h2, .h3, .stat-l, .stat-m { color: var(--lf-ink); }
.standfirst { color: var(--lf-ink2); }
.body, .prose p, .prose li { color: var(--lf-ink2); }
.body strong, .prose strong { color: var(--lf-ink); }
.body-small { color: var(--lf-ink2); }
.eyebrow, .label { color: var(--lf-ink3); }
.fine { color: var(--lf-ink3); }
.fine strong { color: var(--lf-ink2); }
.prose ul li::before { color: var(--lf-ink3); }
.prose blockquote { border-left-color: var(--lf-line); color: var(--lf-ink2); }
.stat-l sup a, .stat-m sup a { color: var(--lf-ink3); }
.stat-l sup a:hover, .stat-m sup a:hover { color: var(--lf-accent); }
.data { background: #ffffff; color: var(--lf-ink); border: 1px solid var(--lf-line-soft); }
.hairline-top { border-top-color: var(--lf-line-soft); }

.nav { background: rgba(248, 251, 254, 0.96); border-bottom-color: var(--lf-line-soft); }
.nav .brand { color: var(--lf-ink); }
.nav .brand .dot { background: var(--lf-accent); }
.nav .links a.nl { color: var(--lf-ink3); }
.nav .links a.nl:hover, .nav .links a.nl[aria-current="page"] { color: var(--lf-ink); }
.nav .links a.nl[aria-current="page"] { text-decoration-color: var(--lf-line); }
.nav details.nav-menu summary { color: var(--lf-ink2); }
.nav details.nav-menu[open] > .sheet { background: var(--lf-bg); border-bottom-color: var(--lf-line-soft); }
.nav details.nav-menu .sheet a { color: var(--lf-ink2); border-top-color: var(--lf-line-soft); }
.nav details.nav-menu .sheet a[aria-current="page"] { color: var(--lf-ink); }

.pill-cta { border-color: var(--lf-line); color: var(--lf-ink); }
.pill-cta:hover { border-color: var(--lf-accent); background: rgba(47, 111, 184, 0.06); }
.pill-fill { background: var(--lf-accent); color: #ffffff; }
.pill-fill:hover { background: #275e9e; }
.chip { border-color: var(--lf-line); color: var(--lf-ink); }
.chip .dot { background: var(--lf-accent); }
.chip-cat { border-color: var(--lf-line); color: var(--lf-ink3); }

a.verb { color: var(--lf-ink); text-decoration-color: rgba(47, 111, 184, 0.45); }
a.verb:hover { text-decoration-color: var(--lf-accent); }
.prose a { color: var(--lf-ink); text-decoration-color: rgba(47, 111, 184, 0.45); }
.prose a:hover { text-decoration-color: var(--lf-accent); }

/* the footer sits in front of the falling chip, so the assembly can never
   spill into it — the chip lives strictly above the footer */
.footer { position: relative; z-index: 1; border-top-color: var(--lf-line-soft); background: var(--lf-band); }
.footer .col a { color: var(--lf-ink3); }
.footer .col a:hover { color: var(--lf-ink); }
.footer .legal { color: var(--lf-ink3); }

.band-light { background: var(--lf-band); color: var(--lf-ink); }
.defbox { border-color: var(--lf-line); background: #ffffff; }
.defbox dt { color: var(--lf-ink); }
.defbox dd { color: var(--lf-ink2); }
.ledger .row { border-top-color: var(--lf-line-soft); }
.ledger .row .right .caveat .cv { color: var(--lf-ink3); }
.nrows .n-row { border-color: var(--lf-line-soft); }
.nrows .n-title { color: var(--lf-ink); }
a.n-title { text-decoration-color: rgba(47, 111, 184, 0.45); }
a.n-title:hover { text-decoration-color: var(--lf-accent); }
.strip { border-color: var(--lf-line-soft); background: var(--lf-band); }
.mnotes .note .marker { color: var(--lf-ink2); }
.mnotes .note a.back { color: var(--lf-ink3); }
.mnotes .note a.back:hover { color: var(--lf-ink); }
.imgband .credit { color: var(--lf-ink3); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline-color: var(--lf-accent); }

/* light-first: brand caps roles */
.caps-display { color: var(--lf-ink); }
.caps-standfirst { color: var(--lf-ink2); }

/* ---------- LEGIBILITY (2026-08-20): small text was too faint on ice ---------- */
.eyebrow, .label { color: var(--lf-ink2); }
.fine { color: var(--lf-ink2); }
.fine strong { color: var(--lf-ink); }
.band-light .eyebrow, .band-light .label { color: var(--lf-ink2); }
.band-light .fine { color: var(--lf-ink2); }
.tile .lbl { color: var(--lf-ink2); }
.mnotes .note a.back { color: var(--lf-ink2); }
.stat-l sup a, .stat-m sup a { color: var(--lf-ink2); }
.nav .links a.nl { color: var(--lf-ink2); }
.ledger .row .right .caveat .cv { color: var(--lf-ink2); }
.imgband .credit {
  color: var(--lf-ink);
  background: rgba(248, 251, 254, 0.88);
  padding: 5px 12px;
  border-radius: 8px;
}

/* ---------- DARKER WORDING (2026-08-21): reading text one step blacker ---------- */
:root {
  --lf-ink: #0a1420;
  --lf-ink2: #22374c;
  --lf-ink3: #435e7a;
}

/* ---------- BRAND-BLUE HEADINGS (2026-08-21): the pill blue as heading/stat color, Quantinuum-style ---------- */
.h2, .band-light .h2 { color: var(--lf-accent); }
.stat-l, .stat-m, .band-light .stat-l, .band-light .stat-m,
.band-light .tile .num { color: var(--lf-accent); }

/* ---------- GROUPED NAV (2026-08-21): CSS-only dropdowns — Technology / Company ---------- */
.nav .links .ng { position: relative; display: flex; align-items: center; align-self: stretch; }
.nav .links .ng .ngt { display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; font-size: 13px; line-height: 1; letter-spacing: 0.02em;
  color: var(--lf-ink2); cursor: pointer; user-select: none; }
.nav .links .ng .ngt .car { opacity: 0.6; transition: transform 180ms ease-out; }
.nav .links .ng:hover .ngt, .nav .links .ng:focus-within .ngt { color: var(--lf-ink); }
.nav .links .ng:hover .car, .nav .links .ng:focus-within .car { transform: rotate(180deg); }
.nav .links .ng .dd { display: none; position: absolute; left: -16px; top: 100%; z-index: 30;
  background: #ffffff; border: 1px solid var(--lf-line); border-radius: 12px; padding: 8px;
  min-width: 210px; box-shadow: 0 14px 36px rgba(12, 27, 44, 0.12); }
.nav .links .ng:hover .dd, .nav .links .ng:focus-within .dd { display: block; }
.nav .links .ng .dd a { display: block; padding: 9px 12px; border-radius: 8px; white-space: nowrap;
  font-weight: 600; font-size: 13px; color: var(--lf-ink2); text-decoration: none; }
.nav .links .ng .dd a:hover { background: var(--lf-band); color: var(--lf-ink); }
.nav .links .ng .dd a[aria-current="page"] { color: var(--lf-ink); }
.nav .links .ngt.on { color: var(--lf-ink); text-decoration: underline;
  text-decoration-color: var(--lf-line); text-decoration-thickness: 1px; text-underline-offset: 6px; }

/* ---------- NAV MEGA MENU (2026-08-21): full-width Technology panel ---------- */
.nav .links .ng-mega { position: static; }
.nav .links .ng-mega .dd.dd-mega { left: 0; right: 0; top: 100%; min-width: 0;
  border: 0; border-bottom: 1px solid var(--lf-line); border-radius: 0 0 18px 18px;
  padding: clamp(26px, 3.2vw, 44px) var(--gutter) clamp(30px, 3.6vw, 52px);
  box-shadow: 0 28px 56px rgba(12, 27, 44, 0.10); }
.mg-inner { max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3.4vw, 56px); }
.mg-h { font-family: var(--brand-face); font-weight: 400; font-size: 11.5px;
  letter-spacing: 0.28em; text-indent: 0.05em; text-transform: uppercase;
  color: var(--lf-accent); margin: 0 0 10px; }
.nav .links .ng .dd a.mg-item { display: block; padding: 10px 12px; margin: 0 0 2px -12px;
  border-radius: 10px; text-decoration: none; white-space: normal; }
.nav .links .ng .dd a.mg-item:hover { background: var(--lf-band); }
.mg-t { display: block; font-family: 'Geist', system-ui, sans-serif; font-weight: 650;
  font-size: 16.5px; letter-spacing: -0.01em; line-height: 1.25; color: var(--lf-ink); }
.mg-d { display: block; margin-top: 4px; font-weight: 500; font-size: 12.5px;
  line-height: 1.55; color: var(--lf-ink2); max-width: 34ch; }
.nav .links .ng .dd a.mg-item[aria-current="page"] .mg-t { color: var(--lf-accent); }

/* ---------- POLISH (2026-08-21): premium micro-interactions ---------- */
::selection { background: rgba(47, 111, 184, 0.22); color: var(--lf-ink); }
.nav .links .ng .dd {
  display: block; opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(8px);
  transition: opacity 200ms ease-out, transform 200ms ease-out, visibility 0s linear 200ms;
}
.nav .links .ng:hover .dd, .nav .links .ng:focus-within .dd {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.footer .fbrand { display: flex; align-items: center; gap: 20px; margin-bottom: 38px; }
.footer .fbrand svg { width: 62px; flex: none; }
.footer .fbrand path { stroke: var(--lf-ink); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; fill: none; opacity: 0.85; }
.footer .fbrand p { font-weight: 500; font-size: 13.5px; line-height: 1.6; color: var(--lf-ink2); max-width: 44ch; margin: 0; }
@media (prefers-reduced-motion: reduce) { .nav .links .ng .dd { transition: none; transform: none; } }

/* ---------- NAV HOLD-OPEN FIX (2026-08-21): forgiving hover ---------- */
.nav .links { align-self: stretch; }
.nav .links .ng .dd {
  pointer-events: auto;
  transition: opacity 180ms ease-out 250ms, transform 180ms ease-out 250ms, visibility 0s linear 430ms;
}
.nav .links .ng:hover .dd, .nav .links .ng:focus-within .dd {
  transition: opacity 180ms ease-out, transform 180ms ease-out;
}

/* ---------- NAV LAYOUT (2026-08-24): brand left, links centred, CTA right,
   with a track reserved for each so the links can never overprint the wordmark.
   Scoped to the desktop bar; below the breakpoint the flex bar (line ~224) rules. ---------- */
@media (min-width: 1181px) {
  .nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 24px; }
  .nav .brand      { justify-self: start; min-width: max-content; }
  .nav .links      { justify-self: center; }
  .nav > .pill-cta { justify-self: end; }
}
.nav .links .ng-mega .dd.dd-mega { position: fixed; left: 0; right: 0; top: 64px; }

/* ---------- WORDMARK (2026-08-21): stroke-drawn ATOMIC CUBIT, crossbarless A ---------- */
.brand .wm { height: 11px; width: auto; display: block; }
.wordmark { color: var(--lf-ink); margin-top: clamp(24px, 4vh, 40px); }
.wordmark .wm { width: clamp(280px, 30vw, 430px); height: auto; display: block; }

/* ---------- NANDI Q1 — text page (2026-08-23) ---------- */
.nq { padding: 0 var(--gutter); }
.nq-copy { padding: clamp(48px, 8vh, 96px) 0 clamp(56px, 9vh, 110px); }
.nq-block { max-width: var(--measure); padding: clamp(30px, 5vh, 56px) 0; }
.nq-block + .nq-block { border-top: 1px solid var(--lf-line-soft); }
.nq-block .h1, .nq-block .h2 { margin-bottom: 18px; }
.nq-block .body + .body { margin-top: 16px; }
.nq-actions2 { margin-top: 28px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }

/* two-column mega panel (2026-08-23) */
.mg-inner.mg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; margin: 0 auto 0 0;
  padding-left: max(0px, calc((100vw - var(--container)) / 2)); }
@media (max-width: 900px) { .mg-inner.mg-2 { grid-template-columns: 1fr; padding-left: 0; } }

/* ---------- ROADMAP (2026-08-23): stages gated, not dated ---------- */
.rmap { list-style: none; margin: 0; padding: 0; position: relative; }
.rmap::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 1px;
  background: linear-gradient(180deg, var(--lf-accent) 0%, var(--lf-line) 42%, var(--lf-line) 100%); }
.rm { position: relative; padding: 0 0 clamp(34px, 5vh, 56px) 44px; }
.rm:last-child { padding-bottom: 0; }
.rm-mark { position: absolute; left: 0; top: 4px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--lf-bg); border: 2px solid var(--lf-line); }
.rm.done .rm-mark { border-color: var(--lf-accent); background: var(--lf-accent); }
.rm.now .rm-mark { border-color: var(--lf-accent); background: var(--lf-bg); box-shadow: 0 0 0 5px rgba(47,111,184,.14); }
.rm-when { font-family: var(--brand-face); font-weight: 400; font-size: 10.5px;
  letter-spacing: .24em; text-transform: uppercase; color: var(--lf-ink3); margin-bottom: 8px; }
.rm.done .rm-when, .rm.now .rm-when { color: var(--lf-accent); }
.rm-body .h3 { margin-bottom: 10px; }
.rm-body .body { max-width: var(--measure); }
.rm-body .fine { margin-top: 12px; max-width: var(--measure); }
.rm-gate { display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 5px;
  background: var(--lf-band); color: var(--lf-ink2);
  font-family: var(--brand-face); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; }
.rm-foot { margin-top: clamp(30px, 5vh, 52px); padding-top: 22px; border-top: 1px solid var(--lf-line-soft); }

/* ---------- BRAND LOCKUP (2026-08-23): AC mark + Sai's wordmark ---------- */
.nav .brand { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; color: var(--lf-ink); }
.nav .brand .brand-mark { height: 26px; width: auto; display: block; }
.nav .brand .brand-word { height: 11px; width: auto; display: block; max-width: none; opacity: .92; }
.nav .brand:hover .brand-word { opacity: 1; }
@media (max-width: 520px) { .nav .brand .brand-word { height: 9px; } }

/* ---------- NANDI Q1 v2: stat band, evidence cards, scope table ---------- */
/* the hero sits in front of the falling chip and is opaque, so the chip is
   completely hidden until it emerges below the stat band */
.nq-hero { position: relative; z-index: 1; background: var(--lf-bg);
  margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter));
  padding-left: var(--gutter); padding-right: var(--gutter);
  max-width: none; padding-bottom: clamp(20px, 3vh, 34px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  grid-template-areas: "eyebrow mark" "stand mark" "actions mark";
  column-gap: clamp(28px, 4vw, 72px); align-items: center; }
.nq-hero > .eyebrow { grid-area: eyebrow; align-self: end; }
.nq-hero > .standfirst { grid-area: stand; margin-top: 14px; max-width: 34ch; }
.nq-hero > .nq-actions2 { grid-area: actions; align-self: start; }
.nq-hero > .nq-lockup { grid-area: mark; margin: 0; }
.nq-hero > .nq-lockup img { width: 100%; }
@media (max-width: 900px) {
  .nq-hero { grid-template-columns: 1fr; grid-template-areas: "eyebrow" "mark" "stand" "actions"; row-gap: 6px; }
  .nq-hero > .standfirst { max-width: none; }
  .nq-hero > .nq-lockup img { width: 84vw; }
}
.nq-band { position: relative; z-index: 1; margin: 0 calc(-1 * var(--gutter)); padding: clamp(40px,6vh,72px) var(--gutter);
  background: var(--lf-band); border-top: 1px solid var(--lf-line-soft); border-bottom: 1px solid var(--lf-line-soft); }
.qs { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(20px,3vw,44px); }
.qs-n { font-family: 'Geist', system-ui, sans-serif; font-weight: 700; color: var(--lf-accent);
  font-size: clamp(30px, 3.6vw, 50px); line-height: 1; letter-spacing: -.01em; white-space: nowrap; }
.qs-c { margin-top: 12px; font-weight: 500; font-size: 13px; line-height: 1.5; color: var(--lf-ink2); max-width: 22ch; }
.frg { list-style: none; margin: 18px 0 0; padding: 0; max-width: var(--measure); }
.frg li { padding: 11px 0; border-top: 1px solid var(--lf-line-soft);
  font-weight: 500; font-size: 14.5px; line-height: 1.5; color: var(--lf-ink); }
.frg-links li { color: var(--lf-ink2); }
.rcards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(24px,3vw,44px); margin-top: 8px; }
.rc { padding-top: 18px; border-top: 1px solid var(--lf-line); }
.rc .h3 { margin-bottom: 8px; }
.rc .body-small { margin-bottom: 12px; }
.scope { margin: 18px 0 0; }
.scope > div { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 16px clamp(20px,3vw,40px);
  padding: 12px 0; border-top: 1px solid var(--lf-line-soft); }
.scope dt { font-weight: 650; font-size: 14px; color: var(--lf-ink); margin: 0; }
.scope dd { margin: 0; font-weight: 500; font-size: 14px; line-height: 1.5; color: var(--lf-ink2); }
.stamp { margin-top: clamp(28px,4vh,44px); padding-top: 18px; border-top: 1px solid var(--lf-line-soft); }
@media (max-width: 900px) {
  .qs { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .rcards { grid-template-columns: 1fr; }
  .scope > div { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- NANDI Q1 LOCKUP HEADLINE (2026-08-24) ---------- */
.nq-lockup { margin: 0 0 clamp(18px, 2.6vh, 28px); line-height: 0; }
.nq-lockup img { display: block; width: min(520px, 84vw); height: auto; max-width: none; }
@media (max-width: 900px) { .nq-lockup img { width: 84vw; } }

/* ---------- NANDI Q1: the plate rides the scroll and seats in the board (2026-08-24)
   Both live in one fixed stage, so the docked state is literally transform:none —
   the plate's box IS the socket, measured at 50.24%/47.99% centre, 41.31% width. ---------- */
/* The zone spans "What it is" -> end of resources. It is a two-column grid so the
   rail occupies its own column (no layout gap); the rail sticks while you scroll
   the zone and RELEASES at its end, parking the assembled chip beside
   "Nandi Q1 resources" instead of following the viewport into the footer. */
.q1-zone { position: relative; display: grid;
  grid-template-columns: minmax(0, 1fr) min(34vw, 460px);
  column-gap: clamp(28px, 4vw, 64px); align-items: start; }
.q1-zone > section { grid-column: 1; }
.q1-rail { grid-column: 2; grid-row: 1 / -1; position: sticky; top: 96px;
  height: min(74vh, 560px); z-index: 0; pointer-events: none; }
.q1-stage { position: absolute; z-index: 0; right: 0; top: 50%;
  width: 100%; aspect-ratio: 1024 / 773;
  transform: translateY(-50%); pointer-events: none; }
.q1-stage picture { display: block; }
.q1-stage img { display: block; width: 100%; height: auto; max-width: none; }

.q1-board { position: absolute; inset: 0;
  animation: q1board linear both; animation-timeline: scroll(root); }
@keyframes q1board {
  /* the socket is revealed just before the plate arrives, then holds */
  0%, 50%   { opacity: 0; transform: translateY(4%) scale(.97); }
  62%       { opacity: 1; transform: none; }
  100%      { opacity: 1; transform: none; }
  100%      { opacity: 1; transform: none; }
}

/* the plate's resting box = the socket */
.q1-plate { position: absolute; left: 29.59%; top: 25.72%; width: 41.31%;
  transform-origin: 50% 50%;
  animation: q1plate linear both; animation-timeline: scroll(root); }
@keyframes q1plate {
  /* falls from behind the stat band, SEATS by 72%, then holds parked
     beside "Nandi Q1 resources" (which enters view at 59.6%) */
  0%, 13%   { opacity: 0; transform: translateY(-108%) perspective(1500px) rotateX(0deg)  scale(2.30); }
  17%       { opacity: 1; transform: translateY(-100%) perspective(1500px) rotateX(4deg)  scale(2.28); }
  32%       { opacity: 1; transform: translateY(-76%)  perspective(1500px) rotateX(20deg) scale(2.08); }
  48%       { opacity: 1; transform: translateY(-52%)  perspective(1500px) rotateX(32deg) scale(1.80); }
  60%       { opacity: 1; transform: translateY(-28%)  perspective(1500px) rotateX(22deg) scale(1.44); }
  68%       { opacity: 1; transform: translateY(-6%)   perspective(1500px) rotateX(8deg)  scale(1.08);
              animation-timing-function: var(--ease-out-brand); }   /* decelerate into the socket */
  72%, 100% { opacity: 1; transform: translateY(0)     perspective(1500px) rotateX(0deg)  scale(1); }
  100%      { opacity: 1; transform: translateY(0)     perspective(1500px) rotateX(0deg)  scale(1); }
}

@media (max-width: 1099px), (prefers-reduced-motion: reduce) {
  .q1-zone { display: block; }
  .q1-rail { display: none; }
}
@supports not (animation-timeline: scroll()) { .q1-rail { display: none; } }

/* ---------- PRESS + TOUCH (2026-08-24) ----------
   Every interactive thing acknowledges a press, and no hover-only
   affordance latches on touch devices. ---------- */
.pill-fill:active, .pill-cta:active { transform: translateY(1px); }
.pill-fill:active { background: #24558f; }
a.verb:active, .prose a:active, .n-title:active { opacity: .7; }
.mg-item:active, .rc a:active { opacity: .75; }
.nav .links a.nl:active { opacity: .7; }

/* hover effects only where hover genuinely exists (not on touch) */
@media (hover: none) {
  .nav .links .ng:hover .dd { opacity: 0; visibility: hidden; pointer-events: none; }
  .nav .links .ng:focus-within .dd { opacity: 1; visibility: visible; pointer-events: auto; }
  .cardx:hover, .mg-item:hover, .rc:hover { background: none; }
}

/* the falling chip is decorative and animated on a fixed layer */
.q1-stage { will-change: transform, opacity; }

.qs-note { margin: 26px 0 0; max-width: 88ch; padding-top: 18px;
  border-top: 1px solid var(--lf-line-soft);
  font-size: 12.5px; line-height: 1.65; letter-spacing: .005em; color: var(--lf-ink3); }
.qs-note a { color: var(--lf-ink2); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px; }
.qs-note a:hover { color: var(--lf-accent); }
@media (max-width: 700px) { .qs-note { font-size: .74rem; text-align: left; } }

/* ============================================================
   EMPHASIS SET (2026-08-25) — the missing components.
   Nine devices, each with a named competitor precedent. No new
   tokens, colours, radii or faces: everything below is built from
   --lf-* , --measure , --measure-fine , --brand-face , --mono and
   the Geist / Manrope type roles already declared above. Append to
   assets/ac.css and bump the ?v= query string.
   ============================================================ */

/* ---------- E1. Two-tone heading — Quantinuum (h1 > strong) ----------
   Quantinuum ships `h1 > strong { font-weight:800; color:#30A08E;
   font-size:3.5rem; display:block }` on every hero, and inverts the
   colour in dark sections. Our headings are already Geist 700, so the
   emphasis is carried by COLOUR + OWN LINE, not by weight. .h2 is
   already accent, so its strong inverts to ink — same trick, mirrored. */
.h1 > strong, .display > strong,
.prose .h1 > strong, .prose .display > strong {
  display: block;
  font-weight: inherit;
  color: var(--lf-accent);
}
.h2 > strong, .prose .h2 > strong,
.band-light .h2 > strong {
  display: block;
  font-weight: inherit;
  color: var(--lf-ink);
}
.h3 > strong, .prose .h3 > strong {
  font-weight: inherit;
  color: var(--lf-accent);
}

/* ---------- E2. Lead paragraph — Quantinuum (.is-headline) + IBM (dek) ----------
   Quantinuum's lead is the standfirst SIZE at body WEIGHT, one step
   under the heading; IBM's dek is body size, colour-demoted and
   measure-constrained. Same type role as .standfirst, different
   structural position: first paragraph of a section, in prose flow. */
.lead {
  font-weight: 500;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--lf-ink2);
  max-width: 60ch;
}
.h1 + .lead, .h2 + .lead, .h3 + .lead, .eyebrow + .lead { margin-top: 16px; }
.lead + .body, .lead + .prose, .lead + .runin, .lead + .spec { margin-top: 22px; }
.lead > strong { font-weight: 600; color: var(--lf-ink); }

/* ---------- E3. Run-in list — IBM (.post-body__ordered-list) ----------
   `<strong>Fault-tolerant.</strong> Logical errors are suppressed…`
   Six in one list is IBM's densest legitimate use of bold: the term is
   bold, the definition is not. .num adds IBM's colour-demoted 01/02
   step marker (their .text-gray-40 numeral beside full-strength copy). */
.runin {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  max-width: var(--measure);
}
.runin > li {
  padding: 14px 0;
  border-top: 1px solid var(--lf-line-soft);
  font-weight: 500;
  font-size: clamp(15.5px, 1.7vw, 17px);
  line-height: 1.7;
  letter-spacing: 0.01em;
  color: var(--lf-ink2);
}
.runin > li:last-child { border-bottom: 1px solid var(--lf-line-soft); }
.runin > li > strong {
  font-weight: 650;
  color: var(--lf-ink);
}
.runin.num { counter-reset: runin; }
.runin.num > li { position: relative; padding-left: 56px; }
.runin.num > li::before {
  counter-increment: runin;
  content: counter(runin, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 14px;
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--lf-ink3);
}
@media (max-width: 560px) {
  .runin.num > li { padding-left: 42px; }
  .runin.num > li::before { font-size: 19px; top: 15px; }
}

/* ---------- E4. Claim phrase — Quantinuum (bold bullet = the arXiv link) ----------
   Quantinuum bolds `solved the wiring problem`, `lattice surgery`,
   `break-even error rates` — and those same spans are the outbound
   links to the evidence. Google does the same: the thesis is bold
   INSIDE the anchor, so it renders bold and linked at once. Bold marks
   the claim; the claim carries its citation. */
strong.claim { font-weight: 650; color: var(--lf-ink); }
a.claim {
  font-weight: 650;
  color: var(--lf-ink);
  text-decoration: underline;
  text-decoration-color: rgba(47, 111, 184, 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 180ms ease-out;
}
a.claim:hover { text-decoration-color: var(--lf-accent); }
a.claim:active { opacity: 0.7; }

/* ---------- E5. Spec table — Rigetti (<th> carries the condition) ----------
   Rigetti hoists BOTH statistic and unit out of every cell into the
   header — `Median Fidelity (per op.)`, `Median Time Duration (µs)` —
   which is what lets the cells stay bare mono numerals. QuEra groups
   rows under a full-width category band. PsiQuantum puts the footnote
   marker inside the value, after the unit. All three, one table. */
.spec {
  width: 100%;
  max-width: var(--measure-fine);
  border-collapse: collapse;
  margin-top: 20px;
}
.spec caption {
  text-align: left;
  padding-bottom: 14px;
  font-family: var(--brand-face);
  font-weight: 400;
  font-size: clamp(10.5px, 1.1vw, 12.5px);
  line-height: 1.7;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lf-ink2);
}
.spec th {
  text-align: left;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--lf-line);
  font-family: var(--brand-face);
  font-weight: 400;
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lf-ink2);
}
.spec th:last-child { text-align: right; }
.spec td {
  padding: 13px 0;
  border-top: 1px solid var(--lf-line-soft);
  font-weight: 500;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--lf-ink2);
  vertical-align: baseline;
}
.spec tbody tr:last-child td { border-bottom: 1px solid var(--lf-line-soft); }
.spec td.v {
  text-align: right;
  padding-left: 20px;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--lf-ink);
  white-space: nowrap;
}
.spec td.v sup { font-size: 0.72em; }
.spec td.v sup a {
  color: var(--lf-ink2);
  text-decoration: none;
  transition: color 180ms ease-out;
}
.spec td.v sup a:hover { color: var(--lf-accent); }
.spec tr.grp td {
  padding: 10px 12px;
  border-top: 1px solid var(--lf-line-soft);
  background: var(--lf-band);
  font-family: var(--brand-face);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lf-ink2);
}
.band-light .spec tr.grp td { background: var(--lf-bg); }
@media (max-width: 560px) {
  .spec td { font-size: 13.5px; }
  .spec td.v { font-size: 12px; padding-left: 12px; }
}

/* ---------- E6. Callout — IBM (.post-body__callout) ----------
   IBM's callout is not a coloured box with an icon: it is a hairline
   top and bottom, 5rem of air, and one assertion set larger than the
   prose it interrupts. Rules and space do the work. One per page. */
.callout {
  margin: clamp(40px, 6vh, 72px) 0;
  padding: clamp(28px, 4vh, 44px) 0;
  border-top: 1px solid var(--lf-line-soft);
  border-bottom: 1px solid var(--lf-line-soft);
  max-width: var(--measure-fine);
}
.callout p {
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.35;
  letter-spacing: -0.008em;
  color: var(--lf-ink);
}
.callout p + p { margin-top: 0.5em; }
.callout p > strong { font-weight: inherit; color: var(--lf-accent); }
.callout .fine { margin-top: 18px; max-width: var(--measure); }

/* ---------- E7. Pull quote — IBM (.post-body__blockquote) + Quantinuum ----------
   Identical to the callout but for the generated quote marks and an
   author line — which is exactly how IBM ships it. The hanging opening
   quote is optically corrected with a negative margin. */
.callout.pull p::before { content: "\201C"; margin-left: -0.42em; }
.callout.pull p::after  { content: "\201D"; }
.callout .by {
  margin-top: 20px;
  font-family: 'Manrope', "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(13px, 1.4vw, 14.5px);
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--lf-ink2);
}
.callout .by::before, .callout .by::after { content: none; }
.callout .by strong { font-weight: 650; color: var(--lf-ink); }

/* ---------- E8. Status tag — IBM (Carbon Tag, outline) ----------
   `Currently available` / `2029 & beyond` as a pill above the h3 is
   how IBM puts an unbuilt 2029 machine on a marketing page with no
   confessional prose anywhere. Status becomes metadata, not a
   paragraph. Same pill family as .chip-cat, same caps voice as .rm-gate. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--lf-line);
  border-radius: 999px;
  padding: 4px 12px;
  font-family: var(--brand-face);
  font-weight: 400;
  font-size: 10.5px;
  line-height: 1.7;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lf-ink2);
  white-space: nowrap;
}
.tag + .h1, .tag + .h2, .tag + .h3 { margin-top: 12px; }
.tag .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--lf-accent);
  animation: breathe 3s ease-in-out infinite;
}
.tag.now { border-color: rgba(47, 111, 184, 0.45); color: var(--lf-accent); }
.tag.plan { border-color: transparent; background: var(--lf-band); }
.band-light .tag.plan { background: var(--lf-bg); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- E9. Figure + caption — IBM (.post-body__image-container__caption) ----------
   IBM captions every figure at body size in secondary ink, indented off
   the image. Nobody else in the field captions a figure at all; it is
   the cheapest way to make a page read as evidence rather than brochure.
   The run-in `<strong>Figure 1.</strong>` follows the E3 rule. */
.fig { margin: clamp(32px, 5vh, 56px) 0; max-width: var(--measure-fine); }
.fig > img, .fig > svg, .fig > picture > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--lf-line-soft);
}
.fig figcaption {
  margin-top: 14px;
  padding-left: 18px;
  border-left: 1px solid var(--lf-line);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.65;
  letter-spacing: 0.01em;
  color: var(--lf-ink2);
  max-width: var(--measure);
}
.fig figcaption strong { font-weight: 650; color: var(--lf-ink); }
.fig figcaption a {
  color: var(--lf-ink2);
  text-decoration: underline;
  text-decoration-color: rgba(47, 111, 184, 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 180ms ease-out;
}
.fig figcaption a:hover { text-decoration-color: var(--lf-accent); }

/* ---------- E10. Fit into the existing containers ----------
   .prose is capped at --measure; the wide devices take the parent
   width there rather than overflowing it. */
.prose > .callout, .prose > .fig, .prose > .spec, .prose > .runin { max-width: 100%; }
.prose p + .callout, .prose p + .fig, .prose p + .spec { margin-top: 28px; }
.body + .runin, .body + .spec { margin-top: 22px; }

@media (prefers-reduced-motion: reduce) {
  .tag .dot { animation: none; opacity: 0.85; }
}