/* ============================================================
   The Sussex Ledger — design tokens + components
   Art direction: Delaware coastal civic newspaper.
   Ink navy on warm paper, restrained marsh accent, one flag red
   reserved for election-season kickers only.
   ============================================================ */

:root,
[data-theme='light'] {
  /* type */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.25vw, 0.9375rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1rem + 0.7vw, 1.4375rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  --text-2xl: clamp(2rem, 1.3rem + 2.4vw, 3.25rem);
  --text-3xl: clamp(2.5rem, 1.2rem + 4vw, 4.5rem);

  /* spacing */
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem;     --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem;    --space-20: 5rem;   --space-24: 6rem;
  --space-32: 8rem;

  /* surfaces — warm newsprint */
  --color-bg: #f4f1e8;
  --color-surface: #faf8f1;
  --color-surface-2: #fdfcf7;
  --color-surface-offset: #eae5d8;
  --color-surface-offset-2: #e2dccc;
  --color-divider: #ddd7c8;
  --color-border: #cbc4b1;
  --color-rule: #1d2b3a;

  /* ink */
  --color-text: #14202e;
  --color-text-muted: #5c6672;
  --color-text-faint: #636972;
  --color-text-inverse: #f7f5ee;

  /* marsh accent */
  --color-primary: #2c5b4b;
  --color-primary-hover: #1f4438;
  --color-primary-active: #163229;
  --color-primary-soft: #dde8e1;

  /* flag red — election kickers and deadlines only */
  --color-flag: #932a1e;
  --color-flag-soft: #f3e2de;

  /* status */
  --color-caution: #8a5a11;
  --color-caution-soft: #f2e8d3;

  /* party inks */
  --color-party-d: #1d4f80;
  --color-party-r: #932a1e;
  --color-party-o: #5b4a80;

  --radius-sm: 0.1875rem;
  --radius-md: 0.25rem;
  --radius-lg: 0.375rem;
  --radius-full: 9999px;

  --transition-interactive: 160ms cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-sm: 0 1px 2px oklch(0.2 0.02 250 / 0.07);
  --shadow-md: 0 4px 14px oklch(0.2 0.02 250 / 0.09);

  --content-narrow: 680px;
  --content-default: 1000px;
  --content-wide: 1240px;

  --font-display: 'Gambetta', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Satoshi', 'Helvetica Neue', Arial, sans-serif;

  color-scheme: light;
}

[data-theme='dark'] {
  --color-bg: #10161d;
  --color-surface: #161d25;
  --color-surface-2: #1b232c;
  --color-surface-offset: #1f2831;
  --color-surface-offset-2: #26303a;
  --color-divider: #26303a;
  --color-border: #37424e;
  --color-rule: #8fa3b5;

  --color-text: #e3e0d6;
  --color-text-muted: #9aa4af;
  --color-text-faint: #939ba4;
  --color-text-inverse: #10161d;

  --color-primary: #86b8a2;
  --color-primary-hover: #a3cdb9;
  --color-primary-active: #bcdcca;
  --color-primary-soft: #1e2f2a;

  --color-flag: #e0806f;
  --color-flag-soft: #33211e;

  --color-caution: #d5a75c;
  --color-caution-soft: #2e2718;

  --color-party-d: #77aade;
  --color-party-r: #e0806f;
  --color-party-o: #a996d6;

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.4);
  --shadow-md: 0 4px 14px oklch(0 0 0 / 0.5);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #10161d; --color-surface: #161d25; --color-surface-2: #1b232c;
    --color-surface-offset: #1f2831; --color-surface-offset-2: #26303a;
    --color-divider: #26303a; --color-border: #37424e; --color-rule: #8fa3b5;
    --color-text: #e3e0d6; --color-text-muted: #9aa4af; --color-text-faint: #939ba4;
    --color-text-inverse: #10161d;
    --color-primary: #86b8a2; --color-primary-hover: #a3cdb9; --color-primary-soft: #1e2f2a;
    --color-flag: #e0806f; --color-flag-soft: #33211e;
    --color-caution: #d5a75c; --color-caution-soft: #2e2718;
    --color-party-d: #77aade; --color-party-r: #e0806f; --color-party-o: #a996d6;
    color-scheme: dark;
  }
}

