/* Hallmark · genre: editorial · macrostructure: Narrative Workflow · theme: custom "ledger paper"
 * paper oklch(97% 0.012 85) · accent oklch(50% 0.12 160) ledger-green · Fraunces + IBM Plex Sans + IBM Plex Mono
 * enrichment: Tier A (the ledger table is the hero) · nav: N6 masthead (as a ledger header) · footer: Ft4 colophon
 * Hallmark · pre-emit critique: P5 H4 E4 S5 R5 V5 */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  color-scheme: light dark;
  --font-display: "Fraunces", "Iowan Old Style", "Times New Roman", serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-outlier: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --color-paper: oklch(97% 0.012 85);
  --color-paper-2: oklch(94.5% 0.014 85);
  --color-rule: oklch(84% 0.012 85);
  --color-rule-strong: oklch(30% 0.02 70);
  --color-neutral: oklch(52% 0.014 75);
  --color-ink: oklch(21% 0.02 65);
  --color-accent: oklch(50% 0.12 160);
  --color-accent-ink: oklch(97% 0.012 85);
  --color-focus: oklch(56% 0.16 160);

  --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem;
  --space-xl: 2.5rem; --space-2xl: 4rem; --space-3xl: 6rem; --space-4xl: 9rem;
  --text-xs: 0.78rem; --text-sm: 0.9rem; --text-md: 1.0625rem; --text-lg: 1.3rem; --text-xl: 1.7rem; --text-2xl: 2.3rem;
  --text-display: clamp(2.6rem, 5.6vw, 4.6rem);
  --rule-hair: 1px; --rule-thick: 3px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --page-gutter: clamp(1.25rem, 5vw, 4rem);
  --measure: 62ch;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --color-paper: oklch(16% 0.012 70);
  --color-paper-2: oklch(19.5% 0.014 70);
  --color-rule: oklch(32% 0.012 70);
  --color-rule-strong: oklch(80% 0.01 85);
  --color-neutral: oklch(66% 0.012 80);
  --color-ink: oklch(93% 0.008 85);
  --color-accent: oklch(72% 0.11 160);
  --color-accent-ink: oklch(16% 0.012 70);
  --color-focus: oklch(78% 0.13 160);
} }
:root[data-theme="dark"] {
  --color-paper: oklch(16% 0.012 70);
  --color-paper-2: oklch(19.5% 0.014 70);
  --color-rule: oklch(32% 0.012 70);
  --color-rule-strong: oklch(80% 0.01 85);
  --color-neutral: oklch(66% 0.012 80);
  --color-ink: oklch(93% 0.008 85);
  --color-accent: oklch(72% 0.11 160);
  --color-accent-ink: oklch(16% 0.012 70);
  --color-focus: oklch(78% 0.13 160);
}

