/* ============ Dan Uribe IV — single-viewport portfolio ============ */
@font-face{
  font-family:"Krylon";
  src:url("assets/fonts/Krylon-Regular.otf") format("opentype");
  font-weight:400; font-style:normal; font-display:swap;
}
:root{
  --bg:        oklch(0.145 0.006 70);
  --bg-1:      oklch(0.185 0.008 68);
  --bg-2:      oklch(0.225 0.010 66);
  --fg:        oklch(0.965 0.006 85);
  --muted:     oklch(0.74 0.012 78);
  --faint:     oklch(0.56 0.012 75);
  --line:      oklch(1 0 0 / 0.10);
  --line-2:    oklch(1 0 0 / 0.20);
  --accent:    oklch(0.80 0.135 62);
  --accent-hi: oklch(0.88 0.115 70);
  --accent-dim:oklch(0.80 0.135 62 / 0.16);
  /* two-stop gradient of the currently-playing song (JS swaps these per track) */
  --g1:   #FFE68E;
  --g2:   #FF855F;
  --grad: linear-gradient(120deg, #FFE68E, #FF855F);
  /* live per-track theme (set by player.js); header widget reads these so it tracks
     the current song even inside a case page where --grad/--accent get overridden */
  --track-grad: linear-gradient(120deg, #FFE68E, #FF855F);
  --track-accent: #FF855F;
  --track-accent-dim: rgba(255,133,95,0.16);
  --serif: "Krylon", Georgia, serif;
  --sans:  "Space Grotesk", system-ui, sans-serif;
  --mono:  "Space Mono", ui-monospace, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pad: clamp(16px, 2.2vw, 40px);
  --gap: clamp(16px, 1.8vw, 34px);
  --radius: 6px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
body{
  background:var(--bg); color:var(--fg);
  font-family:var(--sans);
  font-size:16px; line-height:1.55; letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
::selection{ background:var(--accent); color:#1a1410; }

/* ---- generative backdrop + grain ---- */
.grid-bg{ position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size:78px 78px; }
#grid-canvas{ position:fixed; inset:0; z-index:0; width:100%; height:100%; pointer-events:none; }
#bg-canvas{ position:fixed; inset:0; z-index:0; width:100%; height:100%; pointer-events:none; opacity:0.5; }
.grain{
  position:fixed; inset:-50%; z-index:1; pointer-events:none;
  opacity:0.04; mix-blend-mode:screen;
  background-image:url("assets/img/grain.svg"); background-size:200px;
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 10%{transform:translate(-4%,-4%)} 30%{transform:translate(3%,-6%)}
  50%{transform:translate(-5%,4%)} 70%{transform:translate(4%,5%)} 90%{transform:translate(-3%,-2%)} 100%{transform:translate(0,0)}
}
.vignette{ position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(125% 90% at 50% 32%, transparent 38%, oklch(0.09 0.006 70 / 0.6) 100%); }

/* ---- stage ---- */
.stage{
  position:relative; z-index:2;
  height:100vh; height:100svh;
  width:100%; max-width:1760px; margin-inline:auto; /* cap on ultrawide displays */
  display:flex; flex-direction:column;
  padding:var(--pad);
  gap:var(--gap);
}

/* ---- top bar — one shared component for home + case study (see header.js) ---- */
.topbar{ position:sticky; top:0; z-index:10; flex-shrink:0;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  background:linear-gradient(var(--bg) 58%, color-mix(in oklch, var(--bg), transparent 55%) 82%, transparent); }
/* reserve the now-playing mini's height in BOTH variants (the left slot exists on
   home and case) so the centered logo lands at the exact same spot either way */
.topbar-left{ display:flex; align-items:center; gap:7px; min-height:56px; }
.logo-mark{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:block; opacity:.95; transition:opacity .3s var(--ease); }
.logo-mark img{ height:clamp(30px,3vw,42px); width:auto; }
.logo-mark:hover{ opacity:1; }

/* home variant — sits in the .stage padding box, pulled out to a full-bleed top.
   NB: top padding matches the case variant exactly (no extra --pad) so the logo
   keeps the same vertical position when opening a project. */
.topbar.is-home{ margin:calc(-1 * var(--pad)) calc(-1 * var(--pad)) 0;
  padding:clamp(16px,2.4vh,26px) var(--pad) clamp(12px,1.8vh,18px);
  background:none; }
/* the fade spans the full viewport, not just the capped 1760px stage */
.topbar.is-home::before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:100vw; height:100%; z-index:-1; pointer-events:none;
  background:linear-gradient(var(--bg) 58%, color-mix(in oklch, var(--bg), transparent 55%) 82%, transparent); }
.topbar.is-home .logo-mark{ left:50%; }
/* the index header is the logo only — the now-playing mini lives on case pages */
.topbar.is-home .mini{ display:none; }

/* case variant — full-bleed inside .case-scroll; contents aligned to the 1180px column on ultrawide */
.topbar.is-case{ margin:0 calc(-1 * clamp(20px,5vw,90px));
  padding:clamp(16px,2.4vh,26px) clamp(20px,5vw,90px) clamp(12px,1.8vh,18px);
  padding-inline:max(clamp(20px,5vw,90px), calc(50% + clamp(20px,5vw,90px) - 590px)); }
/* anchor to the true viewport center — the .case-scroll scrollbar offsets a plain 50% */
.topbar.is-case .logo-mark{ left:50vw; }
nav.links a.cta{ color:var(--accent); }

/* ---- bento ---- */
.bento{
  flex:1; min-height:0;
  /* one shared column height — photo, identity, and the player+work stack all
     use this exact value, so the photo always matches the right stack */
  --col-h:min(78vh, 46vw);
  display:grid;
  grid-template-columns:0.98fr auto 0.98fr;
  gap:var(--gap);
  align-items:stretch;
}
.cell{ min-height:0; min-width:0; }
.eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:11px; }
.eyebrow::before{ content:""; width:32px; height:1px; background:var(--grad); opacity:.85; }

/* ============ IDENTITY ============ */
.identity{ display:flex; flex-direction:column; justify-content:space-between; gap:clamp(18px,3vh,40px);
  align-self:center; height:min(100%, var(--col-h, 78vh)); container-type:inline-size; }
.identity h1{ font-family:"Krylon", var(--serif); font-weight:400; line-height:0.92; letter-spacing:0;
  font-size:clamp(50px, 8vw, 124px); font-size:clamp(44px, 28cqi, 124px); /* sized to the column, not the viewport */
  margin-top:clamp(14px,2.4vh,26px); }
.identity h1 .it{ font-style:normal; color:var(--accent); }
.identity h1 .line{ display:block; overflow:hidden; }
.identity h1 .line > span{ display:block; transform:translateY(110%); transition:transform 1.05s var(--ease); }
body.ready .identity h1 .line > span{ transform:none; }
.identity h1 .line:nth-child(2) > span{ transition-delay:.1s; }

.id-bio{ max-width:46ch; display:flex; flex-direction:column; gap:clamp(8px,1.4vh,16px); }
.id-bio p{ color:var(--muted); font-size:clamp(13.5px,1.05vw,16.5px); line-height:1.55; }
.id-bio .hl{ color:var(--fg); }
.id-sign{ margin-top:clamp(4px,1.2vh,12px); }
.id-sign img{ width:clamp(150px,13vw,196px); height:auto; opacity:.9; }

/* ---- client logo marquee (below the signature) ---- */
.logo-marquee{ margin-top:clamp(14px,2vh,22px); overflow:hidden; width:100%;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent); }
.logo-track{ display:flex; align-items:center; gap:clamp(30px,3.4vw,52px); width:max-content;
  animation:logoSlide 34s linear infinite; }
@keyframes logoSlide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.logo{ flex:0 0 auto; display:flex; align-items:center; }
.logo img{ height:clamp(16px,1.45vw,21px); width:auto; display:block;
  filter:brightness(0) invert(0.314); opacity:.85;
  transition:filter .4s var(--ease), opacity .4s var(--ease); }
.logo:hover img{ filter:none; opacity:1; }
@media(prefers-reduced-motion:reduce){ .logo-track{ animation:none; } }

.id-foot{ display:flex; flex-direction:column; gap:16px; }
.mail{ display:inline-flex; align-items:center; gap:12px; align-self:flex-start;
  font-family:var(--mono); font-size:clamp(12px,1vw,14px); letter-spacing:0.02em;
  border:1px solid var(--line-2); border-radius:99px; padding:11px 20px; background:var(--bg-1); transition:background .4s var(--ease), color .4s, border-color .4s; }
.mail i{ transition:transform .4s var(--ease); }
.mail:hover{ background:var(--accent); color:#1a1410; border-color:var(--accent); }
.mail:hover i{ transform:translate(2px,-2px); }
.meta{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--faint); }
.meta .x{ color:var(--accent); }

/* ============ PHOTO ============ */
.photo{ position:relative; align-self:center; justify-self:center; height:100%;
  display:flex; align-items:center; }
.photo-frame{ position:relative; height:min(100%, var(--col-h, 78vh)); aspect-ratio:2024/2482; border-radius:var(--radius); overflow:hidden;
  box-shadow:0 50px 110px -34px oklch(0 0 0 / 0.85), 0 0 0 1px var(--line); will-change:transform; transition:transform .5s var(--ease); }
.photo[data-tilt]{ transform-style:flat; }
.photo-glow{ position:absolute; left:50%; bottom:-7%; transform:translateX(-50%); width:82%; height:34%; z-index:0;
  pointer-events:none; mix-blend-mode:screen; opacity:.7; filter:blur(46px) saturate(1.15);
  background:radial-gradient(56% 96% at 50% 72%,
    color-mix(in oklch, var(--g2), transparent 8%),
    color-mix(in oklch, var(--g1), transparent 42%) 44%,
    transparent 72%);
  animation:photoGlow 7s ease-in-out infinite; }
@keyframes photoGlow{ 0%,100%{ opacity:.62; transform:translateX(-50%) scaleX(1); } 50%{ opacity:.82; transform:translateX(-50%) scaleX(1.07); } }
.photo-frame img{ width:100%; height:100%; object-fit:cover; filter:contrast(1.03) brightness(1.01); }
.photo-frame::after{ content:""; position:absolute; inset:0; border-radius:var(--radius); pointer-events:none;
  background:linear-gradient(180deg, oklch(0.145 0.006 70 / 0.12), transparent 22%, transparent 80%, oklch(0.145 0.006 70 / 0.34)); }
.photo-frame .scan{ display:none; }
.photo-cap{ position:absolute; bottom:-13px; left:50%; transform:translateX(-50%); display:flex; gap:14px; z-index:3;
  font-family:var(--mono); font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted);
  background:oklch(0.165 0.008 68 / 0.9); border:1px solid var(--line); padding:6px 13px; border-radius:99px; backdrop-filter:blur(6px); white-space:nowrap; }
.photo-cap span:first-child{ color:var(--accent); }

/* ============ RIGHT STACK ============ */
.right{ display:flex; flex-direction:column; gap:var(--gap); min-height:0; align-self:center; height:min(100%, var(--col-h, 78vh)); }

/* ---- player ---- */
.player{ flex-shrink:0; display:flex; flex-direction:column; overflow:hidden;
  background:linear-gradient(150deg, var(--bg-1), oklch(0.16 0.007 70)); border:1px solid var(--line); border-radius:var(--radius);
  container-type:inline-size; container-name:player; }
.player-body{ --pb-pad:clamp(15px,1.7vw,22px); display:grid; grid-template-columns:auto 1fr auto; gap:clamp(12px,1.3vw,20px); align-items:center;
  padding:var(--pb-pad); }

/* ---- track list (ruled grid; lines bleed to the card edges, right of the turntable) ---- */
.track-list{ order:3; display:flex; flex-direction:column; align-self:stretch; min-width:clamp(112px,9vw,138px);
  margin:calc(-1 * var(--pb-pad)) calc(-1 * var(--pb-pad)) calc(-1 * var(--pb-pad)) 0;
  border-left:1px solid var(--line); }
.track-cell{ flex:1; display:flex; align-items:center; gap:clamp(8px,0.85vw,12px);
  padding:clamp(8px,0.9vw,12px) clamp(16px,1.7vw,22px) clamp(8px,0.9vw,12px) clamp(10px,1vw,14px);
  border:0; border-top:1px solid var(--line); border-radius:0; background:transparent; cursor:pointer;
  transition:background .35s var(--ease); }
.track-cell:first-child{ border-top:0; }
.track-cell:hover{ background:oklch(0.2 0.008 70 / 0.5); }
.track-cell .no{ font-family:var(--mono); font-size:clamp(9.5px,0.78vw,11px); letter-spacing:0.1em;
  color:var(--faint); flex-shrink:0; transition:color .35s; }
.track-cell .ic{ width:clamp(14px,1.2vw,17px); aspect-ratio:1; flex-shrink:0; background:var(--line-2);
  -webkit-mask:var(--icon) center/contain no-repeat; mask:var(--icon) center/contain no-repeat;
  transition:background .4s var(--ease), filter .4s var(--ease); }
.track-cell .nm{ font-family:var(--mono); font-size:clamp(11px,0.92vw,13px); letter-spacing:0.12em;
  text-transform:uppercase; color:var(--muted); transition:color .35s; }
.track-cell.active{ background:var(--accent-dim); }
.track-cell.active .no{ color:var(--accent); }
.track-cell.active .ic{ background:var(--grad); filter:drop-shadow(0 0 8px var(--accent-dim)); }
.track-cell.active .nm{ color:var(--fg); }
.turntable{ position:relative; aspect-ratio:1; width:clamp(118px,11.5vw,156px); }
.platter{ position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 50% 40%, oklch(0.27 0.008 66), oklch(0.16 0.006 70) 70%);
  box-shadow:0 24px 50px -22px oklch(0 0 0 / 0.9), inset 0 0 0 1px var(--line), inset 0 2px 22px oklch(0 0 0 /0.6); display:grid; place-items:center; }
