@font-face {
  font-family: "Literata";
  src: url("/fonts/literata-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("/fonts/public-sans-latin-400.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("/fonts/public-sans-latin-600.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("/fonts/public-sans-latin-700.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Neutrals carry text. Accent only decorates bounded, non-text surfaces. */
  --surface-bg: #ffffff;
  --surface-panel: #f7f6f9;
  --surface-inverse: #202b32;
  --ink: #433f4a;
  --ink-700: #524d59;
  --surface-ink-muted: #5c6973;
  --surface-ink-inverse: #edf2f2;
  --line: #c9cfce;
  --focus-ring: #2f80ed;

  /* Feedback colors supplement explicit text and programmatic state. */
  --feedback-success-700: #36642a;
  --feedback-error-700: #8c3737;
  --color-feedback-error: var(--feedback-error-700);
  --color-action-close: var(--feedback-error-700);
  --color-text-default: var(--ink);
  --color-border-default: var(--line);
  --color-border-field: var(--neutral-ink-500);

  /* Brand surfaces stay independent from campaign-selected accent colors. */
  --brand-gold-50: #f8f7e0;
  --brand-gold-100: #edebbd;
  --brand-gold-200: #dad587;
  --brand-gold-300: #c7bf53;
  --brand-gold-400: #b9af2a;
  --brand-gold-600: #938a00;
  --brand-gold-700: #766f00;
  --brand-gold-800: #5b5500;
  --brand-text-on-light: var(--brand-gold-700);
  --brand-text-on-dark: var(--brand-gold-100);
  --brand-graphic-on-light: var(--brand-gold-600);
  --brand-graphic-on-dark: var(--brand-gold-700);
  --color-content-candidate: var(--brand-text-on-dark);
  --neutral-ink-200: #dcd9e0;
  --neutral-ink-500: #827e89;
  --neutral-ink-600: #65616d;
  --neutral-ink-900: #2d2933;

  /*
   * Static D2 accent roles. Dynamic campaign accents use derive_accent_tokens().
   * edge-dark is an approved semantic override, contrast-guarded in tests.
   */
  --accent-raw: #315f57;
  --accent-edge: #315f57;
  --accent-edge-dark: #6cad5b;
  --accent-tint: #edf5f3;

  /* Approved typography scale. Figma style names are documented in docs/design_tokens.md. */
  --font-family-display: "Public Sans", ui-sans-serif, system-ui, sans-serif;
  --font-family-body: "Public Sans", ui-sans-serif, system-ui, sans-serif;
  --font-family-reading: "Literata", ui-serif, Georgia, serif;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --font-size-display-hero: 3.25rem;
  --line-height-display-hero: 3.75rem;
  --font-size-heading-h1: 2.625rem;
  --line-height-heading-h1: 3rem;
  --font-size-heading-h2: 2rem;
  --line-height-heading-h2: 2.5rem;
  --font-size-heading-h3: 1.5rem;
  --line-height-heading-h3: 2rem;
  --font-size-heading-h4: 1.25rem;
  --line-height-heading-h4: 1.75rem;
  --font-size-body-large: 1.125rem;
  --line-height-body-large: 1.875rem;
  --font-size-body-default: 1rem;
  --line-height-body-default: 1.625rem;
  --font-size-body-small: 0.875rem;
  --line-height-body-small: 1.3125rem;
  --font-size-body-caption: 0.75rem;
  --line-height-body-caption: 1.125rem;
  --font-size-reading-default: 1.125rem;
  --line-height-reading-default: 1.875rem;
  --font-size-label-default: 0.875rem;
  --line-height-label-default: 1.25rem;
  --font-size-label-small: 0.75rem;
  --line-height-label-small: 1rem;
  --font-size-utility-eyebrow: 0.6875rem;
  --line-height-utility-eyebrow: 1rem;
  --letter-spacing-utility-eyebrow: 0.12em;

  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --shadow-sm: 0 1px 2px rgb(17 24 39 / 0.08);
  --shadow-md: 0 8px 20px rgb(17 24 39 / 0.08);
  --shadow-lg: 0 16px 32px rgb(17 24 39 / 0.18), 0 4px 10px rgb(17 24 39 / 0.12);
  --shadow-play-icon: 0 0.125rem 0.125rem rgb(17 24 39 / 0.55);
  --surface-overlay-light: rgb(255 255 255 / 0.6);
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;

  /* The smallest a pointer target may be, in either dimension
   * (public-hall-page §3; design brief §2). */
  --target-min: 2.75rem;

  /* D3 responsive layout contract. */
  --layout-frame-width: 90rem;
  --layout-content-max: 70rem;
  --layout-page-gutter: 4rem;
  --layout-columns: 12;
  --layout-column-gap: 1.5rem;
  --layout-section-space: 4rem;
}

@media (max-width: 47.5rem) {
  :root {
    --layout-frame-width: 24.375rem;
    --layout-page-gutter: 2rem;
    --layout-columns: 4;
    --layout-column-gap: 1rem;
    --layout-section-space: 2rem;
  }
}

html {
  font-family: var(--font-family-body);
  font-synthesis: none;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--surface-panel);
}

h1,
h2,
h3 {
  margin-top: 0;
  font-family: var(--font-family-display);
}

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

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  display: inline-flex;
  min-height: var(--target-min);
  align-items: center;
  transform: translateY(-140%);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  color: var(--surface-bg);
  background: var(--focus-ring);
}

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

