/* ══════════════════════════════════════════════════════════════
   type.css — the site's single typography system
   Loaded LAST on every page, so it's the one place type is decided.

   Scale (1.5 ratio, from the Figma type sheet). Max sizes are the
   Figma values; headings shrink fluidly on smaller screens.
     H1 182 · H2 122 · H3 81 · H4 54 · H5 36 · H6 24 · P1 16 · P2 11
   (P3–P6 from the sheet are below a readable size on screen, so unused.)

   Fonts: Geist for headings + body, Geist Mono for small uppercase labels.
   Permanent Marker stays for the hero's hand-drawn "Open to work" sticker.

   Selectors are prefixed with :root so they outrank the component
   stylesheets (whose type rules are at most two classes deep).
   ══════════════════════════════════════════════════════════════ */

:root {
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-marker: "Permanent Marker", var(--font-sans);

  --fs-h1: clamp(64px, 12.6vw, 182px);   /* reserved */
  --fs-h2: clamp(48px, 8.5vw, 122px);    /* case-study titles */
  --fs-h3: clamp(44px, 5.6vw, 81px);     /* hero name */
  --fs-h4: clamp(32px, 3.75vw, 54px);    /* big section heads */
  --fs-h5: clamp(26px, 2.5vw, 36px);     /* section titles, intros */
  --fs-h6: clamp(19px, 1.67vw, 24px);    /* subheads, ledes */
  --fs-p1: 16px;                         /* body, card titles, buttons */
  --fs-p2: 11px;                         /* labels */
}

/* Point the older per-page font variables at the system, so every
   var(--l-serif / --l-sans / --l-mono) on the site resolves to Geist */
:root, body, body.csLight {
  --l-serif: var(--font-sans);
  --l-sans: var(--font-sans);
  --l-mono: var(--font-mono);
}
:root body { font-family: var(--font-sans); }
:root :is(button, input, select, textarea) { font-family: inherit; }


/* ── H2 · 122 — case-study titles ───────────────────────────── */
:root .csHero__title {
  font: 800 var(--fs-h2)/.92 var(--font-sans); letter-spacing: -.04em; text-wrap: balance;
}

/* ── H3 · 81 — hero name (tied to the monitor size, capped at H3) ─ */
:root :is(.heroName__solid, .heroName__ghost) {
  font: 800 min(var(--fs-h3), calc(var(--mon) * .131))/.9 var(--font-sans); letter-spacing: -.03em;
}

/* ── H4 · 54 — big section heads ────────────────────────────── */
:root :is(.workFeature__title, .cs2-brand__mark, .snum) {
  font: 800 var(--fs-h4)/1 var(--font-sans); letter-spacing: -.03em;
}
:root :is(.cs2-h2, .stitle, .stitle-g) {
  font: 700 var(--fs-h4)/1.05 var(--font-sans); letter-spacing: -.03em; text-wrap: balance;
}
:root .heroPortfolio {   /* decorative outline — H4 cap, tied to the monitor */
  font: 800 min(var(--fs-h4), calc(var(--mon) * .08))/.82 var(--font-sans); letter-spacing: -.03em;
}

/* ── H5 · 36 — section titles and intros ────────────────────── */
:root :is(.homeWork__title, .workSection__title, .emailAddress) {
  font: 700 var(--fs-h5)/1.1 var(--font-sans); letter-spacing: -.02em;
}
:root .editorialIntro__text {
  font: 500 var(--fs-h5)/1.2 var(--font-sans); letter-spacing: -.02em;
}
:root :is(.spiralWrap__q, .bq) {
  font: 400 var(--fs-h5)/1.25 var(--font-sans) !important; letter-spacing: -.02em; font-style: normal;
}