.record{ position:relative; width:92%; aspect-ratio:1; border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%, oklch(0.10 0.004 70) 0 1px, oklch(0.14 0.005 70) 1px 3px);
  box-shadow:inset 0 0 44px oklch(0 0 0 /0.7), 0 0 0 1px oklch(0 0 0 /0.5); display:grid; place-items:center; cursor:pointer;
  animation:spin 4s linear infinite; animation-play-state:paused; }
.record.spinning{ animation-play-state:running; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.record::before{ content:""; position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg, transparent, oklch(1 0 0 /0.06) 8%, transparent 18%, transparent 50%, oklch(1 0 0/0.05) 58%, transparent 70%); }
.label{ position:relative; width:40%; aspect-ratio:1; border-radius:50%; overflow:hidden;
  background:radial-gradient(circle at 50% 50%, var(--g1), var(--g2) 82%); display:grid; place-items:center; box-shadow:inset 0 0 0 1px oklch(1 0 0 /0.18), 0 0 0 1px oklch(0 0 0 /0.4); z-index:2; }
.spindle{ position:absolute; width:4%; aspect-ratio:1; border-radius:50%; background:var(--bg); box-shadow:0 0 0 1px oklch(1 0 0/0.2); z-index:3; }
.tonearm{ position:absolute; top:4%; right:2%; width:40%; height:40%; transform-origin:88% 12%; transform:rotate(-26deg); transition:transform 1s var(--ease); z-index:5; }
.tonearm.on{ transform:rotate(4deg); }
.tonearm .pivot{ position:absolute; top:0; right:0; width:16px; height:16px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, oklch(0.5 0.01 70), oklch(0.28 0.008 70)); box-shadow:0 3px 9px oklch(0 0 0/0.6); }
.tonearm .arm{ position:absolute; top:8px; right:8px; width:2px; height:90%; background:linear-gradient(oklch(0.6 0.01 70),oklch(0.4 0.01 70)); transform-origin:top; transform:rotate(38deg); }
.sound-glow{ position:absolute; inset:-14%; z-index:-1; background:radial-gradient(circle, var(--accent-dim), transparent 60%); filter:blur(30px); opacity:0; transition:opacity 1s var(--ease); }
.turntable.playing .sound-glow{ opacity:1; }

