/* primavactor - The Chronicle
   Base reference: INK style system (warm paper, single editorial voice, whitespace as material),
   adapted to an archival register: parchment canvas, sepia ink, one sealing-wax accent.
   Handwritten CSS. No framework. Light theme only (print-emulating editorial).
   Radius system: sharp (0) everywhere. */

/* ---------- tokens ---------- */
:root {
  --paper:        #f2ece0;
  --paper-deep:   #e8dfcc;
  --paper-card:   #f8f4ea;
  /* Ink ramp. Re-spaced for contrast: --ink-faint was #8c7f6f, which measured
     3.3:1 on parchment and failed WCAG AA. It carries every figcaption, and on
     this site the captions are where the dates and the licences live, so they
     are evidence, not decoration, and cannot be grey-on-grey. Both soft and
     faint were walked down their own hue to restore a legible three-step ramp
     against the darkest surface either sits on (--paper-deep):
       ink 10.5:1  ·  ink-soft 6.2:1  ·  ink-faint 4.6:1 */
  --ink:          #332b21;
  --ink-soft:     #594d43;
  --ink-faint:    #6b6155;
  --rule:         #d4c9b3;
  --rule-strong:  #b9ad97;
  --wax:          #9d2b2b;
  --wax-deep:     #7b1f1f;

  --font-text: 'EB Garamond', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-meta: 'Public Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;

  --gutter: clamp(18px, 5vw, 88px);
  --measure: 66ch;

  --step-0: clamp(1.0625rem, 0.99rem + 0.36vw, 1.25rem);
  --step-1: clamp(1.25rem, 1.13rem + 0.6vw, 1.6rem);
  --step-2: clamp(1.55rem, 1.32rem + 1.15vw, 2.35rem);
  --step-3: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  --step-4: clamp(2.35rem, 1.5rem + 3.4vw, 4.15rem);

  --band: clamp(56px, 8vw, 132px);
  --band-tight: clamp(36px, 5vw, 72px);

  /* Motion. Built-in easings are too soft for this register; these have edges.
     Nothing here runs long enough to be noticed, which is the point. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --t-fast: 140ms;
  --t-base: 200ms;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: 1.62;
  font-feature-settings: "kern", "liga", "onum";
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
section[id], article[id] { scroll-margin-top: 80px; }
a { color: inherit; }
h1, h2, h3, h4 { font-weight: 500; line-height: 1.14; margin: 0; letter-spacing: -0.005em; }
p { margin: 0 0 0.85em; }
ul, ol { margin: 0 0 1em; padding-left: 1.15em; }
li { margin-bottom: 0.35em; }
:focus-visible { outline: 2px solid var(--wax); outline-offset: 3px; }
::selection { background: rgba(157, 43, 43, 0.16); color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
/* Deep-linked entries get marked, not moved: the chart and the FAQ both point
   into this list, and arriving somewhere mid-page without a cue is disorienting. */
.entry:target::after { background: var(--wax); }
.entry:target .entry__claim { color: var(--wax-deep); }

/* ---------- shared primitives ---------- */
.wrap { padding-inline: var(--gutter); }
.meta {
  font-family: var(--font-meta);
  font-size: 0.72rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
}
.btn {
  display: inline-block;
  font-family: var(--font-meta);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 12px 22px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-base) ease, color var(--t-base) ease,
              border-color var(--t-base) ease, transform var(--t-fast) var(--ease-out);
}
.btn:hover { background: var(--wax-deep); border-color: var(--wax-deep); }
/* Press feedback: the control must be seen to hear the click. Scale, not
   translate, because translate on an inline-block nudges the baseline. */
.btn:active { transform: scale(0.975); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}
.btn--ghost:hover { background: var(--paper-deep); color: var(--ink); border-color: var(--ink); }

.textlink {
  color: var(--wax);
  text-decoration: none;
  border-bottom: 1px solid rgba(157, 43, 43, 0.35);
  transition: border-color 0.2s ease;
}
.textlink:hover { border-bottom-color: var(--wax); }

figure { margin: 0; }
figcaption {
  font-family: var(--font-meta);
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--ink-faint);
  margin-top: 10px;
}

/* ---------- the dated plate ----------
   Every image on this site is evidence for a dated claim, so every image
   carries its date on its face, the way an archive box does. The tab is the
   one device repeated site-wide; the arrangements around it never are. */
