:root{
  --ink:#0A0910; --paper:#F4EFE6; --dim:rgba(244,239,230,.62);
  --c1:#FF5B1F; --c2:#FF2E7E; --c3:#00C37A; --c4:#7B4DFF; --c5:#FF3B30; --gold:#FFD23F;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
html{height:100%; scroll-padding-top:calc(env(safe-area-inset-top,0px) + 64px); scroll-behavior:smooth}
*,*::before,*::after{box-sizing:border-box}
body{margin:0; background:var(--ink); color:var(--paper); font-family:'Instrument Serif',Georgia,serif; font-size:22px; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold); outline-offset:3px}
.mono{font-family:'Space Mono',ui-monospace,monospace}
.anton{font-family:'Anton','Arial Narrow',Impact,sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:.01em}

/* film grain over everything */
.grain{position:fixed; inset:0; pointer-events:none; z-index:50; opacity:.11; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* TRANSPORT BAR (the session) */
.transport{position:fixed; top:0; left:0; right:0; z-index:40; padding:calc(env(safe-area-inset-top,0px) + 10px) 18px 10px; display:flex; align-items:center; gap:16px; background:linear-gradient(180deg,rgba(10,9,16,.92),rgba(10,9,16,.55)); backdrop-filter:blur(8px); border-bottom:1px solid rgba(244,239,230,.1)}
.tc{font-family:'Space Mono',monospace; font-size:15px; letter-spacing:.06em; min-width:74px; color:var(--gold)}
.rec{width:10px; height:10px; border-radius:50%; background:#ff2a2a; box-shadow:0 0 12px #ff2a2a; animation:blink 1.6s steps(2,jump-none) infinite}
@keyframes blink{50%{opacity:.15}}
.tl{position:relative; flex:1; height:30px; display:flex; gap:3px}
.tl button{all:unset; cursor:pointer; flex:1; border-radius:4px; background:rgba(244,239,230,.08); position:relative; overflow:hidden; transition:background .25s}
.tl button::after{content:attr(data-n); position:absolute; left:8px; top:50%; transform:translateY(-50%); font:700 11px 'Space Mono',monospace; color:var(--paper); opacity:.7}
.tl button.on{background:var(--cc)}
.tl button.on::after{color:#0A0910; opacity:1}
.tl button:focus-visible{outline:2px solid var(--gold)}
.ph{position:absolute; top:-4px; bottom:-4px; width:2px; background:var(--paper); left:0; pointer-events:none; box-shadow:0 0 10px rgba(255,255,255,.7)}
.bpm{font:400 12px 'Space Mono',monospace; color:var(--dim); white-space:nowrap}

/* HERO (the film) */
.hero{position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; padding:120px 6vw 9vh; overflow:hidden; isolation:isolate}
.hero::before,.hero::after{content:""; position:absolute; left:0; right:0; height:7vh; background:#000; z-index:3}
.hero::before{top:0} .hero::after{bottom:0}
.bars{position:absolute; inset:0 0 0 0; z-index:-1; display:flex; align-items:center; gap:.5vw; padding:0 1vw; opacity:.9}
.bars i{flex:1; height:8%; border-radius:99px; background:linear-gradient(180deg,var(--c1),var(--c2) 40%,var(--c4) 70%,var(--c3)); transform-origin:center; animation:bar var(--d,1.6s) ease-in-out var(--dl,0s) infinite alternate; opacity:.85}
@keyframes bar{from{transform:scaleY(.15)} to{transform:scaleY(var(--h,6))}}
.hero .shade{position:absolute; inset:0; z-index:-1; background:radial-gradient(120% 90% at 20% 100%,rgba(10,9,16,.96) 25%,rgba(10,9,16,.55) 60%,rgba(10,9,16,.2))}
.hero h1{margin:0; font-size:clamp(56px,17vw,260px); line-height:.82; letter-spacing:-.01em}
.hero h1 span{display:block}
.hero h1 .nm{font-size:clamp(44px,8.5vw,128px); line-height:.95; margin-bottom:.06em}
.hero .kick{margin:0 0 18px; font:700 13px 'Space Mono',monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--gold)}
.hero .meta a{color:var(--paper); text-decoration:underline; text-underline-offset:3px}
.hero h1 .o{color:transparent; -webkit-text-stroke:2px var(--paper)}
.hero .lede{max-width:34ch; font-size:clamp(22px,2.4vw,32px); line-height:1.25; margin:28px 0 0}
.hero .meta{display:flex; flex-wrap:wrap; gap:8px 34px; margin-top:26px; font:400 13px 'Space Mono',monospace; color:var(--dim)}
.hero .meta b{color:var(--paper); font-weight:400; display:block; font-size:15px}

/* STATEMENT */
.stmt{padding:16vh 6vw; max-width:1100px; margin:0 auto}
.stmt p{margin:0; font-size:clamp(28px,4vw,52px); line-height:1.12}
.stmt em{color:var(--gold)}
.stmt small{display:block; margin-top:30px; font:400 14px 'Space Mono',monospace; color:var(--dim)}

/* BIO */
.bio{padding:8vh 6vw 14vh; display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:6vw; align-items:center; max-width:1300px; margin:0 auto}
.bio .portrait{position:relative; width:100%; aspect-ratio:4/5; border-radius:6px; overflow:hidden; background:rgba(244,239,230,.05); border:1px dashed rgba(244,239,230,.35); display:flex; align-items:center; justify-content:center; text-align:center; padding:22px}
.bio .portrait span{font:400 13px 'Space Mono',monospace; color:var(--dim); max-width:24ch}
.bio .portrait img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.bio .eyebrow{font:700 13px 'Space Mono',monospace; color:var(--gold); margin:0 0 10px}
.bio h2{margin:0 0 22px; font-size:clamp(44px,6vw,84px); line-height:.88}
.bio .body p{margin:0 0 .8em; max-width:38em; color:rgba(244,239,230,.88)}
.bio .facts{display:flex; flex-wrap:wrap; gap:10px 30px; margin:26px 0 0; font:400 13px 'Space Mono',monospace; color:var(--dim)}
.bio .facts b{display:block; color:var(--paper); font-weight:400; font-size:15px}
.bio .quote{margin-top:28px; padding-left:20px; border-left:3px solid var(--gold); font-style:italic; font-size:23px; color:rgba(244,239,230,.9)}
.bio .quote cite{display:block; margin-top:10px; font:400 12px 'Space Mono',monospace; font-style:normal; color:var(--dim)}

/* SESSION VIEW */
.session{padding:10vh 5vw 14vh; background:#0E0C16; border-top:1px solid rgba(244,239,230,.1); border-bottom:1px solid rgba(244,239,230,.1)}
.session h2{margin:0 0 10px; font-size:clamp(44px,7vw,96px); line-height:.9}
.session p.sub{margin:0 0 40px; max-width:44ch; color:var(--dim); font-size:24px}
.gridwrap{overflow-x:auto; max-width:100%}
.grid{position:relative; display:grid; grid-template-columns:170px repeat(5,1fr); gap:6px; align-items:stretch; overflow-x:auto; padding-bottom:6px}
.grid .hd{font:700 12px 'Space Mono',monospace; color:var(--dim); padding:6px 8px}
.grid .lane{font:400 13px 'Space Mono',monospace; padding:0 10px; display:flex; align-items:center; background:rgba(244,239,230,.05); border-radius:6px; min-height:58px}
.grid .slot{min-height:58px; border-radius:6px; background:rgba(244,239,230,.03)}
.clip{grid-row:var(--r); grid-column:var(--s)/7; border-radius:6px; background-color:var(--cc); position:relative; overflow:hidden; min-height:58px; display:flex; align-items:center; padding:0 12px; color:#0A0910; font:700 12px 'Space Mono',monospace;
  background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.22) 0 3px,transparent 3px 8px); background-blend-mode:multiply; -webkit-mask-image:none}
.clip span{background:var(--cc); padding:3px 8px; border-radius:4px}
.playhead{position:absolute; top:0; bottom:0; left:170px; width:2px; background:var(--paper); box-shadow:0 0 14px #fff; z-index:5; transform:translateX(0); transition:none}
.session.play .playhead{animation:sweep 7s linear infinite}
@keyframes sweep{from{left:176px} to{left:calc(100% - 4px)}}

/* MARQUEE */
.marq{overflow:hidden; white-space:nowrap; background:var(--cc); color:#0A0910; padding:12px 0; border-block:2px solid #0A0910}
.marq div{display:inline-block; animation:mq 26s linear infinite; font-size:clamp(30px,5vw,64px); line-height:1}
.marq div span{margin:0 26px}
@keyframes mq{to{transform:translateX(-50%)}}

/* CHAPTERS (the records) */
.chap{position:relative; min-height:100svh; display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:5vw; align-items:center; padding:14vh 6vw; overflow:hidden; isolation:isolate;
  background:radial-gradient(90% 70% at 15% 20%,color-mix(in srgb,var(--cc) 34%,transparent),transparent 65%),radial-gradient(70% 60% at 100% 100%,color-mix(in srgb,var(--cc) 18%,transparent),transparent 70%),var(--ink)}
.chap.flip .sleeve-wrap{order:2}
.big{position:absolute; z-index:-1; right:3vw; top:2vh; font-size:clamp(200px,34vw,520px); line-height:.85; color:transparent; -webkit-text-stroke:2px var(--cc); opacity:.28; pointer-events:none}
.chap.flip .big{right:auto; left:3vw}

.sleeve-wrap{position:relative; width:min(100%,520px); aspect-ratio:1; margin:0 auto}
.vinyl{position:absolute; top:4%; left:12%; width:92%; aspect-ratio:1; border-radius:50%; background:
  radial-gradient(circle,var(--cc) 0 14%,#111 14.5% 16%,transparent 16.5%),
  repeating-radial-gradient(circle,#0c0c0c 0 3px,#1b1b1b 3px 4px); box-shadow:0 20px 50px rgba(0,0,0,.6); animation:spin 9s linear infinite; transform:translateX(0)}
.vinyl::after{content:""; position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 20deg,transparent 0 20%,rgba(255,255,255,.14) 25%,transparent 32% 70%,rgba(255,255,255,.1) 76%,transparent 82%)}
@keyframes spin{to{transform:rotate(360deg)}}
.sleeve{position:absolute; inset:0; width:88%; height:88%; border-radius:6px; overflow:hidden; box-shadow:0 30px 70px rgba(0,0,0,.65); transform:rotate(-2.5deg); background:var(--cc)}
.chap.flip .sleeve{transform:rotate(2.5deg)}
.sleeve .lbl{position:absolute; left:14px; top:12px; font:700 11px 'Space Mono',monospace; color:#0A0910; background:var(--paper); padding:3px 7px; z-index:3}
.sleeve .ttl{position:absolute; left:14px; bottom:12px; right:14px; z-index:3; font-size:clamp(34px,5vw,64px); line-height:.86; color:var(--paper); text-shadow:0 2px 0 rgba(0,0,0,.35)}
.art{position:absolute; inset:0}
.art1{background:repeating-conic-gradient(from 0deg at 50% 62%,#FF5B1F 0 6deg,#FF9A5C 6deg 12deg)}
.art1::after{content:""; position:absolute; left:50%; top:62%; width:34%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background:#FFE9C7; box-shadow:0 0 0 12px #FF5B1F}
.art2{background:#26000F}
.art2::before,.art2::after{content:""; position:absolute; width:62%; aspect-ratio:1; border-radius:50%; top:14%; mix-blend-mode:screen}
.art2::before{left:8%; background:radial-gradient(circle at 40% 40%,#FF2E7E,#B5004D 70%)}
.art2::after{right:8%; background:radial-gradient(circle at 60% 40%,#FFB3D1,#FF2E7E 70%)}
.art3{background:repeating-radial-gradient(circle at 50% 112%,#00C37A 0 22px,#04452F 22px 44px)}
.art3::after{content:""; position:absolute; left:50%; top:26%; width:22%; aspect-ratio:1; transform:translateX(-50%); border-radius:50%; background:#F4EFE6; box-shadow:0 0 0 8px #00C37A,0 0 60px 10px rgba(244,239,230,.5)}
.art4{background:linear-gradient(180deg,#160B3A,#3B22A0 60%,#160B3A)}
.art4::before{content:""; position:absolute; left:50%; top:-4%; width:120%; height:70%; transform:translateX(-50%); background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0)); clip-path:polygon(44% 0,56% 0,100% 100%,0 100%)}
.art4 .keys{position:absolute; left:0; right:0; bottom:0; height:38%; background:repeating-linear-gradient(90deg,#F4EFE6 0 26px,#0A0910 26px 28px)}
.art4 .keys::before{content:""; position:absolute; inset:0 0 38% 0; background:repeating-linear-gradient(90deg,transparent 0 17px,#0A0910 17px 33px,transparent 33px 56px); -webkit-mask:linear-gradient(90deg,#000 0 100%)}
.art5{background:#1a0000; display:flex; align-items:center; gap:2.2%; padding:0 4%}
.art5 i{flex:1; border-radius:99px; background:linear-gradient(180deg,var(--gold),var(--c5))}

.notes{position:relative}
.notes .who{font:700 13px 'Space Mono',monospace; color:var(--cc); margin:0 0 14px}
.notes h2{margin:0 0 18px; font-size:clamp(58px,9vw,140px); line-height:.85}
.pull{margin:0 0 26px; font-size:clamp(26px,3.3vw,44px); line-height:1.08; color:var(--paper); font-style:italic}
.notes .body{max-width:34em; color:rgba(244,239,230,.88)}
.notes .body p{margin:0 0 .8em}
.taught{margin-top:22px; padding:16px 18px; border-left:4px solid var(--cc); background:rgba(244,239,230,.05)}
.taught b{display:block; font:700 12px 'Space Mono',monospace; color:var(--cc); margin-bottom:4px}
.credits{margin:22px 0 0; display:flex; flex-wrap:wrap; gap:6px 26px; font:400 13px 'Space Mono',monospace; color:var(--dim)}
.credits b{display:block; color:var(--paper); font-weight:400}
.listen{display:inline-block; margin-top:22px; padding:12px 22px; border:2px solid var(--cc); border-radius:99px; text-decoration:none; font:700 13px 'Space Mono',monospace; color:var(--paper); transition:background .2s,color .2s}
.listen:hover{background:var(--cc); color:#0A0910}
.frame{position:relative; margin-top:30px; aspect-ratio:16/9; width:100%; border:1px solid rgba(244,239,230,.35); background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 12px,transparent 12px 24px); display:flex; align-items:center; justify-content:center; text-align:center; padding:20px; overflow:hidden}
.frame::before,.frame::after{content:""; position:absolute; left:0; right:0; height:9%; background:#000}
.frame::before{top:0} .frame::after{bottom:0}
.frame .cap{position:relative; z-index:2; font:400 13px 'Space Mono',monospace; color:var(--dim); max-width:32ch}
.frame .r{position:absolute; z-index:2; top:12%; left:14px; font:700 11px 'Space Mono',monospace; color:#ff4a4a}
.frame .t{position:absolute; z-index:2; bottom:12%; right:14px; font:400 11px 'Space Mono',monospace; color:var(--paper)}
.frame img,.frame video,.frame iframe{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0; z-index:1}

/* CLOSING */
.end{padding:18vh 6vw 20vh; text-align:center; background:radial-gradient(70% 50% at 50% 0,rgba(255,210,63,.12),transparent 70%),var(--ink)}
.end h2{margin:0 auto 16px; font-size:clamp(52px,10vw,150px); line-height:.86; max-width:12ch}
.end .lead{max-width:30ch; margin:0 auto 60px; font-size:clamp(24px,3vw,38px); line-height:1.15}
.tracks{max-width:640px; margin:0 auto 60px; text-align:left; border-top:1px solid rgba(244,239,230,.2)}
.tracks a{display:flex; gap:16px; align-items:baseline; padding:16px 4px; border-bottom:1px solid rgba(244,239,230,.2); text-decoration:none; transition:padding .2s}
.tracks a:hover{padding-left:14px}
.tracks .n{font:700 13px 'Space Mono',monospace; color:var(--cc); min-width:28px}
.tracks .t{flex:1; font-size:28px}
.tracks .k{font:400 12px 'Space Mono',monospace; color:var(--dim); text-align:right}
.roll{font:400 13px 'Space Mono',monospace; color:var(--dim); line-height:2}
.roll b{color:var(--paper); font-weight:400}

@media (max-width:860px){
  body{font-size:20px}
  .chap{grid-template-columns:1fr; padding:12vh 6vw; gap:34px; min-height:0}
  .bio{grid-template-columns:1fr; gap:34px}
  .bio .portrait{max-width:280px; margin:0 auto}
  .chap.flip .sleeve-wrap{order:0}
  .sleeve-wrap{width:min(88vw,420px)}
  .bpm{display:none}
  .grid{grid-template-columns:120px repeat(5,minmax(70px,1fr)); min-width:640px}
  .playhead{left:120px}
  @keyframes sweep{from{left:126px} to{left:calc(100% - 4px)}}
  .tl button::after{left:6px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .bars i,.vinyl,.marq div,.rec,.session.play .playhead{animation:none}
  .bars i{transform:scaleY(2.4)}
}

/* PROJECT INDEX (main page) */
.projects{padding:14vh 6vw 10vh}
.projects h2{margin:0 0 10px; font-size:clamp(44px,7vw,96px); line-height:.9}
.projects p.sub{margin:0 0 48px; max-width:44ch; color:var(--dim); font-size:24px}
.plist{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:40px 32px}
.pcard{display:flex; flex-direction:column; gap:16px; text-decoration:none; color:var(--paper); min-width:0}
.pcard .sleeve-wrap{width:100%; max-width:100%}
.pcard .vinyl{transition:transform .5s ease; animation:none}
.pcard:hover .vinyl,.pcard:focus-visible .vinyl{transform:translateX(9%) rotate(40deg)}
.pcard .meta{display:flex; flex-direction:column; gap:4px}
.pcard .n{font:700 12px 'Space Mono',monospace; color:var(--cc)}
.pcard .nm{font-size:clamp(36px,4vw,52px); line-height:.9}
.pcard .k{font-size:20px; color:var(--dim)}
.pcard .go{align-self:flex-start; margin-top:6px; padding:9px 18px; border:2px solid var(--cc); border-radius:99px; font:700 12px 'Space Mono',monospace; transition:background .2s,color .2s}
.pcard:hover .go{background:var(--cc); color:#0A0910}
.clip{text-decoration:none}
.clip:hover span{text-decoration:underline}

/* TRANSPORT on project pages */
.tl a{all:unset; cursor:pointer; flex:1; border-radius:4px; background:rgba(244,239,230,.08); position:relative; overflow:hidden; transition:background .25s}
.tl a::after{content:attr(data-n); position:absolute; left:8px; top:50%; transform:translateY(-50%); font:700 11px 'Space Mono',monospace; color:var(--paper); opacity:.7}
.tl a.on{background:var(--cc)} .tl a.on::after{color:#0A0910; opacity:1}
.tl a.cur{outline:2px solid var(--paper); outline-offset:1px}
.tl a:focus-visible{outline:2px solid var(--gold)}
.back{font:700 12px 'Space Mono',monospace; color:var(--paper); text-decoration:none; white-space:nowrap; padding:6px 10px; border:1px solid rgba(244,239,230,.3); border-radius:99px}
.back:hover{border-color:var(--gold); color:var(--gold)}

/* PROJECT PAGE */
.phero{min-height:0; padding:17vh 6vw 10vh}
.phero .notes h1{margin:0 0 18px; font-size:clamp(58px,9vw,140px); line-height:.85}
.phero .song{font:400 14px 'Space Mono',monospace; color:var(--dim); margin:0 0 20px}
.story{max-width:1100px; margin:0 auto; padding:6vh 6vw 4vh; display:grid; gap:56px}
.step{display:grid; grid-template-columns:minmax(0,200px) minmax(0,1fr); gap:32px; align-items:start}
.step h2{margin:0; font:700 13px 'Space Mono',monospace; color:var(--cc); letter-spacing:.08em; text-transform:uppercase; padding-top:8px}
.step .txt{min-width:0}
.step .txt p{margin:0 0 .8em; max-width:36em}
.step ol{margin:0; padding:0; list-style:none; display:grid; gap:14px; counter-reset:s}
.step ol li{counter-increment:s; display:grid; grid-template-columns:44px minmax(0,1fr); gap:10px; max-width:38em}
.step ol li::before{content:counter(s,decimal-leading-zero); font:700 13px 'Space Mono',monospace; color:var(--cc); padding-top:7px}
.step .taught{margin:0}
.gallery{max-width:1300px; margin:0 auto; padding:4vh 6vw 8vh; display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:18px}
.gallery .frame{margin:0}
.gallery .side{display:grid; gap:18px; min-width:0}
.gallery .side .frame{aspect-ratio:4/3}
.pfoot{max-width:1100px; margin:0 auto; padding:0 6vw 10vh; display:grid; gap:40px}
.pfoot .credits{margin:0}
.pnav{display:grid; grid-template-columns:1fr 1fr; gap:18px; border-top:1px solid rgba(244,239,230,.2); padding-top:30px}
.pnav a{display:flex; flex-direction:column; gap:6px; text-decoration:none; padding:18px 20px; border:1px solid rgba(244,239,230,.18); border-radius:6px; transition:border-color .2s}
.pnav a:hover{border-color:var(--cc)}
.pnav a.next{text-align:right; grid-column:2}
.pnav small{font:400 12px 'Space Mono',monospace; color:var(--dim)}
.pnav b{font-size:clamp(28px,3.4vw,42px); line-height:.95; font-weight:400}
@media (max-width:860px){
  .step{grid-template-columns:1fr; gap:12px}
  .gallery{grid-template-columns:1fr}
  .phero{padding-top:14vh}
  .pnav{grid-template-columns:1fr} .pnav a.next{grid-column:auto}
  .tl a::after{left:6px}
}
@media (prefers-reduced-motion:reduce){ .pcard .vinyl{transition:none} }

/* WHY */
.why{max-width:1100px; margin:0 auto; padding:10vh 6vw 14vh; border-top:1px solid rgba(244,239,230,.12)}
.why .eyebrow{font:700 13px 'Space Mono',monospace; color:var(--gold); margin:0 0 10px; letter-spacing:.08em; text-transform:uppercase}
.why h2{margin:0 0 28px; font-size:clamp(40px,5.6vw,80px); line-height:.9; max-width:14ch; text-wrap:balance}
.why .body{display:grid; gap:18px; max-width:40em}
.why .body p{margin:0; color:rgba(244,239,230,.9)}
.gap{display:inline; padding:2px 6px; border:1px dashed rgba(255,210,63,.6); border-radius:4px; color:var(--gold); font:400 15px/1.7 'Space Mono',monospace}
/* sleeve title sizing: fit long real titles */
.sleeve .ttl{font-size:clamp(24px,3.3vw,48px); line-height:.92; overflow-wrap:anywhere; text-shadow:0 2px 14px rgba(0,0,0,.55)}
.sleeve:has(.art4) .ttl{bottom:42%}

/* transition pull quote */
.stmt .pq{margin:0; padding-left:28px; border-left:3px solid var(--gold)}
.stmt .pq p{margin:0; font-size:clamp(28px,4vw,52px); line-height:1.12; text-wrap:balance}
.stmt .pq footer{margin-top:22px; font:400 14px 'Space Mono',monospace; color:var(--dim)}
.stmt .pq footer a{color:var(--dim); text-decoration:underline; text-underline-offset:3px}
.stmt .pq footer a:hover{color:var(--gold)}

/* option 4: softer hand-off from hero to bio */
.bio.soft{position:relative; padding-top:16vh}
.bio.soft::before{content:""; position:absolute; left:0; right:0; top:-1px; height:16vh; background:linear-gradient(180deg,#000,var(--ink)); pointer-events:none}

/* full-width photo between hero and bio */
.band-photo{margin:0; position:relative}
.band-photo img{display:block; width:100%; max-width:100%; aspect-ratio:21/9; object-fit:cover; object-position:30% 50%}
.band-photo figcaption{padding:12px 6vw 0; font:400 13px 'Space Mono',monospace; color:var(--dim)}
.bio .portrait img{position:static; display:block; width:100%; height:100%; object-fit:cover}
.bio .portrait:has(img){border:0; padding:0; background:none}
@media (max-width:860px){ .band-photo img{aspect-ratio:4/3; object-position:22% 50%} }

/* session v2: wider skill lanes */
.grid{grid-template-columns:230px repeat(5,1fr)}
.playhead{left:230px}
@keyframes sweep{from{left:236px} to{left:calc(100% - 4px)}}
.grid .lane{line-height:1.3; padding:8px 12px}
.clip span{white-space:nowrap}
@media (max-width:860px){
  .grid{grid-template-columns:150px repeat(5,minmax(96px,1fr)); min-width:680px}
  .playhead{left:150px}
  @keyframes sweep{from{left:156px} to{left:calc(100% - 4px)}}
}
/* session on phones: stack each skill above its clip, no sideways scroll */
@media (max-width:600px){
  .grid{display:flex; flex-direction:column; gap:6px; min-width:0; overflow:visible}
  .grid .hd,.grid .playhead{display:none}
  .grid .lane{min-height:0; background:none; padding:10px 2px 0; color:var(--dim)}
  .grid .lane:nth-of-type(7){order:1} .grid .clip:nth-of-type(1){order:2}
  .grid .lane:nth-of-type(8){order:3} .grid .clip:nth-of-type(2){order:4}
  .grid .lane:nth-of-type(9){order:5} .grid .clip:nth-of-type(3){order:6}
  .grid .lane:nth-of-type(10){order:7} .grid .clip:nth-of-type(4){order:8}
  .grid .lane:nth-of-type(11){order:9} .grid .clip:nth-of-type(5){order:10}
  .clip{min-height:48px}
}

/* MY 2026 */
.year{padding:10vh 5vw 14vh; background:#0E0C16; border-block:1px solid rgba(244,239,230,.1)}
.year h2{margin:0 0 10px; font-size:clamp(44px,7vw,96px); line-height:.9}
.year p.sub{margin:0 0 40px; max-width:46ch; color:var(--dim); font-size:24px}
.yr{position:relative; --lane:180px}
.yr-head,.yr-row{display:grid; grid-template-columns:var(--lane) minmax(0,1fr); gap:8px}
.yr-months{display:grid; grid-template-columns:repeat(12,1fr); font:700 12px 'Space Mono',monospace; color:var(--dim); padding:0 0 8px}
.yr-months span{border-left:1px solid rgba(244,239,230,.12); padding-left:6px}
.yr-row{margin-bottom:8px}
.yr-lane{font:400 13px 'Space Mono',monospace; display:flex; align-items:center; padding:0 12px; background:rgba(244,239,230,.05); border-radius:6px; min-height:58px}
.yr-track{position:relative; min-height:58px; border-radius:6px; background:repeating-linear-gradient(90deg,rgba(244,239,230,.04) 0 1px,transparent 1px calc(100%/12)),rgba(244,239,230,.025)}
.yr-clip{position:absolute; top:6px; bottom:6px; border-radius:5px; background-color:var(--cc); background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.22) 0 3px,transparent 3px 8px); color:#0A0910; text-decoration:none; display:flex; align-items:center; padding:0 10px; font:700 12px 'Space Mono',monospace; white-space:nowrap; overflow:visible}
.yr-clip span{background:var(--cc); padding:2px 6px; border-radius:3px}
.yr-clip.sm span{position:absolute; left:calc(100% + 6px); background:none; color:var(--paper); padding:0}
.yr-clip.sm.lft span{left:auto; right:calc(100% + 6px)}
a.yr-clip:hover{filter:brightness(1.15)}
.yr-now,.yr-next{position:absolute; top:0; bottom:0; left:calc(var(--lane) + 8px + (100% - var(--lane) - 8px) * var(--x) / 100); width:2px; pointer-events:none}
.yr-now{background:var(--paper); box-shadow:0 0 12px #fff}
.yr-next{border-left:2px dashed var(--gold)}
.yr-now span,.yr-next span{position:absolute; top:-2px; left:6px; font:700 11px 'Space Mono',monospace; white-space:nowrap}
.yr-now span{color:var(--paper); background:#0E0C16; padding:0 4px}
.yr-next span{color:var(--gold); top:18px; background:#0E0C16; padding:0 4px}
.yr-list{display:none}
@media (max-width:760px){
  .yr{display:none}
  .yr-list{display:grid; gap:14px; margin:0; padding:0 0 0 18px; list-style:none; border-left:2px solid rgba(244,239,230,.2)}
  .yr-list li{display:grid; gap:2px; position:relative}
  .yr-list li::before{content:""; position:absolute; left:-25px; top:6px; width:10px; height:10px; border-radius:50%; background:var(--gold)}
  .yr-list b{font:700 12px 'Space Mono',monospace; color:var(--gold)}
  .yr-list span{font-size:19px}
  .yr-list a{color:var(--paper)}
}

/* SHOWREEL */
.reel{padding:10vh 5vw 14vh; background:#0E0C16; border-block:1px solid rgba(244,239,230,.1)}
.reel h2{margin:0 0 10px; font-size:clamp(40px,6.5vw,92px); line-height:.9; text-wrap:balance}
.reel p.sub{margin:0 0 30px; max-width:48ch; color:var(--dim); font-size:22px}
.rl-transport{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin:0 0 22px}
.rl-play{all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:14px; padding:14px 26px 14px 22px; border-radius:99px; background:var(--gold); color:#0A0910; font:700 16px 'Space Mono',monospace; transition:transform .15s}
.rl-play:hover{transform:scale(1.04)}
.rl-play:focus-visible{outline:3px solid var(--paper); outline-offset:3px}
.i-play{width:0; height:0; border-left:16px solid #0A0910; border-top:10px solid transparent; border-bottom:10px solid transparent}
.rl-play.is-on .i-play{width:14px; height:18px; border:0; background:linear-gradient(90deg,#0A0910 0 5px,transparent 5px 9px,#0A0910 9px)}
.rl-status{display:flex; flex-direction:column; gap:2px}
.rl-now{font:700 14px 'Space Mono',monospace; color:var(--paper)}
.rl-tc{font:400 13px 'Space Mono',monospace; color:var(--gold); letter-spacing:.05em}
.rl{position:relative; list-style:none; margin:0; padding:0; --info:300px; --act:210px}
.rl-row{display:grid; grid-template-columns:var(--info) minmax(0,1fr); gap:12px; align-items:center; padding:10px 0; border-top:1px solid rgba(244,239,230,.08)}
.rl-info{display:flex; gap:12px; align-items:flex-start; min-width:0}
.rl-num{font:700 14px 'Space Mono',monospace; color:var(--cc); padding-top:3px}
.rl-title{font-size:22px; color:var(--paper); text-decoration:none; line-height:1.15}
.rl-title:hover{text-decoration:underline; text-underline-offset:3px}
.rl-role{margin:4px 0 0; font:400 12px/1.5 'Space Mono',monospace; color:var(--dim)}
.rl-track{position:relative; height:64px; border-radius:6px; background:rgba(244,239,230,.03)}
.rl-clip{all:unset; position:absolute; top:4px; bottom:4px; border-radius:6px; background:var(--cc); cursor:pointer; overflow:hidden; box-sizing:border-box}
.rl-clip canvas{position:absolute; inset:0; width:100%; height:100%}
.rl-cliptag{position:absolute; left:8px; top:6px; font:700 11px 'Space Mono',monospace; color:#0A0910; background:rgba(255,255,255,.75); padding:2px 6px; border-radius:3px}
.rl-clip:hover:not(.empty){filter:brightness(1.12)}
.rl-clip.on{box-shadow:0 0 0 2px var(--paper),0 0 24px var(--cc)}
.rl-clip:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.rl-clip.empty{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--cc) 35%,transparent) 0 8px,color-mix(in srgb,var(--cc) 20%,transparent) 8px 16px); cursor:not-allowed}
.rl-clip.empty .rl-cliptag{background:none; color:var(--paper)}
.rl-actions{display:flex; flex-direction:column; gap:6px}
.rl-btn{display:block; text-align:center; padding:8px 12px; border-radius:99px; border:1.5px solid var(--cc); color:var(--paper); text-decoration:none; font:700 12px 'Space Mono',monospace}
.rl-btn:hover{background:var(--cc); color:#0A0910}
.rl-btn.ghost{border-color:rgba(244,239,230,.3); font-weight:400}
.rl-btn.ghost:hover{background:rgba(244,239,230,.12); color:var(--paper)}
.rl-head{position:absolute; top:0; bottom:0; width:2px; background:var(--paper); box-shadow:0 0 12px #fff; pointer-events:none; left:calc(var(--info) + 12px + (100% - var(--info) - 12px) * var(--p-num,0))}
.rl-title{display:block}
.rl-open{display:inline-block; margin:4px 0 2px; font:700 11px 'Space Mono',monospace; color:var(--cc); text-decoration:none; white-space:nowrap}
.rl-open:hover{text-decoration:underline; text-underline-offset:3px}
.rl-hint{margin:18px 0 0; font:400 13px 'Space Mono',monospace; color:var(--dim); max-width:70ch}
@media (max-width:1000px){ .rl{--info:230px; --act:180px} }
@media (max-width:760px){
  .rl-row{grid-template-columns:1fr; gap:10px; padding:16px 0}
  .rl-track{height:56px}
  .rl-clip{left:0 !important; width:100% !important}
  .rl-actions{flex-direction:row}
  .rl-actions .rl-btn{flex:1}
  .rl-head{display:none}
}
@media (prefers-reduced-motion:reduce){ .rl-play{transition:none} }
/* PROJECT CARDS v2 */
.projects h2{margin:0 0 10px}
.plist{grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr)); gap:56px 40px}
.pcard{gap:22px}
.pcard .sleeve-wrap{width:74%; max-width:100%; margin:0}
.plist{overflow-x:clip}
.pcard .vinyl{animation:none; transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.pcard:hover .vinyl,.pcard:focus-visible .vinyl,.pcard.out .vinyl{transform:translateX(30%) rotate(200deg)}
.vinyl .vlabel{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:26%; text-align:center; font:700 8px/1.25 'Space Mono',monospace; color:#0A0910; letter-spacing:.05em; z-index:2}
.sleeve.cover{background:#111; transform:rotate(-2deg); z-index:1}
.sleeve.cover img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; max-width:none}
.sleeve.cover::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 52%,rgba(0,0,0,.72)); z-index:1}
.sleeve.cover .lbl{z-index:3}
.sleeve.cover .ttl{margin:0; z-index:3; font-size:clamp(28px,3.4vw,46px); line-height:.92; text-shadow:0 2px 10px rgba(0,0,0,.5)}
.pmeta{margin:0; display:grid; gap:10px}
.pmeta div{display:grid; gap:2px}
.pmeta dt{font:700 11px 'Space Mono',monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--cc)}
.pmeta dd{margin:0; font-size:19px; line-height:1.35; color:var(--paper)}
.pmeta div:last-child dd{font:400 13px/1.55 'Space Mono',monospace; color:var(--dim)}
.pcard .go{margin-top:2px}
@media (prefers-reduced-motion:reduce){ .pcard .vinyl{transition:none} }
/* cover titles: whole words, top of the cover, sized to the sleeve */
.sleeve.cover{container-type:inline-size}
.sleeve.cover::after{background:linear-gradient(180deg,rgba(0,0,0,.62),transparent 48%)}
.sleeve.cover .ttl{top:15cqi; bottom:auto; left:6cqi; right:6cqi; font-size:12cqi; line-height:.95; overflow-wrap:normal; word-break:normal; hyphens:none}
.sleeve.cover .lbl{top:5cqi; left:6cqi}
/* titles never break inside a word, on any device */
.sleeve.cover .ttl{overflow-wrap:normal !important; word-break:keep-all !important; hyphens:none !important; white-space:normal}
/* colored vinyl, so the record reads clearly on the dark page */
.pcard .vinyl{
  background:
    radial-gradient(circle, #0A0910 0 1.6%, #F4EFE6 1.9% 15%, color-mix(in srgb,var(--cc) 60%,#000) 15.4% 16.2%, transparent 16.6%),
    repeating-radial-gradient(circle, color-mix(in srgb,var(--cc) 82%,#000) 0 2px, color-mix(in srgb,var(--cc) 62%,#000) 2px 4px);
  box-shadow:0 18px 44px rgba(0,0,0,.6), inset 0 0 0 3px color-mix(in srgb,var(--cc) 45%,#000), inset 0 0 30px rgba(0,0,0,.35)}
.pcard .vinyl::after{background:conic-gradient(from 30deg,transparent 0 18%,rgba(255,255,255,.28) 23%,transparent 30% 68%,rgba(255,255,255,.2) 74%,transparent 80%)}
.vinyl .vlabel{color:#0A0910; width:22%}

/* finished covers carry their own titles */
.sleeve.cover::after{display:none}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; margin:0}

/* What's next: text + photo */
.why.next{max-width:1300px; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:6vw; align-items:center}
.next-photo img{display:block; width:100%; max-width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:6px}
@media (max-width:860px){ .why.next{grid-template-columns:1fr; gap:34px} .next-photo{max-width:360px} }

/* CLOSING v2 */
.end h2{max-width:18ch; font-size:clamp(40px,6vw,88px); line-height:.95; margin:0 auto 48px; text-wrap:balance}
.contact{display:grid; gap:14px; justify-items:center; margin:0 auto 48px}
.contact .who{margin:0 0 6px; font-size:24px}
.crow{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px 14px; font:400 15px 'Space Mono',monospace}
.crow .k{color:var(--dim)}
.crow .v{color:var(--paper); user-select:all}
.copy{all:unset; cursor:pointer; padding:6px 14px; border:1.5px solid var(--gold); border-radius:99px; font:700 12px 'Space Mono',monospace; color:var(--gold)}
.copy:hover{background:var(--gold); color:#0A0910}
.copy:focus-visible{outline:2px solid var(--paper); outline-offset:2px}
.credit{margin:0; font:400 12px 'Space Mono',monospace; color:var(--dim)}
.end h2.thanks{font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-weight:400; text-transform:none; letter-spacing:0; font-size:clamp(34px,4.6vw,60px); line-height:1.12; max-width:none}

/* ===== PROJECT PAGES v2 ===== */
body.pp{font-size:20px}
.pp-bar{position:sticky; top:env(safe-area-inset-top,0px); z-index:40; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 6vw; background:rgba(10,9,16,.86); backdrop-filter:blur(8px); border-bottom:1px solid rgba(244,239,230,.1)}
.pp-crumb{font:400 12px 'Space Mono',monospace; color:var(--dim)}
.pp-top{max-width:1200px; margin:0 auto; padding:9vh 6vw 6vh; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:6vw; align-items:center}
.pp-sleeve{width:82%; max-width:100%; margin:0}
.pp-sleeve .vinyl{animation:none; transform:translateX(30%) rotate(200deg);
  background:radial-gradient(circle,#0A0910 0 1.6%,#F4EFE6 1.9% 15%,color-mix(in srgb,var(--cc) 60%,#000) 15.4% 16.2%,transparent 16.6%),repeating-radial-gradient(circle,color-mix(in srgb,var(--cc) 82%,#000) 0 2px,color-mix(in srgb,var(--cc) 62%,#000) 2px 4px);
  box-shadow:0 18px 44px rgba(0,0,0,.6),inset 0 0 0 3px color-mix(in srgb,var(--cc) 45%,#000)}
.pp-kicker{margin:0 0 8px; font:700 12px 'Space Mono',monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--cc)}
.pp-title{margin:0 0 10px; font-family:'Anton','Arial Narrow',Impact,sans-serif; font-weight:400; text-transform:uppercase; font-size:clamp(44px,6.5vw,92px); line-height:.92; text-wrap:balance}
.pp-what{margin:0 0 24px; font-size:24px; color:rgba(244,239,230,.9)}
.pp-btn{display:inline-block; padding:13px 24px; border-radius:99px; background:var(--cc); color:#0A0910; text-decoration:none; font:700 14px 'Space Mono',monospace}
.pp-btn:hover{filter:brightness(1.12)}
.pp-roles{margin:26px 0 0; display:grid; gap:12px}
.pp-roles dt,.pp-credits dt{font:700 11px 'Space Mono',monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--cc)}
.pp-roles dd{margin:2px 0 0; font-size:19px; line-height:1.4}
.pp-credits{max-width:1200px; margin:0 auto; padding:0 6vw}
.pp-credits dl{margin:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr)); gap:18px 28px; padding:24px 0; border-block:1px solid rgba(244,239,230,.14)}
.pp-credits dd{margin:4px 0 0; font:400 14px/1.5 'Space Mono',monospace; color:var(--paper)}
.pp-body{max-width:760px; margin:0 auto; padding:8vh 6vw 4vh}
.pp-body section{margin:0 0 64px}
.pp-body h2{margin:0 0 18px; font:700 13px 'Space Mono',monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--cc)}
.pp-body h3{margin:30px 0 10px; font-size:26px; font-weight:400}
.pp-body p{margin:0 0 1em; line-height:1.6; color:rgba(244,239,230,.9)}
.pp-quote{margin:40px 0; padding:4px 0 4px 26px; border-left:4px solid var(--cc); font-style:italic; font-size:clamp(26px,3.4vw,38px); line-height:1.2; color:var(--paper)}
.pp-how{padding:30px 0 0; border-top:1px solid rgba(244,239,230,.14)}
.pp-learned p{font-size:26px; line-height:1.35; color:var(--paper)}
.pp-nav{max-width:1000px; margin:0 auto; padding:30px 6vw 12vh}
.pp-nav b{font-family:'Anton','Arial Narrow',Impact,sans-serif; font-weight:400; text-transform:uppercase}
@media (max-width:860px){
  .pp-top{grid-template-columns:1fr; gap:40px; padding-top:6vh}
  .pp-sleeve{width:72%}
}

/* project page: player, chapters, media */
.pp-player{display:grid; gap:10px; max-width:460px}
.pl-btn{all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:12px; justify-self:start; padding:13px 24px 13px 20px; border-radius:99px; background:var(--cc); color:#0A0910; font:700 14px 'Space Mono',monospace}
.pl-btn:focus-visible{outline:3px solid var(--paper); outline-offset:3px}
.pl-btn .i-play{border-left-width:14px; border-top-width:9px; border-bottom-width:9px}
.pl-btn.is-on .i-play{width:12px; height:16px; border:0; background:linear-gradient(90deg,#0A0910 0 4px,transparent 4px 8px,#0A0910 8px)}
.pl-bar{display:flex; align-items:center; gap:12px}
.pl-bar input{flex:1; min-width:0; accent-color:var(--cc)}
.pl-time{font:400 12px 'Space Mono',monospace; color:var(--dim); white-space:nowrap}
.pl-sc{font:400 12px 'Space Mono',monospace; color:var(--dim)}
.pp-story > h2{margin-bottom:8px}
.ch{margin:48px 0 20px}
.ch-date{margin:0 0 4px; font:700 12px 'Space Mono',monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--cc)}
.ch-title{margin:0 0 12px !important; font-family:'Anton','Arial Narrow',Impact,sans-serif; font-weight:400; text-transform:uppercase; font-size:clamp(28px,3.4vw,40px) !important; line-height:1}
.pm{margin:26px 0 8px}
.pm img,.pm video{display:block; width:100%; max-width:100%; border-radius:6px; background:#111; object-fit:cover}
.pm.tall img{aspect-ratio:3/4; max-width:420px}
.pm figcaption{margin-top:8px; font:400 12px/1.5 'Space Mono',monospace; color:var(--dim)}
.pm.wide{margin-left:calc(-1 * min(10vw,140px)); margin-right:calc(-1 * min(10vw,140px))}
.pm-pair{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:26px calc(-1 * min(10vw,140px)) 8px}
.pm-pair .pm{margin:0}
.pm-pair img,.pm-pair video{aspect-ratio:4/3}
details.pp-how{margin:0 0 64px; border:1px solid rgba(244,239,230,.18); border-radius:8px; padding:0}
details.pp-how summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:18px 22px; font:700 13px 'Space Mono',monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--cc)}
details.pp-how summary::-webkit-details-marker{display:none}
.sm-open{font-weight:400; color:var(--paper); border:1px solid rgba(244,239,230,.3); border-radius:99px; padding:4px 12px; text-transform:none; letter-spacing:0}
.how-body{padding:0 22px 10px}
@media (max-width:860px){ .pm.wide,.pm-pair{margin-left:0; margin-right:0} }
@media (max-width:560px){ .pm-pair{grid-template-columns:1fr} }
.pm + .ch,.pm-pair + .ch,.pp-quote + .ch{margin-top:72px}

/* Inside the session: DAW screenshot */
.pp-session{max-width:1200px; margin:0 auto; padding:7vh 6vw 0}
.pp-session h2{margin:0 0 16px; font:700 13px 'Space Mono',monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--cc)}
.zoom{all:unset; cursor:zoom-in; display:block; position:relative; width:100%; border-radius:8px; overflow:hidden; border:1px solid rgba(244,239,230,.18)}
.zoom img{display:block; width:100%; max-width:100%}
.zoom-hint{position:absolute; right:12px; bottom:12px; padding:6px 12px; border-radius:99px; background:rgba(10,9,16,.85); font:700 12px 'Space Mono',monospace; color:var(--paper)}
.zoom:focus-visible{outline:3px solid var(--cc); outline-offset:3px}
.pp-session .cap{margin:10px 0 0; font:400 12px/1.5 'Space Mono',monospace; color:var(--dim)}
.pp-how{padding:30px 0 0; border-top:1px solid rgba(244,239,230,.14); margin-bottom:64px}
.lb{position:fixed; inset:0; z-index:100; background:rgba(5,5,10,.94); display:flex; align-items:center; justify-content:center; padding:56px 12px 12px; overflow:auto}
.lb[hidden]{display:none!important}
.lb img{max-width:none; width:min(1920px,200vw); height:auto}
@media (min-width:1100px){ .lb img{width:auto; max-width:100%; max-height:100%} }
.lb-x{all:unset; cursor:pointer; position:fixed; top:calc(env(safe-area-inset-top,0px) + 12px); right:12px; padding:8px 16px; border-radius:99px; background:var(--paper); color:#0A0910; font:700 13px 'Space Mono',monospace}
.sess-todo{display:grid; place-items:center; aspect-ratio:16/7; border:1.5px dashed rgba(244,239,230,.35); border-radius:8px; font:400 14px 'Space Mono',monospace; color:var(--dim)}
.ts{all:unset; cursor:pointer; padding:0 6px; border-radius:4px; background:color-mix(in srgb,var(--cc) 25%,transparent); color:var(--paper); font:700 .9em 'Space Mono',monospace; white-space:nowrap}
.ts::before{content:"\25B6\00a0"; font-size:.75em}
.ts:hover{background:var(--cc); color:#0A0910}
.ts:focus-visible{outline:2px solid var(--cc); outline-offset:2px}
/* song map */
.pp-songmap{max-width:1200px; margin:0 auto; padding:6vh 6vw 0}
.pp-songmap h2{margin:0 0 6px; font:700 13px 'Space Mono',monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--cc)}
.pp-songmap .cap{margin:0 0 14px; font:400 12px 'Space Mono',monospace; color:var(--dim)}
.sm-bar{display:flex; gap:4px; min-height:92px}
.sm-seg{all:unset; cursor:pointer; box-sizing:border-box; min-width:0; display:flex; flex-direction:column; justify-content:space-between; gap:6px; padding:10px; border-radius:6px; background:color-mix(in srgb,var(--cc) 30%,#0A0910); border-top:3px solid var(--cc); transition:background .2s}
.sm-seg:nth-child(even){background:color-mix(in srgb,var(--cc) 18%,#0A0910)}
.sm-seg:hover{background:color-mix(in srgb,var(--cc) 55%,#0A0910)}
.sm-seg:focus-visible{outline:2px solid var(--paper); outline-offset:2px}
.sm-t{font:700 12px 'Space Mono',monospace; color:var(--paper)}
.sm-l{font:400 12px/1.3 'Space Mono',monospace; color:rgba(244,239,230,.85); overflow-wrap:anywhere}
@media (max-width:760px){ .sm-bar{flex-direction:column} .sm-seg{flex:none !important; flex-direction:row; justify-content:flex-start; gap:14px} }
.sm-seg{min-width:72px}
.sm-l{overflow-wrap:normal; word-break:keep-all; hyphens:none}
/* P4 tracklist + extra session shots */
.tracklist{list-style:none; margin:14px 0 4px; padding:0; border-top:1px solid rgba(255,255,255,.12)}
.tl-row{all:unset; box-sizing:border-box; width:100%; display:grid; grid-template-columns:28px 1fr auto; gap:12px; align-items:center; padding:12px 6px; border-bottom:1px solid rgba(255,255,255,.12); cursor:pointer; font:400 15px/1.35 'Instrument Serif',serif; color:var(--paper)}
.tl-row small{display:block; font:400 11px/1.5 'Space Mono',monospace; color:var(--dim); margin-top:2px}
.tl-n,.tl-d{font:400 12px 'Space Mono',monospace; color:var(--dim)}
.tl-row:hover,.tl-row:focus-visible{background:rgba(255,255,255,.05)}
.tl-row.is-cur{box-shadow:inset 3px 0 0 var(--cc)}
.tl-row.is-cur .tl-n{color:var(--cc)}
.tl-row .tl-t{font-size:18px}
.sess-more{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px; align-items:start}
.sess-more .cap{margin-top:6px}
@media (max-width:560px){.sess-more{grid-template-columns:1fr}}
.sess-more .sm-fig{margin:0}
.pm.cert{max-width:520px; margin-left:auto; margin-right:auto}
/* top bar v2: name, three plain links, scroll progress */
.topbar{position:fixed; top:0; left:0; right:0; z-index:40; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:calc(env(safe-area-inset-top,0px) + 12px) 6vw 12px; background:linear-gradient(180deg,rgba(10,9,16,.92),rgba(10,9,16,.6)); backdrop-filter:blur(8px)}
.tb-name{font:700 12px 'Space Mono',monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--paper); text-decoration:none; white-space:nowrap}
.tb-nav{display:flex; gap:22px}
.tb-nav a{font:400 13px 'Space Mono',monospace; color:var(--dim); text-decoration:none; padding:4px 0}
.tb-nav a:hover,.tb-nav a:focus-visible{color:var(--paper)}
.tb-progress{position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(244,239,230,.1)}
.tb-progress span{position:absolute; inset:0; transform-origin:0 50%; transform:scaleX(0); background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3),var(--c4),var(--c5))}
@media (max-width:520px){ .tb-nav{gap:14px} .tb-nav a{font-size:12px} .tb-name{font-size:11px; letter-spacing:.08em} }
html{scroll-padding-top:56px}
/* console bar: REC, scroll timecode, level meter */
.console{position:fixed; top:0; left:0; right:0; z-index:40; display:flex; align-items:center; gap:14px; padding:calc(env(safe-area-inset-top,0px) + 11px) 6vw 11px; background:linear-gradient(180deg,rgba(10,9,16,.94),rgba(10,9,16,.7)); backdrop-filter:blur(8px); border-bottom:1px solid rgba(244,239,230,.08)}
.cn-rec{display:flex; align-items:center; gap:6px; font:700 11px 'Space Mono',monospace; letter-spacing:.1em; color:#ff4a4a}
.cn-rec i{width:9px; height:9px; border-radius:50%; background:#ff2a2a; box-shadow:0 0 10px #ff2a2a; animation:blink 1.6s steps(2,jump-none) infinite}
.cn-tc{font:400 14px 'Space Mono',monospace; letter-spacing:.06em; color:var(--gold); min-width:78px; font-variant-numeric:tabular-nums}
.cn-meter{flex:1; display:flex; gap:2px; height:14px; align-items:stretch; padding:3px; border-radius:3px; background:#050408; box-shadow:inset 0 0 0 1px rgba(244,239,230,.08)}
.cn-meter i{flex:1; border-radius:1px; background:var(--sc); opacity:.13}
.cn-meter i.on{opacity:1; box-shadow:0 0 6px var(--sc)}
.cn-meter i.pk{opacity:.7}
.cn-name{font:700 11px 'Space Mono',monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--paper); text-decoration:none; white-space:nowrap}
@media (max-width:560px){ .console{gap:10px; padding-left:16px; padding-right:16px} .cn-name{display:none} .cn-tc{font-size:13px; min-width:70px} }
@media (prefers-reduced-motion:reduce){ .cn-rec i{animation:none} .cn-meter i{transition:none} }