/* ═══════════════════════════════════════════════════════════
   EDITION 04 — "WORLDS" · core: tokens, chrome, text systems,
   cursor, buttons, read mode. Per-world palettes via [data-world].
   ═══════════════════════════════════════════════════════════ */

:root{
  --ink:#EDF2F4;
  --ink-dim:#8A96A0;
  --base:#07090C;
  --base-2:#0D1117;
  --hair:rgba(237,242,244,.12);

  /* world accents (resolved per page/section via data-world) */
  --w-science:#0FDFD0;
  --w-career:#4FB8FF;
  --w-coaching:#FF4D6D;
  --w-humanity:#E8B44A;
  --accent:var(--w-science);

  --serif:"Instrument Serif",Georgia,serif;
  --sans:"Manrope",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --g:clamp(1.25rem,5vw,5rem);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-slam:cubic-bezier(.34,1.56,.64,1);
}

[data-world="science"]{--accent:var(--w-science)}
[data-world="career"]{--accent:var(--w-career)}
[data-world="coaching"]{--accent:var(--w-coaching)}
[data-world="humanity"]{--accent:var(--w-humanity)}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

body{
  background:var(--base);color:var(--ink);
  font-family:var(--sans);font-weight:300;
  font-size:clamp(.95rem,.9rem + .2vw,1.05rem);line-height:1.65;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent);color:var(--base)}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.wrap{max-width:1500px;margin-inline:auto;padding-inline:var(--g)}
.serif{font-family:var(--serif);font-weight:400;line-height:.98;letter-spacing:-.02em}
.serif em{font-style:italic;color:var(--accent)}
.eyebrow{font-family:var(--mono);font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--accent);display:inline-flex;align-items:center;gap:.7rem}
.eyebrow::before{content:"";width:1.5rem;height:1px;background:currentColor;opacity:.6}

/* ═══ TOP BAR ═══ */
.bar{position:fixed;inset:0 0 auto 0;z-index:100;display:flex;align-items:center;
  justify-content:space-between;padding:1rem clamp(1.25rem,3vw,2.5rem);
  transition:background .5s var(--ease)}
/* ══ THE GLASS TAB BAR ══ (user, 2026-08-06)

   Always present rather than only once scrolled, because its job is
   navigation and a navigation bar that appears only after you have
   scrolled is not one. Deliberately faint: a 2px blur and roughly a
   quarter opacity, so it reads as glass over the 3D stages instead of a
   panel sitting on top of them. -webkit- prefix included — Safari still
   needs it, and without it iOS falls back to the flat tint alone. */
.bar{background:rgba(7,9,12,.26);
  -webkit-backdrop-filter:blur(2px) saturate(130%);
  backdrop-filter:blur(2px) saturate(130%);
  border-bottom:1px solid rgba(255,255,255,.055)}
.bar.scrolled{background:linear-gradient(rgba(7,9,12,.82),rgba(7,9,12,.34));
  -webkit-backdrop-filter:blur(5px) saturate(130%);
  backdrop-filter:blur(5px) saturate(130%)}
.bar__mono{font-family:var(--serif);font-size:1.35rem;letter-spacing:.02em}
.bar__mono em{font-style:italic;color:var(--accent)}
.bar__links{display:flex;gap:1.6rem;align-items:center}
.bar__links a{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-dim);position:relative;padding:.3rem 0;
  transition:color .35s var(--ease)}
.bar__links a:hover,.bar__links a.on{color:var(--ink)}
.bar__links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.bar__links a:hover::after,.bar__links a.on::after{transform:scaleX(1);transform-origin:left}
/* ══ AND THE TABS ARE VISIBLE ON PHONES ══ (user, 2026-08-06)

   These were display:none below 900px, so on a phone the only way between
   the four worlds was the menu button — the user asked for the tab names
   up top precisely because that was hard to navigate.

   In landscape there are 844 logical pixels to work with, which fits the
   monogram, four labels and the controls if the type tightens and the
   least useful control on a phone (read mode, a desktop reading aid)
   stands down. */
@media(max-width:900px){
  .bar{padding:.5rem max(env(safe-area-inset-left),.75rem) .5rem max(env(safe-area-inset-right),.75rem)}
  .bar__mono{font-size:1.05rem}
  .bar__links{display:flex;gap:clamp(.6rem,2.2vw,1.1rem)}
  .bar__links a{font-size:.5rem;letter-spacing:.1em;padding:.25rem 0}
  .bar__ctl{gap:.45rem}
  .bar__ctl .icobtn{font-size:.5rem;padding:.35rem .5rem}
  #readBtn{display:none}
}
/* portrait phones genuinely have no room for four labels beside the
   controls — but portrait is gated anyway, so this only ever shows in the
   instant before the gate paints. */