/* ── H6 · 24 — subheads, ledes, quotes ──────────────────────── */
:root .heroLede {
  font: 400 min(var(--fs-h6), calc(var(--mon) * .039))/1.42 var(--font-sans); letter-spacing: -.01em;
}
:root :is(.csHero__lead, .aboutClosing__text) {
  font: 400 var(--fs-h6)/1.45 var(--font-sans); letter-spacing: -.01em;
}
:root :is(.aboutPoint__title, .cs2-h3, .cs2-userlabel, .cs2-card__title, .cs2-h4, .cs2-fig__t, .csLight h3.a) {
  font: 600 var(--fs-h6)/1.25 var(--font-sans); letter-spacing: -.015em;
}
:root :is(.cs2-serifnote, .cs2-quote p, .cs2-example__q) {
  font: 400 var(--fs-h6)/1.45 var(--font-sans); letter-spacing: -.01em; font-style: normal;
}
:root :is(.aboutPoint__num, .contactEmail) {
  font: 400 var(--fs-h6)/1.1 var(--font-mono);
}
:root .heroUpdated__date {
  font: 400 min(var(--fs-h6), calc(var(--mon) * .039))/.9 var(--font-marker); letter-spacing: .01em;
}

/* ── P1 · 16 — body text ────────────────────────────────────── */
:root :is(.workFeature__desc, .csCard__desc, .cs2-body, .cs2-bullets li, .cs2-card p, .cs2-card__list li,
  .cs2-card__d, .cs2-card__r, .cs2-ruled__b, .cs2-duo__cap, .cs2-cap, .cs2-find__b, .cs2-deflist dd,
  .cs2-callout p, .cs2-fig__d, .cs2-table td, .cs2-example p, .cs2-metacard__value,
  .aboutPoint__desc, .csHero__metaVal, .collectionCount__label, .csTOC__link,
  .lead, .lead-l, .body, .sbody, .cb) {
  font-size: var(--fs-p1); line-height: 1.6; font-family: var(--font-sans); font-weight: 400;
}
/* P1 · 16 — card titles and small headings (semibold) */
:root :is(.csCard__title, .moreWork__name, .cs2-card__k, .cs2-ruled__k, .stitle2) {
  font: 600 var(--fs-p1)/1.35 var(--font-sans); letter-spacing: -.005em;
}
:root :is(.ch, .ch-g) { font: 700 var(--fs-p1)/1.35 var(--font-sans); }
:root .cs2-monoh { font: 400 var(--fs-p1)/1.4 var(--font-mono); }
/* P1 · 16 — primary button */
:root .heroCta {
  font: 600 var(--fs-p1)/1 var(--font-mono); text-transform: uppercase; letter-spacing: .1em;
}
:root .heroUpdated__label {
  font: 400 min(var(--fs-p1), calc(var(--mon) * .026))/1 var(--font-marker); text-transform: uppercase;
}

/* ── P2 · 11 — labels (Geist Mono, uppercase) ───────────────── */
:root :is(.headerWordmark, .sectionTab, .headerBack, .csHero__eyebrow, .cs2-eyebrow, .eyebrow,
  .csHero__metaLabel, .cs2-metacard__label, .cs2-find__k, .cs2-deflist dt, .cs2-thumb span, .cs2-table th,
  .cs2-example__eyebrow, .homeWork__count, .workFeature__eyebrow, .csCard__meta, .workTags li,
  .moreWork__meta, .moreWork__heading, .kicker, .footerContact .kicker, .footerBrand, .footerBottom, .homeFoot,
  .contactsPanel__label, .aboutPoint__tag, .pill) {
  font: 400 var(--fs-p2)/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .1em;
}
/* P2 · 11 — action labels (links, small buttons) */
:root :is(.workFeature__cta, .contactCopy, .contactLinks a, .csCard__soon, .contactsToggle,
  .contactsPanel__resume, .aboutClosing__cta) {
  font: 600 var(--fs-p2)/1 var(--font-mono); text-transform: uppercase; letter-spacing: .12em;
}
/* P2 · 11 — quiet lowercase notes */
:root :is(.spiralWrap__eyebrow, .contactToast) {
  font: 400 var(--fs-p2)/1.4 var(--font-mono); letter-spacing: .14em;
}
:root .cs2-brand__sw { font: 400 var(--fs-p2)/1 var(--font-mono); }


/* ── Hero on phones: the hero switches to a stacked layout ──── */
@container hero (max-width: 639px) {
  :root :is(.heroName__solid, .heroName__ghost) { font-size: var(--fs-h3); }
  :root .heroLede { font-size: var(--fs-h6); }
  :root .heroUpdated__date { font-size: var(--fs-h6); }
  :root .heroUpdated__label { font-size: var(--fs-p2); }
  :root .heroPortfolio { font-size: var(--fs-h5); }
}