/* ==========================================================================
   BRAIN.CSS — Hyperion · fractal brain experience
   --------------------------------------------------------------------------
   1. Tokens (colours, type)      5. Tour stage: captions, labels, dive panel
   2. Base                        6. Closing section + footer
   3. Preloader / header / menu   7. States: no-JS, no-WebGL, motion off
   4. Buttons                     8. Responsive (desktop layer ≥ 900px)
   ========================================================================== */

/* ================= 1 · TOKENS ================= */
:root{
  --bg:#03060f;              /* deep space navy-black                       */
  --bg-2:#071022;
  --glow:#3fb8ff;            /* electric blue (matches js/regions.js)       */
  --glow-2:#9ee2ff;          /* lighter blue for text accents               */
  --glow-deep:#1c5fa8;       /* text-safe blue on light backgrounds         */
  --hot:#ffcf8a;             /* the colour a region lights up in (js/regions.js colors.hot overrides) */
  --txt:#e9f2ff;             /* text on dark                                */
  --soft:#93a8c7;            /* secondary on dark                           */
  --line:rgba(159,203,255,.16);
  --paper:#f4f9ff;           /* the brightness / closing section            */
  --ink:#0a1220;             /* text on light                               */
  --soft-l:#4f6180;
  --line-l:#d3e0f0;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --tap:44px; --pad:clamp(1.05rem,4.5vw,2.2rem); --r:18px; --pill:999px; --hdr:64px;
  --max:1240px;
}

/* ================= 2 · BASE ================= */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--txt);font-family:var(--sans);font-size:1.02rem;line-height:1.55;
  overflow-x:hidden}
h1,h2,h3{margin:0 0 .45em;font-family:var(--serif);font-weight:500;letter-spacing:-.01em;line-height:1.05}
p{margin:0 0 1em} a{color:inherit} svg{display:block} button{font:inherit}
::selection{background:var(--glow);color:var(--bg)}
:focus-visible{outline:3px solid var(--glow);outline-offset:3px}
.light :focus-visible{outline-color:var(--ink)}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.eyebrow{display:inline-block;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.2em;
  color:var(--glow-2);margin-bottom:.8rem;font-family:var(--sans)}
.light .eyebrow{color:var(--glow-deep)}
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--glow);color:var(--bg);padding:.7rem 1.1rem;font-weight:700}
.skip:focus{left:0}
.nojs{background:var(--glow);color:var(--bg);font-size:.85rem;font-weight:700;text-align:center;padding:.6rem var(--pad)}
.js .nojs{display:none}
.off,.off *,.off *::before,.off *::after{animation-play-state:paused!important}

/* ================= 3 · PRELOADER / HEADER / MENU ================= */
.loader{position:fixed;inset:0;z-index:200;background:var(--bg);display:none;flex-direction:column;
  justify-content:center;padding:0 var(--pad);transition:opacity .7s ease,visibility .7s}