.player-info{ min-width:0; }
.now{ display:flex; justify-content:space-between; align-items:center; gap:11px;
  padding:clamp(13px,1.5vw,18px) clamp(16px,1.7vw,22px); border-bottom:1px solid var(--line); }
.track{ margin:9px 0 14px; }
.track .tt{ font-size:clamp(19px,1.9vw,24px); font-family:var(--serif); letter-spacing:-0.01em; color:var(--fg); transition:color .3s; }
.track.active .tt{ color:var(--accent); }
.track .ta{ font-family:var(--mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--faint); margin-top:2px; }
.controls{ display:flex; align-items:center; gap:14px; }
.play-btn{ width:48px; height:48px; border-radius:50%; border:2px solid var(--accent); background:var(--accent-dim); color:var(--fg);
  display:grid; place-items:center; cursor:pointer; transition:background .4s var(--ease), transform .3s var(--ease), box-shadow .4s; flex-shrink:0; }
@media(hover:hover){ .play-btn:hover{ background:var(--grad); color:#1a1410; box-shadow:0 0 26px var(--accent-dim); transform:scale(1.05); } }
.play-btn svg{ width:22px; height:22px; }
.progress-wrap{ min-width:0; margin-top:14px; }
.progress{ position:relative; height:4px; border-radius:99px; background:var(--line-2); cursor:pointer; touch-action:none; }
.progress .fill{ position:absolute; left:0; top:0; bottom:0; width:0%; background:var(--grad); border-radius:99px;
  box-shadow:0 0 10px var(--g2), 0 0 4px var(--g1), 0 0 18px var(--accent-dim); }
.progress-time{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:10px; color:var(--faint); margin-top:7px; letter-spacing:0.06em; }
.load-note{ font-family:var(--mono); font-size:9.5px; letter-spacing:0.04em; color:var(--faint); margin-top:13px; }
.load-note label{ color:var(--accent); cursor:pointer; }
.load-note b{ color:var(--muted); font-weight:400; }
.eq{ display:inline-flex; gap:2px; align-items:flex-end; height:11px; }
.eq i{ width:2px; background:var(--accent); height:30%; border-radius:1px; }
.eq.on i{ animation:eq .9s ease-in-out infinite; }
.eq i:nth-child(2){ animation-delay:.2s } .eq i:nth-child(3){ animation-delay:.4s } .eq i:nth-child(4){ animation-delay:.1s }
@keyframes eq{ 0%,100%{height:25%} 50%{height:100%} }

/* ---- work ---- */
.work{ flex:1; min-height:0; display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:var(--radius); background:oklch(0.165 0.007 70); overflow:hidden;
  container-type:inline-size; container-name:work; }
.work-head{ display:flex; justify-content:space-between; align-items:center; padding:clamp(13px,1.5vw,18px) clamp(16px,1.7vw,22px); border-bottom:1px solid var(--line); flex-shrink:0; }
.work-head .count{ font-family:var(--mono); font-size:11px; color:var(--faint); letter-spacing:0.1em; }
.work-list{ flex:1; min-height:0; display:flex; flex-direction:column; }
.work-row{ flex:1; display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:clamp(12px,1.4vw,20px);
  padding:0 clamp(16px,1.7vw,22px); border-top:1px solid var(--line); position:relative; isolation:isolate; transition:color .35s; min-height:0; }
.work-row:first-child{ border-top:none; }
.work-row::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, var(--accent-dim), transparent 70%); opacity:0; transition:opacity .4s var(--ease); }
.work-row:hover::before{ opacity:1; }
.work-row .idx{ font-family:var(--mono); font-size:10.5px; color:var(--faint); letter-spacing:0.08em; transition:color .35s; }
.work-row:hover .idx{ color:var(--accent); }
.work-row .nm{ font-family:var(--serif); font-size:clamp(20px,2.1vw,29px); letter-spacing:-0.01em; line-height:1; }
.work-row .role{ font-family:var(--mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--faint); text-align:right; white-space:nowrap; }
.work-row .arrow{ width:28px; height:28px; border:1px solid var(--line-2); border-radius:50%; display:grid; place-items:center; font-size:13px; color:var(--muted);
  transition:background .4s,color .4s,transform .4s var(--ease),border-color .4s; flex-shrink:0; }
