/* Cited Record — styles.css
   1. Custom properties
   2. Reset
   3. Base typography
   4. Layout: shell, plates, bleed
   5. Components
   6. Media queries

   The design is print-editorial rather than screen-app: warm paper, a serif at
   display sizes, a mono for anything the eye should read as metadata, hairline
   rules, and dark ink plates that behave like a reversed-out page. Depth comes
   from stacked paper tones and hairlines, not from gradients or glass. */

/* 1. Custom properties */

:root {
  --paper:        #F7F4ED;
  --paper-raised: #FCFAF5;
  --paper-deep:   #EFEAE0;
  --paper-sunk:   #E7E1D4;

  --ink:          #1F1C18;
  --ink-soft:     #5A544B;
  --ink-faint:    #8A8175;

  /* Dark plates. Warm near-black, never pure #000, so it reads as ink on
     paper rather than as a screen going dark. */
  --plate:        #17150F;
  --plate-raised: #221F17;
  --plate-rule:   #3A352A;
  --on-plate:     #F1ECE1;
  --on-plate-soft:#A9A192;

  --rule:         #DED7C9;
  --rule-strong:  #C4B9A6;

  --accent:       #8A2B2B;
  --accent-on-plate: #D98B7C;
  --accent-wash:  #F2E7E4;

  --font-text: "Newsreader", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --measure: 68ch;
  --gutter: 2rem;
  --page: 1140px;

  /* Kept deliberately shallow. A card should look like a sheet resting on
     another sheet, not like a floating panel. */
  --lift: 0 1px 1px rgba(31, 28, 24, 0.035), 0 10px 28px -18px rgba(31, 28, 24, 0.32);
}

/* 2. Reset */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

img, svg { display: block; max-width: 100%; }

input, button, select, textarea { font: inherit; color: inherit; }

ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

/* 3. Base typography */

@font-face {
  font-family: "Newsreader";
  src: url("fonts/newsreader-variable.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* Paper grain: fixed, barely there, perceptible only as warmth. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

h1, h2, h3 {
  font-weight: 500;
  text-wrap: balance;
}

p {
  max-width: var(--measure);
  text-wrap: pretty;
}

strong, b { font-weight: 500; }

em, i, cite, dfn { font-style: normal; }

::selection { background: var(--accent-wash); }

a {
  color: var(--accent);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: text-decoration-thickness 120ms ease;
}

a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--paper-raised);
  padding: 0.75rem 1rem;
  z-index: 10;
}

.skip-link:focus { left: 1rem; top: 1rem; }

/* 4. Layout: shell, plates, bleed */

/* Document pages: a reading column and a margin. space-between rather than a
   plain gap, so the margin sits flush with the right edge of the header and the
   footer instead of stopping short of it. */

