/* ============================================================
   TYPOGRAPHY SYSTEM — Constant Good
   Loaded LAST on every page so it unifies type across the site,
   overriding both index.html's inline styles and styles.css.

   Fluid scale: every size uses clamp(min, preferred, max) so text
   grows with the viewport but can never overflow it.
   ============================================================ */

:root {
  /* Fluid type scale — the single source of truth */
  --fs-eyebrow: clamp(0.92rem, 0.35vw + 0.80rem, 1.05rem);
  --fs-meta:    clamp(1.00rem, 0.40vw + 0.86rem, 1.15rem);
  --fs-body:    clamp(1.16rem, 0.55vw + 1.00rem, 1.38rem);
  --fs-lead:    clamp(1.30rem, 0.85vw + 1.08rem, 1.62rem);
  --fs-nav:     clamp(1.02rem, 0.30vw + 0.92rem, 1.16rem);

  /* Reading rhythm — generous, picture-book feel */
  --lh-body: 1.65;
  --lh-lead: 1.55;
  --lh-head: 1.12;

  /* Weights — bolder than default throughout */
  --fw-body: 500;
  --fw-strong: 700;
  --fw-head: 800;
}

/* ── GLOBAL OVERFLOW GUARDS ──────────────────────────────────
   Large type is only safe if nothing can spill sideways.      */
html, body { max-width: 100%; overflow-x: clip; }
* { min-width: 0; }
p, li, h1, h2, h3, h4, h5, h6, a, span, blockquote, figcaption, td, th, label {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}
img, svg, video, iframe, table { max-width: 100%; }

/* ── BODY COPY ───────────────────────────────────────────────
   The main readability lift: subtext across the whole site.   */
body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

p, li, dd, blockquote, figcaption {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-body);
}

/* Lead / intro paragraphs — the subtext under big headings */
.hero p, .hero__sub, .hero-sub, .section__sub, .section-sub,
.sec__sub, .lead, .subtitle, .subhead, .intro p,
[class*="__sub"], [class*="-sub"]:not([class*="submit"]),
[class*="__lead"], [class*="-lead"],
[class*="__intro"], [class*="-intro"] {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-weight: var(--fw-body);
}

/* Small print stays proportionate, never tiny */
small, .meta, .caption, .eyebrow, .label, .tag, .badge, .pill,
[class*="__meta"], [class*="__eyebrow"], [class*="__label"],
[class*="__tag"], [class*="__badge"], [class*="__caption"] {
  font-size: var(--fs-meta);
  font-weight: 600;
}

.eyebrow, [class*="__eyebrow"], [class*="-eyebrow"] {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-strong);
  letter-spacing: 0.08em;
}

/* ── HEADINGS ────────────────────────────────────────────────
   Fluid, bold, tight leading. Minimums raised so headings stay
   substantial on phones without overflowing.                  */
h1, h2, h3, h4, h5, h6 { line-height: var(--lh-head); font-weight: var(--fw-head); }

