/* MBZIRC typography system: fluid type scale.
   Every size grows smoothly with the viewport between a phone minimum (375px wide) and a desktop
   maximum (1920px), instead of jumping at breakpoints. Values are px-based clamps so they are
   independent of the site's changing root size. One family: Gotham (Book 400, Medium 500,
   Bold 700, Black 900), loaded by styles.css.

   This file loads LAST on every page: the tokens below drive the .t-* classes and also re-map the
   site's existing component selectors onto the scale, so the whole site follows one system. */

:root {
  --type-family: Gotham, Arial, sans-serif;
  --type-h1-size: clamp(32px, 24.23px + 2.071vw, 64px);        /* 32px @375 to 64px @1920 */
  --type-h2-size: clamp(25px, 17.96px + 1.877vw, 54px);        /* 25px @375 to 54px @1920 */
  --type-h3-size: clamp(21px, 17.84px + 0.841vw, 34px);        /* 21px @375 to 34px @1920 */
  --type-h4-size: clamp(18px, 15.57px + 0.647vw, 28px);        /* 18px @375 to 28px @1920 */
  --type-h5-size: clamp(16px, 14.79px + 0.324vw, 21px);        /* 16px @375 to 21px @1920 */
  --type-subtitle-size: clamp(13px, 10.82px + 0.583vw, 22px);  /* 13px @375 to 22px @1920 */
  --type-intro-size: clamp(16px, 13.57px + 0.647vw, 26px);     /* 16px @375 to 26px @1920 */
  --type-lead-size: clamp(16px, 14.54px + 0.388vw, 22px);      /* 16px @375 to 22px @1920 */
  --type-body-l-size: clamp(15px, 14.27px + 0.194vw, 18px);    /* 15px @375 to 18px @1920 */
  --type-body-m-size: clamp(14px, 13.51px + 0.129vw, 16px);    /* 14px @375 to 16px @1920 */
  --type-body-s-size: clamp(12px, 11.51px + 0.129vw, 14px);    /* 12px @375 to 14px @1920 */
  --type-cta-size: clamp(14px, 13.76px + 0.065vw, 15px);       /* 14px @375 to 15px @1920 */
  --type-overline-size: clamp(11px, 10.03px + 0.259vw, 15px);  /* 11px @375 to 15px @1920 */
  --type-stat-size: clamp(38px, 30.72px + 1.942vw, 68px);      /* 38px @375 to 68px @1920 */
  --type-h1-weight: 900;   --type-h1-leading: 1.125;
  --type-h2-weight: 900;   --type-h2-leading: 1.06;
  --type-h3-weight: 900;   --type-h3-leading: 1.15;
  --type-h4-weight: 900;   --type-h4-leading: 1.15;
  --type-h5-weight: 900;   --type-h5-leading: 1.2;
  --type-body-l-weight: 400; --type-body-l-leading: 1.55;
  --type-body-m-weight: 400; --type-body-m-leading: 1.6;
  --type-body-s-weight: 400; --type-body-s-leading: 1.4;
  --type-cta-weight: 700;  --type-cta-leading: 1.2; --type-cta-tracking: 0;
  --type-overline-weight: 700; --type-overline-leading: 1.25; --type-overline-tracking: .3em;
}

