@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/anton-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/hanken-grotesk-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url("fonts/hanken-grotesk-italic-latin.woff2") format("woff2");
}

:root {
  /* ════════ PRIMITIVES — raw scales; prefer the semantic tokens below ════════ */

  /* Warm neutral ramp — cream paper down to diner ink (hue drifts 80°→50°) */
  --warm-50:  oklch(0.990 0.005 80);
  --warm-100: oklch(0.965 0.018 78);
  --warm-200: oklch(0.920 0.024 78);
  --warm-300: oklch(0.875 0.028 78);
  --warm-400: oklch(0.840 0.015 60);
  --warm-500: oklch(0.550 0.022 55);
  --warm-600: oklch(0.400 0.025 50);
  --warm-700: oklch(0.300 0.020 50);
  --warm-800: oklch(0.215 0.020 50);
  --warm-900: oklch(0.180 0.018 50);
  --warm-950: oklch(0.150 0.018 50);

  --red-500:  oklch(0.560 0.185 28);
  --red-600:  oklch(0.460 0.155 28);

  --gold-400: oklch(0.790 0.125 88);
  --gold-500: oklch(0.740 0.130 88);

  /* ════════ SEMANTIC ════════ */

  --color-bg:        var(--warm-100);
  --color-bg-sunk:   var(--warm-200);
  --color-bg-invert: var(--warm-800);

  --color-text:              var(--warm-800);
  --color-text-muted:        var(--warm-600);
  --color-text-invert:       var(--warm-100);
  --color-text-invert-muted: oklch(0.800 0.028 78);
  --color-text-invert-faint: oklch(0.600 0.022 78);

  --color-accent:          var(--red-500);
  --color-accent-hover:    var(--red-600);
  --color-highlight:       var(--gold-400);
  --color-highlight-hover: var(--gold-500);

  --color-border: var(--warm-400);

  --color-success: oklch(0.780 0.120 140);
  --shadow-color:  oklch(0.200 0.040 50);

  --tint-screen-cool: oklch(0.55 0.04 240);
  --tint-screen-warm: oklch(0.85 0.10 80);

  /* ════════ TYPE ════════ */

  --font-display: "Anton", "Hanken Grotesk", sans-serif;
  --font-body:    "Hanken Grotesk", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  --text-hero:    clamp(7rem, 26vw, 22rem);
  --text-display: clamp(2.75rem, 6vw, 5rem);
  --text-heading: clamp(1.5rem, 2.2vw, 1.9rem);

  --text-lede:    clamp(1.375rem, 2.2vw, 2rem);
  --text-body-lg: 1.25rem;
  --text-body:    1.0625rem;
  --text-small:   0.875rem;
  --text-eyebrow: 0.78rem;

  /* ════════ LAYOUT ════════ */

  --section-y:     clamp(4rem, 8vw, 8rem);
  --section-y-lg:  clamp(5rem, 9vw, 9rem);
  --section-pad-x: clamp(1.5rem, 5vw, 4rem);
  --content-max:   1280px;

  --ease: cubic-bezier(0.165, 0.84, 0.44, 1);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: calc(100vh + 1px);

  header nav,
  main [data-block],
  footer[data-block] {
    display: none;
  }

  header {
    min-height: 72px;
  }
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(oklch(from var(--warm-500) l c h / 0.04) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: multiply;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ════════ SHARED PRIMITIVES ════════ */

.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding-left: var(--section-pad-x);
  padding-right: var(--section-pad-x);
  position: relative;
  z-index: 1;
}

section {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
  position: relative;
}

.eyebrow {
  font-size: var(--text-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: var(--color-text-muted);
  display: inline-block;
}

.section-head {
  max-width: 56rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.section-head h2 {
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: 0.95;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin: 0.75rem 0 1rem;
  color: var(--color-text);
  max-width: 18ch;
}
.section-head h2 em {
  color: var(--color-accent);
  font-style: normal;
}
.section-head p {
  font-size: var(--text-lede);
  line-height: 1.2;
  margin: 0;
  max-width: 38ch;
  color: var(--color-text-muted);
}
.section-head .sm-body {
  margin-top: 1rem;
  font-size: 1.2rem;
}

/* ════════ BUTTONS ════════ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.4rem;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease), transform 220ms var(--ease);
  white-space: nowrap;
}
.btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}
.btn.primary {
  background: var(--color-accent);
  color: var(--color-bg);
}
.btn.primary:hover { background: var(--color-accent-hover); }
.btn.primary:active { transform: translateY(1px); }
.btn.secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-text);
}
.btn.secondary:hover { background: var(--color-text); color: var(--color-bg); }
.btn.ghost {
  background: transparent;
  color: var(--color-text);
  padding: 0.6rem 0.9rem;
}
.btn.ghost:hover { color: var(--color-accent); }
.btn .arrow { transition: transform 220ms var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn.sm { padding: 0.55rem 0.95rem; font-size: 0.85rem; }

/* ════════ WORDMARK (header + footer) ════════ */

.wordmark {
  font-family: var(--font-display);
  font-size: 1.625rem;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--color-accent);
  display: inline-flex;
  align-items: end;
  gap: 0.2rem;
}
.wordmark .dot {
  width: 0.4rem;
  height: 0.4rem;
  margin-bottom: 1px;
  background: var(--color-accent);
  border-radius: 999px;
  display: inline-block;
  transform: translateY(-0.05rem);
}

/* ════════ ICONS ════════ */

.ico { width: 18px; height: 18px; flex-shrink: 0; display: inline-block; vertical-align: middle; }

/* ════════ Reduced motion ════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}