h1 { font-size: clamp(2.60rem, 4.6vw + 1.20rem, 5.00rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(2.15rem, 3.2vw + 1.10rem, 3.75rem); letter-spacing: -0.015em; }
h3 { font-size: clamp(1.65rem, 1.6vw + 1.05rem, 2.40rem); letter-spacing: -0.01em; }
h4 { font-size: clamp(1.38rem, 0.9vw + 1.10rem, 1.80rem); }
h5 { font-size: clamp(1.22rem, 0.6vw + 1.02rem, 1.48rem); }
h6 { font-size: var(--fs-body); font-weight: var(--fw-strong); }

/* ── NAVIGATION — uniform on every page ──────────────────────
   Fixes the shrink between the home page and interior pages.  */
.nav {
  height: 78px;
  padding: 0 clamp(1.1rem, 3vw, 2.5rem);
}
.nav__logo-img { height: clamp(2.2rem, 2.6vw, 2.7rem); }
.footer .nav__logo-img { height: 2.6rem; }

.nav__links { gap: clamp(1.05rem, 1.9vw, 2rem); }
.nav__links a,
.nav__dropdown-toggle {
  font-size: var(--fs-nav);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;      /* nav items never wrap mid-word */
}
.nav__menu a, .nav__menu-title { font-size: var(--fs-meta); }
.nav__menu-title { font-weight: var(--fw-strong); }
.nav__cta, .nav .btn { font-size: var(--fs-nav); white-space: nowrap; }

/* Push page content clear of the taller nav */
body { padding-top: 0; }

/* ── BUTTONS ─────────────────────────────────────────────────*/
.btn, button, .button, input[type="submit"] {
  font-size: var(--fs-meta);
  font-weight: var(--fw-strong);
}

/* ── FORMS ───────────────────────────────────────────────────
   16px minimum prevents iOS zooming on focus.                 */
input, textarea, select {
  font-size: max(1rem, var(--fs-meta));
  font-weight: var(--fw-body);
}

/* ── STATS / BIG NUMBERS ─────────────────────────────────────
   Deliberately narrow: only the hero stat counters. A wildcard
   here also matched `.invest-stats .step__num`, which blew those
   numbers far outside their fixed-width circles. `.panel-stat__num`
   was removed for the same reason: it sits in a half-width cell of
   the ~350px globe panel, where 3.9rem ran the student count into
   the enrollment figure beside it.
   That one keeps its own size from index.html.                 */
.stats-bar .stat__num,
.stat > .stat__num {
  font-size: clamp(2.4rem, 3vw + 1.4rem, 3.9rem);
  font-weight: var(--fw-head);
  line-height: 1.05;
}

/* ── BADGE / PILL NUMERALS ───────────────────────────────────
   `.step__num` is a fixed circle holding anything from "1" to
   "$25k". Let it grow into a pill instead of overflowing.      */
.step__num, .invest-stats .step__num {
  width: fit-content;          /* hug the number, don't fill the grid track */
  min-width: 3.4rem;
  height: 3.4rem;
  margin-left: auto;
  margin-right: auto;
  padding: 0 0.9rem;
  border-radius: 999px;
  font-size: clamp(1.15rem, 0.8vw + 0.95rem, 1.55rem);
  line-height: 1;
  white-space: nowrap;
}
.invest-stats .step__num {
  min-width: 4.4rem;
  height: 4.4rem;
  font-size: clamp(1.3rem, 1vw + 1.05rem, 1.75rem);
}
@media (max-width: 600px) {
  .invest-stats .step__num { min-width: 3.9rem; height: 3.9rem; }
}

/* ── TABLET ──────────────────────────────────────────────────*/
@media (max-width: 960px) {
  .nav { height: 70px; }
  .nav__links { gap: 1.05rem; }
}

/* ── PHONE ───────────────────────────────────────────────────
   Slightly tighter so long words and headings can't spill.    */
@media (max-width: 600px) {
  :root {
    --fs-body: clamp(1.08rem, 2.6vw + 0.72rem, 1.22rem);
    --fs-lead: clamp(1.18rem, 3.2vw + 0.76rem, 1.36rem);
    --lh-body: 1.6;
  }
  h1 { font-size: clamp(2.25rem, 8.6vw, 3.05rem); }
  h2 { font-size: clamp(1.95rem, 7.4vw, 2.60rem); }
  h3 { font-size: clamp(1.55rem, 5.8vw, 2.00rem); }
  .nav { padding: 0 1.05rem; }
}

/* ── SPECIFICITY REPAIRS ─────────────────────────────────────
   Container rules like `.article__body p` outrank the generic
   lead selectors above; restore the intended hierarchy.       */
.article__body .article__lead,
.article__body p.article__lead {
  font-size: var(--fs-lead);
  font-weight: var(--fw-strong);
  line-height: var(--lh-lead);
}
.article__body h2 { font-size: clamp(1.85rem, 1.9vw + 1.15rem, 2.55rem); }
.article__body p  { line-height: 1.75; }

/* Hero subtext — the home-page line you flagged as too small */
.hero__sub, .hero p, .page-hero__sub {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
}