@media(orientation:portrait) and (max-width:560px){.bar__links{display:none}}
.bar__ctl{display:flex;gap:.9rem;align-items:center}
.icobtn{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-dim);border:1px solid var(--hair);border-radius:100px;padding:.45rem .85rem;
  transition:all .35s var(--ease)}
.icobtn:hover{color:var(--ink);border-color:var(--accent)}
.icobtn.on{color:var(--base);background:var(--accent);border-color:var(--accent)}

/* ═══ FULLSCREEN MENU ═══ */
#menu{position:fixed;inset:0;z-index:120;background:rgba(5,7,9,.96);backdrop-filter:blur(14px);
  display:grid;place-items:center;opacity:0;visibility:hidden;transition:all .5s var(--ease)}
#menu.open{opacity:1;visibility:visible}
.menu__grid{display:grid;gap:1rem;grid-template-columns:1fr;width:min(92vw,64rem)}
@media(min-width:760px){.menu__grid{grid-template-columns:repeat(4,1fr)}}
.mcard{position:relative;aspect-ratio:3/4;border-radius:10px;overflow:hidden;
  border:1px solid var(--hair);display:flex;align-items:flex-end;
  transform:translateY(24px);opacity:0;transition:all .6s var(--ease)}
#menu.open .mcard{transform:none;opacity:1}
#menu.open .mcard:nth-child(2){transition-delay:.07s}
#menu.open .mcard:nth-child(3){transition-delay:.14s}
#menu.open .mcard:nth-child(4){transition-delay:.21s}
.mcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.8) brightness(.7);transition:all .6s var(--ease)}
.mcard:hover img{filter:saturate(1) brightness(.9);transform:scale(1.05)}
.mcard__t{position:relative;z-index:1;padding:1.2rem;width:100%;
  background:linear-gradient(transparent,rgba(5,7,9,.9))}
.mcard__t b{font-family:var(--serif);font-weight:400;font-size:1.4rem;display:block}
.mcard__t span{font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent)}
.menu__close{position:absolute;top:1.3rem;right:1.6rem;font-family:var(--mono);
  font-size:.65rem;letter-spacing:.2em;color:var(--ink-dim)}
.menu__close:hover{color:var(--ink)}

/* ═══ WATER-DROP CURSOR ═══ */
.drop{position:fixed;z-index:150;top:0;left:0;pointer-events:none;display:none;
  width:14px;height:14px;margin:-7px 0 0 -7px}
.drop__dot{position:absolute;inset:0;border-radius:50%;background:var(--accent);
  box-shadow:0 0 12px var(--accent);transition:background .4s,box-shadow .4s}
.drop__ring{position:absolute;inset:-12px;border-radius:50%;border:1px solid var(--accent);
  opacity:0;transform:scale(.6);transition:all .3s var(--ease)}
.drop__lbl{position:absolute;top:26px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:.55rem;letter-spacing:.18em;color:var(--accent);
  white-space:nowrap;opacity:0;transition:opacity .3s}
.drop.big .drop__ring{opacity:.8;transform:scale(1)}
.drop.big .drop__lbl{opacity:1}
@media(hover:hover) and (pointer:fine){
  body.hascursor{cursor:none}
  body.hascursor a,body.hascursor button,body.hascursor [data-drag]{cursor:none}
  .drop{display:block}
}

/* ═══ BUTTONS — magnetic + liquid fill ═══ */
.btn{position:relative;overflow:hidden;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  padding:.95rem 1.8rem;border-radius:100px;border:1px solid var(--accent);
  display:inline-flex;align-items:center;gap:.6rem;color:var(--ink);
  transition:color .45s var(--ease);will-change:transform}
.btn i{position:absolute;inset:auto 0 0 0;height:0;background:var(--accent);
  border-radius:inherit;transition:height .45s var(--ease);z-index:0}
.btn span{position:relative;z-index:1}
.btn:hover{color:var(--base)}
.btn:hover i{height:100%}
.btn--fill{background:var(--accent);color:var(--base)}
.btn--fill i{background:var(--base)}
.btn--fill:hover{color:var(--ink)}

/* ═══ TEXT SYSTEMS ═══ */
/* tide reveal — luminous wave sweeps through rising letters */
.tide .w{display:inline-block;overflow:hidden;vertical-align:bottom}
.tide .w>i{display:inline-block;font-style:inherit;transform:translateY(110%);
  will-change:transform}
.tide.go .w>i{animation:tideup .9s var(--ease) forwards}
@keyframes tideup{to{transform:translateY(0)}}
.tide.go{background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.85) 50%,transparent 70%),
  linear-gradient(currentColor,currentColor);
  background-size:250% 100%,100% 100%;background-position:120% 0,0 0;
  -webkit-background-clip:text;background-clip:text;
  animation:tidesweep 1.2s .15s var(--ease) both}