.work-row:hover .arrow{ background:var(--accent); color:#1a1410; border-color:var(--accent); transform:rotate(0) scale(1.06); }

/* ---- hover preview ---- */
.work-preview{ position:fixed; z-index:60; width:clamp(230px,22vw,330px); aspect-ratio:374/248;
  border-radius:var(--radius); overflow:hidden; pointer-events:none;
  opacity:0; transform:translate(-50%,-115%) scale(.94); transform-origin:center bottom;
  transition:opacity .28s var(--ease), transform .28s var(--ease);
  box-shadow:0 34px 80px -22px oklch(0 0 0 /0.85); border:1px solid var(--line-2); }
.work-preview.show{ opacity:1; transform:translate(-50%,-115%) scale(1); }
.work-preview img,.work-preview video{ width:100%; height:100%; object-fit:cover; }
.work-preview video{ display:none; }
.work-preview.is-video video{ display:block; }
.work-preview.is-video img{ display:none; }
.work-preview .wp-logo{ position:absolute; top:0; right:0; left:0; padding:12px 14px; display:flex; justify-content:flex-end;
  pointer-events:none; background:linear-gradient(180deg, oklch(0 0 0 /0.78) 0%, oklch(0 0 0 /0.42) 48%, transparent 100%); }
.work-preview .wp-logo img{ width:auto; height:16px; display:block; filter:drop-shadow(0 2px 8px oklch(0 0 0 /0.6)); }

/* ---- entrance ---- */
.identity, .photo, .player, .work{ opacity:0; transform:translateY(20px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
body.ready .identity{ opacity:1; transform:none; transition-delay:.05s; }
body.ready .photo{ opacity:1; transform:none; transition-delay:.18s; }
body.ready .player{ opacity:1; transform:none; transition-delay:.3s; }
body.ready .work{ opacity:1; transform:none; transition-delay:.4s; }

/* ============ RESPONSIVE ============
   Pure CSS — the page reflows live on window resize (no reload, no JS layout).
   Component internals (player, work list) adapt via container queries below,
   so they restructure based on their OWN width at any viewport size. */
@media(max-width:1100px), (max-height:560px), (max-aspect-ratio:5/4){
  .bento{ grid-template-columns:1fr 1fr; grid-template-rows:auto auto; grid-template-areas:"id photo" "right right"; }
  .identity{ grid-area:id; height:auto; align-self:stretch; }
  .photo{ grid-area:photo; height:auto; align-self:stretch; }
  .right{ grid-area:right; height:auto; flex-direction:row; align-items:stretch; }
  body{ overflow:auto; } .stage{ height:auto; min-height:100vh; min-height:100svh; }
  .photo-frame{ height:auto; width:100%; max-height:62vh; }
  .player, .work{ flex:1; min-width:0; }
  .work-row{ padding-block:clamp(14px,2.2vh,20px); }
}
@media(max-width:760px){
  body{ overflow:auto; }
  .bento{ grid-template-columns:1fr; grid-template-areas:"id" "right" "photo"; }
  .right{ flex-direction:column; }
  .photo-frame{ max-height:none; }
  .identity h1{ font-size:clamp(56px,17vw,100px); }
}

@media(prefers-reduced-motion:reduce){
  .identity, .photo, .player, .work, .identity h1 .line > span{ opacity:1 !important; transform:none !important; transition:none; }
  .grain{ animation:none; }
}

/* ============================================================================
   PLAYER ADDITIONS
============================================================================ */
.controls{ gap:clamp(8px,1vw,12px); }
.skip-btn{ width:36px; height:36px; border:none;
  background:transparent; color:var(--muted); display:grid; place-items:center; cursor:pointer; flex-shrink:0;
  transition:color .3s, transform .3s var(--ease); }
.skip-btn svg{ width:26px; height:26px; }
.skip-btn:hover{ color:var(--accent); transform:scale(1.06); }
.load-note .set-name{ color:var(--muted); }

/* ---- per-track icons (light up with the song's gradient when playing) ---- */
.tmeta{ display:flex; align-items:center; justify-content:space-between; gap:clamp(10px,1.4vw,18px); }
.track-icons{ display:flex; align-items:center; gap:clamp(8px,0.9vw,13px); flex-shrink:0; }
.track-icon{
  width:clamp(15px,1.35vw,19px); aspect-ratio:1; flex-shrink:0;
  background:var(--line-2);
  -webkit-mask:var(--icon) center/contain no-repeat;
  mask:var(--icon) center/contain no-repeat;
  opacity:1; transform:scale(.92);
  transition:background .45s var(--ease), opacity .45s var(--ease), transform .45s var(--ease);
}
.track-icon.active{
  background:var(--grad);
  opacity:1; transform:scale(1);
  filter:drop-shadow(0 0 8px var(--accent-dim));
}

/* ============================================================================
   CASE STUDY · SPACE
============================================================================ */
.case{ position:fixed; inset:0; z-index:80; background:var(--bg); visibility:hidden; opacity:0; }
.case.open{ visibility:visible; opacity:1; }
.case::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(120% 70% at 78% -8%, var(--accent-dim), transparent 55%); }
.case-scroll{ position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; z-index:1;
  padding:0 clamp(20px,5vw,90px) clamp(40px,6vh,80px); scroll-behavior:smooth; }
.case-scroll::-webkit-scrollbar{ width:9px; }
.case-scroll::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:99px; border:3px solid var(--bg); }

/* entrance — content is visible by default; .open replays a keyframe rise.
   (keyframes, not transitions, so a throttled tab still shows content.) */
@keyframes caseRise{ from{ opacity:0; transform:translateY(28px); } to{ opacity:1; transform:none; } }
@keyframes caseLift{ from{ transform:translateY(110%); } to{ transform:none; } }
@keyframes caseBarIn{ from{ opacity:0; transform:translateY(-14px); } to{ opacity:1; transform:none; } }
@media(prefers-reduced-motion:no-preference){
  .case.open .topbar .case-back{ animation:caseBarIn .6s var(--ease) .12s both; }
  .case.open .topbar .mini{ animation:caseBarIn .6s var(--ease) .22s both; }
  .case.open .case-hero{ animation:caseRise .8s var(--ease) both; }
  .case.open .case-overview{ animation:caseRise .8s var(--ease) .1s both; }
  .case.open .case-pillars{ animation:caseRise .8s var(--ease) .16s both; }
  .case.open .case-gallery{ animation:caseRise .8s var(--ease) .22s both; }
  .case.open .case-status{ animation:caseRise .8s var(--ease) .28s both; }
  .case.open .case-foot{ animation:caseRise .8s var(--ease) .32s both; }
  .case.open .case-title .line > span{ animation:caseLift 1s var(--ease) .18s both; }
}

/* ---- back button (case variant of the shared top bar) ---- */
.case-back{ display:inline-flex; align-items:center; gap:10px; background:transparent; border:1px solid var(--line-2); color:var(--muted);
  font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; padding:10px 18px; border-radius:99px; cursor:pointer;
  transition:color .35s, border-color .35s, background .35s var(--ease); }
.case-back .ca{ transition:transform .35s var(--ease); display:inline-block; }
.case-back:hover{ color:var(--fg); border-color:var(--line-2); background:oklch(1 0 0 /0.04); }
.case-back:hover .ca{ transform:translateX(-3px); }
.case-brand{ margin-bottom:clamp(18px,2.8vh,30px); }
.case-brand img{ height:clamp(20px,2vw,26px); width:auto; display:block; opacity:0.92; }

/* ---- mini now-playing ---- */
.mini{ display:flex; align-items:center; gap:13px; border:1px solid var(--line); border-radius:99px;
  background:oklch(0.165 0.008 68 / 0.7); backdrop-filter:blur(8px); padding:7px 16px 7px 7px; min-width:min(248px, 42vw); }
.mini-play{ width:34px; height:34px; border-radius:50%; border:2px solid var(--accent); background:var(--accent-dim); color:var(--accent);
  display:grid; place-items:center; cursor:pointer; flex-shrink:0; transition:background .35s var(--ease), color .35s, transform .3s; }
.mini-play svg{ width:15px; height:15px; }
@media(hover:hover){ .mini-play:hover{ background:var(--grad); color:#1a1410; transform:scale(1.06); } }
.mini-info{ min-width:0; flex:1; }
.mini-top{ display:flex; align-items:center; gap:8px; }
.mini-kicker{ font-family:var(--mono); font-size:8.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--faint); }
.mini-title{ font-family:var(--serif); font-size:15px; line-height:1; color:var(--fg); margin:3px 0 5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-progress{ height:3px; border-radius:99px; background:var(--line-2); cursor:pointer; overflow:hidden; }
.mini-fill{ height:100%; width:0%; background:var(--grad); border-radius:99px; }
/* header now-playing widget always follows the CURRENT TRACK's gradient (dawn/day/
   dusk/dark) — even on a project-detail page, whose case scope re-themes --grad/--accent */
.topbar .mini{ --grad:var(--track-grad); --accent:var(--track-accent); --accent-dim:var(--track-accent-dim); }
.mini-eq{ display:inline-flex; gap:2px; align-items:flex-end; height:9px; }
.mini-eq i{ width:2px; background:var(--accent); height:30%; border-radius:1px; }
.mini-eq.on i{ animation:eq .9s ease-in-out infinite; }
.mini-eq i:nth-child(2){ animation-delay:.2s } .mini-eq i:nth-child(3){ animation-delay:.4s } .mini-eq i:nth-child(4){ animation-delay:.1s }

/* ---- content rhythm ---- */
.case-hero, .case-overview, .case-pillars, .case-gallery, .case-status, .case-foot{ max-width:1180px; margin-inline:auto; width:100%; }
.case .eyebrow{ color:var(--accent); }

/* ---- hero ---- */
.case-hero{ display:grid; grid-template-columns:1fr 1.02fr; gap:clamp(30px,5vw,72px); align-items:center;
  padding:clamp(28px,6vh,72px) 0 clamp(34px,7vh,86px); }
.case-title{ font-family:var(--serif); font-weight:400; line-height:0.86; letter-spacing:-0.025em;
  font-size:clamp(72px,11vw,168px); margin:clamp(14px,2.4vh,26px) 0 clamp(18px,2.6vh,30px); }
.case-title .line{ display:block; overflow:hidden; }
.case-tag{ font-family:var(--serif); font-size:clamp(21px,2.3vw,32px); line-height:1.18; color:var(--muted); max-width:20ch; }
.case-tag .it{ font-style:italic; color:var(--accent); }
.case-meta{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,1.6vw,22px) clamp(20px,3vw,44px); margin-top:clamp(26px,4vh,44px);
  border-top:1px solid var(--line); padding-top:clamp(22px,3.2vh,34px); }
.case-meta > div{ display:flex; flex-direction:column; gap:6px; }
.case-meta .k{ font-family:var(--mono); font-size:9.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--faint); }
.case-meta .v{ font-size:clamp(13px,1.05vw,15.5px); color:var(--fg); display:inline-flex; align-items:center; gap:8px; }
.beta-dot{ width:7px; height:7px; border-radius:50%; background:oklch(0.82 0.16 150); box-shadow:0 0 10px oklch(0.82 0.16 150); flex-shrink:0; }

.case-hero-visual{ display:flex; flex-direction:column; gap:16px; }
.screen{ position:relative; aspect-ratio:374/248; border-radius:var(--radius); overflow:hidden;
  box-shadow:0 50px 120px -38px oklch(0 0 0 /0.9), 0 0 0 1px var(--line); }
.screen img{ width:100%; height:100%; object-fit:cover; }
.screen .scan{ position:absolute; inset:0; pointer-events:none; opacity:.32; mix-blend-mode:overlay;
  background:repeating-linear-gradient(0deg, transparent 0 3px, oklch(0 0 0 /0.5) 3px 4px); }
.screen .screen-glow{ position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 90px oklch(0 0 0 /0.55); border-radius:var(--radius); }
.case-domain{ align-self:flex-end; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:12px; letter-spacing:0.1em; color:var(--accent); }
.case-domain i{ transition:transform .35s var(--ease); }
.case-domain:hover i{ transform:translate(2px,-2px); }

/* ---- overview ---- */
.case-overview{ display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,5vw,80px); align-items:start;
  padding:clamp(30px,5vh,60px) 0; border-top:1px solid var(--line); }