html, body { overflow-x: clip; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font: 400 var(--text-md)/1.6 var(--font-body); -webkit-font-smoothing: antialiased; }
body::after { content: ""; position: fixed; inset: 0; z-index: 600; pointer-events: none; opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body::after { mix-blend-mode: screen; opacity: .04; } }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: var(--color-rule-strong); transition: text-decoration-color var(--dur-micro) var(--ease-out); }
a:hover { text-decoration-color: var(--color-accent); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
::selection { background: var(--color-accent); color: var(--color-accent-ink); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; font-style: normal; letter-spacing: -0.015em; margin: 0; overflow-wrap: anywhere; min-width: 0; }
p { margin: 0; }
.mono { font-family: var(--font-outlier); font-size: var(--text-sm); letter-spacing: 0; }
.num { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; }
.wrap { padding-inline: var(--page-gutter); max-width: 76rem; margin-inline: auto; }

/* Masthead — a ledger header, not a navbar */
.mast { display: grid; gap: var(--space-2xs); padding: var(--space-lg) var(--page-gutter) 0; text-align: center; }
.mast__line { font-family: var(--font-outlier); font-size: var(--text-xs); color: var(--color-neutral); letter-spacing: 0.06em; text-transform: uppercase; display: flex; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; max-width: 76rem; margin-inline: auto; width: 100%; }
.mast__name { font-family: var(--font-display); font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1; margin: var(--space-xs) 0 var(--space-2xs); text-decoration: none; color: var(--color-ink); display: inline-block; }
.mast__name b { font-weight: 500; color: var(--color-accent); }
.mast__nav ul { display: inline-flex; gap: var(--space-lg); list-style: none; padding: 0; margin: var(--space-2xs) 0 0; font-size: var(--text-sm); white-space: nowrap; flex-wrap: wrap; justify-content: center; }
.mast__rule { border: 0; border-top: var(--rule-hair) solid var(--color-rule-strong); border-bottom: var(--rule-hair) solid var(--color-rule-strong); height: 4px; margin: var(--space-sm) auto 0; width: 100%; max-width: 76rem; }

/* Hero — split diptych: argument left, the ledger itself right */
.hero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-2xl); align-items: end; padding-block: var(--space-3xl) var(--space-2xl); }
.hero h1 { font-size: var(--text-display); line-height: 1.02; max-width: 14ch; font-variation-settings: "opsz" 144; }
.hero h1 u { text-decoration: none; background: linear-gradient(transparent 70%, color-mix(in oklch, var(--color-accent) 28%, transparent) 70%); }
.hero__lede { margin-top: var(--space-lg); max-width: 46ch; color: var(--color-neutral); font-size: var(--text-lg); line-height: 1.5; }
.hero__acts { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl); align-items: baseline; }
.cta { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500; text-decoration: none; display: inline-flex; align-items: baseline; gap: var(--space-xs); white-space: nowrap; border-bottom: var(--rule-hair) solid var(--color-rule-strong); padding-bottom: 2px; transition: border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.cta:hover { border-color: var(--color-accent); }
.cta:active { transform: translateY(1px); }
.cta--primary { color: var(--color-accent); border-color: var(--color-accent); }
.cta__arrow { font-family: var(--font-outlier); font-size: var(--text-sm); }

/* The ledger: a real table, hairlines, tabular figures. Rows arrive once on load. */
.ledger { margin: 0; min-width: 0; }
.ledger__head { display: flex; justify-content: space-between; gap: var(--space-md); font-family: var(--font-outlier); font-size: var(--text-xs); color: var(--color-neutral); text-transform: uppercase; letter-spacing: 0.06em; padding-bottom: var(--space-xs); border-bottom: var(--rule-thick) solid var(--color-rule-strong); }
.ledger table { width: 100%; border-collapse: collapse; font-family: var(--font-outlier); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.ledger th { text-align: left; font-weight: 400; color: var(--color-neutral); padding: var(--space-xs) var(--space-xs) var(--space-xs) 0; border-bottom: var(--rule-hair) solid var(--color-rule); white-space: nowrap; }
.ledger td { padding: var(--space-sm) var(--space-xs) var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); white-space: nowrap; vertical-align: baseline; }
.ledger .r { text-align: right; padding-right: 0; }
.ledger th.r { padding-right: 0; }
.ledger .vendor { font-family: var(--font-body); font-weight: 500; color: var(--color-ink); }
.ledger tr.review td { color: var(--color-neutral); }
.ledger tr.review .flag { font-size: var(--text-xs); border: var(--rule-hair) solid var(--color-rule-strong); border-radius: 2px; padding: 0 var(--space-2xs); margin-left: var(--space-xs); color: var(--color-ink); }
.ledger tfoot td { border-bottom: 0; border-top: var(--rule-hair) solid var(--color-rule-strong); padding-top: var(--space-sm); font-weight: 500; color: var(--color-ink); }
.ledger tfoot .total { color: var(--color-accent); }
.ledger figcaption { margin-top: var(--space-sm); font-family: var(--font-outlier); font-size: var(--text-xs); color: var(--color-neutral); }
.ledger tbody tr { opacity: 0; transform: translateY(6px); animation: arrive var(--dur-long) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
.ledger tfoot tr { opacity: 0; animation: arrive var(--dur-long) var(--ease-out) forwards; animation-delay: 620ms; }
@keyframes arrive { to { opacity: 1; transform: none; } }
@media (max-width: 56rem) { .hero { grid-template-columns: 1fr; gap: var(--space-2xl); padding-block: var(--space-2xl) var(--space-xl); } .ledger { overflow-x: auto; } }

/* Stages — the narrative workflow. Thick numbered rule between stages. */
.stages { padding-block: var(--space-2xl) var(--space-3xl); }
.stages__intro { max-width: var(--measure); color: var(--color-neutral); padding-bottom: var(--space-xl); }
.stage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl) var(--space-2xl); padding-block: var(--space-2xl); border-top: var(--rule-thick) solid var(--color-rule-strong); align-items: start; }
.stage__no { font-family: var(--font-outlier); font-size: var(--text-sm); color: var(--color-neutral); letter-spacing: 0.04em; display: block; margin-bottom: var(--space-md); }
.stage h2 { font-size: var(--text-2xl); line-height: 1.1; max-width: 18ch; font-variation-settings: "opsz" 72; }
.stage__text { margin-top: var(--space-md); max-width: 44ch; color: var(--color-neutral); }
.stage__text a { color: var(--color-ink); }
.stage__visual { min-width: 0; align-self: center; }

