/* v9 "Magazine" draft — warm, minimal, big panels, few words. Draft only (store-draft branch). */
@font-face{font-family:"Archivo";src:url(../fonts/archivo-var.woff2) format("woff2");font-weight:400 720;font-stretch:62% 100%;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(../fonts/ibm-plex-mono-400.woff2) format("woff2");font-weight:400;font-display:swap}
/* Plex Mono has no ℗ (U+2117): take it from Archivo (which now carries it), so phones never fall back to a glyph that reads as a copyright sign */
@font-face{font-family:"Plex Mono";src:url(../fonts/archivo-var.woff2) format("woff2");font-weight:400;unicode-range:U+2117;font-display:swap}
:root{
  --cream:#f4ecdc;--cream-2:#ebdfc8;--ink:#2a2119;--ink-2:#5f4f3e;--rust:#a63f1a;--rust-l:#f0a07a;--umber:#2a2119;
  --sans:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --bar:3.5rem;--gut:clamp(1.25rem,4vw,3.5rem);
  /* four type sizes only */
  --t-xl:clamp(3rem,8.4vw,8rem);--t-l:clamp(2.1rem,5vw,4.4rem);--t-m:clamp(1.1rem,1.5vw,1.3rem);--t-s:.76rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:var(--bar)}
body{margin:0;background:var(--cream);color:var(--ink);font:420 var(--t-m)/1.5 var(--sans);font-stretch:96%}
img,svg{display:block;max-width:100%}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--rust);outline-offset:3px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--cream);padding:.6rem 1rem;z-index:99}
.skip:focus{left:.5rem;top:.5rem}
h1,h2,h3,p{margin:0}
h1,h2{font-weight:640;font-stretch:66%;line-height:.94;letter-spacing:-.01em;text-transform:uppercase}
h1{font-size:var(--t-xl)}
h2{font-size:var(--t-l)}
h3{font-size:var(--t-m);font-weight:620;font-stretch:88%}
.kick,.mono{font-family:var(--mono);font-size:var(--t-s);letter-spacing:.09em;text-transform:uppercase}

/* bar */
.bar{position:sticky;top:0;z-index:30;height:var(--bar);display:flex;align-items:center;gap:1.5rem;padding:0 var(--gut);background:rgba(244,236,220,.94);border-bottom:1px solid #2a211922;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.mark{font:700 1.4rem/1 var(--sans);font-stretch:62%;letter-spacing:.06em;text-decoration:none;text-transform:uppercase}
.mark span{color:var(--rust)}
.bar nav{margin-left:auto}
.bar ul{display:flex;gap:clamp(.9rem,2.2vw,2rem);list-style:none;margin:0;padding:0}
.bar nav a{font:500 .95rem/1 var(--sans);font-stretch:88%;text-decoration:none;color:var(--ink-2);min-height:44px;display:inline-flex;align-items:center}
.bar nav a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--rust)}
.bar nav a:hover{color:var(--ink)}
.draft{background:var(--ink);color:var(--cream);text-align:center;padding:.45rem var(--gut)}

/* panels */
.panel{position:relative;min-height:calc(100svh - var(--bar));display:grid;overflow:hidden}
.panel + .panel{border-top:1px solid #2a21191a;content-visibility:auto;contain-intrinsic-size:auto 100svh}
.bleed{color:#fff8ec;background:var(--umber)}
.bleed .pimg,.bleed .pimg img{position:absolute;inset:0;width:100%;height:100%}
.bleed .pimg img{object-fit:cover}
.bleed::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(42,33,25,0) 30%,rgba(42,33,25,.55) 62%,rgba(42,33,25,.85) 100%);pointer-events:none}
.bleed .ptext{text-shadow:0 1px 18px rgba(30,22,15,.55)}
.bleed .ptext{position:relative;z-index:2;align-self:end;padding:0 var(--gut) clamp(2.5rem,7vh,5rem);max-width:min(64rem,100%)}
/* scrim that follows the text block, not the panel height: a tall block (e.g. /pickups/ hero, 3-line headline) put its
   kicker above the ::after gradient, on light watercolor. Soft-edged; clipped by .panel overflow, so no sideways scroll. */