.js .loader{display:flex}
.loader.out{opacity:0;visibility:hidden}
.loader .lmark{width:92px;height:47px;margin-bottom:1.2rem;color:#fff;filter:drop-shadow(0 0 14px rgba(63,184,255,.5))}   /* the logo mark (see index.html) */
.loader .lmark .rays{animation:rays 2.6s ease-in-out infinite}
@keyframes rays{0%,100%{opacity:.45}50%{opacity:1}}
.lbar{height:2px;background:var(--line);border-radius:2px;overflow:hidden;max-width:var(--max);width:100%}
.lbar i{display:block;height:100%;width:0;background:var(--glow);box-shadow:0 0 12px var(--glow)}
.lpct{font-family:var(--serif);font-size:clamp(2rem,7vw,3.2rem);color:#fff;margin-top:.6rem;font-variant-numeric:tabular-nums}
.lhint{color:var(--soft);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;margin-top:.5rem}
html.reduce .loader{display:none!important}

.hdr{position:fixed;top:0;left:0;right:0;z-index:90;display:flex;align-items:center;justify-content:space-between;
  padding:.75rem max(var(--pad),env(safe-area-inset-right)) .75rem max(var(--pad),env(safe-area-inset-left));
  pointer-events:none;transition:transform .3s}
.hdr.hide{transform:translateY(-115%)}
.brand{pointer-events:auto;display:flex;align-items:center;gap:.6rem;text-decoration:none;color:#fff;
  font-family:var(--serif);font-size:1.05rem;letter-spacing:.02em}
.brand .logo{height:30px;width:auto;flex:none;filter:drop-shadow(0 0 10px rgba(63,184,255,.45));transition:color .35s}   /* the logo: mark + HYPERION (assets/logo.svg, inlined in index.html) */
.brand .word{opacity:0;transform:translateX(-30px);transition:opacity .4s,transform .4s}   /* the name fades in once the page has scrolled (the hero has the headline) */
.hdr.scrolled .brand .word{opacity:1;transform:none}
.hdr[data-theme="light"] .brand{color:#000}   /* over The Activation the floating logo is black */
.hdr[data-theme="light"] .brand .logo{filter:none}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}   /* screen readers only */
.hright{display:flex;align-items:center;gap:.6rem;pointer-events:auto}
.hcta{display:none;align-items:center;min-height:var(--tap);padding:.35rem 1.05rem;border:1px solid rgba(255,207,138,.55);border-radius:14px;
  color:#fff;text-decoration:none;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  background:rgba(7,16,34,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .35s,color .35s,border-color .35s}
.hdr[data-theme="light"] .hcta{color:var(--ink);border-color:var(--ink);background:transparent}
.pill{pointer-events:auto;display:flex;align-items:center;gap:.7rem;min-height:var(--tap);padding:.35rem .55rem .35rem 1.05rem;
  border:1px solid rgba(159,203,255,.35);border-radius:14px;cursor:pointer;font-weight:700;font-size:.9rem;
  background:rgba(7,16,34,.72);color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 6px 24px rgba(0,0,0,.35),0 0 0 1px rgba(63,184,255,.08) inset;transition:background .35s,color .35s,border-color .35s}
.hdr[data-theme="light"] .pill{background:var(--ink);color:#fff;border-color:transparent}
.pill .lbl{display:inline-block;overflow:hidden;white-space:nowrap;max-width:40vw;text-overflow:ellipsis}
.pill .lbl.flip{animation:flipIn .38s cubic-bezier(.2,.8,.2,1)}
@keyframes flipIn{from{transform:translateY(-115%);opacity:0}to{transform:none;opacity:1}}
.pill .ic{display:flex;flex-direction:column;gap:4px;width:30px;padding:9px 6px}
.pill .ic span{height:2px;border-radius:2px;background:currentColor;transition:transform .25s,opacity .2s}
.pill[aria-expanded="true"] .ic span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.pill[aria-expanded="true"] .ic span:nth-child(2){opacity:0}
.pill[aria-expanded="true"] .ic span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
html:not(.js) .pill{display:none}
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:95;pointer-events:none}
.progress i{display:block;height:100%;width:100%;background:var(--glow);transform:scaleX(0);transform-origin:0 50%;
  box-shadow:0 0 10px var(--glow)}

.backdrop{position:fixed;inset:0;z-index:110;background:rgba(3,6,15,.6);opacity:0;pointer-events:none;transition:opacity .3s;touch-action:none}
.backdrop.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;bottom:0;right:0;z-index:120;width:min(88vw,400px);background:var(--bg-2);color:var(--txt);
  transform:translateX(103%);visibility:hidden;transition:transform .36s cubic-bezier(.7,0,.24,1),visibility 0s .36s;
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;border-left:1px solid var(--line);
  padding:1.15rem max(1.35rem,env(safe-area-inset-right)) calc(1.5rem + env(safe-area-inset-bottom)) 1.35rem}
.drawer.open{transform:none;visibility:visible;transition:transform .36s cubic-bezier(.7,0,.24,1),visibility 0s}
.drawer-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.drawer-top span{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--soft)}
.drawer-close{width:var(--tap);height:var(--tap);border:1px solid var(--line);border-radius:12px;background:none;color:#fff;font-size:1.3rem;cursor:pointer}
.drawer nav a{display:flex;align-items:center;justify-content:space-between;min-height:54px;font-family:var(--serif);
  font-size:1.45rem;color:#fff;text-decoration:none;border-bottom:1px solid var(--line)}
.drawer nav a small{font-family:var(--sans);font-size:.72rem;color:var(--soft);letter-spacing:.1em;text-transform:uppercase}
.drawer nav a.on{color:var(--glow-2)}
.drawer nav a.sub{min-height:44px;font-size:1.05rem;padding-left:1.4rem;color:var(--soft)}   /* a sub-section under its chapter (Grammar · Logic · Rhetoric under The Trivium) */
.drawer nav a.sub i{font-style:normal;margin-right:.55rem;opacity:.6}
.drawer nav a.sub small{font-size:.62rem}
.drawer .dfoot{margin-top:auto;padding-top:1.1rem;font-size:.78rem;color:var(--soft)}
.toggles{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
.mtoggle{min-height:var(--tap);padding:.3rem 1.1rem;border:1px solid var(--line);border-radius:var(--pill);
  background:none;color:var(--txt);font-weight:700;font-size:.88rem;cursor:pointer;align-self:flex-start}
.mtoggle[aria-pressed="true"]{border-color:rgba(159,203,255,.6)}

/* ================= 4 · BUTTONS ================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:var(--tap);padding:.55rem 1.4rem;
  background:var(--glow);color:var(--bg);border:0;border-radius:var(--pill);font-weight:700;text-decoration:none;cursor:pointer;
  box-shadow:0 0 24px rgba(63,184,255,.35);transition:transform .15s,box-shadow .2s}
.btn:active{transform:scale(.97)}
.btn-ghost{background:rgba(7,16,34,.55);color:#fff;border:1px solid rgba(159,203,255,.45);box-shadow:none;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.light .btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-text{background:none;border:0;color:var(--glow-2);font-weight:700;cursor:pointer;min-height:var(--tap);padding:.3rem .2rem;text-decoration:none;display:inline-flex;align-items:center;gap:.4rem}
@media(hover:hover){
  .btn:hover{box-shadow:0 0 34px rgba(63,184,255,.6)}
  .btn-text:hover{color:#fff}
  .drawer nav a:hover{color:var(--glow-2)}
}

/* ================= 5 · TOUR STAGE ================= */
.tour{position:relative;height:calc((var(--stops,9) + var(--epi,1)) * 100vh)}   /* the stops, plus the epilogue (--epi screens) in which The Activation phases in */
.tour .mark{position:absolute;left:0;width:1px;height:1px;pointer-events:none}   /* anchor targets for #region links */
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  background:radial-gradient(60% 55% at 50% 42%,rgba(63,184,255,.16),transparent 70%),
             radial-gradient(90% 70% at 50% 100%,rgba(28,95,168,.18),transparent 70%),var(--bg)}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.poster{position:absolute;inset:0;display:none;
  background:radial-gradient(28% 22% at 50% 40%,rgba(223,246,255,.9),rgba(63,184,255,.55) 40%,transparent 72%),
             radial-gradient(40% 34% at 50% 44%,rgba(63,184,255,.35),transparent 70%)}
.glow{position:absolute;left:50%;top:50%;width:120vmax;height:120vmax;margin:-60vmax 0 0 -60vmax;border-radius:50%;
  opacity:0;pointer-events:none;transform:scale(.25);will-change:transform,opacity;
  background:radial-gradient(circle,#fff 0%,rgba(244,249,255,.98) 14%,rgba(223,246,255,.85) 30%,rgba(63,184,255,.25) 52%,transparent 70%)}
.glow2{position:absolute;inset:0;opacity:0;pointer-events:none;background:var(--paper)}
/* the hero's photographs (index.html, .scenes): full-bleed above the brain, crossfading with a slow drift; js/brain.js
   fades the whole layer out over the first screen of scroll (.off once it is gone, so nothing is drawn for nothing) */
.scenes{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:var(--bg);will-change:opacity}
.scenes.off{visibility:hidden}
.scenes img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);
  transition:opacity 2.4s ease;animation:kb 22s ease-out forwards paused}
.scenes img.on{opacity:1;animation-play-state:running;will-change:transform}   /* only the photo on show gets its own layer (five full-screen layers would cost a phone real memory) */
.scenes img:nth-child(even){animation-name:kb2}
@keyframes kb{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.13) translate(-1.4%,-1%)}}
@keyframes kb2{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.13) translate(1.2%,-1.2%)}}
.scenes .veil{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(7,16,34,.52) 0%,rgba(7,16,34,.1) 24%,rgba(7,16,34,0) 42%,rgba(7,16,34,.32) 64%,rgba(3,6,15,.9) 100%),
  linear-gradient(90deg,rgba(7,16,34,.55) 0%,rgba(7,16,34,.2) 42%,rgba(7,16,34,0) 70%)}
