/*
  css/typography-v2.css — page-scoped alternate type system (Newsreader /
  Public Sans / IBM Plex Mono), homepage + case studies only. The headline
  serif was Instrument Serif until 2026-09-20, when Newsreader replaced it
  site-wide within this system (one token change in tokens.css; no selector
  here was re-targeted).

  DISCLOSURE: this is a deliberate exception to the site-wide type
  system confirmed 2026-09-10 (Space Grotesk / DM Sans / Geist Pixel,
  still the default everywhere else — CLAUDE.md §12). It does not
  change that default or its "confirmed" status; it layers a second,
  scoped system on top of it for a specific set of pages. See
  --font-headline-serif/--font-body-sans/--font-label-mono in
  tokens.css for the actual font-family values.

  Scoping technique: .home-layout and .case-study-page are the exact
  "page content minus shared nav" wrapper each affected page already
  has (the shared nav lives in a sibling #shared-nav div, so it's
  never a descendant of either selector). Redefining
  --font-headline/--font-body/--font-label *within* that scope means
  every existing rule across the codebase that already reads
  var(--font-headline) etc. automatically resolves to the new fonts
  for anything inside these wrappers, and the original values outside
  them — nothing to duplicate or re-target selector by selector, and
  no dead old-font CSS left behind.

  Nav decision (flagged per the request rather than guessed silently):
  kept the shared nav on the site-wide default everywhere, rather than
  switching it on these pages only. It's the one element a visitor
  sees continuously while moving between an updated page and a
  not-yet-updated one (Resume/Feedback/Fun are explicitly out of
  scope) — having it change fonts on navigation would read as broken,
  not as a considered per-page choice.

  Font-weight: Newsreader is a variable font with real weights 400-700, so
  headlines use --font-headline-weight (600, from tokens.css) here instead of
  the explicit 400 this file needed for Instrument Serif, which had no bold
  and would otherwise get a synthesized fake bold.

  Font-size: the headline sizes below were bumped roughly 10-15% for
  Instrument Serif, a narrow face that reads small at a given size. Newsreader
  is wider, so those same sizes now read larger and headlines wrap earlier on
  narrow screens. They are deliberately unchanged in this swap; revisit them
  (about 10-15% smaller) if the wrapping is a problem.
*/

.home-layout,
.case-study-page {
  --font-headline: var(--font-headline-serif);
  --font-headline-weight: var(--font-headline-serif-weight);
  --font-body: var(--font-body-sans);
  --font-label: var(--font-label-mono);
}

/* h1 + case-study-section h2 (both share the same clamp today):
   2.25rem/3.25rem -> 2.6rem/3.75rem (+~15%). */
.home-layout h1,
.case-study-page h1,
.case-study-page .case-study-section h2 {
  font-weight: var(--font-headline-weight);
  font-size: clamp(2.6rem, 1.75rem + 4.5vw, 3.75rem);
}

/* case-study-section h3 (subbeat/column headings):
   1.25rem/1.5rem -> 1.4rem/1.7rem (+~13%). */
.case-study-page .case-study-section h3 {
  font-weight: var(--font-headline-weight);
  font-size: clamp(1.4rem, 1.2rem + 0.85vw, 1.7rem);
}

/* section h4 (layout.css gives it 700, meant for the old bold sans): keep it in
   step with the other headlines. */
.case-study-page .case-study-section h4 {
  font-weight: var(--font-headline-weight);
}

/* friction-point h3 (Key Friction Points cards): 1.125rem -> 1.25rem
   (+~11%). */
.case-study-page .friction-point h3 {
  font-weight: var(--font-headline-weight);
  font-size: 1.25rem;
}

/* Homepage project-card text (2026-09-21): title and meta set in the
   typewriter face (IBM Plex Mono, --font-label-mono), on one line
   (components.css .bento-card-caption). Plex Mono is only loaded at weight
   500, so both lines use it; the title is ink, the meta muted. Sizes are
   small on purpose: mono runs wide, and title + company + status share
   one row, so the title ellipsizes last-resort while the meta stays whole. */
.home-layout .bento-card-tagline {
  font-family: var(--font-label-mono);
  font-weight: 500;
  /* Scales with the card (container query units) so the longest title plus
     its company/status stays on one line at any column width. */
  font-size: clamp(0.625rem, 2.15cqw, 1rem);
}

.home-layout .bento-card-meta {
  font-family: var(--font-label-mono);
  font-weight: 500;
  font-size: clamp(0.5625rem, 1.8cqw, 0.8125rem);
}