.shell {
  display: grid;
  grid-template-columns: minmax(0, 72ch) minmax(0, 17rem);
  grid-auto-flow: dense;
  justify-content: space-between;
  gap: 4rem;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell > section,
.shell > article { grid-column: 1; }

.shell > aside,
.shell > .toc { grid-column: 2; }

.shell > hr {
  grid-column: 1 / -1;
  border: 0;
  border-top: 1px solid var(--rule);
}

.shell > .full { grid-column: 1 / -1; }

main { display: block; }

/* A plate is a full-bleed horizontal band and the only section wrapper the home
   page uses, so every section starts and ends on the same two vertical lines as
   the header, the footer and the hero. An earlier version mixed these with a
   narrower two-column grid, which left a 171px strip of dead space down the
   right of half the page and made the alignment look accidental. */

.plate { background: transparent; }

.plate--deep { background: var(--paper-deep); }

.plate--sunk { background: var(--paper-sunk); }

.plate--ink {
  background: var(--plate);
  color: var(--on-plate);
}

.plate-inner {
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

.plate--ink a { color: var(--accent-on-plate); }
.plate--ink .eyebrow { color: var(--accent-on-plate); }
.plate--ink h2 { color: var(--on-plate); }
.plate--ink p { color: var(--on-plate); }
.plate--ink .section-intro { color: var(--on-plate); }
.plate--ink .note { color: var(--on-plate-soft); }
.plate--ink :focus-visible { outline-color: var(--accent-on-plate); }

/* 5. Components */

/* Header */

.site-header {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 3;
}

.header-inner {
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: 1.1rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
}

/* The wordmark is type only, by design: the serif set tight, with the two
   words separated by weight rather than by a device. */
.wordmark {
  font-family: var(--font-text);
  font-size: 1.3125rem;
  font-weight: 500;
  font-variation-settings: "opsz" 16;
  letter-spacing: -0.004em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.wordmark b { font-weight: 700; }

.site-nav {
  display: flex;
  gap: 1.75rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.site-nav a {
  color: var(--ink-soft);
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.site-nav a[aria-current="page"] { color: var(--ink); }

/* The rule under the call to action is a border, so the underline the other
   links grow on hover has to be suppressed here or the two stack up. */
.site-nav .nav-cta {
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 0.15rem;
  transition: border-color 120ms ease, color 120ms ease;
}

.site-nav .nav-cta:hover {
  color: var(--accent-deep);
  border-bottom-color: var(--accent-deep);
  text-decoration: none;
}

/* Hero */

.hero-band { border-bottom: 1px solid var(--rule); }

.hero-grid {
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: clamp(3.5rem, 8vh, 6rem) clamp(3rem, 6vh, 4.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--accent);
  margin-bottom: 1.75rem;
}

.hero h1 {
  font-size: clamp(2.7rem, 5.6vw, 4.5rem);
  font-weight: 400;
  letter-spacing: -0.024em;
  line-height: 1.04;
  font-variation-settings: "opsz" 36;
  max-width: 15ch;
}

.hero h1 .accent { color: var(--accent); }

.lead {
  font-size: 1.25rem;
  letter-spacing: -0.003em;
  line-height: 1.55;
  margin-top: 1.75rem;
  max-width: 48ch;
  color: var(--ink-soft);
}

.hero-actions {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin-top: 2.5rem;
}

.hero-jurisdictions {
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
  max-width: none;
}

.hero-jurisdictions span::before {
  content: "";
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  margin-right: 0.6rem;
  vertical-align: 0.08em;
  background: var(--accent);
}

/* Buttons */

.btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.7rem 1.4rem;
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}

.btn--primary {
  background: var(--accent);
  color: var(--paper-raised);
  border: 1px solid var(--accent);
}

.btn--primary:hover { background: #741F1F; border-color: #741F1F; }

.btn--quiet {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--rule-strong);
}

.btn--quiet:hover { background: var(--paper-deep); color: var(--ink); }

.text-link { font-size: 1.0625rem; }

/* Specimen card in the hero: a sheet of paper resting on the page */

.hero-card {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 2px;
  box-shadow: var(--lift);
  padding: 1.5rem 1.5rem 1.25rem;
}

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 0.9rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid var(--rule-strong);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.card-head .stamp-dot { color: var(--accent); }

.mini-fields > div {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 1rem;
  padding-block: 0.6rem;
  border-bottom: 1px solid var(--rule);
}

.mini-fields dt {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--ink-faint);
  padding-top: 0.2em;
}

.mini-fields dd {
  font-size: 0.9375rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums oldstyle-nums;
}

.card-quote {
  margin-top: 1rem;
  border-left: 2px solid var(--accent);
  padding-left: 1rem;
}

.card-quote p {
  font-size: 0.9375rem;
  line-height: 1.55;
}

.card-cite {
  display: block;
  margin-top: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* Statistics: numerals large enough to work as the page's punctuation */

/* The band bleeds to the viewport edges; the figures inside it do not, so the
   first numeral starts on the same vertical line as the heading above it. */

.stats-band .plate-inner { padding-block: 0; }

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 1px;
  background: var(--plate-rule);
}

.stat {
  background: var(--plate);
  padding: 1.9rem 1.75rem 1.75rem;
}

.stat:first-child { padding-left: 0; }
.stat:last-child { padding-right: 0; }

.stat-figure {
  display: block;
  font-size: clamp(2.5rem, 4.5vw, 3.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variation-settings: "opsz" 36;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--on-plate);
}

.stat-figure .unit {
  font-size: 0.45em;
  letter-spacing: 0;
  color: var(--accent-on-plate);
  margin-left: 0.1em;
}

.stat-label {
  display: block;
  margin-top: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.55;
  color: var(--on-plate-soft);
}

/* Sections */

.shell > section,
.shell > article { padding-block: 3.5rem; }

.shell > section > h2,
.plate-inner > h2,
.section-head h2 {
  font-size: clamp(1.75rem, 2.8vw, 2.375rem);
  font-weight: 500;
  letter-spacing: -0.014em;
  line-height: 1.16;
  margin-bottom: 1.75rem;
}

.shell > section > h3,
.shell > article h3 {
  font-size: 1.3125rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.35;
  margin-top: 2.25rem;
  margin-bottom: 0.75rem;
}

.shell p + p { margin-top: 1.1em; }

.section-intro {
  font-size: 1.25rem;
  letter-spacing: -0.003em;
  line-height: 1.55;
  margin-bottom: 1.75rem;
  max-width: 52ch;
  color: var(--ink-soft);
}

/* A two-column section head: title left, standfirst right. Used on plates. */

/* Title left, standfirst right, both hanging off one rule that carries the
   section number. Without the rule and the number the headings read as
   floating: nothing tells you where in the document you are. */

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
  border-top: 1px solid var(--rule);
  padding-top: 1.25rem;
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

.plate--ink .section-head { border-color: var(--plate-rule); }

.section-head .eyebrow { margin-bottom: 1.1rem; }

.section-head h2 { margin-bottom: 0; }

.section-head .section-intro { margin-bottom: 0; max-width: 46ch; }

/* Body prose in two columns, so a three-paragraph section fills the width the
   heading above it occupies. Explicit columns rather than CSS multi-column:
   the split is authored, so the reader never has to travel back up the page. */

.prose-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

.prose-cols > div > * + * { margin-top: 1.1em; }

.prose-cols p { max-width: 52ch; }


/* Margin notes */

.note {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  padding-top: 4.25rem;
}

.note p + p { margin-top: 0.9em; }

.note p { max-width: none; }

/* Definition lists: records, coverage, field lists */

.fields { border-bottom: 1px solid var(--rule); }

.fields > div {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 1.5rem;
  padding-block: 0.85rem;
  border-top: 1px solid var(--rule);
}

.fields dt {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--ink-soft);
  padding-top: 0.28em;
}

.fields dd {
  font-variant-numeric: tabular-nums oldstyle-nums;
  text-wrap: pretty;
}

.plate--ink .fields { border-color: var(--plate-rule); }
.plate--ink .fields > div { border-color: var(--plate-rule); }
.plate--ink .fields dt { color: var(--on-plate-soft); }

/* Verification steps: numbered list, numerals hanging in the left column.

   The number, the term and the description are three items in a two-column
   grid, so the description has to be placed explicitly. Without that it wraps
   into the 4ch numeral column and leaves the right half of every row empty. */

/* Two by two rather than a single stack: four short items in one narrow column
   left the right half of the band empty for the whole height of the section. */

.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 4vw, 4rem);
}

