/* ============================================================
   BASE — element defaults, typography, layout primitives
   ============================================================ */

@font-face {
  font-family: 'DIN Neue Roman';
  src: url('/fonts/DINNeueRoman-Test-Black-Italic-BF641a66f919e67.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

html { font-size: 16px; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  font-weight: 400;
  line-height: var(--lh-normal);
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: hidden;
}

/* ---- HEADINGS ---- */
h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  font-family: var(--font-display);
  font-weight: 400; /* Anton is naturally bold */
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}

h1, .h1 { font-size: var(--fs-96); }
h2, .h2 { font-size: var(--fs-72); }
h3, .h3 { font-size: var(--fs-40); }
h4, .h4 { font-size: var(--fs-24); letter-spacing: var(--ls-snug); }
h5, .h5 {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--color-text-muted);
}

.display-xl { font-size: var(--fs-128); }

/* ---- BODY TEXT ---- */
.lead {
  font-size: var(--fs-20);
  line-height: var(--lh-loose);
  color: var(--color-text-muted);
  max-width: 56ch;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--color-red);
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  background: var(--color-red);
}

a { transition: color var(--dur-base) var(--ease-out); }
a:hover { color: var(--color-red); }

/* ---- LAYOUT PRIMITIVES ---- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

.container-narrow {
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
  padding-inline: var(--container-px);
}

.section {
  padding-block: var(--section-y);
}

.section-dark {
  background: var(--color-black);
  color: var(--color-text-inverse);
}
.section-dark .lead { color: var(--color-gray-300); }
.section-dark h5 { color: var(--color-gray-300); }
.section-dark .eyebrow { color: var(--color-white); }
.section-dark .eyebrow::before { background: var(--color-red); }

.section-alt { background: var(--color-bg-alt); }

/* Skip link for accessibility */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--color-black);
  color: var(--color-white);
  padding: var(--space-3) var(--space-5);
  z-index: var(--z-toast);
  transition: top var(--dur-base);
}
.skip-link:focus { top: 0; }

/* Utility classes */
.text-center { text-align: center; }
.text-balance { text-wrap: balance; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}