/* ============================================================
   RMLUR STORE — "print-over" build
   The hero is the real photographed MPC + doodles, untouched.
   Everything else (shop grid, player, popovers) is styled to
   feel like it was already part of that same handmade world:
   paper white, marker-teal accent, tape-label cards, REC red.
   ============================================================ */
:root{
  --paper:#ffffff;
  --paper-warm:#faf8f2;
  --ink:#1b1b1b;
  --ink-soft:#55524a;
  --teal:#5fa39c;           /* the "Buyy beats @ HERE!" marker color */
  --tape-cream:#e7e1cd;
  --tape-cream-dk:#cfc8ae;
  --rec-red:#c8322b;
  --line:#e3ddcc;
  --font-hand:'Kalam',cursive;
  --font-mono:'IBM Plex Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-mono);
  min-height:100vh;
}
button{font-family:inherit;cursor:pointer;background:none;border:none}
a{color:inherit;text-decoration:none}

/* ================= CORNER NAV ================= */
.corner-nav{
  position:fixed;top:18px;right:22px;z-index:50;
  display:flex;align-items:center;gap:16px;
}
.corner-sep{color:#ddd;font-size:10px}
.corner-nav a{
  font-family:var(--font-mono);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
  border-bottom:1px solid transparent;padding-bottom:2px;
}
.corner-nav a:hover{color:var(--ink);border-color:var(--ink)}

/* ================= HERO ================= */
.hero{
  padding:56px 20px 26px;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
}
.hero-frame{
  position:relative;
  line-height:0;
}

/* ---- 3D MPC (mpc-3d.js draws into #mpc3dCanvas inside this wrap) ---- */
#mpc3dWrap{position:absolute;inset:0}
#mpc3dCanvas{display:block;width:100%;height:100%}
.mpc3d-tooltip{
  position:absolute;pointer-events:none;z-index:5;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;
  background:rgba(0,0,0,.78);color:#eee;
  padding:3px 6px;border-radius:3px;
  opacity:0;transform:translateY(2px);
  transition:opacity .1s ease;
}
.mpc3d-tooltip.show{opacity:1;transform:translateY(0)}

.hero-hint{
  position:absolute;right:8px;bottom:8px;z-index:5;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;
  color:var(--ink-soft);background:rgba(255,255,255,.85);
  padding:4px 7px;border-radius:3px;border:1px solid var(--line);
  pointer-events:none;
  transition:opacity .4s ease;
}
.hero-hint.hide{opacity:0}

/* Full-screen cross-fade used for the floppy/LCD -> shop handoff (see
   goToShop() in app.js) and the matching arrival fade-out in shop.js. */
.page-fade{
  position:fixed;inset:0;background:#000;opacity:0;z-index:999;
  pointer-events:none;transition:opacity .35s ease;
}
.page-fade.show{opacity:1;pointer-events:auto}
.page-fade.no-transition{transition:none}

/* ================= HOME SCREEN — fixed, no scrolling ================= */
/* The MPC is the whole screen; there's nothing below the fold to scroll
   to, so the page is locked to exactly one viewport. */
body.no-scroll{
  height:100vh;overflow:hidden;
  display:flex;flex-direction:column;
  background:var(--paper);color:var(--ink);
}
body.no-scroll .hero{
  flex:1;min-height:0;
  padding:4px 12px;
  display:flex;align-items:center;justify-content:center;
}
body.no-scroll .hero-frame{
  display:flex;margin:0 auto;
  /* explicit px size, set by app.js's sizeHeroFrame() using the
     model's real measured fit-aspect (mpc3d.getFitAspect()) — see
     app.js for why a guessed ratio or a plain 100%/100% fill both
     still left margins. */
}
body.no-scroll .site-footer{
  flex-shrink:0;padding:2px 24px;
}
.mini-footer{
  font-size:8px;opacity:.45;gap:0;
}

/* ================= PRODUCT DETAIL OVERLAY (Yeezy-style) ================= */
.pdp-overlay{
  position:fixed;inset:0;z-index:100;
  background:#fff;
  overflow-y:auto;
  animation:pdp-in .18s ease;
}
@keyframes pdp-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.pdp-topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 24px;
}
.pdp-back{font-size:22px;color:var(--ink);line-height:1}
.pdp-back:hover{opacity:.6}
.pdp-cart{
  display:flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:13px;color:var(--ink);
}
.pdp-body{max-width:520px;margin:0 auto;padding:0 24px 80px;text-align:center}
.pdp-image{
  position:relative;
  aspect-ratio:1/1;background:#f4f4f4;
  margin-top:20px;
}
.pdp-image img{width:100%;height:100%;object-fit:cover;display:block}
.portfolio-lightbox-image{aspect-ratio:auto;max-height:80vh}
.portfolio-lightbox-image img{width:100%;height:100%;max-height:80vh;object-fit:contain}
.design-item{cursor:pointer}
.pdp-play{
  position:absolute;right:14px;bottom:14px;
  width:38px;height:38px;border-radius:50%;
  background:#fff;border:1px solid #ddd;font-size:13px;
}
.pdp-panel{margin-top:34px;min-height:120px}

