/* TankTab home — editorial / chapbook design
 * Replaces the previous "section deck" landing.
 *
 * Display face: Fraunces variable (opsz 9..144, wght 100..900, ital, SOFT 0..100).
 * Body face:    pure system stack — no Inter, no third-party body font.
 *
 * NOTE: Fraunces is loaded from Google Fonts in the prototype. Before
 * shipping to production:
 *   1. Download the Fraunces variable .woff2 from
 *      https://fonts.google.com/specimen/Fraunces (the [VF] flat file).
 *   2. Drop into site/assets/fonts/.
 *   3. Replace the <link rel="stylesheet" ...fraunces...> tag in
 *      index.html with @font-face declarations here.
 */

/* ──────────────────────────────────────────────────────────
 * Design tokens — inlined for site/ self-containment.
 * Canonical source: marketing/design/tokens.css. If you edit
 * tokens here, mirror the change there (and vice versa).
 * ────────────────────────────────────────────────────────── */
:root {
  /* ── colour ─────────────────────────────────────────────── */
  --ink:        #14181C;  /* charcoal: body text, headings, primary surface */
  --ink-mute:   #5A6168;  /* secondary text, captions */
  --paper:      #F8F7F4;  /* warm off-white: page background */
  --paper-2:    #EFEDE6;  /* card surface, hover bg */
  --rule:       #E5E2DC;  /* hairlines, dividers */

  --save:       #1F8A50;  /* savings green: primary accent, CTAs, positive numerals */
  --save-deep:  #145A35;  /* hover/pressed state for save */
  --save-soft:  #E6F1EC;  /* tinted background for callouts */

  --warn:       #B85C2E;  /* rare: stale-price hint if surfaced */

  /* ── type ───────────────────────────────────────────────── */
  --font-sans:  Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:  "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-48: 3rem;
  --fs-72: 4.5rem;

  --lh-tight:  1.1;
  --lh-snug:   1.3;
  --lh-normal: 1.5;
  --ls-tight:  -0.02em;

  /* ── space + shape ──────────────────────────────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  --container-prose: 720px;  /* about / privacy reading column */
  --container-wide:  1080px; /* landing-page sections */
  --radius:          8px;
  --radius-lg:       16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:       #F2EFE8;
    --ink-mute:  #9AA0A6;
    --paper:     #0E1114;
    --paper-2:   #181C20;
    --rule:      #2A2F35;
    --save:      #2FA463;
    --save-deep: #237649;
    --save-soft: #14281E;
  }
}

/* ── type stacks ────────────────────────────────────────── */
:root {
  --display: 'Fraunces', 'Tiempos Headline', 'Iowan Old Style',
             'Cambria', Georgia, 'Times New Roman', serif;
  --body:    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI',
             'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  --label:   -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI',
             'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;

  /* edition-specific spacing */
  --gutter: clamp(20px, 4vw, 56px);
  --folio-max: 1040px;
  --reading-max: 640px;
}

/* ── base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1;
}
img, svg { max-width: 100%; height: auto; display: block; }
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--rule);
  transition: text-decoration-color 200ms, color 200ms;
}
a:hover {
  color: var(--save);
  text-decoration-color: var(--save);
}
:focus-visible {
  outline: 2px solid var(--save);
  outline-offset: 4px;
  border-radius: 2px;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* tiny shared atom — labels in small caps */