.plate__frame {
  position: relative;
  background: var(--paper-deep);
}
.plate__frame img {
  width: 100%;
  filter: saturate(0.86) contrast(1.02);
}
.plate__yr {
  position: absolute;
  top: 0;
  left: 0;
  padding: 5px 11px 4px;
  background: var(--paper);
  border-right: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
  font-family: var(--font-meta);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--wax);
  white-space: nowrap;
}
.plate figcaption { max-width: 54ch; }

/* Plates in a rail: stacked, with the rule doing the separating. */
.plates { display: grid; gap: clamp(20px, 2.4vw, 30px); }
.plates .plate + .plate { padding-top: clamp(20px, 2.4vw, 30px); border-top: 1px solid var(--rule); }
.plates__label {
  font-family: var(--font-meta);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 -6px;
}
/* Venice only: the same building twice, so the pair is deliberately even. */
.plates--pair .plate:first-of-type .plate__yr { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- masthead ---------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(242, 236, 224, 0.94);
  border-bottom: 1px solid var(--rule);
  backdrop-filter: blur(6px);
}
.masthead__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
  padding-inline: var(--gutter);
}
.masthead__mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-size: 1.18rem;
  letter-spacing: 0.01em;
}
.masthead__mark svg { flex: none; }
.masthead__mark b { font-weight: 600; }
.masthead__mark span { color: var(--ink-faint); font-family: var(--font-meta); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; }
.masthead__nav { display: none; }
.masthead__nav a {
  font-family: var(--font-meta);
  font-size: 0.82rem;
  text-decoration: none;
  color: var(--ink-soft);
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.masthead__nav a:hover, .masthead__nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--wax); }
.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0 9px;
  background: none; border: none; cursor: pointer;
}
.burger i { display: block; height: 1px; background: var(--ink); transition: transform 0.2s ease, opacity 0.2s ease; }
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.drawer {
  display: none;
  border-top: 1px solid var(--rule);
  padding: 8px var(--gutter) 20px;
  background: var(--paper);
}
.drawer.is-open { display: block; }
.drawer a {
  display: block;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  font-family: var(--font-meta);
  font-size: 0.92rem;
  color: var(--ink);
}
@media (min-width: 62rem) {
  .masthead__nav { display: flex; gap: 22px; align-items: center; }
  .burger, .drawer { display: none !important; }
}

/* ---------- hero (asymmetric split, type-led) ---------- */
.hero { padding: clamp(32px, 5vw, 72px) 0 var(--band); }
.hero__grid {
  display: grid;
  gap: clamp(28px, 4vw, 52px);
  padding-inline: var(--gutter);
}
.hero h1 {
  font-size: var(--step-4);
  line-height: 1.02;
  max-width: 21ch;
  margin: 14px 0 0;
}
.hero h1 em { font-style: italic; color: var(--wax); }
.hero__sub {
  font-size: var(--step-1);
  line-height: 1.4;
  color: var(--ink-soft);
  max-width: 34ch;
  margin: 22px 0 0;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero__trust {
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-meta);
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--ink-faint);
  max-width: 44ch;
}
.hero__plate img { width: 100%; filter: saturate(0.88) contrast(1.02); }
@media (min-width: 60rem) {
  .hero__grid { grid-template-columns: 1fr 1.02fr; align-items: end; }
  .hero__plate { margin-bottom: -8px; }
}

/* ---------- section scaffold ---------- */
.band { padding-block: var(--band); }
.band--deep { background: var(--paper-deep); }
.band__head { padding-inline: var(--gutter); margin-bottom: clamp(26px, 3.5vw, 48px); }
.band__head h2 { font-size: var(--step-3); max-width: 18ch; }
.band__head p { max-width: var(--measure); margin-top: 16px; color: var(--ink-soft); }

/* ---------- keeper (narrow column, offset signature) ---------- */
.keeper { padding-inline: var(--gutter); }
.keeper__body { max-width: 60ch; }
.keeper__body h2 { font-size: var(--step-2); margin-bottom: 20px; }
.keeper__caveat {
  margin-top: 30px;
  border-left: 2px solid var(--wax);
  padding: 4px 0 4px 20px;
  color: var(--ink-soft);
  font-style: italic;
}
.keeper__sign {
  margin-top: 28px;
  font-family: var(--font-meta);
  font-size: 0.78rem;
  color: var(--ink-faint);
  line-height: 1.6;
}
@media (min-width: 66rem) {
  .keeper { display: grid; grid-template-columns: 12ch 1fr; gap: clamp(24px, 4vw, 64px); }
  .keeper__tag { padding-top: 8px; }
}