.scenes .place{position:absolute;right:var(--pad);top:calc(var(--hdr) + .35rem);max-width:56vw;text-align:right;font-size:.64rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(233,242,255,.78);opacity:0;transition:opacity 1.4s ease;text-shadow:0 1px 8px rgba(3,6,15,.7)}
.scenes .place.in{opacity:1}
.scenes .place::before{content:"";display:inline-block;width:16px;height:1px;background:currentColor;vertical-align:middle;margin-right:.55rem;opacity:.8}
.scenes .dip{position:absolute;inset:0;background:var(--bg);opacity:0;will-change:opacity}   /* the dip to navy before the brain (opacity set by js/brain.js) */
html.reduce .scenes img{animation:none;transform:none;transition:none}
.cap.finale h2,.cap.finale .line,.cap.finale p,.cap.finale .eyebrow,.cap.finale .btn-text{transition:color 1.6s ease,text-shadow 1.6s ease}
.cap.finale.lit h2,.cap.finale.lit .line,.cap.finale.lit p{color:var(--ink);text-shadow:none}
.cap.finale.lit .eyebrow,.cap.finale.lit .btn-text{color:var(--glow-deep)}
.hud{position:absolute;inset:0;pointer-events:none}

/* captions (one per stop). They fade with the scroll itself — js/brain.js sets their opacity every frame —
   and nothing inside them scrolls: the page is the only thing that scrolls. A caption never catches the
   pointer (the wheel goes straight to the page); only its buttons and links do, and only while it is up. */