@keyframes tidesweep{from{background-position:120% 0,0 0}to{background-position:-120% 0,0 0}}

/* soft stagger rise for body */
.rise{opacity:0;transform:translateY(20px)}
.rise.in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}

/* breath on glass — humanity */
.breath{opacity:0;filter:blur(14px);transform:translateY(10px) scale(1.02);
  will-change:opacity,filter,transform}
.breath.on{opacity:1;filter:blur(0);transform:none;
  transition:opacity 1.1s var(--ease),filter 1.1s var(--ease),transform 1.1s var(--ease)}
.breath.off{opacity:0;filter:blur(10px);transform:translateY(-16px) scale(.99);
  transition:opacity .7s var(--ease),filter .7s var(--ease),transform .7s var(--ease)}

/* impact stamp — coaching */
.stamp{opacity:0;transform:scale(1.6);will-change:transform,opacity}
.stamp.on{opacity:1;transform:scale(1);
  transition:transform .28s var(--ease-slam),opacity .18s linear}
@keyframes shake{0%,100%{transform:translate(0,0)}25%{transform:translate(3px,-2px)}
  50%{transform:translate(-3px,2px)}75%{transform:translate(2px,1px)}}
.shake{animation:shake .18s linear 1}

/* liquid-ink text inside glass panels */
.ink{opacity:0;filter:blur(8px);letter-spacing:.06em}
.ink.on{opacity:1;filter:blur(0);letter-spacing:normal;
  transition:opacity .9s var(--ease),filter .9s var(--ease),letter-spacing .9s var(--ease)}

/* frosted glass panel */
.glass{background:rgba(13,17,23,.55);backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid rgba(255,255,255,.14);border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.35)}

/* ═══ CARD HOVER (tilt + parallax + lift + caption) — JS drives tilt ═══ */
.tcard{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--hair);
  transform-style:preserve-3d;will-change:transform;
  transition:box-shadow .5s var(--ease)}
.tcard img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);will-change:transform}
.tcard:hover{box-shadow:0 22px 50px rgba(0,0,0,.5),0 0 40px color-mix(in srgb,var(--accent) 25%,transparent)}
.tcard__cap{position:absolute;left:0;right:0;bottom:0;padding:.9rem 1.1rem;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  background:linear-gradient(transparent,rgba(5,7,9,.9));color:var(--ink);
  transform:translateY(100%);transition:transform .45s var(--ease)}
.tcard:hover .tcard__cap{transform:none}

/* ═══ ROTATE NOTICE (mobile portrait) ═══ */
#rotate{position:fixed;inset:0;z-index:200;background:var(--base);display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:1.2rem;text-align:center;
  padding:2rem}
#rotate .ph{width:46px;height:76px;border:2px solid var(--accent);border-radius:10px;
  animation:rot 2.2s var(--ease) infinite}
@keyframes rot{0%,25%{transform:rotate(0)}55%,80%{transform:rotate(90deg)}100%{transform:rotate(90deg)}}
#rotate p{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-dim);max-width:26ch;line-height:2}
#rotate button{margin-top:.5rem}
/* ══ LANDSCAPE ONLY ON PHONES ══ (user, 2026-08-06)

   The site is built around full-bleed 3D stages and pinned scroll
   sections; in portrait there is not enough width for any of it to read.
   So portrait is not a degraded layout, it is a gate: the notice fills the
   screen and the page underneath does not scroll behind it.

   `100dvh` rather than `100vh` for the same reason as everywhere else —
   on iOS Safari `vh` is the viewport WITHOUT the browser chrome, so a
   full-screen overlay sized in vh hangs below the fold and the visitor can
   scroll the notice itself. */
@media(orientation:portrait) and (max-width:900px){
  body.rotate-gate #rotate{display:flex;height:100vh;height:100dvh}
  /* nothing moves behind the gate */
  body.rotate-gate{overflow:hidden;position:fixed;inset:0;width:100%}
}

/* ══ THE BROWSER CHROME MUST NOT EAT THE PAGE ══ (user, 2026-08-06)

   Two separate problems on a phone, and they look the same to a visitor:

   1. iOS Safari's URL bar slides away as you scroll and the viewport grows.
      Anything sized in `vh` was already using the TALLER measurement, so
      full-height sections overhang, and every bar transition re-lays them
      out mid-scroll. Fixed by the dvh fallbacks throughout the stylesheets.

   2. Rubber-band overscroll at the top and bottom drags the whole document
      under the chrome and back. `overscroll-behavior:none` stops the
      bounce propagating to the page. */
html{overscroll-behavior:none}
body{overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent}

