/* =============================================================================
   type-v16.css - W7 type-scale lane, wave 2 (rodgersintelligence.com redesign)
   Load AFTER app.css. Original CSS written for V14. Mike's brief: "we need to
   make the text larger". What this file does:
     1. A fluid type ladder (tokens --f-h1 ... --f-micro) that raises EVERY role.
        body >= 18px desktop / >= 17px mobile; labels, nav and micro text >= 13px
        (V14 shipped 8.5-11px); headlines above V14's clamp(38px,4.5vw,74px) with
        a real tablet step (V14's clamp floor pinned 390-844px).
     2. Measure control: multi-line text blocks capped at 66-70ch.
     3. The RESPONSIVE-SPEC.md fixes the larger type touches, because bigger text
        inside V14's pinned vh bands and nowrap rows overlaps harder:
        G1 tiers, G2 fluid headline, G3/G4 menu swipe track, G5 menu foot,
        G6 chrome grid, G7 lab bar, G8 micro floor, G9 height + orientation,
        G10 chapter copy flow, G12 dvh + safe-area.
   Per-role before/after px and the Clef readability roll-up: see README.md.
   Nothing here is deployed; the Orca builder integrates.
   ========================================================================== */

:root{
  /* Fluid ramp token: 80vw + 30vh normalised from 320px up, the mechanism the
     reference site uses, so a new breakpoint never needs a new rule.
     Resolves to 0.153 / 0.376 / 0.689 / 0.963 at 390x844 / 768x1024 /
     1440x900 / 1920x1080. */
  --m:calc((80vw + 30vh - 320px) / 1600);

  --pad:clamp(20px,7vw,120px);

  /* the ladder: px first arg = the mobile floor, last arg = the desktop ceiling */
  --f-h1:clamp(44px,calc(40px + 52 * var(--m)),96px);        /* home hero H1 */
  --f-h2:clamp(40px,calc(38px + 50 * var(--m)),88px);        /* chapter H2 */
  --f-h3:clamp(38px,calc(36px + 46 * var(--m)),82px);        /* lab H2 */
  --f-lead:clamp(17px,calc(16.5px + 7 * var(--m)),24px);     /* hero + chapter lead */
  --f-body:clamp(16.5px,calc(16.5px + 6.5 * var(--m)),21px); /* secondary body copy */
  --f-list:clamp(16px,calc(16px + 5 * var(--m)),20px);       /* lap rows, lab notes */
  --f-menu:clamp(46px,calc(7.2vw + 6 * var(--m)),120px);     /* menu chapter labels */
  --f-num:clamp(44px,calc(42px + 12 * var(--m)),62px);       /* lab part counter */
  --f-brand:clamp(36px,calc(32px + 14 * var(--m)),48px);     /* RIG. wordmark */
  --f-micro:13px;        /* every label / nav / mono / chip role, 14px >= 1025px */
  --f-micro-tr:.18em;    /* V14 used .32-.34em; larger text needs less tracking */
  --lh-body:1.62;
}
@media (min-width:1025px){ :root{--f-micro:14px} }

/* ---------- display type ---------- */
.ttl{font-size:var(--f-h1);line-height:1.04;letter-spacing:.02em;max-width:16ch;margin:0 0 20px}
.ch .ttl{font-size:var(--f-h2)}
.ttl--lab{font-size:var(--f-h3);max-width:14ch}
.eyebrow{font-size:var(--f-micro);line-height:1.4;letter-spacing:.26em;margin:0 0 18px}
.bar__brand{font-size:var(--f-brand)}
.lab__ghost span{font-size:clamp(126px,calc(118px + 74 * var(--m)),300px)}
.lab__ghost sup{font-size:clamp(40px,calc(38px + 40 * var(--m)),96px)}
.lab__ghost small{font-size:var(--f-micro);letter-spacing:.5em}
.lab__count b{font-size:var(--f-num)}

/* ---------- body copy, with the measure capped at 55-70ch ---------- */
.lede{font-size:var(--f-lead);line-height:var(--lh-body);max-width:66ch;margin:0 0 14px}
.lede--dim{font-size:var(--f-body)}
.laps{max-width:70ch;margin:0 0 18px}
.laps li{font-size:var(--f-list);line-height:1.52;padding:11px 0;grid-template-columns:104px 1fr;gap:18px}
.lab__note{font-size:var(--f-list);line-height:1.6}
.doors a span{font-size:var(--f-micro)}
.fine{font-size:var(--f-micro);line-height:1.6;letter-spacing:.14em;margin:20px 0 0}