.eyebrow {
  font-family: var(--label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ── masthead — the title page ──────────────────────────── */
.masthead {
  min-height: 100svh;
  padding: var(--gutter);
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr 1fr;
  position: relative;
  border-bottom: 1px solid var(--rule);
}
.masthead .dateline      { grid-column: 1; grid-row: 1; }
.masthead .imprint       { grid-column: 2; grid-row: 1; text-align: right; }
.masthead .mark          { grid-column: 1 / -1; grid-row: 2; align-self: center; justify-self: center; text-align: center; }
.masthead .footer-rule   { grid-column: 1 / -1; grid-row: 3; text-align: center; }

.masthead .mark a {
  display: inline-block;
  text-decoration: none;
  color: var(--ink);
}
.masthead svg.tt-icon {
  height: clamp(72px, 11vw, 130px);
  width: auto;
  margin: 0 auto var(--s-5);
  fill: currentColor;
}
.masthead .wordmark {
  font-family: var(--display);
  font-weight: 720;
  font-size: clamp(60px, 12.5vw, 156px);
  line-height: 0.9;
  letter-spacing: -0.035em;
  margin: 0;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
}
.masthead .tagline {
  font-family: var(--display);
  font-style: italic;
  font-weight: 380;
  font-size: clamp(15px, 1.6vw, 18px);
  letter-spacing: 0.02em;
  color: var(--ink-mute);
  margin: var(--s-4) 0 0;
  font-variation-settings: 'opsz' 24, 'SOFT' 100;
}
.masthead .footer-rule {
  font-family: var(--label);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ── compact masthead — used on sub-pages (privacy / 404) ── */
.masthead--compact {
  min-height: 0;
  padding: clamp(20px, 3vw, 32px) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}
.masthead--compact .home-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--display);
  font-weight: 660;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-decoration: none;
  font-variation-settings: 'opsz' 60, 'SOFT' 30;
}
.masthead--compact .home-link svg {
  height: 28px;
  width: auto;
  fill: currentColor;
}
.masthead--compact .crumb {
  font-family: var(--label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ── 404 / page-not-found ───────────────────────────────── */
.miss {
  padding: clamp(96px, 16vw, 200px) 0 clamp(80px, 12vw, 144px);
  max-width: 720px;
}
.miss-num {
  font-family: var(--display);
  font-style: italic;
  font-weight: 320;
  font-size: clamp(120px, 22vw, 280px);
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--save);
  margin: 0 0 var(--s-4);
  font-variation-settings: 'opsz' 144, 'SOFT' 80;
}
.miss h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 var(--s-5);
  text-wrap: balance;
  font-variation-settings: 'opsz' 144, 'SOFT' 20;
}
.miss h1 em {
  font-style: italic;
  color: var(--ink-mute);
  font-weight: 480;
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
}
.miss p {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-mute);
  margin: 0 0 var(--s-6);
  max-width: 50ch;
}
.miss .back {
  display: inline-block;
  font-family: var(--label);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding: 0 0 6px;
  transition: color 200ms, border-color 200ms;
}
.miss .back:hover { color: var(--save); border-color: var(--save); }
.miss .back .arrow { display: inline-block; margin-left: 0.6em; transition: transform 200ms; }
.miss .back:hover .arrow { transform: translateX(3px); }