.caps{position:absolute;inset:0;padding:0 var(--pad) calc(1.6rem + env(safe-area-inset-bottom));transition:opacity .3s}   /* the whole stage, so the finale's caption can sit in its middle; the others are bottom-anchored */
.caps.away{opacity:0;pointer-events:none}
.cap{position:absolute;left:var(--pad);right:var(--pad);bottom:calc(1.6rem + env(safe-area-inset-bottom));max-width:520px;opacity:0;pointer-events:none;will-change:opacity,transform}
.cap .btn,.cap .btn-text,.cap a,.cap button{pointer-events:none}
.cap.on .btn,.cap.on .btn-text,.cap.on a,.cap.on button{pointer-events:auto}
.cap h2{font-size:clamp(1.8rem,7.4vw,2.9rem);color:#fff;text-shadow:0 0 30px rgba(63,184,255,.35)}
.cap p{color:var(--soft);font-size:.92rem;max-width:44ch}
.cap .eyebrow{max-width:none}
.cap .acts{display:flex;flex-wrap:wrap;gap:.6rem .9rem;align-items:center}
/* the hero (over the photographs): the copy sits low-left in the veil's shadow — eyebrow, the headline, one paragraph, the two actions */
.cap.intro{max-width:none}
.cap.intro .eyebrow{color:#d6e6ff;text-shadow:0 1px 10px rgba(3,6,15,.7)}
.cap.intro h1{font-size:clamp(2.7rem,11.5vw,5.2rem);color:#fff;margin:0 0 .3em;max-width:12ch;text-shadow:0 2px 24px rgba(3,6,15,.6),0 0 40px rgba(63,184,255,.22)}
.cap.intro p:not(.eyebrow){color:#e6eef8;font-size:.98rem;max-width:42ch;text-shadow:0 1px 10px rgba(3,6,15,.7)}
.cap.intro .acts{margin-top:.35rem}
.cap.intro .btn{box-shadow:0 8px 30px rgba(3,6,15,.45)}
.cap.intro .btn-text{color:#fff;text-shadow:0 1px 8px rgba(3,6,15,.7)}
.cap.intro .tag{font-family:var(--serif);font-size:clamp(1.1rem,4.4vw,1.5rem);color:var(--glow-2);margin-bottom:.9rem}
/* The Pineal Center: its caption sits in the middle of the screen and fades in from the centre, with the light */
.cap.finale{left:50%;right:auto;bottom:auto;top:50%;width:calc(100% - 2 * var(--pad));max-width:720px;text-align:center;transform:translate(-50%,-50%)}
.cap.finale h2,.cap.finale p{margin-inline:auto;text-wrap:balance}
.cap.finale .acts{justify-content:center}
.cap.finale h2 em{font-style:normal;color:var(--glow-2)}
.cap.finale .line{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,5.5vw,2rem);color:#fff;margin:.2rem 0 .6rem}
.cap.finale h2{font-style:italic;font-weight:400;font-size:clamp(1.9rem,7.6vw,3.4rem);max-width:18ch}
/* the gold italic line under a trivium stage */
.cap .tagline{font-family:var(--serif);font-style:italic;font-size:1.02rem;color:var(--hot);margin:-.3rem 0 1rem;max-width:44ch}
/* wide-shot chapters (interludes): bigger captions with stats / numbered items / a quote — sized to fit the
   screen (compact on phones, two columns of items) instead of scrolling inside themselves */
.cap.wide h2{font-size:clamp(1.9rem,7.4vw,3rem)}
/* PHONES AND NARROW WINDOWS: the brain sits behind the copy, so every chapter caption carries a soft navy scrim — a
   gradient that darkens the brain under the text and fades out above it (never a box). The copy reads; the brain still
   shows above the text. The hero (its own shadow on a photograph) and the finale (in the light) do without. */
@media (orientation:portrait),(max-width:1100px){
  .cap::before{content:"";position:absolute;left:calc(-1 * var(--pad));right:calc(-1 * var(--pad));top:-26vh;bottom:calc(-1.6rem - env(safe-area-inset-bottom));z-index:-1;pointer-events:none;
    background:linear-gradient(to bottom,rgba(3,6,15,0) 0%,rgba(3,6,15,.48) 32%,rgba(3,6,15,.84) 56%,rgba(3,6,15,.92) 100%)}
  .cap.intro::before,.cap.finale::before{display:none}
  .cap h2{text-shadow:0 2px 18px rgba(3,6,15,.85),0 0 30px rgba(63,184,255,.25)}
  .cap p{color:#b8c7de}
  .cap .item span{color:#a9b9d2}
}
/* a landscape window up to 1100px wide: the caption is a column on the left, so its scrim also fades out to the right
   (a mask), reaching a little past the column into the brain */
@media (orientation:landscape) and (min-width:900px) and (max-width:1100px){
  .cap::before{right:-22vw;-webkit-mask-image:linear-gradient(to right,#000 60%,transparent 100%);mask-image:linear-gradient(to right,#000 60%,transparent 100%)}
}
.cap .stats{display:flex;flex-wrap:wrap;gap:.8rem 1.2rem;margin:.2rem 0 .6rem;padding-top:.8rem;border-top:1px solid var(--line)}
.cap .stat{flex:1 1 auto;min-width:6.2rem}                               /* a stat grows to its number ("3 · 7 · 21" stays on one line); on a phone the row wraps 2 + 2 */
.cap .stat b{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(1.8rem,7vw,2.6rem);line-height:1;color:var(--hot);font-variant-numeric:tabular-nums;white-space:nowrap}
.cap .stat span{display:block;margin-top:.4rem;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.cap .items{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin:.1rem 0 .8rem}
.cap .item{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.6rem;align-items:baseline;
  padding:.6rem .7rem;border:1px solid var(--line);border-radius:12px;background:rgba(7,16,34,.5);color:inherit;text-decoration:none;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.cap .item i{grid-row:1/3;font-style:normal;font-family:var(--serif);font-size:.8rem;color:var(--hot);letter-spacing:.06em;align-self:start;padding-top:.15rem;min-width:1.4em}
.cap .item b{font-family:var(--serif);font-weight:500;font-size:1.02rem;color:#fff;line-height:1.15}
.cap .item span{font-size:.74rem;color:var(--soft);line-height:1.4;margin-top:.2rem}
.cap .items.linked{grid-template-columns:1fr}
.cap .items.linked .item{grid-template-rows:auto;align-items:center;padding:.55rem .85rem}
.cap .items.linked .item span{margin:0;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--glow-2)}
.cap .items.linked .item::after{content:"→";grid-column:3;color:var(--glow-2);font-weight:700}
.cap .items.expands .item::after{content:"+";font-size:1.1rem;line-height:1}          /* a card that expands in place */
.cap button.item{font:inherit;cursor:pointer;color:inherit;text-align:left;width:100%;background:rgba(7,16,34,.5)}
/* a chapter with many cards (six or more): tighter type and grid so it still fits the screen */
.cap.dense h2{font-size:clamp(1.6rem,6.4vw,2.6rem)}
.cap.dense .items{gap:.35rem;margin:.1rem 0 .55rem}
.cap.dense .item{padding:.42rem .55rem;column-gap:.5rem}
.cap.dense .item i{font-size:.72rem;min-width:1.3em}
.cap.dense .item b{font-size:.9rem}
.cap.dense .item span{display:none}                                     /* phones: number + name only; the line shows when the card expands */
.cap.dense .items.linked .item{grid-template-rows:auto}
.cap.dense p{font-size:.84rem}
.cap.dense .meta{margin:-.2rem 0 .7rem}
.cap button.item[aria-expanded="true"]{border-color:var(--glow)}
.cap .items.linked .item{grid-template-columns:auto 1fr auto}
.cap .items.linked .item b{grid-column:2}.cap .items.linked .item span{grid-column:2}
.cap .meta{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);margin:-.4rem 0 1rem;max-width:none}   /* one line ("Altitude · Silence · Sky · No signal") */
.cap .quote{margin:0 0 1rem;padding:.9rem 1rem;border-left:2px solid var(--hot);background:rgba(7,16,34,.5);border-radius:0 12px 12px 0;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.cap .quote small{display:block;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--hot);margin-bottom:.4rem}
.cap .quote p{font-family:var(--serif);font-style:italic;font-size:1.08rem;color:#fff;margin:0;max-width:40ch}
@media(hover:hover){.cap .items.linked .item:hover{border-color:rgba(159,203,255,.6);background:rgba(7,16,34,.75)}}
.scrollcue{position:absolute;bottom:calc(.9rem + env(safe-area-inset-bottom));right:var(--pad);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--soft);animation:cue 2.2s ease-in-out infinite;transition:opacity .4s}
.scrollcue.gone{opacity:0;animation:none}
@keyframes cue{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(6px);opacity:1}}

/* stop dots (desktop) */
.stops{position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);display:none;flex-direction:column;gap:.55rem}
.stops button{width:28px;height:28px;border:0;background:none;cursor:pointer;display:grid;place-items:center;padding:0;pointer-events:auto}
.stops button i{width:7px;height:7px;border-radius:50%;background:var(--soft);opacity:.5;transition:transform .25s,opacity .25s,background .25s}
.stops button.on i{background:var(--glow);opacity:1;transform:scale(1.6);box-shadow:0 0 10px var(--glow)}

/* projected labels & the target ring */
.labels{position:absolute;inset:0}
.label{position:absolute;left:0;top:0;transform:translate(-50%,-50%);pointer-events:auto;white-space:nowrap;
  opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
.label.on{opacity:1;visibility:visible;transition:opacity .35s,visibility 0s}
.ring{width:58px;height:58px;border-radius:50%;border:1.5px solid var(--hot);box-shadow:0 0 22px var(--hot),0 0 0 1px rgba(255,207,138,.35) inset;
  background:none;cursor:pointer;padding:0;position:relative}
.ring::before{content:"";position:absolute;inset:-12px;border-radius:50%;border:1px solid var(--hot);animation:ringp 2.2s ease-out infinite}
.ring::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:#fff;box-shadow:0 0 12px #fff,0 0 22px var(--hot)}
@keyframes ringp{0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.6);opacity:0}}
/* the anatomical name pinned to the ring, with a short leader line; swings left near the right edge */
.ring .tag{position:absolute;left:calc(100% + 18px);top:50%;transform:translateY(-50%);white-space:nowrap;font-size:.72rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:#fff;text-shadow:0 0 12px var(--hot),0 0 2px rgba(0,0,0,.6);pointer-events:none}
.ring .tag::before{content:"";position:absolute;right:100%;top:50%;width:14px;margin-right:4px;height:1px;background:var(--hot);opacity:.9}
.ring.flip .tag{left:auto;right:calc(100% + 18px)}
.ring.flip .tag::before{right:auto;left:100%;margin:0 0 0 4px}
.ring.below .tag{left:50%;right:auto;top:calc(100% + 18px);transform:translateX(-50%);max-width:88vw;overflow:hidden;text-overflow:ellipsis}
.ring.below .tag::before{left:50%;right:auto;top:auto;bottom:100%;width:1px;height:12px;margin:0 0 4px}
.cap:not(.intro):not(.finale) .eyebrow{color:var(--hot)}
.node{display:flex;align-items:center;gap:.5rem;background:rgba(7,16,34,.7);border:1px solid rgba(159,203,255,.45);color:#fff;
  border-radius:var(--pill);padding:.45rem .95rem .45rem .6rem;min-height:var(--tap);cursor:pointer;font-weight:700;font-size:.9rem;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 0 22px rgba(63,184,255,.25)}
.node i{width:12px;height:12px;border-radius:50%;background:var(--glow-2);box-shadow:0 0 12px var(--glow)}
.node small{font-weight:400;color:var(--soft);font-size:.74rem}
@media(hover:hover){.node:hover{border-color:#fff;box-shadow:0 0 30px rgba(63,184,255,.5)}}
.alabel{pointer-events:none;display:flex;align-items:center;gap:.45rem;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(233,242,255,.85);text-shadow:0 0 12px rgba(63,184,255,.6);transform:translate(0,-50%)}
.alabel i{width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 10px var(--glow),0 0 0 3px rgba(63,184,255,.25);flex:none;
  margin-left:-3px}
.stage.grab{cursor:grab}

/* dive panel */
.dpanel{position:absolute;left:var(--pad);right:var(--pad);bottom:calc(1rem + env(safe-area-inset-bottom));z-index:5;
  background:rgba(7,16,34,.78);border:1px solid rgba(159,203,255,.28);border-radius:var(--r);padding:1rem 1.05rem 1.05rem;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 20px 60px rgba(0,0,0,.45);
  opacity:0;transform:translateY(16px);visibility:hidden;transition:opacity .4s,transform .4s,visibility 0s .4s;pointer-events:none}
.dpanel.on{opacity:1;transform:none;visibility:visible;pointer-events:auto;transition:opacity .4s,transform .4s,visibility 0s}
.crumb{display:flex;flex-wrap:wrap;gap:.3rem .45rem;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin-bottom:.5rem}
.crumb b{color:var(--glow-2);font-weight:700}
.crumb i{font-style:normal;opacity:.5}
.dpanel h3{font-size:clamp(1.5rem,6vw,2.1rem);color:#fff;margin-bottom:.3rem}
.dpanel .deyebrow{font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--hot);margin:0 0 .35rem}
.dpanel .darea{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--glow-2);margin:-.1rem 0 .7rem}
.dpanel .dtag{font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--hot);margin:-.3rem 0 .9rem;max-width:44ch}
.dpanel [hidden]{display:none}
.dpanel p{color:var(--soft);font-size:.92rem;max-width:52ch}
.dpanel .acts{display:flex;flex-wrap:wrap;gap:.5rem .8rem;align-items:center}
.dpanel .close{position:absolute;top:.6rem;right:.6rem;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);
  background:none;color:#fff;font-size:1.2rem;cursor:pointer}
.dpanel .subs{display:flex;flex-wrap:wrap;gap:.45rem;margin:.2rem 0 .8rem}
.dpanel .subs button{min-height:38px;padding:.2rem .9rem;border-radius:var(--pill);border:1px solid rgba(159,203,255,.4);
  background:rgba(63,184,255,.08);color:#fff;font-size:.85rem;font-weight:700;cursor:pointer}
.dpanel .subs button[aria-pressed="true"]{background:var(--glow);color:var(--bg);border-color:var(--glow)}
.dpanel .hint{display:none;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--glow-2);margin:0 0 .35rem}
.dpanel .hint.on{display:block}

/* ================= 6 · CLOSING + FOOTER ================= */
/* The Activation is centred, like The Pineal Center before it: eyebrow, headline, paragraph, the form as one block, button, note */
/* The Activation PHASES IN over the brightness instead of scrolling up from below. The tour is --epi screens longer than
   its stops (the epilogue). The .epilogue wrapper starts at The Pineal Center's stop (its top margin reaches back over the
   epilogue and one more screen) and is taller than the section by the epilogue's length (the ::after spacer — a sticky box can
   only move within its container's CONTENT box, so padding would not do), so the section — position: sticky — is held at the
   top of the screen by the browser itself, with no per-frame nudging, while js/brain.js fades it in (and The Pineal Center's
   line out); once the epilogue is scrolled through, the spacer runs out and the section scrolls normally. */
.epilogue{position:relative;z-index:2;margin-top:calc(-1 * (1 + var(--epi,1)) * 100vh)}
.epilogue::after{content:"";display:block;height:calc(var(--epi,1) * 100vh)}
.closing{background:var(--paper);color:var(--ink);padding-block:clamp(3.5rem,13vh,8rem) clamp(3rem,8vw,5rem);position:sticky;top:0;text-align:center;
  min-height:100vh;min-height:100svh;opacity:0;visibility:hidden;will-change:opacity}
html:not(.js) .epilogue{margin-top:0}html:not(.js) .epilogue::after{display:none}
html:not(.js) .closing{position:static;opacity:1;visibility:visible;padding-top:clamp(2rem,5vw,3.25rem)}
.closing h2{font-size:clamp(2.2rem,9vw,4.4rem);max-width:16ch;color:var(--ink);margin-inline:auto;text-wrap:balance}
.closing .kicker{color:var(--soft-l);max-width:52ch;font-size:1.05rem;margin-inline:auto}
.closing h2 em{font-style:italic;font-weight:400;display:block}
.closing .btn{background:var(--ink);color:#fff;box-shadow:none;border-radius:6px;padding:.75rem 1.9rem;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase}
/* the application form: underlined fields on paper, as in the concept */
.apply{margin-top:2.4rem;max-width:640px;margin-inline:auto}
.apply .field{text-align:left}                                   /* the fields keep their labels at the left edge of the (centred) form */
.apply .success{text-align:center}
.apply .fgrid{display:grid;grid-template-columns:1fr;gap:1.35rem 1.6rem;margin-bottom:1.6rem}
.apply .field{display:flex;flex-direction:column}
.apply label{font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--soft-l);margin-bottom:.35rem}
.apply .req{color:#b58a2a;margin-left:.15rem}
.apply input,.apply textarea{width:100%;min-height:var(--tap);padding:.55rem 0;border:0;border-bottom:1.5px solid var(--line-l);border-radius:0;
  background:transparent;color:var(--ink);font:inherit;font-size:1rem;transition:border-color .2s}
.apply textarea{resize:vertical;min-height:5.5rem;line-height:1.5}
.apply input::placeholder,.apply textarea::placeholder{color:#73819a}   /* 3.7:1 on the paper (was 2.3:1) */
.apply input:focus,.apply textarea:focus{outline:none;border-bottom-color:var(--ink);box-shadow:0 1.5px 0 var(--ink)}
.apply input:focus-visible,.apply textarea:focus-visible{outline:none}
.apply .field.bad input,.apply .field.bad textarea{border-bottom-color:#b23b2e}
.apply .ferr{display:none;color:#b23b2e;font-size:.78rem;margin:.35rem 0 0}
.apply .field.bad .ferr{display:block}
.apply .note{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--soft-l);margin-top:-.2rem}
.apply .success{display:none;background:var(--ink);color:#fff;border-radius:var(--r);padding:.9rem 1rem;font-weight:700;margin-top:.8rem}
.apply .success.show{display:block}
.apply .fsend{display:none;color:#b23b2e;font-size:.85rem;margin-top:.8rem}   /* the submission did not go through */
.apply.failed .fsend{display:block}
.apply .bot{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}   /* the honeypot (Netlify Forms): off-screen, never display:none */
.apply input:disabled,.apply textarea:disabled{opacity:.55}
.footer{background:var(--bg);color:var(--soft);padding:2.2rem 0 calc(2.2rem + env(safe-area-inset-bottom));font-size:.82rem;border-top:1px solid var(--line)}
.footer .wrap{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;align-items:center;justify-content:center;text-align:center}
.footer a{color:var(--txt);text-decoration:none;min-height:var(--tap);display:inline-flex;align-items:center}
.footer [data-contact-line]{letter-spacing:.14em;text-transform:uppercase;font-size:.7rem}
.footer .flinks{display:inline-flex;gap:1.4rem}
.footer .flinks a{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}
.totop{position:fixed;right:max(.9rem,env(safe-area-inset-right));bottom:calc(.9rem + env(safe-area-inset-bottom));z-index:80;
  width:var(--tap);height:var(--tap);border-radius:50%;background:var(--glow);color:var(--bg);border:0;cursor:pointer;
  font-size:1.05rem;font-weight:800;opacity:0;pointer-events:none;transition:opacity .25s;box-shadow:0 0 20px rgba(63,184,255,.5)}
.totop.show{opacity:1;pointer-events:auto}

/* ================= 7 · STATES ================= */
/* No JavaScript (iOS Quick Look, Mail preview): a clean static page */
html:not(.js) .tour{height:auto}
html:not(.js) .stage{position:static;height:auto;overflow:visible;padding:calc(var(--hdr) + 1rem) 0 2rem}
html:not(.js) .stage canvas,html:not(.js) .stops,html:not(.js) .scrollcue,html:not(.js) .dpanel,html:not(.js) .labels{display:none}
html:not(.js) .poster{display:none}
html:not(.js) .scenes{position:relative;height:46vh;margin:0 var(--pad) 1rem;border-radius:var(--r)}
html:not(.js) .scenes .place{display:none}
html:not(.js) .caps{position:static;padding:0;min-height:0}
html:not(.js) .cap{position:static;opacity:1;transform:none;pointer-events:auto;margin:0 var(--pad) 2.4rem;max-width:640px;width:auto;text-align:left}
html:not(.js) .hud{position:static}
/* JavaScript but no WebGL: keep the scroll tour, show the CSS poster instead of the canvas */
.nogl .stage canvas{display:none}
.nogl .poster{display:block}
/* Motion off */
html.reduce .scrollcue,html.reduce .ring::before,html.reduce .pill .lbl.flip{animation:none}
html.reduce .ring::before{opacity:.6;transform:scale(1.15)}
html.reduce .caps,html.reduce .dpanel,html.reduce .label{transition:none}

/* ================= 8 · RESPONSIVE (desktop layer) ================= */
@media(min-width:900px){
  :root{--hdr:76px}
  body{font-size:1.05rem}
  /* captions sit on the bottom-left edge and grow upward (the region, or the whole brain, is framed to the right) */
  .cap{left:var(--pad);right:auto;bottom:calc(2.2rem + env(safe-area-inset-bottom));width:min(46vw,560px);max-width:560px}
  .cap p{font-size:1.05rem;max-width:46ch}
  .cap.finale{left:50%;right:auto;bottom:auto;width:min(70vw,760px);max-width:760px}
  .cap.finale h2{font-size:clamp(2.4rem,4.4vw,3.8rem)}
  .cap.intro{width:min(62vw,840px);max-width:840px;bottom:calc(3.2rem + env(safe-area-inset-bottom))}
  .cap.intro h1{font-size:clamp(3.2rem,6.2vw,6rem);max-width:11ch}
  .cap.intro p:not(.eyebrow){font-size:1.12rem;max-width:46ch}
  .scenes .place{top:auto;bottom:calc(2.9rem + env(safe-area-inset-bottom));max-width:40vw}
  .cap.wide{width:min(50vw,640px);max-width:640px}
  .cap.wide h2{font-size:clamp(2.2rem,4.2vw,3.4rem)}
  .cap .items{gap:.7rem}
  .cap .item{padding:.7rem .85rem}
  .cap .item b{font-size:1.12rem}
  .cap .item span{font-size:.86rem}
  .cap .items.linked .item b{font-size:1.2rem}
  .cap.dense{width:min(56vw,720px);max-width:720px}
  .cap.dense .items{grid-template-columns:repeat(4,1fr);gap:.55rem}
  .cap.dense .item{padding:.6rem .7rem}
  .cap.dense p{font-size:.98rem}
  .cap.dense .items.linked .item b{font-size:1rem}
  .cap.dense .item span,.cap.dense .items.linked .item span{display:block;font-size:.76rem;line-height:1.3;margin-top:.15rem;text-transform:none;letter-spacing:0;color:var(--soft)}
  .cap.dense .items.linked .item{grid-template-rows:auto auto}
  .cap.dense h2{font-size:clamp(2rem,3.6vw,3rem)}
  .cap .stats{gap:1.2rem 2rem;flex-wrap:nowrap}
  .cap .stat{flex:1 1 0;min-width:0}                                     /* desktop: four columns on one row (labels wrap, numbers don't) */
  .cap .stat:first-child{flex:1.5 1 0}                                   /* the first stat is the wide one (3 · 7 · 21) */
  .cap .stat b{font-size:clamp(2rem,3vw,2.8rem)}
  .cap .stat span{font-size:.66rem;letter-spacing:.18em}
  .hcta{display:inline-flex}
  .brand .logo{height:34px}
  .apply .fgrid{grid-template-columns:1fr 1fr}
  .apply .field.full{grid-column:1/-1}
  .stops{display:flex}
  .dpanel{left:auto;right:var(--pad);top:50%;bottom:auto;transform:translate(0,calc(-50% + 16px));width:min(38vw,440px)}
  .dpanel.on{transform:translateY(-50%)}
  .pill .lbl{max-width:260px}
  .drawer nav a{font-size:1.7rem;min-height:64px}
  .drawer nav a.sub{font-size:1.15rem;min-height:46px}
}
@media(max-width:899px) and (orientation:landscape){
  .cap{max-width:58vw}
}
/* short screens (phones held sideways, very small laptops): everything in the stage a size down so each caption still fits */
@media(max-height:560px){
  .cap.intro h1{font-size:clamp(1.7rem,7.2vh,2.6rem);margin-bottom:.2em}
  .cap.intro p:not(.eyebrow){font-size:.86rem;max-width:56ch;margin-bottom:.6em}
  .cap.intro .eyebrow{margin-bottom:.35rem;font-size:.64rem}
  .cap.intro{bottom:calc(1rem + env(safe-area-inset-bottom))}
  .cap{bottom:calc(.9rem + env(safe-area-inset-bottom))}
  .cap h2,.cap.wide h2,.cap.dense h2{font-size:clamp(1.3rem,5.6vh,2rem);margin-bottom:.3em}
  .cap p,.cap.dense p{font-size:.78rem;line-height:1.35;margin-bottom:.55em;max-width:62ch}
  .cap .eyebrow{margin-bottom:.35rem;font-size:.62rem}
  .cap .items{gap:.35rem;margin:.1rem 0 .5rem}
  .cap .item{padding:.4rem .55rem}
  .cap .item b{font-size:.9rem}
  .cap .item span{display:none}
  .cap .stats{gap:.6rem 1rem;padding-top:.5rem;margin-bottom:.4rem;flex-wrap:nowrap}
  .cap .stat{flex:1 1 0;min-width:0}
  .cap .stat:first-child{flex:1.5 1 0}
  .cap .stat b{font-size:1.5rem}
  .cap .stat span{font-size:.56rem;margin-top:.2rem}
  .cap .quote{display:none}
  .cap .meta{display:none}
  .cap .tagline{font-size:.9rem;margin:-.2rem 0 .6rem}
  .cap.finale h2{font-size:clamp(1.4rem,6vh,2.2rem)}
  .scenes .place{display:none}
  .scrollcue{display:none}
}
@media print{
  .loader,.hdr,.drawer,.backdrop,.progress,.totop,.stops,.scrollcue,.stage canvas,.scenes{display:none!important}
  .tour{height:auto}.stage{position:static;height:auto}
  .cap{position:static;opacity:1!important;transform:none!important;margin-bottom:1.5rem}
  .epilogue{margin-top:0}.epilogue::after{display:none}
  .closing{position:static;opacity:1!important;visibility:visible!important}
}