/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4
 * Hallmark · genre: editorial · design-system: design.md · designed-as-app
 * macrostructure: Split Studio (marketing) · Narrative Workflow (service) · Long Document (legal)
 * theme: Almanac, retuned to bejofa brand anchors · paper=light · display=roman-serif · accent=chromatic-green
 * nav: N7 sticky topbar, no navigation (single page + Impressum, 2026-09-22) · footer: Ft4 Dense typographic colophon
 * enrichment: none — existing photography only, nothing generated
 * H2 split-diptych knobs: ratio=7/5, right=photo, divider=negative-space
 * F4 step-sequence knobs: numbering=01/02/03, layout=vertical-stack, connector=rule
 * C3 typographic-link knobs: underline=solid-2px, hover=thicken, arrow=→ (static)
 *
 * contrast: pass (40–41) — 323 text elements measured across all 5 pages, 0 failures
 * nav/footer/hero slop: pass (42–45)   honest: pass (46)   chrome: pass (47)
 * tokens: pass (48)   responsive: pass (49)   icons: pass (30)
 * mobile: pass (34, 49, 50–57) — 320/375/414/768 measured, no overflow, no 2-line affordances
 * KNOWN DEVIATION · gate 38 (outlier in ≤2 slots): Geist Mono carries ONE role here —
 *   the editorial apparatus (labels, ordinals, attributions, colophon), per typography.md's
 *   "one role, applied consistently" and the Ft4 archetype, which is mono by definition.
 *   By gate 38's literal slot count that is a fail; by the role test it is correct. Deliberate.
 */

@import url("tokens.css?v=20260922d");

/* ══ Base ══════════════════════════════════════════════════════════════ */

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

html {
  overflow-x: clip;
  color-scheme: light;
  font-size: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  background: var(--color-paper);
  -webkit-text-size-adjust: 100%;
}

body {
  position: relative; /* the containing block of the network layer */
  overflow-x: clip;
  min-width: 0;
  margin: 0;
  color: var(--color-ink);
  background: transparent; /* html carries the paper, so the network can sit between the two */
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 400;
  line-height: var(--leading-body);
  font-feature-settings: "kern", "liga";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 500;
  line-height: var(--leading-tight);
  letter-spacing: var(--track-display);
  text-wrap: balance;
}

p { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

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

::selection {
  color: var(--color-ink);
  background: var(--color-highlight);
}

/* ── Links ───────────────────────────────────────────────────────────── */

a {
  color: var(--color-accent);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.19em;
  text-decoration-color: color-mix(in oklch, var(--color-accent) 40%, transparent);
  transition:
    text-decoration-thickness var(--dur-short) var(--ease-out),
    text-underline-offset var(--dur-short) var(--ease-out),
    text-decoration-color var(--dur-short) var(--ease-out);
}

a:hover {
  text-decoration-thickness: 2px;
  text-underline-offset: 0.14em;
  text-decoration-color: var(--color-accent);
}

a:visited { color: var(--color-accent-deep); }

a:active { color: var(--color-accent-deep); }

:where(a, button)[aria-disabled="true"],
:where(button, input, select, textarea):disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  text-decoration: none;
}

:where(a, button, input, summary):focus-visible {
  outline: var(--rule-medium) solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
  /* never animated — the ring must appear instantly */
  transition: none;
}

.skip-link {
  position: fixed;
  z-index: 999;
  top: var(--space-2xs);
  left: var(--space-2xs);
  padding: var(--space-2xs) var(--space-sm);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--color-accent-ink);
  background: var(--color-accent);
  border-radius: var(--radius-sm);
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus { transform: translateY(0); }

/* ── Network · the drifting amber mesh behind the whole page ─────────────
 * hallmark.js puts the layer first in <body>. The layer covers the whole
 * document, so the mesh scrolls with the content. Inside it the canvas is a
 * window about two viewports tall that the script moves down the page. The
 * layer clips it, so it never adds scroll height. The topbar stays opaque,
 * so the header never carries the mesh. */

