/* Typography (F1 WP-1): the serif for the record — gazette names, numbers, headings —, the
   sans for the interface; tabular numbers wherever numbers align; running text at most 70
   characters wide; headings balanced; labels uppercase and letter-spaced. */

h1, h2, h3, h4, .serif {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  color: var(--color-ink);
  line-height: var(--leading-tight);
  text-wrap: balance;
  margin: 0 0 var(--space-2);
}
h1, .h1 { font-size: var(--text-2xl); font-weight: var(--weight-semibold); letter-spacing: -0.012em; }
h2, .h2 { font-size: var(--text-xl); font-weight: var(--weight-semibold); letter-spacing: -0.008em; }
h3, .h3 { font-size: var(--text-lg); font-weight: var(--weight-semibold); }

p, li, dd { max-width: var(--measure); }
/* Explanatory text fills the width its page gives it (the owner, 2026-10-22); a class that sets its own
   width (a card, a panel, a passage, the text view) still wins: :where() adds no specificity. */
:where(.frame) :is(p, li, dd) { max-width: none; }
p { margin: 0 0 var(--space-3); }
.lede { font-size: var(--text-lg); line-height: 1.45; color: var(--color-ink-soft); max-width: none; }
.muted { color: var(--color-ink-muted); }
.small { font-size: var(--text-sm); }

.num, .tabular, table, time { font-variant-numeric: tabular-nums lining-nums; }

.label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-ink-muted);
}

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

/* A search match: an accent wash under the ink, and a rule a print reader still sees. */
mark {
  padding: 0 0.1em;
  background: var(--color-accent-soft);
  color: var(--color-ink);
  box-shadow: inset 0 -2px 0 var(--color-accent);
  border-radius: 2px;
}

/* Lists carry markers only where content is a list; navigation lists never do. */
.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list > li { max-width: none; }

/* The kind cue: the kind's word on its tint — the word always, the colour a second cue. */
.cue {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm);
  font: var(--weight-semibold) var(--text-xs) / 1.35 var(--font-sans);
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--cue-ink);
  background: var(--cue-tint);
}
.cue-dot {
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--cue-ink);
  flex: 0 0 auto;
}
.cue--general { --cue-ink: var(--cue-general-ink); --cue-tint: var(--cue-general-tint); }
.cue--regulation { --cue-ink: var(--cue-regulation-ink); --cue-tint: var(--cue-regulation-tint); }
.cue--separate { --cue-ink: var(--cue-separate-ink); --cue-tint: var(--cue-separate-tint); }
.cue--board { --cue-ink: var(--cue-board-ink); --cue-tint: var(--cue-board-tint); }
.cue--road_carrier { --cue-ink: var(--cue-road_carrier-ink); --cue-tint: var(--cue-road_carrier-tint); }
.cue--unknown { --cue-ink: var(--cue-unknown-ink); --cue-tint: var(--cue-unknown-tint); }

/* Ours, not the gazette's (root rule 3): a quiet line under what we composed. */
.derived {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  margin: 0 0 var(--space-2);
}