.pdp-collapsed{display:flex;flex-direction:column;align-items:center;gap:6px}
.pdp-collapsed[hidden]{display:none}
.pdp-title{
  font-family:var(--font-mono);font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
}
.pdp-price{font-family:var(--font-mono);font-size:14px;color:var(--ink-soft);margin-top:2px}
.pdp-plus{
  margin-top:10px;font-size:20px;line-height:1;color:var(--ink);
  width:34px;height:34px;border-radius:50%;border:1px solid #ddd;
}
.pdp-plus:hover{border-color:var(--ink)}

.pdp-expanded{display:flex;flex-direction:column;align-items:center}
.pdp-expanded[hidden]{display:none}
.pdp-row{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  width:100%;max-width:420px;
}
.pdp-q{
  justify-self:start;
  width:26px;height:26px;border-radius:50%;border:1px solid #ddd;
  font-family:var(--font-mono);font-size:12px;color:var(--ink-soft);
}
.pdp-q:hover{border-color:var(--ink);color:var(--ink)}
.pdp-status{
  font-family:var(--font-mono);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  transition:opacity .15s ease;
}
.pdp-status.flash{animation:pdp-flash .5s ease infinite}
@keyframes pdp-flash{0%,100%{opacity:1}50%{opacity:.25}}
.pdp-x{justify-self:end;font-size:18px;color:var(--ink-soft)}
.pdp-x:hover{color:var(--ink)}

.pdp-tiers{
  display:grid;grid-template-columns:repeat(3,1fr);
  width:100%;max-width:420px;
  margin-top:26px;
}
.pdp-tier{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;
  color:var(--ink);padding:10px 4px;position:relative;
}
.pdp-tier .tier-price{display:block;font-size:10px;color:var(--ink-soft);margin-top:4px}
.pdp-tier::after{
  content:"";position:absolute;left:25%;right:25%;bottom:0;height:1px;
  background:var(--ink);transform:scaleX(0);transition:transform .15s ease;
}
.pdp-tier:hover::after, .pdp-tier.selected::after{transform:scaleX(1)}
.pdp-tier.selected{font-weight:700}

.pdp-exclusive-btn{
  margin-top:22px;width:100%;max-width:420px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid #ddd;padding:12px;color:var(--ink);
}
.pdp-exclusive-btn:hover{border-color:var(--ink)}

.pdp-info-toggle{
  margin-top:26px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);border-bottom:1px solid transparent;padding-bottom:2px;
}
.pdp-info-toggle:hover{color:var(--ink);border-color:var(--ink)}
.pdp-info-panel{
  margin-top:20px;max-width:420px;text-align:left;
  font-family:var(--font-mono);font-size:12px;line-height:1.7;color:var(--ink-soft);
  border-top:1px solid #eee;padding-top:18px;
}
.pdp-info-meta{
  display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin-bottom:16px;
}
.pdp-info-meta div{display:flex;justify-content:space-between;font-size:11px}
.pdp-info-meta .k{color:var(--ink-soft);letter-spacing:.06em;text-transform:uppercase;font-size:10px}
.pdp-info-meta .v{color:var(--ink)}
.pdp-license a{color:var(--teal);text-decoration:none;font-weight:600}
.pdp-license a:hover{text-decoration:underline}

.pdp-buy-btn{margin-top:18px;width:100%;max-width:420px}

@media(max-width:480px){
  .pdp-body{padding:0 18px 60px}
}

/* ================= SHOP — the bay IS the store, no chrome around it ================= */
main#shop{max-width:1280px;margin:0 auto;padding:28px 32px 48px}

