:root {
  color-scheme: light;
  --black: #000;
  --ink: #111;
  --accent: #c41e1e;
  --accent-hover: #b51c1c;
  --accent-active: #9d1818;
  --gray-900: #1d1d1f;
  --gray-700: #555;
  --gray-500: #888;
  --gray-300: #d8d8d8;
  --gray-200: #eaeaea;
  --gray-100: #f5f5f5;
  --white: #fff;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--white); font-size: 15px; line-height: 1.5; }
button, input, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; top: .5rem; left: .5rem; transform: translateY(-160%); padding: .6rem .8rem; color: white; background: var(--accent); }
.skip-link:focus { transform: none; }

.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(14rem, 24rem);
  align-items: center;
  min-height: 64px;
  padding: 0 max(24px, calc((100vw - 1440px) / 2));
  border-bottom: 1px solid var(--gray-200);
  background: rgb(255 255 255 / .94);
  backdrop-filter: blur(16px);
}
.wordmark { display: flex; align-items: center; gap: .7rem; margin-right: 2rem; text-decoration: none; font-weight: 650; letter-spacing: -.02em; white-space: nowrap; }
.mark { display: grid; width: 28px; height: 28px; place-items: center; color: white; background: var(--accent); font-size: .82rem; }
.main-nav { display: flex; align-items: stretch; height: 64px; overflow-x: auto; }
.main-nav button { position: relative; padding: 0 .85rem; border: 0; color: var(--gray-700); background: transparent; white-space: nowrap; }
.main-nav button:hover { color: var(--accent); }
.main-nav button[aria-current="page"] { color: var(--accent); }
.main-nav button[aria-current="page"]::after { content: ""; position: absolute; right: .85rem; bottom: 0; left: .85rem; height: 2px; background: var(--accent); }
.main-nav sup { margin-left: .25rem; color: var(--gray-500); }
.search input { width: 100%; height: 36px; padding: 0 .75rem; border: 1px solid var(--gray-300); border-radius: 6px; outline: 0; background: var(--gray-100); }
.search input:focus { border-color: var(--accent); background: white; box-shadow: 0 0 0 1px var(--accent); }

.main { width: min(1440px, 100%); min-height: calc(100vh - 130px); margin: 0 auto; padding: clamp(2rem, 5vw, 5rem) clamp(1rem, 4vw, 4rem); outline: none; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, 25rem); align-items: end; gap: 3rem; padding-bottom: clamp(2rem, 5vw, 4.5rem); border-bottom: 1px solid black; }
.hero h1, .rule-hero h1 { max-width: 820px; margin: 0; color: black; font-size: clamp(3rem, 7vw, 7rem); font-weight: 650; line-height: .93; letter-spacing: -.075em; }
.hero p:not(.overline), .rule-hero p:not(.overline) { max-width: 720px; margin: 1.3rem 0 0; color: var(--gray-700); font-size: clamp(1rem, 1.7vw, 1.35rem); }
.hero > span { justify-self: end; max-width: 24rem; color: var(--gray-500); text-align: right; }
.overline { margin: 0 0 1rem; color: var(--accent); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
h2 { margin: 0; font-size: clamp(1.5rem, 2.5vw, 2.45rem); line-height: 1.05; letter-spacing: -.045em; }
h3 { margin: 0; font-size: .75rem; letter-spacing: .07em; text-transform: uppercase; }

.signal-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin: 2rem 0 0; border-top: 1px solid black; border-left: 1px solid black; }
.signal { min-height: 190px; padding: 1.25rem; border: 0; border-right: 1px solid black; border-bottom: 1px solid black; color: black; background: white; text-align: left; }
.signal:hover { color: white; background: var(--accent); }
.signal span, .signal small { display: block; }
.signal span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; }
.signal strong { display: block; margin: 1.2rem 0 .8rem; color: var(--accent); font-size: clamp(1.75rem, 3vw, 3.2rem); line-height: 1; letter-spacing: -.06em; }
.signal:hover strong { color: white; }
.signal small { max-width: 22rem; color: inherit; font-size: .85rem; }

