/* ==========================================================================
   Typography — Ultra, Rubik, Fraunces, Bungee.
   Fonts self-hosted in production via @fontsource packages; for this static
   bundle we fall back to Google Fonts CDN so the page renders as specified
   without a build step. Swap to local @font-face when Astro lands.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Ultra&family=Rubik:wght@400;500;700&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Bungee&display=swap');

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--bg-base);
  font-feature-settings: 'ss01', 'cv01';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- display / headings ---------- */
.display-1,
.display-2,
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--color-text);
}

.display-1 { font-size: clamp(2.5rem, 6vw + 1rem, var(--fs-display-1)); }
.display-2 { font-size: clamp(2.25rem, 5vw + 1rem, var(--fs-display-2)); }
h1         { font-size: clamp(2rem,   4vw + 1rem, var(--fs-h1)); }
h2         { font-size: clamp(1.75rem, 3vw + 1rem, var(--fs-h2)); }
h3         { font-size: var(--fs-h3); }
h4         { font-size: var(--fs-h4); }

/* ---------- prose (Fraunces) ---------- */
.prose,
.prose p,
.prose li {
  font-family: var(--font-prose);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-prose);
}
.prose em,
.prose i {
  font-style: italic;
  font-variation-settings: 'ital' 1;
}

.prose > p:first-child::first-letter {
  font-family: var(--font-display);
  color: var(--brood-red);
  float: left;
  font-size: 4.2em;
  line-height: 0.85;
  padding-right: 0.08em;
  padding-top: 0.06em;
}

/* ---------- stamp / accent ---------- */
.stamp {
  font-family: var(--font-stamp);
  letter-spacing: var(--tracking-stamp);
  text-transform: uppercase;
  color: var(--ink-stamp);
}

/* ---------- micro / legal ---------- */
.micro,
.fine-print {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ---------- utility ---------- */
.serif      { font-family: var(--font-prose); }
.sans       { font-family: var(--font-ui); }
.mono       { font-family: var(--font-stamp); }
.italic     { font-style: italic; }
.uppercase  { text-transform: uppercase; }
.tracking-wide { letter-spacing: var(--tracking-wide); }

/* ---------- links ---------- */
a {
  color: var(--mustard-ink);
  text-decoration-thickness: 2px;
  text-decoration-color: color-mix(in oklch, var(--mustard-ink) 40%, transparent);
  text-underline-offset: 3px;
  transition: color var(--motion-quick) var(--ease-butcher),
              text-decoration-color var(--motion-quick);
}
a:hover {
  color: var(--hellfire-red);
  text-decoration-color: var(--hellfire-red);
}
a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---------- selection ---------- */
::selection {
  background: var(--mustard);
  color: var(--ink-on-accent);
}