/* ================= FLOPPY BAY — 3D disk browser (replaces the flat grid) ================= */
.fb-stage-wrap{
  position:relative;width:100%;
  height:min(78vh,820px);min-height:460px;
  border-radius:14px;overflow:hidden;
  background:radial-gradient(ellipse at 50% 30%, var(--paper-warm) 0%, var(--paper) 75%);
  border:1px solid var(--line);
}
.fb-stage-wrap canvas{display:block;width:100%;height:100%}
.fb-stage-wrap:focus-visible{outline:2px solid var(--ink-soft);outline-offset:2px}

/* Slim HUD attached to the selected tape — max ~170px, 2 lines, no button
   (clicking the already-selected tape IS buy/view). pointer-events:none
   throughout so it never steals a click from the tape mesh underneath. */
.fb-tag{position:absolute;top:0;left:0;pointer-events:none;font-family:var(--font-mono);white-space:nowrap;max-width:170px}
.fb-tag-inner{position:relative}

/* Fixed dock at the bottom of the stage (see updateFloatingTags in
   cassette-bay.js) — a flat, centered pill, not a speech-bubble pointing at
   the tape, since it no longer tracks the tape's own screen position. */
/* Institutional plate, not a friendly rounded pill — flat bone panel,
   hairline edge, mono type. No blur/saturate glass, no drop shadow. */
.fb-tag-active{transform:translate(-50%,-100%) translateY(-8px)}
.fb-tag-active .fb-tag-inner{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  background:#f4efe4;
  border:1px solid rgba(0,0,0,.32);
  border-radius:2px;
  padding:6px 14px 7px;
}
.fb-tag-active .fb-title{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#1c1a16;line-height:1.25;overflow:hidden;text-overflow:ellipsis}
.fb-tag-active .fb-meta{font-size:10px;color:#4a453a;font-weight:500;font-variant-numeric:tabular-nums}

.fb-tag-hover{transform:translate(-50%,-100%)}
.fb-tag-hover .fb-tag-inner{
  display:flex;flex-direction:column;gap:1px;
  background:#f4efe4;
  border:1px solid rgba(0,0,0,.24);
  border-radius:2px;padding:4px 8px 5px;
}
.fb-tag-hover .fb-title{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#1c1a16;overflow:hidden;text-overflow:ellipsis}
.fb-tag[hidden]{display:none}

@media(max-width:480px){
  .fb-stage-wrap{height:min(66vh,600px);min-height:420px}
  .fb-tag{max-width:130px}
  .fb-tag-active .fb-tag-inner{padding:4px 7px 5px}
  .fb-tag-active .fb-title{font-size:11px}
  .fb-tag-active .fb-meta{font-size:9px}
  .fb-tag-hover .fb-tag-inner{padding:4px 7px 5px}
  .fb-tag-hover .fb-title{font-size:10px}
}
.tc-price{font-family:var(--font-mono);font-size:13px;font-weight:600}

.buy-btn{
  position:relative;
  overflow:hidden;
  display:inline-block;
  border:none;cursor:pointer;
  background:
    linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.95) 44%, rgba(255,255,255,.15) 50%, rgba(255,255,255,0) 58%),
    radial-gradient(160% 220% at 20% -60%, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 35%),
    linear-gradient(175deg, #1a1a1a 0%, #000 40%, #000 60%, #050505 100%);
  color:#fff;
  font-family:var(--font-mono);
  font-weight:500;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  padding:9px 20px;border-radius:4px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.35) inset,
    0 -8px 14px rgba(255,255,255,.05) inset,
    0 1px 0 rgba(0,0,0,.6),
    0 8px 18px rgba(0,0,0,.55);
  text-shadow:0 1px 2px rgba(0,0,0,.6);
  transition:transform .1s ease, box-shadow .15s ease, filter .15s ease;
}
.buy-btn::after{
  content:"";
  position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
  transform:skewX(-20deg);
  transition:left .5s ease;
  pointer-events:none;
}
.buy-btn:hover{filter:brightness(1.15)}
.buy-btn:hover::after{left:120%}
.buy-btn:active{transform:translateY(1px) scale(.98);filter:brightness(.95)}
.buy-btn-sm{padding:9px 18px;flex-shrink:0}

.empty-state{
  text-align:center;padding:60px 0;color:var(--ink-soft);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
}

/* ================= PLAYER BAR ================= */
.player-bar[hidden]{display:none}
.player-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--paper-warm);
  border-top:1px solid var(--line);
  box-shadow:0 -6px 20px rgba(0,0,0,.08);
  display:flex;align-items:center;gap:14px;
  padding:12px 20px;
}
.transport-btn{
  width:42px;height:36px;border-radius:4px;
  background:var(--paper);border:1px solid var(--tape-cream-dk);
  font-size:13px;
}
.transport-btn:active{transform:translateY(1px)}