.ops-status-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 1rem; border-top: 1px solid black; border-left: 1px solid black; }
.status-card { min-height: 140px; padding: 1rem; border: 0; border-right: 1px solid black; border-bottom: 1px solid black; background: white; text-align: left; }
.status-card:hover { box-shadow: inset 3px 0 0 var(--accent); background: var(--gray-100); }
.status-card span, .status-card small { display: block; }
.status-card span { color: var(--gray-500); font-size: .7rem; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.status-card strong { display: block; margin: .6rem 0; color: var(--accent); font-size: 2.4rem; line-height: 1; }
.status-card small { color: var(--gray-700); }

.section { margin-top: clamp(4rem, 8vw, 8rem); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.25rem; }
.section-head .overline { margin-bottom: .5rem; }
.text-link { color: var(--gray-700); text-decoration: none; }
.text-link:hover { color: var(--accent); text-decoration: underline; }
.segmented { display: flex; border: 1px solid black; }
.segmented button { padding: .48rem .8rem; border: 0; border-right: 1px solid black; background: white; }
.segmented button:last-child { border-right: 0; }
.segmented button[aria-pressed="true"] { color: white; background: var(--accent); }
.map-legend { max-width: 760px; margin: 0 0 1rem; color: var(--gray-500); }

.graph-scroll { overflow-x: auto; border: 1px solid black; background: linear-gradient(var(--gray-200) 1px, transparent 1px), linear-gradient(90deg, var(--gray-200) 1px, transparent 1px); background-size: 24px 24px; }
.graph { position: relative; width: 1240px; height: var(--graph-height); }
.graph svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.graph path { fill: none; stroke: #a0a0a0; stroke-width: 1.15; vector-effect: non-scaling-stroke; }
.graph-group { position: absolute; top: 20px; width: 255px; color: var(--gray-500); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.graph-node { position: absolute; z-index: 2; display: flex; width: 255px; min-height: 66px; padding: .75rem; border: 1px solid black; align-items: flex-start; justify-content: space-between; gap: .8rem; color: black; background: white; text-align: left; }
.graph-node:hover { color: white; background: var(--accent); }
.graph-node > span { max-width: 175px; font-weight: 650; line-height: 1.2; }
.graph-node small { color: var(--gray-500); white-space: nowrap; }
.graph-node:hover small { color: #bbb; }

.cycle-line { display: grid; grid-template-columns: repeat(9, minmax(135px, 1fr)); overflow-x: auto; border-top: 1px solid black; border-left: 1px solid black; }
.cycle-step { min-height: 160px; padding: .9rem; border-right: 1px solid black; border-bottom: 1px solid black; }
.cycle-step > span, .cycle-step > strong { display: block; }
.cycle-step > span { color: var(--gray-500); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .7rem; }
.cycle-step > strong { margin: 2.6rem 0 .7rem; }
.cycle-step button, .affected button, .gap-list button, .truth-grid button, .journey button { margin: .15rem .2rem .15rem 0; padding: .18rem .38rem; border: 1px solid var(--gray-300); border-radius: 999px; color: var(--gray-700); background: white; font-size: .72rem; }
.cycle-step button:hover, .affected button:hover, .gap-list button:hover, .truth-grid button:hover, .journey button:hover { border-color: var(--accent); color: var(--accent); }

.filter-bar { display: grid; grid-template-columns: repeat(2, minmax(12rem, 22rem)); gap: 1rem; margin: 2rem 0; padding: 1rem; border: 1px solid var(--gray-300); background: var(--gray-100); }
.filter-bar.three-columns { grid-template-columns: repeat(3, minmax(11rem, 1fr)); }
.filter-bar label { display: grid; gap: .35rem; color: var(--gray-500); font-size: .72rem; font-weight: 600; text-transform: uppercase; }
.filter-bar select { height: 40px; padding: 0 .6rem; border: 1px solid var(--gray-300); background: white; }
.rule-index { border-top: 1px solid black; }
.rule-row { display: grid; grid-template-columns: 9rem minmax(0, 1fr) minmax(10rem, 18rem) 1.5rem; width: 100%; padding: 1.15rem .4rem; border: 0; border-bottom: 1px solid var(--gray-300); align-items: start; gap: 1rem; color: black; background: white; text-align: left; }
.rule-row:hover { box-shadow: inset 3px 0 0 var(--accent); background: var(--gray-100); }
.rule-row strong, .rule-row small { display: block; }
.rule-row small { max-width: 700px; margin-top: .32rem; color: var(--gray-500); }
.rule-row .rule-technical-title { color: var(--gray-700); font-weight: 600; }
.rule-question { font-size: 1rem; letter-spacing: -.01em; }
.rule-statuses { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .65rem; }
.status-chip { display: inline-flex; width: fit-content; padding: .15rem .45rem; border: 1px solid var(--gray-300); border-radius: 999px; color: var(--gray-700); background: white; font-size: .65rem; font-weight: 650; line-height: 1.3; }
.status-chip.diverging, .status-chip.decision { border-color: var(--accent); color: var(--accent); }
.status-chip.conforming, .status-chip.implemented { border-color: black; color: black; }
.status-chip.reported, .status-chip.not_observed, .status-chip.not_measured, .status-chip.partial { color: var(--gray-700); background: var(--gray-100); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; letter-spacing: .02em; }
.rule-value { color: var(--accent); font-weight: 650; text-align: right; }

.breadcrumbs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; color: #929292; font-size: .7rem; }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); text-decoration: underline; }
.breadcrumbs i { color: var(--gray-300); font-style: normal; }
.topic-header { max-width: 940px; padding: 0 0 2rem; border-bottom: 1px solid black; }
.topic-header h1 { max-width: 900px; margin: 0; color: black; font-size: clamp(2.4rem, 5vw, 4.8rem); font-weight: 650; line-height: .98; letter-spacing: -.06em; }
.topic-header > p:not(.overline) { max-width: 760px; margin: 1rem 0 0; color: var(--gray-700); font-size: 1.1rem; }
.ops-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 2rem; border-top: 1px solid black; border-left: 1px solid black; }
.ops-summary .fact { min-height: 0; }
.topic-rules { margin-top: clamp(3rem, 6vw, 5rem); }
.topic-rules .section-head > span { color: var(--gray-500); font-size: .8rem; }
.secondary-rules { margin-top: 1.25rem; border-bottom: 1px solid black; }
.secondary-rules summary { padding: 1rem .4rem; color: var(--gray-700); cursor: pointer; font-weight: 600; }
.secondary-rules summary:hover { color: var(--accent); }
.secondary-rules[open] summary { border-bottom: 1px solid var(--gray-300); }
.rule-hero { max-width: 980px; padding-bottom: 2rem; border-bottom: 1px solid black; }
.rule-hero h1 { max-width: 900px; font-size: clamp(2.5rem, 4.5vw, 4.9rem); }
.rule-hero p:not(.overline) { max-width: 820px; margin-top: 1rem; font-size: clamp(1rem, 1.25vw, 1.15rem); }
.rule-hero .technical-heading { color: black !important; font-size: clamp(1.1rem, 1.6vw, 1.35rem) !important; font-weight: 650; }
.rule-value-box { display: grid; grid-template-columns: 10rem minmax(0, 1fr); align-items: center; gap: 1rem; margin-top: 1rem; padding: 1rem 1.2rem; border: 1px solid black; border-left: 4px solid var(--accent); }
.rule-value-box span { color: var(--gray-500); font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.rule-value-box strong { color: var(--accent); font-size: clamp(1.8rem, 3vw, 3.4rem); line-height: 1; letter-spacing: -.05em; }
.proof-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1rem; border-top: 1px solid black; border-left: 1px solid black; }
.proof-card { min-height: 220px; padding: 1.2rem; border-right: 1px solid black; border-bottom: 1px solid black; }
.proof-card h2 { margin-bottom: .9rem; font-size: 1.65rem; }
.proof-card p { margin: 0; color: var(--gray-700); }
.proof-card small { display: block; margin-top: 1rem; color: var(--gray-500); }
.proof-card.production { border-top: 3px solid var(--accent); }
.observation-summary + .observation-summary { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--gray-300); }
.observation-summary strong { color: var(--accent); }
.observation-summary p { margin-top: .35rem; }
.decision-callout { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 1rem; padding: 1rem 1.2rem; border: 1px solid black; border-left: 4px solid var(--accent); background: var(--gray-100); }
.decision-callout span, .decision-callout strong { display: block; }
.decision-callout span { color: var(--accent); font-size: .68rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.decision-callout strong { margin-top: .3rem; }
.decision-callout p { margin: .35rem 0 0; color: var(--gray-700); }
.decision-callout button, .decision-open, .inline-pill { padding: .35rem .55rem; border: 1px solid black; background: white; white-space: nowrap; }
.decision-callout button:hover, .decision-open:hover, .inline-pill:hover { border-color: var(--accent); color: var(--accent); }
.relation-chain { display: grid; grid-template-columns: 1fr auto 1fr auto 1.3fr; margin: 1rem 0 2rem; border: 1px solid black; align-items: stretch; }
.relation-chain > button, .relation-chain > div { display: grid; min-height: 76px; padding: .75rem 1rem; border: 0; align-content: center; background: white; text-align: left; }
.relation-chain > button:hover { color: white; background: var(--accent); }
.relation-chain > i { display: grid; width: 42px; place-items: center; border-right: 1px solid black; border-left: 1px solid black; color: var(--accent); font-style: normal; }
.relation-chain span { display: block; margin-bottom: .35rem; color: var(--gray-500); font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; }
.relation-chain strong { display: block; }
.affected { display: flex !important; flex-wrap: wrap; align-content: center !important; align-items: center; }
.affected > span { flex-basis: 100%; }
.detail-grid, .topic-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid black; border-left: 1px solid black; }
.fact { min-height: 155px; padding: 1.2rem; border-right: 1px solid black; border-bottom: 1px solid black; }
.fact h3 { margin-bottom: 1rem; color: var(--gray-500); }
.fact p { margin: 0; }
.fact ul { margin: 0; padding-left: 1.1rem; }
.fact li + li { margin-top: .3rem; }
.fact.wide { grid-column: 1 / -1; }
.links { margin: 0; padding: 0; list-style: none; }
.links li + li { margin-top: .35rem; }
.links a { overflow-wrap: anywhere; color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }

.journeys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 2rem; border-top: 1px solid black; border-left: 1px solid black; }
.journey { padding: 1.5rem; border-right: 1px solid black; border-bottom: 1px solid black; }
.journey header > span { color: var(--gray-500); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .7rem; text-transform: uppercase; }
.journey h2 { margin-top: .4rem; }
.journey ol { margin: 1.5rem 0 0; padding: 0; list-style: none; counter-reset: journey; }
.journey li { position: relative; min-height: 82px; padding: 0 0 1.2rem 3rem; counter-increment: journey; }
.journey li:not(:last-child)::after { content: ""; position: absolute; top: 26px; bottom: 0; left: 13px; border-left: 1px solid black; }
.journey li::before { content: counter(journey, decimal-leading-zero); position: absolute; z-index: 1; top: 0; left: 0; display: grid; width: 28px; height: 28px; border: 1px solid var(--accent); place-items: center; color: var(--accent); background: white; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .65rem; }
.journey li strong, .journey li span { display: block; }
.journey li span { margin-top: .35rem; }

.table-wrap { overflow: auto; border: 1px solid black; }
table { width: 100%; min-width: 960px; border-collapse: collapse; }
th { position: sticky; z-index: 1; top: 0; padding: .75rem; border-bottom: 1px solid black; color: var(--gray-500); background: white; text-align: left; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
td { padding: .9rem .75rem; border-bottom: 1px solid var(--gray-300); vertical-align: top; }
td small { display: block; margin-top: .35rem; color: var(--gray-500); }
td p { margin: .35rem 0 0; }
tbody tr:hover { background: var(--gray-100); }

.gap-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 2rem; border-top: 1px solid black; border-left: 1px solid black; }
.gap-list article { min-height: 260px; padding: 1.4rem; border-right: 1px solid black; border-bottom: 1px solid black; }
.gap-list h2 { margin-top: 1.8rem; font-size: 1.5rem; }
.gap-list p { color: var(--gray-700); }
.compact-section { margin-top: 3rem; }
.observation-grid, .decision-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid black; border-left: 1px solid black; }
.observation-grid article, .decision-grid article { position: relative; min-height: 270px; padding: 1.3rem; border-right: 1px solid black; border-bottom: 1px solid black; }
.observation-grid h2, .decision-grid h2 { margin: 1.4rem 0 .8rem; font-size: 1.45rem; }
.observation-grid p, .decision-grid p { color: var(--gray-700); }
.observation-grid small { display: block; margin: 1rem 0; color: var(--gray-500); }
.observation-grid button, .decision-grid article > div button { margin: .15rem .2rem .15rem 0; padding: .18rem .38rem; border: 1px solid var(--gray-300); border-radius: 999px; color: var(--gray-700); background: white; font-size: .72rem; }
.observation-grid button:hover, .decision-grid article > div button:hover { border-color: var(--accent); color: var(--accent); }
.observation-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.observation-metric { display: block; color: var(--accent); }
.decision-grid { margin-top: 2rem; }
.decision-grid dl { margin: 1.2rem 0; padding-top: .8rem; border-top: 1px solid var(--gray-300); }
.decision-grid dl div { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; }
.decision-grid dt { color: var(--gray-500); font-size: .7rem; text-transform: uppercase; }
.decision-grid dd { margin: 0; }
.decision-open { position: absolute; right: 1.3rem; bottom: 1.3rem; }
.truth-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 2rem; border-top: 1px solid black; border-left: 1px solid black; }
.truth-grid article { padding: 1.4rem; border-right: 1px solid black; border-bottom: 1px solid black; }
.truth-index { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; }
.truth-grid h2 { margin: 2rem 0; }
.truth-grid h3 { margin: 1.5rem 0 .5rem; color: var(--gray-500); }
.truth-grid blockquote { margin: 1.5rem 0; padding: 1rem; border-left: 2px solid var(--accent); background: var(--gray-100); font-weight: 600; }
.empty { padding: 3rem; border: 1px solid var(--gray-300); color: var(--gray-500); text-align: center; }
.loading { display: grid; min-height: 100vh; place-items: center; }
footer { display: flex; justify-content: space-between; gap: 2rem; max-width: 1440px; margin: 0 auto; padding: 1.4rem clamp(1rem, 4vw, 4rem); border-top: 1px solid black; color: var(--gray-500); font-size: .75rem; }

