/* P0-13 problem-to-proof homepage. Extends the Molten Ledger token system. */

.home-hero {
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding: clamp(132px, 17vh, 178px) var(--pad-x) clamp(68px, 9vh, 104px);
  color: var(--paper-ink);
}

.home-hero-copy {
  width: min(100%, 1280px);
}

.home-kicker {
  color: var(--verm-paper);
  font: 700 12px/1.45 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.figure-label {
  color: var(--verm);
  font: 650 14px/1.45 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.illustration-label {
  color: var(--cream);
  font: 700 14px/1.45 var(--sans);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

main > .band > .eyebrow {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
}

.home-title {
  max-width: 16ch;
  margin-top: 24px;
  font-size: clamp(48px, 6.6vw, 96px);
  color: var(--paper-ink);
  font-weight: 800;
  font-stretch: 66%;
  line-height: 0.95;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  text-wrap: balance;
}

.home-subhead {
  max-width: 62ch;
  margin-top: clamp(20px, 3vh, 30px);
  color: var(--paper-dim);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55;
  text-wrap: pretty;
}

.home-frame {
  display: grid;
  grid-template-columns: 0.72fr 1fr 1.2fr;
  max-width: 1200px;
  margin-top: clamp(34px, 5vh, 56px);
  border-block: 2px solid var(--hair-paper);
}

.home-frame > div {
  display: grid;
  align-content: start;
  gap: 11px;
  min-width: 0;
  min-height: 132px;
  padding: 22px clamp(20px, 2.5vw, 34px) 22px 0;
}

.home-frame > div + div {
  padding-left: clamp(20px, 2.5vw, 34px);
  border-left: 2px solid var(--hair-paper);
}

.home-frame span {
  color: var(--paper-dim);
  font: 700 11px/1.4 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.home-frame strong,
.home-frame a {
  color: var(--paper-dim);
  font-size: 16px;
  font-weight: 450;
  line-height: 1.55;
}

.home-frame strong {
  color: var(--paper-ink);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 620;
  line-height: 1.12;
}

.home-actions,
.access-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.home-actions .btn,
.access-actions .btn {
  font-family: var(--sans);
  font-weight: 700;
}

.home-hero .btn-primary,
.access-close .btn-primary {
  border-color: var(--paper-ink);
  background: var(--paper-ink);
  color: var(--cream-bright);
}

.home-hero .btn-primary:hover,
.access-close .btn-primary:hover {
  border-color: var(--ink-2);
  background: var(--ink-2);
}

.home-hero .btn-quiet,
.access-close .btn-quiet {
  border-color: var(--paper-ink);
  color: var(--paper-ink);
}

.home-hero .btn-quiet:hover,
.access-close .btn-quiet:hover {
  border-color: var(--verm-paper);
  color: var(--verm-paper);
}

main > .receipt-spine.band-olive {
  padding: 0 var(--pad-x) clamp(44px, 7vh, 78px);
  background: var(--olive);
}

main > .receipt-spine.band-olive ol {
  border-block: 2px solid var(--cream);
}

main > .receipt-spine.band-olive li + li {
  border-left-color: var(--cream);
}

main > .receipt-spine.band-olive li:not(:last-child)::after {
  background: var(--olive);
  color: var(--cream-bright);
}

main > .receipt-spine.band-olive a,
main > .receipt-spine.band-olive .spine-relation,
main > .receipt-spine.band-olive .spine-copy,
main > .receipt-spine.band-olive .spine-status,
main > .receipt-spine.band-olive .spine-overflow-cue {
  color: var(--cream);
}

main > .receipt-spine.band-olive .spine-kind,
main > .receipt-spine.band-olive .spine-overflow-cue::after {
  color: var(--cream-bright);
}

.section-scan {
  max-width: 64ch;
  margin-bottom: clamp(24px, 4vh, 40px);
  color: var(--cream-dim);
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.6;
}

.section-scan strong {
  display: block;
  margin-bottom: 8px;
  color: var(--cream);
  font-weight: 650;
}

/* FIG 1.1 — the business problem before the product answer. */
.problem-state-section {
  padding-top: clamp(82px, 11vh, 132px);
}

.problem-state-figure {
  margin: 0;
  overflow-x: auto;
  border-top: 2px solid var(--hair-dark);
  scrollbar-color: var(--verm) var(--ink);
  scrollbar-width: thin;
}

.problem-state-figure figcaption {
  position: sticky;
  left: 0;
  display: grid;
  gap: 15px;
  max-width: 980px;
  padding: clamp(30px, 5vw, 56px) 0 30px;
}

.problem-state-figure .figure-label {
  color: var(--verm);
}

.problem-state-figure .h2 {
  margin: 0;
}

.figure-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  color: var(--cream-faint);
  font: 600 14px/1.5 var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.problem-state-figure svg {
  display: block;
  width: 100%;
  min-width: 860px;
  height: auto;
}

.figure-field {
  fill: var(--ink-2);
  stroke: var(--bronze-muted);
  stroke-width: 2;
}

.node-dot {
  fill: var(--ink);
  stroke: var(--verm);
  stroke-width: 2.5;
}

.system-name,
.unresolved-title {
  fill: var(--cream);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 650;
  letter-spacing: 1px;
}

.record-label {
  fill: var(--cream-faint);
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.5px;
}

.broken-paths path {
  fill: none;
  stroke: var(--bronze-muted);
  stroke-width: 2;
  stroke-dasharray: 9 8;
}

.broken-cross {
  opacity: 0.4;
}

.broken-end {
  fill: none;
  stroke: var(--verm);
  stroke-width: 2;
}

.unresolved-ring {
  fill: var(--ink-3);
  stroke: var(--verm);
  stroke-width: 2;
  stroke-dasharray: 10 9;
}

.unresolved-orbit-text {
  fill: var(--cream-faint);
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 1.85px;
}

.unresolved-orbit-rotor {
  transform-box: fill-box;
  transform-origin: center;
}

.unresolved-mark {
  fill: var(--verm);
  font-family: var(--serif);
  font-size: 74px;
  font-style: italic;
}

.unresolved-title {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 1.2px;
}

.figure-foot {
  position: sticky;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-width: min(100%, 860px);
  padding: 18px 0 0;
  color: var(--cream-dim);
  font: 600 14px/1.5 var(--sans);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.figure-foot a {
  flex: none;
  color: var(--verm);
  text-underline-offset: 4px;
}

/* FIG 2.1 — Ax0s's own operation, recorded as a bounded chronology. */
.own-story-section,
.jobs-section {
  border-top: 2px solid var(--hair-dark);
  background: var(--ink-2);
}

.story-premise {
  max-width: 24ch;
  margin-top: clamp(32px, 5vw, 58px);
  color: var(--cream);
  font-size: clamp(32px, 4.8vw, 68px);
  font-weight: 620;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.story-ledger,
.jobs-ledger {
  margin: clamp(48px, 7vw, 80px) 0 0;
  border: 2px solid var(--hair-dark);
}

.story-ledger-head,
.jobs-ledger-head {
  display: grid;
  gap: 15px;
  max-width: 980px;
  padding: clamp(28px, 4vw, 48px) 0;
}

.story-ledger-head .figure-label,
.jobs-ledger-head .figure-label {
  color: var(--verm);
}

.story-ledger-head .figure-title,
.jobs-ledger-head .figure-title {
  margin: 0;
  color: var(--cream);
}

.story-ledger-head .figure-meta,
.jobs-ledger-head .figure-meta {
  color: var(--cream-faint);
}

.story-chronology,
.jobs-ledger ol {
  border-top: 1px solid var(--hair-dark);
  list-style: none;
}

.story-chronology li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) minmax(128px, 0.24fr);
  gap: clamp(18px, 3vw, 42px);
  align-items: start;
  padding: clamp(24px, 3.5vw, 40px) 0;
  border-bottom: 1px solid var(--hair-dark);
}

.story-sequence,
.story-state,
.job-sequence,
.job-result > span {
  color: var(--verm);
  font: 650 12px/1.45 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.story-chronology h3,
.jobs-ledger h3 {
  color: var(--cream);
  font-size: clamp(21px, 2.3vw, 32px);
  font-weight: 620;
  line-height: 1.12;
  text-wrap: balance;
}

.story-chronology p,
.jobs-ledger li > div p,
.job-result {
  max-width: 68ch;
  margin-top: 10px;
  color: var(--cream-dim);
  font-size: 16px;
  line-height: 1.62;
  text-wrap: pretty;
}

.story-state {
  justify-self: end;
  color: var(--cream-faint);
  text-align: right;
}

.story-ledger-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  padding: 22px 0;
}

.story-ledger-foot a {
  color: var(--verm);
  font: 700 12px/1.45 var(--sans);
  letter-spacing: 0.08em;
  text-underline-offset: 4px;
  text-transform: uppercase;
}

/* FIG 4.2 — the outcomes Ax0s is hired to produce, not mechanism steps. */
.jobs-ledger ol > li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) minmax(220px, 0.42fr);
  gap: clamp(18px, 3vw, 42px);
  align-items: start;
  padding: clamp(28px, 4vw, 46px) 0;
  border-bottom: 1px solid var(--hair-dark);
}

.job-result {
  margin-top: 0;
  padding-left: clamp(18px, 3vw, 34px);
  border-left: 1px solid var(--hair-dark);
}

.job-result > span {
  display: block;
  margin-bottom: 9px;
}

/* Compact static projection of the top integration-registry rows. */
.integration-snapshot {
  border-top: 2px solid var(--paper-ink);
}

.home-ledger-scroll {
  margin-top: clamp(36px, 6vw, 62px);
  overflow-x: auto;
  border: 2px solid var(--paper-ink);
  background: var(--cream-bright);
  scrollbar-color: var(--verm-paper) var(--cream-bright);
  scrollbar-width: thin;
}

.home-ledger-scroll:focus-visible {
  outline: 2px solid var(--paper-ink);
  outline-offset: 4px;
}

.home-integration-ledger {
  width: 100%;
  min-width: 1050px;
  border-collapse: collapse;
  color: var(--paper-dim);
  font-size: 14px;
  line-height: 1.5;
}

.home-integration-ledger th,
.home-integration-ledger td {
  padding: 18px 16px;
  border-right: 1px solid var(--rule-paper);
  border-bottom: 1px solid var(--rule-paper);
  text-align: left;
  vertical-align: top;
}

.home-integration-ledger th:last-child,
.home-integration-ledger td:last-child {
  border-right: 0;
}

.home-integration-ledger tbody tr:last-child th,
.home-integration-ledger tbody tr:last-child td {
  border-bottom: 0;
}

.home-integration-ledger thead th {
  background: var(--paper-ink);
  color: var(--cream-bright);
  font: 650 14px/1.4 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.home-integration-ledger tbody th {
  width: 190px;
  color: var(--paper-ink);
  font-size: 16px;
  font-weight: 650;
}

.home-integration-ledger td:nth-child(2),
.home-integration-ledger td:nth-child(3),
.home-integration-ledger td:nth-child(4),
.home-integration-ledger td:nth-child(5) {
  font-family: var(--mono);
  font-size: 14px;
}

.home-integration-ledger td:last-child {
  min-width: 280px;
}

.home-integration-ledger a {
  color: var(--verm-paper);
  text-underline-offset: 4px;
}

.integration-snapshot .claim-link {
  text-decoration-color: var(--verm-paper);
}

.runtime-mark {
  display: inline-block;
  padding: 5px 8px;
  border: 2px solid currentColor;
  color: var(--paper-ink);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.ledger-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  margin-top: 22px;
}

.ledger-actions p {
  max-width: 62ch;
  color: var(--paper-dim);
  font-size: 14px;
}

.text-link,
.section-links a {
  color: var(--verm-paper);
  font: 700 12px/1.45 var(--sans);
  letter-spacing: 0.08em;
  text-underline-offset: 4px;
  text-transform: uppercase;
}

.text-link {
  flex: none;
}

/* Write → recall → adjudicated supersession. */
.memory-mechanism {
  padding-bottom: clamp(72px, 10vh, 128px);
  border-top: 2px solid var(--hair-paper);
}

.mechanism-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(38px, 6vw, 64px);
  border: 2px solid var(--hair-paper);
  list-style: none;
}

.mechanism-flow li {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 210px;
  padding: clamp(26px, 4vw, 42px);
  background: var(--paper-card);
}

.mechanism-flow li + li {
  border-left: 2px solid var(--hair-paper);
}

.mechanism-flow li:not(:last-child)::after {
  content: "→";
  position: absolute;
  z-index: 1;
  top: 50%;
  right: -17px;
  width: 34px;
  background: var(--paper-card);
  color: var(--verm-paper);
  font: 650 18px/1 var(--mono);
  text-align: center;
}

.mechanism-flow span,
.mechanism-flow small {
  color: var(--paper-dim);
  font: 650 14px/1.4 var(--mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.mechanism-flow strong {
  margin-top: 18px;
  color: var(--paper-ink);
  font-size: clamp(24px, 2.7vw, 38px);
  font-weight: 620;
  line-height: 1.08;
}

.mechanism-flow small {
  margin-top: auto;
  color: var(--paper-dim);
}

.section-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  margin-top: 28px;
}

.paper .section-links a {
  color: var(--verm-paper);
}

/* Recorded terminal specimen; mono is reserved for the artifact itself. */
.receipt-section {
  border-top: 2px solid var(--hair-dark);
}

.terminal-specimen {
  margin-top: clamp(38px, 6vw, 64px);
  overflow: hidden;
  border: 2px solid var(--verm);
  border-radius: 0;
  background: var(--ink);
}

.terminal-specimen pre code::after {
  content: "▮";
  margin-left: 3px;
  color: var(--verm);
}

.terminal-specimen figcaption {
  display: grid;
  align-items: start;
  justify-content: stretch;
  gap: 20px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--hair-dark);
  color: var(--cream-dim);
  font: 650 14px/1.45 var(--mono);
  letter-spacing: 0.1em;
  text-transform: none;
}

.terminal-specimen figcaption > .figure-label {
  color: var(--verm);
}

.terminal-specimen .figure-title,
.correction-core .figure-title {
  max-width: 34ch;
  color: var(--cream);
  text-transform: none;
}

.terminal-specimen .figure-meta,
.correction-core .figure-meta {
  color: var(--cream-faint);
  text-transform: none;
}

.terminal-specimen .figure-meta span,
.correction-core .figure-meta span {
  color: inherit;
}

.terminal-specimen figcaption a {
  color: var(--cream-dim);
  text-underline-offset: 4px;
}

.terminal-specimen pre {
  overflow: auto;
  padding: clamp(22px, 4vw, 42px);
  color: var(--cream-dim);
  font: 400 13px/1.7 var(--mono);
  tab-size: 2;
}

.receipt-takeaway {
  max-width: 76ch;
  margin-top: 24px;
  padding: 18px 0;
  border-block: 1px solid var(--hair-dark);
  color: var(--cream-dim);
  font-size: 16px;
  line-height: 1.65;
}

.receipt-takeaway strong {
  color: var(--cream);
  font-weight: 620;
}

.section-links-dark a {
  color: var(--verm);
}

/* Current direction and hard boundary, followed by the non-evidence illustration. */
.boundary-ledger {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(38px, 6vw, 64px);
  border: 2px solid var(--cream);
}

.boundary-ledger article {
  min-height: 260px;
  padding: clamp(26px, 4vw, 42px);
  border-right: 1px solid var(--cream);
  border-bottom: 1px solid var(--cream);
}

.boundary-ledger article:nth-child(2n) {
  border-right: 0;
}

.boundary-ledger article:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.boundary-ledger article > span {
  color: var(--cream);
  font: 650 14px/1.4 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.boundary-ledger h3 {
  margin-top: 22px;
  color: var(--cream);
  font-size: clamp(24px, 2.5vw, 34px);
  line-height: 1.12;
}

.boundary-ledger p {
  margin-top: 18px;
  color: var(--cream);
  font-size: 16px;
}

.correction-core {
  margin-top: clamp(60px, 9vw, 104px);
  overflow: hidden;
  border: 2px solid var(--paper-ink);
  border-radius: 0;
  background: var(--paper);
  color: var(--paper-ink);
}

.correction-core-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  border-bottom: 2px solid var(--hair-paper);
}

.correction-core-head h2 {
  margin-top: 7px;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.1;
}

.fixture-label {
  margin-top: 5px;
  color: var(--verm-paper);
  font: 600 14px/1.4 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.fixture-link {
  color: var(--verm-paper);
  font: 600 13px/1.4 var(--mono);
  text-underline-offset: 4px;
}

.correction-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(230px, 0.85fr);
}

.correction-canvas-wrap {
  min-width: 0;
  padding: 18px;
  border-right: 2px solid var(--hair-paper);
  background: var(--ink);
}

.correction-canvas {
  display: block;
  width: 100%;
  height: 300px;
  border: 2px solid var(--verm);
  background: var(--ink);
  cursor: pointer;
}

.correction-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.correction-controls button {
  padding: 10px 12px;
  border: 2px solid var(--hair-dark);
  border-radius: 0;
  background: transparent;
  color: var(--cream-dim);
  font: 600 12px/1.4 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.correction-controls button[aria-pressed="true"] {
  border-color: var(--verm);
  color: var(--verm);
  background: var(--ink-3);
}

.correction-inspector {
  padding: 22px;
}

.correction-inspector h3 {
  color: var(--verm-paper);
  font: 600 14px/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.correction-inspector dl {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.correction-inspector div {
  padding-bottom: 13px;
  border-bottom: 1px solid var(--hair-paper);
}

.correction-inspector dt {
  color: var(--paper-dim);
  font: 600 14px/1.4 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.correction-inspector dd {
  margin-top: 6px;
  color: var(--paper-dim);
  font-size: 14px;
}

.correction-error {
  padding: 0 22px 20px;
  color: var(--paper-dim);
  font: 500 14px/1.5 var(--mono);
}

.fixture-history {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 2px solid var(--hair-paper);
  list-style: none;
}

.fixture-history li {
  padding: 18px 22px;
  color: var(--paper-dim);
  font-size: 14px;
}

.fixture-history li + li {
  border-left: 1px solid var(--hair-paper);
}

.fixture-history strong {
  display: block;
  margin-bottom: 8px;
  color: var(--paper-ink);
  font: 600 14px/1.4 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.fixture-history span {
  display: block;
  margin-top: 6px;
  color: var(--paper-dim);
}

.correction-core .illustration-label,
.correction-core .figure-title {
  color: var(--paper-ink);
}

.correction-core .figure-meta {
  color: var(--paper-faint);
}

.reconciliation-boundary > .section-links a {
  color: var(--cream);
  text-decoration-color: var(--cream-bright);
}

.reconciliation-boundary > .eyebrow,
.reconciliation-boundary > .eyebrow .idx {
  color: var(--cream);
}

.access-close {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  align-content: center;
  column-gap: clamp(48px, 9vw, 148px);
  min-height: 72svh;
  border-top: 2px solid var(--paper-ink);
}

.access-close > .eyebrow {
  grid-column: 1 / -1;
}

.access-close .h2 {
  max-width: 12em;
  font-size: clamp(38px, 6.5vw, 88px);
}

.access-close .h2 em {
  color: var(--verm-paper);
}

.access-close-detail {
  align-self: end;
  max-width: 440px;
  margin-top: clamp(76px, 13vh, 150px);
  padding-block: 24px;
  border-block: 2px solid var(--hair-paper);
}

.access-close-detail .lede {
  margin-top: 0;
}

.access-close-detail .access-actions {
  align-items: flex-start;
  flex-direction: column;
}

.receipt-verified-stamp {
  width: max-content;
  color: var(--verm);
  border-color: var(--verm);
}

.correction-canvas:focus-visible {
  outline: 2px solid var(--verm);
  outline-offset: 3px;
}

.correction-controls button {
  min-height: 44px;
  transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
}

/* Home-specific motion grammar: fragmentation, instrument readings, mechanism,
   artifact permanence, and a deliberately split access close. */
@media (prefers-reduced-motion: no-preference) {
  /* Hidden states are scoped under html.fx-armed (set only by reveal.js):
     no script, no hidden content. Fully-collapsing wipes run as .seen
     keyframes instead of clip-path hidden states — a zero-area clip pins
     the IntersectionObserver ratio at 0 and the reveal deadlocks. */
  .fx-armed .fx-hero-kicker {
    transform: translateX(-24px);
  }

  .fx-armed .fx-hero-kicker.seen {
    transform: none;
  }

  .fx-armed .fx-hero-title {
    transform: none;
    transition: opacity 700ms ease 70ms;
  }

  .fx-armed .fx-hero-title.seen {
    animation: fx-wipe-y-bottom 1050ms var(--ease) 70ms both;
  }

  .fx-armed .fx-frame-cell {
    transform: translateY(0);
    transition: opacity 650ms ease var(--d, 0ms);
  }

  .fx-armed .fx-frame-cell.seen {
    animation: fx-wipe-x-right 900ms var(--ease) var(--d, 0ms) both;
  }

  .fx-armed .fx-hero-actions {
    transform: translateX(24px);
  }

  .fx-armed .fx-hero-actions.seen {
    transform: none;
  }

  .fx-armed .fx-rule,
  .fx-armed .fx-fragment-copy {
    transform: translateX(-28px);
  }

  .fx-armed .fx-rule.seen,
  .fx-armed .fx-fragment-copy.seen {
    transform: none;
  }

  .fx-armed .fx-figure-wipe {
    clip-path: inset(0 0 16% 0);
    transform: none;
    transition: opacity 800ms ease, clip-path 1100ms var(--ease);
  }

  .fx-armed .fx-figure-wipe.seen {
    clip-path: inset(0);
  }

  .problem-state-figure.seen .broken-reach {
    animation: reach-crawl 1.9s linear infinite;
  }

  .problem-state-figure.seen .reach-b { animation-duration: 2.3s; }
  .problem-state-figure.seen .reach-c { animation-duration: 1.6s; }
  .problem-state-figure.seen .reach-d { animation-duration: 2.1s; }
  .problem-state-figure.seen .reach-e { animation-duration: 1.7s; }
  .problem-state-figure.seen .reach-f { animation-duration: 2.5s; }

  .problem-state-figure.seen .broken-cross {
    animation: reach-crawl 3.4s linear infinite reverse;
  }

  @keyframes reach-crawl {
    to {
      stroke-dashoffset: -17;
    }
  }

  .node-drift {
    transform-box: fill-box;
    transform-origin: center;
  }

  .problem-state-figure.seen .drift-a { animation: node-drift-a 7.5s ease-in-out infinite alternate; }
  .problem-state-figure.seen .drift-b { animation: node-drift-b 9s ease-in-out -2s infinite alternate; }
  .problem-state-figure.seen .drift-c { animation: node-drift-c 8s ease-in-out -4s infinite alternate; }
  .problem-state-figure.seen .drift-d { animation: node-drift-b 8.5s ease-in-out -1s infinite alternate; }
  .problem-state-figure.seen .drift-e { animation: node-drift-c 7s ease-in-out -3s infinite alternate; }
  .problem-state-figure.seen .drift-f { animation: node-drift-a 9.5s ease-in-out -5s infinite alternate; }

  @keyframes node-drift-a {
    to {
      transform: translate(4px, -6px);
    }
  }

  @keyframes node-drift-b {
    to {
      transform: translate(-5px, 4px);
    }
  }

  @keyframes node-drift-c {
    to {
      transform: translate(3px, 6px);
    }
  }

  .problem-state-figure.seen .unresolved-ring {
    animation: unresolved-dash-march 9s linear infinite;
  }

  .problem-state-figure.seen .unresolved-orbit-rotor {
    animation: unresolved-orbit-turn 80s linear infinite;
  }

  @keyframes unresolved-dash-march {
    to {
      stroke-dashoffset: -76;
    }
  }

  @keyframes unresolved-orbit-turn {
    to {
      transform: rotate(360deg);
    }
  }

  .terminal-specimen.seen pre code::after {
    animation: terminal-caret 1.15s steps(1, end) infinite;
  }

  @keyframes terminal-caret {
    50% {
      opacity: 0;
    }
  }


  .fx-armed .fx-ledger-heading,
  .fx-armed .fx-ledger-reading {
    transform: translateX(30px);
  }

  .fx-armed .fx-ledger-heading.seen,
  .fx-armed .fx-ledger-reading.seen {
    transform: none;
  }

  .fx-armed .fx-ledger-frame {
    transform: none;
    transition: opacity 650ms ease;
  }

  .fx-armed .fx-ledger-frame.seen {
    animation: fx-wipe-x-left 950ms var(--ease) both;
  }

  .fx-armed .fx-ledger-row {
    transform: none;
    transition: opacity 550ms ease var(--d, 0ms);
  }

  .fx-armed .fx-ledger-row.seen {
    animation: fx-wipe-x-right 780ms var(--ease) var(--d, 0ms) both;
  }

  .fx-armed .fx-mechanism-heading {
    transform: translateY(-20px);
  }

  .fx-armed .fx-mechanism-heading.seen {
    transform: none;
  }

  .fx-armed .fx-mechanism-step {
    transform: translateX(-30px);
    transition: opacity 650ms ease var(--d, 0ms), transform 900ms var(--ease) var(--d, 0ms);
  }

  .fx-armed .fx-mechanism-step.seen {
    transform: none;
  }

  .fx-armed .fx-artifact-rise {
    clip-path: inset(14% 0 0 0);
    transform: translateY(24px) scale(0.99);
    transition: opacity 700ms ease, transform 1000ms var(--ease), clip-path 1000ms var(--ease);
  }

  .fx-armed .fx-artifact-rise.seen {
    clip-path: inset(0);
    transform: none;
  }

  .fx-armed .fx-receipt-heading,
  .fx-armed .fx-receipt-note {
    transform: translateX(-24px);
  }

  .fx-armed .fx-receipt-heading.seen,
  .fx-armed .fx-receipt-note.seen {
    transform: none;
  }

  .fx-armed .fx-boundary-heading {
    transform: translateY(28px);
  }

  .fx-armed .fx-boundary-heading.seen {
    transform: none;
  }

  .fx-armed .fx-boundary-entry {
    transform: none;
    transition: opacity 650ms ease var(--d, 0ms);
  }

  .fx-armed .fx-boundary-entry.seen {
    animation: fx-wipe-y-top 900ms var(--ease) var(--d, 0ms) both;
  }

  .fx-armed .fx-correction-reveal {
    transform: none;
    transition: opacity 750ms ease;
  }

  .fx-armed .fx-correction-reveal.seen {
    animation: fx-wipe-center 1050ms var(--ease) both;
  }

  .fx-armed .fx-access-title {
    transform: translateX(-38px);
  }

  .fx-armed .fx-access-detail {
    transform: translateX(38px);
  }

  .fx-armed .fx-access-title.seen,
  .fx-armed .fx-access-detail.seen {
    transform: none;
  }

  /* Reveal wipes · run only on .seen, so the pre-reveal geometry the
     IntersectionObserver measures is never clipped. */
  @keyframes fx-wipe-y-bottom {
    from { clip-path: inset(0 0 100% 0); }
    to { clip-path: inset(0); }
  }

  @keyframes fx-wipe-y-top {
    from { clip-path: inset(100% 0 0 0); }
    to { clip-path: inset(0); }
  }

  @keyframes fx-wipe-x-right {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0); }
  }

  @keyframes fx-wipe-x-left {
    from { clip-path: inset(0 0 0 100%); }
    to { clip-path: inset(0); }
  }

  @keyframes fx-wipe-center {
    from { clip-path: inset(0 50% 0 50%); }
    to { clip-path: inset(0); }
  }
}

@media (max-width: 1100px) {
  .home-hero {
    min-height: auto;
  }

  .home-frame {
    grid-template-columns: 0.8fr 1.1fr 1.1fr;
  }
}

@media (max-width: 820px) {
  .home-hero {
    padding-top: 124px;
  }

  main > .receipt-spine {
    padding-top: 0;
  }

  .home-frame,
  .mechanism-flow,
  .boundary-ledger,
  .correction-stage,
  .fixture-history {
    grid-template-columns: 1fr;
  }

  .home-frame > div {
    min-height: 0;
    padding: 20px 0;
  }

  .home-frame > div + div {
    padding-left: 0;
    border-top: 2px solid var(--hair-paper);
    border-left: 0;
  }

  .mechanism-flow li {
    min-height: 160px;
  }

  .mechanism-flow li + li {
    border-top: 2px solid var(--hair-paper);
    border-left: 0;
  }

  .mechanism-flow li:not(:last-child)::after {
    top: auto;
    right: 24px;
    bottom: -17px;
    transform: rotate(90deg);
  }

  .boundary-ledger article,
  .boundary-ledger article:nth-child(2n),
  .boundary-ledger article:nth-last-child(-n + 2) {
    border-right: 0;
    border-bottom: 1px solid var(--cream);
  }

  .boundary-ledger article:last-child {
    border-bottom: 0;
  }

  .ledger-actions,
  .figure-foot,
  .terminal-specimen figcaption,
  .correction-core-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .correction-canvas-wrap,
  .fixture-history li + li {
    border-right: 0;
    border-left: 0;
  }

  .correction-canvas-wrap,
  .fixture-history li + li {
    border-bottom: 2px solid var(--hair-paper);
  }

  .story-chronology li,
  .jobs-ledger ol > li {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .story-state,
  .job-result {
    grid-column: 2;
    justify-self: start;
    text-align: left;
  }

  .job-result {
    padding: 16px 0 0;
    border-top: 1px solid var(--hair-dark);
    border-left: 0;
  }
}

@media (max-width: 540px) {
  .home-title {
    font-size: clamp(44px, 14vw, 66px);
  }

  .problem-state-figure svg {
    min-width: 760px;
  }

  .terminal-specimen pre {
    font-size: 11px;
  }

  .correction-canvas {
    height: 250px;
  }
}

@media (max-width: 840px) {
  .access-close {
    grid-template-columns: 1fr;
    align-content: start;
  }

  .access-close > .eyebrow {
    grid-column: auto;
  }

  .access-close-detail {
    align-self: auto;
    margin-top: clamp(48px, 9vh, 84px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .problem-state-figure .broken-reach,
  .problem-state-figure .broken-stops {
    animation: none;
    opacity: 1;
    transform: none;
    stroke-dashoffset: 0;
  }

  .correction-controls button {
    transition: none;
  }
}

/* Reconciliation Core — hero preview of the recorded FIG 4.1 round trip. */
.rcore-figure {
  width: 100%;
  max-width: 640px;
  margin: 0;
  border: 2px solid var(--paper-ink);
  background: var(--ink);
  color: var(--cream);
}

.rcore-head {
  display: grid;
  gap: 10px;
  padding: 22px 0 20px;
}

.rcore-eyebrow,
.rcore-head .fixture-label {
  margin: 0;
  color: var(--cream-faint);
  font-family: "Spline Sans Mono", ui-monospace, "SF Mono", monospace;
  font-size: var(--mono-label);
  font-weight: 560;
  line-height: 1.5;
}

.rcore-eyebrow {
  color: var(--verm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.rcore-head .fixture-label a,
.rcore-rail a {
  color: var(--cream);
  text-decoration-color: var(--verm);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.rcore-head .fixture-label a {
  min-height: var(--control-min);
  padding-block: 13px;
}

.rcore-head .fixture-label a:focus-visible,
.rcore-rail a:focus-visible {
  outline: 2px solid var(--verm);
  outline-offset: 4px;
}

.rcore-title {
  max-width: 25ch;
  margin: 2px 0 0;
  color: var(--cream);
  font-size: clamp(1.35rem, 1.05rem + 1.1vw, 2.05rem);
  font-weight: 620;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.rcore-svg {
  display: block;
  width: 100%;
  height: auto;
  color: var(--cream);
}

.rcore-field {
  fill: var(--ink);
  stroke: var(--bronze-muted);
  stroke-width: 1.5;
}

.rcore-axis,
.rcore-source-edge {
  fill: none;
  stroke: var(--bronze-muted);
  stroke-width: var(--world-axis);
}

.rcore-source-edge {
  stroke-dasharray: 5 6;
}

.rcore-index-dot {
  fill: var(--ink);
  stroke: var(--verm);
  stroke-width: 2;
}

.rcore-index,
.rcore-state-label,
.rcore-state-note,
.rcore-record-id,
.rcore-history-tag,
.rcore-source-chip text,
.rcore-stamp text {
  font-family: "Spline Sans Mono", ui-monospace, "SF Mono", monospace;
}

.rcore-index {
  fill: var(--cream);
  font-size: 13px;
  font-weight: 680;
}

.rcore-state-label {
  fill: var(--verm);
  font-size: 16px;
  font-weight: 680;
  letter-spacing: 2px;
}

.rcore-state-note,
.rcore-record-id,
.rcore-history-tag {
  fill: var(--cream-faint);
  font-size: 13px;
  font-weight: 520;
}

.rcore-source-chip rect,
.rcore-state-box,
.rcore-current-box,
.rcore-history-box {
  fill: var(--ink);
  stroke: var(--bronze-muted);
  stroke-width: 1.5;
}

.rcore-source-chip text {
  fill: var(--cream);
  font-size: 15px;
  font-weight: 620;
}

.rcore-divergence {
  fill: none;
  stroke: var(--bronze-muted);
  stroke-width: 1.5;
  stroke-dasharray: 7 6;
}

.rcore-record-copy {
  fill: var(--cream);
  font-family: "Archivo", "Helvetica Neue", sans-serif;
  font-size: 18px;
  font-weight: 620;
}

.rcore-current-box,
.rcore-current-rule {
  stroke: var(--verm);
  stroke-width: 2;
}

.rcore-current-rule,
.rcore-history-rule {
  fill: none;
}

.rcore-record-copy-current {
  font-size: 20px;
}

.rcore-history-box,
.rcore-record-copy-history,
.rcore-record-id-history,
.rcore-history-tag {
  opacity: 0.68;
}

.rcore-history-rule {
  stroke: var(--bronze-muted);
  stroke-width: 1.5;
  stroke-dasharray: 8 7;
  opacity: 0.78;
}

.rcore-history-transfer {
  opacity: 0.68;
  transform: translateY(310px);
  transform-box: view-box;
  transform-origin: 0 0;
}

.rcore-friday-origin {
  opacity: 0.34;
}

.rcore-resolve-edge {
  fill: none;
  stroke: var(--hot);
  stroke-width: 4;
}

.rcore-resolve-pulse {
  fill: var(--hot);
}

.rcore-link-target {
  fill: var(--ink);
  stroke: transparent;
  stroke-width: 4;
}

.rcore-stamp rect {
  fill: var(--ink);
  stroke: var(--verm);
  stroke-width: 3;
}

.rcore-stamp text {
  fill: var(--verm);
  font-size: 19px;
  font-weight: 720;
  letter-spacing: 1.5px;
}

.rcore-svg-link:focus-visible {
  outline: none;
}

.rcore-svg-link:focus-visible .rcore-link-target {
  stroke: var(--cream);
}

.rcore-rail {
  display: grid;
  gap: 0;
  margin: 20px 0 0;
  padding: 0 0 22px;
  border-top: 1px solid var(--bronze-muted);
  list-style: none;
}

.rcore-rail li {
  display: grid;
  grid-template-columns: minmax(88px, 0.32fr) minmax(0, 0.68fr);
  gap: 4px 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--cream-faint);
}

.rcore-rail span,
.rcore-rail small,
.rcore-rail code {
  font-family: "Spline Sans Mono", ui-monospace, "SF Mono", monospace;
}

.rcore-rail span {
  grid-row: 1 / span 2;
  color: var(--verm);
  font-size: var(--mono-label);
  font-weight: 650;
  line-height: 1.45;
  text-transform: uppercase;
}

.rcore-rail strong,
.rcore-rail small {
  color: var(--cream);
  font-size: 13px;
  font-weight: 560;
  line-height: 1.45;
}

.rcore-rail small {
  color: var(--cream-faint);
  font-weight: 460;
}

.rcore-rail code {
  color: inherit;
  font-size: 0.92em;
}

.rcore-rail a {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-min);
  font-size: 13px;
  font-weight: 620;
}

@media (min-width: 880px) {
  .home-hero {
    display: grid;
    grid-template-columns: minmax(0, 52fr) minmax(360px, 48fr);
    gap: clamp(38px, 5vw, 84px);
    align-items: center;
  }

  .home-hero-copy {
    width: 100%;
  }

  .home-hero .home-frame {
    grid-template-columns: 1fr;
  }

  .home-hero .home-frame > div {
    min-height: 0;
    padding: 17px 0;
  }

  .home-hero .home-frame > div + div {
    padding-left: 0;
    border-top: 2px solid var(--hair-paper);
    border-left: 0;
  }

  .rcore-figure {
    justify-self: end;
  }
}

@media (max-width: 879px) {
  .home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    min-height: auto;
  }

  .home-hero-copy {
    display: contents;
  }

  .home-kicker {
    grid-row: 1;
  }

  .home-title {
    grid-row: 2;
  }

  .home-subhead {
    grid-row: 3;
  }

  .rcore-figure {
    grid-row: 4;
    margin-top: clamp(36px, 7vw, 58px);
  }

  .home-frame {
    grid-row: 5;
    width: 100%;
  }

  .home-actions {
    grid-row: 6;
  }
}

@media (max-width: 540px) {
  .rcore-head {
    padding-top: 18px;
  }

  .rcore-svg {
    margin-top: 2px;
  }

  .rcore-rail li {
    grid-template-columns: 1fr;
    gap: 7px;
    padding-block: 15px;
  }

  .rcore-rail span {
    grid-row: auto;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .rcore-figure.is-armed:not(.is-playing) .rcore-state,
  .rcore-figure.is-armed:not(.is-playing) .rcore-resolve-edge,
  .rcore-figure.is-armed:not(.is-playing) .rcore-resolve-pulse {
    opacity: 0;
    transform: translateY(14px);
  }

  .rcore-figure.is-armed:not(.is-playing) .rcore-history-transfer {
    opacity: 0;
    transform: none;
  }

  .rcore-state,
  .rcore-resolve-edge,
  .rcore-resolve-pulse {
    transform-box: fill-box;
    transform-origin: center;
  }

  .rcore-figure.is-playing [data-rcore-state="sources"] {
    animation: rcore-enter 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .rcore-figure.is-playing [data-rcore-state="conflict"] {
    animation: rcore-collide 620ms cubic-bezier(0.16, 1, 0.3, 1) 650ms both;
  }

  .rcore-figure.is-playing .rcore-resolve-edge,
  .rcore-figure.is-playing .rcore-resolve-pulse {
    animation: rcore-resolve 620ms cubic-bezier(0.16, 1, 0.3, 1) 1320ms both;
  }

  .rcore-figure.is-playing [data-rcore-state="current"] {
    animation: rcore-current 680ms cubic-bezier(0.16, 1, 0.3, 1) 1700ms both;
  }

  .rcore-figure.is-playing [data-rcore-state="history"] {
    animation: rcore-history-ready 420ms cubic-bezier(0.16, 1, 0.3, 1) 2220ms both;
  }

  .rcore-figure.is-playing .rcore-friday-origin {
    animation: rcore-origin-handoff 1ms step-end 2380ms both;
  }

  .rcore-figure.is-playing .rcore-history-transfer {
    opacity: 0;
    transform: none;
    animation: rcore-history-transfer 920ms cubic-bezier(0.16, 1, 0.3, 1) 2380ms forwards;
  }

  .rcore-figure.is-playing [data-rcore-state="receipt"] {
    animation: rcore-stamp-press 650ms cubic-bezier(0.16, 1, 0.3, 1) 3100ms both;
  }

  @keyframes rcore-enter {
    from { opacity: 0; transform: translateY(-14px); }
    to { opacity: 1; transform: none; }
  }

  @keyframes rcore-collide {
    from { opacity: 0; transform: scaleX(0.96); }
    to { opacity: 1; transform: none; }
  }

  @keyframes rcore-resolve {
    from { opacity: 0; transform: scaleY(0.2); }
    to { opacity: 1; transform: none; }
  }

  @keyframes rcore-current {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: none; }
  }

  @keyframes rcore-history-ready {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes rcore-origin-handoff {
    from { opacity: 1; }
    to { opacity: 0.34; }
  }

  @keyframes rcore-history-transfer {
    from { opacity: 1; transform: none; }
    to { opacity: 0.68; transform: translateY(310px); }
  }

  @keyframes rcore-stamp-press {
    0% { opacity: 0; transform: translateY(-16px) scale(1.04); }
    72% { opacity: 1; transform: translateY(2px) scale(0.99); }
    100% { opacity: 1; transform: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .rcore-state,
  .rcore-resolve-edge,
  .rcore-resolve-pulse {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .rcore-friday-origin {
    opacity: 0.34;
  }

  .rcore-history-transfer {
    opacity: 0.68;
    transform: translateY(310px);
    animation: none;
  }
}