/* ---------------------------------------------------------- primitives -- */

.wrap { width: 100%; max-width: var(--content-wide); margin-inline: auto; padding-inline: var(--space-5); }
.wrap--default { max-width: var(--content-default); }
.wrap--narrow { max-width: var(--content-narrow); }

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

.kicker {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.kicker--flag { color: var(--color-flag); }
.kicker--marsh { color: var(--color-primary); }

.serif { font-family: var(--font-display); }
.lede { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.45; color: var(--color-text); }
.muted { color: var(--color-text-muted); }
.small { font-size: var(--text-sm); }
.xs { font-size: var(--text-xs); }
.nowrap { white-space: nowrap; }

.rule { border: 0; border-top: 1px solid var(--color-divider); margin-block: var(--space-8); }
.rule--heavy { border-top: 2px solid var(--color-rule); }

/* ------------------------------------------------------------- header --- */

.skip {
  position: absolute; left: var(--space-4); top: -4rem; z-index: 100;
  background: var(--color-primary); color: var(--color-text-inverse);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-md);
}
.skip:focus { top: var(--space-3); }

.masthead {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--color-bg) 94%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-divider);
}
.masthead__bar {
  display: flex; align-items: center; gap: var(--space-4);
  min-height: 60px; padding-block: var(--space-2);
}
.brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--color-text); flex: 0 0 auto; }
.brand:hover { color: var(--color-text); }
.brand svg { color: var(--color-text); flex: 0 0 auto; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.3125rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1;
}
.brand__sub { display: block; font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); margin-top: 3px; }

.nav { display: flex; gap: var(--space-1); margin-left: auto; }
.nav a {
  font-size: var(--text-sm); font-weight: 500; text-decoration: none;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  color: var(--color-text-muted); white-space: nowrap;
}
.nav a:hover { color: var(--color-text); background: var(--color-surface-offset); }
.nav a[aria-current='page'] { color: var(--color-text); box-shadow: inset 0 -2px 0 var(--color-primary); }

.iconbtn {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: var(--radius-md); color: var(--color-text-muted);
  border: 1px solid transparent;
}
.iconbtn:hover { color: var(--color-text); background: var(--color-surface-offset); }
.masthead__tools { display: flex; align-items: center; gap: var(--space-1); }
.navtoggle { display: none; }

.mobilenav { display: none; border-top: 1px solid var(--color-divider); padding-block: var(--space-2) var(--space-4); }
.mobilenav.open { display: block; }
.mobilenav a {
  display: block; padding: var(--space-3) var(--space-2); text-decoration: none;
  font-size: var(--text-base); font-weight: 500; border-bottom: 1px solid var(--color-divider);
}
.mobilenav a:last-child { border-bottom: 0; }

@media (max-width: 860px) {
  .nav { display: none; }
  .navtoggle { display: grid; }
}

/* the election ribbon */
.ribbon {
  background: var(--color-rule); color: var(--color-text-inverse);
  font-size: var(--text-xs); letter-spacing: 0.06em;
}
[data-theme='dark'] .ribbon { background: var(--color-surface-offset); color: var(--color-text); }
:root:not([data-theme]) .ribbon { color: var(--color-text-inverse); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .ribbon { background: var(--color-surface-offset); color: var(--color-text); }
}
.ribbon__inner { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); align-items: center; padding-block: var(--space-2); }
.ribbon strong { letter-spacing: 0.12em; text-transform: uppercase; font-size: var(--text-xs); }
.ribbon a { color: inherit; }

/* --------------------------------------------------------------- hero --- */

.lead-story { padding-block: var(--space-10) var(--space-8); border-bottom: 2px solid var(--color-rule); }
.lead-story__grid { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .lead-story__grid { grid-template-columns: 1fr; gap: var(--space-6); } }