.steps > div {
  counter-increment: step;
  display: grid;
  grid-template-columns: 4ch minmax(0, 1fr);
  column-gap: 1.5rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--rule);
}

.plate--ink .steps > div { border-color: var(--plate-rule); }

.steps > div::before {
  content: counter(step, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1 / span 2;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--accent);
  padding-top: 0.55em;
  font-variant-numeric: tabular-nums;
}

.steps dt {
  grid-column: 2;
  font-size: 1.3125rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.35;
}

.steps dd {
  grid-column: 2;
  margin-top: 0.4rem;
  max-width: 56ch;
  text-wrap: pretty;
}

.plate--ink .steps dt { color: var(--on-plate); }
.plate--ink .steps dd { color: var(--on-plate-soft); }

/* Two-up and three-up card rows */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 2px;
  overflow: hidden;
}

.card {
  background: var(--paper-raised);
  padding: 1.75rem 1.5rem;
}

.card h3 {
  font-size: 1.1875rem;
  font-weight: 500;
  letter-spacing: -0.004em;
  line-height: 1.3;
  margin-bottom: 0.7rem;
}

.card p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: none;
}

.card .card-index {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.1rem;
}

/* The regulator wall: coverage rendered as density */

/* Two jurisdictions per row, each list flowing into two sub-columns.

   One column per jurisdiction looked tidy but the lists are 28, 27, 13 and 13
   long, so two columns ended a third of the way down and left a large empty
   block. Pairing the two long lists on one row and the two short ones on the
   next makes every column end at roughly the same depth. */
.wall {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 3vw, 3.25rem);
}

.wall-group h3 {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--on-plate);
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--plate-rule);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.wall-group h3 .count {
  color: var(--accent-on-plate);
  font-variant-numeric: tabular-nums;
}

.wall-group ul {
  list-style: none;
  padding: 0;
  margin-top: 0.9rem;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--on-plate-soft);
  columns: 2;
  column-gap: 2rem;
}

.wall-group li { break-inside: avoid; text-wrap: pretty; }

.wall-group li.live { color: var(--on-plate); }

.wall-group li.live::after {
  content: "live";
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--plate);
  background: var(--accent-on-plate);
  padding: 0.1rem 0.35rem;
  margin-left: 0.5rem;
  vertical-align: 0.1em;
  border-radius: 2px;
}

.wall-foot {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--plate-rule);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.7;
  letter-spacing: 0.01em;
  color: var(--on-plate-soft);
}

.wall-foot p { color: inherit; max-width: 54ch; }

