/* Typography roles shared by every page. Layout and component surfaces live in site.css. */
:root {
  --type-page: clamp(2.25rem, 4vw, 3.25rem);
  --type-section: clamp(1.875rem, 3vw, 2.25rem);
  --type-subsection: 1.25rem;
  --type-lead: 1.125rem;
  --type-body: 1rem;
  --type-meta: 0.875rem;
  --type-label: 0.75rem;
  --type-code: 0.875rem;
  --reading-measure: 70ch;
  --text-primary: var(--ink);
  --text-secondary: var(--ink-2);
  --text-interactive: var(--violet);
  --text-evidence: var(--teal);
  --text-error: var(--red);
}

/* Reading voice: editorial text is always Caslon Text. */
html { font-family: var(--text); font-size: 100%; line-height: 1.6; color: var(--text-primary); }
body { font-size: var(--type-body); font-synthesis: none; }
::selection { color: var(--paper); }
p { text-wrap: pretty; }
main p { max-width: var(--reading-measure); }
strong, b { font-weight: 700; }
button, input, select, textarea { font: inherit; color: var(--text-primary); }
::placeholder { font: inherit; color: var(--text-secondary); opacity: 1; }
.lede, .section-lede, .stack-intro, .case-value, .section-conclusion,
.proof-ready .guarantee-copy > p:not(.mechanism) {
  font-family: var(--text); font-size: var(--type-lead); line-height: 1.55;
  color: var(--text-primary); max-width: 65ch;
}
.mechanism { font-size: var(--type-body); line-height: 1.6; color: var(--text-evidence); }
.business-label, .entries .promise { color: var(--text-primary); }
.entries .promise { font-style: normal; }

/* Heading hierarchy is semantic, independent of wrappers or page-specific classes. */
h1, h2 { font-family: var(--display); font-weight: 400; font-style: normal; letter-spacing: -0.01em; color: var(--text-primary); text-wrap: balance; }
h1, .subpage-title, .film-headline { font-size: var(--type-page); line-height: 1.1; }
h2 { font-size: var(--type-section); line-height: 1.15; margin-bottom: 1rem; }
h3 { font-family: var(--text); font-size: var(--type-subsection); line-height: 1.3; font-weight: 700; color: var(--text-primary); text-wrap: balance; }
h4 { font-family: var(--text); font-size: var(--type-lead); line-height: 1.35; font-weight: 700; color: var(--text-primary); text-wrap: balance; }
h1 strong, h2 strong { font-weight: inherit; }
.proof-reference strong { font-size: inherit; }

/* Brand lettering and the one italic brand line are deliberate exceptions. */
.wordmark { font: 400 1.5rem/1.1 var(--display); color: var(--text-primary); }
.hero-wordmark { font: 400 clamp(3rem, 4.3vw, 4.2rem)/1.1 var(--display); color: var(--text-primary); }
.verso .tagline { font-size: var(--type-body); line-height: 1.5; font-style: italic; color: var(--text-primary); }
.pull { font-style: italic; color: var(--text-primary); }

/* Supporting text: one size and one ink, without a separate font voice. */
.note, .caption, .key, .small-print, .head .aside, .fig-cap, .listing-cap,
.fig-src, .inset-label, .diagram-key, .diagram-open, .evidence-links,
.entries .proof, .record-foot .hint, .query-source, .listing-cue, .legend,
.colophon .disclosure, .colophon .legal, .act-image figcaption,
.transcript p, .key-list, .diagram-scroll::after {
  font-family: var(--text); font-size: var(--type-meta); line-height: 1.5;
  color: var(--text-secondary); font-style: normal; letter-spacing: normal;
}
.business-first .fig-cap > span:last-child { white-space: normal; }
.fig-no { font-family: var(--text); font-size: var(--type-label); font-weight: 700; line-height: 1.4; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); }
.colophon li { font-size: var(--type-meta); }
.articles, .bio li { font-size: var(--type-body); }
.articles td.art { font-family: var(--text); font-size: var(--type-body); font-weight: 700; }

/* Purple always indicates an interaction; underline is the second cue. */
a { color: var(--text-interactive); }
.textlink, .linkbtn, .diagram-open, .transcript summary, .technical-disclosure > summary {
  font-family: var(--text); font-style: normal; color: var(--text-interactive); line-height: 1.5;
}
.transcript summary, .technical-disclosure > summary { text-decoration: underline; text-underline-offset: 0.2em; }
.note a, .act-image figcaption a { color: var(--text-interactive); }
.faq summary { font-family: var(--text); font-size: var(--type-body); line-height: 1.5; font-weight: 700; color: var(--text-interactive); }
.faq details > p { color: var(--text-primary); }
.transcript summary::before, .faq summary::after { font-family: var(--mono); font-style: normal; color: var(--text-interactive); }
.query-tabs a, .proof-tabs button { font-family: var(--text); font-size: var(--type-meta); line-height: 1.4; font-weight: 700; color: var(--text-interactive); }
.query-tabs a[aria-selected="true"], .proof-tabs button[aria-selected="true"], .proof-tabs button:hover { color: var(--text-interactive); border-bottom-color: var(--text-interactive); }
.proof-tabs button[aria-selected="true"] { text-decoration: underline; text-underline-offset: 0.3em; }