/* ---------- three definitions (stepped, offset) ---------- */
.defs { padding-inline: var(--gutter); display: grid; gap: 2px; }
.def {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  padding: clamp(22px, 2.6vw, 34px);
}
.def h3 { font-size: var(--step-2); margin-bottom: 10px; }
.def h3 small { display: block; font-family: var(--font-meta); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wax); margin-bottom: 12px; font-weight: 600; }
.def p { color: var(--ink-soft); margin-bottom: 0; }
.def p + p { margin-top: 0.7em; }
.def__eg {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--rule-strong);
  font-family: var(--font-meta);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--ink);
}
@media (min-width: 58rem) {
  .defs { grid-template-columns: repeat(3, 1fr); }
  .def:nth-child(2) { transform: translateY(26px); }
  .def:nth-child(3) { transform: translateY(52px); }
  .defs { margin-bottom: 52px; }
}

/* ---------- entries (record sheets) ---------- */
.entries { padding-inline: var(--gutter); }
.entry {
  border-top: 1px solid var(--rule-strong);
  padding-block: clamp(38px, 4.5vw, 68px);
}
.entry__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin-bottom: 18px;
}
.entry__claim {
  font-family: var(--font-meta);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.9rem, 1.2rem + 3vw, 3.1rem);
  font-weight: 300;
  color: var(--wax);
  line-height: 1;
}
.entry__claim small { display: block; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; margin-bottom: 6px; }
.entry h3 { font-size: var(--step-2); }
.entry h3 span { display: block; font-family: var(--font-meta); font-size: 0.76rem; font-weight: 400; letter-spacing: 0.05em; color: var(--ink-faint); margin-top: 8px; text-transform: none; }
.entry__grid { display: grid; gap: clamp(24px, 3vw, 44px); }
.entry__body > p { max-width: 62ch; }
.entry__body h4 { font-size: var(--step-1); margin: 26px 0 8px; }
.entry__rail { align-self: start; }

/* The breakout plate: Spa only. The one image on the site allowed out of the
   grid, because it is the one image that contradicts a headline by itself. */
.breakout {
  margin-top: clamp(34px, 4vw, 56px);
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 2px solid var(--ink);
  display: grid;
  gap: clamp(20px, 3vw, 40px);
}
.breakout__cap p { color: var(--ink-soft); font-size: 0.95rem; max-width: 46ch; }
.breakout__cap .meta { margin-bottom: 12px; color: var(--wax); }
.breakout__src { font-family: var(--font-meta); font-size: 0.7rem; color: var(--ink-faint); margin-bottom: 0; }
@media (min-width: 64rem) {
  .breakout { grid-template-columns: 1.35fr 1fr; align-items: start; }
}

.specs { margin: 0; border-top: 1px solid var(--rule); }
.specs > div {
  display: grid;
  grid-template-columns: 11ch 1fr;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
}
.specs dt {
  font-family: var(--font-meta);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 3px;
}
.specs dd { margin: 0; font-size: 0.94rem; line-height: 1.5; }

.score {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 24px 0 8px;
  padding-top: 18px;
  border-top: 2px solid var(--ink);
}
.score b { font-family: var(--font-meta); font-variant-numeric: tabular-nums; font-size: 1.9rem; font-weight: 500; line-height: 1; }
.score span { font-family: var(--font-meta); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.score--note { color: var(--ink-soft); font-size: 0.94rem; max-width: 54ch; }

.snag {
  margin-top: 22px;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--wax);
  padding: 18px 20px;
}
.snag b {
  display: block;
  font-family: var(--font-meta);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wax);
  margin-bottom: 7px;
}
.snag p { margin: 0; font-size: 0.96rem; color: var(--ink); }

.entry__foot { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 26px; }
.entry__foot .meta { margin-left: auto; text-transform: none; letter-spacing: 0.02em; font-size: 0.7rem; }