.net {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.net canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

/* Tinted full-width areas paint their tint one layer UNDER the canvas, so
   the mesh runs over them at full strength. Neither element may become a
   stacking context (no z-index, opacity, transform), or the tint is trapped
   above the network again. */
.band--sunk::before,
.colophon::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  background: var(--color-paper-2);
  content: "";
}

@media (forced-colors: active), print {
  .net { display: none; }
}

/* Text never sits on the mesh. Every text element carries an opaque ground
   in the colour of its setting, widened by a solid margin in the same colour.
   That margin keeps the lines clear of the letters and closes the gaps
   between paragraphs. Headings, subtitles and ordinals shrink to their
   text, so a short line doesn't cut a blank stripe across the page.
   No blur on that margin: a blurred edge of paper over paper rounds to ±1
   colour level and draws faint ghost boxes around every block.
   The ground goes on the TEXT elements, never on a bordered container (a
   spec row, a list item). A later sibling's margin would paint over the
   hairline above it. Every text element here keeps ≥ 24px from the nearest
   rule; the margin is 12px. */
:root { --surface: var(--color-paper); }

.band--sunk,
.colophon { --surface: var(--color-paper-2); }

:where(main, .colophon) :where(h1, h2, h3, p, blockquote, figcaption, .spec__key, .spec__val,
  .ordinal, .route__ordinal, .cta, .document li, .colophon__links a) {
  background: var(--surface);
  box-shadow: 0 0 0 var(--space-xs) var(--surface);
}

:where(main, .colophon) :where(h1, h2, h3, .head p, .close p, .ordinal, .route__ordinal, .colophon__foot) {
  width: fit-content;
}

/* ── Shell ───────────────────────────────────────────────────────────── */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ── Editorial apparatus (the mono outlier — one role only) ──────────── */

.apparatus,
.label,
.ordinal,
.meta {
  font-family: var(--font-outlier);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.label {
  display: block;
  color: var(--color-accent);
  font-size: var(--text-label);
  line-height: 1.4;
}

.ordinal {
  display: block;
  color: var(--color-muted);
  font-size: var(--text-label);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.meta {
  color: var(--color-muted);
  font-size: var(--text-2xs);
  letter-spacing: 0.1em;
  line-height: 1.55;
}

/* Section head — ALWAYS stacked: label above, heading directly beneath.
   The label-left / heading-right split is banned by the system. */
.head { margin-bottom: var(--space-lg); }
.head .label { margin-bottom: var(--space-xs); }
.head h2 { font-size: var(--text-4xl); }
/* Subtitles run the full column and break only where the space ends. A
   measure cap here wrapped short ledes halfway across an empty page. */
.head p {
  margin-top: var(--space-sm);
  color: var(--color-ink-2);
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  text-wrap: pretty;
}

/* ══ N7 · Sticky topbar — mark left, name centred, the mail action right ═ */

.topbar {
  position: sticky;
  z-index: 40;
  top: 0;
  border-bottom: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper);
}

/* Equal outer columns keep the name on the page's centre line, whatever the
   mark and the chip measure. */
.topbar__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-md);
  min-height: 4.25rem;
  padding-block: var(--space-2xs);
}

.topbar__brand {
  display: flex;
  justify-self: start;
  text-decoration: none;
}

.topbar__brand:hover { text-decoration: none; }

.topbar__mark {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--radius-md);
}

.topbar__wordmark {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  line-height: 1;
  letter-spacing: var(--track-display);
  text-align: center;
  white-space: nowrap;
}

.topbar__row > .chip { justify-self: end; }

/* ══ Split Studio · homepage ═══════════════════════════════════════════ */

.main { display: block; }

.band { padding-block: var(--space-3xl); }
.band--tight { padding-block: var(--space-2xl); }
.band--sunk { position: relative; }

.band + .band { padding-top: 0; }
.band--sunk + .band,
.band + .band--sunk { padding-top: var(--space-3xl); }

/* ── H2 · Split diptych hero (7/5, photo right, negative-space divider) ─ */

.hero {
  display: grid;
  gap: var(--space-2xl) var(--space-2xl);
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
  padding-block: var(--space-2xl) var(--space-3xl);
}

.hero__text { min-width: 0; }

