:root {

  --text-3xl: clamp(2.125rem, 1.243rem + 3.619vw, 4.5rem);
  --text-2xl: clamp(1.75rem,  1.332rem + 1.714vw, 2.875rem);
  --text-xl:  clamp(1.375rem, 1.143rem + .952vw,  2rem);
  --text-lg:  clamp(1.125rem, 1.032rem + .381vw,  1.375rem);
  --text-md:  clamp(1.0625rem, 1.016rem + .190vw,  1.1875rem);
  --text-sm:  16px;
  --text-xs:  14px;

  --text-3xs: 13px;
  --text-2xs: 11px;

  --text-report: 15px;

  --text-wm:            22px;
  --text-wm-descriptor:  8px;

  --text-hero: clamp(2.625rem, 2.114rem + 2.095vw, 4rem);

  --text-index: clamp(1.125rem, 1rem + .6vw, 1.5rem);

  --lh-display: 1.02;
  --lh-heading: 1.12;
  --lh-title:   1.24;
  --lh-body:    1.62;
  --lh-tight:   1.2;

  --track-display: -.03em;
  --track-heading: -.02em;
  --track-sub:     -.012em;
  --track-body:     0;
  --track-mono:     .16em;
  --track-descriptor: .24em;

  --weight-light:   400;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;

  --space-3xs: 4px;   --space-2xs: 8px;   --space-xs:  12px;
  --space-sm:  16px;  --space-md:  24px;  --space-lg:  32px;
  --space-xl:  40px;  --space-2xl: 48px;  --space-3xl: 64px;
  --space-4xl: 80px;  --space-5xl: 96px;  --space-6xl: 120px;

  --section-y:       120px;
  --section-y-lg:    160px;
  --section-y-panel: 0px;
  --section-x:    clamp(20px, 5vw, 72px);
  --section-gap:  64px;
  --hero-offset:  160px;

  --radius-input:  10px;
  --radius-button: 12px;
  --radius-panel:  16px;
  --radius-surface:32px;
  --radius-photo:  40px;
  --radius-pill:   999px;
  --radius-round:  50%;

  --radius-rail:   2px;

  --radius-sm: var(--radius-input);
  --radius-md: var(--radius-button);
  --radius-lg: var(--radius-panel);
  --radius-xl: var(--radius-surface);

  --shadow-xs:     0 1px 2px rgba(39, 35, 33, .04);
  --shadow-rest:   0 2px 8px rgba(39, 35, 33, .05);
  --shadow-raised: 0 12px 32px -12px rgba(39, 35, 33, .16);
  --shadow-lg:     0 28px 70px -28px rgba(39, 35, 33, .26);
  --shadow-inset-line: inset 0 0 0 1px var(--color-text);

  --ratio-square: 1 / 1;
  --ratio-card:   1.35 / 1;
  --ratio-wide:   2.33 / 1;

  --duration-hover:  280ms;

  --settle:      520ms;
  --settle-ease: cubic-bezier(.22, 1, .36, 1);
  --duration:        280ms;
  --duration-reveal: 640ms;
  --ease:     cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --ease-demo:    cubic-bezier(.4, 0, .2, 1);
  --demo-tint:    200ms;
  --demo-fade:    260ms;
  --demo-height:  320ms;

  --acc-open:      260ms;

  --tone-flip:    1000ms;
  --ease-tone:    cubic-bezier(.85, 0, .15, 1);

  --demo-open:    1300ms;
  --demo-open-in:  560ms;

  --hero-in-photo: 1400ms;

  --hero-title-measure: 19ch;

  --measure-panel-title: 16ch;
  --hero-lead-measure:  42ch;
  --hero-in:       720ms;
  --hero-lead-in:  160ms;
  --hero-step:      90ms;
  --hero-rise:      20px;
  --hero-photo-scale: 1.04;

  --section-lift: 96px;

  --motion-rise: 90px;

  --motion-from-opacity: .66;
  --motion-from-scale:   .977;

  --grid-columns: 12;
  --gutter:       24px;

  --container:        1920px;
  --container-narrow: 820px;
  --measure:          72ch;
  --measure-lead:     820px;
  --nav-h:            72px;

  --idx-num-col: 40px;

  --control-h:    48px;
  --control-h-sm: 38px;

  --icon-size:   24px;
  --icon-stroke: 1.6;
  --icon-box:    48px;

  --rail-w:     4px;
  --rail-hit:  16px;
  --rail-edge:  6px;
  --rail-inset: 8px;
  --rail-min:  48px;
  --rail-idle: 900ms;

  --focus-ring: 2px solid var(--color-focus);

  --z-sticky: 40; --z-nav: 60; --z-rail: 70; --z-overlay: 80;
}

@media (max-width: 1439.98px) {
  :root {

    --section-y:       96px;
    --section-y-lg:    120px;
    --section-y-panel: 0px;
    --section-gap:  48px;
    --hero-offset:  120px;

    --grid-columns: 8;
    --gutter:       20px;

    --motion-rise:  76px;
    --section-lift: 72px;
  }
}

@media (max-width: 759.98px) {
  :root {
    --section-y:       64px;
    --section-y-lg:    80px;
    --section-y-panel: 0px;
    --section-gap:  32px;
    --hero-offset:  96px;

    --text-hero: clamp(2.47rem, 1.99rem + 1.97vw, 2.93rem);

    --hero-title-measure: 16ch;

    --grid-columns: 4;
    --gutter:       16px;

    --motion-rise:  62px;
    --section-lift: 48px;

    --nav-h: 64px;
  }
}