@media (min-width: 64rem) {
  .entry__grid { grid-template-columns: 1.5fr 1fr; }
  .entry--wide .entry__grid { grid-template-columns: 1fr 1.15fr; }

  /* The spine. The entries are not a list of venues, they are points on one
     axis, and at this width the page can afford to say so. The ring is the
     same glyph the chart uses for a claimed founding date, quoted on purpose:
     the reader meets it here first and recognises it 800px later.
     This is the only curve in the system, and it is a data mark, not a corner. */
  .entry { position: relative; padding-left: 104px; }
  .entry::before {
    content: "";
    position: absolute;
    left: 34px;
    top: -1px;
    bottom: 0;
    width: 1px;
    background: var(--rule-strong);
  }
  .entry::after {
    content: "";
    position: absolute;
    left: 30px;
    top: -5px;
    width: 9px;
    height: 9px;
    border: 1.5px solid var(--wax);
    border-radius: 50%;
    background: var(--paper);
  }
  .entry:last-child::before { bottom: auto; height: 100%; }
  .entry__claim { position: relative; }
  .entry__claim::before {
    content: "";
    position: absolute;
    left: -70px;
    top: 62%;
    width: 52px;
    height: 1px;
    background: var(--rule-strong);
  }
}

/* ---------- archive strip (above the chart) ----------
   Two plates, deliberately unequal: the argument is not symmetrical either. */
.archive {
  padding-inline: var(--gutter);
  margin-bottom: clamp(38px, 4.5vw, 64px);
}
.archive__label {
  font-family: var(--font-meta);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-strong);
}
.archive__label span {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wax);
  margin-right: 12px;
}
.archive__strip { display: grid; gap: clamp(24px, 3vw, 44px); }
.archive__note {
  margin: clamp(24px, 3vw, 36px) 0 0;
  max-width: 62ch;
  font-size: 0.98rem;
  color: var(--ink-soft);
  border-left: 2px solid var(--wax);
  padding-left: 18px;
}
@media (min-width: 58rem) {
  .archive__strip { grid-template-columns: 1.25fr 1fr; align-items: start; }
  .archive__item--wide { margin-top: 0; }
  .archive__item:not(.archive__item--wide) { margin-top: 42px; }
}

/* ---------- chart ---------- */
.chart-block { padding-inline: var(--gutter); }
.chart-frame {
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  padding: clamp(16px, 2.2vw, 30px);
  overflow-x: auto;
}
.chart-frame svg { display: block; min-width: 700px; width: 100%; height: auto; }
/* The chart scrolls sideways on narrow screens. Say so, once, and only where
   it is actually true. */
.chart-hint {
  display: block;
  font-family: var(--font-meta);
  font-size: 0.7rem;
  color: var(--ink-faint);
  margin-bottom: 10px;
}
@media (min-width: 62rem) { .chart-hint { display: none; } }
.cx-axis { font-family: var(--font-meta); font-size: 11px; fill: var(--ink-faint); font-variant-numeric: tabular-nums; }
.cx-name { font-family: var(--font-text); font-size: 16px; fill: var(--ink); }
.cx-place { font-family: var(--font-meta); font-size: 10px; fill: var(--ink-faint); letter-spacing: 0.05em; }
.cx-yr, .cx-claim, .cx-ban, .cx-bld {
  font-family: var(--font-meta);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.cx-yr { fill: var(--ink); }
.cx-bld { fill: var(--ink-soft); }
.cx-claim, .cx-ban { fill: var(--wax); }
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-meta);
  font-size: 0.76rem;
  color: var(--ink-soft);
}
.chart-legend span { display: inline-flex; align-items: center; gap: 9px; }
.chart-legend svg { min-width: 0; width: 26px; height: 14px; flex: none; }
.chart-note {
  margin-top: 22px;
  max-width: 68ch;
  font-size: 0.98rem;
  color: var(--ink-soft);
}
.chart-note strong { color: var(--ink); font-weight: 600; }

.table-toggle {
  margin-top: 18px;
  font-family: var(--font-meta);
  font-size: 0.8rem;
}
.table-toggle summary { cursor: pointer; color: var(--wax); }
/* Six columns of dates will not fit a phone, and squeezing them makes the
   numbers unreadable, which defeats the point of offering the table at all.
   Let it scroll, same as the chart it duplicates. */
