/* ============================================================
   KompanyOS — TYPE SCALE + SECTION RHYTHM  (type.css)

   The measured gap against the live 3SC site, expressed as tokens. Sibling to
   cube-tokens.css: that file carries the BRAND values (colour, family, shadow),
   this one carries the SCALE (size, line-height, tracking, spacing rhythm).

   Why this exists — three drifts, measured on 3sidedcube.com vs this site at
   1280px and 390px:

     1. Supporting copy ran small, grey and tight. Their section lead is 24px
        black Poppins; ours was 15px #5b5b5b. Their heading -> paragraph gap is
        24px (48px under the biggest heads); ours was 12-16px.
     2. Headings carried -0.02em tracking and weight 800. Theirs sit at tracking
        0 and weight 700 (their token set defines 700 and 900 only — never 800).
     3. Section padding was clamp(64px, 9vh, 120px), so the rhythm CHANGED WITH
        THE WINDOW HEIGHT — 81px on a laptop, 108px on a big display. 3SC's
        Section is a fixed py-16. Fixed is the whole point: the page should read
        the same on every screen.

   Deliberate divergences from 3SC, and why:

     - The hero caps at 56px, not their 72px. Their hero is three short stacked
       words ("YOUR GUIDE / TO AN AI / DRIVEN WORLD"); ours is a sentence. At
       60px it wraps to 5 lines and at 72px it overflows the hero stage by
       106px. 56px is the last size that holds its line count with room to
       spare (measured: widest line 732px inside a 780px box).
     - The hero keeps a hair of negative tracking (-0.015em, vs their 0) for the
       same reason: at tracking 0 the phone headline gains two lines.
     - The mono kicker (.overline / .msg-over, Anonymous Pro +0.16em) is a
       KompanyOS device with no 3SC counterpart, so it is left alone.

   Every value is var(--cube-x, fallback) so this file works on any ground, with
   or without cube-tokens.css loaded.
   ============================================================ */
:root {
  /* ---------- size steps ----------
     Each is a clamp so it still tracks the viewport; only the CAPS moved.
     Previous values are noted so a revert is one edit. */
  /* Cap held at 54px, NOT 56: at 56 the Schools headline's green highlight
     breaks across two lines (measured: 3 lines at 54px, 4 at 56px, 1280 wide).
     The bump that matters is the SLOPE — 4.4vw reaches the cap at 1227px
     instead of 1543px, so a 1280 laptop now gets 54px where it got 45px. */
  --t-hero:   clamp(32px, 4.4vw, 54px);   /* page h1        (was ...3.5vw, 54px) */
  --t-h2:     clamp(26px, 3.2vw, 44px);   /* section head   (was ...2.8vw, 38px) */
  --t-h3:     clamp(20px, 1.8vw, 26px);   /* sub-head                            */
  --t-lead:   clamp(17px, 1.5vw, 20px);   /* section lead   (was ...1.05vw, 17px) */
  --t-body:   clamp(15px, 1.1vw, 16px);   /* body           (was 14px)           */
  --t-label:  13px;                        /* mono kicker — unchanged            */

  /* ---------- line height ----------
     3SC measured: headings 1.11-1.25, leads 1.33-1.5, body 1.5-1.6. */
  --lh-hero: 1.14;
  --lh-head: 1.2;
  --lh-lead: 1.5;
  --lh-body: 1.6;

  /* ---------- tracking ----------
     3SC runs 0 on effectively every heading. The hero is the one exception
     here (see the header note). */
  --trk-hero:  -.015em;
  --trk-head:  0;
  --trk-label: .16em;

  /* ---------- section rhythm ----------
     FIXED, not viewport-derived — this is the fix for "spacing looks different
     on different screens". 3SC's Section = py-16 (64px); its feature sections
     use 80-128px. */
  --sp-section:    64px;
  --sp-section-lg: 128px;
  --sp-gutter:     clamp(24px, 5vw, 64px);

  /* ---------- heading rhythm ----------
     kicker -> heading -> paragraph. 3SC's heading -> paragraph is 24px. */
  --sp-over-head: 16px;
  --sp-head-lead: 24px;
}

/* Phone: 3SC drops to 36-44px heroes and 26px section heads, and its Section
   padding stays fixed at 40-64px. Same shape here. */
@media (max-width: 820px) {
  :root {
    /* LEFT AT THE ORIGINAL VALUE ON PURPOSE. There is a cliff between 29px and
       30px on a 390px phone: the Home headline holds 4 lines at 29px and jumps
       straight to 6 at 30px, which costs ~40px of hero and looks bottom-heavy.
       Verified across 29/30/31/32/34px. Do not raise this without re-measuring. */
    --t-hero:  clamp(27px, 7.4vw, 38px);
    --t-h2:    clamp(24px, 6.6vw, 32px);
    --t-h3:    clamp(18px, 4.8vw, 22px);
    --t-lead:  clamp(16px, 4.2vw, 18px);
    --t-body:  15px;

    --sp-section:    48px;
    --sp-section-lg: 72px;
    --sp-gutter:     20px;

    --sp-over-head: 12px;
    --sp-head-lead: 18px;
  }
}