/* ============================================================
   WORK3 — "FIELD OF ATTENTION" · the inversion cut
   Dramatic dark<->light color flips on scroll + real
   vertical->horizontal movement (pinned reels) + oryzo-grade
   motion. Vanilla, variable fonts, IO + rAF, no libraries.
   HARD RULE: no clipped letters. No overflow:hidden on text.
   Generous line-heights. Reveals via transform/opacity only.
   ============================================================ */

/* ---- THEME (invert engine) -------------------------------- */
/* @property registers the theme colors so they ANIMATE reliably — plain
   var() transitions silently fail to update in Chrome. This is the flip. */
@property --bg{syntax:"<color>";inherits:true;initial-value:#0a0806}
@property --fg{syntax:"<color>";inherits:true;initial-value:#f4ece0}
@property --dim{syntax:"<color>";inherits:true;initial-value:rgba(244,236,224,.56)}
@property --line{syntax:"<color>";inherits:true;initial-value:rgba(244,236,224,.15)}
@property --panel{syntax:"<color>";inherits:true;initial-value:rgba(244,236,224,.05)}
:root{
  --dark-bg:#0a0806; --dark-fg:#f4ece0;
  --light-bg:#f2e8da; --light-fg:#0f0b08;
  --acc:#dc5000; --acc-2:#ff6a2b;
  --bg:#0a0806; --fg:#f4ece0;
  --dim:rgba(244,236,224,.56); --line:rgba(244,236,224,.15); --panel:rgba(244,236,224,.05);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.16,1,.3,1);
  --flip:cubic-bezier(.65,0,.35,1);
  --pad:clamp(20px,5vw,96px);
  --serif:"Fraunces",Georgia,serif;
  --sans:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"Space Mono",ui-monospace,monospace;
}
body[data-theme="dark"]{ --bg:#0a0806; --fg:#f4ece0; --dim:rgba(244,236,224,.56); --line:rgba(244,236,224,.15); --panel:rgba(244,236,224,.05); }
body[data-theme="light"]{ --bg:#f2e8da; --fg:#0f0b08; --dim:rgba(15,11,8,.56); --line:rgba(15,11,8,.15); --panel:rgba(15,11,8,.04); }

*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--dark-bg);-webkit-text-size-adjust:100%}
body{
  background-color:var(--bg);color:var(--fg);font-family:var(--sans);font-weight:400;
  font-size:clamp(15px,1.05vw,17px);line-height:1.55;letter-spacing:-.004em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;
  transition:--bg .85s var(--flip),--fg .85s var(--flip),--dim .85s var(--flip),--line .85s var(--flip),--panel .85s var(--flip);
}
body.lock{overflow:hidden;height:100vh}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
img{max-width:100%;display:block}
.mono{font-family:var(--mono);font-weight:400}
em{font-style:italic}
::selection{background:var(--acc);color:#fff}

/* ---- ambient --------------------------------------------- */
.grain{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.cursor{position:fixed;top:0;left:0;z-index:9998;pointer-events:none;transform:translate(-100px,-100px);mix-blend-mode:difference}
.cursor__dot{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff;transform:translate(-50%,-50%)}
.cursor__ring{position:absolute;width:36px;height:36px;border:1px solid #fff;border-radius:50%;transform:translate(-50%,-50%);transition:width .3s var(--ease),height .3s var(--ease),opacity .3s}
.cursor.hov .cursor__ring{width:64px;height:64px;opacity:.4}
.cursor.hov .cursor__dot{opacity:0}
@media (hover:none){.cursor{display:none}}

/* ---- preloader ------------------------------------------- */
.pre{position:fixed;inset:0;z-index:9999;background:var(--dark-bg);color:var(--dark-fg);display:grid;place-items:center;overflow:hidden}
.pre__c{text-align:center;display:grid;gap:16px;justify-items:center;padding:0 20px}
.pre__lab{font-family:var(--mono);font-size:11px;letter-spacing:.42em;color:var(--acc);opacity:0;transform:translateY(8px);transition:.7s var(--ease) .1s}
.pre.on .pre__lab{opacity:1;transform:none}
.pre__num{font-weight:800;font-size:clamp(66px,15vw,190px);line-height:1;letter-spacing:-.03em;padding-bottom:.06em}
.pre__nm{font-family:var(--mono);font-size:11px;letter-spacing:.34em;color:rgba(244,236,224,.5);opacity:0;transition:.7s var(--ease) .2s}
.pre.on .pre__nm{opacity:1}
.pre.done{transform:translateY(-101%);transition:transform 1s var(--flip);pointer-events:none}
body.pre-lock{overflow:hidden;height:100vh}

/* ---- nav / hud (blend so they read on any theme) --------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--pad);mix-blend-mode:difference;color:#fff;transition:transform .5s var(--ease)}
.nav.hide{transform:translateY(-125%)}
.nav__b{font-weight:800;font-size:15px;letter-spacing:.01em}
.nav__r{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.nav__r a{font-size:13px;font-weight:500}
.nav__cta{font-family:var(--mono);font-size:11px;letter-spacing:.06em;border:1px solid rgba(255,255,255,.5);border-radius:100px;padding:9px 15px}
.nav__cta b{color:var(--acc-2)}
/* the cross-link back to the AI side of the business. Accent-coloured because it leaves this site. */
.nav__ai{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--acc);border-bottom:1px solid transparent;transition:border-color .3s}
.nav__ai:hover{border-color:var(--acc)}
.nav__ai b{font-weight:400}
/* PHONE NAV: brand + AI link + CTA exactly filled the space-between row at 320-390px, so the AI link
   sat flush against the logo with a 0px gap and read as overlapping. Shrink everything, force a real
   gap so they can never touch, and drop to "AI ↗" on the narrowest screens. */
@media (max-width:640px){
  .nav{gap:10px;padding:18px var(--pad)}
  .nav__b{font-size:13px}
  .nav__ai{font-size:10px}
  .nav__cta{font-size:10px;padding:7px 11px}
}
@media (max-width:380px){
  .nav__b{font-size:12px}
  .nav__ai-w{display:none}
}
@media (max-width:640px){.nav__r a:not(.nav__cta):not(.nav__ai){display:none}}
.hud{position:fixed;right:var(--pad);bottom:24px;z-index:60;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  color:#fff;mix-blend-mode:difference;display:flex;flex-direction:column;align-items:flex-end;gap:3px;opacity:0;transition:opacity 1s .8s}
.hud.show{opacity:.72}
@media (max-width:820px){.hud{display:none}}
.pnav{position:fixed;left:var(--pad);top:50%;transform:translateY(-50%);z-index:60;mix-blend-mode:difference;color:#fff;
  display:flex;flex-direction:column;gap:11px;opacity:0;transition:opacity 1s .8s}
.pnav.show{opacity:1}
.pnav i{width:7px;height:7px;border:1px solid #fff;border-radius:50%;transition:.3s var(--ease);display:block}
.pnav i.on{background:var(--acc);border-color:var(--acc);transform:scale(1.35)}
@media (max-width:1080px){.pnav{display:none}}

/* ---- section shell --------------------------------------- */
.s{position:relative;padding:clamp(96px,15vh,190px) var(--pad)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--dim)}
.eyebrow b{color:var(--acc)}
/* headings: NO overflow clip, generous line-height + descender padding */
.dsp{font-weight:800;letter-spacing:-.035em;line-height:1.0;padding-bottom:.06em;text-transform:uppercase}
.serif{font-family:var(--serif);font-weight:400;font-style:normal}

/* ---- HERO ------------------------------------------------ */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-top:clamp(120px,17vh,210px);padding-bottom:64px}
/* hero backdrop: real B&W slow-mo video "mind bursts" that fade in/out at random spots */
.hero__vid{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hvid{position:absolute;aspect-ratio:16/9;overflow:hidden;border-radius:5px;opacity:0;pointer-events:none;
  filter:grayscale(1) contrast(1.06) brightness(.5) saturate(0);
  transition:opacity 1.05s ease;will-change:opacity,transform}
.hvid__in{position:absolute;inset:-2px;overflow:hidden;will-change:transform;animation:hvdrift var(--hvdur,9s) ease-in-out infinite alternate}
/* the iframe is deliberately OVERSCALED so every bit of YouTube chrome (title, logo, play
   button, captions, watch-later) sits outside the clipped box. Only clean picture survives. */
.hvid iframe,.hvid__in>div{position:absolute;top:50%;left:50%;width:100%;height:100%;border:0;pointer-events:none;
  transform:translate(-50%,-50%) scale(1.42);transform-origin:center}
.hvid::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 100% at 50% 40%,transparent 30%,rgba(10,8,6,.55) 100%);mix-blend-mode:multiply}
@keyframes hvdrift{0%{transform:translate3d(0,0,0) scale(1.04)}100%{transform:translate3d(2.4%,-2.2%,0) scale(1.11)}}
/* keeps hero text legible over the bursts */
.hero__veil{position:absolute;inset:0;z-index:0;pointer-events:none;background:
  linear-gradient(90deg,rgba(10,8,6,.72) 0%,rgba(10,8,6,.34) 46%,rgba(10,8,6,.12) 72%,transparent 100%)}
.hero__in{position:relative;z-index:3}
/* Bubble portrait (lobod-style) on the right, sitting lower in the fold.
   FLUID SIZE: the old min(82vw,1140px) hit the 1140px cap on BOTH a 4K and a 14" laptop, so it was
   effectively a fixed size and looked huge on the small screen. This interpolates between the two
   real anchors instead: ~1140px @2560 (the 4K, which he said was perfect) and ~912px @1512 (the 14"
   MacBook = 80% of that, and pushed further right). min(...,62vw) stops it bloating on narrow screens. */
.hero__portrait{
  --pw:clamp(520px,min(calc(21.8vw + 583px),62vw),1320px);
  position:absolute;right:clamp(-130px,calc(0.95vw - 124px),0px);top:62%;transform:translateY(-50%);
  width:var(--pw);height:var(--pw);z-index:2;display:block;}
/* ambient bubbles get their OWN full-bleed canvas so they roam the whole hero and never clip */
.hero__bub{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block;pointer-events:none;}
@media(min-width:901px){.hero__in{max-width:56%}}
@media(max-width:900px){.hero__portrait{width:120vw;height:70vh;top:40%;right:-12%;opacity:.3;z-index:0;pointer-events:none;}}
.hero .eyebrow{margin-bottom:clamp(22px,4vh,42px)}
.hero .eyebrow .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--acc);margin-right:9px;vertical-align:middle;animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.65)}}
.hero__h{font-weight:800;line-height:1.0;letter-spacing:-.035em;font-size:clamp(44px,10vw,166px);text-transform:uppercase;padding-bottom:.04em}
.hero__h .r{display:block}
.hero__h .w{display:inline-block;transform:translateY(28px);opacity:0;transition:transform 1s var(--ease),opacity 1s var(--ease)}
.hero.in .hero__h .w{transform:none;opacity:1}
.hero__h em{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.01em;color:var(--acc)}
.hero__sub{margin-top:clamp(24px,4vh,46px);font-family:var(--mono);font-size:clamp(10px,1vw,13px);letter-spacing:.2em;color:var(--dim);opacity:0;transition:opacity 1s .8s}
.hero.in .hero__sub{opacity:1}
.cue{position:absolute;left:var(--pad);bottom:32px;z-index:2;display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:var(--dim);opacity:0;transition:opacity 1s 1.1s}
.hero.in .cue{opacity:1}
.cue__l{width:44px;height:1px;background:var(--line);position:relative;overflow:hidden}
.cue__l::after{content:"";position:absolute;inset:0;background:var(--acc);transform:translateX(-100%);animation:sweep 2.2s var(--ease) infinite}
@keyframes sweep{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}