.hero h1 {
  font-size: var(--text-display);
  font-weight: 500;
  line-height: var(--leading-display);
  margin-bottom: var(--space-md);
}

.hero__lede {
  max-width: var(--measure-lede);
  color: var(--color-ink-2);
  font-size: var(--text-xl);
  line-height: var(--leading-loose);
  text-wrap: pretty;
}

.hero__strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-md);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
}

.hero__figure { margin: 0; min-width: 0; }

.hero__figure img {
  width: 100%;
  border-radius: var(--radius-img);
  filter: grayscale(0.18) contrast(1.02);
}

.hero__figure figcaption {
  margin-top: var(--space-2xs);
  color: var(--color-muted);
  font-family: var(--font-outlier);
  font-size: var(--text-2xs);
  letter-spacing: 0.06em;
}

/* ── Two stances · the hero — a pair of voices, side by side ──────────── */

.stances { padding-block: var(--space-2xl) var(--space-3xl); }

.stances__head { margin-bottom: var(--space-xl); }

.stances__head h1 {
  max-width: 24ch;
  font-size: var(--text-3xl);
  font-weight: 500;
}

.stances__grid {
  display: grid;
  gap: var(--space-2xl) var(--space-2xl);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: var(--rule-medium) solid var(--color-ink);
}

.stance {
  min-width: 0;
  padding-top: var(--space-lg);
}

.stance__quote {
  margin: 0 0 var(--space-lg);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: var(--track-display);
  text-wrap: pretty;
}

.stance__quote .quote__mark { font-size: var(--text-3xl); }

.stance__body p { font-size: var(--text-md); }

/* ── The offer · two items on one rule ─────────────────────────────────── */

.offer {
  display: grid;
  gap: var(--space-lg) var(--space-2xl);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: var(--rule-medium) solid var(--color-ink);
}

.offer__item { min-width: 0; padding-top: var(--space-lg); }

.offer__item h3 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-sm);
}

.offer__item p {
  max-width: var(--measure-prose);
  color: var(--color-ink-2);
  line-height: var(--leading-loose);
}

/* ── The modules · enum, two columns on wide screens ───────────────────── */

.enum--modules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: var(--rule-medium) solid var(--color-ink);
}

.enum--modules li { padding-block: var(--space-lg); }

.enum--modules h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: var(--track-display);
}

.enum--modules p { font-size: var(--text-md); }

.modules__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-xl);
  margin-top: var(--space-lg);
}

.modules__foot p {
  color: var(--color-muted);
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  line-height: 1.7;
}

.modules__foot .cta { margin-top: 0; }

/* ── Person · text left, portrait right ────────────────────────────────── */

.person {
  display: grid;
  gap: var(--space-2xl);
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: start;
}

.person__text { min-width: 0; }

.person__figure { margin: 0; min-width: 0; padding-top: var(--space-xs); }

.person__figure img {
  width: 100%;
  border-radius: var(--radius-img);
  filter: grayscale(0.18) contrast(1.02);
}

.person__figure figcaption {
  margin-top: var(--space-2xs);
  color: var(--color-muted);
  font-family: var(--font-outlier);
  font-size: var(--text-2xs);
  letter-spacing: 0.06em;
}

/* ── The three routes — Split Studio's alternating diptych ────────────── */

.routes { border-top: var(--rule-medium) solid var(--color-ink); }