.pb-lcd{
  flex-shrink:0;
  background:#16240f;
  border:1px solid #0d1508;
  border-radius:3px;
  padding:5px 8px;
  display:flex;flex-direction:column;gap:3px;
  overflow:hidden;
  width:130px;
}
#pb-wave{display:block;width:100%;height:22px;image-rendering:pixelated}
.pb-lcd-text{
  overflow:hidden;white-space:nowrap;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;
  color:#8fe0d2;text-shadow:0 0 4px rgba(143,224,210,.6);
}
#pb-marquee{display:inline-block;padding-left:100%;animation:pb-scroll 6s linear infinite}
@keyframes pb-scroll{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}

.pb-info{flex:1;min-width:0}
#pb-title{font-size:12px;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.pb-meter{height:4px;background:var(--line);border-radius:2px;margin-top:5px;overflow:hidden}
#pb-progress{height:100%;width:0%;background:var(--teal)}

/* ================= FOOTER ================= */
.site-footer{
  max-width:1100px;margin:0 auto;padding:20px 24px 120px;
  display:flex;flex-direction:column;gap:6px;align-items:center;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;
  color:var(--ink-soft);text-align:center;
}

/* ================= SIMPLE PAGES (about / blog / design) ================= */
.page-wrap{max-width:900px;margin:0 auto;padding:100px 32px 140px}
.page-title{
  font-family:var(--font-mono);font-size:12px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ink);
  margin-bottom:36px;
}
.back-link{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);display:inline-block;margin-bottom:40px;
}
.back-link:hover{color:var(--ink)}

/* --- about / EPK --- */
.epk-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:56px}
.epk-name{font-family:var(--font-mono);font-size:26px;font-weight:600;letter-spacing:.04em;margin-bottom:6px}
.epk-tagline{font-family:var(--font-mono);font-size:12px;color:var(--ink-soft);margin-bottom:28px}
.epk-track{margin-top:8px}
.epk-track-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:10px}
.infobox{border:1px solid #e2e2e2;padding:22px 24px}
.infobox-row{
  display:flex;justify-content:space-between;gap:16px;
  padding:10px 0;border-bottom:1px solid #eee;
  font-family:var(--font-mono);font-size:11px;
}
.infobox-row:last-child{border-bottom:none}
.infobox-row .k{color:var(--ink-soft);letter-spacing:.08em;text-transform:uppercase;font-size:10px}
.infobox-row .v{color:var(--ink);text-align:right}
@media(max-width:720px){.epk-layout{grid-template-columns:1fr}}

/* --- blog --- */
.blog-cats{display:flex;gap:24px;margin-bottom:40px;flex-wrap:wrap}
.blog-cats a{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);border-bottom:1px solid transparent;padding-bottom:3px;
}
.blog-cats a:hover{color:var(--ink);border-color:var(--ink)}
.coming-soon{
  font-family:var(--font-mono);font-size:12px;color:var(--ink-soft);
  padding:60px 0;text-align:center;border-top:1px solid #eee;
}
.blog-cats a.on{color:var(--ink);border-color:var(--ink)}
/* feed — posts typed/pasted from /admin, newest first, MySpace-bulletin plain */
.feed{border-top:1px solid #eee}
.post{padding:26px 0;border-bottom:1px solid #eee}
.post-meta{display:flex;gap:10px;align-items:baseline;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:12px}
.post-meta b{color:var(--ink);font-weight:600}
.post-title{font-size:14px;font-weight:600;margin-bottom:8px}
.post-body{font-size:13px;line-height:1.7;white-space:pre-wrap;word-break:break-word}
.post-img{display:block;max-width:100%;margin-top:14px;border-radius:2px}

/* --- design / lookbook --- */
.design-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:28px;
}
.design-slot{
  aspect-ratio:3/4;background:#f4f4f4;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:#bbb;
}
.design-item{
  aspect-ratio:3/4;background:#f4f4f4;overflow:hidden;
}
.design-item img, .design-item video{
  width:100%;height:100%;object-fit:cover;display:block;
}
.design-item-wide{
  grid-column:span 2;aspect-ratio:16/8;
}
@media(max-width:640px){
  .design-item-wide{grid-column:span 1;aspect-ratio:3/4}
}
@media(max-width:640px){
  .corner-nav{display:none}
  .hero{padding:36px 14px 18px}
}
/* ================= SITE WATERMARK — persistent, every page ================= */
.site-watermark{
  position:fixed;
  left:14px;top:50%;
  transform:translateY(-50%);
  width:64px;
  opacity:.3;
  pointer-events:none;
  z-index:40;
}
@media(max-width:640px){
  .site-watermark{width:40px;left:8px}
}

/* ================= RADIO PLAYER — site-wide, floating, ambient =================
   Placeholder content only (see TRACKS in radio-player.js) — swap in
   real mixes/DJ sets/collab tracks once they're ready, nothing here
   needs to change. Transparent/embedded like the watermark, not a
   boxed player: a brief NOW PLAYING card, then a small persistent
   reactive waveform. */
.radio-player{
  position:fixed;right:18px;bottom:18px;z-index:60;
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,0.35);
  backdrop-filter:blur(10px) saturate(1.3);
  -webkit-backdrop-filter:blur(10px) saturate(1.3);
  border:1px solid rgba(95,163,156,0.25);
  box-shadow:0 6px 24px rgba(0,0,0,0.08);
  cursor:pointer;
  opacity:.55;
  transition:opacity .25s ease, transform .25s ease;
}
.radio-player:hover{opacity:1;transform:translateY(-2px)}
.radio-player--playing{opacity:.85}
.radio-player__wave{width:64px;height:28px;display:block}
.radio-player__title{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);
  max-width:110px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.radio-player:not(.radio-player--playing) .radio-player__title::before{content:"\25B6  "}

