/* Canopy Early Learning — brand-guideline typography
   Loaded after styles.css on index-brand-type.html only, to compare against
   the Quicksand-headline version. Follows canopy-tokens.json roles exactly:
   - h1 / h2 (page titles, section headers, card titles): Square Peg, weight 400,
     line-height 1.1 (h1) and 1.15 (h2), no letter-spacing
   - body: Quicksand 500, 16px, line-height 1.6
   - body-sm: Quicksand 500, 14px, line-height 1.5
   - label: Quicksand 600, 13px, 0.08em, uppercase (unchanged, already token)
   - tagline: Square Peg (handwritten notes, whakataukī translation)
   Only deviation: heading sizes are scaled up from the print sizes (40px / 28px)
   so a script face reads at web scale; the h1 : h2 ratio is kept close. */

/* ---------- h1 role: hero, section titles ---------- */

.hero h1 {
  font-family: var(--font-heading);
  font-weight: var(--text-h1-weight);
  line-height: var(--text-h1-leading);
  letter-spacing: 0;
  font-size: clamp(72px, 9vw, 132px);
}

.headline {
  font-family: var(--font-heading);
  font-weight: var(--text-h1-weight);
  line-height: var(--text-h1-leading);
  letter-spacing: 0;
  font-size: clamp(52px, 6.2vw, 92px);
}

.intro-copy .headline { font-size: clamp(52px, 6vw, 88px); }
.visit .headline { font-size: clamp(56px, 6.8vw, 100px); }

/* ---------- h2 role: card and sub-section titles ---------- */

.stage-body h3,
.exp h3,
.steps h3,
.faq-heading {
  font-family: var(--font-heading);
  font-weight: var(--text-h2-weight);
  line-height: var(--text-h2-leading);
  letter-spacing: 0;
  font-size: clamp(38px, 3.4vw, 50px);
}

.faq-heading { font-size: clamp(44px, 4vw, 60px); }

.mobile-menu ul a {
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: 0;
  font-size: 52px;
  line-height: 1;
}

/* Display figure in the story reads as a heading */
.story-facts strong {
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: 0;
  font-size: clamp(88px, 9vw, 128px);
  line-height: 0.9;
}

/* ---------- body: 16px / 500 / 1.6 everywhere ---------- */

.body-copy,
.hero .body-copy,
.stage-body p:last-child,
.steps p,
.value p,
.exp p,
.faq details p,
.faq-intro p,
.facts strong,
.footer-top ul,
.nav ul a,
.btn {
  font-size: var(--text-body-size);
  line-height: var(--text-body-leading);
}

.body-copy, .hero .body-copy, .stage-body p, .steps p, .value p, .exp p,
.faq details p, .faq-intro p, .footer-top ul { font-weight: var(--text-body-weight); }

/* FAQ questions are interface text: body family and size, label weight */
.faq summary {
  font-size: var(--text-body-size);
  font-weight: var(--text-label-weight);
  letter-spacing: 0;
  line-height: var(--text-body-leading);
}

/* Small print uses body-sm */
.footer-base {
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-leading);
}

/* Numbers that were ad-hoc sizes now use the label style */
.exp .num,
.steps .n {
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
  letter-spacing: var(--text-label-spacing);
}