.route {
  display: grid;
  gap: var(--space-md) var(--space-2xl);
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  align-items: start;
  padding-block: var(--space-2xl);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

/* alternate the direction down the page */
.route:nth-child(even) .route__body { grid-column: 2; grid-row: 1; }
.route:nth-child(even) .route__index { grid-column: 1; grid-row: 1; }

.route__body { min-width: 0; }

.route__ordinal {
  display: block;
  margin-bottom: var(--space-2xs);
  color: var(--color-highlight-ink);
  font-family: var(--font-outlier);
  font-size: var(--text-xl);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.route h2 {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-sm);
}

.route p {
  max-width: var(--measure-prose);
  color: var(--color-ink-2);
  line-height: var(--leading-loose);
}

.route__index { min-width: 0; padding-top: var(--space-2xs); }

.route__index .label { margin-bottom: var(--space-2xs); }

.route__index ol { border-top: var(--rule-hair) solid var(--color-rule); }

.route__index li {
  display: flex;
  gap: var(--space-sm);
  align-items: baseline;
  padding-block: var(--space-2xs);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
}

.route__index li span:first-child {
  flex: none;
  color: var(--color-muted);
  font-family: var(--font-outlier);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
}

/* ── C3 · Typographic link CTA ────────────────────────────────────────── */

.cta {
  display: inline-flex;
  gap: var(--space-2xs);
  align-items: baseline;
  margin-top: var(--space-md);
  padding-bottom: var(--space-3xs);
  color: var(--color-accent);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 500;
  text-decoration: none;
  border-bottom: var(--rule-medium) solid var(--color-accent);
  white-space: nowrap;
  transition: border-bottom-width var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out);
}

.cta:hover {
  color: var(--color-accent-deep);
  border-bottom-width: 4px;
  text-decoration: none;
}

.cta:active { border-bottom-width: 4px; transform: translateY(1px); }

/* ── C1 · Outlined chip — Kontakt in the topbar, mail and LinkedIn at the
   close. Rounded like the logo mark. ─────────────────────────────────── */

.chip {
  display: inline-flex;
  gap: var(--space-2xs);
  align-items: center;
  min-height: 44px;
  padding: var(--space-2xs) var(--space-md);
  border: var(--rule-hair) solid var(--color-ink);
  border-radius: var(--radius-md);
  color: var(--color-ink);
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out);
}

.chip:hover {
  color: var(--color-accent-ink);
  background: var(--color-ink);
  text-decoration: none;
}

.chip:active { background: var(--color-accent-deep); transform: translateY(1px); }

.chip--compact {
  min-height: 40px;
  padding: var(--space-3xs) var(--space-sm);
  font-size: var(--text-sm);
}

/* ── F3 · Tabular spec sheet — the credentials ────────────────────────── */

.spec { border-top: var(--rule-medium) solid var(--color-ink); }