/* ---------- Site mapping: existing components onto the scale ---------- */
/* H1: page heroes */
h1, :is(.home-hero .hero-copy, .about-hero-copy, .past-hero, .energy-hero, .media-hero, .contact-hero) h1 { font-size: var(--type-h1-size); }
/* H2: section titles (dialog and card headings keep their own, more specific sizes) */
h2 { font-size: var(--type-h2-size); }
:is(.overview, .participate, .numbers, .partners, .news-heading, .social-wall, .about-intro-heading, .organization) h2,
.webinar-shell > h2 { font-size: var(--type-h2-size); }
/* H3: content titles */
.past-title, .media-intro, .contact-copy h2 { font-size: var(--type-h3-size); }
/* H4: card titles */
.home-hero .register-card h2, .person-copy h3, .profile-body h2, .partner-card h3 { font-size: var(--type-h4-size); }
/* H5: item titles */
.milestone-copy h3, .finalist summary { font-size: var(--type-h5-size); }
/* Hero subtitle (the past-hero rule in past.css is !important, so this one must be too) */
.hero-subtitle { font-size: var(--type-subtitle-size); }
.past-hero .hero-subtitle { font-size: var(--type-subtitle-size) !important; }
/* Large intro paragraph and lead */
.about-intro-heading > p { font-size: var(--type-intro-size); }
.organization-copy .lead { font-size: var(--type-lead-size); }
/* Body L / M */
.hero-description, .about-hero-copy > p:last-child, .organization-copy p:not(.lead), .partner-blurb, .story-copy, .contact-intro { font-size: var(--type-body-l-size); }
/* .past-content is the reading panel on every Past Challenge and Energy page; its copy inherits this. */
.overview-copy p, .media-description, .past-content, .energy-prose p { font-size: var(--type-body-m-size); }
/* Overline (eyebrow) */
.eyebrow, .media-hero .eyebrow, .energy-hero-copy .eyebrow { font-size: var(--type-overline-size); letter-spacing: var(--type-overline-tracking); }
/* CTA */
.button { font-size: var(--type-cta-size); }
/* Statistic numbers */
.stat-card > p, .impact-card > p { font-size: var(--type-stat-size); }

/* Mobile menu links (styles.css sizes them separately): a touch smaller to match the phone scale. */
@media (max-width: 1000px) {
  .site-header #navigation > a, .site-header #navigation > .nav-dropdown > summary { font-size: clamp(17px, 3vw, 23px); }
}

/* ---------- Classes: apply to any element; the semantic tag stays free ---------- */
.t-h1, .t-h2, .t-h3, .t-h4, .t-h5, .t-body-l, .t-body-m, .t-body-s, .t-cta, .t-overline { font-family: var(--type-family); margin: 0; }
.t-h1, .t-h2, .t-h3, .t-h4, .t-h5 { text-transform: uppercase; letter-spacing: 0; }
.t-h1 { font-size: var(--type-h1-size); font-weight: var(--type-h1-weight); line-height: var(--type-h1-leading); }
.t-h2 { font-size: var(--type-h2-size); font-weight: var(--type-h2-weight); line-height: var(--type-h2-leading); }
.t-h3 { font-size: var(--type-h3-size); font-weight: var(--type-h3-weight); line-height: var(--type-h3-leading); }
.t-h4 { font-size: var(--type-h4-size); font-weight: var(--type-h4-weight); line-height: var(--type-h4-leading); }
.t-h5 { font-size: var(--type-h5-size); font-weight: var(--type-h5-weight); line-height: var(--type-h5-leading); }
.t-body-l { font-size: var(--type-body-l-size); font-weight: var(--type-body-l-weight); line-height: var(--type-body-l-leading); }
.t-body-m { font-size: var(--type-body-m-size); font-weight: var(--type-body-m-weight); line-height: var(--type-body-m-leading); }
.t-body-s { font-size: var(--type-body-s-size); font-weight: var(--type-body-s-weight); line-height: var(--type-body-s-leading); }
.t-cta { font-size: var(--type-cta-size); font-weight: var(--type-cta-weight); line-height: var(--type-cta-leading); letter-spacing: var(--type-cta-tracking); }
.t-overline { font-size: var(--type-overline-size); font-weight: var(--type-overline-weight); line-height: var(--type-overline-leading);
  letter-spacing: var(--type-overline-tracking); text-transform: uppercase; color: var(--lime, #c8ff24); }

/* Emphasis inside headings (existing pattern): lime or magenta word with a magenta underline. */
.t-accent-lime { color: var(--lime, #c8ff24); }
.t-accent-magenta { color: var(--magenta, #a92778); }
.t-underline { text-decoration: underline; text-decoration-color: var(--magenta, #a92778);
  text-decoration-thickness: .115em; text-underline-offset: .02em; text-decoration-skip-ink: none; }