/* ============================================================================
   GARAGE GALS . TYPOGRAPHY
   ----------------------------------------------------------------------------
   The editorial voice. Fraunces does the talking at large sizes; Inter carries
   the reading; Space Mono stamps the spec-sheet eyebrows. Depends on tokens.css.
   ============================================================================ */

/* ---- Display + headings -------------------------------------------------- */
.display-2xl,
.display-xl,
.display-lg,
h1, h2, h3, h4,
.h1, .h2, .h3, .h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-semi);
  line-height: var(--lh-head);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-strong);
  font-variation-settings: "opsz" 144, "SOFT" var(--fr-soft), "WONK" var(--fr-wonk);
}

.display-2xl {
  font-size: var(--fs-display-2xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tightest);
  font-weight: var(--weight-bold);
}
.display-xl {
  font-size: var(--fs-display-xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tightest);
  font-weight: var(--weight-semi);
}
.display-lg {
  font-size: var(--fs-display-lg);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}

h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-snug); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); font-weight: var(--weight-semi); }
h4, .h4 { font-size: var(--fs-h4); font-weight: var(--weight-semi); letter-spacing: var(--tracking-normal); }

/* Italic emphasis inside headlines reads as editorial flourish */
h1 em, h2 em, h3 em,
.display-2xl em, .display-xl em, .display-lg em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 1;
  color: var(--accent);
}

/* ---- Body, lead, small --------------------------------------------------- */
.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-relax);
  color: var(--fg-soft);
  font-weight: var(--weight-regular);
}

p { font-size: var(--fs-body); line-height: var(--lh-body); }
.text-small { font-size: var(--fs-small); }
.text-caption { font-size: var(--fs-caption); }

/* ---- Eyebrow . the mono spec-sheet label --------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::before { display: none; }
.eyebrow--bare::before { display: none; }
.eyebrow--soft { color: var(--fg-faint); }

/* ---- Link styles --------------------------------------------------------- */
.link {
  position: relative;
  color: var(--accent);
  font-weight: var(--weight-medium);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--dur-3) var(--ease-out-expo), color var(--dur-2) var(--ease-standard);
}
.link:hover { background-size: 100% 1.5px; }

.link-underline {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1.5px;
  background-repeat: no-repeat;
  background-position: 0 100%;
}
.link-underline:hover { color: var(--accent); }

/* ---- Specialty type treatments ------------------------------------------- */

/* Red ink: the brand accent inside running headlines */
.ink-red { color: var(--accent); }

/* Chrome text: brushed-metal headline treatment for dark sections */
.text-chrome {
  background: var(--grad-chrome-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Outline / stroked display text for big graphic moments */
.text-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--fg-strong);
  text-stroke: 1.5px var(--fg-strong);
}
[data-theme="dark"] .text-outline { -webkit-text-stroke-color: var(--cream-50); }

/* Highlighted run: cream marker behind dark text, or red behind cream */
.mark-red {
  background: var(--grad-red-flare);
  color: var(--cream-50);
  padding: 0.05em 0.3em;
  border-radius: var(--r-xs);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* The signature tagline lockup */
.tagline {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--fs-h3);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-strong);
}
.tagline em { font-style: italic; color: var(--accent); }

/* ---- Prose block (for story/long-form pages) ----------------------------- */
.prose { max-width: var(--container-narrow); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 1.8em; }
.prose h3 { margin-top: 1.4em; }
.prose p { color: var(--fg); line-height: var(--lh-relax); }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.18em; }
.prose blockquote {
  margin: 1.6em 0;
  padding-left: var(--space-md);
  border-left: 3px solid var(--accent);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-h4);
  color: var(--fg-strong);
}

/* ---- Numerals: tabular where alignment matters --------------------------- */
.nums-tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ---- Drop figure (big stat number) --------------------------------------- */
.figure-xl {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--fs-display-lg);
  line-height: 1;
  letter-spacing: var(--tracking-tightest);
  font-variant-numeric: tabular-nums;
}