.wall-foot p + p { margin-top: 0.9em; }

/* Specimen record: the field list beside a provenance panel, so the right of
   the section carries the evidence rather than nothing. */

.specimen-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

.panel {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 2px;
  box-shadow: var(--lift);
  padding: 1.5rem;
}

.panel h3 {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--rule-strong);
}

.panel dl > div {
  padding-block: 0.8rem;
  border-bottom: 1px solid var(--rule);
}

.panel dt {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--ink-faint);
}

.panel dd {
  margin-top: 0.2rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.panel dl > div:last-child { border-bottom: 0; }

.panel > p {
  margin-top: 1.1rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: none;
}

.panel--mono dd {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.55;
}

.panel--mono > p {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.7;
}

.prose-cols > div > .panel { margin-top: 1.75rem; }

.stamp {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.5rem;
}

.excerpt {
  border-left: 1px solid var(--rule-strong);
  padding-left: 1.25rem;
}

.excerpt p { max-width: 56ch; }

.excerpt .cite {
  display: block;
  margin-top: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  line-height: 1.55;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* A section closes on a rule, with the claim on the left and the evidence for
   it on the right. Both columns carry weight, so neither side is left blank. */

.section-foot {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

.plate--ink .section-foot { border-color: var(--plate-rule); }

.claim {
  font-size: clamp(1.375rem, 2.1vw, 1.6875rem);
  line-height: 1.35;
  letter-spacing: -0.012em;
  max-width: 30ch;
  margin: 0;
}

.section-foot .mono-note {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.7;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  max-width: 52ch;
}

.section-foot .mono-note p + p { margin-top: 0.9em; }
.section-foot .mono-note p { max-width: none; }
.plate--ink .section-foot .mono-note { color: var(--on-plate-soft); }
.plate--ink .section-foot .mono-note p { color: var(--on-plate-soft); }

/* Waitlist form */

.waitlist { margin-top: 2rem; max-width: 36rem; }

.waitlist label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--ink-soft);
  margin-bottom: 0.6rem;
}

.field-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.field-row input[type="email"] {
  flex: 1 1 15rem;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  padding: 0.7rem 0.85rem;
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  color: var(--ink);
}

.field-row input[type="email"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}

.field-row button:disabled { opacity: 0.55; cursor: default; }

.form-note {
  min-height: 1.5em;
  margin-top: 0.6rem;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  line-height: 1.5;
  color: var(--accent);
}

.form-done {
  font-size: 1.0625rem;
  max-width: var(--measure);
}

.privacy-line {
  margin-top: 1.1rem;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 52ch;
}

/* The closing call to action, on a plate */

.cta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  border-top: 1px solid var(--rule);
  padding-top: 1.25rem;
}

.plate--ink .cta-grid { border-color: var(--plate-rule); }

.cta-grid .eyebrow { margin-bottom: 1.1rem; }

.cta-grid h2 {
  font-size: clamp(1.75rem, 2.8vw, 2.375rem);
  letter-spacing: -0.014em;
  line-height: 1.16;
  margin-bottom: 1.25rem;
}

.cta-grid .section-intro { margin-bottom: 0; }

.plate--ink .waitlist label { color: var(--on-plate-soft); }

.plate--ink .field-row input[type="email"] {
  background: var(--plate-raised);
  border-color: var(--plate-rule);
  color: var(--on-plate);
}

.plate--ink .field-row input[type="email"]::placeholder { color: var(--on-plate-soft); }

/* Reversed out rather than tinted. The oxblood is too dark to read on the
   plate, and lightening it far enough to work turns it pink. */
.plate--ink .btn--primary {
  background: var(--on-plate);
  border-color: var(--on-plate);
  color: var(--plate);
}

.plate--ink .btn--primary:hover { background: #FFFDF8; border-color: #FFFDF8; }

.plate--ink .form-note { color: var(--accent-on-plate); }

.plate--ink .privacy-line { color: var(--on-plate-soft); }

/* Footer */

.site-footer {
  border-top: 1px solid var(--rule);
  background: var(--paper);
}

.footer-inner {
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: 2.5rem 3rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem 3rem;
}

.footer-meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
  max-width: none;
}