/* Stage visuals — typographic, hairline-ruled, never cards */
.spec { font-family: var(--font-outlier); font-size: var(--text-sm); line-height: 1.7; margin: 0; border-top: var(--rule-hair) solid var(--color-rule); border-bottom: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-md); }
.spec dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2xs) var(--space-lg); margin: 0; }
.spec dt { color: var(--color-neutral); white-space: nowrap; }
.spec dd { margin: 0; overflow-wrap: anywhere; }
.spec .k { color: var(--color-accent); }
.spec .cut { color: var(--color-neutral); text-decoration: line-through; text-decoration-color: var(--color-rule-strong); }
.bars { font-family: var(--font-outlier); font-size: var(--text-sm); display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-md); }
.bars li { display: grid; grid-template-columns: 9ch minmax(0, 1fr) 8ch; gap: var(--space-md); align-items: center; }
.bars i { display: block; height: 10px; background: var(--color-ink); width: var(--w); }
.bars li.acc i { background: var(--color-accent); }
.bars span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 56rem) { .stage { grid-template-columns: 1fr; gap: var(--space-lg); padding-block: var(--space-xl); } }

/* Plain prose sections, asymmetric 4:8 */
.prose { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-xl) var(--space-2xl); padding-block: var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule-strong); }
.prose h2 { font-size: var(--text-xl); line-height: 1.15; font-variation-settings: "opsz" 48; }
.prose__body { max-width: var(--measure); display: grid; gap: var(--space-md); }
.prose__body p { color: var(--color-neutral); }
.prose__body strong { color: var(--color-ink); font-weight: 500; }
.prose ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--space-xs); color: var(--color-neutral); }
@media (max-width: 56rem) { .prose { grid-template-columns: 1fr; gap: var(--space-md); } }

/* Close — one typographic call, no block fill */
.close { padding-block: var(--space-3xl) var(--space-2xl); border-top: var(--rule-thick) solid var(--color-rule-strong); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xl); align-items: end; }
.close h2 { font-size: var(--text-2xl); line-height: 1.1; max-width: 18ch; }
.close .cta { font-size: var(--text-xl); }
@media (max-width: 56rem) { .close { grid-template-columns: 1fr; } }

/* Colophon */
.colophon { padding: var(--space-xl) var(--page-gutter) var(--space-2xl); max-width: 76rem; margin-inline: auto; font-family: var(--font-outlier); font-size: var(--text-xs); line-height: 1.8; color: var(--color-neutral); border-top: var(--rule-hair) solid var(--color-rule); }
.colophon a { color: var(--color-ink); }

/* Legal pages */
.doc { max-width: 68ch; margin-inline: auto; padding: var(--space-2xl) var(--page-gutter) var(--space-3xl); }
.doc h1 { font-size: var(--text-2xl); line-height: 1.1; }
.doc .meta { font-family: var(--font-outlier); font-size: var(--text-xs); color: var(--color-neutral); margin: var(--space-xs) 0 var(--space-xl); }
.doc h2 { font-size: var(--text-lg); margin: var(--space-xl) 0 var(--space-xs); }
.doc p, .doc li { color: var(--color-ink); margin-bottom: var(--space-xs); }
.doc hr { border: 0; border-top: var(--rule-hair) solid var(--color-rule-strong); margin: var(--space-xl) 0; }
.doc code { font-family: var(--font-outlier); font-size: .92em; }

@media (prefers-reduced-motion: reduce) {
  .ledger tbody tr, .ledger tfoot tr { animation: none; opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}