/* ============================================================
   Genre Dive — brand.css
   Child-theme type layer: optical-size ladder, tabular figures,
   and the contrast-safe grey usage.
   Loaded from the genredive-child root, enqueued via functions.php.
   Palette tokens come from theme.json (var(--wp--preset--color--*)).
   Type families come from theme.json (Fraunces editorial, Instrument Sans UI).
   ============================================================ */

/* ---- Fraunces optical sizing -------------------------------
   Fraunces is a variable font with an opsz axis. font-optical-sizing:auto
   ties opsz to the rendered size automatically; the ladder below pins
   deliberate values where we want more (display) or less (small) drama
   than the automatic mapping gives. opsz is Fraunces-only — Instrument
   Sans has no optical axis and is left alone. */
:root {
  --gd-opsz-display: 144;
  --gd-opsz-h1: 96;
  --gd-opsz-h2: 48;
  --gd-opsz-body: 20;
}

body {
  font-optical-sizing: auto;
}

/* Editorial display — the largest Fraunces only. Maximum contrast. */
.gd-display,
.wp-block-site-title,
h1.is-style-gd-display {
  font-family: var(--wp--preset--font-family--fraunces);
  font-variation-settings: "opsz" var(--gd-opsz-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.04;
}

/* Article headline */
h1,
.gd-h1 {
  font-family: var(--wp--preset--font-family--fraunces);
  font-variation-settings: "opsz" var(--gd-opsz-h1);
  font-weight: 600;
  letter-spacing: -0.014em;
  line-height: 1.08;
}

/* Subheads within long-form */
h2, h3,
.gd-subhead {
  font-family: var(--wp--preset--font-family--fraunces);
  font-variation-settings: "opsz" var(--gd-opsz-h2);
  font-weight: 500;
  line-height: 1.2;
}

/* Running body */
body,
.gd-body {
  font-variation-settings: "opsz" var(--gd-opsz-body);
}

/* ---- Instrument Sans small functional layer ----------------
   Navigation, eyebrows/section labels, chips, captions, metadata,
   buttons and form fields. Kept in Instrument Sans (theme.json sets
   the family on nav, buttons and captions; these classes cover the
   editorial furniture that isn't its own block). */
.gd-eyebrow,
.gd-label,
.gd-meta,
.gd-kicker {
  font-family: var(--wp--preset--font-family--instrument-sans);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ---- Tabular figures ---------------------------------------
   Number columns (tracklist timings, data tables) line up only with
   fixed-width digits. Tables and the .gd-tabular helper use Instrument
   Sans with tabular figures; prose keeps proportional figures. */
table,
.gd-tabular {
  font-family: var(--wp--preset--font-family--instrument-sans);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

/* ---- Grey usage (contrast-safe on paper) -------------------
   The foundation palette has one named grey: muted (#85847E, ~3.8:1 on paper).
   It is suited to captions, labels, metadata and secondary UI — not running body
   copy. For any body-weight text that needs to feel softer than ink, use ink at
   reduced opacity rather than muted. On dark grounds, muted reads comfortably
   (~7.7:1 on ink) and is the correct caption / label colour there too. */
.gd-text-muted,
.entry-content .gd-muted {
  color: var(--wp--preset--color--muted);
}

.gd-caption,
figcaption,
.wp-element-caption {
  color: var(--wp--preset--color--muted);
  font-family: var(--wp--preset--font-family--instrument-sans);
}

/* Hairlines — the sandy token (#E8E6E0) is the correct border/rule colour. */
.gd-hairline {
  border-color: var(--wp--preset--color--sandy);
}

/* On dark (ink) sections — muted reads clearly against ink. */
.gd-on-dark .gd-title,
.gd-on-dark figcaption {
  color: var(--wp--preset--color--muted);
}

/* ---- Red usage guard --------------------------------------
   Signal red (#D8453F) is the single brand red on all grounds.
   Reserve for display/headings and marks — not body text. */
.gd-on-dark a,
.gd-on-dark .gd-accent {
  color: var(--wp--preset--color--signal-red);
}