.site-header {
  padding: var(--space-md);
  border-bottom: 1px solid var(--line);
  background: var(--surface-bg);
}

.logo {
  display: inline-block;
  max-width: 220px;
  color: var(--ink);
}

.logo svg {
  display: block;
  width: 100%;
  height: auto;
}

.site-footer {
  margin-top: var(--space-xl);
  padding: var(--space-lg) var(--space-md);
  color: var(--surface-ink-inverse);
  background: var(--surface-inverse);
}

.site-footer .logo {
  color: var(--surface-ink-inverse);
}

main {
  padding: var(--space-lg) var(--space-md);
  background: var(--surface-bg);
}

section + section {
  margin-top: var(--space-lg);
}

.candor-disclosure {
  padding: var(--space-md);
  border-left: 4px solid var(--accent-edge);
  color: var(--ink);
  background: var(--brand-gold-50);
}

.curation-stats,
.disclaimer {
  color: var(--surface-ink-muted);
}

.site-footer .disclaimer,
.site-footer .disclaimer .paid-for,
.site-footer .disclaimer .independence {
  color: var(--surface-ink-inverse);
}

.site-footer .footer-trust {
  margin-top: var(--space-lg);
}

.site-footer .footer-trust ul {
  display: flex;
  margin: var(--space-md) 0 0;
  padding: 0;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  list-style: none;
}

.site-footer .footer-trust p {
  color: inherit;
}

a {
  color: var(--ink);
  text-decoration-color: var(--accent-edge);
  text-decoration-thickness: 0.125rem;
  text-underline-offset: 0.15em;
}

.form-error {
  color: var(--color-feedback-error);
}

.site-footer a {
  color: var(--surface-ink-inverse);
  text-decoration-color: currentColor;
  text-decoration-skip-ink: none;
}

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* The public offer record (`race_report.html`).
   Four columns of comparison across candidates, which is the page's whole claim:
   the same terms, offered to everyone. It has to hold that claim down to the
   320 CSS px reflow floor of WCAG 2.1 §1.4.10, and hold it with §1.4.12's text
   spacing applied, where the same content is a third wider again. */
.offer-record {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-md) 0;
}

.offer-record th,
.offer-record td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-xs) var(--space-sm) var(--space-xs) 0;
}

.offer-record thead th {
  border-bottom: 1px solid var(--line);
}

.offer-record tbody tr + tr th,
.offer-record tbody tr + tr td {
  border-top: 1px solid var(--line);
}

/* Wide enough for four columns, the label belongs to the header row only. */
.offer-record-label {
  display: none;
}

/* Below this the four columns stop fitting. Not a guess: at 320 px the natural
   table is 307 px inside a 288 px content box, and §1.4.12 spacing takes it to
   372 px. Forcing the columns to share the width instead breaks words mid-token
   — "Accepte/d", "Respons/e" — which is narrower but not readable, so each
   record becomes a block and each value carries its own heading. */
@media (max-width: 30rem) {
  .offer-record thead {
    /* Not `display: none`: the column headers stay in the accessibility tree,
       where the `columnheader` roles still associate them with each cell. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .offer-record,
  .offer-record tbody,
  .offer-record tr,
  .offer-record th,
  .offer-record td {
    display: block;
  }

  .offer-record tr {
    padding: var(--space-sm) 0;
  }

  .offer-record tbody tr + tr {
    border-top: 1px solid var(--line);
  }

  .offer-record tbody tr + tr th,
  .offer-record tbody tr + tr td {
    border-top: 0;
  }

  .offer-record th,
  .offer-record td {
    padding: 0 0 var(--space-xs) 0;
  }

  .offer-record tbody th[scope='row'] {
    font-size: var(--font-size-body-large);
  }

  .offer-record-label {
    display: block;
    color: var(--surface-ink-muted);
    font-size: var(--font-size-body-small);
  }
}