/* ---------- micro roles get one 13px floor (RESPONSIVE-SPEC G8) ---------- */
.chip,.doors a,.doors a b,.doors a span,.menu__foot,.menu__row b,.menuClose,.menuClose__lbl,
.lab__tag,.lab__illus,.sound,.sound__lbl,.play,.play__lbl,.learn,.lab__count span,.lab__total,
.nav,.nav--lab,.pill,.explore,.fine,.laps li b,.bar__back,.loader__cell b,.loader__cell span,.loader__cap{
  font-size:var(--f-micro);letter-spacing:var(--f-micro-tr);
}
.cta{font-size:var(--f-micro);letter-spacing:.2em;padding:18px 30px}
.pill{padding:20px 32px}
.doors a{letter-spacing:.22em;padding:11px 0}
.skip{font-size:14px}
.skip:focus{font:600 14px/1.2 var(--mono);letter-spacing:.22em}   /* V14 declared 11px here */

/* ---------- preloader holds the same floor ---------- */
.loader__lock,.loader__track,.loader__row{width:min(560px,88vw)}
.loader__cell{padding:14px 15px;gap:6px}
.loader__brand{font-size:calc(var(--f-brand) * .95)}
.loader__pct{font-size:24px}
.loader__cap{letter-spacing:.28em}

/* ---------- G10: chapter copy flows; it does not sit in pinned vh bands ---- */
.ch{display:grid;grid-template-rows:auto 1fr auto;align-content:space-between;row-gap:18px;
    padding:12vh var(--pad) 26vh}
.ch__body,.ch__copy,.ch__foot{position:relative;z-index:6;top:auto;right:auto;bottom:auto;left:auto;
    width:auto;max-width:none}   /* z-index 6: app.css authored the copy::before scrim at -1 inside
                                    a z-index 6 context; without it the scrim lands behind the
                                    photo and the copy loses all legibility */
.ch__body{grid-row:1}
.ch__copy{grid-row:2;align-self:center;max-width:none}
.ch__foot{grid-row:3}

/* ---------- legibility layer for the larger type. V14's scrim was sized for
     14px copy over daylight photography; at 17-23px the copy reaches further
     into the bright plate. A soft frosted panel behind every text block keeps
     the photo visible and the type on the right side of contrast. Clef scored
     the plain question at 0.07-0.49 on contrast alone before this block. ----- */
