/* =====================================================================
   TYPE SCALE — one set of sizes for the whole homepage

   The page rendered 35 distinct font sizes, most of them fractional
   (14.9625px, 15.675px, 13.5375px …): the residue of multiplier overrides
   stacked across tokens.css, homepage-bundle.css and editorial-polish.css.
   Section headings, the hero statement and the footer CTA were all ~42px,
   so the page had no middle tier, and reading copy sat at 13–15px.

   This file sets the homepage's type tokens (reusing the names already in
   tokens.css) and maps every text role onto them. It loads last
   and matches the id-level specificity the older layers use, so it is the
   one place to change a size. Anything not listed here keeps its own size
   on purpose: the wordmark, the track and step numerals, and the case
   study overlay.

   Rule of thumb: never write a raw font-size in a component again; use a
   token below.
   ===================================================================== */

:root {
  /* Existing token names, redefined here as the final word. The downscale
     block in homepage-bundle.css (body 15px, meta 13px, small 11px) is
     what put most reading copy at 13–15px. */
  --codex-section-title: var(--fs-section-title);

  /* New roles the old set had no name for. */
  --fs-cta:        clamp(2.75rem, 6.2vw, 6rem);        /* footer "Build Better" */
  --fs-statement:  clamp(1.6rem, 3.6vw, 3.5rem);       /* hero statements */
  --fs-item-title: clamp(1.125rem, 1.4vw, 1.375rem);   /* card, role, question titles */
  --fs-stat:       clamp(3.5rem, 6vw, 5.5rem);         /* Experience numerals */
  --fs-quote:      1.125rem;                           /* testimonials */

  --lh-body:  1.55;
  --lh-small: 1.45;
  --tracking-h2: -0.03em;
}

/* ---- Section headings ----------------------------------------------
   The letter-split reveal wraps each character in a span that carried its
   own size, so the spans inherit from the heading rather than being sized
   twice. Tracking relaxes from -5.5% to -3%: the expanded face clotted in
   long titles such as EDUCATION & RECOGNITION. */
:root body main#top section h2[class][class],
:root body main#top section h2,
:root body main#top footer h2 {
  letter-spacing: var(--tracking-h2) !important;
  line-height: 1 !important;
}

/* The closing ask is the loudest heading after the wordmark. */
:root body main#top footer#contact h2#contactTitle,
:root body #contact h2#contactTitle {
  font-size: var(--fs-cta) !important;
  line-height: 0.95 !important;
}

/* ---- Hero statements -------------------------------------------------- */
:root body #hero .hero__line-inner {
  font-size: var(--fs-statement);
  line-height: 1.12;
}

/* ---- Reading copy ------------------------------------------------------ */
:root body main#top :is(
  .xp__lede, .design-process__lede, .toolkit__lede, .pg-gallery__summary,
  .exp__head-desc, .folio-footer__lede, .section__lede, .editorial-head > p
),
:root body main#top .xp__lede > span {
  font-size: var(--fs-body) !important;
  line-height: var(--lh-body) !important;
}
:root body main#top :is(
  #insights p, #experience p, #education-recognition p,
  #expertise .xp__desc, #process .design-process__step p, #work p
) {
  font-size: var(--fs-body) !important;
  line-height: var(--lh-body) !important;
}
:root body #partnerships blockquote {
  font-size: var(--fs-quote) !important;
  line-height: 1.5 !important;
}

/* ---- Titles inside sections --------------------------------------------- */
:root body main#top :is(
  #process .design-process__step h3, #toolkit .stack-card__label,
  #experience .exp__role, #education-recognition .exp__role,
  #insights .accordion__title, #work h3
) {
  font-size: var(--fs-item-title) !important;
  line-height: 1.3 !important;
}

/* ---- Names, column heads ------------------------------------------------ */
:root body #partnerships figcaption strong,
:root body #contact .folio-footer h3,
:root body #contact h3 {
  font-size: var(--fs-body) !important;
  line-height: 1.4 !important;
}

/* ---- Secondary text ----------------------------------------------------- */
:root body main#top :is(
  #experience .exp__dates, #education-recognition .exp__dates,
  #experience .counter__key, #partnerships figcaption small,
  #toolkit .stack-card__tools, #perspective .pg-track__genre,
  #perspective .pg-track__duration, #contact li, #contact li a
) {
  font-size: var(--fs-meta) !important;
  line-height: var(--lh-small) !important;
}

/* Controls: the three filter rows and the footer buttons. Footer button
   labels were 11px, the smallest text on the page on its two most
   important links. */
:root body main#top :is(#work .sw-pill, #expertise .xp__tab,
  #perspective .pg-gallery__tabs > button),
:root body #contact .folio-footer__button,
:root body #contact .folio-footer__button span {
  font-size: var(--fs-meta) !important;
}

/* ---- Fine print: nothing below 12px ------------------------------------- */
:root body main#top :is(
  #expertise li, #perspective .pg-all__chip, #perspective .pg-travel__device,
  #contact .folio-footer__availability, #contact .folio-footer__base,
  #contact .folio-footer__base span
) {
  font-size: var(--fs-small) !important;
}

/* ---- Numerals ------------------------------------------------------------ */
:root body #experience .counter__value {
  font-size: var(--fs-stat) !important;
}

/* ---- Stragglers that out-rank the role rules above ---------------------
   These carried their own sizes at a higher specificity (double-class or
   double-id selectors in the older layers), so they are named directly. */
:root body main#top #insights .accordion__title[class][class],
:root body main#top #insights .accordion__head[class] .accordion__title[class] {
  font-size: var(--fs-item-title) !important;
}
:root body main#top #work .sw-li[class],
:root body main#top #perspective .pg-travel__caption[class],
:root body main#top #perspective .pg-track__meta[class] strong {
  font-size: var(--fs-body) !important;
}
:root body main#top #work :is(.sw-num, .sw__pager span)[class],
:root body main#top #work .sw__pager span {
  font-size: var(--fs-small) !important;
}
/* The frosted buttons over the aerial films fell back to Arial. */
:root body main#top #perspective a.pg-frost[class] {
  font-family: var(--font-body, "Geist", system-ui, sans-serif);
  font-size: var(--fs-meta);
}

/* The CTA heading grew from 42px to the display tier; its lede needs air
   under it or the two read as one block. */
:root body #contact .folio-footer__lede[class] {
  margin-top: clamp(12px, 1.4vw, 20px) !important;
}