@media (max-width: 980px) {
  .site-header { grid-template-columns: auto 1fr; padding: 0 1rem; }
  .main-nav { order: 3; grid-column: 1 / -1; height: 48px; border-top: 1px solid var(--gray-200); }
  .search { justify-self: end; width: min(45vw, 22rem); }
  .hero { grid-template-columns: 1fr; gap: 1.5rem; }
  .hero > span { justify-self: start; text-align: left; }
  .signal-grid { grid-template-columns: repeat(2, 1fr); }
  .journeys, .gap-list, .truth-grid, .observation-grid, .decision-grid { grid-template-columns: 1fr; }
  .ops-summary { grid-template-columns: 1fr; }
  .ops-status-grid { grid-template-columns: 1fr; }
  .filter-bar.three-columns { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .main { padding-top: 2.5rem; }
  .wordmark { margin-right: .5rem; }
  .wordmark > span:last-child { display: none; }
  .search { width: min(72vw, 24rem); }
  .hero h1 { font-size: clamp(2.8rem, 16vw, 4.8rem); }
  .rule-hero h1 { font-size: clamp(2.8rem, 12.5vw, 3.8rem); }
  .signal-grid { grid-template-columns: 1fr; }
  .section-head { align-items: flex-start; flex-direction: column; }
  .filter-bar, .detail-grid, .topic-facts, .proof-grid { grid-template-columns: 1fr; }
  .fact.wide { grid-column: auto; }
  .rule-row { grid-template-columns: 6.7rem minmax(0, 1fr); }
  .rule-row .rule-value { grid-column: 2; text-align: left; }
  .rule-row > span:last-child { display: none; }
  .rule-value-box { grid-template-columns: 1fr; gap: .45rem; }
  .relation-chain { grid-template-columns: 1fr; }
  .relation-chain > i { width: auto; height: 36px; border: 0; border-top: 1px solid black; border-bottom: 1px solid black; }
  .decision-callout { align-items: flex-start; flex-direction: column; }
  footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }