/* Amergent Partners — responsive tokens. Loaded after modernist.css, before every other stylesheet.

   Breakpoints (mobile-first: base styles are for phones, then `@media (min-width: …)`).
   CSS cannot read custom properties inside @media, so queries repeat these literal values:

     xs    < 480        phones (320–479)                 base styles, no query
     sm    ≥ 480px      large phones
     md    ≥ 768px      tablets, portrait
     lg    ≥ 1024px     tablets landscape, small laptops  ← desktop navigation starts here
     xl    ≥ 1280px     laptops
     2xl   ≥ 1440px     REFERENCE: the original design was drawn at this width
     3xl   ≥ 1920px     large / 4K monitors: content stops growing, backgrounds stay full-bleed

   Fluid values interpolate between 375px and 1440px and land exactly on the original
   desktop value at 1440px. Generate new ones with:  node tools/fluid.js <min> <max>  */

:root {
  /* Mirrors of the breakpoints for scripts (matchMedia). */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1440px;
  --bp-3xl: 1920px;

  /* ── Layout ─────────────────────────────────────────────────────────── */

  /* Content never gets wider than this; past it, side padding grows instead. */
  --container: 1664px;
  /* Section gutters: 20px on phones → ~32px on tablets → 48px at 1440 (original). */
  --gutter: clamp(20px, 2.629vw + 10.15px, 48px);
  /* Navigation and hero gutters: 20px → 32px at 768 → 96px at 1440 (original). */
  --gutter-wide: clamp(20px, 9.524vw - 41.14px, 96px);
  /* Phones held sideways: keep content clear of the notch / rounded corners (0 elsewhere). */
  --safe-x: max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  /* Horizontal padding that keeps content inside the container on huge screens. */
  --pad-x: max(calc(var(--gutter) + var(--safe-x)), calc((100% - var(--container)) / 2));
  --pad-x-wide: max(calc(var(--gutter-wide) + var(--safe-x)), calc((100% - var(--container)) / 2));

  /* Fixed header and the in-page anchor bar. Scripts read these values. */
  --nav-h: 72px;
  --anchor-h: 48px;
  --safe-top: env(safe-area-inset-top, 0px);

  /* Vertical rhythm of sections. */
  --space-section: clamp(64px, 4.507vw + 47.1px, 112px);     /* 112px at 1440 */
  --space-section-lg: clamp(72px, 6.761vw + 46.65px, 144px); /* 144px at 1440 */

  /* ── Type ───────────────────────────────────────────────────────────── */

  /* Body copy never goes under 16px on small screens; from lg up it returns to the design's size. */
  --fs-13: 15px;
  --fs-14: 16px;
  --fs-15: 16px;
  --fs-16: 16px;

  /* Headline scale (desktop size at 1440 → mobile minimum at 375). */
  --fs-h2: clamp(36px, 1.878vw + 28.96px, 56px);  /* section titles, 56px */
  --fs-h3: clamp(28px, 1.502vw + 22.38px, 44px);  /* 44px */
  --fs-h4: clamp(24px, 0.939vw + 20.48px, 34px);
  --fs-lead: clamp(24px, 0.751vw + 21.19px, 32px);
}

@media (min-width: 768px) {
  :root { --nav-h: 88px; }
}

@media (min-width: 1024px) {
  :root {
    --nav-h: 112px;
    --anchor-h: 56px;
    --fs-13: 13px;
    --fs-14: 14px;
    --fs-15: 15px;
  }
}