.ov-eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--faint); padding-top:10px; white-space:nowrap; }
.case-overview .lead{ font-family:var(--serif); font-size:clamp(24px,3vw,42px); line-height:1.28; letter-spacing:-0.01em; color:var(--fg); text-wrap:pretty; max-width:24ch; }

/* ---- pillars ---- */
.case-pillars{ padding:clamp(28px,4vh,52px) 0; border-top:1px solid var(--line); }
.pill-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:clamp(20px,3vh,38px); }
.pill-head .count{ font-family:var(--mono); font-size:11px; letter-spacing:0.14em; color:var(--faint); text-transform:uppercase; }
.pillars{ list-style:none; display:grid; }
.pillar{ display:grid; grid-template-columns:auto 1fr; gap:clamp(18px,3vw,48px); align-items:baseline;
  padding:clamp(20px,3vh,30px) 0; border-top:1px solid var(--line); }
.pillar:first-child{ border-top:none; }
.p-idx{ font-family:var(--mono); font-size:12px; color:var(--accent); letter-spacing:0.1em; padding-top:5px; }
.p-body{ display:grid; grid-template-columns:1fr 1.3fr; gap:clamp(10px,3vw,48px); align-items:baseline; }
.p-body h3{ font-family:var(--serif); font-weight:400; font-size:clamp(26px,3.2vw,44px); line-height:1; letter-spacing:-0.01em; }
.p-body p{ color:var(--muted); font-size:clamp(13.5px,1.1vw,16.5px); line-height:1.55; max-width:42ch; text-wrap:pretty; }

