/* ════════════════════════════════════════════════════════════
   TYPE SYSTEM — Geist and Geist Mono, set for this portfolio
   Chosen for the work rather than borrowed from a reference. The site
   argues for calm, precise product design in healthcare and B2B, so:

   - One family, two voices. Geist carries headings and reading text;
     Geist Mono, drawn as its partner, carries the interface — labels,
     chips, navigation — which quietly says "systems" without decoration.
   - Headings at 500, not 400: enough weight to hold on the photograph
     and on the red About panel, still far from shouting. Tight tracking
     at display sizes, relaxing as the size drops.
   - Reading text sized for long case studies: 16px at 1.55.
   - Figures in tabular numerals, so metrics line up like data.

     Hero      56–112px · Geist 500 · 0.95 · −0.045em   hero lines
     H2        44–88px  · Geist 500 · 1.00 · −0.04em    home titles, case titles, About figure
     H3        30–44px  · Geist 500 · 1.10 · −0.03em    case sections, metrics
     Lead      20–26px  · Geist 400 · 1.35 · −0.02em    About statement, Contact note, quotes
     Title     18–22px  · Geist 500 · 1.25 · −0.02em    project titles, subheads, cards, links
     Body      16px     · Geist 400 · 1.55 · −0.005em   paragraphs, lists
     Small     14px     · Geist 400 · 1.50              meta, captions
     Label     12px     · Geist Mono 400 · 1.30 · +0.04em · caps   labels, chips, navigation
     Action    12px     · Geist Mono 500 · 1.30 · +0.04em · caps   Contact
   `html body` in front of each selector lifts it just above the older
   rule it replaces without resorting to !important.
   ════════════════════════════════════════════════════════════ */
:root {
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --display: var(--sans);
  --serif: var(--sans);
  --ui: var(--sans);
  --mono-face: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --hero-size: clamp(3.5rem, 7.6vw, 7rem);
  --h2-size: clamp(2.75rem, 6vw, 5.5rem);
  --h3-size: clamp(1.875rem, 3vw, 2.75rem);
  --lead-size: clamp(1.25rem, 1.8vw, 1.625rem);
  --title-size: clamp(1.125rem, 1.5vw, 1.375rem);
  --h4-size: var(--title-size);
  --h4-weight: 500;
  --h4-leading: 1.25;
  --h4-track: -0.02em;
  --body-size: 1rem;
  --body3-size: 0.875rem;
  --body3-weight: 400;
  --label-size: 0.75rem;
  --label-track: 0.04em;

  /* the old Display tokens now describe H2 */
  --section-title-size: var(--h2-size);
  --section-title-track: -0.04em;
  --section-title-leading: 1;
}
html body {
  font-family: var(--sans);
  font-weight: 400;
  font-optical-sizing: auto;
  font-variation-settings: normal;
  text-transform: none;
}

/* Hero */
html body #top .hero-lockup .hero-lines {
  font-family: var(--sans);
  font-size: var(--hero-size);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.045em;
  text-transform: none;
}

/* H2 */
html body #work .work-head .work-title,
html body #about .about-title,
html body #contact .contact-title-big,
html body .case-hero h1,
html body #about .about-stat .about-stat-figure {
  font-family: var(--sans);
  font-size: var(--h2-size);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: none;
}
html body #about .about-stat .about-stat-figure { font-variant-numeric: tabular-nums; }
html body #about .about-stat .about-stat-figure span { font-size: 0.6em; }

/* H3 */
html body .case-section h2,
html body #about .about-layout .about-subtitle,
html body .stats .stat b {
  font-family: var(--sans);
  font-size: var(--h3-size);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-transform: none;
}
html body .stats .stat b { font-variant-numeric: tabular-nums; }

/* Lead */
html body #about .about-statement .about-lead,
html body #about .about-layout > .about-statement p.about-lead,
html body #contact .contact-desc,
html body #contact .contact-layout > p.contact-desc,
html body blockquote.quote p {
  font-family: var(--sans);
  font-size: var(--lead-size);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.02em;
  text-transform: none;
}

