/* Portfolio type scale. Mobile is the base; classes, not element names, assign styles. */
html { font-size: 100%; }

:root {
  --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-sans: Geist, system-ui, sans-serif;

  --h1-size: 2.5rem;
  --h1-lh: 1.2;
  --h1-ls: -0.02em;
  --h2-size: 2rem;
  --h2-lh: 1.25;
  --h2-ls: -0.02em;
  --h3-size: 1.25rem;
  --h3-lh: 1.35;
  --h3-ls: -0.01em;
  --p-size: 1rem;
  --p-lh: 1.5;
  --cta-size: 1rem;
  --cta-lh: 1.25;

  /* Compatibility aliases for existing components. */
  --text-h1: var(--h1-size);
  --text-h2: var(--h2-size);
  --text-h3: var(--h3-size);
  --text-lead: 1.25rem;
  --text-body: var(--p-size);
  --leading-h1: var(--h1-lh);
  --leading-h2: var(--h2-lh);
  --leading-h3: var(--h3-lh);
  --leading-heading: var(--h3-lh);
  --leading-lead: var(--p-lh);
  --leading-body: var(--p-lh);
  --tracking-h1: var(--h1-ls);
  --tracking-h2: var(--h2-ls);
  --tracking-h3: var(--h3-ls);
  --tracking-body: 0;
  --font-body: var(--font-sans);
  --text-title: var(--text-h1);
  --text-small: var(--text-body);
  --text-label: var(--text-body);
}

@media (min-width: 48rem) {
  :root {
    --h1-size: 3.5rem;
    --h1-lh: 1.15;
    --h2-size: 2.75rem;
    --h2-lh: 1.2;
    --h3-size: 1.375rem;
    --h3-lh: 1.3;
    --p-lh: 1.6;
  }
}

@media (min-width: 64rem) {
  :root {
    --h1-size: 4.5rem;
    --h1-lh: 1.1;
    --h2-size: 3.5rem;
    --h2-lh: 1.15;
    --h3-size: 1.5rem;
    --h3-lh: 1.3;
  }
}

.type-h1,
.type-h2,
.type-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.type-h1 { font-size: var(--h1-size); line-height: var(--h1-lh); letter-spacing: var(--h1-ls); }
.type-h2 { font-size: var(--h2-size); line-height: var(--h2-lh); letter-spacing: var(--h2-ls); }
.type-h3 { font-size: var(--h3-size); line-height: var(--h3-lh); letter-spacing: var(--h3-ls); }
.type-lead { max-width: 65ch; font: 400 var(--text-lead) / var(--p-lh) var(--font-sans); }
.type-body { max-width: 65ch; font: 400 var(--p-size) / var(--p-lh) var(--font-sans); }
.type-cta,
.split-btn__label { font: 500 var(--cta-size) / var(--cta-lh) var(--font-sans); white-space: nowrap; }
.split-btn { min-height: 2.75rem; }