.table-scroll { overflow-x: auto; }
.data-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  margin-top: 16px;
  font-family: var(--font-meta);
  font-size: 0.78rem;
}
.data-table caption { text-align: left; color: var(--ink-faint); padding-bottom: 10px; font-size: 0.74rem; }
.data-table th, .data-table td { text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.data-table th { color: var(--ink-faint); font-weight: 500; }
.data-table td { font-variant-numeric: tabular-nums; }

/* ---------- verdict ---------- */
.verdict { padding-inline: var(--gutter); }
.verdict__list { max-width: 74ch; margin: 0; }
.verdict__list > div { padding: clamp(18px, 2vw, 26px) 0; border-bottom: 1px solid var(--rule-strong); }
.verdict__list dt { font-size: var(--step-1); line-height: 1.3; margin-bottom: 10px; }
.verdict__list dd { margin: 0; color: var(--ink-soft); }
.verdict__list dd b { color: var(--ink); font-weight: 600; }
.verdict__close {
  margin-top: clamp(30px, 4vw, 54px);
  max-width: 60ch;
  font-size: var(--step-1);
  line-height: 1.44;
}

/* ---------- marginalia ---------- */
.marg { padding-inline: var(--gutter); columns: 1; column-gap: clamp(30px, 4vw, 64px); }
.marg__item { break-inside: avoid; margin-bottom: clamp(26px, 3vw, 44px); }
.marg__item h3 { font-size: var(--step-1); margin-bottom: 8px; }
.marg__item p { color: var(--ink-soft); font-size: 0.98rem; }
.marg__item p:last-child { margin-bottom: 0; }
.marg__cut { list-style: none; padding: 0; margin: 10px 0 0; }
.marg__cut li {
  padding: 8px 0 8px 20px;
  border-bottom: 1px dotted var(--rule-strong);
  position: relative;
  font-size: 0.94rem;
  color: var(--ink-soft);
}
.marg__cut li::before {
  content: "\00d7";
  position: absolute; left: 0; top: 7px;
  color: var(--wax);
  font-family: var(--font-meta);
}
@media (min-width: 60rem) { .marg { columns: 2; } }

/* ---------- faq ---------- */
.faq { padding-inline: var(--gutter); max-width: 78ch; }
.faq details { border-bottom: 1px solid var(--rule-strong); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 40px 20px 0;
  font-size: var(--step-1);
  line-height: 1.32;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute; right: 4px; top: 18px;
  font-family: var(--font-meta);
  font-weight: 300;
  font-size: 1.4rem;
  color: var(--wax);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding: 0 0 22px; color: var(--ink-soft); max-width: 62ch; }

/* ---------- subscribe form ---------- */
.form-block { padding-inline: var(--gutter); }
.form-shell {
  background: var(--paper-card);
  border: 1px solid var(--rule-strong);
  padding: clamp(24px, 3vw, 44px);
}
.form-shell h2 { font-size: var(--step-2); max-width: 20ch; }
.form-shell > p { max-width: 58ch; color: var(--ink-soft); margin-top: 14px; }
.field { display: grid; gap: 6px; margin-bottom: 18px; }
.field label { font-family: var(--font-meta); font-size: 0.78rem; font-weight: 500; color: var(--ink); }
.field label i { font-style: normal; color: var(--wax); }
.field input[type="text"], .field input[type="email"] {
  font-family: var(--font-meta);
  font-size: 1rem;
  padding: 12px 14px;
  min-height: 46px;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  color: var(--ink);
}
.field input::placeholder { color: var(--ink-faint); opacity: 1; }
.field input:focus-visible { border-color: var(--ink); }
.field small { font-family: var(--font-meta); font-size: 0.72rem; color: var(--ink-soft); }
.consent { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 20px; max-width: 62ch; }
.consent input { margin-top: 5px; width: 17px; height: 17px; accent-color: var(--wax); flex: none; }
.consent label { font-family: var(--font-meta); font-size: 0.8rem; line-height: 1.55; color: var(--ink-soft); }
.form-legal {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-meta);
  font-size: 0.73rem;
  line-height: 1.62;
  color: var(--ink-faint);
  max-width: 74ch;
}
.form-legal a { color: var(--ink-soft); }
.msg-ok {
  display: none;
  margin-bottom: 18px;
  padding: 13px 16px;
  border: 1px solid var(--ink);
  background: var(--paper-deep);
  font-family: var(--font-meta);
  font-size: 0.86rem;
}
.msg-ok.is-on { display: block; }