/* ── folio — the reading surface ────────────────────────── */
.folio {
  max-width: var(--folio-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* overture / opening paragraph */
.overture {
  padding: clamp(72px, 13vw, 168px) 0 clamp(56px, 9vw, 112px);
  max-width: 820px;
}
.overture .eyebrow { display: block; margin-bottom: var(--s-5); }
.lede {
  font-family: var(--display);
  font-weight: 720;
  font-size: clamp(40px, 7.4vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 var(--s-6);
  text-wrap: balance;
  font-variation-settings: 'opsz' 144, 'SOFT' 20;
}
.lede em {
  font-style: italic;
  font-weight: 540;
  color: var(--save-deep);
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
}

/* second-line italic continuation in the lede — sized down to ~70% of line 1 */
.lede-tail {
  display: inline-block;
  font-style: italic;
  font-weight: 540;
  font-size: 0.7em;
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
  margin-top: 0.2em;
}

/* animated word-cycler — typing animation.
   A "ghost" copy of the longest word ("movie tickets") locks the
   width so the page never reflows. The visible word + blinking
   caret sit absolutely positioned over the ghost. JS rewrites
   .cycler-word's text on a typing/deleting cadence. */
.lede .cycler {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
  color: var(--save-deep);
  white-space: nowrap;
}
.lede .cycler-ghost {
  visibility: hidden;
  display: inline-block;
  /* reserve space for the trailing caret so it never overruns the ghost */
  padding-right: 0.18em;
}
.lede .cycler-word {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  white-space: nowrap;
}
/* blinking caret at the end of the typed text */
.lede .cycler-word::after {
  content: '';
  display: inline-block;
  width: 0.055em;
  height: 0.82em;
  background: currentColor;
  margin-left: 0.06em;
  vertical-align: -0.02em;
  animation: caret-blink 1.05s step-end infinite;
}
@keyframes caret-blink {
  50% { opacity: 0; }
}
@media (prefers-color-scheme: dark) {
  .lede .cycler { color: var(--save); }
}
@media (prefers-reduced-motion: reduce) {
  .lede .cycler-word::after { animation: none; }
}
.lede-sub {
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.55;
  color: var(--ink-mute);
  max-width: 52ch;
  margin: 0;
}

/* chapter — generic two-column layout: roman + body */
.chapter {
  padding: clamp(64px, 10vw, 128px) 0;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  scroll-margin-top: 32px;
}
@media (min-width: 820px) {
  .chapter {
    grid-template-columns: 220px 1fr;
    gap: clamp(40px, 6vw, 80px);
  }
  .chapter > *:not(.chapter-head):not(.full) { grid-column: 2; }
}

/* generic prose body inside a chapter — for privacy / about-like flow */
.chapter-body {
  max-width: 60ch;
  font-size: 17px;
  line-height: 1.65;
}
.chapter-body > * + * { margin-top: var(--s-4); }
.chapter-body p { margin: 0; }
.chapter-body ul, .chapter-body ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.chapter-body ul li, .chapter-body ol li {
  position: relative;
  padding-left: 22px;
  margin: 0 0 var(--s-3);
  line-height: 1.55;
}
.chapter-body ul li:last-child, .chapter-body ol li:last-child { margin-bottom: 0; }
.chapter-body ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--save);
  font-family: var(--display);
  font-weight: 420;
}
.chapter-body strong {
  font-weight: 600;
  color: var(--ink);
}
.chapter-body em {
  font-family: var(--display);
  font-style: italic;
  font-weight: 440;
  font-variation-settings: 'opsz' 24, 'SOFT' 80;
}
.chapter-body a {
  color: var(--ink);
  text-decoration-color: var(--rule);
}
.chapter-body a:hover {
  color: var(--save);
  text-decoration-color: var(--save);
}
.chapter-body p.aside {
  font-family: var(--display);
  font-style: italic;
  color: var(--ink-mute);
  font-size: 0.96em;
  font-variation-settings: 'opsz' 24, 'SOFT' 100;
}
/* small inset list for sub-bullets / data sources */
.chapter-body .roster {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
}
.chapter-body .roster li::before { display: none; }
.chapter-body .roster li {
  padding-left: 0;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--s-3);
  align-items: baseline;
  font-size: 15px;
  color: var(--ink-mute);
}
.chapter-body .roster li strong {
  font-family: var(--display);
  font-weight: 540;
  font-style: italic;
  color: var(--ink);
  font-variation-settings: 'opsz' 24, 'SOFT' 80;
  letter-spacing: 0.02em;
}

/* Stripe buy-button host element */
.chapter-body .tip-jar {
  margin-top: var(--s-5);
  display: flex;
  justify-content: flex-start;
}

.chapter-head { display: flex; flex-direction: column; gap: var(--s-3); }
.chapter-roman {
  font-family: var(--display);
  font-weight: 320;
  font-style: italic;
  font-size: clamp(56px, 9vw, 116px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--save);
  font-variation-settings: 'opsz' 144, 'SOFT' 60;
}
.chapter-title {
  font-family: var(--display);
  font-weight: 660;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
  font-variation-settings: 'opsz' 96, 'SOFT' 30;
}

/* the lead-in paragraph after a chapter head */
.entry {
  font-size: 19px;
  line-height: 1.55;
  margin: 0 0 var(--s-7);
  max-width: 56ch;
}
.entry .dropcap {
  font-family: var(--display);
  font-weight: 700;
  font-size: 4.6em;
  float: left;
  line-height: 0.86;
  margin: 0.06em 0.08em -0.1em 0;
  color: var(--ink);
  font-variation-settings: 'opsz' 144, 'SOFT' 0;
}

/* numbered entries within a chapter */
.entries {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: clamp(40px, 5vw, 64px);
}
.entries > li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--s-5);
  align-items: baseline;
  max-width: 60ch;
}
.entry-num {
  font-family: var(--display);
  font-style: italic;
  font-weight: 420;
  font-size: 22px;
  color: var(--ink-mute);
  font-variant-numeric: oldstyle-nums;
  font-variation-settings: 'opsz' 24, 'SOFT' 80;
}
.entries h3 {
  font-family: var(--display);
  font-weight: 580;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.25;
  letter-spacing: -0.012em;
  margin: 0 0 var(--s-2);
  font-variation-settings: 'opsz' 60, 'SOFT' 20;
}
.entries li > p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-mute);
  margin: 0;
  max-width: 50ch;
  grid-column: 2;
}
/* let the heading also start in column 2 */
.entries h3 { grid-column: 2; }

