@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-error-700: #8c3737;
  --color-feedback-error: var(--feedback-error-700);

  /* Brand surfaces stay independent from campaign-selected accent colors. */
  --brand-gold-50: #f8f7e0;
  --brand-gold-100: #edebbd;
  --brand-gold-300: #c7bf53;
  --brand-gold-400: #b9af2a;
  --brand-gold-700: #766f00;
  --brand-text-on-light: var(--brand-gold-700);
  --brand-text-on-dark: var(--brand-gold-100);

  /*
   * 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);
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;

  /* 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: 1.25rem;
    --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;
  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;
}