/* ---------- footer ---------- */
.colophon {
  background: var(--paper-deep);
  border-top: 1px solid var(--rule-strong);
  padding: var(--band-tight) 0 28px;
  margin-top: var(--band);
}
.colophon__grid {
  display: grid;
  gap: 30px;
  padding-inline: var(--gutter);
}
.colophon h2 { font-family: var(--font-meta); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 12px; font-weight: 600; }
.colophon ul { list-style: none; padding: 0; margin: 0; }
.colophon li { margin-bottom: 7px; }
.colophon a { font-family: var(--font-meta); font-size: 0.84rem; color: var(--ink-soft); text-decoration: none; }
.colophon a:hover { color: var(--wax); }
.colophon__about { max-width: 42ch; font-size: 0.95rem; color: var(--ink-soft); }
.rg-strip {
  margin-top: 34px;
  padding: 14px var(--gutter);
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
  font-family: var(--font-meta);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--ink);
}
.rg-strip b { color: var(--wax); }
.disclaimer {
  padding: 20px var(--gutter) 0;
  font-family: var(--font-meta);
  font-size: 0.7rem;
  line-height: 1.65;
  color: var(--ink-faint);
  max-width: 100ch;
}
.disclaimer a { color: var(--ink-soft); }
.credits { padding: 14px var(--gutter) 0; font-family: var(--font-meta); font-size: 0.68rem; line-height: 1.6; color: var(--ink-faint); }
.copyright { padding: 18px var(--gutter) 0; font-family: var(--font-meta); font-size: 0.72rem; color: var(--ink-faint); }
@media (min-width: 52rem) { .colophon__grid { grid-template-columns: 1.6fr 1fr 1fr; } }

/* ---------- interior pages ---------- */
.page-head { padding: clamp(38px, 5vw, 78px) var(--gutter) 0; }
.page-head h1 { font-size: var(--step-3); max-width: 20ch; margin-top: 12px; }
.page-head p { max-width: var(--measure); margin-top: 18px; color: var(--ink-soft); font-size: var(--step-1); line-height: 1.42; }
.prose { padding: clamp(30px, 4vw, 56px) var(--gutter) 0; max-width: calc(var(--measure) + var(--gutter) * 2); }
.prose h2 { font-size: var(--step-2); margin: 40px 0 12px; }
.prose h3 { font-size: var(--step-1); margin: 28px 0 8px; }
.prose ul { padding-left: 1.1em; }
.prose li { color: var(--ink-soft); }
.prose .updated { font-family: var(--font-meta); font-size: 0.74rem; color: var(--ink-faint); }
.prose table { width: 100%; border-collapse: collapse; margin: 18px 0; font-family: var(--font-meta); font-size: 0.82rem; }
.prose th, .prose td { text-align: left; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.prose th { color: var(--ink-faint); font-weight: 500; }

.help-list { list-style: none; padding: 0; margin: 18px 0 0; }
.help-list li { border-top: 1px solid var(--rule-strong); padding: 16px 0; margin: 0; color: var(--ink); }
.help-list b { display: block; font-size: var(--step-1); font-weight: 500; margin-bottom: 4px; }
/* only the direct child span is the block; .tel nests inside it and must stay inline */
.help-list > li > span { display: block; font-family: var(--font-meta); font-size: 0.82rem; color: var(--ink-soft); line-height: 1.55; }
.help-list .tel { display: inline; font-variant-numeric: tabular-nums; color: var(--wax); font-weight: 600; white-space: nowrap; }

/* ---------- 404 / thank you ---------- */
.stub { padding: clamp(60px, 12vh, 150px) var(--gutter) var(--band); }
.stub__year {
  font-family: var(--font-meta);
  font-size: clamp(4rem, 16vw, 11rem);
  font-weight: 200;
  line-height: 0.85;
  color: var(--rule-strong);
  letter-spacing: -0.03em;
}
.stub h1 { font-size: var(--step-3); max-width: 16ch; margin-top: 18px; }
.stub p { max-width: 52ch; margin-top: 16px; color: var(--ink-soft); font-size: var(--step-1); line-height: 1.42; }
.stub__links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }