/* The portfolio (/portfolio/): the record collection.
   Every site is a record in a wooden crate, filed behind divider cards by its label. Scrolling, dragging, swiping or the
   arrow keys flip the records forward; the one in front can be pulled out, and then the record slides out of its sleeve
   and spins while the cover plays the whole homepage. The back of the sleeve carries the write-up.
   Real material only: the screenshots, Unsplash photos for the wood and the room, and CSS for everything else. */

.p-crate{
  --room:#0E0A08; --cream:#EFE6D2; --cream-2:#CFC2A8; --mute:#9C8E78; --line:rgba(239,230,210,.14);
  --paper:#EEE6D3; --paper-2:#E3D8C0; --ink:#1D1813; --ink-2:#4A4034; --ink-3:#716552;
  --sticker:#E0492E;
  --f-disp:"Anton",Impact,"Arial Narrow",sans-serif;
  --f-serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --f-mono:"IBM Plex Mono",Consolas,"Courier New",monospace;
  --f-hand:"Permanent Marker","Comic Sans MS",cursive;
  --hdr:68px;
  --wood:url("https://images.unsplash.com/photo-1611072337226-1140ab367200?w=1200&q=70&fm=webp");
  --boards:url("https://images.unsplash.com/photo-1573866539992-6c565be633cd?w=1400&q=65&fm=webp");
  background:var(--room);color:var(--cream);font-family:var(--f-serif);overflow-x:clip
}
html:has(.p-crate){scroll-padding-top:68px;scroll-snap-type:y proximity}
html.is-dragging{scroll-snap-type:none;scroll-behavior:auto}
/* no film grain over this page: it looked like fuzz, and blending it over moving records costs every frame */
.p-crate::after{display:none}
:where(.p-crate) button{font:inherit;color:inherit}
.p-crate :focus-visible{outline:2px solid #F2C46D;outline-offset:3px}

/* ---- the site header and footer, at home in the store ---- */
.p-crate .top{background:rgba(14,10,8,.9);border-bottom:1px solid var(--line)}
.p-crate .brand b{font-family:var(--f-disp);font-weight:400;font-size:1.5rem;letter-spacing:.03em;text-transform:uppercase}
.p-crate .brand small{font-family:var(--f-mono);letter-spacing:.08em;text-transform:none;font-size:.68rem;color:var(--mute)}
.p-crate .brand:hover b{color:#F2C46D}
.p-crate .nav a{font-family:var(--f-serif);font-weight:600;font-size:1rem;color:var(--cream-2)}
.p-crate .nav-links a:hover{color:var(--cream)}
.p-crate .nav-links a[aria-current="page"]{color:var(--cream);box-shadow:0 2px 0 var(--sticker)}
.p-crate .nav .nav-cta{background:var(--cream);color:var(--ink);border-radius:2px}
.p-crate .nav .nav-cta:hover{background:#F2C46D}
.p-crate .foot{background:#0A0706;border-top:1px solid var(--line)}
.p-crate .foot-brand b{font-family:var(--f-disp);font-weight:400;letter-spacing:.02em}
.p-crate .foot-line,.p-crate .foot-nav a{font-family:var(--f-serif)}
@media (max-width:900px){
  .p-crate{--hdr:60px}
  .p-crate .nav-links{background:#120D0A}
  .p-crate .nav .nav-links a{font-family:var(--f-disp);font-weight:400;letter-spacing:.02em}
}

/* ---- the run: tall, so scrolling has room to flip every record; the stage sticks under the header ---- */
.run{position:relative;height:calc(100svh - var(--hdr) + (var(--stops,18) - 1) * var(--step,380px))}
.snaps{position:absolute;inset:0;pointer-events:none}
.snaps i{position:absolute;left:0;width:1px;height:1px;scroll-snap-align:start}
.crate-stage{position:sticky;top:var(--hdr);height:calc(100svh - var(--hdr));overflow:hidden;display:grid;
  grid-template-columns:minmax(300px,410px) minmax(0,1fr);isolation:isolate}

/* the room: a record store, out of focus, with a lamp over the crate */
.room{position:absolute;inset:0;z-index:-1;pointer-events:none}
/* the room photo comes already blurred and darkened (room.webp), so nothing gets blurred live while the records move */
.room-photo{position:absolute;inset:0;background:url(room.webp) 50% 18%/cover no-repeat}
.room-lamp{position:absolute;inset:0;background:
  radial-gradient(60% 75% at 66% 62%,rgba(255,196,128,.20),rgba(255,170,90,.06) 45%,transparent 70%),
  radial-gradient(140% 90% at 60% 40%,transparent 35%,rgba(5,3,2,.78) 100%),
  linear-gradient(to bottom,rgba(14,10,8,.55),transparent 28%,transparent 70%,rgba(8,5,4,.7))}

/* ---- the left column: the bin card, a line about the crate, and the record in front ---- */
.side{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:space-between;gap:1.4rem;
  padding:clamp(1.4rem,3.4vh,2.6rem) 0 clamp(1.4rem,4vh,2.8rem) clamp(16px,3.2vw,48px);min-width:0}
.bin-card{margin:0;display:inline-block;align-self:flex-start;position:relative;padding:.42em .8em .36em;
  font-family:var(--f-hand);font-weight:400;font-size:clamp(1.5rem,2.4vw,2.15rem);line-height:1;color:#141210;letter-spacing:.01em;
  background:linear-gradient(176deg,#F7F2E6,#E9E1CF);transform:rotate(-2.2deg);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 14px 28px rgba(0,0,0,.55),0 2px 5px rgba(0,0,0,.4)}
.bin-card::before{content:"";position:absolute;left:50%;top:-.42em;width:3.2em;height:.9em;transform:translateX(-50%) rotate(2deg);
  background:rgba(232,222,190,.58);box-shadow:0 1px 2px rgba(0,0,0,.18)}
.intro-text{max-width:30ch;margin:1.5rem 0 0;font-size:1.06rem;line-height:1.55;color:var(--cream-2)}
.hint{margin:.8rem 0 0;max-width:32ch;font-family:var(--f-mono);font-size:.76rem;line-height:1.5;color:var(--mute)}

.now{position:relative;max-width:24rem}
.now-count{margin:0 0 .5rem;font-family:var(--f-mono);font-size:.8rem;letter-spacing:.04em;color:var(--mute)}
.now-name{margin:0;font-family:var(--f-disp);font-weight:400;font-size:clamp(2rem,3.3vw,3rem);line-height:1;letter-spacing:.01em;text-wrap:balance;color:var(--cream)}
.now-name::after{content:"";display:block;width:2.4rem;height:4px;margin-top:.75rem;background:var(--g);box-shadow:0 0 14px color-mix(in srgb,var(--g) 45%,transparent)}
.now-kind{margin:.85rem 0 0;font-weight:600;font-size:1.02rem;color:var(--cream)}
.now-note{margin:.35rem 0 0;font-size:1rem;line-height:1.5;color:var(--cream-2);min-height:3em}
.now.is-swap .now-name,.now.is-swap .now-kind,.now.is-swap .now-note{animation:nowIn .32s ease-out}
@keyframes nowIn{from{opacity:0;transform:translateY(6px)}}
.now-act{display:flex;align-items:center;gap:.6rem;margin-top:1.2rem;flex-wrap:wrap}
.btn-pull{display:inline-flex;align-items:center;min-height:46px;padding:.6rem 1.25rem;border:0;border-radius:2px;cursor:pointer;
  background:var(--cream);color:var(--ink);font-family:var(--f-serif);font-weight:700;font-size:1.02rem;text-decoration:none;
  box-shadow:0 2px 0 #B9AC91,0 10px 22px rgba(0,0,0,.45);transition:background .15s,transform .15s}
.btn-pull:hover{background:#F2C46D}
.btn-pull:active{transform:translateY(1px)}
.btn-pull[hidden]{display:none}
.now-step{display:inline-flex;gap:.4rem;margin-left:.2rem}
.step{display:grid;place-items:center;width:46px;height:46px;border:1px solid rgba(239,230,210,.28);border-radius:2px;background:rgba(14,10,8,.55);
  cursor:pointer;font-family:var(--f-mono);font-size:1.05rem;transition:border-color .15s,background .15s}
.step:hover{border-color:var(--cream);background:rgba(239,230,210,.08)}
.step:disabled{opacity:.35;cursor:default}

/* ---- the 3D crate ---- */
.view{position:relative;min-width:0;perspective:var(--persp,1300px);perspective-origin:50% var(--eye,10%);cursor:grab;touch-action:pan-y;
  -webkit-user-select:none;user-select:none}
.view.is-grab{cursor:grabbing}
.scene{position:absolute;left:var(--cx,50%);top:var(--floor,85%);width:0;height:0;transform-style:preserve-3d;transform:rotateY(var(--yaw,0deg))}
.scene>i,.scene>div{position:absolute;display:block}
.items{left:0;top:0;width:0;height:0;transform-style:preserve-3d}

/* the table the crate sits on: dark boards running away from you */
.table{left:calc(var(--s) * -3);top:calc(var(--s) * -2.2);width:calc(var(--s) * 6);height:calc(var(--s) * 4.4);
  transform:translateZ(calc(var(--s) * .3)) rotateX(90deg);
  background:var(--boards) 50% 50%/calc(var(--s) * 2.4) auto repeat,#1a120c;
  -webkit-mask:radial-gradient(48% 46% at 50% 55%,#000 30%,transparent 100%);mask:radial-gradient(48% 46% at 50% 55%,#000 30%,transparent 100%);
  filter:brightness(.62) contrast(1.05) sepia(.2)}
.crate-shadow{left:calc(var(--s) * -.85);top:calc(var(--s) * -.8);width:calc(var(--s) * 1.7);height:calc(var(--s) * 1.6);
  transform:translateY(-1px) translateZ(calc(var(--s) * .1)) rotateX(90deg);
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.85),rgba(0,0,0,.5) 55%,transparent 75%)}

/* the crate: light pine, honey under the lamp. W = inner width, F = front wall depth, B = how far back it goes */
.scene{--W:calc(var(--s) * 1.12);--T:calc(var(--s) * .055);--H:calc(var(--s) * .36);--F:calc(var(--s) * .9);--B:calc(var(--s) * 1.05)}
.wall{background:var(--wood) 30% 40%/calc(var(--s) * 1.6) auto,#B9884F;background-blend-mode:multiply;
  box-shadow:inset 0 0 0 1px rgba(60,35,15,.35)}
.wall::before{content:"";position:absolute;inset:0;background:#C98A47;mix-blend-mode:multiply;opacity:.9}
.wall::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(255,226,170,.22),transparent 30%,rgba(0,0,0,.35))}
.wall-f{left:calc((var(--W) / 2 + var(--T)) * -1);top:calc(var(--H) * -1);width:calc(var(--W) + var(--T) * 2);height:var(--H);
  transform:translateZ(var(--F));box-shadow:inset 0 0 0 1px rgba(60,35,15,.4),inset 0 -14px 24px rgba(0,0,0,.35)}
.wall-f::before{opacity:.8}
.handhold{position:absolute;left:50%;top:18%;width:24%;height:22%;transform:translateX(-50%);border-radius:999px;z-index:1;
  background:radial-gradient(120% 140% at 50% 0%,#050302 40%,#1a0f07);box-shadow:inset 0 4px 6px rgba(0,0,0,.9),0 1px 0 rgba(255,220,170,.25)}
.wall-l,.wall-r{top:calc(var(--H) * -1);width:calc(var(--F) + var(--B));height:var(--H);transform-origin:0 50%;
  -webkit-mask:linear-gradient(to right,#000 40%,transparent 96%);mask:linear-gradient(to right,#000 40%,transparent 96%)}
.wall-l{left:calc(var(--W) / -2);transform:translateZ(var(--F)) rotateY(90deg)}
.wall-r{left:calc(var(--W) / 2);transform:translateZ(var(--F)) rotateY(90deg) scaleX(1)}
.wall-r{transform:translateZ(calc(var(--B) * -1)) rotateY(-90deg);-webkit-mask:linear-gradient(to left,#000 40%,transparent 96%);mask:linear-gradient(to left,#000 40%,transparent 96%)}
.wall-l::after,.wall-r::after{background:linear-gradient(to bottom,rgba(255,226,170,.12),rgba(0,0,0,.45))}
.wall-top{background:var(--wood) 0 0/calc(var(--s) * .9) auto,#D9A566;background-blend-mode:multiply;
  box-shadow:inset 0 0 0 1px rgba(80,45,15,.35)}
.wall-top::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,236,200,.35),rgba(255,236,200,.1));mix-blend-mode:screen}
.wall-top-f{left:calc((var(--W) / 2 + var(--T)) * -1);top:calc(var(--H) * -1 - var(--T) / 2);width:calc(var(--W) + var(--T) * 2);height:var(--T);
  transform:translateZ(calc(var(--F) - var(--T) / 2)) rotateX(90deg)}
.wall-top-l,.wall-top-r{top:calc(var(--H) * -1 - var(--T) / 2);width:calc(var(--F) + var(--B));height:var(--T);transform-origin:0 50%;
  -webkit-mask:linear-gradient(to right,#000 45%,transparent 96%);mask:linear-gradient(to right,#000 45%,transparent 96%)}
.wall-top-l{left:calc(var(--W) / -2 - var(--T) / 2);transform:translateZ(var(--F)) rotateY(90deg) rotateX(90deg)}
.wall-top-r{left:calc(var(--W) / 2 + var(--T) / 2);transform:translateZ(var(--F)) rotateY(90deg) rotateX(90deg)}

/* ---- one record (or divider) in the crate. JS places it; --shade darkens it with distance from the lamp ---- */
.item{position:absolute;left:calc(var(--s) * -.5);top:calc(var(--s) * -1);width:var(--s);height:var(--s);transform-style:preserve-3d;transform-origin:50% 100%;will-change:transform}
.item.is-off{visibility:hidden}
.view.is-still .item,.view.is-still .shade{will-change:auto}
.face{position:absolute;inset:0;display:block;margin:0;padding:0;border:0;border-radius:2px;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  overflow:hidden;background:#222;text-align:left;cursor:pointer}
.front{transform:translateZ(1.5px);container-type:size}
.back{transform:rotateX(180deg) translateZ(1.5px);container-type:size}
.edge{position:absolute;left:0;right:0;top:-1.5px;height:3px;transform:rotateX(90deg);background:linear-gradient(90deg,#cfc3aa,#e8dcc2 30%,#bfb197);
}
.shade{position:absolute;inset:0;background:#070504;opacity:0;pointer-events:none;z-index:6;will-change:opacity}
.back .shade{opacity:.2}
.gloss{position:absolute;inset:0;pointer-events:none;z-index:5;
  background:linear-gradient(112deg,transparent 38%,rgba(255,250,235,.12) 47%,rgba(255,250,235,.03) 53%,transparent 62%) 50% 0/320% 100% no-repeat,
    linear-gradient(to bottom,rgba(255,240,215,.07),transparent 35%)}
/* ring wear (where the record inside rubs the sleeve), a little grime at the edges, and paper grain */
/* ring wear and soft edges only: a paper grain here read as static over the pictures (Anduin: "still fuzzy") */
.wear{position:absolute;inset:0;pointer-events:none;z-index:4;opacity:var(--wear,.6);
  background:
    radial-gradient(circle at 50% 50%,transparent 0 45.6%,rgba(255,255,255,.09) 46.6%,rgba(255,255,255,.03) 47.6%,transparent 48.6%),
    radial-gradient(circle at 50% 50%,transparent 0 16.2%,rgba(255,255,255,.05) 16.8%,transparent 17.6%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 0 3px 1px rgba(255,248,230,.18),inset 0 0 26px rgba(0,0,0,.28)}
.art{position:absolute;overflow:hidden;background:#111}
.art img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}

/* label house styles: each record label dresses its sleeves its own way */
.cv-bleed .art{inset:0}
.cv-board .front{background:var(--board,#ECE4D0)}
.cv-board .art{left:7.5%;right:7.5%;top:7.5%;height:61%;box-shadow:0 0 0 1px rgba(0,0,0,.28),0 1px 3px rgba(0,0,0,.3)}
.cv-name{position:absolute;z-index:3;margin:0;font-family:var(--f-disp);font-weight:400;line-height:.92;letter-spacing:.005em;text-transform:uppercase;white-space:nowrap}
.cv-line{position:absolute;z-index:3;font-family:var(--f-mono);font-weight:500;font-size:2.9cqw;letter-spacing:.02em;white-space:nowrap}
.cv-board .cv-name{left:7.5%;right:7.5%;top:73.5%;font-size:var(--fs,10cqw);color:var(--ink)}
.cv-board .cv-line{left:7.5%;bottom:6.2%;color:var(--ink-2)}
.cv-board.kraft{--board:#C7A77A}
.cv-board.kraft .cv-name{color:#20170e}
/* small business samples: a rubber stamp over the corner, like the promo copies labels sent out to radio */
.stamp{position:absolute;z-index:3;right:10%;top:11%;padding:.5cqw 1.6cqw .35cqw;border:.55cqw double #C2352C;border-radius:.6cqw;transform:rotate(-9deg);
  font-family:var(--f-mono);font-weight:500;font-size:3.6cqw;line-height:1.1;letter-spacing:.14em;text-transform:uppercase;color:#C2352C;background:rgba(245,238,224,.82);white-space:nowrap}
.cv-band .art{left:0;right:0;top:0;height:71%}
.cv-band .band{position:absolute;left:0;right:0;bottom:0;height:29%;background:var(--g);z-index:2}
.cv-band .band::after{content:"";position:absolute;left:0;right:0;top:0;height:2.2%;background:rgba(0,0,0,.35)}
.cv-band .cv-name{left:6%;bottom:7.5%;font-size:var(--fs,12cqw);color:var(--on-g,#111)}
.cv-band .cv-line{left:6%;top:75.5%;color:var(--on-g,#111);opacity:.8}

/* the back of a sleeve (seen on the records you've flipped forward) */
.back{background:var(--paper);color:var(--ink);padding:8% 8% 7%;display:flex;flex-direction:column;gap:3cqw;cursor:default}
.back::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,transparent 0 45.6%,rgba(0,0,0,.07) 46.6%,transparent 48.6%);pointer-events:none}
.bk-name{font-family:var(--f-disp);font-size:9cqw;line-height:1;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-tracks{margin:0;padding:0;list-style:none;font-family:var(--f-mono);font-size:3.6cqw;line-height:1.55;color:var(--ink)}
.bk-tracks li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-tracks b{display:inline-block;width:2.6em;font-weight:500;color:var(--ink)}
.bk-dom{margin-top:auto;font-family:var(--f-mono);font-size:2.8cqw;color:var(--ink-3)}
.bk-label{position:absolute;right:8%;bottom:7%;padding:.3em .5em;border:1.5px solid var(--ink);font-family:var(--f-mono);font-size:2.5cqw;font-weight:500}

/* divider cards: white card stock with a tab, lettered in marker, like the bins at any record store */
.item.divider .face{overflow:visible;background:#ECE7DC;cursor:default}
.item.divider .face::before{content:"";position:absolute;inset:0;border-radius:2px;
  background:linear-gradient(180deg,rgba(255,255,255,.35),transparent 30%,rgba(120,100,70,.08)),
    var(--grain-dark,none) 0 0/128px}
.tab{position:absolute;left:var(--tab-x,8%);width:40%;height:15%;background:#ECE7DC;border-radius:3px 3px 0 0;display:flex;align-items:center;justify-content:center;
  padding:0 4%;font-family:var(--f-hand);line-height:1;color:#151210;white-space:nowrap;text-transform:uppercase;letter-spacing:.01em}
.tab>span{font-size:var(--fs,5cqw)}
.front .tab{top:-14.6%}
.back .tab{bottom:-14.6%;border-radius:0 0 3px 3px}
.tab::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.35),transparent 60%);pointer-events:none}
.div-big{position:absolute;left:8%;right:8%;top:16%;font-family:var(--f-hand);font-size:11cqw;line-height:1.05;color:#151210;text-transform:uppercase;text-wrap:balance}
.div-sub{position:absolute;left:8%;bottom:9%;font-family:var(--f-hand);font-size:5cqw;color:#3b342c}
.item.divider .back{padding:0}
.item.divider .back .div-big{top:auto;bottom:16%}

/* the white label at the very back */
.cv-blank .front{background:#F3EFE6}
.cv-blank .front::before{content:"";position:absolute;left:50%;top:50%;width:36%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,#0b0b0b 0 6%,#E9E3D6 6.5% 100%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15),0 0 0 2.4cqw #F3EFE6,0 0 0 calc(2.4cqw + 1px) rgba(0,0,0,.08)}
.cv-blank .cv-hand{position:absolute;left:0;right:0;top:9%;text-align:center;font-family:var(--f-hand);font-size:9cqw;color:#1a1714;transform:rotate(-3deg)}

/* ---- vinyl, built in CSS: grooves, the gaps between tracks, the shine from the lamp, and the label ---- */
.vinyl{position:absolute;aspect-ratio:1;border-radius:50%;container-type:inline-size;
  background:var(--gaps,none),repeating-radial-gradient(circle at 50% 50%,#121212 0 .5px,#0a0a0a .5px 1.4px,#141414 1.4px 2px),#0b0b0b;
  box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(255,255,255,.05),inset 0 0 0 .8cqi #0c0c0c,0 24px 50px rgba(0,0,0,.6)}
.vinyl::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:3;
  background:
    conic-gradient(from 0deg,transparent 0 22deg,rgba(255,255,255,.13) 34deg,rgba(255,255,255,.02) 50deg,transparent 64deg,transparent 202deg,rgba(255,255,255,.11) 214deg,rgba(255,255,255,.02) 230deg,transparent 244deg),
    radial-gradient(circle at 34% 28%,rgba(255,255,255,.07),transparent 40%)}
.spin{position:absolute;inset:0;border-radius:50%;will-change:transform}
/* pulled out, the record spins up to 33 1/3 (200 degrees a second) and keeps turning, all in CSS: speeding up evenly
   for 1.6 s covers 160 degrees and ends at exactly that speed, so the steady spin takes over without a jump */
@keyframes tc-spinup{from{transform:rotate(0deg)}to{transform:rotate(160deg)}}
@keyframes tc-spin{from{transform:rotate(160deg)}to{transform:rotate(520deg)}}
.player.is-out .pl-vinyl .spin{animation:tc-spinup 1.6s cubic-bezier(.11,0,.5,0) both,tc-spin 1.8s linear 1.6s infinite}
@media (prefers-reduced-motion:reduce){.player.is-out .pl-vinyl .spin{animation:none}}
.spin::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 40deg,rgba(255,255,255,.025),transparent 12%,rgba(255,255,255,.02) 30%,transparent 46%,rgba(255,255,255,.03) 70%,transparent 85%)}
.label{position:absolute;left:33.2%;top:33.2%;width:33.6%;height:33.6%;border-radius:50%;background:var(--g);color:var(--on-g,#111);overflow:hidden;
  box-shadow:0 0 0 .5cqi rgba(0,0,0,.45),inset 0 0 2cqi rgba(0,0,0,.25)}
.label::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,transparent 0 46%,rgba(0,0,0,.18) 47% 48%,transparent 49%),
    var(--grain-dark,none) 0 0/96px}
.label::after{content:"";position:absolute;left:50%;top:50%;width:7.5%;height:7.5%;transform:translate(-50%,-50%);border-radius:50%;background:#0a0a0a;
  box-shadow:inset 0 1px 2px #000,0 0 0 .3cqi rgba(255,255,255,.25)}
.lb-label{position:absolute;left:16%;right:16%;top:17%;text-align:center;font-family:var(--f-mono);font-weight:500;font-size:2.1cqi;letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.lb-name{position:absolute;left:12%;right:12%;top:26.5%;text-align:center;font-family:var(--f-disp);font-size:var(--lfs,4.2cqi);line-height:.95;text-transform:uppercase;text-wrap:balance}
.lb-side{position:absolute;left:0;right:0;top:59%;text-align:center;font-family:var(--f-mono);font-weight:500;font-size:2.1cqi;letter-spacing:.08em}
.lb-dom{position:absolute;left:18%;right:18%;top:68%;text-align:center;font-family:var(--f-mono);font-size:1.7cqi;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* in the crate, the record in front lifts a little out of its sleeve when you point at it */
.item .vinyl{display:none;left:2%;top:2%;width:96%;transform:translateZ(0);transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.item.is-current .vinyl{display:block}
@media (hover:hover) and (pointer:fine){
  .item.is-current:hover .vinyl,.item.is-current:focus-within .vinyl{transform:translateY(-23%)}
}

/* ---- the inventory under the crate ---- */
.inventory{position:relative;padding:clamp(3rem,8vw,6rem) clamp(16px,4vw,48px) clamp(3rem,7vw,5rem);
  background:linear-gradient(#0E0A08,#120D0A);border-top:1px solid var(--line)}
.inv-in{max-width:1180px;margin:0 auto}
.inventory h2,.notes h2{margin:0 0 2rem;font-family:var(--f-disp);font-weight:400;font-size:clamp(2rem,4vw,3rem);line-height:1;letter-spacing:.01em}
.inv-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,196px),1fr));gap:2rem 1.6rem}
.inv-group h3,.inv-samples h3{display:inline-block;white-space:nowrap;margin:0 0 .9rem;padding:.3em .6em .25em;background:#ECE7DC;color:#151210;font-family:var(--f-hand);font-weight:400;
  font-size:1.05rem;text-transform:uppercase;transform:rotate(-1.5deg);border-radius:3px 3px 0 0}
.inv-group ul{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.inv-group li{border-bottom:1px solid var(--line)}
.inv-group button{display:flex;align-items:baseline;gap:.75rem;width:100%;min-height:48px;padding:.7rem 0;background:none;border:0;cursor:pointer;text-align:left}
.inv-group button i{flex:none;width:.7rem;height:.7rem;border-radius:50%;background:var(--g);box-shadow:0 0 0 3px #0b0b0b,0 0 0 4px #333;transform:translateY(1px)}
.inv-group button b{font-family:var(--f-disp);font-weight:400;font-size:1.3rem;line-height:1.1;letter-spacing:.01em;color:var(--cream)}
.inv-group button span{display:block;font-size:.92rem;color:var(--mute);margin-top:.1rem}
.inv-group button:hover b{color:#F2C46D}
.inv-samples{margin-top:clamp(2.6rem,5vw,3.6rem);padding-top:clamp(2rem,4vw,2.8rem);border-top:1px solid var(--line)}
.inv-note{margin:0 0 1.4rem;font-size:.98rem;color:var(--mute)}
.inv-samples ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.8rem 1.6rem}
.inv-samples button{display:block;width:100%;padding:0;background:none;border:0;color:inherit;cursor:pointer;text-align:left}
.inv-pic{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;border-radius:2px;background:#111;outline:1px solid var(--line);container-type:inline-size;transition:outline-color .2s,box-shadow .2s}
.inv-pic img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.inv-pic .stamp{right:6%;top:9%;padding:.7cqw 2.4cqw .5cqw;border-width:.9cqw;font-size:5.2cqw}
.inv-txt b{display:block;margin-top:.8rem;font-family:var(--f-disp);font-weight:400;font-size:1.3rem;line-height:1.1;letter-spacing:.01em;color:var(--cream)}
.inv-txt span{display:block;margin-top:.15rem;font-size:.92rem;color:var(--mute)}
.inv-samples button:hover .inv-pic,.inv-samples button:focus-visible .inv-pic{outline:2px solid var(--g);box-shadow:0 0 30px -10px var(--g)}
.inv-samples button:hover b{color:#F2C46D}
@media (max-width:900px){.inv-samples ul{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.inv-samples ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem 1rem}}

/* ---- liner notes: every write-up as plain text (baked in by tools/seo.mjs), one row per record ---- */
.notes{position:relative;padding:0 clamp(16px,4vw,48px) clamp(3rem,7vw,5rem);background:#120D0A}
.notes .inv-in{padding-top:clamp(2.6rem,5vw,3.6rem);border-top:1px solid var(--line)}
.notes-list{border-top:1px solid var(--line)}
.note{border-bottom:1px solid var(--line)}
.note summary{display:flex;align-items:baseline;gap:.75rem;min-height:48px;padding:.85rem 0;cursor:pointer;list-style:none}
.note summary::-webkit-details-marker{display:none}
.note summary i{flex:none;width:.7rem;height:.7rem;border-radius:50%;background:var(--g);box-shadow:0 0 0 3px #0b0b0b,0 0 0 4px #333;transform:translateY(1px)}
.note-head{flex:1;min-width:0}
.note-name{display:block;font-family:var(--f-disp);font-weight:400;font-size:1.3rem;line-height:1.1;letter-spacing:.01em;color:var(--cream)}
.note-kind{display:block;margin-top:.1rem;font-size:.92rem;color:var(--mute)}
.note-label{flex:none;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.note summary::after{content:"+";flex:none;width:1.2em;font-family:var(--f-mono);font-size:1.2rem;color:#F2C46D;text-align:center;transition:transform .2s}
.note[open] summary::after{transform:rotate(45deg)}
.note summary:hover .note-name{color:#F2C46D}
.note-body{max-width:46em;padding:0 0 1.8rem 1.45rem;color:#DCD2C2;font-size:1.02rem;line-height:1.65}
.note-body p{margin:0 0 .8rem}
.note-body h3{margin:1.4rem 0 .6rem;font-family:var(--f-mono);font-weight:500;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.note-tracks{margin:0;padding:0;list-style:none;display:grid;gap:.55rem}
.note-tracks li{display:grid;grid-template-columns:2.2em minmax(0,1fr);gap:.5rem}
.note-tracks .no{font-family:var(--f-mono);font-size:.85rem;color:var(--mute);padding-top:.15em}
.note-tracks b{color:var(--cream)}
.note-built span{margin-right:.5em;font-family:var(--f-mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.note-body a{color:#F2C46D}
@media (max-width:560px){.note-label{display:none}}

/* ---- the player: the record pulled out ---- */
.player{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--cream);
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;font-family:var(--f-serif)}
.player::backdrop{background:transparent}
.pl-bg{position:fixed;inset:0;z-index:0;background:
  radial-gradient(70% 60% at 30% 38%,rgba(255,190,120,.16),transparent 70%),
  radial-gradient(130% 100% at 50% 30%,transparent 30%,rgba(0,0,0,.7)),
  url(room.webp) 50% 20%/cover}
/* a plain dark wash over the blurred room (a backdrop blur here had to be redrawn on every frame of the flight) */
.pl-bg::before{content:"";position:absolute;inset:0;background:rgba(14,10,8,.86)}
.pl-bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:1rem;padding:.7rem clamp(16px,3vw,40px);
  background:rgba(14,10,8,.95);border-bottom:1px solid var(--line)}
.pl-close,.pl-step button{min-height:44px;padding:.45rem .95rem;border:1px solid rgba(239,230,210,.3);border-radius:2px;background:transparent;cursor:pointer;
  font-family:var(--f-serif);font-weight:600;font-size:.98rem}
.pl-close:hover,.pl-step button:hover{border-color:var(--cream);background:rgba(239,230,210,.08)}
.pl-count{margin-left:auto;font-family:var(--f-mono);font-size:.8rem;color:var(--mute)}
.pl-step{display:flex;gap:.4rem}
.pl-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);
  max-width:1360px;margin:0 auto;padding:clamp(1.5rem,4vh,3rem) clamp(16px,3vw,40px) 4rem}
.pl-deck{position:sticky;top:max(84px,calc(50vh - var(--ps) / 2 - 30px));align-self:start;--ps:min(440px,58vh,calc((100vw - 32px) / 1.62))}
.pl-stack{position:relative;width:calc(var(--ps) * 1.6);max-width:100%;height:var(--ps)}
.pl-sleeve{position:absolute;left:0;top:0;width:var(--ps);height:var(--ps);z-index:2;border-radius:2px;
  box-shadow:0 30px 60px rgba(0,0,0,.6),0 6px 14px rgba(0,0,0,.4)}
.pl-sleeve .face{transform:none;cursor:default}
.pl-vinyl{left:calc(var(--ps) * .02);top:calc(var(--ps) * .02);width:calc(var(--ps) * .96);z-index:1;transform:translateX(var(--out,0px));
  transition:transform .9s cubic-bezier(.25,.9,.25,1)}
.player.is-out .pl-vinyl{--out:calc(var(--ps) * .58)}
.player.is-closing .pl-vinyl{transition-duration:.34s;transition-timing-function:cubic-bezier(.5,0,.75,0)}
/* the phone: the same site on a phone, standing in front of the sleeve once the record is out */
.pl-stack{margin-bottom:calc(var(--ps) * .3)}
.pl-phone{position:absolute;z-index:3;left:calc(var(--ps) * .7);top:calc(var(--ps) * .5);width:calc(var(--ps) * .36);padding:calc(var(--ps) * .016);border-radius:calc(var(--ps) * .06);
  background:#0B0A0F;border:2px solid #3A3542;box-shadow:0 18px 40px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.05);pointer-events:none;
  opacity:0;transform:translateY(18px);transition:opacity .45s ease .2s,transform .6s cubic-bezier(.2,.8,.2,1) .2s}
.pl-phone-screen{position:relative;aspect-ratio:9/19;overflow:hidden;border-radius:calc(var(--ps) * .045);background:#000}
.pl-phone-screen img{position:absolute;left:0;top:0;width:100%;height:auto;max-width:none;will-change:transform}
.player.is-out .pl-phone{opacity:1;transform:none}
.player.is-closing .pl-phone,.player.is-swapping .pl-phone{opacity:0;transform:translateY(18px);transition-delay:0s}
.pl-visit{display:inline-block;margin-top:.7rem;font-weight:700;color:var(--cream);text-decoration:underline;text-decoration-color:var(--g);text-decoration-thickness:2px;text-underline-offset:4px}
.pl-visit:hover{color:#F2C46D}
.pl-tip{margin:1rem 0 0;max-width:calc(var(--ps) * 1.4);font-family:var(--f-mono);font-size:.76rem;line-height:1.5;color:var(--mute)}
/* the cover, playing: the whole homepage scrolls past inside the art */
.art.is-window{cursor:ns-resize}
.art .scroller{position:absolute;right:6px;top:8px;bottom:8px;width:5px;border-radius:3px;background:rgba(0,0,0,.45);box-shadow:0 0 0 1px rgba(255,255,255,.14);z-index:3;pointer-events:none}
.art .scroller i{position:absolute;left:0;top:0;width:100%;height:20%;border-radius:3px;background:rgba(255,255,255,.82);will-change:transform}
.art.is-window img{height:auto;object-fit:initial;will-change:transform}

/* the back cover: the write-up */
.pl-backcover{position:relative;align-self:start;background:var(--paper);color:var(--ink);padding:clamp(1.4rem,3.2vw,2.8rem);border-radius:2px;
  box-shadow:0 30px 60px rgba(0,0,0,.55),0 4px 10px rgba(0,0,0,.35);font-size:1.04rem;line-height:1.6}
.pl-backcover::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:var(--grain-dark,none) 0 0/128px,
    linear-gradient(170deg,rgba(255,255,255,.35),transparent 40%,rgba(120,95,60,.07));box-shadow:inset 0 0 40px rgba(110,85,50,.15)}
.pl-backcover>*{position:relative}
.pl-backcover{transition:opacity .4s ease,transform .4s ease}
.pl-backcover.is-empty{opacity:0;transform:translateY(14px)}
.bc-head{display:grid;grid-template-columns:1fr auto;gap:.4rem 1.2rem;align-items:start;padding-bottom:1.2rem;border-bottom:2px solid var(--ink)}
.bc-dom{grid-column:1/-1;margin:0;font-family:var(--f-mono);font-size:.8rem;color:var(--ink-3);letter-spacing:.02em}
.bc-name{margin:.1rem 0 0;font-family:var(--f-disp);font-weight:400;font-size:clamp(2.3rem,4.4vw,3.6rem);line-height:.95;letter-spacing:.005em;text-transform:uppercase;text-wrap:balance}
.bc-labelmark{display:grid;place-items:center;align-self:start;margin-top:.3rem;width:4.4rem;height:4.4rem;border-radius:50%;background:var(--g);color:var(--on-g,#111);
  font-family:var(--f-mono);font-weight:500;font-size:.56rem;line-height:1.15;text-align:center;text-transform:uppercase;letter-spacing:.04em;padding:.6rem;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.25),0 0 0 3px var(--paper),0 0 0 4px var(--ink)}
.bc-kind{grid-column:1/-1;margin:.35rem 0 0;font-weight:600;font-size:1.05rem;color:var(--ink-2)}
.bc-job{margin-top:1.3rem}
.bc-job p{margin:0 0 .9rem}
.bc-job p:first-child{font-size:1.16rem;line-height:1.5}
.bc-job b{font-weight:700}
.pl-backcover h3{margin:1.8rem 0 .8rem;font-family:var(--f-disp);font-weight:400;font-size:1.55rem;line-height:1.05;letter-spacing:.01em}
.tracks{margin:0;padding:0;list-style:none;border-top:1px solid rgba(29,24,19,.3)}
.tracks li{display:grid;grid-template-columns:2.6rem 1fr;gap:.2rem .6rem;padding:.75rem 0;border-bottom:1px solid rgba(29,24,19,.18)}
.tracks .no{font-family:var(--f-mono);font-weight:500;font-size:.86rem;color:var(--ink-3);padding-top:.15rem}
.tracks b{display:block;font-weight:700;font-size:1.04rem;line-height:1.35}
.tracks span{display:block;color:var(--ink-2);font-size:.98rem;line-height:1.5;margin-top:.15rem}
.tracks .side-b{border-top:2px solid rgba(29,24,19,.45)}
.liner{column-count:2;column-gap:2rem;column-rule:1px solid rgba(29,24,19,.18);font-size:.98rem;line-height:1.6}
.liner p{margin:0 0 .85rem;break-inside:avoid-column}
.liner p:first-child::first-letter{float:left;font-family:var(--f-disp);font-size:3.1em;line-height:.84;padding:.08em .12em 0 0}
.credits{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1.2rem;margin:0;font-size:.96rem;padding-top:.2rem}
.credits dt{font-family:var(--f-mono);font-size:.8rem;color:var(--ink-3);padding-top:.15rem}
.credits dd{margin:0}
.bc-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin:2rem 0 0}
.bc-visit{display:inline-flex;align-items:center;min-height:48px;padding:.6rem 1.25rem;background:var(--ink);color:var(--paper);text-decoration:none;font-weight:700;border-radius:2px;
  box-shadow:0 2px 0 #000}
.bc-visit:hover{background:#000;color:#F2C46D}

/* opening and closing */
.player .pl-bg,.player .pl-bar,.player .pl-backcover,.player .pl-tip{transition:opacity .35s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.player.is-entering .pl-bg,.player.is-entering .pl-bar{opacity:0}
.player.is-entering .pl-backcover,.player.is-entering .pl-tip{opacity:0;transform:translateY(24px)}
.player.is-swapping .pl-backcover{opacity:0;transform:translateY(10px)}
.player.is-swapping .pl-sleeve{opacity:.0;transition:opacity .2s}
.pl-sleeve{transition:opacity .25s}

/* ---- phones and narrow windows ---- */
@media (max-width:860px){
  .crate-stage{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto}
  .side{display:contents}
  .intro{grid-row:1;position:relative;z-index:2;padding:1rem 16px 0}
  .bin-card{font-size:1.35rem}
  .intro-text{margin-top:.9rem;font-size:.95rem;line-height:1.45;max-width:40ch}
  .hint{display:none}
  .view{grid-row:2}
  .now{grid-row:3;z-index:2;max-width:none;padding:.4rem 16px calc(1rem + env(safe-area-inset-bottom,0px));
    background:linear-gradient(to bottom,transparent,rgba(10,7,5,.75) 30%)}
  .now-count{margin-bottom:.3rem}
  .now-name{font-size:1.75rem}
  .now-name::after{margin-top:.5rem;height:3px}
  .now-kind{margin-top:.55rem;font-size:.95rem}
  .now-note{display:none}
  .now-act{margin-top:.75rem}
  .pl-in{grid-template-columns:minmax(0,1fr);padding-top:1.2rem}
  .pl-deck{position:relative;top:auto;--ps:min(440px,calc((100vw - 32px) / 1.6))}
  .liner{column-count:1}
  .pl-count{display:none}
  .pl-bar{gap:.5rem}
  .pl-step{margin-left:auto}
}
@media (max-width:420px){
  .pl-close,.pl-step button{padding:.4rem .7rem;font-size:.92rem}
}
@media (max-height:640px) and (max-width:860px){
  .intro-text{display:none}
}

/* ---- reduced motion: no spinning, no flights, no drifting cover ---- */
@media (prefers-reduced-motion:reduce){
  .item .vinyl,.pl-vinyl,.player *{transition:none!important;animation:none!important}
  .now.is-swap .now-name,.now.is-swap .now-kind,.now.is-swap .now-note{animation:none}
}