/* ---- MANIFESTO (light) ----------------------------------- */
.mani{max-width:1400px;margin:0 auto}
.mani .eyebrow{margin-bottom:clamp(30px,5vh,58px)}
.mani__wrap{max-width:min(94vw,760px);margin-left:clamp(0px,5vw,110px)}
.mani__l{font-family:var(--serif);font-weight:400;font-size:clamp(24px,3.3vw,50px);line-height:1.25;letter-spacing:-.014em;margin:.34em 0;padding-bottom:.04em}
.mani__l em{color:var(--acc)}
.mani__l.dim{color:var(--dim);font-size:clamp(19px,2.4vw,34px)}
.mani__l.rv{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease-io),transform 1s var(--ease-io)}
.mani__l.rv.in{opacity:1;transform:none}

/* ---- FILM (horizontal reel) ------------------------------ */
.reel{position:relative;height:420vh}
#film{height:640vh}                       /* taller = slower scrub, room for all 10 blocks + big gaps */
#filmTrack{gap:clamp(64px,8vw,168px)}     /* bigger distances between the video blocks */
.reel__pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.reel__head{position:absolute;top:clamp(84px,12vh,130px);left:var(--pad);right:var(--pad);z-index:3;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;pointer-events:none}
.reel__title{font-weight:800;font-size:clamp(46px,9vw,150px);line-height:1;letter-spacing:-.04em;text-transform:uppercase;padding-bottom:.03em}
.reel__title em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--acc);text-transform:none}
.reel__meta{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--dim);text-align:right;white-space:nowrap}
.reel__track{display:flex;align-items:center;gap:clamp(26px,4vw,72px);padding:0 var(--pad);will-change:transform}
/* flightfund crop-window: box grows to near-full-height but stays CROPPED (width capped); the oversized img slides inside */
/* a film block = [ thumbnail crop window ] + [ its name, in the black to the RIGHT ] */
.frame{position:relative;flex:0 0 auto;cursor:pointer;display:flex;align-items:center;gap:clamp(22px,2.2vw,52px)}
.frame__box{position:relative;flex:0 0 auto;width:var(--bw,clamp(260px,21vw,400px));height:var(--bh,58vh);border-radius:5px;overflow:hidden;border:1px solid var(--line);background:var(--panel);will-change:width,height}
.frame__side{flex:0 0 auto;width:clamp(190px,17vw,340px);transform:translateY(var(--capy,0px));display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:10px;pointer-events:none}
/* Film thumbnails at full colour. The graded look was:
     filter:grayscale(.34) brightness(.84) contrast(1.03);
   Kept here so going back is one edit, or dial a lighter grade e.g. grayscale(.15) brightness(.94). */
