/* bio.html v7: résumé-story with Apple-style scroll motion. Phone-first; motion only when allowed. */
:root{--bg:#07090d;--fg:#d3dde6;--mute:#93a4b4;--line:#1c3442;--card:#0d131b;--acc:#22e3ff;--r1:#22e3ff;--r2:#ffb020;--park:#e8f4f8;
--font:Inter,"Inter Fallback",sans-serif;--ease:cubic-bezier(.2,.7,.2,1);--pad:32px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:16px}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 var(--font);letter-spacing:0;overflow-x:clip;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--acc)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
main:focus{outline:none}
/* bar */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:150;pointer-events:none}.progress i{display:block;height:100%;background:var(--acc);transform-origin:0 50%;transform:scaleX(var(--sp,0))}
/* type */
h1,h2,h3{margin:0;letter-spacing:-.03em;line-height:1.05;font-weight:700}
.display,h2{font-size:clamp(40px,8vw,88px)}
h3{font-size:clamp(26px,4vw,40px)}
.eyebrow,.kicker{color:var(--r2);font-weight:600;font-size:clamp(15px,1.6vw,21px);margin:0 0 12px;letter-spacing:0}
.big{font-size:clamp(21px,2.6vw,32px);line-height:1.3;font-weight:600;color:var(--mute);margin:28px 0 0}
.big b,.big strong{color:var(--fg)}
.lede{font-size:clamp(21px,2.6vw,30px);line-height:1.3;font-weight:600;margin:24px 0 0}
.narrow{max-width:880px;margin:0 auto;padding:0 var(--pad)}
.note{color:var(--mute);font-size:13px;margin:8px 0}.note a{color:var(--mute)}
.fine{color:var(--mute);font-size:12px;margin:8px 2px 0}
.lnk{display:inline-block;font-size:19px;margin-top:20px;text-decoration:none}.lnk:hover{text-decoration:underline}
.sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
/* placeholders */
.ph{position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:20px;border-radius:22px;overflow:hidden;min-height:220px;color:#fff;
background:repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 14px,transparent 14px 28px),var(--tone)}
.tone-a{--tone:linear-gradient(160deg,#1f3b4d,#0b1620)}.tone-b{--tone:linear-gradient(160deg,#2b2140,#0f0b18)}.tone-c{--tone:linear-gradient(160deg,#173a2c,#08140f)}.tone-d{--tone:linear-gradient(160deg,#4a2a14,#140c06)}
.ph-tag{align-self:flex-start;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;border:1px dashed rgba(255,255,255,.6);border-radius:999px;padding:4px 10px;margin-bottom:8px}
.ph-cap{font-weight:600;font-size:clamp(17px,2vw,22px)}
/* YouTube facade */
.yt{margin-top:40px;max-width:640px}
.yt-btn{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;border-radius:18px;overflow:hidden;cursor:pointer;background:#1c1c1e;color:#fff;text-align:left;font:inherit}
.yt-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85;transition:transform .6s var(--ease),opacity .3s}
.yt-btn:hover .yt-thumb{transform:scale(1.04);opacity:1}
.yt-play{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 8px 30px rgba(0,0,0,.4)}
.yt-play::after{content:"";position:absolute;left:27px;top:21px;border-left:20px solid #000;border-top:13px solid transparent;border-bottom:13px solid transparent}
.yt-meta{position:absolute;left:0;right:0;bottom:0;padding:40px 18px 14px;background:linear-gradient(transparent,rgba(0,0,0,.85));display:flex;flex-direction:column}
.yt-meta small{color:#d1d1d6;font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.yt-meta b{font-size:20px}
.yt iframe,.ig iframe{display:block;width:100%;border:0;border-radius:18px;background:#000}
.yt iframe{aspect-ratio:16/9;height:auto}
/* Instagram facade */
.ig{width:100%}
.ig-btn{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;aspect-ratio:9/16;border:0;border-radius:18px;padding:20px;cursor:pointer;color:#fff;font:inherit;text-align:center;
background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fd5949 35%,#d6249f 60%,#285aeb 95%)}
.ig-btn::before{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(0,0,0,.35)}
.ig-btn>*{position:relative}
.ig-glyph{width:56px;height:56px;border:4px solid #fff;border-radius:16px;position:relative}
.ig-glyph::before{content:"";position:absolute;inset:11px;border:4px solid #fff;border-radius:50%}
.ig-glyph::after{content:"";position:absolute;right:6px;top:6px;width:6px;height:6px;background:#fff;border-radius:50%}
.ig-cta{font-weight:700;font-size:18px}.ig-btn small{opacity:.9;font-size:12px}
.badge{position:absolute!important;top:14px;left:14px;background:#fff;color:#000;font-weight:700;font-size:13px;border-radius:999px;padding:5px 10px}
.ig iframe{aspect-ratio:9/16;height:auto;min-height:560px;background:#fff}
/* horizontal strips */
.strip{position:relative;margin-top:28px}
.strip-track{display:flex;gap:12px;list-style:none;margin:0;padding:4px var(--pad) 18px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 var(--pad);-webkit-overflow-scrolling:touch;scrollbar-width:none}
.strip-track::-webkit-scrollbar{display:none}
.strip-track>li{flex:0 0 78vw;max-width:420px;scroll-snap-align:start}
.strip-track>li.wide{flex-basis:88vw;max-width:760px}
.strip-track img{width:100%;height:min(70vh,560px);object-fit:cover;border-radius:18px;background:#1c1c1e}
.strip-track .ph.tall{height:min(70vh,560px);min-height:0}
.strip-track .yt{margin:0;max-width:none}
@media(min-width:1100px){.strip-track{padding-left:calc((100vw - 1100px)/2 + var(--pad));scroll-padding-left:calc((100vw - 1100px)/2 + var(--pad))}}
.strip-nav{display:none;justify-content:flex-end;gap:10px;max-width:1100px;margin:0 auto;padding:0 var(--pad)}
.strip-nav button{width:44px;height:44px;border-radius:50%;border:0;background:#333336;color:#fff;font-size:20px;cursor:pointer}
.strip-nav button:disabled{opacity:.35;cursor:default}
@media(hover:hover) and (pointer:fine){.strip-nav{display:flex}}
/* map */
.map{height:300vh}
.map .sticky{display:flex;flex-direction:column;justify-content:center;padding:64px var(--pad) 20px;max-width:1200px;margin:0 auto}
.map-head h2{font-size:clamp(32px,5vw,56px)}.map-head p{color:var(--mute);margin:8px 0 0}
.map-fig{margin:12px 0 0;flex:0 1 auto;min-height:0}
.map-stage{position:relative;width:min(100%,calc(58vh*975/620));margin:0 auto}.map-svg{width:100%;height:auto;display:block}
.land .us{fill:#2c2c2e;stroke:#48484a;stroke-width:.6}.land .ctry{fill:#1c1c1e;stroke:#3a3a3c;stroke-width:.6}.land .bord{fill:none;stroke:#3a3a3c;stroke-width:.5}
.route{fill:none;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1}
.r1{stroke:var(--r1);stroke-dashoffset:calc(1 - var(--d1,1))}.r2{stroke:var(--r2);stroke-dashoffset:calc(1 - var(--d2,1))}
.pin circle{fill:#fff;stroke:#000;stroke-width:1.5}.pin.p1 circle{fill:var(--r1)}.pin.p2 circle{fill:var(--r2)}.pin.park circle{fill:var(--park)}
.pin text{fill:#f5f5f7;font:600 14px var(--font);paint-order:stroke;stroke:#000;stroke-width:3px}
.js .pin{opacity:0;transition:opacity .5s}.js .pin.on{opacity:1}
.legend{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px;font-size:14px;color:#d1d1d6}
.legend li{display:flex;gap:10px;align-items:center}.legend i{flex:0 0 26px;height:4px;border-radius:2px}
.k1{background:var(--r1)}.k2{background:var(--r2)}.k3{height:12px!important;flex-basis:12px!important;border-radius:50%!important;background:var(--park);margin:0 7px}
.map-notes{padding-bottom:4vh}
@media(max-width:600px){.pin text{font-size:20px;stroke-width:4px}.map .sticky{padding-top:60px}}
/* cards & closing */
.cards{list-style:none;display:grid;gap:16px;grid-template-columns:1fr;max-width:1100px;margin:48px auto 0;padding:0 var(--pad)}
@media(min-width:760px){.cards{grid-template-columns:1fr 1fr}}
.card{background:var(--card);border-radius:24px;padding:32px}.card h3{font-size:28px}.card p{color:#c7c7cc;margin:12px 0 0;font-size:18px}
.links{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
.pill{display:inline-flex;align-items:center;min-height:44px;padding:10px 22px;border-radius:999px;border:1px solid #6e6e73;color:var(--fg);text-decoration:none;font-weight:600}
.pill:hover{border-color:var(--fg)}.pill.solid{background:var(--acc);border-color:var(--acc);color:#fff}
.closing{text-align:center;padding:22vh var(--pad) 18vh;max-width:1000px;margin:0 auto}.closing .links{justify-content:center}
/* background music toggle (bio.js); unobtrusive pill, bottom-right, above safe area */
.bgm{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));z-index:60;min-height:40px;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.25);
background:rgba(28,28,30,.72);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:var(--fg);font:600 13px var(--font);cursor:pointer;opacity:.85}
.bgm:hover,.bgm:focus-visible{opacity:1}.bgm[aria-pressed="true"]{border-color:var(--r2);color:var(--r2)}

/* v3: story-led long-form text with inline song links */
.story{font-size:clamp(19px,1.9vw,23px);line-height:1.6;color:#e5e5ea;margin:28px 0 0;max-width:38em;font-weight:400;letter-spacing:-.005em}
.story a{color:var(--acc);text-underline-offset:3px}
.song{font-weight:600;text-decoration:none;border-bottom:1px solid rgba(41,151,255,.45)}
.song:hover{border-bottom-color:var(--acc)}
.song-btn{display:inline-flex;align-items:center;justify-content:center;vertical-align:.08em;width:26px;height:26px;margin:0 2px 0 6px;padding:0;border-radius:50%;border:1px solid rgba(41,151,255,.6);background:rgba(41,151,255,.12);cursor:pointer}
.song-btn span{width:0;height:0;border-left:8px solid var(--acc);border-top:5px solid transparent;border-bottom:5px solid transparent;margin-left:2px}
.song-btn.open span{border:0;width:9px;height:9px;margin:0;background:var(--acc);border-radius:1px}
.song-btn:hover{background:rgba(41,151,255,.25)}
.song-embed{margin:20px 0 0;max-width:640px}
.song-embed iframe{display:block;width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:14px;background:#000}
/* Career chapter: dimmed WOCNM dashboard + scroll-driven circuit traces (CSS/SVG only) */
.wocnm{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;--p:0}
.wocnm-img{position:absolute;inset:0;background:url(assets/bio/wocnm-bg-1200.webp) center top/cover no-repeat;opacity:.5}
.wocnm-ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.66) 30%,rgba(0,0,0,.66) 70%,rgba(0,0,0,.92))}
.wocnm-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.wocnm .tr path{fill:none;stroke:rgba(46,230,140,.38);stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-dasharray:40 260;stroke-dashoffset:calc(var(--p)*-1200);animation:wocnm-run 6s linear infinite}
.wocnm .tr path:nth-child(2n){animation-duration:8s;animation-direction:reverse}
.wocnm .nd circle{fill:#2ee68c;opacity:calc(.15 + var(--p)*.5);filter:drop-shadow(0 0 4px #2ee68c);transition:opacity .3s}
.wocnm .nd circle:nth-child(2n){opacity:calc(.15 + (1 - var(--p))*.5)}
.wocnm.off .tr path{animation-play-state:paused}
@keyframes wocnm-run{to{stroke-dashoffset:calc(var(--p)*-1200 - 300)}}
@media(max-width:700px){.wocnm-img{background-image:url(assets/bio/wocnm-bg-600.webp)}.wocnm .x{display:none}.wocnm .tr path{animation-duration:9s}}
@media(prefers-reduced-motion:reduce){.wocnm .tr path{animation:none;stroke-dasharray:none;stroke:rgba(46,230,140,.16)}.wocnm .nd circle{transition:none;opacity:.35}}

/* ===== v7 ===== motion uses transform/opacity only; bio.js toggles .in and sets --p/--k/--y per element */
.hero{min-height:88vh;min-height:88svh;display:flex;flex-direction:column;justify-content:center;max-width:1100px;margin:0 auto;padding:12vh var(--pad) 8vh}
.hero h1{font-size:clamp(56px,12vw,150px);letter-spacing:-.045em}
.hero .sub{font-size:clamp(22px,2.8vw,34px);font-weight:600;margin:14px 0 0}
.hero .cv{color:var(--mute);font-size:clamp(17px,1.8vw,21px);max-width:36em;margin:22px 0 0}
.cue{color:var(--mute);font-size:14px;margin-top:40px}
/* timeline */
.tl{position:fixed;left:max(10px,calc((100vw - 1200px)/2 - 40px));top:22vh;bottom:22vh;width:14px;z-index:40;pointer-events:none;opacity:0;transition:opacity .4s}
.tl.show{opacity:1}
.tl-line{position:absolute;left:6px;top:0;bottom:0;width:2px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden}
.tl-line b{position:absolute;inset:0;background:linear-gradient(var(--r1),var(--r2));transform-origin:50% 0;transform:scaleY(var(--tp,0))}
.tl ol{list-style:none;margin:0;padding:0;position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between}
.tl li{width:14px;height:14px;border-radius:50%;background:#1c1c1e;border:2px solid #48484a;position:relative}
.tl li::after{content:"";position:absolute;inset:-2px;border-radius:50%;background:var(--r2);box-shadow:0 0 12px var(--r2);opacity:0;transform:scale(.4);transition:opacity .4s,transform .4s var(--ease)}
.tl li.on::after{opacity:1;transform:none}
/* chapters */
.chap{position:relative;max-width:1200px;margin:0 auto;padding:16vh var(--pad) 6vh}
.chap-head{position:relative;z-index:2;text-align:center;margin-bottom:7vh}
.bigt{position:relative;display:inline-block;font-size:clamp(46px,9vw,120px);letter-spacing:-.045em;line-height:1;transform:scale(calc(.82 + .18*var(--k,1)));transform-origin:50% 60%;will-change:transform}
.bt-s{display:block;opacity:calc(.15 + .85*var(--k,1))}
.bt-b{position:absolute;inset:0;color:transparent;text-shadow:0 0 18px rgba(245,245,247,.9);opacity:calc(1 - var(--k,1));pointer-events:none}
.chap-grid{position:relative;z-index:2;display:grid;gap:clamp(24px,4vw,64px);align-items:center;grid-template-columns:1fr}
@media(min-width:900px){.chap-grid{grid-template-columns:minmax(220px,1fr) 4fr;align-items:start}.chap-copy .story,.songline{max-width:none}}
.chap-media .yt{margin:0;max-width:none}
.chap-copy .story{margin-top:0}.chap-copy .story+.story,.chap-copy .lnk+.story,.chap-copy p+.story{margin-top:22px}
.songline{margin:24px 0 0;font-size:clamp(17px,1.5vw,19px);line-height:1.6;color:#c7c7cc;padding-left:16px;border-left:2px solid var(--r2);max-width:46em}
.songline>span[aria-hidden]{color:var(--r2)}
.route{font-weight:600;color:var(--r1);font-size:15px;letter-spacing:.01em;margin:18px 0 0}
.js .slide-l,.js .slide-r,.js .slide-up{opacity:0;transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.js .slide-l{transform:translate3d(-14vw,0,0)}.js .slide-r{transform:translate3d(14vw,0,0)}.js .slide-up{transform:translate3d(0,60px,0)}
.js .in.slide-l,.js .in.slide-r,.js .in.slide-up{opacity:1;transform:none}
/* career */
.career{max-width:none}
.career>.chap-head,.career>.chap-grid{max-width:1150px;margin-left:auto;margin-right:auto}
.career>.chap-head{margin-bottom:7vh}
.career-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.career-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(#000,transparent 12%,transparent 88%,#000)}
.floaters{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.float{position:absolute;left:var(--x);top:var(--y);width:150px;opacity:.3;border-radius:14px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.6);transform:translate3d(0,var(--y2,0px),0) rotate(-4deg)}
.float:nth-child(2n){transform:translate3d(0,var(--y2,0px),0) rotate(5deg)}
.stats{list-style:none;padding:0;margin:28px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.stats li{background:rgba(22,22,23,.82);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:16px 14px}
.stats b{display:block;font-size:clamp(36px,4.4vw,56px);letter-spacing:-.04em;line-height:1;background:linear-gradient(90deg,var(--r1),#2ee68c);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.stats span{display:block;color:var(--mute);font-size:13px;line-height:1.35;margin-top:8px}
/* apps: sticky phone */
.apps{max-width:1150px;margin:0 auto;padding:16vh var(--pad) 6vh}
.apps-grid{display:grid;gap:32px;grid-template-columns:1fr}
.phone-col{display:none}.shot-cap{text-align:center}
@media(min-width:900px){.apps-grid{grid-template-columns:320px 1fr;gap:64px}.phone-col{display:block;position:sticky;top:calc(50vh - 290px);align-self:start}
 .app-cards{grid-template-columns:1fr!important;margin:0!important;padding:0!important}.app-cards .card{min-height:62vh;display:flex;flex-direction:column;justify-content:center;opacity:.35;transition:opacity .5s}.app-cards .card.cur{opacity:1}}
/* both frames always occupy a reserved box; switching orientation only fades/scales (no layout change, no CLS) */
.dev-stage{position:relative;width:320px;height:606px;margin:0 auto}
.device{position:absolute;background:#1c1c1e;border:10px solid #2c2c2e;box-shadow:0 30px 80px rgba(41,151,255,.18);overflow:hidden;opacity:0;transform:scale(.9);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.device.port{left:20px;top:0;width:280px;height:606px;border-radius:40px}.device.land{left:0;top:187px;width:320px;height:232px;border-radius:22px}
.o-port .device.port,.o-land .device.land{opacity:1;transform:none}
.screens{position:absolute;inset:0}
.pscr{position:absolute;inset:0;opacity:0;transform:translate3d(0,30px,0) scale(.97);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.pscr img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.pscr.cur{opacity:1;transform:none}
.phone-col .fine{text-align:center}
/* layered photo parallax */
.layers{position:relative;height:110vh;max-width:1300px;margin:4vh auto 0;overflow:hidden}
.ly{position:absolute;transform:translate3d(0,var(--y2,0px),0)}
.ly img{width:100%;height:100%;object-fit:cover;border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.ly1{left:18%;right:18%;top:8%;height:72%}.ly1 img{opacity:.55}
.ly2{left:4%;top:20%;width:26%;height:46%}.ly3{right:4%;top:36%;width:28%;height:38%}
.ly4{left:30%;top:62%;width:18%;height:32%}.ly5{right:22%;top:4%;width:22%;height:26%}
.trips3{list-style:none;max-width:1150px;margin:0 auto;padding:4vh var(--pad) 0;display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:900px){.trips3{grid-template-columns:repeat(3,1fr)}}
.trips3 li{background:var(--card);border-radius:22px;padding:24px}.trips3 h3{font-size:26px}.trips3 p{color:#c7c7cc;margin:10px 0 0}
.trips3 .ig{margin-top:16px;max-width:260px}
/* map pops */
/* map pins with photos: small, labels never covered; photo preview only on hover/focus, tap/click opens the gallery */
.pin.has-photo circle{stroke:#fff;stroke-width:2}
.pin.visit rect{fill:#bf5af2;stroke:#000;stroke-width:1.2}
.k4{height:10px!important;flex-basis:10px!important;background:#bf5af2;transform:rotate(45deg);margin:0 8px}
.mpin{position:absolute;left:var(--x);top:var(--y);width:30px;height:30px;margin:-15px 0 0 -15px;padding:0;border:0;border-radius:50%;background:none;cursor:zoom-in;z-index:2;opacity:0;pointer-events:none;-webkit-tap-highlight-color:transparent}
.mpin.on{opacity:1;pointer-events:auto}
.mpin::after{content:"";position:absolute;inset:8px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,0);transition:box-shadow .2s}
.mpin:hover::after,.mpin:focus-visible::after{box-shadow:0 0 0 3px #fff}
.mpin-prev{position:absolute;left:50%;bottom:calc(100% + 4px);width:150px;transform:translate3d(-50%,6px,0);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;background:#1c1c1e;border:1px solid rgba(255,255,255,.25);border-radius:12px;padding:5px;box-shadow:0 12px 30px rgba(0,0,0,.6);z-index:5}
.mpin-prev img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;border-radius:8px}
.mpin-prev span{display:block;font:600 12px/1.2 var(--font);color:#fff;text-align:center;margin-top:4px}
@media(hover:hover){.mpin:hover,.mpin:focus-visible{z-index:6}.mpin:hover .mpin-prev,.mpin:focus-visible .mpin-prev{opacity:1;transform:translate3d(-50%,0,0)}}
@media(max-width:700px){.mpin{width:26px;height:26px;margin:-13px 0 0 -13px}.mpin-n{display:none}}
/* photo strip under the map (all photos, route order; opens the same gallery) */
.mstrip-wrap{max-width:1200px;margin:0 auto;padding:0 var(--pad)}
.mstrip{list-style:none;margin:0;padding:6px 0 14px;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin}
.mstrip li{flex:0 0 auto;scroll-snap-align:start}
.mthumb{display:block;width:132px;padding:0;border:0;background:none;color:var(--fg);font:inherit;cursor:zoom-in;text-align:left}
.mthumb img{width:132px;height:99px;object-fit:cover;border-radius:10px;background:#1c1c1e;transition:transform .3s var(--ease)}
.mthumb:hover img{transform:scale(1.04)}
.mthumb span{display:block;font-size:12px;line-height:1.25;color:#d1d1d6;margin-top:5px}
/* lightbox */
.lb{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));background:rgba(0,0,0,.88);opacity:0;transition:opacity .25s;touch-action:manipulation}
.lb[hidden]{display:none}.lb.show{opacity:1}
.lb-box{position:relative;max-width:min(96vw,1400px);transform:scale(.96);transition:transform .3s var(--ease)}.lb.show .lb-box{transform:none}
.lb img{max-width:100%;max-height:82vh;max-height:82svh;width:auto;height:auto;border-radius:14px;background:#1c1c1e}
.lb-bar{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:10px}.lb-cap{margin:0;text-align:center;font-weight:600;color:#d1d1d6;min-width:10em}.lb-cap small{color:var(--mute);font-weight:500;margin-left:6px}
.lb-prev,.lb-next{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:#1c1c1e;color:#fff;font-size:26px;line-height:1;cursor:pointer}
.lb-x{position:absolute;top:-6px;right:-6px;transform:translate(0,-100%);width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:#1c1c1e;color:#fff;font-size:26px;line-height:1;cursor:pointer}
@media(max-width:700px){.lb-x{top:-8px;right:0}.lb img{max-height:72vh;max-height:72svh}}
.lb.rm,.lb.rm .lb-box{transition:none!important;transform:none}
html.lb-open{overflow:hidden}
/* reels + end */
.reels{padding:10vh 0 0}
.reels .yt{margin:0;max-width:none;width:min(78vw,640px)}.reels .strip-track>li:has(.yt){flex-basis:auto;max-width:none}
.closing{padding:16vh var(--pad) 14vh}
.signoff-photo{width:120px;height:150px;object-fit:cover;border-radius:50% / 40%;margin:0 auto 18px;border:2px solid #2c2c2e}
.signoff{font-size:20px;font-weight:600;color:var(--mute);margin:0 0 18px}
.closing h2{font-size:clamp(30px,5vw,56px)}
/* small screens: lighter */
@media(max-width:700px){.bt-b,.floaters,.sm-hide{display:none}.bt-s{opacity:1}.bigt{font-size:clamp(40px,11vw,64px)}
 .tl{left:4px;width:10px}.tl li{width:10px;height:10px}.tl-line{left:4px}
 .chap,.apps{padding-left:calc(var(--pad) + 8px)}
 .layers{height:80vh}.ly1{left:6%;right:6%}.ly2{width:42%}.ly3{width:44%}
 .js .slide-l{transform:translate3d(-40px,0,0)}.js .slide-r{transform:translate3d(40px,0,0)}
 .stats{gap:8px}.stats li{padding:12px 10px}.stats span{font-size:12px}}
/* reduced motion: everything static and visible */
@media(prefers-reduced-motion:reduce){
 .device{transition:none}
 .mpin-prev,.mthumb img{transition:none}
 .js .slide-l,.js .slide-r,.js .slide-up{opacity:1;transform:none;transition:none}
 .bigt{transform:none}.bt-s{opacity:1}.bt-b{display:none}
 .float,.ly{transform:none!important}.lb,.lb-box{transition:none!important}
 .tl li::after{transition:none}.pscr{transition:none}.app-cards .card{transition:none}
 .map{height:auto}.map .sticky{position:relative;height:auto}.r1,.r2{stroke-dashoffset:0}.js .pin{opacity:1;transition:none}
 .yt-thumb{transition:none}.strip-track{scroll-behavior:auto}
}
main{overflow-x:clip}
.float.land{width:240px}.float img{width:100%;height:auto;display:block}
.mpin-n{position:absolute;left:21px;top:19px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#bf5af2;color:#fff;font:700 11px/17px var(--font);text-align:center;box-shadow:0 0 0 2px #000}
/* FloorBrax: illustrative sample screen (no real screenshot available), labelled as such */
.scr{display:flex;flex-direction:column;gap:6px;padding:14px 12px;border-radius:16px;background:#0f1115;border:1px solid rgba(255,255,255,.12);font-size:11px;color:#d1d1d6;aspect-ratio:9/16}
.scr b{font-size:13px;color:#fff}.scr i{font-style:normal;color:var(--mute);margin-bottom:6px}
.scr u{text-decoration:none;display:block;padding:9px 8px;border-radius:9px;background:rgba(255,255,255,.06)}
.s-fb u:first-of-type{background:rgba(41,151,255,.25)}
.scr em{margin-top:auto;align-self:center;font-style:normal;font-size:11px;font-weight:600;color:var(--r2);border:1px dashed rgba(255,159,10,.6);border-radius:999px;padding:4px 10px}
.pscr .scr{height:100%;aspect-ratio:auto;border:0;border-radius:0;padding:44px 16px 20px;font-size:13px}.pscr .scr b{font-size:18px}.pscr .scr u{padding:14px 10px}
.card-mock{display:none}
@media(max-width:899px){.card-mock{display:block;width:180px;margin:0 0 20px}}

/* v12: real posters for reels, compact strip, photos in travel cards */
.ig-btn{display:block;padding:0;background:#1c1c1e;overflow:hidden}
.ig-btn::before{z-index:1;background:linear-gradient(rgba(0,0,0,0) 55%,rgba(0,0,0,.8))}
.ig-btn>picture,.ig-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ig-btn>.yt-play,.ig-btn>.badge,.ig-btn>.ig-meta{position:absolute;z-index:2}
.ig-btn>.yt-play{left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px}.ig-btn>.yt-play::after{left:22px;top:16px;border-left-width:17px;border-top-width:12px;border-bottom-width:12px}
.ig-meta{left:12px;right:12px;bottom:12px;display:flex;align-items:center;gap:8px;text-align:left}
.ig-meta .ig-glyph{flex:0 0 auto;width:20px;height:20px;border-width:2px;border-radius:6px}.ig-meta .ig-glyph::before{inset:4px;border-width:2px}.ig-meta .ig-glyph::after{right:2px;top:2px;width:3px;height:3px}
.ig-meta small{font-size:12px;line-height:1.2;opacity:.95}
.ig-btn>.badge{left:12px;top:12px}
.ig-btn:hover .ig-thumb{transform:scale(1.04)}.ig-thumb{transition:transform .6s var(--ease)}
.strip-track{align-items:center}
.reels .strip-track>li{flex:0 0 auto;max-width:none}
.reels .ig{width:clamp(170px,22vw,214px)}
.reels .yt{width:min(84vw,676px)}
.reels .yt .fine{display:none}
.reels .ig iframe{width:326px;min-height:0;height:600px}
.trips3{align-items:start}
.tph{display:grid;gap:6px;margin:-8px -8px 18px;grid-auto-flow:column;grid-auto-columns:1fr}
.tthumb{display:block;padding:0;border:0;background:#1c1c1e;border-radius:14px;overflow:hidden;cursor:zoom-in;height:220px}
.tthumb img,.tthumb picture{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.tthumb:hover img{transform:scale(1.04)}
.tph .ig{margin:0;max-width:none;height:220px}.tph .ig-btn{aspect-ratio:auto;height:100%;border-radius:14px}
.tph .ig iframe{min-height:0;height:540px}
.tph-ys:has(iframe){grid-auto-flow:row}
@media(max-width:600px){.tthumb,.tph .ig{height:200px}}
@media(prefers-reduced-motion:reduce){.tthumb img,.ig-thumb{transition:none}}
.ig-btn .ig-thumb,.yt-btn .yt-thumb{height:100%;border-radius:0}
.chap-grid2{margin-top:clamp(32px,5vw,56px)}
@media(min-width:900px){.chap-grid2{grid-template-columns:minmax(360px,1fr) 2fr;align-items:center}}

/* ===== v16: /about in the home design system (fonts, palette, buttons, links, spacing). Content and motion unchanged. ===== */
@media(max-width:700px){:root{--pad:18px}}
h1,h2,.bigt,.display{font-family:Orbitron,"Orbitron Fallback",sans-serif;font-weight:800;color:#fff;letter-spacing:.04em!important}
h3{font-family:Rajdhani,"Rajdhani Fallback",sans-serif;font-weight:700;color:#fff;letter-spacing:.02em}
.hero h1{font-size:clamp(38px,5.4vw,64px);line-height:1.05}
.hero .sub{font-family:Rajdhani,"Rajdhani Fallback",sans-serif;font-weight:700;font-size:clamp(22px,2.4vw,30px);color:var(--cyan);letter-spacing:.06em;text-transform:uppercase}
.hero .cv{font-size:19px;line-height:1.6}
.hero{max-width:1200px;min-height:72vh;min-height:72svh}
.display,h2{font-size:clamp(26px,3.6vw,44px)}
.bigt{font-size:clamp(28px,5vw,64px);line-height:1.1}
@media(max-width:700px){.bigt{font-size:clamp(24px,7.4vw,34px)}.hero h1{font-size:38px}}
.map-head h2,.closing h2{font-size:clamp(24px,3vw,36px)}
.eyebrow,.kicker{font-family:'JetBrains Mono',monospace;font-size:12px!important;font-weight:400;letter-spacing:.08em!important;text-transform:uppercase;color:var(--amber)}
a{color:var(--amber)}
.story a,.songline a,.chap-copy a,.cv a,a.song{color:var(--amber);text-decoration:underline;text-underline-offset:3px}
/* square, clipped buttons like home's .btn */
.pill,.pill.solid,.lnk{border-radius:0;border:0;min-height:44px;padding:12px 22px;font:700 16px/1.2 Rajdhani,"Rajdhani Fallback",sans-serif;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
 clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.pill{background:var(--amber);color:#1a0f00}.pill.solid{background:var(--cyan);color:#001018}
.pill:hover{filter:brightness(1.1)}
.lnk{display:inline-block;background:none;padding:0;min-height:0;clip-path:none;color:var(--cyan);text-decoration:underline}
.bgm{border-radius:0;background:var(--panel,#0d131b);border:1px solid var(--amber);color:var(--amber);font:700 14px/1 Rajdhani,"Rajdhani Fallback",sans-serif;letter-spacing:.12em;text-transform:uppercase;
 clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);-webkit-backdrop-filter:none;backdrop-filter:none;opacity:1}
/* cards, media and panels: home's bracketed panel look (no rounded corners) */
.card,.trips3 li,.stats li,.yt-btn,.ig-btn,.yt iframe,.ig iframe,.tthumb,.tph .ig-btn,.strip-track img,.mstrip img,.mthumb img,.lb img,.chap-media img,.ly img,.device,.signoff-photo{border-radius:0!important}
.trips3 li,.card{background:linear-gradient(180deg,#0d131bcc,#0a0f15cc);border:1px solid var(--line)}
.yt-btn,.ig-btn{background:var(--card);border:1px solid var(--line)}
.yt-meta small{font-family:'JetBrains Mono',monospace;color:var(--amber)}.yt-meta b{font-family:Rajdhani,"Rajdhani Fallback",sans-serif;font-size:22px;letter-spacing:.04em}
.yt-play{background:var(--cyan)}.yt-play::after{border-left-color:#001018}
.ig-btn>.badge,.badge{border-radius:0!important;background:var(--amber);color:#1a0f00;font-family:Rajdhani,"Rajdhani Fallback",sans-serif;letter-spacing:.06em}
.signoff-photo{border-radius:0!important;border:1px solid var(--line)}
.device{border-color:#1c3442}
.num{font-family:Orbitron,"Orbitron Fallback",sans-serif;color:var(--cyan)}
.lb{background:rgba(7,9,13,.94)}
.lb-bar button,.strip-nav button{border-radius:0;background:var(--panel,#0d131b);border:1px solid var(--line);color:#fff}
.note,.fine{color:var(--mute)}
/* v17: headings use home's scale (h2 28/44.8, h3 24/38.4; phones 24 and 20); sections use home's 50px rhythm; no side timeline */
html body h2,html body .bigt,html body .display,html body .map-head h2,html body .closing h2{font-size:28px;line-height:1.6;letter-spacing:.04em!important}
html body h3,html body .card h3,html body .trips3 h3{font-family:Orbitron,"Orbitron Fallback",sans-serif;font-weight:800;font-size:24px;line-height:1.6;letter-spacing:.04em}
@media(max-width:700px){html body h2,html body .bigt,html body .display,html body .map-head h2,html body .closing h2{font-size:24px}html body h3,html body .card h3,html body .trips3 h3{font-size:20px}}
.chap,.apps{padding-top:50px;padding-bottom:0}.reels{padding-top:50px}.closing{padding-top:50px;padding-bottom:50px}
.tl{display:none!important}
/* narrow phones: grid tracks must not grow with min-content (stat counters and long PT words changed the column width while animating = layout shift at 320) */
@media(max-width:899px){.chap-grid{grid-template-columns:minmax(0,1fr)}}@media(min-width:900px){.chap-grid{grid-template-columns:minmax(220px,1fr) minmax(0,4fr)}}
@media(min-width:900px){.apps-grid{grid-template-columns:320px minmax(0,1fr)}}
.stats{grid-template-columns:repeat(3,minmax(0,1fr))}.stats span{overflow-wrap:anywhere;hyphens:auto}
@media(max-width:360px){.stats b{font-size:30px}}
/* v18: h3 exactly like home (Rajdhani 24px bold, ls .04em, #fff; 20px on phones); hero starts 70px below the header like home (36px on phones) */
html body h3,html body .card h3,html body .trips3 h3{font-family:Rajdhani,"Rajdhani Fallback",sans-serif;font-weight:700;font-size:24px;line-height:1.6;letter-spacing:.04em;color:#fff;text-transform:none}
@media(max-width:700px){html body h3,html body .card h3,html body .trips3 h3{font-size:20px}}
html body .hero{padding-top:70px;justify-content:flex-start}
@media(max-width:700px){html body .hero{padding-top:36px}}