/* languages.css — #languages.
   Every value is giga's own, read off the reference and cross-checked against a measurement:
     · section box / paddings / gaps  → the Tailwind utilities on giga's `<section id="languages">`
       in reference/raw/index.html, resolved through giga's overridden theme scale in
       reference/raw/css/1.css (--text-7xl:4rem, --text-8xl:7.5rem, --text-3xs:.625rem,
       --spacing:.25rem, --tracking-display:-.03em, --tracking-eyebrow:.00625rem).
     · .languages-globe box            → giga's own rule in reference/raw/css/3.css:
       height:clamp(200px,26vw,340px); margin-top:clamp(1.5rem,4vw,3rem). At 1440 that is
       340px / 48px, which is exactly media.json's canvas h=340 and the 48px gap between the
       copy block (ends doc y 8307) and the canvas (starts doc y 8355).
     · pill                            → TOKENS.md §4 "SOUND OFF pill": 95x25, r9999, pad 4/10,
       fs 10 / lh 15 / ls .1px, and the measured resting position x=1301 y=8666 at 1440, which
       `position:absolute; bottom:4px; right:0` inside .lg-globe reproduces exactly.
     · pill hover                      → frames/hover-1440/0106-button-SOUND-OFF/diff.json:
       color .45 → .8, border-color .15 → .30.

   ONE DELIBERATE DEVIATION, documented: giga's `--text-headline` is
   `clamp(2.5rem, 4vw, 3rem)`, which computes to 40.96px at 1024 and 40px at 768/390. The
   measured computed styles (frames/measure/styles-*.json) report 44px at 1024, 768 AND 390 and
   48px at 1300/1440. `clamp(2.75rem, 4vw, 3rem)` reproduces all five measurements; the literal
   source string reproduces two. Geometry-from-measurement wins. */

#languages{
  box-sizing:border-box; position:relative; overflow:hidden;
  width:100%; max-width:var(--container-nav); margin:0 auto;
  padding:48px 20px 0;                                   /* pt-12 px-5 pb-0 */
}
@media (min-width:810px){ #languages{padding-left:44px;padding-right:44px} }   /* min-[810px]:px-11 */
@media (min-width:1680px){ #languages{padding-left:20px;padding-right:20px} }  /* min-[1680px]:px-5 */
@media (min-width:1200px){ #languages{min-height:601px;padding-top:96px} }     /* min-[1200px]:min-h-[601px] pt-24 */

/* Standalone section eyebrow: giga's `text-eyebrow` carries
   --text-eyebrow--line-height:1.5rem, so this variant is a 24px box, not the 16.5px of the
   stacked `.rail .eyebrow` that base.css encodes. TOKENS.md flags the split explicitly
   ("uses lh=24px instead of 16.5px — this is the 'ANY LANGUAGE, ANYWHERE' section eyebrow
   sitting alone above the H2"). Without this the whole section sits 7px high: the measured
   reference puts the H2 at 96 (pt-24) + 24 (eyebrow) + 16 (gap-4) = 136 below the section top.
   Scoped override, base.css untouched. */
#languages .eyebrow{line-height:24px}

/* ---- copy row ------------------------------------------------------------------ */
#languages .lg-row{position:relative;z-index:10;display:flex;flex-direction:column;gap:32px}
@media (min-width:1200px){
  #languages .lg-row{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:48px}
}

#languages .lg-copy{display:flex;flex-direction:column;gap:16px;max-width:672px}  /* max-w-2xl, gap-4 */
@media (min-width:1200px){ #languages .lg-copy{max-width:722px} }                 /* measured w=722 @1440 */

#languages .lg-title{
  font-family:var(--font-pixel); font-weight:400;
  font-size:var(--text-headline);                      /* 48px ≥1200, 44px ≤1024 (measured) */
  line-height:1;                                          /* leading-none → lh == fs (measured) */
  letter-spacing:var(--tracking-display);                 /* -.03em → -1.44px @48 (measured) */
  color:#fff;
}
#languages .lg-title .lg-l1{display:block}
#languages .lg-title .lg-l2{display:block;margin-top:12px}          /* mt-3 */
@media (min-width:480px){ #languages .lg-title .lg-l2{margin-top:16px} }  /* min-[480px]:mt-4 → h=112 @1440 */

/* the rotator: giga's is `transition-opacity duration-300` and nothing else */
#languages .lg-word{display:inline-block;transition:opacity .3s}
#languages .lg-word.is-out{opacity:0}

#languages .lg-body{
  font-family:var(--font-sans); font-weight:400;
  font-size:20px; line-height:1.375; color:#fff;          /* text-xl leading-snug → 27.5px (measured) */
}

/* ---- stat pair ------------------------------------------------------------------ */
#languages .lg-stat{display:flex;flex-direction:column;gap:8px;color:#fff;white-space:nowrap}
@media (min-width:1200px){
  #languages .lg-stat{flex-shrink:0;align-self:flex-start;padding-top:24px}   /* min-[1200px]:pt-6 */
}
#languages .lg-num{
  font-family:var(--font-pixel); font-weight:400;
  font-size:64px;                                          /* --text-7xl:4rem */
  line-height:1; letter-spacing:var(--tracking-display);
}
@media (min-width:810px){ #languages .lg-num{font-size:120px} }   /* --text-8xl:7.5rem */
#languages .lg-lbl{font-family:var(--font-sans);font-weight:400;font-size:20px;line-height:1.375}

/* ---- globe ---------------------------------------------------------------------- */
#languages .lg-globe{position:relative}
#languages .languages-globe{
  pointer-events:none; -webkit-user-select:none; user-select:none;
  width:100%; height:clamp(200px,26vw,340px); margin-top:clamp(1.5rem,4vw,3rem);
  overflow:hidden;
}
#languages .languages-globe canvas{
  display:block; width:100%; height:100%;
  font-family:var(--font-mono);   /* the canvas reads its glyph font from getComputedStyle */
}

/* ---- pill (giga's SOUND OFF slot → Gnar's work link) ---------------------------- */
#languages .lg-pill{
  position:absolute; bottom:4px; right:0; z-index:10;
  display:inline-flex; align-items:center; gap:6px;
  border-radius:var(--radius-full); border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.04); padding:4px 10px;
  font-family:var(--font-mono); font-size:10px; line-height:15px;
  letter-spacing:var(--tracking-eyebrow); text-transform:uppercase;
  color:rgba(255,255,255,.45);
  transition:color .15s cubic-bezier(0,0,.2,1),border-color .15s cubic-bezier(0,0,.2,1);
}
#languages .lg-pill:hover{border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.8)}
#languages .lg-pill svg{width:12px;height:12px;flex:none}          /* size-3 */
@media (pointer:coarse){ #languages .lg-pill{display:none} }        /* pointer-coarse:hidden */

/* ---- reduced motion (JS-RECON §7.6) --------------------------------------------- */
/* Rotator: the interval never starts (js/languages.js) — the word must not carry a
   transition either, or a late class toggle would still animate. Globe: js draws one
   static frame at 60° and never starts the rAF loop. */
@media (prefers-reduced-motion:reduce){
  #languages .lg-word{transition:none}
}
/* compact: giga `#languages{padding:48px var(--pad-x) 0;display:flex;flex-direction:column;gap:28px}` (2.css) — measured @1024: pad-left 24, gap 28 + globe margin 41 */
html[data-home-layout=compact] #languages{display:flex;flex-direction:column;gap:28px;padding:48px var(--pad-x) 0;height:auto;min-height:0}