/* Shared typography contract: docs/typography.md. Load after component styles.
   Change semantic roles here, not individual viewport-specific heading sizes. */
@font-face {
  font-family: "Google Sans Flex Local";
  src: url("assets/fonts/google-sans-flex/GoogleSansFlex-Variable.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Local";
  src: url("assets/fonts/geist/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-sans: "Geist Local", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-display: var(--font-sans); /* Neutral preview while the replacement pairing is reviewed. */
  --font-editorial: Georgia, "Times New Roman", serif;
  --type-cover: clamp(2.25rem, 2rem + 1.4vw, 3.5rem);
  --type-statement: clamp(1.875rem, 1.3rem + 2vw, 3.25rem);
  --type-chapter: clamp(1.625rem, 1.3rem + 1.1vw, 2.5rem);
  --type-subheading: clamp(1.25rem, 1.1rem + .45vw, 1.625rem);
  --type-card: clamp(1.25rem, 1.1rem + .3vw, 1.5rem);
  --type-lead: clamp(1.0625rem, 1rem + .14vw, 1.125rem);
  --type-body: clamp(1rem, .875rem + .21vw, 1.0625rem);
  --type-small: .875rem;
  --type-metric: clamp(2.5rem, 2rem + 2vw, 4rem);
  --leading-heading: 1.2;
  --leading-body: 1.6;
  --leading-small: 1.5;
  --tracking-heading: -.03em;
  --reading-measure: 65ch;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.home-page, body.case-body {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  font-optical-sizing: auto;
}
body.home-page :is(.mono, .eyebrow, .section-label, .loader-word) {
  font-family: var(--font-sans);
}
body.home-page :is(h1, h2, h3, h4, .manifesto-statement, .loader-word) {
  font-family: var(--font-display);
  font-optical-sizing: auto;
}
body.home-page :is(.display-title em, .work-outro em, .contact-section em, .loader-word-feel em) {
  font-family: var(--font-editorial);
  font-weight: 400;
}
body.home-page :is(h2, h3, h4), body.case-body :is(h1, h2, h3) {
  text-wrap: balance;
}
body.home-page p, body.case-body p { text-wrap: pretty; }

/* Homepage: the opening brand statement is the only oversized display. */
.home-page .chapter-title {
  font-size: var(--type-chapter);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}
.home-page :is(.manifesto-statement, .work-intro h3, .process-thesis, .work-outro h3, .footer-intro h2) {
  font-size: var(--type-statement);
  font-weight: 500;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}
.home-page .manifesto-statement { line-height: 1.4; max-width: 32ch; }
.home-page .work-intro h3 { max-width: 28ch; }
.home-page .process-thesis { max-width: 18ch; }
.home-page .footer-intro h2 { white-space: normal; text-wrap: balance; }
.home-page :is(.work-card-copy h3, .process-panel h4) {
  font-size: var(--type-subheading);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.3;
  max-width: 24ch;
}
.home-page .work-card-copy { min-height: 0; align-items: start; gap: 16px; }
.home-page .work-card-action { flex-shrink: 0; white-space: nowrap; }
.home-page .work-card-copy p { margin-top: 10px; max-width: 48ch; }
.home-page :is(.profile-copy, .work-intro > p, .process-narrative > p, .process-panel-copy > p) {
  font-size: var(--type-body);
  line-height: var(--leading-body);
  letter-spacing: 0;
  max-width: var(--reading-measure);
}
.home-page .hero-summary > p { font-size: var(--type-body); line-height: 1.6; letter-spacing: 0; }
.home-page .hero-details { font-size: var(--type-lead); line-height: 1.5; letter-spacing: -.01em; }
.home-page :is(.work-card-copy p, .work-card-copy > .mono, .work-card-top, .work-card-top .mono, .work-card-action,
  .stats span:not(.stats-tracer), .process-panel-heading span, .process-output span, .process-panel figcaption,
  .process-rail small, .footer-contact > span, .footer-bottom) {
  font-size: var(--type-small);
  line-height: var(--leading-small);
  letter-spacing: 0;
}
.home-page :is(.process-output strong, .process-rail strong) {
  font-size: var(--type-body);
  line-height: 1.5;
}
.home-page .stats strong { font-size: var(--type-metric); line-height: 1.1; letter-spacing: -.04em; }
.home-page .footer-contact a { font-size: var(--type-lead); line-height: 1.5; }
.home-page .footer-details nav { font-size: var(--type-body); line-height: 1.5; }

/* Case study: chapter, supporting heading, body and label are distinct roles. */
body.case-body {
  --font-sans: "Google Sans Flex Local", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-display: var(--font-sans);
  --case-sans: var(--font-sans);
  --case-display-font: var(--font-display);
  --case-serif: var(--font-sans);
  --tracking-heading: -.025em;
  --case-tracking-cover: -.025em;
  --case-tracking-card: -.015em;
  --case-tracking-label: .04em;
  --case-weight-heading: 500;
  --case-weight-cover: 400;
  --case-display-size: var(--type-cover);
  --case-section-title-size: var(--type-chapter);
  --case-display-leading: 1.12;
  --case-display-tracking: var(--tracking-heading);
}
/* Container sizing is the no-JS fallback. A measured font-size refinement
   gives the sentence an intentional right inset without stretching glyphs. */
body.case-body #case-title {
  font-size: var(--case-cover-fit, clamp(1.5rem, 8.7cqw, 4.375rem));
  line-height: 1.12;
  font-weight: var(--case-weight-cover);
  letter-spacing: var(--case-tracking-cover);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  width: 100%;
  max-width: none;
}
body.case-body #case-title { white-space: nowrap; }
body.case-body #case-title.is-cover-wrapped { white-space: normal; }
body.case-body #case-title .case-cover-line { display: inline; white-space: nowrap; }
body.case-body #case-title.is-cover-wrapped .case-cover-line { white-space: normal; }
body.case-body :is(.case-section-heading h2, .problem-intro h2, .destination-intro h3,
  .case-complexity-copy h2, .case-system-heading h2, .case-motion-intro h2,
  .case-impact-heading h2, .case-reflection h2) {
  font-size: var(--type-chapter);
  font-weight: var(--case-weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  max-width: 28ch;
}
body.case-body :is(.problem-copy-stack h3, .problem-result h3, .system-card h3,
  .case-motion-panel figcaption h3, .case-film-caption h3) {
  font-size: var(--type-card);
  font-weight: var(--case-weight-heading);
  line-height: 1.3;
  letter-spacing: var(--case-tracking-card);
}
body.case-body :is(.case-section-heading > p:last-child, .problem-intro > p:last-child,
  .destination-intro p, .case-complexity-copy > p:last-child, .case-system-heading > p:last-child,
  .case-motion-intro > p:last-child, .case-reflection > div:last-child p,
  .problem-copy-stack p, .case-impact-note,
  .case-motion-panel figcaption p, .case-film-caption p) {
  font-size: var(--type-body);
  line-height: var(--leading-body);
  letter-spacing: 0;
  max-width: var(--reading-measure);
}
body.case-body :is(.case-section-label, .case-hero-meta dt, .problem-step) {
  font-size: var(--type-small);
  font-weight: var(--case-weight-heading);
  line-height: var(--leading-small);
  letter-spacing: var(--case-tracking-label);
}
body.case-body :is(.case-hero-meta dd, .destination-card-title, .destination-card figcaption,
  .problem-source, .problem-diagram-note, .problem-switch button, .system-card header > p,
  .utility-demo__header > div > p, .case-impact-primary p, .case-impact-secondary p,
  .case-footer) {
  font-size: var(--type-small);
  line-height: var(--leading-small);
}
body.case-body .problem-toolbar > p { font-size: var(--type-lead); line-height: 1.5; }
body.case-body .case-complexity-copy h2 { line-height: 1.4; }
body.case-body :is(.utility-tab, .utility-live-summary p) { font-size: var(--type-small); line-height: 1.5; }
body.case-body :is(.utility-demo__label > strong, .utility-demo__dimensions dt, .utility-demo__active-model strong) {
  font-family: var(--font-sans);
  font-size: var(--type-card);
  line-height: 1.3;
  letter-spacing: var(--case-tracking-card);
}
body.case-body .utility-demo__coverage strong { font-family: var(--font-sans); font-size: var(--type-metric); line-height: 1.1; letter-spacing: -.04em; }
body.case-body .next-project > a { font-size: var(--type-statement); line-height: 1.2; }

@media (max-width: 700px) {
  .home-page .work-intro h3 { line-height: 1.4; }
  .home-page .process-panel, .home-page .process-panel.is-current { min-height: 0; }
  .home-page .process-panel-copy { min-height: 0; }
  .home-page .process-panel h4 { margin-block: 32px 16px; }
  body.case-body :is(.case-section-heading h2, .case-complexity-copy h2, .case-impact-heading h2, .case-reflection h2,
    .case-motion-panel figcaption h3, .case-film-caption h3) { max-width: 100%; }
}

/* Text-size tracking stays neutral; small uppercase labels get breathing room. */
body.case-body :is(.case-section-label, .case-hero-meta dt) {
  font-weight: 500 !important;
  letter-spacing: var(--case-tracking-label);
  line-height: 1.5 !important;
}
body.case-body .problem-step { letter-spacing: 0; }
body.case-body :is(.case-hero-meta dd, .destination-card figcaption,
  .problem-diagram-note, .problem-source, .case-footer) {
  font-weight: 400;
  letter-spacing: 0;
}
body.case-body :is(.problem-switch button, .destination-card-title, .case-page-index__links button,
  .case-header-back, .case-page-index__back) {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: -.005em;
  line-height: 1.4;
}
body.case-body :is(.case-impact-primary strong, .case-impact-secondary strong) {
  font-family: var(--font-sans);
  font-weight: 450;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 700px) {
  body.case-body { --tracking-heading: -.02em; --case-tracking-cover: -.02em; }
}
@media (max-width: 900px) {
  body.case-body :is(.case-motion-panel figcaption h3, .case-film-caption h3) {
    max-width: 100%;
    text-wrap: pretty;
  }
}

/* Changing labels share one intrinsic slot. Hidden alternatives reserve the widest
   state in the current font, including after font loading or text resizing. */
.stable-label { display:inline-grid; grid-template-columns:max-content; align-items:center; flex:none; text-align:center; white-space:nowrap; }
.stable-label > span { grid-area:1 / 1; }
.stable-label > .stable-label-sizer { visibility:hidden; pointer-events:none; user-select:none; }

/* Compact comparison takeaway, shared by both tab states. */
body.case-body .problem-result p {
  font-size: var(--type-small);
  line-height: 1.5;
  font-weight: 400;
}