.footer-nav {
  display: inline-flex;
  gap: 1.75rem;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.footer-nav a { color: var(--ink-soft); text-decoration: none; }

.footer-nav a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

/* Table of contents (margin, subpages) */

/* Sticky, so the margin column carries something for the whole scroll rather
   than emptying out after the first screen. */
.toc {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  padding-top: 4.25rem;
  position: sticky;
  top: 5.5rem;
  align-self: start;
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
}

.toc-title {
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}

.toc ol { list-style: none; padding: 0; }

.toc li { padding-block: 0.3rem; }

.toc li + li { border-top: 1px solid var(--rule); }

.toc a {
  color: var(--ink-soft);
  text-decoration: none;
}

.toc a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.toc .ref {
  display: block;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

/* Document pages (privacy, sources, terms) */

.doc-title {
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.018em;
  line-height: 1.1;
  font-variation-settings: "opsz" 36;
  margin-bottom: 1.75rem;
}

.eyebrow--ink { color: var(--ink-soft); }

.doc section {
  margin-top: 3rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--rule);
}

.doc h2 {
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.18;
  margin-bottom: 1.25rem;
}

.doc .fields { margin-top: 1.5rem; }

/* Legal pages: generated article body (privacy, terms) */

.legal h1 {
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin-top: 2.75rem;
}

.legal h1:first-of-type {
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.018em;
  line-height: 1.1;
  font-variation-settings: "opsz" 36;
  margin-top: 0;
}

.legal h2 {
  font-size: clamp(1.4rem, 2vw, 1.6875rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.22;
  margin-top: 2.5rem;
}

.legal h3 {
  font-size: 1.3125rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.35;
  margin-top: 2rem;
}

.legal p,
.legal ul,
.legal ol,
.legal table { margin-top: 1.05em; }

.legal ul,
.legal ol { padding-left: 1.4rem; }

.legal li { margin-top: 0.55em; max-width: var(--measure); }

.legal li::marker { color: var(--ink-soft); }

.legal hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin-block: 3rem;
}

.legal code {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

.legal table {
  border-collapse: collapse;
  width: 100%;
  max-width: var(--measure);
  font-variant-numeric: tabular-nums oldstyle-nums;
}

.legal th {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--ink-soft);
  text-align: left;
  padding: 0 1.25rem 0.5rem 0;
  border-bottom: 1px solid var(--rule-strong);
}

.legal td {
  padding: 0.6rem 1.25rem 0.6rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

/* 6. Media queries */

@media (max-width: 1080px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1px; }

  .stat:nth-child(odd) { padding-left: 0; }
  .stat:nth-child(even) { padding-right: 0; }
}

@media (max-width: 960px) {
  .shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-inline: 1.25rem;
  }

  .shell > section,
  .shell > article { padding-block: 2.75rem; }

  .shell > hr { margin-block: 0.5rem; }

  .note,
  .toc {
    padding-top: 0;
    padding-left: 1rem;
    border-left: 1px solid var(--rule-strong);
    max-width: 34rem;
  }

  .note { margin: -1.5rem 0 2.75rem 1rem; }

  .toc { margin: 2.75rem 0 0 1rem; }

  .fields > div { grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; }

  .hero-grid,
  .cta-grid,
  .section-head,
  .prose-cols,
  .specimen-grid,
  .section-foot,
  .steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }

  .steps { gap: 0; }

  .prose-cols > div + div,
  .specimen-grid > .panel { margin-top: 0; }

  .hero h1 { max-width: 18ch; }

  .header-inner,
  .footer-inner,
  .plate-inner,
  .hero-grid { padding-inline: 1.25rem; }

  .plate--ink .note { border-left-color: var(--plate-rule); }
}

@media (max-width: 820px) {
  .wall { grid-template-columns: minmax(0, 1fr); }
}

/* The wordmark and three nav items do not fit on one line on a phone. Left to
   overflow they widen the whole document, and every section below is then laid
   out wider than the viewport and clipped on the right. */
@media (max-width: 640px) {
  .header-inner {
    flex-wrap: wrap;
    gap: 0.85rem 1.25rem;
  }

  .site-nav {
    flex-wrap: wrap;
    gap: 0.85rem 1.25rem;
    font-size: 0.6875rem;
    letter-spacing: 0.07em;
  }
}

@media (max-width: 560px) {
  .stats { grid-template-columns: minmax(0, 1fr); }

  .wall-group ul { columns: 1; }

  .site-header { position: static; }

  .site-nav { gap: 1.1rem; }

  .fields > div { grid-template-columns: 1fr; gap: 0.15rem; }

  .fields dt { padding-top: 0; }

  .mini-fields > div { grid-template-columns: 1fr; gap: 0.1rem; }

  .steps > div { grid-template-columns: 3.5ch minmax(0, 1fr); column-gap: 1rem; }

  .hero-card { padding: 1.25rem 1.1rem 1rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero { animation: rise 420ms ease-out both; }
  .hero-card { animation: rise 520ms 80ms ease-out both; }

  @keyframes rise {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
  }
}