/* Navigation and form controls: readable labels, never miniature body copy. */
.label, .articles th, .ledger thead th, .colophon h3 {
  font-family: var(--text); font-size: var(--type-label); font-weight: 700;
  line-height: 1.4; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary);
}
.btn, .menu summary, .menu li a, .masthead nav a {
  font-family: var(--text); font-size: var(--type-meta); font-weight: 700;
  line-height: 1.4; letter-spacing: 0.02em; text-transform: none;
}
.masthead nav ul { gap: 1rem; }
.masthead nav a, .menu li a, .menu summary { color: var(--text-interactive); }
.masthead nav a:hover, .masthead nav a[aria-current="page"] { color: var(--text-interactive); }
.masthead nav a.soon, .menu li a.soon { color: var(--text-secondary); }
.masthead nav .cta a { color: var(--text-interactive); }
.masthead nav a.soon::after, .menu li a.soon::after { font-weight: 400; letter-spacing: normal; text-transform: none; }
.btn { color: var(--paper); }
.btn.ghost { color: var(--text-interactive); }
.btn.ghost:hover, .menu[open] summary, .masthead nav .cta a:hover { color: var(--paper); }
.field input, .field textarea, .field select { font-family: var(--text); font-size: var(--type-body); line-height: 1.5; color: var(--text-primary); }
.field label { font-family: var(--text); font-size: var(--type-meta); line-height: 1.4; font-weight: 700; color: var(--text-primary); text-transform: none; letter-spacing: normal; }
.field .error { color: var(--text-error); font-size: var(--type-meta); line-height: 1.5; }
.linkbtn:disabled { color: var(--text-secondary); }

/* Monospace is reserved for executable content, identifiers and recorded states. */
code, pre, samp, .mono { font-family: var(--mono); }
code { font-size: 1em; }
.listing pre, .query-panel pre, .sql code, .versus .prog { font-family: var(--mono); font-size: var(--type-code); line-height: 1.55; color: var(--text-primary); }
.listing pre code, .query-panel pre code, .query-panel samp { font: inherit; }
.listing .k, .listing .a, .sql code .k { color: var(--text-primary); }
.listing .s { font-weight: 700; }
.listing .c { color: var(--text-secondary); font-style: italic; }
.query-panel .query-output { color: var(--text-evidence); }
.ledger { font-size: var(--type-meta); }
.ledger td.folio-col, .ledger td.hash, .ledger td.when, .ledger td.amt, .states { font-family: var(--mono); font-size: var(--type-code); line-height: 1.5; color: var(--text-secondary); }
.ledger td.folio-col, .ledger td.amt { color: var(--text-primary); }
.ledger td::before { font-family: var(--text); font-size: var(--type-label); line-height: 1.4; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); }
.ledger tr.refusal td.memo, .ledger tr.refusal td.edge, .ledger tr.broken td, .ledger td.hash .now, .versus .prog .x { color: var(--text-error); }
.ledger tr.after td, .ledger tr.genesis td { color: var(--text-secondary); }
.ledger tr.genesis td { font-style: italic; }
.ledger tr.genesis td.hash, .ledger tr.genesis td.folio-col { font-style: normal; }
.category-equation code { font-size: var(--type-body); }

/* State colour requires an explicit textual label; it never styles ordinary prose. */
.pill, .status, .tag, .entries .proof b {
  font-family: var(--mono); font-size: var(--type-label); font-weight: 700;
  line-height: 1.4; letter-spacing: 0.03em; text-transform: uppercase;
}
.pill, .status.live, .tag.covered, .entries .proof b { color: var(--text-evidence); }
.pill.bad, .tag.gap { color: var(--text-error); }
.pill.hold, .pill.busy, .pill.idle, .status.designed, .tag.enabled { color: var(--text-secondary); }
.versus .verdict { font-family: var(--text); font-size: var(--type-body); font-style: normal; font-weight: 700; }
.stack-list li.one { color: var(--text-primary); font-weight: 700; }
.stack-list li.x { color: var(--text-error); }
.versus .verdict.guardrail { color: var(--text-error); }
.versus .verdict.guarantee { color: var(--text-evidence); }

/* Editorial lists are prose, not code listings. */
.editorial-list { list-style: none; margin: 1rem 0; padding: 0; }
.editorial-list li { padding: 0.75rem 0; }
.editorial-list .c { display: block; font-size: var(--type-meta); font-weight: 700; color: var(--text-secondary); margin-bottom: 0.25rem; }
.editorial-list .list-value { display: block; font-family: var(--text); font-size: var(--type-body); line-height: 1.6; color: var(--text-primary); }

/* Text on moving imagery needs an explicit inverse colour. */
.film .poster, .film .fallback { color: var(--paper); }
.film .poster .label { font: 700 var(--type-label)/1.4 var(--text); letter-spacing: 0.06em; color: var(--paper); }
.evidence-play span { font: 700 var(--type-meta)/1.4 var(--text); color: var(--text-primary); }

/* Founder-directed emphasis and uppercase navigation. */
.why-thesis, .open-source-emphasis, .sql-emphasis { color: var(--text-evidence); }
.masthead nav a, .menu li a, .menu summary,
.masthead nav a.soon::after, .menu li a.soon::after { text-transform: uppercase; }