.frame__img{position:absolute;top:0;left:0;height:100%;width:auto;min-width:100%;max-width:none;object-fit:cover;filter:none;will-change:transform}
.frame__n{position:absolute;top:14px;left:16px;z-index:2;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:#f4ece0;mix-blend-mode:difference}
.frame__play{position:absolute;inset:0;margin:auto;width:66px;height:66px;border:1px solid rgba(255,255,255,.6);border-radius:50%;display:grid;place-items:center;background:rgba(10,8,6,.28);backdrop-filter:blur(4px);opacity:0;transform:scale(.8);transition:.45s var(--ease);z-index:2}
.frame:hover .frame__play{opacity:1;transform:none}
.frame__play svg{width:18px;height:18px;fill:#fff;margin-left:3px}
.frame__t{font-weight:800;font-size:clamp(22px,2.6vw,44px);letter-spacing:-.03em;line-height:1;color:#f7f0e6}
.frame__c{font-family:var(--mono);font-size:clamp(10px,.85vw,13px);letter-spacing:.2em;text-transform:uppercase;color:var(--acc);white-space:nowrap}
.frame__side .rule{width:34px;height:2px;background:var(--acc);opacity:.85}
.reel__prog{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(30px,5vh,54px);height:2px;background:var(--line);z-index:3}
.reel__prog i{display:block;height:100%;width:0;background:var(--acc)}
.reel__hint{position:absolute;bottom:clamp(38px,6vh,64px);right:var(--pad);z-index:3;font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--dim)}

/* ---- STUDIO (horizontal app filmstrip) ------------------- */
.studio{position:relative;height:360vh}
.studio__pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.studio__head{position:absolute;top:clamp(84px,12vh,130px);left:var(--pad);right:var(--pad);z-index:3;display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.studio__track{display:flex;align-items:center;gap:clamp(24px,3.5vw,64px);padding:0 var(--pad);will-change:transform}
.app{flex:0 0 auto;width:clamp(300px,40vw,560px);display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.2vw,34px);align-items:center;will-change:transform}
.app__phone{transition:box-shadow .4s var(--ease)}
.app:hover .app__phone{box-shadow:0 46px 76px -26px rgba(0,0,0,.62)}
.app__phone{width:clamp(120px,13vw,190px);aspect-ratio:9/19;border-radius:26px;border:1px solid var(--line);background:var(--panel);padding:7px;flex:0 0 auto;box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.app__scr{width:100%;height:100%;border-radius:20px;overflow:hidden;background:#111}
.app__scr img{width:100%;height:100%;object-fit:cover}
.app__n{font-family:var(--mono);font-size:12px;color:var(--dim);letter-spacing:.06em}
.app__name{font-weight:800;font-size:clamp(26px,3vw,46px);line-height:1.02;letter-spacing:-.03em;margin:8px 0 4px;padding-bottom:.02em}
.app__tag{color:var(--dim);font-size:clamp(14px,1.1vw,17px);line-height:1.5;margin-bottom:16px;max-width:32ch}
.app__plat{display:flex;gap:7px;flex-wrap:wrap}
.app__plat span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);border-radius:100px;padding:5px 11px;color:var(--dim)}
.app__view{display:inline-flex;gap:7px;align-items:center;margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--fg);border-bottom:1px solid var(--acc);padding-bottom:4px}
.app__view b{color:var(--acc)}
/* MOBILE STUDIO: .app__phone was display:none under 720px, and the phone mockup is what HOLDS the app
   screenshot, so the whole studio collapsed to text with no thumbnails at all. Keep the mockup, just
   size it for a phone and let the copy take the rest of the row. */
@media (max-width:720px){
  .app{width:min(86vw,430px);grid-template-columns:auto 1fr;gap:14px;align-items:center}
  .app__phone{display:block;width:102px;padding:5px;border-radius:17px;box-shadow:0 18px 38px -18px rgba(0,0,0,.6)}
  .app__scr{border-radius:13px}
  .app__name{font-size:21px;margin:5px 0 3px}
  .app__tag{font-size:12.5px;line-height:1.4}
  .app__plat span{font-size:9px}
  .app__view{font-size:11px}
}

/* ---- MUSIC reel (one embedded SoundCloud player per song) ---- */
#music{height:300vh}
/* CUSTOM dark player. SoundCloud's own embed is hard-white, and its artwork is a fixed ~90px
   regardless of iframe height, so a big thumbnail + dark grey is impossible with their UI.
   We drive playback through the Widget API from a hidden iframe and draw our own. */
/* STACKED: artwork on top, title + waveform underneath. This was the narrow-screen layout and it
   simply reads better, so it is now the layout at every width. The card has to be much narrower than
   the old side-by-side 70vw though: a full-width 16:10 artwork at 70vw would be ~1790px on a 4K. */
.song{flex:0 0 auto;width:clamp(320px,44vw,680px);
  display:flex;flex-direction:column;align-items:stretch;gap:clamp(13px,1.3vw,20px);
  background:linear-gradient(160deg,#232020,#171514);border:1px solid rgba(255,255,255,.09);
  border-radius:18px;padding:clamp(14px,1.2vw,20px);}
.song__art{flex:0 0 auto;width:100%;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:#0e0c0b;position:relative;}
.song__art img{width:100%;height:100%;object-fit:cover;display:block;}
.song__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:clamp(10px,1.1vw,18px);}
.song__hd{display:flex;align-items:baseline;gap:11px;min-width:0;}
.song__n{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--dim);flex:0 0 auto;}
.song__t{font-weight:700;font-size:clamp(17px,1.6vw,27px);letter-spacing:-.01em;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.song__row{display:flex;align-items:center;gap:clamp(12px,1.2vw,20px);}
.song__b{flex:0 0 auto;width:clamp(42px,3.4vw,56px);height:clamp(42px,3.4vw,56px);border-radius:50%;border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.05);color:#f4ece0;display:grid;place-items:center;cursor:pointer;transition:.25s var(--ease);pointer-events:auto;}
.song__b:hover{background:var(--acc);border-color:var(--acc);color:#fff;transform:scale(1.06);}
.song__b svg{width:15px;height:15px;fill:currentColor;}
/* REAL waveform: SoundCloud publishes the sample data as JSON (CORS-open) at waveform_url, so we
   draw honest bars from it. Their PNG is an inverse punch-out and cannot be recoloured for a dark UI. */
.song__wave{flex:1;min-width:0;height:clamp(44px,4.4vh,64px);display:flex;align-items:center;gap:2px;cursor:pointer;pointer-events:auto;}
.song__wave span{flex:1 1 0;min-width:0;background:rgba(244,236,224,.20);border-radius:1px;transition:background .1s linear;}
.song__wave span.on{background:var(--acc);}
.song__wave.bar{display:block;position:relative;height:8px;border-radius:4px;background:rgba(244,236,224,.13);}  /* fallback if the JSON is unavailable */
.song__wave.bar i{position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);background:var(--acc);border-radius:4px;transition:width .12s linear;display:block;}
.song__time{flex:0 0 auto;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--dim);}
.song__hide{position:absolute;left:-9999px;top:0;width:320px;height:120px;opacity:0;border:0;pointer-events:none;}   /* taller = bigger artwork thumbnail */
.reel__sc{color:var(--acc);border-bottom:1px solid transparent;transition:border-color .3s;pointer-events:auto}
.reel__sc:hover{border-color:var(--acc)}
#musicTrack{gap:clamp(70px,9vw,200px)}   /* real distance between the song blocks */
/* The stacked card is ~555px tall instead of the old ~200px, and the pin centres its track in the
   full 100vh, so on a laptop it rode up under the "Music." heading. Reserve the head/progress bands
   so the centring happens between them. Film keeps its own centring. */
#music .reel__pin{padding-top:clamp(150px,21vh,230px);padding-bottom:clamp(56px,9vh,100px)}
/* the card stacks by default now, so the phone only needs the width */
@media (max-width:720px){.song{width:88vw;min-width:0}}

/* ---- MUSIC (dark, instruments) --------------------------- */
.music__wrap{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,5vw,84px);align-items:center}
@media (max-width:900px){.music__wrap{grid-template-columns:1fr}}
.music__title{font-weight:800;font-size:clamp(34px,5.4vw,84px);line-height:1.0;letter-spacing:-.035em;text-transform:uppercase;padding-bottom:.04em;margin:18px 0 26px}
.music__title em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--acc);text-transform:none}
.music__p{font-family:var(--serif);font-size:clamp(17px,1.5vw,22px);line-height:1.5;color:var(--dim);margin-bottom:1em;max-width:44ch}
.music__p.lead{color:var(--fg);font-size:clamp(20px,1.9vw,27px)}
.music__link{display:inline-flex;gap:9px;align-items:center;margin-top:12px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;border-bottom:1px solid var(--acc);padding-bottom:4px}
.music__link b{color:var(--acc)}
.player{border:1px solid var(--line);border-radius:8px;padding:clamp(22px,2.6vw,34px);background:var(--panel);position:relative;overflow:hidden}
.viz{display:flex;gap:3px;height:74px;align-items:flex-end;margin-bottom:26px}
.viz i{flex:1;background:var(--acc);border-radius:2px 2px 0 0;height:24%;opacity:.5;transition:height .16s var(--ease),opacity .3s}
.viz i.hi{opacity:1}
.strings{display:flex;flex-direction:column;gap:9px;height:0;overflow:hidden}
.player__eq{font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:var(--acc)}
.player__now{margin:6px 0 16px}
.player__t{font-weight:700;font-size:clamp(18px,1.8vw,25px);letter-spacing:-.02em;line-height:1.15;padding-bottom:.02em}
.player__bar{height:3px;background:var(--line);border-radius:100px;overflow:hidden;cursor:pointer;margin-bottom:8px}
.player__fill{display:block;height:100%;width:0;background:var(--acc)}
.player__time{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--dim);margin-bottom:18px}
.player__ctl{display:flex;gap:13px;align-items:center;margin-bottom:20px}
.player__b{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-size:15px;transition:.3s var(--ease)}
.player__b:hover{border-color:var(--acc);color:var(--acc)}
.player__b.play{width:56px;height:56px;background:var(--fg);color:var(--bg);border-color:var(--fg);font-size:16px}
.player__b.play:hover{background:var(--acc);border-color:var(--acc);color:#fff}
.player__list{list-style:none;max-height:186px;overflow-y:auto;margin:0 -6px}
.player__list li{display:flex;gap:12px;align-items:center;padding:9px 6px;font-size:13px;color:var(--dim);cursor:pointer;border-radius:4px;transition:.2s}
.player__list li:hover{background:var(--panel);color:var(--fg)}
.player__list li.cur{color:var(--acc)}
.player__list li .n{font-family:var(--mono);font-size:11px;opacity:.6;width:20px}
.player__list li .t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#scFrame{position:absolute;left:-9999px;top:0;width:360px;height:200px;opacity:0;pointer-events:none;border:0}

/* ---- CONTACT + FOOTER ------------------------------------ */
.contact{max-width:1400px;margin:0 auto}
.contact__h{font-weight:800;font-size:clamp(44px,9vw,150px);line-height:1.0;letter-spacing:-.04em;text-transform:uppercase;padding-bottom:.04em}
.contact__h em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--acc);text-transform:none}
.contact__lede{max-width:46ch;color:var(--dim);font-size:clamp(15px,1.3vw,19px);line-height:1.55;margin:24px 0 40px}
.form{max-width:640px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:600px){.fgrid{grid-template-columns:1fr}}
.field{position:relative;display:block;margin-bottom:24px}
.field input,.field textarea{width:100%;background:none;border:none;border-bottom:1px solid var(--line);color:var(--fg);font-family:var(--sans);font-size:17px;padding:14px 0 12px;resize:none;transition:border-color .35s}
.field textarea{min-height:92px}
.field span{position:absolute;left:0;top:14px;color:var(--dim);font-size:17px;pointer-events:none;transition:.35s var(--ease)}
.field input:focus~span,.field textarea:focus~span,.field input:not(:placeholder-shown)~span,.field textarea:not(:placeholder-shown)~span{top:-11px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-family:var(--mono);color:var(--acc)}
.field i{position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--acc);transition:width .4s var(--ease)}
.field input:focus~i,.field textarea:focus~i{width:100%}
.hp{position:absolute;left:-9999px}
.send{margin-top:14px;display:inline-flex;align-items:center;gap:14px;padding:16px 32px;border-radius:100px;background:var(--fg);color:var(--bg);font-weight:700;font-size:15px;transition:.4s var(--ease)}
.send .a{transition:transform .4s var(--ease)}
.send:hover{background:var(--acc);color:#fff}
.send:hover .a{transform:translateX(6px)}
.fstatus{margin-top:20px;font-family:var(--mono);font-size:12px;color:var(--dim);min-height:16px}
.fstatus.ok{color:var(--acc)}
.fstatus.err{color:#ff6a5e}
.foot{border-top:1px solid var(--line);padding:44px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;max-width:1400px;margin:clamp(80px,13vh,160px) auto 0}
.foot__b{font-weight:800;font-size:clamp(30px,5vw,64px);letter-spacing:-.03em;text-transform:uppercase;padding-bottom:.03em}
.foot__m{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--dim)}
.foot__top{font-family:var(--mono);font-size:11px;letter-spacing:.14em;border-bottom:1px solid var(--acc);padding-bottom:3px}

/* ---- generic reveal (no clip) ---------------------------- */
.rv{opacity:0;transform:translateY(28px);transition:opacity .95s var(--ease-io),transform .95s var(--ease-io)}
.rv.in{opacity:1;transform:none}

/* ---- LIGHTBOX -------------------------------------------- */
.lb{position:fixed;inset:0;z-index:9990;background:rgba(6,4,3,.985);backdrop-filter:blur(14px);opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.lb.open{opacity:1;pointer-events:auto}
body.lock .nav{opacity:0;pointer-events:none}
.lb__x{position:absolute;top:22px;right:var(--pad);z-index:6;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:#f4ece0;padding:8px 14px;border:1px solid rgba(244,236,224,.3);border-radius:100px}
.lb__x:hover{background:#f4ece0;color:#0a0806}
.lb__stage{position:absolute;inset:0;display:grid;place-items:center;padding:clamp(46px,8vh,90px) var(--pad) 84px}
.lb__frame{width:min(92vw,1400px,164vh);aspect-ratio:16/9;background:#000;border:1px solid rgba(244,236,224,.15);border-radius:5px;overflow:hidden;transform-origin:center top;transition:transform .5s var(--ease)}
.lb.reveal .lb__frame{transform:translateY(-4vh) scale(.64)}
.lb__frame iframe{width:100%;height:100%;border:0}
/* the video list: only the 58px handle shows until revealed (move the cursor to the bottom, or click the handle) */
.lb__car{position:absolute;left:0;right:0;bottom:0;z-index:5;background:linear-gradient(180deg,rgba(6,4,3,0),rgba(6,4,3,.92) 42%);transform:translateY(calc(100% - 58px));transition:transform .55s var(--ease)}
.lb.reveal .lb__car{transform:translateY(0)}
.lb__handle{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:58px;cursor:pointer;background:none;border:none}
.lb__handle-bar{width:46px;height:4px;border-radius:3px;background:var(--line);transition:background .2s}
.lb__handle:hover .lb__handle-bar{background:var(--acc)}
.lb__handle-lab{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.lb__handle-lab::before{content:'▲ '}
.lb.reveal .lb__handle-lab::before{content:'▼ '}
.lb__car-body{display:flex;align-items:center;gap:10px;padding:0 var(--pad) 30px}
.lb__track{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;flex:1}
.lb__track::-webkit-scrollbar{display:none}
.lb__cell{flex:0 0 auto;width:clamp(140px,15vw,196px);aspect-ratio:16/9;border:1px solid rgba(244,236,224,.15);border-radius:4px;overflow:hidden;position:relative;opacity:.5;transition:.3s;cursor:pointer}
.lb__cell.cur,.lb__cell:hover{opacity:1;border-color:var(--acc)}
.lb__cell img{width:100%;height:100%;object-fit:cover}
.lb__cell span{position:absolute;left:6px;bottom:5px;font-family:var(--mono);font-size:9px;background:rgba(6,4,3,.7);color:#f4ece0;padding:2px 5px;border-radius:3px}
.lb__arrow{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:rgba(10,8,6,.5);color:#f4ece0;font-size:18px;cursor:pointer;display:none}
.lb__arrow.show{display:grid;place-items:center}
.lb__arrow:disabled{opacity:.3;cursor:default}
@media (hover:none){.lb__car{transform:translateY(calc(100% - 66px))}}

/* ---- reduced motion -------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .hero__h .w{transform:none;opacity:1}
  .mani__l.rv,.rv{opacity:1;transform:none}
  .reel,.studio,#music{height:auto}
  .reel__pin,.studio__pin{position:static;height:auto;overflow:visible;padding:40px 0}
  .reel__track,.studio__track{flex-wrap:wrap;transform:none!important}
  .pre{display:none}
}