/* ---- gallery ---- */
.case-gallery{ padding:clamp(28px,4vh,52px) 0; border-top:1px solid var(--line); }
.gal-grid{ display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(14px,1.6vw,22px); }
.gal-col{ display:grid; grid-template-rows:1fr 1fr; gap:clamp(14px,1.6vw,22px); }
.gal-slot{ width:100%; box-shadow:0 30px 70px -34px oklch(0 0 0 /0.85), 0 0 0 1px var(--line); }
.gal-slot.tall{ aspect-ratio:4/5; }
.gal-col .gal-slot{ aspect-ratio:16/9; }

/* ---- media sections (real brand assets) ---- */
.case-media{ max-width:1180px; margin-inline:auto; width:100%; padding:clamp(30px,4.5vh,58px) 0; border-top:1px solid var(--line); }
.media-note{ color:var(--muted); font-size:clamp(14px,1.2vw,17.5px); line-height:1.62; max-width:62ch; margin:clamp(4px,1vh,10px) 0 clamp(20px,2.8vh,32px); text-wrap:pretty; }
.media-note .it{ font-style:italic; color:var(--accent); }
.media-note .mono{ font-family:var(--mono); font-size:0.92em; color:var(--fg); }
.asset{ margin:0; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:#000;
  box-shadow:0 36px 90px -46px oklch(0 0 0 /0.95); }
.asset + .asset{ margin-top:clamp(14px,1.8vw,22px); }
.asset img{ display:block; width:100%; height:auto; }

/* ---- status callout ---- */
.case-status{ padding:clamp(36px,6vh,72px) 0; }
.cs-line{ height:1px; background:linear-gradient(90deg, var(--g1), var(--g2) 42%, transparent 78%); margin-bottom:clamp(22px,3vh,36px); }
.cs-body{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(16px,3vw,44px); }
.cs-kicker{ font-family:var(--mono); font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--faint); display:inline-flex; align-items:center; gap:9px; }
.cs-lead{ font-family:var(--serif); font-size:clamp(26px,3.6vw,52px); line-height:1.05; letter-spacing:-0.015em; color:var(--fg); flex:1; min-width:min(280px,100%); }
.cs-lead .it{ font-style:italic; color:var(--accent); }
.cs-cta{ display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; letter-spacing:0.04em;
  border:1px solid var(--accent); color:var(--accent); padding:13px 24px; border-radius:99px; transition:background .4s var(--ease), color .4s; }