.headline {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.04;
  margin-block: var(--space-3) var(--space-4);
  max-width: 18ch;
}
.lead-story__grid > div:first-child > p:first-of-type { font-size: var(--text-lg); font-family: var(--font-display); line-height: 1.45; }
.lead-story__meta { margin-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px; padding: var(--space-2) var(--space-5);
  font-size: var(--text-sm); font-weight: 600; text-decoration: none;
  border-radius: var(--radius-md);
  background: var(--color-primary); color: var(--color-text-inverse);
  border: 1px solid var(--color-primary);
}
[data-theme='dark'] .btn:not(.btn--ghost) { color: #0d1512; }
.btn:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: var(--color-text-inverse); }
[data-theme='dark'] .btn:not(.btn--ghost):hover { color: #0d1512; }
.btn--ghost { background: transparent; color: var(--color-text); border-color: var(--color-border); }
.btn--ghost:hover { background: var(--color-surface-offset); color: var(--color-text); border-color: var(--color-rule); }

/* countdown panel */
.dateblock { border: 1px solid var(--color-border); background: var(--color-surface); padding: var(--space-5); border-radius: var(--radius-md); }
.dateblock__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding-block: var(--space-3); border-bottom: 1px solid var(--color-divider); }
.dateblock__row:last-of-type { border-bottom: 0; }
.dateblock__d { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; line-height: 1.1; }
.dateblock__c { font-size: var(--text-xs); color: var(--color-flag); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.dateblock p { font-size: var(--text-sm); font-family: var(--font-body); }
.dateblock .xs { font-size: var(--text-xs); }

/* --------------------------------------------------------------- pulse -- */

.pulse { border-bottom: 1px solid var(--color-divider); padding-block: var(--space-6); }
.pulse__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
@media (max-width: 780px) { .pulse__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); } }
.pulse__n { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.pulse__l { font-size: var(--text-sm); font-weight: 600; margin-top: var(--space-2); }
.pulse__note { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-1); }

/* -------------------------------------------------------------- beats --- */

.section { padding-block: var(--space-12); }
.section--tight { padding-block: var(--space-8); }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); border-bottom: 2px solid var(--color-rule); padding-bottom: var(--space-2); margin-bottom: var(--space-6); }
.section__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; }

.beats { display: grid; gap: 0; }
.beat { display: grid; grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) minmax(0, 16rem); gap: var(--space-6); padding-block: var(--space-6); border-bottom: 1px solid var(--color-divider); }
.beat:first-child { padding-top: 0; }
.beat h3 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; margin-bottom: var(--space-2); }
.beat p { font-size: var(--text-base); color: var(--color-text-muted); }
.beat__side { font-size: var(--text-xs); color: var(--color-text-faint); border-left: 1px solid var(--color-divider); padding-left: var(--space-4); }
@media (max-width: 880px) {
  .beat { grid-template-columns: 1fr; gap: var(--space-2); }
  .beat__side { border-left: 0; padding-left: 0; border-top: 1px solid var(--color-divider); padding-top: var(--space-3); margin-top: var(--space-2); }
}

/* ------------------------------------------------------------- badges --- */

.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em;
  padding: 2px var(--space-2); border-radius: var(--radius-sm);
  border: 1px solid var(--color-border); color: var(--color-text-muted);
  background: var(--color-surface-2); white-space: nowrap;
}
.badge--pending { color: var(--color-caution); border-color: color-mix(in srgb, var(--color-caution) 45%, transparent); background: var(--color-caution-soft); }
.badge--open { color: var(--color-flag); border-color: color-mix(in srgb, var(--color-flag) 45%, transparent); background: var(--color-flag-soft); }
.badge--marsh { color: var(--color-primary); border-color: color-mix(in srgb, var(--color-primary) 45%, transparent); background: var(--color-primary-soft); }
.badge--d { color: var(--color-party-d); border-color: color-mix(in srgb, var(--color-party-d) 40%, transparent); background: transparent; }
.badge--r { color: var(--color-party-r); border-color: color-mix(in srgb, var(--color-party-r) 40%, transparent); background: transparent; }
.badge--o { color: var(--color-party-o); border-color: color-mix(in srgb, var(--color-party-o) 40%, transparent); background: transparent; }
.badge--withdrawn { text-decoration: line-through; opacity: 0.75; }

/* -------------------------------------------------------------- guide --- */