.radio-player__toast{
  position:absolute;right:0;bottom:calc(100% + 10px);
  min-width:180px;padding:10px 14px;border-radius:14px;
  background:rgba(27,27,27,0.82);
  backdrop-filter:blur(6px);
  color:#fff;
  opacity:0;transform:translateY(8px) scale(.96);
  pointer-events:none;
}
.radio-player__toast-label{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;
  color:var(--teal);
}
.radio-player__toast-title{
  font-family:var(--font-hand);font-size:18px;color:#fff;margin-top:2px;
}
.radio-player--toast .radio-player__toast{
  animation:radioToast 3.2s ease forwards;
}
@keyframes radioToast{
  0%{opacity:0;transform:translateY(8px) scale(.96)}
  12%{opacity:1;transform:translateY(0) scale(1)}
  78%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(-6px) scale(.98)}
}
@media(max-width:640px){
  .radio-player{right:10px;bottom:10px;padding:8px 10px}
  .radio-player__title{max-width:70px}
}

:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  #pb-marquee{animation:none}
  .radio-player--toast .radio-player__toast{animation:none;opacity:1}
  *{transition:none !important}
}

/* ================= HOME (static Readymag hero) ================= */
body.home-static{background:#fff;color:var(--ink);font-family:var(--font-mono);min-height:100vh;display:flex;flex-direction:column}
.home-hero{flex:1;display:flex;align-items:center;justify-content:center;padding:8px 16px}
/* The MPC is the whole interface: one box with the photo's exact aspect
   ratio, every layer positioned in % of it (data/hero-map.json), so hit
   areas and moving parts stay locked to the photo at any width. Nothing
   here is styled to look like a button — the photo is the only visual. */
.mpc{position:relative;width:100%;max-width:1100px;aspect-ratio:1412/1136;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.mpc-photo{display:block;width:100%;height:100%}
.mpc-wheel,.mpc-fader{position:absolute;display:block;-webkit-user-drag:none;touch-action:none;visibility:hidden}
.mpc-wheel{cursor:grab;transform-origin:50% 50%;will-change:transform}
.mpc-fader{cursor:grab;will-change:top}
.mpc-wheel.dragging,.mpc-fader.dragging{cursor:grabbing}
.mpc-pad{position:absolute;display:block;cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none}
.mpc-pad:focus-visible{outline:1px solid rgba(0,0,0,.35);outline-offset:2px}

/* ================= GALLERY — white wall, art hung in a masonry grid ================= */
.gallery-wall{columns:3 240px;column-gap:28px}
.gallery-piece{break-inside:avoid;margin:0 0 34px;cursor:zoom-in}
.gallery-piece img{display:block;width:100%;height:auto;background:#f6f6f6;box-shadow:0 1px 2px rgba(0,0,0,.06),0 8px 22px rgba(0,0,0,.06)}
.gallery-cap{margin-top:10px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);text-align:center}