/* ══ THE NOTCH AND THE HOME INDICATOR ══ viewport-fit=cover lets the page
   paint edge to edge, which is what makes landscape feel full-screen; the
   insets then keep actual CONTENT out from under the hardware. In
   landscape the notch is on a SIDE, so the horizontal insets are the ones
   that matter. */
@media(max-width:1100px){
  .bar,.wcompass,#menu,.hero-scroll-cue{
    padding-left:max(env(safe-area-inset-left), .9rem);
    padding-right:max(env(safe-area-inset-right), .9rem);
  }
  #rotate{padding-bottom:max(env(safe-area-inset-bottom), 2rem)}
}

/* ═══ READ MODE ═══ */
body.read .drop,body.read #menu,body.read .hero-scroll-cue{display:none!important}
body.read{cursor:auto!important}
body.read .vsec{height:auto!important;min-height:0!important}
body.read .vsec video{display:none!important}
body.read .vsec .poster{display:block!important;position:relative!important;
  width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
body.read .pin-space{height:auto!important}
body.read .overlaytext,body.read .glasswrap{position:relative!important;opacity:1!important;
  transform:none!important;filter:none!important;inset:auto!important;margin:1.5rem 0}
body.read .breath,body.read .stamp,body.read .ink,body.read .rise,body.read .tide .w>i{
  opacity:1!important;transform:none!important;filter:none!important;animation:none!important}
@media print{
  .bar,.drop,#menu,#rotate,.hero-scroll-cue{display:none!important}
  body{background:#fff;color:#111}
}

/* reduced motion → auto read-ish */
@media(prefers-reduced-motion:reduce){
  .tide.go .w>i{animation:none;transform:none}
  .tide.go{animation:none}
  .rise{opacity:1;transform:none}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

footer{border-top:1px solid var(--hair);padding-block:2.3rem;position:relative;z-index:2;
  background:var(--base)}
.foot{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-dim)}

/* ══════════ world compass — prev/next world from any page ══════════ */
.wcompass{position:fixed;left:0;right:0;bottom:1.1rem;z-index:60;display:flex;
  justify-content:space-between;padding-inline:1.2rem;pointer-events:none}
.wcompass__b{pointer-events:auto;display:flex;align-items:center;gap:.55rem;
  padding:.55rem .95rem;border:1px solid var(--hair);border-radius:99px;
  background:color-mix(in srgb,var(--bg,#05090D) 78%,transparent);
  backdrop-filter:blur(10px);color:var(--ink-dim);text-decoration:none;
  font-family:var(--mono);font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;
  transition:all .35s var(--ease)}
.wcompass__b i{font-style:normal;font-size:.9rem;line-height:1;color:var(--ink)}
.wcompass__b:hover{color:var(--ink);border-color:color-mix(in srgb,var(--ink) 35%,transparent);
  transform:translateY(-2px)}
@media(max-width:700px){.wcompass__b span{display:none}.wcompass__b{padding:.55rem .7rem}}
body.read .wcompass{position:static;margin:2rem auto;justify-content:center;gap:1rem}
@media print{.wcompass{display:none!important}}

/* ══════════ PRELOADER — the gate ══════════ */
html.loading, html.loading body{overflow:hidden!important}
#preload{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:radial-gradient(70% 60% at 50% 45%,#08131a,#04080c 70%);
  transition:opacity .8s var(--ease),visibility .8s}
#preload.gone{opacity:0;visibility:hidden;pointer-events:none}
.pl__inner{display:flex;flex-direction:column;align-items:center;gap:1.4rem;width:min(24rem,80vw)}
.pl__drop{width:74px;height:auto;overflow:visible;
  filter:drop-shadow(0 0 26px color-mix(in srgb,#0FDFD0 40%,transparent))}
.pl__drop-o{fill:none;stroke:color-mix(in srgb,#0FDFD0 45%,transparent);stroke-width:2}
.pl__fill{transition:y .35s cubic-bezier(.2,.7,.3,1)}
.pl__pct{font-family:var(--serif,Georgia,serif);display:flex;align-items:baseline;gap:.15rem;
  color:#EDE9F5;line-height:1}
.pl__pct b{font-weight:400;font-size:2.9rem;font-variant-numeric:tabular-nums}
.pl__pct i{font-style:normal;font-size:1rem;color:#0FDFD0}
.pl__bar{width:100%;height:2px;background:rgba(237,233,245,.12);border-radius:2px;overflow:hidden}
.pl__bar span{display:block;height:100%;width:0%;background:linear-gradient(90deg,#0FDFD0,#7ff3e8);
  box-shadow:0 0 12px #0FDFD0;transition:width .25s linear}
.pl__cap{font-family:var(--mono,monospace);font-size:.55rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-dim,#8A85A0);margin:0}
@media(prefers-reduced-motion:reduce){#preload{display:none}}