/* ============================================================
   TYPE — Fraunces speaks, Newsreader reads, Geist Mono files,
   Hanken Grotesk operates. WONK only where the spec allows.
   ============================================================ */

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 600;
  font-optical-sizing: auto;
  line-height: 1.18;
  letter-spacing: 0.015em;
  margin: 0 0 var(--u3);
  text-wrap: balance;
  overflow-wrap: break-word;
}
/* Big display type must never exceed the viewport on a phone. */
.hero-display, .cover-display, .vitrine-title, .accession-title, .h-title { overflow-wrap: break-word; }
h1 { font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); }
h3 { font-size: clamp(1.2rem, 1rem + 0.9vw, 1.5rem); }
h4 { font-size: 1.05rem; letter-spacing: 0; }

/* Hero + school covers ONLY: Clash Display, heavy, tight. */
.hero-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 8.4vw, 6.6rem);
  line-height: 1.06;
  letter-spacing: 0.01em;
  text-wrap: balance;
}
/* The gold accent words: bold + underlined, in the header face. */
.hero-display .lead-ink {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 0.055em;
  text-underline-offset: 0.1em;
  text-decoration-color: var(--gold);
  letter-spacing: -0.035em;
}
.cover-display {
  font-variation-settings: 'opsz' 96;
  font-weight: 700;
}
.cover-display {
  font-family: var(--font-display-black);
  font-weight: 700;
  font-size: clamp(2.4rem, 8vw, 5.8rem);
  line-height: 1.0;
  letter-spacing: -0.015em;
  color: var(--faculty);
}

/* Running heads / mastheads: letterspaced small caps. */
.smallcaps, .running-head {
  font-family: var(--font-body);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.14em;
  font-weight: 500;
}

/* Metadata voice: call numbers, accession labels, timers, serials. */
.mono, .call-number, .accession-label, .serial {
  font-family: var(--font-mono);
  font-size: 0.78em;
  letter-spacing: 0.02em;
  font-variant-numeric: lining-nums;
  font-feature-settings: normal;
}

/* UI voice */
button, .btn, input, select, label.ui, nav, .ui {
  font-family: var(--font-ui);
  font-size: 0.92rem;
  letter-spacing: 0.01em;
}

p { margin: 0 0 var(--u3); max-width: var(--measure); }
.abstract { font-style: italic; color: var(--muted); }
strong { font-weight: 600; }
small { font-size: 0.85em; color: var(--muted); }

/* Lesson body: never below 16px (enforced by the clamp floor of 17px). */
.lesson-body { font-size: var(--body-size); }
.lesson-body p { max-width: var(--measure); }

/* Drop cap — one illumination per lesson. Pre-illuminated by default;
   motion.css animates it on first scroll where allowed. */
.drop-cap::first-letter {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: 'opsz' 144;
  float: left;
  font-size: 3.2em;
  line-height: 0.82;
  padding: 0.06em 0.12em 0 0;
  color: var(--gold);
}

/* Gilded rules — royal gold with a slow metallic sheen (gold is the one metal
   allowed to shimmer). Flat gold under Still Air / reduced motion. */
.gilded-rule {
  border: 0;
  height: 3px;
  background: var(--gold);
}
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-still-air="on"]) .gilded-rule {
    background: linear-gradient(90deg, var(--gold) 0%, var(--gold-bright) 18%, var(--gold) 38%, var(--gold) 100%);
    background-size: 240% 100%;
    animation: gilt-sheen 4.5s linear infinite;
  }
}

/* Verdicts — shape + word, QA'd in grayscale. */
.verdict { display: inline-flex; align-items: center; gap: var(--u); font-family: var(--font-ui); font-weight: 600; }
.verdict.yes { color: var(--verdict-yes); }
.verdict.not { color: var(--verdict-not); }
.verdict svg { width: 1.1em; height: 1.1em; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; }

/* Errata slip — typographically louder than ordinary feedback, never alarm-styled. */
.errata {
  border: 1px solid var(--rubric);
  border-left-width: 4px;
  background: var(--stock);
  padding: var(--u3) var(--u3) var(--u2);
  margin: var(--u3) 0;
  transform: rotate(-0.4deg);
  box-shadow: 2px 3px 0 color-mix(in srgb, var(--ink) 8%, transparent);
}
.errata .errata-head {
  font-family: var(--font-ui);
  font-weight: 700;
  color: var(--rubric);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-bottom: var(--u);
}