.spec__row {
  display: grid;
  gap: var(--space-2xs) var(--space-lg);
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  padding-block: var(--space-md);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.spec__key {
  color: var(--color-muted);
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* The working-method sheet: its keys are the argument, so they read at twice
   the apparatus size. */
.spec--lead .spec__row { align-items: baseline; }
.spec--lead .spec__key { font-size: calc(var(--text-xs) * 2); }

.spec__val {
  min-width: 0;
  color: var(--color-ink-2);
  line-height: var(--leading-loose);
}

.spec__val strong {
  color: var(--color-ink);
  font-weight: 500;
}

/* ── T1 · Pull quote with marginalia ──────────────────────────────────── */

.quotes { display: grid; gap: var(--space-2xl); }

.quote {
  display: grid;
  gap: var(--space-sm) var(--space-2xl);
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  align-items: start;
  padding-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
}

.quote blockquote {
  margin: 0;
  min-width: 0;
  max-width: var(--measure-prose);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  font-style: normal; /* roman — the pre-redesign all-italic quote is a reading failure */
  line-height: 1.5;
  text-wrap: pretty;
}

.quote blockquote p + p { margin-top: var(--space-sm); }

.quote blockquote em { font-style: italic; } /* body-emphasis only */

.quote__mark {
  display: block;
  margin-bottom: calc(-1 * var(--space-3xs));
  color: var(--color-highlight-ink);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1;
}

.quote figcaption { min-width: 0; }

.quote cite {
  display: block;
  font-style: normal;
}

.quote cite b {
  display: block;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.quote cite span {
  display: block;
  margin-top: var(--space-3xs);
  color: var(--color-muted);
  font-family: var(--font-outlier);
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
  line-height: 1.6;
  text-transform: uppercase;
}

/* ── T2 · Logo wall, hairline ─────────────────────────────────────────── */

.marks {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  border-top: var(--rule-hair) solid var(--color-rule);
}

.marks a {
  display: flex;
  gap: var(--space-sm);
  flex-direction: column;
  justify-content: space-between;
  min-height: 8rem;
  padding-top: var(--space-lg);
  text-decoration: none;
}

.marks img {
  max-width: 11rem;
  max-height: 3.4rem;
  width: auto;
  object-fit: contain;
  object-position: left center;
  filter: grayscale(1) contrast(1.15);
  opacity: 0.9;
  transition: opacity var(--dur-short) var(--ease-out),
              filter var(--dur-short) var(--ease-out);
}

.marks a:hover img { opacity: 1; filter: grayscale(0) contrast(1); }

.marks .meta { text-transform: none; letter-spacing: 0.04em; }

/* ══ Narrative Workflow · service pages ════════════════════════════════ */

.chapter {
  padding-block: var(--space-2xl);
  border-top: var(--rule-hair) solid var(--color-rule);
}

.chapter:first-of-type { border-top: var(--rule-medium) solid var(--color-ink); }

.chapter__head { margin-bottom: var(--space-lg); }

.chapter__ordinal {
  display: block;
  margin-bottom: var(--space-xs);
  color: var(--color-accent);
  font-family: var(--font-outlier);
  font-size: var(--text-label);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.chapter h2 {
  max-width: 22ch;
  font-size: var(--text-4xl);
}

.chapter__body {
  display: grid;
  gap: var(--space-lg) var(--space-2xl);
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: start;
}

.chapter__body--wide { grid-template-columns: minmax(0, 1fr); }

.prose { min-width: 0; max-width: var(--measure-prose); }

.prose p + p { margin-top: var(--space-md); }

.prose p {
  color: var(--color-ink-2);
  line-height: var(--leading-loose);
}

.prose .lede {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.5;
}

.prose strong { color: var(--color-ink); font-weight: 500; }

.prose .enum { margin-top: var(--space-md); }
.prose .enum + p { margin-top: var(--space-md); }
.prose .lede + .enum { margin-top: var(--space-sm); }

/* a marked phrase — the amber sits behind ink, never carries text itself */
.prose mark,
mark {
  padding: 0.05em 0.18em;
  color: var(--color-ink);
  background: var(--color-highlight-soft);
  box-decoration-break: clone;
}

/* ── Enumerated list — the numbered items inside a chapter ────────────── */

.enum { border-top: var(--rule-hair) solid var(--color-rule); }

.enum li {
  display: grid;
  gap: var(--space-2xs) var(--space-md);
  grid-template-columns: 2.75rem minmax(0, 1fr);
  padding-block: var(--space-md);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.enum li > .ordinal { padding-top: 0.3em; }

.enum h3 {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.5;
}

.enum p {
  margin-top: var(--space-3xs);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
}

/* ── Aside note — the "Weitergedacht / Daraus folgt" bridges ──────────── */

.bridge {
  max-width: var(--measure-note);
  padding-left: var(--space-md);
  border-left: var(--rule-medium) solid var(--color-highlight);
}

.bridge--after { margin-top: var(--space-xl); }

.bridge .label { color: var(--color-muted); margin-bottom: var(--space-3xs); }

.bridge p {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.5;
}

/* ── Closing block ────────────────────────────────────────────────────── */

.close {
  padding-block: var(--space-3xl);
  border-top: var(--rule-medium) solid var(--color-ink);
}

.close h2 {
  max-width: 18ch;
  font-size: var(--text-display-s);
  margin-bottom: var(--space-md);
}

.close p {
  color: var(--color-ink-2);
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  text-wrap: pretty;
}

.close__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
  align-items: center;
  margin-top: var(--space-lg);
}

/* ══ Long Document · legal ═════════════════════════════════════════════ */

.document {
  max-width: var(--measure-prose);
  padding-block: var(--space-2xl) var(--space-3xl);
}

.document h1 {
  font-size: var(--text-4xl);
  margin-bottom: var(--space-lg);
}

.document h2 {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-2xs);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: 0;
}

.document p,
.document li {
  color: var(--color-ink-2);
  line-height: var(--leading-loose);
}

.document p + p { margin-top: var(--space-sm); }

.document ul { margin-top: var(--space-sm); }

.document li {
  padding-left: var(--space-md);
  text-indent: calc(-1 * var(--space-md));
}

.document__source {
  margin-top: var(--space-xl);
  padding-top: var(--space-sm);
  border-top: var(--rule-hair) solid var(--color-rule);
}

.document li::before {
  content: "— ";
  color: var(--color-muted);
}

/* ══ Ft4 · Dense typographic colophon ══════════════════════════════════ */

.colophon {
  padding-block: var(--space-2xl);
  position: relative;
  border-top: var(--rule-medium) solid var(--color-ink);
}

.colophon .label {
  margin-bottom: var(--space-sm);
  color: var(--color-muted);
}

.colophon__text {
  max-width: 72ch;
  color: var(--color-ink-2);
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  line-height: 1.95;
  text-wrap: pretty;
}

.colophon__text a {
  color: var(--color-ink-2);
  text-decoration-color: var(--color-rule-strong);
}

.colophon__text a:hover { color: var(--color-accent); }

.colophon__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-lg);
  margin-top: var(--space-lg);
  padding-top: var(--space-sm);
  border-top: var(--rule-hair) solid var(--color-rule);
}

.colophon__links a {
  color: var(--color-ink);
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: var(--rule-hair) solid transparent;
  transition: border-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out);
}

