/* ==========================================================================
   HANAWI SYSTEMS · hanawisystems.com
   Direction: RUNBOOK. The console of a reliability practice.
   Static, one stylesheet, one font file, zero JavaScript.
   Serif appears only at 28px and above. Mono never sets prose.
   Accent colors are semantic facts, never decoration.
   ========================================================================== */

/* ---------- font ----------
   Source Serif 4, (c) Adobe, SIL OFL 1.1: see /assets/fonts/OFL.txt */
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-latin.woff2") format("woff2-variations");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2013, U+2018-201D;
}
@font-face {
  font-family: "Serif Fallback";
  src: local("Iowan Old Style"), local("Charter"), local("Georgia");
  size-adjust: 103%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* ---------- tokens ---------- */
:root {
  color-scheme: dark;
  /* ground */
  --bg: #0B0D10;
  --bg-raise: #0F1216;
  --panel: #14181D;
  /* structure */
  --line: #1B2027;
  --line-2: #2A3139;
  --ring-dark: #262C34;
  --ring-light: #C9CED6;
  /* ink, warm */
  --ink: #ECEAE4;
  --ink-2: #A8B0B8;
  --ink-3: #7E8894; /* AA on panel and bg at label sizes */
  --ink-4: #838B94; /* AA on panel and bg at fine sizes */
  /* semantic signals only */
  --live: #34D399;
  --live-line: rgba(52, 211, 153, 0.26);
  --gate: #E8B341;
  --alert: #F2685C;
  /* per-project accent, set by body[data-accent] */
  --acc: var(--live);
  /* type */
  --serif: "Source Serif 4", "Serif Fallback", "Iowan Old Style", Charter, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Consolas, monospace;
}
body[data-accent="violet"] { --acc: #A78BFA; }
body[data-accent="emerald"] { --acc: #34D399; }
body[data-accent="cyan"] { --acc: #22D3EE; }
body[data-accent="blue"] { --acc: #6C93F2; }
body[data-accent="amber"] { --acc: #F0B341; }

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--ink-2);
  font: 400 16px/1.65 var(--sans);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--ink); text-decoration: none; }
h1, h2, h3, h4 { color: var(--ink); font-weight: 600; }
ul, ol { padding: 0; }
::selection { background: rgba(52, 211, 153, 0.22); color: var(--ink); }
:focus-visible { outline: 2px solid var(--live); outline-offset: 2px; }
[id] { scroll-margin-top: 28px; }
.skip {
  position: absolute; left: -999px; top: 8px; z-index: 10;
  background: var(--ink); color: var(--bg); padding: 8px 16px;
  font: 600 14px/1 var(--sans); border-radius: 4px;
}
.skip:focus { left: 8px; }

/* ---------- type roles ---------- */
.eyebrow {
  font: 400 11px/1.5 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.mono-data {
  font: 400 13px/1.5 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
.mono-fine {
  font: 400 10.5px/1.5 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
}
p.mono-fine { max-width: 78ch; }
.serif-display {
  font-family: var(--serif);
  font-size: clamp(38px, 5.2vw, 64px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.021em;
  color: var(--ink);
  text-wrap: balance;
}
h1.page-title {
  font-family: var(--serif);
  text-wrap: balance;
  font-size: clamp(34px, 3.6vw, 44px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.018em;
}
h2 {
  font-family: var(--serif);
  font-size: 32px;
  line-height: 1.22;
  letter-spacing: -0.012em;
  padding-top: 14px;
  position: relative;
  text-wrap: balance;
}
h2::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 32px; height: 2px;
  background: var(--gate);
}
h3 {
  font: 600 17px/1.35 var(--sans);
  letter-spacing: 0.005em;
}
p { max-width: 62ch; text-wrap: pretty; }
.lead { font-size: 18px; line-height: 1.62; max-width: 58ch; }
p a, li a, .body-link {
  color: var(--ink);
  border-bottom: 1px solid rgba(236, 234, 228, 0.28);
}
p a:hover, li a:hover, .body-link:hover { border-bottom-color: var(--live); }
.ext::after { content: " \2197"; color: var(--ink-3); }

/* ---------- layout ---------- */
.wrap { max-width: 1240px; margin-inline: auto; padding-inline: 32px; }
.sec { padding-block: 112px 0; }
.sec:last-of-type { padding-bottom: 112px; }
.sec-grid {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  column-gap: 24px;
  border-top: 1px solid var(--line);
  padding-top: 48px;
}
.sec-grid.no-rule { border-top: none; padding-top: 0; }
.rail {
  position: relative;
  font: 400 12px/1.6 var(--mono);
  color: var(--ink-3);
  letter-spacing: 0.1em;
}
.rail::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: -12px;
  width: 1px;
  background: var(--line);
}
.rail .idx { display: block; color: var(--ink-3); }
.rail .tag { display: block; margin-top: 8px; font-size: 10.5px; color: var(--ink-4); text-transform: uppercase; }
.main-col {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 0;
}
.span-7 { grid-column: span 7; min-width: 0; }
.span-8 { grid-column: span 8; min-width: 0; }
.span-12 { grid-column: 1 / -1; min-width: 0; }
.span-5 { grid-column: span 5; min-width: 0; }
.span-6 { grid-column: span 6; min-width: 0; }
.span-4 { grid-column: span 4; min-width: 0; }

/* ---------- masthead ---------- */
.masthead { border-bottom: 1px solid var(--line); }
.masthead .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  gap: 24px;
}
.wordmark {
  font: 400 12px/1 var(--mono);
  letter-spacing: 0.22em;
  color: var(--ink);
  white-space: nowrap;
}
.wordmark .crumb { color: var(--ink-4); letter-spacing: 0.12em; }
.wordmark a { color: var(--ink); }
.wordmark a.crumb { color: var(--ink-4); }
.wordmark a.crumb:hover { color: var(--ink-2); }
.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 400 14px/1 var(--sans);
}
.nav-links a { color: var(--ink-2); padding: 8px 6px; }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--ink); }
.nav-links .sep { color: var(--ink-4); }
.nav-cta {
  margin-left: 12px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  padding: 9px 14px;
  color: var(--ink) !important;
  white-space: nowrap;
}
.nav-cta:hover { border-color: var(--live-line); }
.nav-toggle { display: none; }

/* ---------- buttons ---------- */
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.btn {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 20px;
  background: var(--ink);
  color: var(--bg);
  font: 600 15px/1 var(--sans);
  border-radius: 4px;
}
.btn:hover { background: #FFFFFF; }
.link-ghost {
  color: var(--ink);
  font: 400 15px/1.4 var(--sans);
  border-bottom: 1px solid rgba(236, 234, 228, 0.28);
  padding-bottom: 2px;
}
.link-ghost:hover { border-bottom-color: var(--live); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(900px 620px at 12% -12%, rgba(52, 211, 153, 0.05), transparent 62%),
    radial-gradient(rgba(255, 255, 255, 0.026) 1px, transparent 1px);
  background-size: auto, 4px 4px;
}
.hero .sec-grid { border-top: none; padding-top: 64px; padding-bottom: 56px; }
.hero-copy > * + * { margin-top: 32px; }
.hero-copy .eyebrow { margin-top: 0; }
.hero-copy .serif-display { margin-top: 16px; max-width: 15ch; }
.proof-line { margin-top: 28px; }
.proof-line .mono-data { color: var(--ink-2); letter-spacing: 0.04em; }
.proof-line .mono-fine { margin-top: 6px; }
.hero-map { align-self: start; }
.hero-map svg { width: 100%; height: auto; }
.availability { display: flex; align-items: center; gap: 8px; margin-top: 16px; }

/* status dots: drawn only when checkable against a fact */
.dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  flex: none;
}
.dot--live { background: var(--live); }
.dot--gate { background: var(--gate); }
.dot--done { background: var(--ink-3); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.dot--pulse { animation: pulse 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .dot--pulse { animation: none; }
}
.status-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font: 400 11px/1.6 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.status-line .dot { margin-top: 5px; }

/* ---------- numbers band ---------- */
.band {
  background:
    radial-gradient(rgba(255, 255, 255, 0.026) 1px, transparent 1px) var(--bg-raise);
  background-size: 4px 4px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.band .wrap {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.band .cell {
  padding: 36px 24px 32px 24px;
  border-left: 1px solid var(--line);
}
.band .cell:first-child { border-left: none; padding-left: 0; }
.band .figure {
  font: 500 34px/1.1 var(--mono);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}
.band .label {
  min-height: 33px;
  margin-top: 10px;
  font: 400 11px/1.5 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.band .src { margin-top: 8px; }

/* ---------- ledger tables ---------- */
.ledger { width: 100%; border-collapse: collapse; }
.ledger caption { text-align: left; }
.ledger th {
  font: 400 11px/1.4 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: left;
  padding: 0 24px 12px 0;
  border-bottom: 1px solid var(--line-2);
  font-weight: 400;
}
.ledger td {
  padding: 18px 24px 18px 0;
  border-bottom: 1px solid var(--line);
  font: 400 13px/1.55 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  vertical-align: top;
}
.ledger td.t-title {
  font: 600 16px/1.4 var(--sans);
  color: var(--ink);
  letter-spacing: 0;
}
.ledger td.t-body { font: 400 15px/1.55 var(--sans); letter-spacing: 0; max-width: 46ch; }
.ledger tr:hover td { background: rgba(255, 255, 255, 0.035); }
.row-link:hover td.t-title a,
.row-link:focus-within td.t-title a { color: var(--live); }
.row-link { position: relative; }
.row-link a::after { content: ""; position: absolute; inset: 0; }
.row-link a { color: var(--ink); }
.arrow-cell { text-align: right; color: var(--ink-3); }
.row-link:hover .arrow-cell { color: var(--live); }

/* spec dl (case studies, about, services) */
.spec {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0;
  border-top: 1px solid var(--line-2);
}
.spec dt, .spec dd {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font: 400 12px/1.6 var(--mono);
}
.spec dt {
  padding-right: 24px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.spec dd { color: var(--ink); font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }

/* ---------- evidence figures ---------- */
.evidence {
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding-bottom: 8px;
  overflow: hidden;
  margin: 0;
}
.evidence .bezel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 30px;
  padding: 4px 12px;
  border-bottom: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.evidence .bezel .path {
  font: 400 10.5px/1.4 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.evidence .bezel .state {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 400 10.5px/1 var(--mono);
  letter-spacing: 0.12em;
  color: var(--ink-3);
  white-space: nowrap;
}
.evidence .mount {
  margin: 8px 8px 0 8px;
  border-radius: 4px;
  background: #0E1116;
  box-shadow: inset 0 0 0 1px var(--ring-dark);
  padding: 1px;
}
.evidence[data-shot="light"] .mount { box-shadow: inset 0 0 0 1px var(--ring-light); }
.evidence .mount img { border-radius: 3px; width: 100%; }
.evidence .mount > .sysmap {
  background: #0E1116;
  padding: 20px 24px;
  box-sizing: border-box;
}
.evidence figcaption {
  margin: 12px 12px 4px 12px;
  font: 400 11px/1.6 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.evidence figcaption b { color: var(--ink-3); font-weight: 400; margin-right: 8px; }
.fig-stack { display: grid; row-gap: 48px; }

.cta .proof-line .mono-data,
footer.site .stamp .mono-fine { max-width: none; }

/* .bleed-right retired 2026-08-10 by client instruction: the 50%-50vw math
   resolved against grid tracks, overflowing the viewport by ~286px and forcing
   horizontal scroll. Evidence figures now fill their grid area, fully visible. */

/* ---------- selected work blocks (home) ---------- */
.work-block {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 32px;
  padding: 56px 0;
  border-bottom: 1px solid var(--line);
}
.work-block:last-of-type { border-bottom: none; }
.work-block .txt { grid-column: span 5; align-self: center; min-width: 0; }
.work-block .fig { grid-column: span 7; min-width: 0; }
.work-block.flip .txt { order: 2; }
.work-block.flip .fig { order: 1; }
.work-block h3 {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.012em;
}
.work-block .status-line { margin-top: 14px; }
.work-block p { margin-top: 16px; font-size: 15px; }
.work-block .more { display: inline-block; margin-top: 20px; }

/* ---------- quotes ---------- */
.quotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 24px;
  align-items: start;
}
.quotes blockquote { margin: 0; }
.quotes .q-mark { color: var(--ink-4); font: 400 28px/0.5 var(--serif); display: block; margin-bottom: 12px; }
.quotes p {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.45;
  color: var(--ink);
  letter-spacing: -0.004em;
}
.quotes p.attr {
  margin-top: 14px;
  font: 400 10.5px/1.5 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* ---------- engagement steps ---------- */
.steps { list-style: none; counter-reset: step; }
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 72px 1fr;
  column-gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.steps li::before {
  padding-top: 2px;
  content: "0" counter(step);
  font: 400 12px/1.8 var(--mono);
  letter-spacing: 0.1em;
  color: var(--ink-3);
}
.steps h3 { margin-bottom: 6px; }
.steps p { font-size: 15px; }

/* numbered decision lists on case pages */
.decisions { list-style: none; counter-reset: dec; display: grid; row-gap: 28px; }
.decisions li { counter-increment: dec; display: grid; grid-template-columns: 40px 1fr; column-gap: 16px; }
.decisions li > div, .steps li > div { min-width: 0; }
.decisions li::before {
  padding-top: 2px;
  content: counter(dec, decimal-leading-zero);
  font: 400 12px/1.9 var(--mono);
  color: var(--ink-3);
  letter-spacing: 0.1em;
}
.decisions h3 { margin-bottom: 4px; }
.decisions p { font-size: 15px; }

/* fail-safe table */
.failsafe { width: 100%; border-collapse: collapse; }
.failsafe th {
  font: 400 11px/1.4 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: left;
  font-weight: 400;
  padding: 0 24px 12px 0;
  border-bottom: 1px solid var(--line-2);
}
.failsafe td {
  padding: 16px 24px 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.55;
  vertical-align: top;
}
.failsafe td:first-child {
  font: 600 14px/1.5 var(--sans);
  color: var(--ink);
  white-space: nowrap;
}
.failsafe td:last-child { max-width: 60ch; }

/* result list */
.results { list-style: none; display: grid; row-gap: 18px; }
.results li {
  display: grid;
  grid-template-columns: 16px 1fr;
  column-gap: 12px;
  font-size: 15px;
  line-height: 1.55;
  max-width: 62ch;
}
.results li::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ink-3);
  margin-top: 7px;
}
.results .src { display: block; margin-top: 4px; }

/* ---------- case study scaffolding ---------- */
.case-header { border-top: 2px solid var(--acc); padding-top: 40px; }
.case-header .outcome { margin-top: 18px; }
.case-header .status-line { margin-top: 22px; }
.case-spec { margin-top: 40px; max-width: 560px; }
.case-aside { border-top: 2px solid var(--acc); padding-top: 40px; }
.case-aside .case-spec { margin-top: 0; }
.case-body.sec-gap { margin-top: 88px; }
.case-body.span-12 .evidence:has(.sysmap) { max-width: 780px; }
.case-body h2 { margin-bottom: 24px; }
.case-body .sec-gap { margin-top: 88px; }
.case-body p + p { margin-top: 16px; }
.prevnext { border-top: 1px solid var(--line-2); }
.prevnext a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.prevnext .dir { font: 400 11px/1.5 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.prevnext .t { font: 600 17px/1.4 var(--sans); color: var(--ink); }
.prevnext a:hover .t { color: var(--live); }

/* ---------- system map SVG ---------- */
.sysmap { width: 100%; height: auto; }
.sysmap .node { fill: #101419; stroke: var(--line-2); }
.sysmap .node--gate { stroke: var(--gate); }
.sysmap .lbl {
  font: 400 10.5px var(--mono);
  letter-spacing: 0.08em;
  fill: var(--ink-3);
  text-transform: uppercase;
}
.sysmap .lbl--strong { fill: var(--ink-2); }
.sysmap .edge { stroke: var(--line-2); fill: none; stroke-width: 1; }
.sysmap .edge--fail { stroke: var(--alert); stroke-dasharray: 3 4; opacity: 0.7; }
.sysmap .pulse { fill: var(--live); }

/* ---------- CTA ---------- */
.cta { border-top: 1px solid var(--line-2); padding-top: 48px; }
.prevnext + .cta { border-top: none; padding-top: 0; }
.cta .serif-display { font-size: clamp(30px, 3.4vw, 44px); max-width: 22ch; }
.cta .btn-row { margin-top: 32px; }
.cta .mono-fine { margin-top: 24px; }

/* ---------- footer ---------- */
footer.site {
  border-top: 1px solid var(--line);
  margin-top: 0;
  background: var(--bg-raise);
}
footer.site .cols {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  column-gap: 24px;
  row-gap: 32px;
  padding: 48px 0;
}
footer.site h3 {
  font: 400 11px/1.5 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}
footer.site ul { list-style: none; display: grid; row-gap: 8px; }
footer.site li a { color: var(--ink-2); font-size: 14px; }
footer.site li a:hover { color: var(--ink); }
footer.site .colophon { max-width: 40ch; font-size: 13px; color: var(--ink-3); line-height: 1.7; }
footer.site .stamp {
  border-top: 1px solid var(--line);
  padding: 20px 0 28px 0;
}

/* ---------- FAQ (zero-JS details/summary) ---------- */
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 18px 0;
  font: 600 16px/1.45 var(--sans);
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  font: 400 18px/1 var(--mono);
  color: var(--ink-3);
}
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding: 0 0 20px 0; font-size: 15px; max-width: 60ch; }
.faq details:target > summary { text-decoration: underline; text-underline-offset: 4px; }

/* section exit link (deliberate section close, not an orphan) */
.sec-exit {
  border-top: 1px solid var(--line-2);
  margin-top: 56px;
  padding-top: 24px;
}

/* ---------- utility spacing ---------- */
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; } .mt-56 { margin-top: 56px; }
.mt-72 { margin-top: 72px; }
.measure { max-width: 62ch; }

/* ==========================================================================
   MOTION v2 · "the console powers on"
   Grammar, three moves only:
     BOOT    · page load: header content powers on (90ms grid), the hero map
               executes in flow order: edges draw, arrowheads land as their
               edge completes, nodes come online, pulse last (~1.9s settle)
     REVEAL  · native scroll-driven entry (zero JS). Tall blocks scrub over
               25% of their own height; short leaves over a fixed 80px so the
               pace is uniform. CTA rows and headlines are exempt so the
               conversion pixels are never opacity-0 in any snapshot.
     RESPOND · hover/toggle transitions on one 180ms clock
   Safety invariant: hidden states exist ONLY inside keyframes (from-only) or
   @supports guards. If an animation never runs, everything is visible.
   The hero SVG stagger is keyed to sibling order: 7 rects, 15 texts, 7 edge
   paths then 6 arrowhead paths, 1 circle. Adding an element to that SVG
   requires re-mapping the delay tables below. LOAD-BEARING COUNTS.
   ========================================================================== */
@media screen and (prefers-reduced-motion: no-preference) {
  :root {
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-respond: 180ms;
    --dur-boot: 600ms;
  }

  /* ---------- RESPOND ---------- */
  a, .btn, .nav-cta, .link-ghost, .nav-links a {
    transition: color var(--dur-respond) ease,
                background-color var(--dur-respond) ease,
                border-color var(--dur-respond) ease;
  }
  .ledger tr td {
    transition: background-color var(--dur-respond) ease,
                color var(--dur-respond) ease;
  }
  .prevnext .t { transition: color var(--dur-respond) ease; }

  /* FAQ glyph: + rotates 45deg into a close x on the respond clock
     (the +/- content swap outside this media query remains the static fallback) */
  .faq summary::after { transition: transform var(--dur-respond) var(--ease-out); }
  .faq details[open] summary::after { content: "+"; transform: rotate(45deg); }

  /* disclosures open on the same clock where the engine allows */
  @supports (interpolate-size: allow-keywords) {
    .faq, .nav-toggle { interpolate-size: allow-keywords; }
    .faq details::details-content {
      opacity: 0;
      block-size: 0;
      overflow: hidden;
      transition: block-size 280ms var(--ease-out), opacity 220ms ease,
                  content-visibility 280ms allow-discrete;
    }
    .faq details[open]::details-content { opacity: 1; block-size: auto; }
    .nav-toggle::details-content {
      opacity: 0;
      block-size: 0;
      overflow: hidden;
      transition: block-size 220ms var(--ease-out), opacity 180ms ease,
                  content-visibility 220ms allow-discrete;
    }
    .nav-toggle[open]::details-content { opacity: 1; block-size: auto; }
  }

  /* ---------- BOOT ---------- */
  /* from-only keyframes: the implicit end state is the element's own computed
     style, so attribute opacities (0.65/0.7/0.8) survive, and a stripped
     animation leaves everything visible */
  @keyframes rise-in { from { opacity: 0; transform: translateY(10px); } }
  @keyframes fade-on { from { opacity: 0; } }
  @keyframes edge-draw { from { stroke-dashoffset: 1; } }

  .hero-copy > * { animation: rise-in var(--dur-boot) var(--ease-out) both; }
  .hero-copy > :nth-child(1) { animation-delay: 60ms; }
  .hero-copy > :nth-child(2) { animation-delay: 0ms; } /* h1 paints first: LCP */
  .hero-copy > :nth-child(3) { animation-delay: 180ms; }
  .hero-copy > :nth-child(4) { animation-delay: 270ms; }
  .hero-copy > :nth-child(5) { animation-delay: 360ms; }
  h1.page-title { animation: rise-in var(--dur-boot) var(--ease-out) both; }
  h1.page-title ~ .lead { animation: rise-in var(--dur-boot) var(--ease-out) 90ms both; }
  h1.page-title ~ .status-line { animation: rise-in var(--dur-boot) var(--ease-out) 180ms both; }

  /* the map executes: edges draw, arrowheads land with their edge, nodes come
     online in flow order, pulse ignites last */
  .hero-map { animation: rise-in var(--dur-boot) var(--ease-out) 150ms both; }
  .hero-map .sysmap .edge {
    stroke-dasharray: 1;
    animation: edge-draw 420ms ease-in-out both;
  }
  .hero-map .sysmap .edge:nth-of-type(1) { animation-delay: 420ms; }
  .hero-map .sysmap .edge:nth-of-type(2) { animation-delay: 540ms; }
  .hero-map .sysmap .edge:nth-of-type(3) { animation-delay: 660ms; }
  .hero-map .sysmap .edge:nth-of-type(4) { animation-delay: 780ms; }
  .hero-map .sysmap .edge:nth-of-type(5) { animation-delay: 900ms; }
  .hero-map .sysmap .edge:nth-of-type(6) { animation-delay: 1020ms; }
  .hero-map .sysmap .edge:nth-of-type(7) { animation-delay: 1140ms; }
  .hero-map .sysmap rect,
  .hero-map .sysmap text,
  .hero-map .sysmap > path[fill] {
    animation: fade-on 380ms ease-out both;
  }
  .hero-map .sysmap rect:nth-of-type(1) { animation-delay: 340ms; }
  .hero-map .sysmap rect:nth-of-type(2) { animation-delay: 480ms; }
  .hero-map .sysmap rect:nth-of-type(3) { animation-delay: 620ms; }
  .hero-map .sysmap rect:nth-of-type(4) { animation-delay: 780ms; }
  .hero-map .sysmap rect:nth-of-type(5) { animation-delay: 920ms; }
  .hero-map .sysmap rect:nth-of-type(6) { animation-delay: 1060ms; }
  .hero-map .sysmap rect:nth-of-type(7) { animation-delay: 1200ms; }
  .hero-map .sysmap text:nth-of-type(-n+2) { animation-delay: 380ms; }
  .hero-map .sysmap text:nth-of-type(n+3):nth-of-type(-n+4) { animation-delay: 520ms; }
  .hero-map .sysmap text:nth-of-type(n+5):nth-of-type(-n+6) { animation-delay: 660ms; }
  .hero-map .sysmap text:nth-of-type(n+7):nth-of-type(-n+8) { animation-delay: 820ms; }
  .hero-map .sysmap text:nth-of-type(n+9):nth-of-type(-n+10) { animation-delay: 960ms; }
  .hero-map .sysmap text:nth-of-type(n+11):nth-of-type(-n+12) { animation-delay: 1100ms; }
  .hero-map .sysmap text:nth-of-type(n+13) { animation-delay: 1240ms; }
  /* the CONFIDENT label rides its own edge (edge 4), not the audit-log group */
  .hero-map .sysmap text:nth-of-type(15) { animation-delay: 900ms; }
  /* arrowheads land ~60ms before their edge finishes drawing.
     path 8=edge1, 9=edge2, 10=edge4, 11=edge7, 12=edge3, 13=edge6(fail) */
  .hero-map .sysmap > path:nth-of-type(8) { animation-delay: 720ms; }
  .hero-map .sysmap > path:nth-of-type(9) { animation-delay: 840ms; }
  .hero-map .sysmap > path:nth-of-type(10) { animation-delay: 1080ms; }
  .hero-map .sysmap > path:nth-of-type(11) { animation-delay: 1440ms; }
  .hero-map .sysmap > path:nth-of-type(12) { animation-delay: 960ms; }
  .hero-map .sysmap > path:nth-of-type(13) { animation-delay: 1320ms; }
  .hero-map .sysmap .pulse {
    animation: fade-on 300ms ease-out 1620ms both,
               pulse 2.4s ease-in-out 1920ms infinite;
  }

  /* ---------- REVEAL (scroll-driven, leaf blocks only) ---------- */
  @supports (animation-timeline: view()) {
    @keyframes reveal { from { opacity: 0; transform: translateY(10px); } }
    @keyframes reveal-fade { from { opacity: 0; } }
    /* tall blocks: scrub over a quarter of their own height */
    .work-block .txt,
    .work-block .fig,
    .fig-stack > .evidence,
    .decisions .evidence,
    .quotes blockquote,
    .spec {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 25%;
    }
    /* short leaves: a fixed 80px scrub so the pace is uniform and the
       frozen-partial zone at the fold stays a sliver. CTA headlines
       (.serif-display) and CTA rows are exempt: money pixels never hide. */
    .sec h2:not(.serif-display),
    .steps li,
    .decisions li,
    .results li,
    .prevnext a,
    .faq details,
    .sec-exit {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 80px;
    }
    /* table rows: opacity only, transforms on rows are unreliable */
    .ledger tbody tr,
    .failsafe tbody tr {
      animation: reveal-fade linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 80px;
    }
    /* counters sweep left to right; tight ranges so a fold-straddling band
       never sits visibly dimmed at load */
    .band .cell {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 15%;
    }
    .band .cell:nth-child(2) { animation-range: entry 4% entry 19%; }
    .band .cell:nth-child(3) { animation-range: entry 8% entry 23%; }
    .band .cell:nth-child(4) { animation-range: entry 12% entry 27%; }
    .band .cell:nth-child(5) { animation-range: entry 16% entry 31%; }
    .quotes blockquote:nth-child(2) { animation-range: entry 8% entry 33%; }
    .quotes blockquote:nth-child(3) { animation-range: entry 16% entry 41%; }
    /* diagrams execute as they arrive; arrowheads land as edges complete */
    .evidence .sysmap .edge {
      stroke-dasharray: 1;
      animation: edge-draw linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 45%;
    }
    .evidence .sysmap rect,
    .evidence .sysmap text {
      animation: reveal-fade linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 35%;
    }
    .evidence .sysmap path[fill] {
      animation: reveal-fade linear both;
      animation-timeline: view();
      animation-range: entry 30% entry 50%;
    }
    /* on phones the diagram mount scrolls sideways, which re-anchors view()
       timelines to a container that never scrolls: retire the effect there */
    @media (max-width: 639px) {
      .evidence .sysmap :is(.edge, rect, text, path[fill]) { animation: none; }
    }
    /* below 1240 the hero stacks and the map sits off-screen at load, so its
       time-based boot would play to nobody: port it to the scroll clock. The
       :nth-of-type(n) qualifier matches the delay rules' specificity so source
       order wins and the shorthand resets their delays. Pulse stays timed. */
    @media (max-width: 1239px) {
      .hero-map .sysmap .edge:nth-of-type(n) {
        animation: edge-draw linear both;
        animation-timeline: view();
        animation-range: entry 10% entry 45%;
      }
      .hero-map .sysmap rect:nth-of-type(n),
      .hero-map .sysmap text:nth-of-type(n) {
        animation: fade-on linear both;
        animation-timeline: view();
        animation-range: entry 5% entry 35%;
      }
      .hero-map .sysmap > path:nth-of-type(n)[fill] {
        animation: fade-on linear both;
        animation-timeline: view();
        animation-range: entry 30% entry 50%;
      }
      /* the 479px pan mount would re-anchor these timelines too: retire there */
      @media (max-width: 479px) {
        .hero-map .sysmap :is(.edge, rect, text, path[fill]) { animation: none; }
      }
    }
  }
  /* no scroll timelines: stacked-hero maps draw immediately instead of over 2s */
  @supports not (animation-timeline: view()) {
    @media (max-width: 1239px) {
      .hero-map .sysmap :is(.edge, rect, text) { animation-delay: 0s; }
      .hero-map .sysmap > path[fill] { animation-delay: 0s; }
    }
  }

  /* ---------- BOOT overrides that must beat REVEAL (order wins) ---------- */
  /* top-of-page spec readouts join the boot instead of arriving pre-revealed */
  .case-spec {
    animation: rise-in var(--dur-boot) var(--ease-out) 270ms both;
    animation-timeline: auto;
    animation-range: normal;
  }
  /* the work index IS a run log: it powers on row by row */
  .sec-grid.no-rule .ledger tbody tr {
    animation: fade-on 380ms ease-out both;
    animation-timeline: auto;
    animation-range: normal;
  }
  .sec-grid.no-rule .ledger tbody tr:nth-child(1) { animation-delay: 270ms; }
  .sec-grid.no-rule .ledger tbody tr:nth-child(2) { animation-delay: 360ms; }
  .sec-grid.no-rule .ledger tbody tr:nth-child(3) { animation-delay: 450ms; }
  .sec-grid.no-rule .ledger tbody tr:nth-child(4) { animation-delay: 540ms; }
  .sec-grid.no-rule .ledger tbody tr:nth-child(5) { animation-delay: 630ms; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1239px) {
  .sec { padding-block: 72px 0; }
  .sec:last-of-type { padding-bottom: 72px; }
  .sec-grid { grid-template-columns: 72px minmax(0, 1fr); }
  .hero .hero-copy { grid-column: 1 / -1; }
  .hero .hero-map { grid-column: 1 / -1; max-width: 540px; }
}

@media (max-width: 899px) {
  .sec { padding-block: 56px 0; }
  .sec:last-of-type { padding-bottom: 56px; }
  .sec-grid { grid-template-columns: minmax(0, 1fr); padding-top: 32px; }
  .rail { display: flex; gap: 16px; align-items: baseline; margin-bottom: 24px; }
  .rail::after { display: none; }
  .rail .tag { margin-top: 0; }
  .main-col { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .span-4, .span-5, .span-6, .span-7, .span-8 { grid-column: 1 / -1; }
  .hero .sec-grid { padding-top: 56px; padding-bottom: 48px; }
  .band .wrap { grid-template-columns: 1fr 1fr; }
  .band .cell { border-left: none; border-top: 1px solid var(--line); padding-left: 0; }
  .band .cell:nth-child(-n+2) { border-top: none; }
  .band .cell:nth-child(even) { border-left: 1px solid var(--line); padding-left: 24px; }
  .work-block { grid-template-columns: minmax(0, 1fr); padding: 40px 0; }
  .work-block .txt, .work-block .fig { grid-column: 1 / -1; }
  .work-block.flip .txt { order: 1; }
  .work-block.flip .fig { order: 2; }
  .quotes { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  footer.site .cols { grid-template-columns: minmax(0, 1fr); }

  .wordmark { white-space: normal; line-height: 1.5; }
  .band .cell:nth-child(5) { grid-column: 1 / -1; }
  .case-aside { border-top: none; padding-top: 0; }
  .case-aside .case-spec { margin-top: 40px; }

  /* nav collapses to a details disclosure, zero JS */
  .masthead .wrap { flex-wrap: wrap; height: auto; padding-block: 14px; }
  .nav-toggle { display: block; }
  .nav-toggle summary {
    list-style: none;
    cursor: pointer;
    font: 400 12px/1 var(--mono);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-2);
    padding: 16px 0 16px 24px;
    margin-block: -8px;
  }
  .nav-toggle summary::-webkit-details-marker { display: none; }
  .nav-toggle[open] summary { color: var(--ink); }
  .nav-toggle .nav-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    padding: 8px 0 4px 0;
    border-top: 1px solid var(--line);
    margin-top: 12px;
  }
  .nav-toggle .nav-links a { padding: 12px 0; width: 100%; }
  .nav-toggle .nav-links .sep { display: none; }
  .nav-toggle .nav-cta { margin: 8px 0 0 0; text-align: center; }
  .nav-desktop { display: none; }
}

@media (max-width: 639px) {
  .wrap { padding-inline: 20px; }
  .serif-display { font-size: clamp(34px, 9.4vw, 38px); }
  .failsafe td:first-child { white-space: normal; }
  .failsafe th, .failsafe td { padding-right: 16px; }
  .ledger th, .ledger td { padding-right: 16px; }
  .hero-map { max-width: 340px; }
  /* system-map diagrams keep legible label size and scroll sideways,
     with CSS scrolling shadows as the affordance */
  .evidence .mount:has(> svg) {
    overflow-x: auto;
    background:
      linear-gradient(90deg, #0E1116 40%, rgba(14, 17, 22, 0)) left / 32px 100% no-repeat,
      linear-gradient(270deg, #0E1116 40%, rgba(14, 17, 22, 0)) right / 32px 100% no-repeat,
      linear-gradient(90deg, rgba(255, 255, 255, 0.07), transparent) left / 12px 100% no-repeat,
      linear-gradient(270deg, rgba(255, 255, 255, 0.07), transparent) right / 12px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
    background-color: #0E1116;
  }
  .evidence .mount > .sysmap { background: transparent !important; }
  .evidence .mount > svg { min-width: 620px; }
  .quotes p { font-size: 18px; }
  .band .wrap { grid-template-columns: minmax(0, 1fr); }
  .band .cell,
  .band .cell:nth-child(even) { border-left: none; padding-left: 0; border-top: 1px solid var(--line); }
  .band .cell:first-child { border-top: none; }
  .band .figure { font-size: 28px; }
  .steps li { grid-template-columns: 40px 1fr; }
  .spec { grid-template-columns: 1fr; }
  .spec dt { border-bottom: none; padding-bottom: 2px; }
  .spec dd { padding-top: 0; }
  .ledger .hide-sm { display: none; }
}

@media (max-width: 479px) {
  .hero-map { overflow-x: auto; }
  .hero-map svg { min-width: 440px; }
}

@media (min-width: 900px) {
  .nav-toggle { display: none; }
}