/* ============================================================================
   Joy Group — viewport-derived tokens. ONE file, loaded by every page:
   the homepage <link>s it, site.css @imports it. Like chrome-footer.css and
   chrome-menu.css, this is the single source of truth for what is in it —
   do not restate these tokens in either stylesheet, and never pin one of them
   to a flat px value inside a phone block. A flat value here does not merely
   override the scale, it switches the scale OFF for that token.
   ============================================================================ */

/* ---- Safe-area insets -----------------------------------------------------
   Indirected through custom properties for two reasons: env() cannot be used
   inside a var() fallback chain, and naming them makes the intent legible at
   the call site (`calc(16px + var(--sa-b))` reads as "clear the home
   indicator"). They resolve to 0 on every device without insets and on every
   desktop browser, so the same expression is safe everywhere and needs no
   @supports guard. They only become non-zero once the page opts in with
   viewport-fit=cover in its viewport meta.
   -------------------------------------------------------------------------- */
:root {
  --sa-t: env(safe-area-inset-top, 0px);
  --sa-r: env(safe-area-inset-right, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px);
  --sa-l: env(safe-area-inset-left, 0px);
}

/* ---- The kicker size ------------------------------------------------------
   One value for every uppercase label that introduces something: section
   kickers, the CEO attribution, the company services line, timeline meta.
   They were 15px and 14px depending on which file you landed in — a difference
   nobody can see, arrived at because the design system offers five text tokens
   within 4px of each other (15 numeral, 14 body-sm, 13 label-lg, 12 caption,
   11 label) and each author picked a different one. Meraas, the reference for
   this project, runs ONE kicker treatment and separates contexts by tracking
   and colour instead of by size; this follows that.

   Phones carry their own pair. 13px/0.14em is what the phone block already
   chose for .page-kicker and the timeline meta; the other three sites simply
   never got a phone rule, so they sat at 14 or 15 by omission rather than by
   decision. Tracking rides along because 0.14 vs 0.16em here is the same value
   adjusted for size, not a per-context differentiator — those (the services
   line's 0.1em) stay where they are. */
/* ---- The end-of-page gap ----------------------------------------------------
   The white run before the footer, so a page reads as FINISHED rather than as
   another section that happens to be last. It existed only on the homepage's
   contact section, and only on phones: About ended on 44px of white (mobile) /
   80px (desktop, where an ordinary section already pays 128), and the company
   pages had none at all — .page-close paid the same 128 top and bottom as every
   other section, so the page just stopped.

   ONE HALF-STEP MORE THAN A SECTION. The phone value was hand-solved as
   clamp(80.64px, ..., 96px), and it turns out to be exactly 1.5x --section-y at
   every anchor (375 -> 84, 390 -> 88.4, 430 -> 96). So the calc below is not a
   new number, it is the old one generalised: it reproduces the signed-off phone
   spacing to the decimal and carries the same relationship into tablet and
   desktop for free, staying fluid because --section-y already is.

   Base level, no media query, no !important: it resolves against whatever
   --section-y is in scope, which is how the homepage's own --section-y override
   is picked up automatically.

   Deliberately WHITE space. On About there is mist padding above this too, and
   it does not do the job — a tint change reads as a transition, not as an
   ending, so the pause has to come from the white. */
:root { --page-end: calc(var(--section-y) * 1.5); }

:root { --kicker-size: 13px; --kicker-track: 0.14em; }
@media (min-width: 769px) {
  :root { --kicker-size: 15px; --kicker-track: 0.16em; }
}

/* iOS inflates body copy when the phone is rotated unless this is pinned. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ---- The phone scale ------------------------------------------------------
   Everything below 768px used to be ONE breakpoint step and then flat: a
   375x667 SE paid exactly the same 64px section bands as a 430x932 Pro Max,
   so the small phone carried the big phone's whitespace on 265px less screen
   and needed ~40% more scrolling for the same content. Type was the only
   thing that scaled, which is backwards — whitespace should yield first.

   These clamps make the phone range fluid the way 769px-and-up already is.
   The ratio is 1.000 at 430x932 — the iPhone design benchmark, reproduced to
   the pixel — and falls with the screen: 0.970 at 412x932 and 0.968 at 412x915
   (the Android benchmark), 0.930 at 393x873, 0.927 at 393x852, 0.921 at
   390x844, 0.870 at 375x667, 0.841 at 360x640. The floor is 0.840, which is
   exactly where a 360x640 Android lands — it was 0.870 when this was solved
   against iPhones alone, and that floor was clamping the smallest Android
   into an SE's spacing despite being narrower AND shorter than one. Nothing
   at 375 or above moves; only screens smaller than an SE gain the extra
   compression they were being denied.

   Two axes, because vertical space is what actually runs out on a phone, but
   weighted 70/30 toward width: vw is exactly the layout width, while vh on
   iOS derives from the URL-bar-hidden viewport, so the steadier axis leads.
   vh and not dvh deliberately — dvh would re-run this scale every time Safari
   collapses its URL bar, reflowing the whole page mid-scroll.

   Coefficients are solved from those two anchor points; they are not tuned by
   eye, so moving an anchor means re-solving, not nudging.

   !important for the same reason the 769px-and-up block uses it: this sheet is
   loaded BEFORE the homepage's inline <style>, which re-declares --section-y at
   base level (`:root { --section-y: var(--space-20) }`). At equal specificity
   the later declaration wins, so without this the homepage would hand phones a
   160px section band. Measured, not assumed — it resolved to the space-20 clamp
   before this was added.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --gutter-lg: clamp(16.8px, calc(3.309vw + 0.2943vh + 3.028px), 20px) !important;
    --gutter: clamp(16.8px, calc(3.309vw + 0.2943vh + 3.028px), 20px) !important;
    --grid-gap: clamp(16.8px, calc(3.309vw + 0.2943vh + 3.028px), 20px) !important;
    --section-y: clamp(53.76px, calc(10.59vw + 0.9419vh + 9.689px), 64px) !important;
    --section-y-loose: clamp(60.48px, calc(11.91vw + 1.06vh + 10.9px), 72px) !important;
    --space-2: clamp(13.44px, calc(2.647vw + 0.2355vh + 2.422px), 16px) !important;
    --space-3: clamp(20.16px, calc(3.971vw + 0.3532vh + 3.633px), 24px) !important;
    --space-4: clamp(26.88px, calc(5.295vw + 0.4709vh + 4.844px), 32px) !important;
    --space-5: clamp(33.6px, calc(6.618vw + 0.5887vh + 6.055px), 40px) !important;
    --space-6: clamp(40.32px, calc(7.942vw + 0.7064vh + 7.266px), 48px) !important;
    --space-8: clamp(53.76px, calc(10.59vw + 0.9419vh + 9.689px), 64px) !important;
    --space-10: clamp(20.16px, calc(3.971vw + 0.3532vh + 3.633px), 24px) !important;
    --space-12: clamp(33.6px, calc(6.618vw + 0.5887vh + 6.055px), 40px) !important;
    --space-16: clamp(40.32px, calc(7.942vw + 0.7064vh + 7.266px), 48px) !important;
    --space-20: clamp(134.4px, calc(26.47vw + 2.355vh + 24.22px), 160px) !important;
  }

  /* Landscape on a notched iPhone puts the notch beside the content, not above
     it, so the side gutters have to clear it. max() rather than addition: the
     gutter is already 17-20px, and only the rare case where an inset exceeds
     that needs to win. */
  .shell, #site-header .bar { padding-left: max(var(--gutter-lg), var(--sa-l));
                              padding-right: max(var(--gutter-lg), var(--sa-r)); }
}