.colophon__links a:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }

.colophon__foot { margin-top: var(--space-md); }

/* ══ Motion — three primitives, no more ═══════════════════════════════ */

/* Content is visible by default. JS *adds* .reveal-armed to hide it, so a
   failed script leaves a readable page rather than a blank one. */
.reveal-armed {
  opacity: 0;
  transition: opacity var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal-armed.is-in { opacity: 1; }

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
    scroll-behavior: auto !important;
  }

  .reveal-armed { opacity: 1; }
}

/* ══ Responsive ═══════════════════════════════════════════════════════ */

@media (max-width: 62rem) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
    align-items: start;
  }

  .hero__figure { max-width: 34rem; }

  .route,
  .chapter__body,
  .quote,
  .spec__row,
  .stances__grid,
  .offer,
  .enum--modules,
  .person {
    grid-template-columns: minmax(0, 1fr);
  }

  .stances__grid { gap: 0; }
  .stance + .stance { border-top: var(--rule-hair) solid var(--color-rule); }
  .stance { padding-bottom: var(--space-xl); }
  .stance:last-child { padding-bottom: 0; }

  .offer { gap: 0; }
  .offer__item { padding-bottom: var(--space-lg); }
  .offer__item + .offer__item { border-top: var(--rule-hair) solid var(--color-rule); }

  .person__figure { max-width: 34rem; }

  /* the alternation collapses — text always first on one column */
  .route:nth-child(even) .route__body,
  .route:nth-child(even) .route__index {
    grid-column: 1;
    grid-row: auto;
  }

  .route__index { padding-top: var(--space-2xs); }

  .quote { gap: var(--space-md); }

  .band { padding-block: var(--space-2xl); }
  .band + .band { padding-top: 0; }
  .band--sunk + .band,
  .band + .band--sunk { padding-top: var(--space-2xl); }
}

@media (max-width: 48rem) {
  :root { --text-md: 1rem; }

  .topbar__row { min-height: 3.5rem; }
  .topbar__mark { width: 32px; height: 32px; }

  .stances { padding-block: var(--space-xl) var(--space-2xl); }
  .stances__head h1 { font-size: var(--text-2xl); }
  .stance__quote { font-size: var(--text-xl); }

  .head h2 { font-size: var(--text-3xl); }

  .enum li { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); }
  .enum li > .ordinal { padding-top: 0; }

  .close { padding-block: var(--space-2xl); }
  .colophon__foot { margin-top: var(--space-lg); }
}

@media (max-width: 26rem) {
  .topbar__wordmark { font-size: 1.2rem; }
  .hero__lede { font-size: var(--text-lg); }
  .quote blockquote { font-size: var(--text-lg); }
}

/* Too narrow for two equal outer columns: the name centres between the mark
   and the chip instead of on the page's centre line. */
@media (max-width: 23rem) {
  .topbar__row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-xs);
  }
}