.pagehead { padding-block: var(--space-10) var(--space-6); border-bottom: 2px solid var(--color-rule); }
.pagehead h1 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.02em; margin-block: var(--space-2) var(--space-3); }
.pagehead--hero h1 { font-size: var(--text-2xl); line-height: 1.05; }
.pagehead p { color: var(--color-text-muted); font-size: var(--text-base); }
.pagehead .lede { color: var(--color-text); }

.stamp { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-4); font-size: var(--text-xs); color: var(--color-text-faint); }

.controls { display: grid; gap: var(--space-4); padding-block: var(--space-6); border-bottom: 1px solid var(--color-divider); }
.searchrow { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.field { flex: 1 1 260px; display: flex; flex-direction: column; gap: var(--space-2); }
.field label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); }
.field input, .field select {
  min-height: 44px; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface-2); color: var(--color-text); font-size: var(--text-sm);
}
.field input:focus, .field select:focus { border-color: var(--color-primary); }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  font-size: var(--text-sm); font-weight: 500;
  min-height: 38px; padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--radius-full);
  color: var(--color-text-muted); background: transparent;
}
.chip:hover { border-color: var(--color-rule); color: var(--color-text); }
.chip[aria-pressed='true'] { background: var(--color-rule); border-color: var(--color-rule); color: var(--color-text-inverse); }
[data-theme='dark'] .chip[aria-pressed='true'] { background: var(--color-primary); border-color: var(--color-primary); color: #0d1512; }

.resultcount { font-size: var(--text-sm); color: var(--color-text-muted); padding-top: var(--space-5); }

.racelist { display: grid; gap: 0; }
.racerow {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: var(--space-6); padding-block: var(--space-6);
  border-bottom: 1px solid var(--color-divider); align-items: start;
}
@media (max-width: 820px) { .racerow { grid-template-columns: 1fr; gap: var(--space-4); } }
.racerow h3 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; }
.racerow h3 a { text-decoration: none; }
.racerow h3 a:hover { text-decoration: underline; }
.racerow__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.racerow__status { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); }

.candlist { display: grid; gap: var(--space-1); }
.candrow {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md); text-decoration: none;
  border: 1px solid transparent;
}
.candrow:hover { background: var(--color-surface-offset); border-color: var(--color-border); color: var(--color-text); }
.candrow__name { font-weight: 600; font-size: var(--text-sm); }
.candrow__stage { font-size: var(--text-xs); color: var(--color-text-muted); margin-left: auto; }
@media (max-width: 560px) {
  .candrow { align-items: flex-start; row-gap: var(--space-1); }
  .candrow__stage { margin-left: 0; flex: 1 0 100%; padding-left: calc(var(--space-3) + 1.5rem); }
}

.emptystate { padding: var(--space-12) 0; text-align: left; color: var(--color-text-muted); }
.emptystate strong { display: block; font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-text); margin-bottom: var(--space-2); }

/* callout / notices */
.notice {
  border: 1px solid var(--color-border); background: var(--color-surface);
  border-radius: var(--radius-md); padding: var(--space-5); margin-block: var(--space-6);
}
.notice--pending { background: var(--color-caution-soft); border-color: color-mix(in srgb, var(--color-caution) 40%, transparent); }
.notice--flag { background: var(--color-flag-soft); border-color: color-mix(in srgb, var(--color-flag) 35%, transparent); }
.notice h3 { font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--space-2); }
.notice p { font-size: var(--text-sm); }
.notice p + p { margin-top: var(--space-3); }

/* -------------------------------------------------------- profile view -- */

.profile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); gap: var(--space-10); padding-block: var(--space-8); align-items: start; }
.profile > * { min-width: 0; }
@media (max-width: 900px) { .profile { grid-template-columns: 1fr; gap: var(--space-8); } }

.factlist { border-top: 1px solid var(--color-rule); }
.factlist div { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-3); border-bottom: 1px solid var(--color-divider); }
.factlist dt { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); }
.factlist dd { font-size: var(--text-sm); }
@media (max-width: 520px) { .factlist div { grid-template-columns: 1fr; gap: var(--space-1); } }

.sourcebox { border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius-md); padding: var(--space-5); }
.sourcebox h2, .sourcebox h3 { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-3); }
.sourcebox ul { list-style: none; display: grid; gap: var(--space-3); }
.sourcebox li { font-size: var(--text-sm); line-height: 1.45; }
.sourcebox a { color: var(--color-primary); }
.sourcebox a:hover { color: var(--color-primary-hover); }
.ext::after { content: '↗'; font-size: 0.8em; margin-left: 0.25em; color: var(--color-text-faint); }