/* ── chapter II — typographic plate (states) ────────────── */
.chapter--plate {
  display: block;
  text-align: center;
}
.chapter--plate .chapter-head {
  align-items: center;
  margin: 0 auto clamp(40px, 6vw, 64px);
  flex-direction: column;
}
.plate {
  max-width: 720px;
  margin: 0 auto;
}
.plate-line {
  font-family: var(--display);
  font-weight: 360;
  font-size: clamp(28px, 4.4vw, 52px);
  letter-spacing: 0.005em;
  line-height: 1.4;
  font-variation-settings: 'opsz' 144, 'SOFT' 40;
  padding: clamp(16px, 2.5vw, 28px) 0;
  border-top: 1px solid var(--rule);
}
.plate-line:last-child { border-bottom: 1px solid var(--rule); }
.plate-line span {
  font-style: italic;
  color: var(--save);
  font-weight: 380;
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
}
.footnote {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-mute);
  max-width: 56ch;
  margin: clamp(40px, 6vw, 64px) auto 0;
  text-align: center;
}

/* ── chapter III — the creed (privacy promises) ─────────── */
.creed {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 64ch;
}
.creed li {
  font-size: 19px;
  line-height: 1.5;
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: var(--s-4);
  align-items: baseline;
}
.creed li:first-child { border-top: 1px solid var(--rule); }
.creed-mark {
  font-family: var(--display);
  color: var(--save);
  font-weight: 420;
  font-size: 24px;
  line-height: 1;
  font-variation-settings: 'opsz' 144, 'SOFT' 60;
}
.creed em {
  font-style: italic;
  font-family: var(--display);
  font-weight: 440;
  color: var(--ink-mute);
  font-size: 0.96em;
  display: block;
  margin-top: 4px;
  font-variation-settings: 'opsz' 60, 'SOFT' 100;
}

/* ── a note from the maker — full-bleed pull quote ──────── */
.note {
  position: relative;
  padding: clamp(80px, 12vw, 144px) var(--gutter);
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin: clamp(48px, 8vw, 96px) 0;
}
.note-inner {
  max-width: var(--folio-max);
  margin: 0 auto;
}
.note-inner {
  text-align: center;
}
.note .eyebrow {
  display: block;
  margin-bottom: var(--s-6);
}
.note-body {
  font-family: var(--display);
  font-style: italic;
  font-weight: 380;
  font-size: clamp(28px, 4.4vw, 56px);
  line-height: 1.45;
  letter-spacing: -0.015em;
  margin: 0 auto;
  max-width: 28ch;
  text-wrap: balance;
  quotes: '\201C' '\201D';
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
  border: 0;
  padding: 0;
}
.note-body::before {
  content: open-quote;
  font-family: var(--display);
  font-style: italic;
  color: var(--save);
  font-size: 1.4em;
  line-height: 0;
  margin-right: 0.04em;
  vertical-align: -0.22em;
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
}
.note-body::after {
  content: close-quote;
  display: none;
}
.note-body em {
  font-style: italic;
  color: var(--save-deep);
}
.note-sig {
  font-family: var(--label);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: var(--s-7) 0 0;
}
.note-sig a { color: var(--ink-mute); text-decoration-color: currentColor; }