.cs-cta i{ transition:transform .35s var(--ease); }
.cs-cta:hover{ background:var(--accent); color:#1a1410; }
.cs-cta:hover i{ transform:translate(2px,-2px); }

/* ---- footer ---- */
.case-foot{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding-top:clamp(26px,4vh,44px); border-top:1px solid var(--line); }
.case-back.lg{ font-size:12px; padding:13px 22px; }
.case-mail{ font-family:var(--mono); font-size:clamp(12px,1vw,14px); color:var(--muted); display:inline-flex; align-items:center; gap:8px; transition:color .3s; }
.case-mail:hover{ color:var(--accent); }

/* ============================================================================
   CASE STUDY · SPACE — violet→magenta accent
   All text accents render as the 9200FF → D300C2 gradient; solid violet backs
   the buttons, borders, dims and glows so everything stays on-brand.
============================================================================ */
.case-space{
  --accent:     #9200FF;
  --accent-hi:  #B24DFF;
  --accent-dim: rgba(146, 0, 255, 0.16);
  --g1: #9200FF;
  --g2: #D300C2;
  --grad: linear-gradient(120deg, #9200FF, #D300C2);
}
.case-space ::selection{ background:#9200FF; color:#fff; }

/* text accents → violet→magenta gradient clipped to the glyphs */
.case-space .eyebrow,
.case-space .case-tag .it,
.case-space .p-idx,
.case-space .media-note .it,
.case-space .cs-lead .it,
.case-space .case-domain{
  background:linear-gradient(120deg, #9200FF, #D300C2);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
/* keep the eyebrow's leading rule visible (it's a pseudo-element, not text) */
.case-space .eyebrow::before{ -webkit-text-fill-color:initial; }

@media(max-width:900px){
  .case-hero{ grid-template-columns:1fr; gap:28px; }
  .case-overview{ grid-template-columns:1fr; gap:14px; }
  .p-body{ grid-template-columns:1fr; gap:8px; }
  .gal-grid{ grid-template-columns:1fr; }
  .gal-slot.tall{ aspect-ratio:16/10; }
  .mini{ display:none; }
}
@media(max-width:560px){
  .case-meta{ grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce){
  .case-title .line > span{ transform:none !important; }
}

/* ============================================================================
   CASE STUDY · MAGIC EDEN
   The overlay carries Magic Eden's pink — matching the artifact icons —
   instead of the song-driven site accent.
============================================================================ */
.case-me{
  --accent:     oklch(0.72 0.19 356);
  --accent-hi:  oklch(0.82 0.13 356);
  --accent-dim: oklch(0.72 0.19 356 / 0.16);
  --g1: #FFA9D3;
  --g2: #ED1E79;
  --grad: linear-gradient(120deg, #FFA9D3, #ED1E79);
}
.case-me ::selection{ background:var(--accent); color:#1a1014; }

/* ============================================================================
   CASE STUDY · BING — teal accent (matches the duotone process icons)
============================================================================ */
.case-bing{
  --accent:     oklch(0.62 0.09 185);
  --accent-hi:  oklch(0.74 0.08 185);
  --accent-dim: oklch(0.62 0.09 185 / 0.16);
  --g1: #34D3BE;
  --g2: #008A78;
  --grad: linear-gradient(120deg, #34D3BE, #008A78);
}
.case-bing ::selection{ background:var(--accent); color:#06110f; }
.case-bing .beta-dot{ background:oklch(0.72 0.12 185); box-shadow:0 0 10px oklch(0.72 0.12 185); }

/* shared rhythm for the new section types */
.case-roles, .case-principles, .case-outcome{ max-width:1180px; margin-inline:auto; width:100%;
  padding:clamp(28px,4vh,52px) 0; border-top:1px solid var(--line); }
@media(prefers-reduced-motion:no-preference){
  .case.open .case-roles{ animation:caseRise .8s var(--ease) .16s both; }
  .case.open .case-media{ animation:caseRise .8s var(--ease) .2s both; }
  .case.open .case-principles, .case.open .case-outcome{ animation:caseRise .8s var(--ease) .22s both; }
}

/* video sits in the same frames as imagery */
.screen video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.asset video{ display:block; width:100%; height:auto; }

/* ---- my role ---- */
.role-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3vw,44px) clamp(28px,4vw,64px); }
.role{ display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  border-top:1px solid var(--line); padding-top:clamp(18px,2.4vh,26px); }
.role-icon{ width:clamp(38px,3.4vw,48px); height:auto; margin-bottom:clamp(4px,1vh,10px); }
.role h3{ font-family:var(--serif); font-weight:400; font-size:clamp(24px,2.6vw,36px); line-height:1.02; letter-spacing:-0.01em; }
.role p{ color:var(--muted); font-size:clamp(13.5px,1.1vw,16.5px); line-height:1.55; max-width:46ch; text-wrap:pretty; }

/* ---- design principles ---- */
.principle-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,52px); }
.principle{ display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  border-top:1px solid var(--line); padding-top:clamp(18px,2.4vh,26px); }
.principle-icon{ height:clamp(76px,8vw,104px); width:auto; margin-bottom:clamp(6px,1.4vh,14px); }
.principle h3{ font-family:var(--serif); font-weight:400; font-size:clamp(22px,2.2vw,30px); line-height:1.05; letter-spacing:-0.01em; }
.principle p{ color:var(--muted); font-size:clamp(13px,1.05vw,15.5px); line-height:1.55; text-wrap:pretty; }

/* ---- outcome ---- */
.stat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,52px);
  margin-bottom:clamp(28px,4vh,52px); }
.stat{ display:flex; flex-direction:column; gap:8px; border-top:1px solid var(--line); padding-top:clamp(16px,2.2vh,24px); }
.stat .num{ font-family:var(--serif); font-size:clamp(54px,6.5vw,104px); line-height:0.95; letter-spacing:-0.02em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.stat .lbl{ font-family:var(--mono); font-size:clamp(10px,0.85vw,12px); letter-spacing:0.14em; text-transform:uppercase; color:var(--faint); max-width:24ch; }
.outcome-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,52px); }
.outcome{ display:flex; flex-direction:column; gap:8px; }
.outcome h4{ font-family:var(--mono); font-size:11px; font-weight:400; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); }
.outcome p{ color:var(--muted); font-size:clamp(13px,1.05vw,15.5px); line-height:1.55; text-wrap:pretty; }

@media(max-width:900px){
  .role-grid{ grid-template-columns:1fr; }
  .principle-grid{ grid-template-columns:1fr; }
  .stat-grid{ grid-template-columns:1fr; }
  .outcome-grid{ grid-template-columns:1fr; }
}

/* ============================================================================
   FLUID COMPONENTS — container queries
   The player and work list restructure based on their OWN width, so they hold
   up whether they're a third of a desktop, half a tablet, or a full phone.
============================================================================ */

/* ---- player · narrow: track list becomes a horizontal strip along the bottom
   (520px is the narrowest the side-list layout genuinely fits) ---- */
@container player (max-width: 520px){
  .player-body{ grid-template-columns:auto 1fr; }
  .track-list{ grid-column:1 / -1; flex-direction:row; min-width:0; align-self:auto;
    border-left:0; border-top:1px solid var(--line);
    margin:0 calc(-1 * var(--pb-pad)) calc(-1 * var(--pb-pad)); }
  .track-cell{ justify-content:center; gap:8px; min-width:0;
    border-top:0; border-left:1px solid var(--line); padding:13px 6px; }
  .track-cell:first-child{ border-left:0; }
  .track-cell .no{ display:none; }
  .turntable{ width:clamp(108px, 36cqi, 150px); }
  .track-icons{ gap:clamp(6px,2.4cqi,13px); }
}

/* ---- player · very narrow: turntable centered above the info block ---- */
@container player (max-width: 330px){
  .player-body{ grid-template-columns:1fr; justify-items:center; }
  .turntable{ width:clamp(110px, 42cqi, 150px); }
  .player-info{ width:100%; }
}

/* ---- work list · narrow: role drops under the project name ---- */
@container work (max-width: 420px){
  .work-row{ grid-template-columns:auto 1fr auto; grid-template-areas:"idx nm arrow" "idx role arrow";
    row-gap:3px; align-content:center; padding-block:10px; }
  .work-row .idx{ grid-area:idx; }
  .work-row .nm{ grid-area:nm; font-size:clamp(19px, 5.8cqi, 26px); }
  .work-row .role{ grid-area:role; text-align:left; min-width:0; max-width:100%;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.4; }
  .work-row .arrow{ grid-area:arrow; }
}

/* ---- work list · very narrow: index + name + arrow only ---- */
@container work (max-width: 330px){
  .work-row{ grid-template-areas:"idx nm arrow"; }
  .work-row .role{ display:none; }
}

/* ============================================================================
   SONG-DRIVEN ACCENT — large display accents paint with the current song's
   gradient (the IV mark, the hero tagline italic, the status lead italic).
   Small UI accents (eyebrows, icons, borders) stay solid --accent for legibility.
============================================================================ */
.identity h1 .it,
.case-tag .it,
.cs-lead .it{
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

/* ============================================================================
   MOBILE NOW-PLAYING DOCK — Spotify-style sticky footer.
   On phones the full vinyl turntable is replaced by this compact bar; it drives
   the same persistent <audio> via the shared .mini-* hooks, so playback, theme,
   scrubbing and the play/pause icon all stay in sync with the desktop player.
============================================================================ */
.dock{ display:none; }

@media(max-width:760px){
  .right .player{ display:none; }                 /* swap the turntable for the dock */
  body{ padding-bottom:calc(74px + env(safe-area-inset-bottom, 0px)); }
  .case-scroll{ padding-bottom:calc(80px + env(safe-area-inset-bottom, 0px)); }

  .dock{
    position:fixed; left:0; right:0; bottom:0; z-index:90;
    display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:13px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background:linear-gradient(180deg, color-mix(in oklch, var(--bg-1), transparent 6%), var(--bg-1));
    border-top:1px solid var(--line);
    box-shadow:0 -20px 44px -26px oklch(0 0 0 /0.9);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  }

  /* progress as a hairline along the top edge; a taller invisible strip catches touches */
  .dock-progress{ position:absolute; left:0; right:0; top:0; height:3px; border-radius:0;
    background:var(--line-2); cursor:pointer; touch-action:none; overflow:visible; }
  .dock-progress::before{ content:""; position:absolute; left:0; right:0; top:-9px; height:20px; }
  .dock-fill{ position:absolute; left:0; top:0; height:100%; width:0%; border-radius:0;
    background:var(--grad); box-shadow:0 0 8px var(--g2), 0 0 3px var(--g1); }

  .dock-art{ position:relative; width:46px; height:46px; border-radius:7px; overflow:hidden; flex-shrink:0;
    background:var(--grad); display:grid; place-items:center;
    box-shadow:0 6px 16px -8px oklch(0 0 0 /0.8), inset 0 0 0 1px oklch(1 0 0 /0.16); }
  .dock-art-ic{ width:54%; height:54%; background:#1a1410;
    -webkit-mask:var(--icon) center/contain no-repeat; mask:var(--icon) center/contain no-repeat; }

  .dock-info{ min-width:0; display:flex; flex-direction:column; gap:3px; }
  .dock-title{ font-family:var(--serif); font-weight:400; font-size:16px; line-height:1; letter-spacing:-0.01em;
    color:var(--fg); margin:0;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .dock-sub{ display:flex; align-items:center; gap:8px; min-width:0; }
  .dock-kicker{ font-family:var(--mono); font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  .dock-play{ width:46px; height:46px; flex-shrink:0;
    border:none; background:transparent; color:var(--fg);
    display:grid; place-items:center; cursor:pointer;
    transition:background .35s var(--ease), color .35s, transform .25s; }
  .dock-play:active{ transform:scale(.93); }
  .dock-play svg{ width:21px; height:21px; }

  .dock-skip{ width:38px; height:46px; flex-shrink:0;
    border:none; background:transparent; color:var(--fg);
    display:grid; place-items:center; cursor:pointer;
    transition:transform .25s, opacity .25s; }
  .dock-skip:active{ transform:scale(.88); }
  .dock-skip svg{ width:24px; height:24px; }
}

/* ============================================================================
   MOBILE NOW-PLAYING SHEET
   Tapping the dock expands this full-screen panel (Spotify-style). The "album
   art" slot holds the live spinning vinyl — same class-based turntable as the
   desktop player, so it themes + spins from the shared <audio>.
============================================================================ */
.np{
  position:fixed; inset:0; z-index:95; display:flex; flex-direction:column;
  padding:calc(14px + env(safe-area-inset-top, 0px)) clamp(22px,7vw,34px) calc(26px + env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(135% 62% at 50% -10%, var(--accent-dim), transparent 58%),
    linear-gradient(180deg, oklch(0.14 0.008 70 / 0.5), oklch(0.1 0.006 70 / 0.62) 60%);
  -webkit-backdrop-filter:blur(28px) saturate(1.35); backdrop-filter:blur(28px) saturate(1.35);
  transform:translateY(100%); visibility:hidden; pointer-events:none;
  transition:transform .5s var(--ease), visibility 0s linear .5s;
  overscroll-behavior:contain;
}
.np.open{ transform:none; visibility:visible; pointer-events:auto; transition:transform .5s var(--ease); }
body.np-open{ overflow:hidden; }

.np-bar{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; flex-shrink:0; }
.np-collapse{ width:42px; height:42px; display:grid; place-items:center; background:transparent; border:0; color:var(--fg); cursor:pointer; transition:transform .2s var(--ease); }
.np-collapse:active{ transform:translateY(2px); }
.np-collapse svg{ width:26px; height:26px; }
.np-context{ text-align:center; font-family:var(--mono); font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted); }
.np-idx{ text-align:right; font-family:var(--mono); font-size:10px; letter-spacing:0.1em; color:var(--faint); white-space:nowrap; padding-left:8px; padding-right:6px; }

.np-stage{ flex:1; min-height:0; display:grid; place-items:center; padding:clamp(14px,4vh,40px) 0; }
.np-stage .turntable{ width:min(74vw, 320px); }

.np-meta{ display:flex; flex-direction:column; gap:6px; flex-shrink:0; }
.np-meta-top{ display:flex; align-items:center; justify-content:space-between; gap:clamp(14px,5vw,28px); }
.np-meta-top .np-title{ flex:1; min-width:0; }
.np-track-icons{ flex-shrink:0; gap:clamp(11px,3.4vw,16px); }
.np-track-icons .track-icon{ width:clamp(18px,5.2vw,22px); }
.np-title{ font-family:var(--serif); font-weight:400; font-size:clamp(30px,9vw,44px); line-height:1; letter-spacing:-0.01em; color:var(--fg);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.np-artist{ font-family:var(--mono); font-size:12px; letter-spacing:0.06em; color:var(--muted); }

.np-progress-wrap{ margin-top:clamp(18px,3.4vh,28px); flex-shrink:0; }
.np-bar-track{ position:relative; height:5px; border-radius:99px; background:var(--line-2); cursor:pointer; touch-action:none; }
.np-bar-track .mini-fill{ position:absolute; left:0; top:0; bottom:0; width:0%; border-radius:99px;
  background:var(--grad); box-shadow:0 0 10px var(--g2), 0 0 4px var(--g1), 0 0 18px var(--accent-dim); }
.np-times{ display:flex; justify-content:space-between; margin-top:9px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.06em; color:var(--faint); }

.np-controls{ display:flex; align-items:center; justify-content:center; gap:clamp(28px,10vw,52px);
  margin-top:clamp(20px,3.6vh,32px); flex-shrink:0; }
.np-skip{ width:54px; height:54px; display:grid; place-items:center; background:transparent; border:0; color:var(--fg); cursor:pointer; transition:transform .2s var(--ease), color .3s; }
.np-skip:active{ transform:scale(.88); }
.np-skip svg{ width:30px; height:30px; }
.np-play{ width:72px; height:72px; border-radius:50%; flex-shrink:0; cursor:pointer;
  border:2px solid var(--accent); background:var(--accent-dim); color:var(--fg); display:grid; place-items:center;
  box-shadow:0 12px 34px -10px var(--accent-dim);
  transition:transform .2s var(--ease); }
.np-play:active{ transform:scale(.93); }
.np-play svg{ width:30px; height:30px; }

.np-queue{ display:flex; margin-top:clamp(22px,4.2vh,34px); flex-shrink:0;
  border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.np-track{ flex:1; min-width:0; display:flex; align-items:center; justify-content:center; gap:clamp(6px,2.2vw,11px);
  padding:clamp(13px,3.6vw,17px) clamp(4px,1.5vw,10px);
  border:0; border-left:1px solid var(--line); border-radius:0; background:transparent; cursor:pointer;
  transition:background .35s var(--ease); }
.np-track:first-child{ border-left:0; }
.np-track:active{ background:oklch(0.2 0.008 70 / 0.5); }
.np-track .ic{ width:clamp(15px,4.6vw,19px); aspect-ratio:1; flex-shrink:0; background:var(--line-2);
  -webkit-mask:var(--icon) center/contain no-repeat; mask:var(--icon) center/contain no-repeat;
  transition:background .4s var(--ease), filter .4s var(--ease); }
.np-track .nm{ font-family:var(--mono); font-size:clamp(10px,3vw,13px); letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); transition:color .35s; }
.np-track.active{ background:var(--accent-dim); }
.np-track.active .ic{ background:var(--grad); filter:drop-shadow(0 0 8px var(--accent-dim)); }
.np-track.active .nm{ color:var(--fg); }

/* dock reads as tappable */
.dock-art, .dock-info{ cursor:pointer; }

@media(prefers-reduced-motion:reduce){
  .np{ transition:none; }
}