/* --------------------------------------------------------------- towns -- */

.townlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 var(--space-8); }
.town { padding-block: var(--space-5); border-bottom: 1px solid var(--color-divider); }
.town__top { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.town h3 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; }
.town__pop { font-size: var(--text-xs); color: var(--color-text-faint); }
.town p { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); }
.town__nums { display: flex; gap: var(--space-5); margin-top: var(--space-3); }
.town__num b { display: block; font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; }
.town__num span { font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-faint); }

/* ------------------------------------------------------------- tables --- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.dtable { font-size: var(--text-sm); min-width: 34rem; }
.dtable th, .dtable td { text-align: left; padding: var(--space-3) var(--space-4) var(--space-3) 0; border-bottom: 1px solid var(--color-divider); vertical-align: top; }
.dtable thead th { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); border-bottom: 2px solid var(--color-rule); }
.dtable td.num, .dtable th.num { text-align: right; font-variant-numeric: tabular-nums; padding-right: 0; }

.timeline { border-top: 2px solid var(--color-rule); }
.timeline__row { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: var(--space-5); padding-block: var(--space-4); border-bottom: 1px solid var(--color-divider); }
.timeline__row.is-past { opacity: 0.55; }
.timeline__d { font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; font-variant-numeric: tabular-nums; }
.timeline__l { font-size: var(--text-sm); }
@media (max-width: 620px) { .timeline__row { grid-template-columns: 1fr; gap: var(--space-1); } }

/* ----------------------------------------------------------- prose doc -- */

.doc { padding-block: var(--space-8) var(--space-12); }
.doc h2 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; margin-top: var(--space-8); margin-bottom: var(--space-3); }
.doc h2:first-of-type { margin-top: var(--space-6); }
.doc p { margin-bottom: var(--space-4); color: var(--color-text-muted); }
.doc .lede { color: var(--color-text); margin-bottom: var(--space-6); }
.doc ol { margin: 0 0 var(--space-4) var(--space-5); display: grid; gap: var(--space-3); }
.doc ol li { color: var(--color-text-muted); font-size: var(--text-base); }

/* ---------------------------------------------------------- newsletter -- */

.signup { border-top: 2px solid var(--color-rule); border-bottom: 2px solid var(--color-rule); padding-block: var(--space-10); }
.signup__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: var(--space-8); align-items: start; }
@media (max-width: 820px) { .signup__grid { grid-template-columns: 1fr; gap: var(--space-6); } }
.signup h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.02em; }
.signup p { color: var(--color-text-muted); margin-top: var(--space-3); }
.signup form { display: flex; flex-direction: column; gap: var(--space-3); }
.signup__note { font-size: var(--text-xs); color: var(--color-text-faint); }
.signup__ok { border: 1px solid color-mix(in srgb, var(--color-primary) 45%, transparent); background: var(--color-primary-soft); color: var(--color-text); padding: var(--space-4); border-radius: var(--radius-md); font-size: var(--text-sm); }

/* -------------------------------------------------------------- footer -- */

.foot { border-top: 1px solid var(--color-divider); padding-block: var(--space-10) var(--space-12); margin-top: var(--space-8); background: var(--color-surface); }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
@media (max-width: 860px) { .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); } }
@media (max-width: 480px) { .foot__grid { grid-template-columns: 1fr; } }
.foot h2 { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-3); }
.foot ul { list-style: none; display: grid; gap: var(--space-2); }
.foot a { font-size: var(--text-sm); text-decoration: none; color: var(--color-text-muted); }
.foot a:hover { color: var(--color-text); text-decoration: underline; }
.foot__legal { margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--color-divider); font-size: var(--text-xs); color: var(--color-text-faint); display: grid; gap: var(--space-2); }
.foot__legal p { max-width: 90ch; }

.breadcrumb { padding-top: var(--space-6); font-size: var(--text-sm); }
.breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-primary); text-decoration: underline; }

#main:focus { outline: none; }
#main:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -4px; }