/* ── chapter IV — questions / FAQ ───────────────────────── */
.questions {
  display: grid;
  border-top: 1px solid var(--rule);
  max-width: 64ch;
}
.questions details {
  border-bottom: 1px solid var(--rule);
  padding: var(--s-5) 0;
}
.questions summary {
  cursor: pointer;
  list-style: none;
  display: grid;
  grid-template-columns: 38px 1fr 24px;
  gap: var(--s-3);
  align-items: baseline;
  font-family: var(--display);
  font-weight: 540;
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-variation-settings: 'opsz' 60, 'SOFT' 30;
}
.questions summary::-webkit-details-marker { display: none; }
.q-num {
  font-style: italic;
  font-weight: 380;
  color: var(--ink-mute);
  font-variant-numeric: oldstyle-nums;
  font-variation-settings: 'opsz' 24, 'SOFT' 80;
}
.q-mark {
  font-family: var(--body);
  font-weight: 200;
  font-size: 22px;
  color: var(--ink-mute);
  text-align: right;
  line-height: 1;
  transition: transform 200ms;
}
.questions details[open] .q-mark { transform: rotate(45deg); }
.answer {
  margin-top: var(--s-4);
  padding-left: calc(38px + var(--s-3));
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-mute);
  max-width: 56ch;
}
.answer p { margin: 0 0 var(--s-3); }
.answer p:last-child { margin-bottom: 0; }
.answer ul { padding-left: var(--s-5); margin: 0 0 var(--s-3); }
.answer li { margin-bottom: var(--s-2); }
.answer strong { font-weight: 600; color: var(--ink); }
.answer a { color: var(--ink); text-decoration-color: var(--rule); }
.questions-tail {
  margin: var(--s-6) 0 0;
  padding-left: calc(38px + var(--s-3));
  font-family: var(--label);
  font-size: 14px;
  color: var(--ink-mute);
}

/* ── colophon — the close ───────────────────────────────── */
.colophon {
  padding: clamp(96px, 14vw, 168px) 0 clamp(64px, 8vw, 96px);
  text-align: center;
  border-top: 1px solid var(--rule);
}
.colophon-call {
  font-family: var(--display);
  font-weight: 660;
  font-size: clamp(30px, 4.8vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-7);
  text-wrap: balance;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
}
.colophon-call em {
  font-style: italic;
  color: var(--save-deep);
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
}
.cta {
  display: inline-block;
  font-family: var(--label);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding: 0 0 6px;
  transition: color 200ms, border-color 200ms, transform 200ms;
}
.cta:hover {
  color: var(--save);
  border-color: var(--save);
}
.cta .arrow {
  display: inline-block;
  margin-left: 0.6em;
  transition: transform 200ms;
}
.cta:hover .arrow { transform: translateX(3px); }

.colophon-rule {
  border: 0;
  width: 48px;
  height: 1px;
  background: var(--rule);
  margin: clamp(56px, 9vw, 96px) auto;
}
.colophon-line {
  font-family: var(--label);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  margin: 0 0 var(--s-2);
  line-height: 1.55;
}
.colophon-line a { color: var(--ink-mute); text-decoration-color: var(--rule); }
.colophon-line a:hover { color: var(--ink); }
.colophon-line.tiny {
  margin-top: var(--s-6);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

/* ── motion: a single, restrained entrance ─────────────── */
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.masthead .dateline,
.masthead .imprint,
.masthead .footer-rule {
  animation: fade 1.4s cubic-bezier(.2,.7,.2,1) backwards;
}
.masthead svg.tt-icon,
.masthead .wordmark,
.masthead .tagline {
  animation: rise 1.4s cubic-bezier(.2,.7,.2,1) backwards;
}
.masthead .dateline { animation-delay: 0.05s; }
.masthead .imprint  { animation-delay: 0.1s; }
.masthead svg.tt-icon { animation-delay: 0.25s; }
.masthead .wordmark { animation-delay: 0.4s; }
.masthead .tagline  { animation-delay: 0.55s; }
.masthead .footer-rule { animation-delay: 0.85s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── narrow / mobile refinements ────────────────────────── */
@media (max-width: 820px) {
  .chapter { gap: var(--s-5); }
  .chapter-roman { font-size: 56px; }
  .chapter-head { gap: var(--s-2); }
  .chapter--plate .chapter-head { margin-bottom: var(--s-7); }
  .entries > li { grid-template-columns: 28px 1fr; gap: var(--s-3); }
}
@media (max-width: 480px) {
  .masthead { grid-template-columns: 1fr; }
  .masthead .dateline,
  .masthead .imprint { grid-column: 1; text-align: center; }
  .masthead .imprint { grid-row: 4; }
  .masthead .mark { grid-row: 2; }
  .masthead .footer-rule { grid-row: 3; }
}

/* ── dark theme adjustments ─────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .lede em { color: var(--save); }
  .note-body em { color: var(--save); }
  .colophon-call em { color: var(--save); }
  .creed-mark { color: var(--save); }
}