/* AUTEUR SHOT — Typography
   Type carries the brand. Titles shout in condensed grotesque, body stays quiet
   and rigorous, quotes turn to serif italic, and every label/metadata is mono.
   Casing: display + kickers + labels are UPPERCASE; body & quotes are mixed case.
*/
:root {
  /* ---- Families ---- */
  --font-display: "Big Shoulders Display", "Archivo Black", "Anton", sans-serif;
  --font-body:    "Instrument Sans", "Albert Sans", system-ui, sans-serif;
  --font-quote:   "IBM Plex Serif", "Source Serif Pro", Georgia, serif;
  --font-mono:    "Geist Mono", "Space Mono", "JetBrains Mono", ui-monospace, monospace;

  /* ---- Weights ---- */
  --fw-body:     400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-display:  700; /* @kind font */

  /* ---- Type scale (mapped from the brand's H1–Footer table) ---- */
  --fs-display:  clamp(56px, 8vw, 90px); /* @kind font */
  --fs-h1:       clamp(44px, 6vw, 64px); /* @kind font */
  --fs-h2:       32px; /* @kind font */
  --fs-h3:       24px;                    /* @kind font */
  --fs-quote:    clamp(20px, 2.4vw, 26px); /* @kind font */
  --fs-body-lg:  17px;                    /* @kind font */
  --fs-body:     15px; /* @kind font */
  --fs-small:    13px;                    /* @kind font */
  --fs-kicker:   12px; /* @kind font */
  --fs-label:    11px; /* @kind font */

  /* ---- Line heights ---- */
  --lh-display: 0.92; /* @kind other */
  --lh-tight:   1.05; /* @kind other */
  --lh-heading: 1.1;  /* @kind other */
  --lh-body:    1.5;  /* @kind other */
  --lh-quote:   1.2;  /* @kind other */

  /* ---- Tracking (mono labels use positive tracking) ---- */
  --tr-kicker: 0.08em;  /* @kind other */
  --tr-label:  0.14em;  /* @kind other */
  --tr-mono:   0.04em;  /* @kind other */
  --tr-display: -0.01em;/* @kind other */
}

/* ---- Reusable type roles (opt-in classes) ---- */
.as-display { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); text-transform: uppercase; }
.as-h1 { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-h1); line-height: var(--lh-tight); text-transform: uppercase; }
.as-h2 { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-h2); line-height: var(--lh-heading); text-transform: uppercase; }
.as-h3 { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-h3); line-height: var(--lh-heading); text-transform: uppercase; }
.as-kicker { font-family: var(--font-mono); font-weight: var(--fw-medium); font-size: var(--fs-kicker); line-height: 1.2; letter-spacing: var(--tr-kicker); text-transform: uppercase; color: var(--accent); }
.as-body { font-family: var(--font-body); font-weight: var(--fw-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); }
.as-quote { font-family: var(--font-quote); font-style: italic; font-size: var(--fs-quote); line-height: var(--lh-quote); color: var(--accent); }
.as-label { font-family: var(--font-mono); font-weight: var(--fw-medium); font-size: var(--fs-label); line-height: 1.2; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--text-muted); }