.bleed .ptext::before{content:"";position:absolute;z-index:-1;inset:-3rem -8rem 0 0;background:linear-gradient(90deg,rgba(42,33,25,.58) 0%,rgba(42,33,25,.42) 55%,rgba(42,33,25,0) 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 3rem);mask-image:linear-gradient(180deg,transparent 0,#000 3rem);pointer-events:none}
/* bleed kicker: cream at full opacity + dark halo so it reads over busy watercolor (was overridden to rust by .ptext .kick) */
.bleed .ptext .kick{color:#fff8ec;font-size:.86rem;text-shadow:0 1px 2px rgba(20,14,10,.8),0 0 12px rgba(20,14,10,.6)}
.plate{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:center;gap:var(--gut);padding:clamp(2rem,6vh,4rem) var(--gut)}
.plate.flip{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.plate.flip .pimg{order:2}
.plate .pimg{display:flex;justify-content:center}
.plate .pimg img{max-height:calc(100svh - var(--bar) - 5rem);width:auto;object-fit:contain}
.plate.paper{background:var(--cream-2)}
.plate.dark{background:var(--umber);color:#fff8ec}
.plate.dark .kick{color:#f6d9c4}
.ptext{display:grid;gap:1.1rem;align-content:center}
.ptext .kick{color:var(--rust)}
.line{max-width:26em}
.acts{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center;margin-top:.4rem}
.btn{display:inline-flex;align-items:center;min-height:48px;padding:0 1.4rem;background:var(--rust);color:#fff;text-decoration:none;font:600 1rem/1 var(--sans);font-stretch:90%;letter-spacing:.03em;text-transform:uppercase;border:0;cursor:pointer}
.btn:hover{background:#8a3213;color:#fff}
.btn[aria-disabled="true"],.btn:disabled{background:#8d8174;cursor:not-allowed}
.more{display:inline-flex;align-items:center;min-height:48px;font:600 1rem/1 var(--sans);font-stretch:90%;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;border-bottom:2px solid currentColor;min-height:auto;padding:.35rem 0}
.more::after{content:" →"}
.bleed .btn{background:#fff8ec;color:var(--ink)}
.bleed .btn:hover{background:#fff;color:var(--rust)}
.price{font:620 var(--t-l)/1 var(--sans);font-stretch:66%;text-transform:uppercase}
.price small{display:block;margin-top:.4rem;font:400 var(--t-s)/1.3 var(--mono);letter-spacing:.08em;color:var(--ink-2)}
.trio{display:flex;gap:clamp(.5rem,1.5vw,1.25rem);align-items:flex-end;justify-content:center}
.trio img{height:min(62svh,560px);width:auto}

/* motion: line reveals (JS adds .in); image drift via scroll timeline */
.js .rv .ln{display:block;overflow:hidden;padding-bottom:.06em;padding-top:.24em;margin-top:-.24em;pointer-events:none}
/* top pad (cancelled by the negative margin) keeps capital accents (Á in Rácalinda) inside the reveal mask; the pad is click-through */
.js .rv .ln > span{pointer-events:auto}
.js .rv .ln > span{display:inline-block;transform:translateY(108%);transition:transform .9s cubic-bezier(.2,.75,.15,1);transition-delay:calc(var(--i,0) * 90ms)}
.js .rv.in .ln > span{transform:none}
.js .fd{opacity:0;transform:translateY(.8rem);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.75,.15,1);transition-delay:calc(var(--i,0) * 90ms + 200ms)}
.js .fd.in{opacity:1;transform:none}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .bleed .pimg img{animation:drift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    @keyframes drift{from{transform:scale(1.08) translateY(-2%)}to{transform:scale(1.02) translateY(2%)}}
  }
}
@media (prefers-reduced-motion:reduce){
  .js .rv .ln > span,.js .fd{transform:none!important;opacity:1!important;transition:none!important}
}

/* detail pages + lists */
.doc{padding:clamp(3rem,9vh,6rem) var(--gut);display:grid;gap:clamp(1.5rem,4vh,2.5rem)}
.doc.paper{background:var(--cream-2)}
.doc .lede{max-width:34em}
.rows{display:flex;flex-wrap:wrap;gap:1px;background:#2a211933;border:1px solid #2a211933;margin:0}
/* flex, not grid: the last row's cells stretch to fill it, so an odd count never leaves an empty shaded cell */
.rows > div{flex:1 1 14rem;min-width:0;background:var(--cream);padding:.9rem 1rem;display:grid;gap:.35rem;align-content:start}
.doc.paper .rows > div{background:var(--cream-2)}
.rows dt{font:400 var(--t-s)/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.rows dd{margin:0;font-weight:560}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1.5rem 2rem}
.steps li{display:grid;gap:.35rem;border-top:2px solid var(--ink);padding-top:.75rem}
.steps b{font-weight:640}
.prose{max-width:36em;display:grid;gap:1rem}
.src{font-size:.9rem;color:var(--ink-2);display:grid;gap:.4rem;padding-left:1.2rem;margin:0}
.src a{word-break:break-word}
sup a{text-decoration:none;color:var(--rust);font-size:.75em;padding:0 .15em}
.titles{list-style:none;margin:0;padding:0;columns:2 18rem;column-gap:2rem}
.titles li{break-inside:avoid;display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid #2a211926}
.titles time{font:400 var(--t-s)/1.6 var(--mono);color:var(--ink-2);white-space:nowrap}
.back{display:flex;gap:1.5rem;flex-wrap:wrap}

/* shop grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:clamp(1.5rem,3vw,2.5rem)}
.item{display:grid;gap:.6rem;text-decoration:none}
.item .ph{aspect-ratio:4/5;background:var(--cream-2);display:flex;align-items:center;justify-content:center;overflow:hidden}
.item .ph img{width:100%;height:100%;object-fit:contain}
.item .ph img.cover{object-fit:cover}
.item h3{font-size:var(--t-m)}
.item .pt{font-family:var(--mono);font-size:var(--t-s);letter-spacing:.08em;text-transform:uppercase;color:var(--rust)}
.item:hover h3{color:var(--rust)}
.soon .ph{background:var(--cream-2);color:var(--ink-2)}
.policy{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1.5rem}
.policy div{border-top:2px solid var(--ink);padding-top:.75rem;display:grid;gap:.3rem}
.tbd{font-family:var(--mono);font-size:var(--t-s);letter-spacing:.06em;text-transform:uppercase;color:var(--rust)}

/* product page */
.prod{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--gut);padding:clamp(2rem,5vh,3.5rem) var(--gut);align-items:start}
.prod .pimg{background:var(--cream-2);display:flex;justify-content:center;align-items:center;min-height:min(80svh,720px);position:sticky;top:calc(var(--bar) + 1rem)}
.prod .pimg img{max-height:min(76svh,700px);width:auto}
.prod .pimg img.cover{width:100%;height:min(80svh,720px);max-height:none;object-fit:cover}
.prod .info{display:grid;gap:1.25rem;align-content:start;padding-top:clamp(0rem,4vh,2rem)}
/* item titles fit their column: --n = longest unbreakable run (set by the build); ~.445em per glyph at this stretch, .48 leaves margin */
.prod .info{container-type:inline-size}
.prod .info h1{font-size:min(var(--t-xl),calc(100cqi / (var(--n,8) * .48)))}
.prod .rows > div{flex-basis:calc(50% - 1px)}
/* item kicker above the title (Rácalinda): rust, sits tight to the h1 */
.prod .tag{color:var(--rust);margin-bottom:-.6rem}
.prod .line + .line{margin-top:-.6rem}
/* How a Linda is sold: kicker label + numbered steps (5 across on wide screens, stacked on phones) */
.sold h2.kick{font-weight:400;font-stretch:100%;line-height:1.3;color:var(--rust)}
.sold-steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:1.1rem;max-width:40rem}
.sold-steps li{counter-increment:s;display:grid;grid-template-columns:2.6rem 1fr;align-items:baseline;border-top:2px solid var(--ink);padding-top:.75rem}
.sold-steps li::before{content:counter(s,decimal-leading-zero);font:400 var(--t-s)/1 var(--mono);letter-spacing:.08em;color:var(--rust)}
.sold-note{font-size:.85rem;color:var(--ink-2)}
@media (min-width:1000px){
  .sold-steps{grid-template-columns:repeat(5,minmax(0,1fr));gap:2rem;max-width:none}
  .sold-steps li{grid-template-columns:1fr;align-content:start;gap:.6rem}
}

/* ℗ ALKEMIKAL releases: cover showcase (/alkemikal/) and catalog rows grouped by artist (/alkemikal/catalog/) */
.rels-head{display:grid;gap:1rem}
.rels .kick{color:var(--rust)}
.covers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(1rem,2vw,2rem)}
.covers figure{margin:0;display:grid;gap:.7rem;align-content:start}
.covers img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:var(--cream);box-shadow:0 1px 0 #2a211922,0 10px 24px -14px rgba(42,33,25,.55)}
.covers figcaption,.disc li{display:grid;gap:.2rem;min-width:0}
.covers .t,.disc .t{font-weight:600;line-height:1.25;overflow-wrap:break-word}
.covers .a{font-size:.92rem;color:var(--ink-2)}
.covers .p,.disc .y{font:400 var(--t-s)/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.covers .p{color:var(--rust)}
.artist{display:grid;gap:1.2rem}
.artist + .artist{margin-top:clamp(1rem,3vh,2rem)}
.disc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr));gap:0 2.5rem}
.disc li{grid-template-columns:4.5rem minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:1rem;align-items:start;padding:.8rem 0;border-bottom:1px solid #2a211926}
.disc picture{grid-row:1 / span 2}
.disc img{display:block;width:4.5rem;height:4.5rem;object-fit:cover;box-shadow:0 1px 0 #2a211922}
.disc .t{align-self:end}
@media (max-width:1100px){.covers{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.covers{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 1rem}}

/* configurator */
.cfg{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:var(--gut);padding:clamp(2rem,5vh,3.5rem) var(--gut) clamp(3rem,8vh,5rem);align-items:start}
.cfg form{display:grid;gap:2rem}
fieldset{border:0;margin:0;padding:0;display:grid;gap:.75rem;min-width:0}
legend{font-family:var(--mono);font-size:var(--t-s);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);padding:0;margin-bottom:.6rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips label{position:relative;display:inline-flex}
.chips input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chips span{display:inline-flex;align-items:center;min-height:44px;padding:.4rem 1rem;border:1px solid #2a211966;background:var(--cream);font-size:1rem;line-height:1.2}
.chips input:checked + span{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.chips input:focus-visible + span{outline:2px solid var(--rust);outline-offset:2px}
.chips input:hover + span{border-color:var(--ink)}
.kind{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.kind span{min-height:64px;justify-content:center;font-weight:620;font-size:1.15rem;width:100%}
.kind label{display:flex}
.field{display:grid;gap:.35rem}
.field label{font-family:var(--mono);font-size:var(--t-s);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.field input,.field textarea{font:inherit;font-size:1rem;padding:.7rem .8rem;border:1px solid #2a211966;background:#fffaf0;color:var(--ink);min-height:48px;width:100%}
.field textarea{min-height:6rem;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.num input{width:6rem}
.sum{position:sticky;top:calc(var(--bar) + 1rem);background:var(--umber);color:#fff8ec;padding:1.5rem;display:grid;gap:1rem}
.sum h2{font-size:clamp(1.6rem,2.6vw,2.4rem)}
.sum dl{margin:0;display:grid;gap:.5rem}
.sum dl div{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid #fff8ec26;padding-bottom:.4rem;font-size:.98rem}
.sum dt{color:#e6d6c2}
.sum dd{margin:0;text-align:right;font-weight:560}
.sum .btn{background:#fff8ec;color:var(--ink);justify-content:center}
.sum .btn:hover{background:#fff;color:var(--rust)}
.sum .note{font-size:.85rem;color:#e6d6c2}
.err{color:var(--rust);font-weight:560}
.done{background:var(--cream-2);padding:1.5rem;display:grid;gap:.8rem;border-left:4px solid var(--rust)}
[hidden]{display:none!important}

.foot{padding:2rem var(--gut) 2.5rem;border-top:1px solid #2a211926;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;color:var(--ink-2);font-size:.95rem}

@media (max-width:900px){
  .plate,.plate.flip,.prod,.cfg{grid-template-columns:1fr}
  .plate.flip .pimg{order:0}
  .plate .pimg img{max-height:58svh}
  .prod .pimg{position:static;min-height:0;padding:1rem}
  .prod .pimg img{max-height:62svh}
  .prod .pimg img.cover{height:auto;aspect-ratio:16/10}
  .sum{position:static}
  .trio img{height:40svh}
}
@media (max-width:560px){
  :root{--bar:5.4rem}
  .bar{flex-wrap:wrap;align-content:center;gap:.15rem 0;padding-top:.35rem;padding-bottom:.25rem}
  .bar nav{margin-left:0;width:100%}
  .bar ul{justify-content:space-between}
  .bar nav a{font-size:.88rem}
  .panel{min-height:calc(88svh - var(--bar))}
  .two,.kind{grid-template-columns:1fr}
  .prod .rows > div{flex-basis:100%}
  .trio{gap:.4rem}.trio img{height:30svh}
}
/* How one is made: archaic marks only (Member 2026-10-07) */
.glyphs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(1rem,3vw,2.5rem);max-width:60rem}
.glyphs li{border-top:2px solid var(--ink);padding-top:clamp(.9rem,2vw,1.4rem);display:flex;justify-content:center}
.glyphs svg{width:min(100%,5.5rem);height:auto;fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
@media (max-width:560px){.glyphs{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:2rem}}
/* credited photo on a plate (e.g. CC BY-SA portrait): modest size + museum credit line */
.plate .pimg figure.credited{margin:0;display:grid;gap:.65rem;justify-items:start;width:min(100%,26rem)}
.plate .pimg img.portrait{width:100%;height:auto;max-height:calc(100svh - var(--bar) - 9rem);object-fit:contain;object-position:left top}
.credit{font:400 var(--t-s)/1.5 var(--mono);letter-spacing:.03em;color:var(--ink-2)}
.credit a{color:inherit;white-space:nowrap}
@media (max-width:900px){.plate .pimg figure.credited{width:min(100%,20rem)}.plate .pimg img.portrait{max-height:none}}

/* ---------- ALKEMIKAL record crate (shop + /alkemikal/) ----------
   Base (no JS / reduced motion): a plain grid of covers. With JS + motion: a riffled bin. */
.crate{display:grid;gap:clamp(1.5rem,4vh,2.5rem)}
.crate-head{display:grid;gap:.75rem;max-width:40rem}
.shopfront{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:center}
.bin{position:relative;padding:1.25rem 1.25rem 3.6rem;background:
  radial-gradient(120% 70% at 30% 10%,#efe3cb 0,transparent 60%),
  radial-gradient(90% 60% at 85% 30%,#e3d1af 0,transparent 65%),
  linear-gradient(180deg,#e7d8bd,#d6c19c);border:1px solid #b79a6e;border-radius:6px 6px 10px 10px;
  box-shadow:inset 0 1px 0 #f4ecdc99,inset 0 -22px 30px -22px rgba(42,33,25,.45),0 18px 40px -28px rgba(42,33,25,.55);overflow:hidden}
.slvs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(6.25rem,1fr));gap:.9rem}
.slv{position:relative}
.pick{display:block;width:100%;padding:0;border:0;background:transparent;cursor:pointer;line-height:0;border-radius:2px}
.pick:focus-visible{outline:3px solid var(--rust);outline-offset:3px}
.pick[aria-pressed="true"] .jewel{box-shadow:0 0 0 3px var(--rust),0 10px 18px -10px rgba(42,33,25,.6)}
.jewel{display:block;aspect-ratio:1;background:var(--cream);border:1px solid #2a211933;box-shadow:0 1px 0 #2a211922,0 8px 14px -10px rgba(42,33,25,.55);overflow:hidden}
.jewel picture,.jewel img{display:block;width:100%;height:100%}
.jewel img{object-fit:cover;aspect-ratio:1}
.lip{position:absolute;left:0;right:0;bottom:0;height:2.6rem;background:
  repeating-linear-gradient(90deg,#0000 0 38px,#0000000d 38px 40px),linear-gradient(180deg,#7a5c38,#5a4224);
  background-color:#6a4f2e;border-top:2px solid #b08d5c;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:400}
.lip span{font:600 .74rem/1 var(--mono);letter-spacing:.24em;color:#f4ecdc}
@media (prefers-reduced-motion: no-preference){
  .js .bin{height:clamp(18rem,30vw,25rem);touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
  .js .bin[data-drag], .js [data-drag] .bin{cursor:grabbing}
  .js .slvs{display:block;position:absolute;inset:1rem 0 2.6rem}
  .js .slv{position:absolute;left:50%;bottom:6%;width:clamp(8.5rem,15vw,12.5rem);margin-left:calc(clamp(8.5rem,15vw,12.5rem) / -2);
    transform:translate(var(--x,0),var(--y,0)) rotate(var(--r,0deg)) scale(var(--s,1));transform-origin:50% 120%;
    transition:transform .42s cubic-bezier(.2,.75,.25,1),opacity .3s;will-change:transform}
  .js .slv.is-gone{opacity:0;visibility:hidden}
  .js .slv.is-front .jewel{box-shadow:0 0 0 1px #2a211955,0 22px 28px -14px rgba(42,33,25,.7)}
  .js .slv:not(.is-front):hover{filter:brightness(1.06)}
  .js .crate.compact .slv{width:clamp(7.5rem,12vw,10.5rem);margin-left:calc(clamp(7.5rem,12vw,10.5rem) / -2)}
  .js .crate.compact .bin{height:clamp(16rem,24vw,21rem)}
}
.counter{display:grid;gap:.75rem;align-content:start;padding:1.25rem 1.35rem 1.4rem;background:var(--cream);border:1px solid #d2c3a8;border-radius:4px;box-shadow:0 14px 36px -24px rgba(42,33,25,.5)}
.counter .kick{color:var(--rust)}
.deck{width:min(100%,20rem);aspect-ratio:1;background:var(--cream-2);box-shadow:0 1px 0 #2a211922,0 16px 36px -18px rgba(42,33,25,.55)}
.deck picture,.deck img{display:block;width:100%;height:100%}
.deck img{object-fit:cover;aspect-ratio:1}
.crate.compact .deck{width:min(100%,15rem)}
.ct{font-size:clamp(1.3rem,2.2vw,1.75rem);line-height:1.15;margin:0}
.ca{color:var(--ink-2);margin:0}
.player{min-height:152px}
.player[hidden]{display:none}
.player iframe{width:100%;border:0;border-radius:8px;background:#191414}
.merch{margin:0;color:var(--ink-2)}
.crate-col{display:grid;gap:.8rem;min-width:0}
.flips{display:flex;justify-content:space-between;gap:1rem}
.flips[hidden]{display:none}
.flip{background:none;border:0;border-bottom:2px solid currentColor;padding:.55rem 0 .3rem;min-height:44px;font:600 var(--t-s)/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);cursor:pointer}
.flip:disabled{opacity:.35;cursor:default}
.flip:focus-visible{outline:3px solid var(--rust);outline-offset:3px}
.minibin{position:relative;width:min(100%,26rem);aspect-ratio:5/4;margin:auto;background:
  radial-gradient(90% 70% at 30% 15%,#4a3828 0,transparent 60%),linear-gradient(180deg,#3a2c20,#231911);border-radius:8px;overflow:hidden;box-shadow:inset 0 0 0 1px #0008}
.minibin .ms{position:absolute;bottom:24%;left:50%;width:38%;transform:translateX(calc(-50% + (var(--k) - 1) * 24%)) rotate(calc((var(--k) - 1) * 9deg));transform-origin:50% 120%}
.minibin .ms:nth-child(2){z-index:2}
.minibin .ms img,.plate .pimg .minibin .ms img{display:block;width:100%;height:auto;max-height:none;aspect-ratio:1;object-fit:cover;border:1px solid #fff2;box-shadow:0 14px 20px -10px #000c}
.minibin .lip{height:2.4rem}
.item .by{display:block;font-size:.92rem;color:var(--ink-2);margin-top:-.3rem}
.item .ph img.rcv{width:86%;height:auto;aspect-ratio:1;object-fit:cover;box-shadow:0 1px 0 #2a211922,0 12px 28px -14px rgba(42,33,25,.55)}
.prod .pimg img.rcv{width:min(86%,620px);height:auto;max-height:none;aspect-ratio:1;object-fit:cover;box-shadow:0 1px 0 #2a211922,0 18px 40px -18px rgba(42,33,25,.6)}
.prod .pimg picture{display:contents}
.prod.listen .info{gap:1rem}
.prod.listen.info,.prod .info.counter{background:transparent;border:0;box-shadow:none;padding:0}
@media (max-width:900px){
  .shopfront{grid-template-columns:1fr}
  .slvs{grid-template-columns:repeat(auto-fill,minmax(5.25rem,1fr));gap:.7rem}
}
/* ---------- ALKEMIKAL crate, "dig" alternate (ALKCRATE=dig) ----------
   Records stand upright front-to-back in a box seen from slightly above; flipping tips the front record
   toward the viewer on its bottom edge. Base (no JS / reduced motion) stays the plain grid above. */
.crate.dig .lip{background:
  radial-gradient(40% 70% at 18% 40%,#a9824f55 0,transparent 70%),radial-gradient(35% 60% at 78% 65%,#4a341c44 0,transparent 70%),
  repeating-linear-gradient(180deg,#0000 0 31%,#00000024 31% 33%),
  repeating-linear-gradient(90deg,#ffffff08 0 3px,#0000 3px 9px),
  linear-gradient(180deg,#8a6a40,#5f4626);background-color:#6a4f2e}
@media (prefers-reduced-motion: no-preference){
  .js .crate.dig .bin{--w:clamp(10rem,15.5vw,13.5rem);height:clamp(23rem,35vw,31rem);padding:0;
    touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;
    background:
      linear-gradient(180deg,#0000 0 80%,#b99a6c 80%,#a4855a 100%),
      radial-gradient(70% 60% at 50% 10%,#f4ecdc 0,transparent 70%),
      linear-gradient(180deg,#eadcc2 0,#ddcaa6 80%)}
  .js .crate.dig.compact .bin{--w:clamp(9rem,14.5vw,12.75rem)}
  /* inside of the box: back wall + floor in shadow, narrower at the back; light wood side rims */
  .js .crate.dig .bin::before{content:"";position:absolute;left:50%;width:calc(var(--w) * 1.62);margin-left:calc(var(--w) * -.81);
    top:16%;bottom:20%;clip-path:polygon(9% 0,91% 0,100% 100%,0 100%);
    background:linear-gradient(90deg,#c9a876 0 9%,#0000 9% 91%,#c9a876 91%),
      linear-gradient(180deg,#5d4429 0,#43301c 50%,#2a1d11 100%);box-shadow:inset 0 10px 24px #0007}
  .js .crate.dig .bin::after{content:"";position:absolute;left:50%;width:calc(var(--w) * 1.32);margin-left:calc(var(--w) * -.66);
    top:16%;height:.5rem;background:#d3b585;box-shadow:0 2px 0 #7a5c38}
  .js .crate.dig .slvs{display:block;position:absolute;inset:0;z-index:1;pointer-events:none}
  /* No shared 3D context (iOS Safari flattened the old preserve-3d stack into one card). Each record carries its own
     perspective() with the vanishing point high above the crate (transform-origin --vp above its bottom edge), and pivots
     on its bottom edge, so the standing stack steps back and the flip tips forward the same in every engine.
     Paint order = z-index (flipped > front > behind), set in dig.js. */
  .js .crate.dig .slv{pointer-events:auto}
  .js .crate.dig .slv.is-gone{pointer-events:none}
  .js .crate.dig .jewel img{-webkit-user-drag:none}
  .js .crate.dig .slv{position:absolute;left:50%;bottom:20%;width:var(--w);margin-left:calc(var(--w) / -2);
    --vp:380%;transform-origin:50% calc(100% - var(--vp));
    transform:perspective(50em) translateY(var(--vp)) translateZ(var(--z,0px)) rotateX(var(--rx,0deg)) translateY(calc(-1 * var(--vp))) translateY(var(--lift,0%));
    transition:transform .5s cubic-bezier(.3,.7,.2,1),opacity .3s,visibility 0s;will-change:transform}
  .js .crate.dig .slv.peek{--lift:-12%}
  .js .crate.dig .slv.is-gone{opacity:0;visibility:hidden;transition:transform .5s,opacity .3s,visibility 0s .3s}
  .js .crate.dig .pick{position:relative}
  .js .crate.dig .jewel{backface-visibility:hidden;-webkit-backface-visibility:hidden;border-top:3px solid #f4ecdcdd;
    box-shadow:0 -1px 0 #2a211966,0 12px 22px -14px rgba(0,0,0,.7)}
  .js .crate.dig .slv.is-flipped .jewel{filter:brightness(.82) saturate(.85)}
  .js .crate.dig .slv.is-front .jewel{box-shadow:0 -1px 0 #2a211966,0 26px 30px -16px rgba(0,0,0,.75)}
  .js .crate.dig .pick[aria-pressed="true"] .jewel{box-shadow:0 0 0 3px var(--rust),0 26px 30px -16px rgba(0,0,0,.75)}
  .js .crate.dig .slv:not(.is-front):not(.is-flipped):hover .jewel{filter:brightness(1.08)}
  /* crate front: the wooden wall the flipped records lean on */
  .js .crate.dig .lip{left:50%;right:auto;width:calc(var(--w) * 1.72);margin-left:calc(var(--w) * -.86);bottom:6%;height:18%;
    z-index:400;border-top:.45rem solid #c9a876;border-radius:3px;box-shadow:0 14px 18px -12px #0008,0 -8px 14px -8px #0005}
  .js .crate.dig .lip span{font-size:.82rem;letter-spacing:.3em;color:#f4ecdc;padding:.3rem .75rem;border:1px solid #f4ecdc66;background:#4a341c}
}
@media (prefers-reduced-motion: no-preference) and (max-width:900px){
  .js .crate.dig .bin,.js .crate.dig.compact .bin{--w:min(46vw,13rem);height:min(104vw,27rem)}
  .js .crate.dig .slv{--vp:330%}
}