/* Typeset. Restores the product's documented type system inside the green
   marketing world: serif display and serif numerics over a sans UI.

   styles.css carries a late override,
     h1,h2,.serif,.feature h3,.metric strong{font-family:Inter,...}
   which flattened every voice to one face. DESIGN.md commits to Playfair
   Display for display type and serif numerics for money, and both faces are
   already vendored in assets/fonts, so this costs no extra bytes.

   Loads last. The palette is untouched; this is type only. */

/* ------------------------------------------------------- the display voice */

.brand,
.landing-story .story-hero h1,
.landing-story h2,
.meaning-word,
.form-layout .story h2,
.form-side h1,
.dashboard h1 {
  font-family: 'Playfair Display', Georgia, serif;
}

/* Playfair carries more width and a smaller x-height than Inter, so the sans
   tracking would crush it and the sans sizes would read a step small. */
.landing-story .story-hero h1,
.landing-story h2,
.meaning-word {
  letter-spacing: -0.021em;
  font-weight: 500;
}

.landing-story .story-hero h1 {
  font-size: clamp(42px, 4.7vw, 70px);
  line-height: 1.06;
}

/* These two carry chapter-level selectors in page-chapters.css, so the
   tracking has to be restated here or the sans value wins on specificity. */
.landing-story .tension h2,
.clarity-heading h2,
.landing-story .story-finale h2 {
  font-size: clamp(40px, 4.8vw, 70px);
  line-height: 1.05;
  letter-spacing: -0.021em;
}

.meaning-intro h2 { font-size: clamp(40px, 5.1vw, 74px); line-height: 1.05; }
.meaning-word { font-size: clamp(30px, 3.9vw, 60px); letter-spacing: -0.018em; line-height: 1.12; }
.landing-story .faq h2 { font-size: clamp(36px, 4vw, 56px); letter-spacing: -0.02em; line-height: 1.08; }

/* The wordmark is identity, not UI. */
.brand { font-weight: 600; letter-spacing: -0.02em; font-size: 24px; }

/* ------------------------------------------------------------ money as type */

/* Figures the reader is deciding on are set in the serif and aligned in
   columns; tabular numerals stop digits from shifting between states. */
.receipt-amount,
.unknowns-total,
.unknowns-rows dd,
.metric strong,
.receipt-rows > div > span:last-child,
.ledger-line > span:last-child {
  font-family: 'Lora', Georgia, serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.receipt-amount { font-weight: 500; letter-spacing: -0.03em; }
/* Centavos sit under the peso figure rather than beside it at full size. */
.receipt-amount > span { font-size: 0.5em; letter-spacing: 0; }

/* Day numbers are measurements too. */
.day strong { font-family: 'Lora', Georgia, serif; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- the sans UI */

/* Sub-headings stay in the sans: they are structure, not voice. Keeping them
   here makes the serif mean "this is the statement" rather than "this is big". */
.welcome h2,
.panel h2,
.faq summary {
  font-family: Inter, Arial, sans-serif;
}

@media (max-width: 760px) {
  .landing-story .story-hero h1 { font-size: clamp(36px, 9vw, 52px); }
  .landing-story .tension h2,
  .clarity-heading h2,
  .meaning-intro h2,
  .landing-story .story-finale h2 { font-size: clamp(34px, 8.4vw, 46px); }
  .meaning-word { font-size: clamp(27px, 7.2vw, 40px); }
  .landing-story .faq h2 { font-size: clamp(30px, 7.6vw, 40px); }
}