/* ========================================
   TYPOGRAPHY — Vanguard Digital
   Fraunces display · Geist body · Geist Mono micro-labels
   ======================================== */

/* ------------------------------------------
   AMPERSAND OVERRIDE
   Renders every "&" in a classic italic serif
   (Baskerville on Mac / Georgia on Windows)
   regardless of the element's own font.
   Uses CSS unicode-range font-stacking so no
   HTML changes are required.
   ------------------------------------------ */
@font-face {
  font-family: 'Fraunces';
  src: local('Baskerville-Italic'),
       local('Baskerville Italic'),
       local('BaskervilleItalic'),
       local('Georgia Italic'),
       local('GeorgiaItalic'),
       local('Times New Roman Italic'),
       local('TimesNewRomanPS-ItalicMT'),
       local('Times-Italic');
  unicode-range: U+0026;
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: 'Fraunces';
  src: local('Baskerville-Italic'),
       local('Baskerville Italic'),
       local('BaskervilleItalic'),
       local('Georgia Italic'),
       local('GeorgiaItalic'),
       local('Times New Roman Italic'),
       local('TimesNewRomanPS-ItalicMT'),
       local('Times-Italic');
  unicode-range: U+0026;
  font-display: swap;
  font-style: italic;
  font-weight: 400;
}
@font-face {
  font-family: 'Geist';
  src: local('Baskerville-Italic'),
       local('Baskerville Italic'),
       local('BaskervilleItalic'),
       local('Georgia Italic'),
       local('GeorgiaItalic'),
       local('Times New Roman Italic'),
       local('TimesNewRomanPS-ItalicMT'),
       local('Times-Italic');
  unicode-range: U+0026;
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: 'Geist';
  src: local('Baskerville-Italic'),
       local('Baskerville Italic'),
       local('BaskervilleItalic'),
       local('Georgia Italic'),
       local('GeorgiaItalic'),
       local('Times New Roman Italic'),
       local('TimesNewRomanPS-ItalicMT'),
       local('Times-Italic');
  unicode-range: U+0026;
  font-display: swap;
  font-style: normal;
  font-weight: 500;
}
@font-face {
  font-family: 'Geist';
  src: local('Baskerville-Italic'),
       local('Baskerville Italic'),
       local('BaskervilleItalic'),
       local('Georgia Italic'),
       local('GeorgiaItalic'),
       local('Times New Roman Italic'),
       local('TimesNewRomanPS-ItalicMT'),
       local('Times-Italic');
  unicode-range: U+0026;
  font-display: swap;
  font-style: normal;
  font-weight: 600;
}
@font-face {
  font-family: 'Geist Mono';
  src: local('Baskerville-Italic'),
       local('Baskerville Italic'),
       local('BaskervilleItalic'),
       local('Georgia Italic'),
       local('GeorgiaItalic'),
       local('Times New Roman Italic'),
       local('TimesNewRomanPS-ItalicMT'),
       local('Times-Italic');
  unicode-range: U+0026;
  font-display: swap;
}


/* Optical-size + soft-axis defaults for Fraunces.
   Display sizes use high opsz + slight soft; body-serif kept neutral. */
:root {
  --fraunces-display: "opsz" 144, "SOFT" 50, "wght" 360;
  --fraunces-italic: "opsz" 144, "SOFT" 80, "wght" 360;
  --fraunces-body: "opsz" 36, "SOFT" 0, "wght" 400;
  --geist-body: "wght" 400;
  --geist-mid: "wght" 500;
  --geist-strong: "wght" 600;
}

/* ========================================
   HEADINGS — Fraunces display
   ======================================== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: var(--fraunces-display);
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
  color: var(--color-text-strong);
}

h1 {
  font-size: var(--fs-hero);
  line-height: 0.94;
  letter-spacing: -0.04em;
  font-variation-settings: "opsz" 144, "SOFT" 40, "wght" 340;
}

h2 {
  font-size: var(--fs-2xl);
  line-height: 1.02;
  letter-spacing: -0.032em;
}

h3 {
  font-size: var(--fs-xl);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

h4 {
  font-size: var(--fs-lg);
  letter-spacing: -0.012em;
  font-variation-settings: "opsz" 48, "SOFT" 20, "wght" 420;
}

/* Fraunces italic — the wonky, characterful version */
h1 em, h2 em, h3 em, h4 em,
.display-italic, .em-wonk {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 360;
  letter-spacing: -0.04em;
  color: var(--color-accent-soft);
}

/* ========================================
   BODY — Geist
   ======================================== */
body {
  font-family: var(--font-body);
  font-variation-settings: var(--geist-body);
  font-feature-settings: "ss01", "cv11", "kern";
  letter-spacing: -0.005em;
}

p {
  font-size: var(--fs-base);
  line-height: 1.62;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.text-lead {
  font-size: var(--fs-lg);
  line-height: 1.48;
  color: var(--color-text-strong);
  font-variation-settings: var(--geist-body);
  max-width: 62ch;
  letter-spacing: -0.01em;
}

.text-body-strong {
  color: var(--color-text-strong);
  font-variation-settings: var(--geist-mid);
}

small, .text-sm {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.text-xs {
  font-size: var(--fs-xs);
}

strong, b {
  font-variation-settings: var(--geist-strong);
  color: var(--color-text-strong);
}

/* ========================================
   MICRO-LABEL — Geist Mono uppercase
   Used for section labels, meta, chips.
   ======================================== */
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}

.mono-dim {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ========================================
   EDITORIAL UTILITIES
   ======================================== */
.text-accent {
  color: var(--color-accent-text);
}

.text-ember {
  color: var(--color-accent);
}

.text-serif {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "opsz" 48, "SOFT" 80, "wght" 400;
}

/* Drop-cap editorial paragraph */
.lede::first-letter {
  font-family: var(--font-display);
  font-size: 4.4em;
  line-height: 0.85;
  float: left;
  padding: 0.08em 0.14em 0 0;
  color: var(--color-accent);
  font-variation-settings: "opsz" 144, "SOFT" 80, "wght" 380;
  font-style: italic;
}

/* Small caps for numeric indices */
.idx {
  font-family: var(--font-mono);
  font-size: 0.78em;
  letter-spacing: 0.2em;
  color: var(--color-text-dim);
  font-weight: 500;
}

/* Link styling */
a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.link-underline {
  color: var(--color-text-strong);
  background-image: linear-gradient(90deg, var(--color-accent), var(--color-accent));
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 2px;
  transition: color 0.25s ease;
}

.link-underline:hover {
  color: var(--color-accent-soft);
}