.ch__body::before,.ch__copy::before,.ch__foot::before,.lab__copy::before,.lab__foot::before,.chrome::before{
    content:"";position:absolute;z-index:-1;inset:-3vh -4vw -4vh -3vw;pointer-events:none;
    background:radial-gradient(closest-side,rgba(5,8,17,.92),rgba(5,8,17,.72) 72%,rgba(5,8,17,0) 100%);
    -webkit-mask-image:radial-gradient(closest-side,#000 58%,transparent 100%);
    mask-image:radial-gradient(closest-side,#000 58%,transparent 100%);
    -webkit-backdrop-filter:blur(16px) brightness(.78) saturate(.9);
    backdrop-filter:blur(16px) brightness(.78) saturate(.9)}
.chrome::before{inset:-14px -18px}
.lab__foot::before{inset:-16px -22px}
.ch__foot::before{inset:-14px -16px}   /* the doors row is the last sub-4.5 cluster on home */
/* the fixed top bar carries the same panel: the wordmark, the SOUND label and
   the chapter eyebrow sit on the brightest part of the plate (V14's original
   top gradient is a white wash, which is the wrong polarity for white text) */
.bar::before{content:"";position:absolute;z-index:-1;inset:-10px -16px;pointer-events:none;
    background:linear-gradient(90deg,rgba(5,8,17,.8),rgba(5,8,17,.55) 52%,rgba(5,8,17,.78));
    -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent);
    -webkit-backdrop-filter:blur(12px) brightness(.8);backdrop-filter:blur(12px) brightness(.8)}
.lab::after{background:linear-gradient(180deg,rgba(5,8,17,.52) 0%,rgba(5,8,17,.4) 45%,rgba(5,8,17,.7) 100%)}

/* ---------- G3/G4/G5: the menu row becomes a swipe track, the foot wraps ------ */
.menu{padding:15vh 0 0;justify-content:space-between}
.menu__row{white-space:normal;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    touch-action:pan-x;scroll-snap-type:x proximity;scrollbar-width:none;
    gap:clamp(26px,3.6vw,64px);padding:0 var(--pad) 18px}
.menu__row::-webkit-scrollbar{display:none}
.menu__row li{flex:0 0 auto;scroll-snap-align:start}
.menu__row span{font-size:var(--f-menu);line-height:1;white-space:nowrap}
.menu::after{content:"";position:absolute;z-index:2;right:0;top:0;bottom:0;
    width:clamp(28px,6vw,90px);pointer-events:none;
    background:linear-gradient(90deg,rgba(10,20,38,0),rgba(10,20,38,.9))}
.menu__foot{position:relative;left:auto;right:auto;bottom:auto;display:flex;flex-wrap:wrap;
    gap:6px 16px;line-height:1.8;white-space:normal;overflow:visible;text-overflow:clip;
    padding:0 var(--pad) calc(24px + env(safe-area-inset-bottom))}

/* ---------- G6: the chrome becomes a grid, so the centred pill cannot land
     on PREV / NEXT / SCROLL TO EXPLORE ---------- */
.chrome{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:12px;row-gap:10px;
    left:var(--pad);right:var(--pad);bottom:calc(3.2vh + env(safe-area-inset-bottom))}
.nav--prev{grid-area:1/1/2/2;justify-self:start}
.pill{grid-area:1/2/2/3;position:static;left:auto;top:auto;transform:none;justify-self:center}
.nav--next{grid-area:1/3/2/4;justify-self:end}
.explore{grid-area:2/1/3/4;justify-self:center}
.chip{position:static;left:auto;grid-area:3/1/4/4;justify-self:center}
.pill:hover{transform:scale(1.04);letter-spacing:.3em}

/* ---------- G7: the lab lays out in reading order instead of four absolute
     layers that collide once the type grows ---------- */
.lab{display:flex;flex-direction:column;justify-content:flex-end;row-gap:14px;
    padding:10vh var(--pad) calc(3.6vh + env(safe-area-inset-bottom))}
.lab__copy{position:relative;z-index:3;top:auto;left:auto;width:min(560px,46vw)}
.lab__copy::before{inset:-4vh -4vw -5vh -3vw}
.lab__steps{position:relative;top:auto;right:auto;bottom:auto;flex-direction:row;align-items:center;
    align-self:flex-end;gap:18px}   /* bottom:auto: app.css's 900px block sets bottom:22vh on it */
.lab__rail{width:180px;height:1px}
.lab__rail i{width:33%;height:1px}
.lab__foot{position:relative;z-index:3;left:auto;right:auto;bottom:auto;transform:none;width:auto;
    align-self:center;grid-template-columns:minmax(0,1fr);gap:8px 0;text-align:center;
    justify-items:center}   /* z-index 3: keeps the ::before scrim above the WebGL canvas */
.lab__note{max-width:62ch}   /* the measure cap rides on the note's own font-size */
.nav--lab{position:relative;right:auto;bottom:auto;align-self:flex-end;margin-top:2px}
@supports (height:100dvh){ .lab{height:100dvh} }

/* ---------- G1: the tier ladder that replaces V14's single 900px block ------- */
@media (max-width:1280px){ :root{--pad:clamp(20px,6vw,84px)} }

/* Desktop plates carry V14's own gradient; the blur is only needed where the
   phone crop puts copy on raw daylight. The radial still does the work. */
@media (min-width:1025px){
  .ch__body::before,.ch__copy::before,.ch__foot::before,.chrome::before,.bar::before{
    -webkit-backdrop-filter:none;backdrop-filter:none}
}

@media (max-width:1024px){
  :root{--pad:clamp(20px,6.4vw,56px)}
  .ch{padding:11vh var(--pad) 24vh}
  .lab__copy{width:min(560px,84vw)}
}

@media (max-width:770px){
  :root{--f-micro:13px;--pad:clamp(18px,5.4vw,40px)}
  .ch{padding:8vh var(--pad) 21vh}
  .menu{padding-top:12vh}
  .menu__row{transform:none;gap:26px}
  .menu.open .menu__row{transform:none}
  .menu__row a{opacity:1}
  .menu__row a:hover span{transform:none}
  .doors{flex-direction:column;gap:8px}
  .lab{padding:8vh var(--pad) calc(2.6vh + env(safe-area-inset-bottom));overflow:auto}
  .lab__copy,.lab__steps,.nav--lab{align-self:start;width:auto;max-width:none}
  .lab__foot{align-self:start;grid-template-columns:1fr;text-align:left;justify-items:start}
  .bar{flex-wrap:wrap;gap:10px 18px;padding:20px var(--pad)}
  .bar__back{position:static;transform:none;order:3;flex-basis:100%;text-align:center}
  /* narrow plates: the daylight photography is brightest exactly where the copy
     and the micro chrome sit, so the plate itself reads darker in this tier */
  .ch__media::after{background:
      linear-gradient(180deg,rgba(5,8,17,.44) 0%,rgba(5,8,17,.14) 24%,rgba(5,8,17,.52) 52%,rgba(5,8,17,.82) 80%,rgba(5,8,17,.95) 100%),
      linear-gradient(90deg,rgba(5,8,17,.64) 0%,rgba(5,8,17,.32) 34%,rgba(5,8,17,0) 62%)}
}

/* ---------- G9: height and orientation are real axes ---------- */
@media (max-height:760px){
  .ch{padding:8vh var(--pad) 20vh}
  .lab{padding:6vh var(--pad) calc(2.6vh + env(safe-area-inset-bottom))}
  .lede,.lede--dim{line-height:1.55}
  .ttl{letter-spacing:.01em}
  .lab__ghost{display:none}
}
@media (orientation:landscape) and (max-height:460px){
  .ch{padding:7vh var(--pad) 18vh}
  .lede--dim,.menu__foot{display:none}
  .lab__rail{width:110px}
}

/* ---------- G12: the track survives iOS browser chrome ---------- */
@supports (height:100dvh){ html,body{height:100dvh} }

@media (prefers-reduced-motion: reduce){
  .menu__row,.menu.open .menu__row{transform:none}
}