/* Title */
html body #work .work-row h3,
html body #contact .contact-row .contact-row-value a,
html body #contact .direct-email,
html body .more-title,
html body .comp-carousel-title,
html body .case-subhead,
html body #contact .contact-lead .contact-title .contact-title-small,
html body #about .about-stat .about-stat-label,
html body #about .about-layout .about-experience .about-stat p.about-stat-label,
html body #about .about-skills li h3,
html body .point h3,
html body .option h3 {
  font-family: var(--sans);
  font-size: var(--title-size);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-transform: none;
}

/* Body */
html body .case-section p,
html body .case-section li,
html body .intro p,
html body p.intro,
html body .overview-list dd,
html body .point p,
html body .option-lede,
html body .step-points li,
html body figcaption,
html body #about .about-skills li p,
html body .case-toc a {
  font-family: var(--sans);
  font-size: var(--body-size);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.005em;
  text-transform: none;
}

/* Small */
html body .overview-list dt,
html body .stat span,
html body #work .work-row .work-row-meta,
html body .footer-id,
html body .footer-id span {
  font-family: var(--sans);
  font-size: var(--body3-size);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
}

/* Label */
html body p.eyebrow,
html body .case-section p.eyebrow,
html body #work .work-head p.eyebrow,
html body #about .about-bar p.eyebrow,
html body #contact .contact-lead p.eyebrow,
html body .hero-lockup p.hero-label,
html body .case-hero .case-chips li.chip.chip-status,
html body .hero .scroll-cue .scroll-cue-label,
html body #about ol.about-skills li span.about-skill-num,
html body #contact .contact-row .contact-row-label,
html body .case-hero .case-chips .chip,
html body .comp-chips .chip,
html body .comp-chips li.chip.chip-status,
html body .option-verdict dt.pc-label,
html body blockquote.quote cite,
html body .more-meta,
html body .comp-carousel-meta,
html body .case-section .spec p.spec-title,
html body .work-cursor-text,
html body .state-grid .state-demo,
html body .thumb-pair figcaption {
  font-family: var(--mono-face);
  font-size: var(--label-size);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
}
html body p.eyebrow::before {
  font-family: var(--mono-face);
  font-size: inherit;
  font-weight: 400;
  letter-spacing: inherit;
}

/* Navigation and action */
@media (min-width: 861px) {
  html body .site-header .nav .nav-link {
    font-family: var(--mono-face);
    font-size: var(--label-size);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: var(--label-track);
    text-transform: uppercase;
  }
  html body .site-header .nav .contact-pill {
    font-family: var(--mono-face);
    font-size: var(--label-size);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: var(--label-track);
    text-transform: uppercase;
  }
}
@media (max-width: 860px) {
  /* the full-screen menu takes H2 */
  html body .site-header .nav .nav-link {
    font-family: var(--sans);
    font-weight: 500;
    letter-spacing: -0.04em;
    text-transform: none;
  }
  html body .site-header .nav .contact-pill { font-family: var(--mono-face); font-weight: 500; letter-spacing: var(--label-track); text-transform: uppercase; }
}

/* Project card (shared — Recent works, carousel, demos): title at
   Lead in 500, the kind of work and where and when at Small, platform
   tags at Label. The #work selectors outrank older .work-row rules. */
html body .project-card .project-card-title,
html body #work .project-card .project-card-title {
  font-family: var(--sans);
  font-size: var(--lead-size);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-transform: none;
}
html body .project-card .project-card-meta {
  font-family: var(--sans);
  font-size: var(--body3-size);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
}
html body .project-card .project-card-tags li {
  font-family: var(--mono-face);
  font-size: var(--label-size);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
}

/* Action: the header Contact and its style guide demo */
html body .comp-action {
  font-family: var(--mono-face);
  font-size: var(--label-size);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
}