@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/bodoni-moda-latin-400-normal.woff2) format('woff2')}@font-face{font-family:'Bodoni Moda';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/bodoni-moda-latin-400-italic.woff2) format('woff2')}@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/bodoni-moda-latin-500-normal.woff2) format('woff2')}@font-face{font-family:'Bodoni Moda';font-style:italic;font-weight:500;font-display:swap;src:url(/fonts/bodoni-moda-latin-500-italic.woff2) format('woff2')}@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/bodoni-moda-latin-600-normal.woff2) format('woff2')}@font-face{font-family:'Pinyon Script';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/pinyon-script-latin-400-normal.woff2) format('woff2')}@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/anton-latin-400-normal.woff2) format('woff2')}@font-face{font-family:'Public Sans';font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/public-sans-latin-300-normal.woff2) format('woff2')}@font-face{font-family:'Public Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/public-sans-latin-400-normal.woff2) format('woff2')}@font-face{font-family:'Public Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/public-sans-latin-500-normal.woff2) format('woff2')}@font-face{font-family:'Public Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/public-sans-latin-600-normal.woff2) format('woff2')}@font-face{font-family:'Public Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/public-sans-latin-700-normal.woff2) format('woff2')}@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2')}@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2')}/* ============================================================
   PastForward — design system
   One light source: key at 315°, upper-left, 45° elevation.
   ============================================================ */
:root{
  --ink:#060506; --elevated:#121011; --elevated-2:#1B1718;
  --oxblood:#8E1F2B; --ember:#C0353F; --rose:#E0A6A0;
  --crimson:#962934; --collage-grey:#939391;
  --paper:#EDE7DD; --paper-ink:#161314;
  --cream:#F3EFE8; --muted:#8E8781;
  --border:rgba(243,233,222,.10); --border-2:rgba(243,233,222,.18);
  --success:#6E8B62; --overlay:rgba(10,7,8,.72);

  --sh-card:0 1px 2px rgba(0,0,0,.6),0 8px 24px rgba(0,0,0,.45),0 24px 64px rgba(0,0,0,.35);
  --sh-lift:0 2px 4px rgba(0,0,0,.6),0 20px 48px rgba(0,0,0,.6),0 48px 96px rgba(0,0,0,.4);
  --sh-record:0 24px 60px rgba(0,0,0,.7),0 6px 16px rgba(0,0,0,.5);

  --e-out-expo:cubic-bezier(.16,1,.3,1);
  --e-in-out-quart:cubic-bezier(.76,0,.24,1);
  --e-weight:cubic-bezier(.34,1.32,.64,1);
  --e-spin-down:cubic-bezier(.12,.82,.16,1);
  --e-ui:cubic-bezier(.4,0,.2,1);
  /* a visible spring overshoot — settles past the target then eases back,
     the way a flicked/released object does. Reserved for entrances people
     will actually notice: menus and drawers opening, a card lifting under
     the pointer. Not for anything that fades rather than moves. */
  --e-spring:cubic-bezier(.3,1.6,.5,1);
  --d-micro:120ms; --d-std:300ms; --d-entrance:600ms; --d-cine:900ms;

  --display:"Bodoni Moda","Fraunces",Georgia,serif;
  --script:"Pinyon Script","Snell Roundhand",cursive;
  --shout:"Anton","Public Sans",system-ui,sans-serif;
  --body:"Public Sans",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --gutter:16px; --maxw:1440px; --nav-h:56px;
}
@media(min-width:480px){:root{--gutter:20px; --nav-h:60px}}
@media(min-width:768px){:root{--gutter:48px; --nav-h:64px}}
@media(min-width:1280px){:root{--gutter:80px}}

*,*::before,*::after{box-sizing:border-box}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  overflow-x:hidden;
}
body{
  margin:0; background:var(--ink); color:var(--cream);
  font-family:var(--body); font-size:16px; line-height:1.65;
  font-optical-sizing:auto; -webkit-font-smoothing:antialiased;
  overflow-x:clip; position:relative; width:100%;
  -webkit-tap-highlight-color:transparent;
}
/* clip (not hidden) so body doesn't become a scroll container: hidden here silently
   breaks every position:sticky on the site (the crate's pinned stage, the wall page) */
@supports not (overflow:clip){body{overflow-x:hidden}}
/* overlays live in one fixed, clipped layer so an off-canvas drawer can never
   widen the page — and so nothing above the document breaks position:sticky */
#overlays{position:fixed; inset:0; z-index:290; overflow:hidden; pointer-events:none}
#overlays .drawer,#overlays .menu{pointer-events:auto}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--ember); outline-offset:2px}
::selection{background:var(--oxblood); color:var(--cream)}

/* ---------- type ---------- */
.d-xl{font-family:var(--display); font-size:clamp(2.4rem,11vw,13rem); font-weight:600; line-height:.86; letter-spacing:-.03em; text-wrap:balance; hyphens:none}
.d-l{font-family:var(--display); font-size:clamp(2rem,5.5vw,6rem); font-weight:500; line-height:.98; letter-spacing:-.02em; text-wrap:balance; hyphens:none; margin:0}
.d-m{font-family:var(--display); font-size:clamp(1.6rem,4vw,3.5rem); font-weight:500; line-height:1.04; letter-spacing:-.02em; text-wrap:balance; margin:0}
.d-s{font-family:var(--display); font-size:clamp(1.2rem,2.5vw,2.25rem); font-weight:500; line-height:1.12; letter-spacing:-.015em; margin:0}
.body-l{font-size:clamp(1.05rem,1.4vw,1.3rem); line-height:1.6; text-wrap:pretty}
.body-s{font-size:.9rem; line-height:1.6}
.mono{font-family:var(--mono); text-transform:uppercase; letter-spacing:.14em; font-size:.72rem}
.mono-xs{font-family:var(--mono); text-transform:uppercase; letter-spacing:.16em; font-size:.65rem}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums}
.dim{color:var(--muted)}
p{text-wrap:pretty}
.measure{max-width:66ch}
.col-720{max-width:720px}

/* ---------- layout ---------- */
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.sec{padding-block:clamp(52px,7.5vw,104px)}
.stack>*+*{margin-top:var(--s,16px)}
.hr{height:1px; background:var(--border); border:0; margin:0}

/* ---------- room light + vignette + grain ---------- */
.roomlight{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 80% at 28% 0%,rgba(243,233,222,.045),transparent 60%)}
#vignette{position:fixed; inset:0; pointer-events:none; z-index:800;
  background:radial-gradient(140% 100% at 50% 50%,transparent 55%,rgba(0,0,0,.55));
  transition:opacity 500ms var(--e-ui)}
html[data-light] #vignette{opacity:.12}
html[data-light] #grain{opacity:.028}
html[data-light] #field{opacity:.22; filter:invert(1)}
#grain{position:fixed; inset:0; pointer-events:none; z-index:900; opacity:.05;
  mix-blend-mode:overlay; background-repeat:repeat; background-size:256px 256px}
@media(prefers-reduced-motion:reduce){#grain{mix-blend-mode:soft-light; opacity:.05}}

/* ---------- the record ----------
   Black vinyl. The artwork is pressed onto the CENTRE LABEL only,
   exactly like the real product. Light source: 315deg, upper-left.
   ------------------------------------------------------------- */
.record{position:relative; width:min(var(--size,320px), 100%); max-width:100%; aspect-ratio:1; flex:none; margin-inline:auto}
.record__disc{position:absolute; inset:0; border-radius:50%; transform-origin:50% 50%;
  box-shadow:var(--sh-record); will-change:transform; overflow:hidden;
  background:
    radial-gradient(circle at 50% 50%, #151414 0 15.5%, #0e0d0d 15.5% 17%, #090909 17% 95.6%, #1a1919 95.6% 98.2%, #070707 98.2% 100%);
  filter:brightness(var(--bright,1)) blur(var(--dblur,0px))}
.record__grooves{position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:repeating-radial-gradient(circle at 50% 50%,
    rgba(255,255,255,.058) 0 .9px, rgba(0,0,0,.34) .9px 3.4px);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 0 17.5%,#000 19% 95.5%,transparent 97%);
  mask-image:radial-gradient(circle at 50% 50%,transparent 0 17.5%,#000 19% 95.5%,transparent 97%)}
.record__grooves2{position:absolute; inset:0; border-radius:50%; pointer-events:none; opacity:.85;
  background:repeating-radial-gradient(circle at 50% 50%,
    rgba(255,255,255,.022) 0 5px, rgba(0,0,0,.10) 5px 15px);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 0 22%,#000 24% 88%,transparent 92%);
  mask-image:radial-gradient(circle at 50% 50%,transparent 0 22%,#000 24% 88%,transparent 92%)}
/* dead wax: the smooth run-out ring between label and grooves */
.record__deadwax{position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 50% 50%,
    transparent 0 16.4%, rgba(255,255,255,.07) 16.6% 17.1%, rgba(0,0,0,.55) 17.3% 18.6%, transparent 18.8%)}
/* fixed specular sweep — light stays put in world space while the disc turns */
.record__sheen{position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:conic-gradient(from var(--sheen-a,188deg) at 50% 50%,
    rgba(255,255,255,0) 0deg, rgba(255,255,255,.05) 12deg, rgba(255,255,255,.15) 30deg,
    rgba(255,255,255,.05) 52deg, rgba(255,255,255,0) 82deg,
    rgba(255,255,255,0) 168deg, rgba(255,255,255,.04) 186deg, rgba(255,255,255,.105) 208deg,
    rgba(255,255,255,.03) 230deg, rgba(255,255,255,0) 258deg, rgba(255,255,255,0) 360deg);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 0 18%,#000 20% 99%);
  mask-image:radial-gradient(circle at 50% 50%,transparent 0 18%,#000 20% 99%)}
/* the label: the only place artwork appears */
.record__label{position:absolute; left:33.5%; top:33.5%; width:33%; height:33%; border-radius:50%;
  overflow:hidden; background:#efe9e2;
  box-shadow:0 0 0 1px rgba(0,0,0,.55), inset 0 1px 2px rgba(255,255,255,.35), 0 2px 6px rgba(0,0,0,.5)}
.record__art{width:100%; height:100%; object-fit:cover; display:block}
.record__labelring{position:absolute; inset:0; border-radius:50%; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.record__etch{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; display:none}
.record--lg .record__etch{display:block}
.record__etch text{font-family:var(--mono); font-size:2.7px; letter-spacing:.22px;
  fill:rgba(243,233,222,.30); text-transform:uppercase}
.record__spindle{position:absolute; left:48.7%; top:48.7%; width:2.6%; height:2.6%; border-radius:50%;
  background:var(--ink); box-shadow:inset 0 1px 2px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.12)}
.record__rim{position:absolute; inset:0; border-radius:50%; pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(243,233,222,.2), inset 0 -1px 0 rgba(243,233,222,.05),
             inset 0 0 0 1px rgba(0,0,0,.65);
  background:radial-gradient(circle at 34% 26%, rgba(255,255,255,.045), transparent 46%)}

/* ---------- print frame + polaroid ---------- */
.frame{position:relative; box-shadow:var(--sh-card); background:#0d0b0c;
  outline:1px solid var(--border); outline-offset:0}
.frame img{width:100%; height:100%; object-fit:contain; background:#0d0b0c}
.frame::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(160deg,rgba(243,233,222,.07),transparent 34%)}
.polaroid{position:relative; box-shadow:var(--sh-card); border-radius:6px; overflow:hidden; background:#efe7dc}
.polaroid img{width:100%; height:auto; display:block}
.badge{font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  padding:3px 7px; border:1px solid var(--border-2); color:var(--muted); border-radius:2px;
  background:rgba(10,7,8,.6); backdrop-filter:blur(4px)}

/* ---------- soundwave ---------- */
.wave{display:block; overflow:visible}
.wave path{fill:none; stroke-width:2; stroke-linecap:round; vector-effect:non-scaling-stroke}
.wave path:nth-child(1),.wave path:nth-child(3){stroke:var(--oxblood)}
.wave path:nth-child(2){stroke:rgba(243,233,222,.7)}
.wave--divider{width:100%; height:22px; opacity:.5}
.wave--under path{stroke:var(--oxblood)}

/* ---------- buttons / fields ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; height:48px;
  padding:0 22px; border:0; border-radius:0; cursor:pointer; font-family:var(--mono);
  text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; position:relative;
  transition:background var(--d-micro) var(--e-ui),transform 320ms var(--e-spring),box-shadow var(--d-std) var(--e-ui)}
.btn--primary{background:var(--oxblood); color:var(--cream); box-shadow:var(--sh-card)}
.btn--primary:hover{background:var(--ember); transform:translateY(-2px); box-shadow:var(--sh-lift)}
.btn--primary:active{background:var(--crimson); transform:translateY(-1px) scale(.965); box-shadow:var(--sh-card)}
.btn--secondary{background:transparent; color:var(--cream); box-shadow:inset 0 0 0 1px var(--border-2)}
.btn--secondary:hover{box-shadow:inset 0 0 0 1px var(--cream); transform:translateY(-2px)}
.btn--secondary:active{transform:translateY(-1px) scale(.965)}
.btn--ghost{background:none; height:auto; padding:6px 0; color:var(--cream)}
.btn--ghost:active{opacity:.6}
.btn--ghost::after{content:""; display:block; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--oxblood); transform:scaleX(0); transform-origin:0 50%; transition:transform 220ms var(--e-ui)}
.btn--ghost:hover::after{transform:scaleX(1)}
.btn[disabled]{opacity:.45; cursor:not-allowed; transform:none!important}
.btn__mag{display:inline-block; transition:transform 260ms var(--e-weight)}

.field{display:block}
.field label{display:block; font-family:var(--mono); font-size:.65rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin-bottom:8px}
.field input,.field select,.field textarea{width:100%; background:var(--elevated); border:1px solid var(--border);
  border-radius:3px; padding:12px 14px; font-size:16px; transition:border-color var(--d-micro) var(--e-ui);
  color:var(--cream); box-sizing:border-box}
.field select{appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238E8781' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:36px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ember); outline:none}
.field .err{color:var(--ember); font-family:var(--mono); font-size:.65rem; letter-spacing:.1em; margin-top:6px; display:block}

[data-confirm]{border-bottom:1px dashed var(--border-2); cursor:help}
html[data-confirm-mode] [data-confirm]{outline:1px dashed var(--ember); outline-offset:2px}

/* ---------- header ---------- */
.hdr{position:fixed; inset:0 0 auto; z-index:200; height:calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  padding-top:env(safe-area-inset-top, 0px);
  display:flex; align-items:center; transition:transform var(--d-std) var(--e-ui);
  background:rgba(12, 9, 10, 0.68);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid rgba(243,233,222,0.12);
  box-shadow:0 8px 32px 0 rgba(0,0,0,0.40), inset 0 1px 0 0 rgba(255,255,255,0.06)}
.hdr.is-solid{background:rgba(10, 7, 8, 0.82)}
.hdr__in{display:flex; align-items:center; gap:clamp(12px, 3vw, 28px); width:100%}
.hdr__mark{margin-right:auto; display:block; line-height:0; opacity:1;
  transition:opacity 320ms var(--e-ui), transform 320ms var(--e-out-expo)}
.hdr.is-hero .hdr__mark{pointer-events:auto}
.hdr__mark img{height:20px; width:auto; display:block}
.hdr__mark--ftr{margin:0}
.hdr__mark--ftr img{height:26px}
.hdr__nav{display:none; gap:28px; align-items:center}
@media(min-width:900px){.hdr__nav{display:flex} #menubtn{display:none}}
.navlink{position:relative; font-family:var(--shout); font-size:1.12rem; letter-spacing:.07em; font-weight:400; line-height:1;
  text-transform:uppercase; color:var(--cream); padding:7px 0; transition:color var(--d-micro) var(--e-ui), transform 280ms var(--e-spring)}
.navlink:hover,.navlink.is-active{color:#fff}
/* header option H2: Bundles is a strip of the sale tape, Build Your Wall is underlined in red */
.navlink--hot{background:#D8312A; color:#0b0809!important; padding:6px 12px 5px; transform:rotate(-2deg); box-shadow:0 6px 16px rgba(216,49,42,.28)}
.navlink--hot:hover,.navlink--hot.is-active{transform:rotate(1deg) scale(1.06)}
.navlink--hot svg{display:none}
.navlink--wall{box-shadow:inset 0 -2px 0 var(--ember); padding-bottom:5px}
.navlink--wall svg{display:none}
.navlink--wall:hover{transform:translateY(-1px)}
.navlink{white-space:nowrap}
@media(min-width:900px) and (max-width:1180px){.hdr__nav{gap:18px} .navlink{font-size:1rem; letter-spacing:.05em}}
@media(min-width:900px) and (max-width:1060px){.hdr__nav{gap:13px} .navlink{font-size:.9rem; letter-spacing:.03em} .navlink--hot{padding:5px 9px 4px}}
.navlink:active{opacity:.6}
.navlink svg{position:absolute; left:0; right:0; bottom:-3px; width:100%; height:10px; opacity:0;
  transition:opacity 220ms var(--e-ui)}
.navlink:hover svg,.navlink.is-active svg{opacity:1}
.hdr__acts{display:flex; align-items:center; gap:6px}
.iconbtn{background:none; border:0; cursor:pointer; width:46px; height:46px; min-width:46px; min-height:46px; display:grid; place-items:center;
  color:var(--cream); position:relative; border-radius:2px; transition:background var(--d-micro) var(--e-ui),transform 280ms var(--e-spring)}
.iconbtn:hover{background:var(--elevated); transform:scale(1.12)}
.iconbtn:active{transform:scale(.88)}
.cartcount{position:absolute; top:3px; right:1px; min-width:19px; height:19px; padding:0 5px;
  background:var(--oxblood); color:var(--cream); border-radius:999px; font-family:var(--mono);
  font-size:.66rem; display:grid; place-items:center; line-height:1}
.hdr__prog{position:absolute; left:0; bottom:0; height:1px; background:var(--oxblood);
  transform-origin:0 50%; transform:scaleX(0); width:100%}
/* Solid, high-contrast takeover instead of a blurred glass panel — over
   this site's dark, low-contrast collage backdrop, backdrop-filter never
   read as "glass" (nothing light/colourful behind it to refract), it just
   looked like a flatter black box. A confident opaque panel with real
   type scale and a real shadow reads the way the reference site's
   full-screen nav does, without borrowing its (sans-serif, colourless) look. */
/* Compact floating dropdown menus anchored under the navigation */
.mega{position:fixed; top:calc(var(--nav-h) + env(safe-area-inset-top, 0px)); z-index:250;
  background:rgba(12, 9, 10, 0.85);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid rgba(243,233,222,.16); border-top:2px solid var(--oxblood); border-radius:3px;
  visibility:hidden; pointer-events:none; box-shadow:0 28px 56px -12px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05);
  opacity:0; transform:translateY(-8px);
  transition:opacity 180ms var(--e-ui), transform 220ms var(--e-spring), visibility 0s 220ms}
.mega.is-open{visibility:visible; pointer-events:auto; opacity:1; transform:translateY(0);
  transition:opacity 180ms var(--e-ui), transform 220ms var(--e-spring)}
.mega h4{font-family:var(--mono); font-size:.70rem; letter-spacing:.2em; color:var(--ember);
  text-transform:uppercase; margin:0 0 14px}

/* Posters dropdown */
.mega--posters{width:300px; padding:22px 26px 24px}
.mega--posters .mega__format-link{display:block; padding:8px 0; text-decoration:none; transition:transform 180ms var(--e-ui)}
.mega--posters .mega__format-link:hover{transform:translateX(5px)}
.mega--posters .mega__format-title{display:block; font-family:var(--display); font-size:1.38rem; letter-spacing:-.01em; color:var(--cream); line-height:1.2}
.mega--posters .mega__format-size{display:block; font-family:var(--mono); font-size:.82rem; letter-spacing:.04em; color:var(--muted); margin-top:3px; transition:color 180ms var(--e-ui)}
.mega--posters .mega__format-link:hover .mega__format-size{color:var(--ember)}

/* Collections dropdown */
.mega--collections{width:432px; padding:22px 26px 24px}
.mega--collections .mega__cols-list{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 28px}
.mega--collections a{display:block; padding:6px 0; font-family:var(--display); font-size:1.28rem; letter-spacing:-.01em;
  color:var(--muted); white-space:nowrap; transition:color 180ms var(--e-ui), opacity 180ms var(--e-ui), transform 180ms var(--e-ui)}
.mega--collections a:hover{color:var(--cream); transform:translateX(4px)}
.mega--collections:has(a:hover) a:not(:hover){opacity:.4}

/* ---------- mobile menu / drawers ---------- */
.scrim{position:fixed; inset:0; background:var(--overlay); z-index:290; opacity:0; pointer-events:none;
  transition:opacity var(--d-std) var(--e-ui)}
.scrim.is-open{opacity:1; pointer-events:auto}
/* --elevated is #121011 against an #060506 page — a 6-point difference in
   luminance that's essentially invisible, so the drawer used to read as a
   flat black rectangle with a hard seam rather than a floating sheet. A
   real cast shadow and a lit top-left edge do the "this is a separate,
   physical layer" job that the missing contrast couldn't. */
.drawer{position:fixed; top:0; right:0; bottom:0; width:min(460px,100%); background:var(--ink);
  z-index:300; transform:translateX(100%); transition:transform 480ms var(--e-spring);
  display:flex; flex-direction:column; border-left:1px solid rgba(243,233,222,.14);
  box-shadow:-56px 0 110px -28px rgba(0,0,0,.7); padding-top:env(safe-area-inset-top, 0px)}
.drawer.is-open{transform:none; visibility:visible}
.drawer:not(.is-open){visibility:hidden}
.drawer__hd{display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid var(--border)}
.drawer__title{font-family:var(--display); font-size:1.35rem; color:var(--cream)}
.drawer__body{flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:8px 24px}
.drawer__ft{padding:20px 24px calc(24px + env(safe-area-inset-bottom, 0px)); border-top:1px solid var(--border)}
.menu{position:fixed; inset:0; z-index:300; background:rgba(10,7,8,0.96);
  backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  transform:translateY(-100%);
  transition:transform 420ms var(--e-spring); display:flex; flex-direction:column;
  padding:calc(env(safe-area-inset-top, 0px) + 20px) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 16px);
  overflow-y:auto; -webkit-overflow-scrolling:touch}
.menu.is-open{transform:none; visibility:visible}
.menu:not(.is-open){visibility:hidden}
.menu a{font-family:var(--display); font-size:clamp(1.22rem, 3.4vh, 1.55rem); padding:clamp(2px, 0.6vh, 4px) 0; display:block; opacity:0; transform:translateY(14px); line-height:1.18}
.menu.is-open a{animation:menuin 460ms var(--e-out-expo) forwards}
@keyframes menuin{to{opacity:1; transform:none}}
/* header option H2 on phones: poster font in white, Bundles on the sale tape, Build Your Wall underlined */
.menu > a{font-family:var(--shout); font-weight:400; text-transform:uppercase; letter-spacing:.04em; color:var(--cream); font-size:clamp(1.55rem, 4.3vh, 2rem); line-height:1.12}
.menu > a{padding:clamp(7px, 1.5vh, 13px) 0}
.menu > a:first-of-type{margin-top:clamp(36px, 6vh, 56px)}
.menu__tape{display:inline-block; background:#D8312A; color:#0b0809; padding:3px 12px 1px; transform:rotate(-2deg); box-shadow:0 6px 16px rgba(216,49,42,.3); margin:4px 0}
.menu__ul{box-shadow:inset 0 -3px 0 var(--ember); padding-bottom:2px}
.menu .menu__hot .menu__tag{font-size:.62rem; color:#F2B8B1}
.menu .menu__sublinks{display:flex; gap:6px; padding:2px 0 6px; flex-wrap:wrap}
.menu a.menu__pill{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:.65rem; font-weight:500;
  letter-spacing:.02em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px;
  background:var(--elevated); border:1px solid rgba(243,233,222,.22);
  color:var(--cream); line-height:1.15;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
  transition:background 180ms var(--e-ui), border-color 180ms var(--e-ui), transform 180ms var(--e-spring);
  cursor:pointer;
}
.menu a.menu__pill:hover,
.menu a.menu__pill:active{
  background:var(--ink);
  border-color:var(--oxblood);
  color:var(--cream);
  transform:scale(1.04);
}

/* ---------- needle ---------- */
.needle{position:fixed; right:26px; top:50%; transform:translateY(-50%); z-index:150;
  display:none; flex-direction:column; align-items:flex-end; gap:10px; pointer-events:none}
@media(min-width:1280px){.needle{display:flex}}
.needle__track{width:2px; height:180px; background:var(--border); position:relative}
.needle__fill{position:absolute; inset:0 0 auto; height:0; background:var(--oxblood)}
.needle__label{font-family:var(--mono); font-size:.6rem; letter-spacing:.18em; color:var(--muted);
  writing-mode:vertical-rl; text-transform:uppercase}

/* ---------- cursor ---------- */
.cursor{position:fixed; left:0; top:0; z-index:950; pointer-events:none; display:none}
@media(hover:hover) and (pointer:fine){.cursor{display:block}}
.cursor__dot{position:absolute; width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%; background:var(--cream); opacity:.9}
.cursor__ring{position:absolute; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%;
  border:1px solid rgba(243,233,222,.45); display:grid; place-items:center;
  transition:width 240ms var(--e-weight),height 240ms var(--e-weight),border-color 240ms var(--e-ui)}
.cursor.is-lg .cursor__ring{width:58px; height:58px; margin:-29px 0 0 -29px; border-color:var(--cream)}
.cursor__lbl{font-family:var(--mono); font-size:.5rem; letter-spacing:.14em; color:var(--cream); opacity:0}
.cursor.is-lg .cursor__lbl{opacity:1}

/* ---------- toast ---------- */
.toasts{position:fixed; left:var(--gutter); right:var(--gutter); bottom:calc(20px + env(safe-area-inset-bottom, 0px)); z-index:500; display:flex; flex-direction:column; gap:10px; pointer-events:none}
.toast{background:var(--elevated); border:1px solid var(--border); width:min(340px, 100%); pointer-events:auto;
  padding:14px 16px; font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  position:relative; box-shadow:var(--sh-card); animation:toastin 380ms var(--e-spring)}
@keyframes toastin{from{opacity:0; transform:translateY(14px) scale(.96)}}
.toast__bar{position:absolute; left:0; bottom:0; height:1px; background:var(--oxblood); animation:drain 4s linear forwards}
@keyframes drain{from{width:100%}to{width:0}}
/* the add-to-cart "flight" ghost — see flyToCart() in core.js */
.fly-ghost{position:fixed; width:16px; height:16px; border-radius:50%; background:var(--oxblood);
  box-shadow:0 2px 10px rgba(0,0,0,.35); z-index:650; pointer-events:none; will-change:transform,opacity}

/* ---------- product card ---------- */
.grid{display:grid; gap:clamp(12px, 3vw, 24px); grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:768px){.grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px}}
@media(min-width:1200px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.card{position:relative; cursor:pointer; display:flex; flex-direction:column; gap:10px;
  transition:transform 380ms var(--e-spring)}
.card:hover{transform:translateY(-6px)}
.card:active{transform:translateY(-2px) scale(.985)}
.card__media{position:relative; background:var(--elevated); border:1px solid var(--border);
  display:grid; place-items:center; padding:clamp(8px, 2.5vw, 16px); overflow:hidden; aspect-ratio:1;
  box-shadow:var(--sh-card); transition:box-shadow var(--d-std) var(--e-ui)}
.card:hover .card__media{box-shadow:var(--sh-lift)}
.card__media>*{transition:transform var(--d-std) var(--e-weight)}
.card:hover .card__media>*{transform:scale(1.03)}
.card__badge{position:absolute; top:8px; left:8px; opacity:1; transform:none;
  transition:opacity var(--d-std) var(--e-ui),transform var(--d-std) var(--e-out-expo); z-index:2}
@media(hover:hover) and (pointer:fine){
  .card__badge{opacity:0; transform:translateY(-6px)}
  .card:hover .card__badge{opacity:1; transform:none}
}
.card__add{position:absolute; left:0; right:0; bottom:0; height:42px; background:var(--oxblood);
  color:var(--cream); font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  display:grid; place-items:center; transform:translateY(100%); transition:transform var(--d-std) var(--e-out-expo);
  border:0; cursor:pointer; z-index:3}
.card:hover .card__add,.card__add:focus-visible{transform:none}
.card__meta{display:flex; flex-direction:column; gap:3px}
.card__artist{font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; color:var(--muted); text-transform:uppercase}
.card__album{font-family:var(--display); font-size:clamp(0.88rem, 3.2vw, 1.06rem); line-height:1.2; letter-spacing:-.01em}
.card__price{font-family:var(--mono); font-size:.7rem; font-variant-numeric:tabular-nums; color:var(--cream); margin-top:2px; display:flex; flex-direction:column; gap:3px}
.card__more{font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.card__size{font-family:var(--mono); font-size:.58rem; letter-spacing:.14em; color:var(--muted); text-transform:uppercase}

/* ---------- shop ---------- */
.shop{display:grid; gap:24px; grid-template-columns:minmax(0,1fr)}
@media(min-width:1024px){.shop{grid-template-columns:240px minmax(0,1fr); gap:56px}}
.rail{align-self:start}
@media(max-width:1023px){
  .rail{
    display:none;
    background:var(--elevated);
    border:1px solid var(--border);
    padding:20px;
    margin-bottom:24px;
    border-radius:4px;
  }
  .rail.is-open{
    display:block;
    animation:railin 260ms var(--e-ui);
  }
  @keyframes railin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
}
@media(min-width:1024px){.rail{position:sticky; top:calc(var(--nav-h) + 24px)}}
.rail h4{font-family:var(--mono); font-size:.62rem; letter-spacing:.18em; color:var(--muted);
  text-transform:uppercase; margin:0 0 12px}
.rail__grp+.rail__grp{margin-top:24px; padding-top:24px; border-top:1px solid var(--border)}
.chk{display:flex; align-items:center; gap:10px; padding:6px 0; cursor:pointer; font-size:.88rem; color:var(--muted);
  transition:color var(--d-micro) var(--e-ui)}
.chk:hover{color:var(--cream)}
.chk input{appearance:none; width:14px; height:14px; border:1px solid var(--border-2); border-radius:1px; margin:0; flex:none}
.chk input[type="radio"]{border-radius:999px}
.chk input:checked{background:var(--oxblood); border-color:var(--oxblood)}
.chk .n{margin-left:auto; font-family:var(--mono); font-size:.6rem; color:var(--muted)}
.chk input:checked+span{color:var(--cream)}
.pills{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px}
.pill{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--border-2);
  font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; background:none;
  border-radius:2px}
.pill:hover{border-color:var(--cream)}
.shop__bar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; flex-wrap:wrap}
/* Safari draws an unstyled select as a white system control, which left this one blank on iPhones */
select.sort{appearance:none; -webkit-appearance:none; color:var(--cream); background-color:var(--elevated);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238E8781' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
  border:1px solid var(--border); padding:10px 34px 10px 14px; border-radius:2px;
  font-family:var(--mono); font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; min-height:40px}
.filterbtn{display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px; border:1px solid var(--border-2);
  background:var(--elevated); color:var(--cream); cursor:pointer; font-family:var(--mono); font-size:.65rem; letter-spacing:.12em;
  text-transform:uppercase; border-radius:2px; transition:border-color var(--d-micro) var(--e-ui)}
.filterbtn:hover{border-color:var(--cream)}
.filterbtn svg{width:14px; height:14px}
@media(min-width:1024px){.filterbtn{display:none!important}}

/* ---------- pdp ---------- */
.pdp{display:grid; gap:clamp(28px, 5vw, 48px); grid-template-columns:minmax(0,1fr)}   /* minmax: the thumbnail strip mustn't widen the column past the screen */
@media(min-width:1024px){.pdp{grid-template-columns:minmax(0,55fr) minmax(0,45fr); gap:72px}}
.pdp__stage{position:relative; background:var(--elevated); border:1px solid var(--border);
  display:grid; place-items:center; padding:clamp(16px,4vw,48px); min-height:clamp(260px,46vh,560px); overflow:hidden}
.pdp__thumbs{display:flex; gap:8px; margin-top:14px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding-bottom:6px; overscroll-behavior-x:contain}
.pdp__thumb{width:58px; height:58px; min-width:58px; flex:none; border:1px solid var(--border); background:var(--elevated);
  display:grid; place-items:center; cursor:pointer; padding:4px; overflow:hidden}
.pdp__thumb.is-on{border-color:var(--oxblood)}
.pdp__thumb{position:relative; flex-direction:column; transition:transform var(--d-micro) var(--e-ui)}
.pdp__thumb:active{transform:scale(.93)}
.pdp__thumb img{width:100%; height:100%; object-fit:contain}
.pdp__thumb span{position:absolute; left:0; right:0; bottom:0; font-family:var(--mono); font-size:.46rem;
  letter-spacing:.1em; background:rgba(10,7,8,.82); color:var(--muted); padding:2px 0; text-align:center}
.pdp__thumb.is-on span{color:var(--cream)}
.fmt{display:grid; gap:8px; grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:600px){.fmt{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}}
.fmt button{background:var(--elevated); border:1px solid var(--border); padding:10px 12px; cursor:pointer;
  text-align:left; display:flex; flex-direction:column; gap:3px; transition:border-color var(--d-micro) var(--e-ui),background var(--d-micro) var(--e-ui);
  border-radius:2px}
.fmt button:hover{border-color:var(--border-2)}
.fmt button:active{border-color:var(--oxblood); background:var(--elevated-2)}
.fmt button.is-on{background:var(--elevated-2); border-color:var(--oxblood)}
.fmt button[disabled]{opacity:.4; cursor:not-allowed; text-decoration:line-through}
.fmt .f-name{font-family:var(--mono); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase}
.fmt .f-size{font-family:var(--mono); font-size:.58rem; color:var(--muted); letter-spacing:.1em}
.fmt .f-price{font-family:var(--mono); font-size:.68rem; font-variant-numeric:tabular-nums; margin-top:2px}
.spec{display:flex; flex-direction:column; border-top:1px solid var(--border)}
.spec div{padding:11px 0; border-bottom:1px solid var(--border); font-family:var(--mono);
  font-size:.63rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted)}
/* retro bullet list */
.spec-retro{display:flex; flex-direction:column; margin-top:32px; max-width:480px; border-top:1px solid var(--border)}
.spec-retro__item{display:flex; align-items:center; gap:14px; padding:13px 0; border-bottom:1px solid var(--border); font-family:var(--mono); font-size:clamp(.62rem, 1.1vw, .72rem); letter-spacing:.14em; text-transform:uppercase; color:var(--cream); transition:transform var(--d-micro) var(--e-ui), color var(--d-micro) var(--e-ui)}
.spec-retro__item:hover{transform:translateX(5px); color:#fff}
.spec-retro__bullet{position:relative; width:7px; height:7px; border-radius:50%; background:var(--ember); box-shadow:0 0 0 2px var(--ink), 0 0 0 4px rgba(192,53,63,.30), 0 0 8px rgba(192,53,63,.65); flex-shrink:0; transition:box-shadow var(--d-micro) var(--e-ui), transform var(--d-micro) var(--e-ui)}
.spec-retro__item:hover .spec-retro__bullet{transform:scale(1.18); box-shadow:0 0 0 2px var(--ink), 0 0 0 5px rgba(192,53,63,.45), 0 0 12px rgba(192,53,63,.9)}
.spec-retro__num{font-family:var(--mono); font-size:.60rem; font-weight:600; letter-spacing:.12em; color:var(--ember); flex-shrink:0; opacity:.9}
.spec-retro__text{flex:1; min-width:0; line-height:1.4}
.spec-retro__dot{color:var(--ember); margin:0 .55em; opacity:.85}
.spec-retro__item--dim{color:var(--muted); opacity:.8}
.spec-retro__item--dim .spec-retro__bullet{opacity:.75}
@media(max-width:767px){
  .spec-retro{margin:24px auto 0; max-width:340px; width:100%}
  .spec-retro__item{padding:11px 4px; gap:12px; font-size:.62rem; letter-spacing:.12em}
  .spec-retro__bullet{width:6px; height:6px}
  .spec-retro__num{font-size:.56rem}
}
.acc{border-bottom:1px solid var(--border)}
.acc button{width:100%; background:none; border:0; padding:15px 0; display:flex; justify-content:space-between;
  align-items:center; cursor:pointer; font-family:var(--mono); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase;
  transition:opacity var(--d-micro) var(--e-ui)}
.acc button:active{opacity:.6}
.acc .panel{overflow:hidden; height:0; transition:height var(--d-std) var(--e-out-expo)}
.acc .panel__in{padding-bottom:16px; color:var(--muted); font-size:.92rem}
.qty{display:inline-flex; align-items:center; border:1px solid var(--border); height:48px}
.qty button{width:44px; height:48px; background:none; border:0; cursor:pointer; color:var(--cream); font-size:1.1rem;
  display:grid; place-items:center; transition:background var(--d-micro) var(--e-ui)}
.qty button:active{background:var(--elevated)}
.qty span{width:36px; text-align:center; font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:.85rem}
.buybar{position:fixed; left:0; right:0; bottom:0; z-index:180; background:rgba(10,7,8,.94);
  backdrop-filter:blur(12px); border-top:1px solid var(--border); padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
  display:flex; align-items:center; gap:14px; transform:translateY(110%); transition:transform var(--d-std) var(--e-out-expo)}
.buybar.is-on{transform:none}
@media(min-width:1024px){.buybar{display:none!important}}
.scaleview{background:var(--elevated); border:1px solid var(--border); padding:clamp(20px,4vw,48px); position:relative; overflow:hidden}
.scaleview svg{width:auto; max-width:100%; height:min(46vh,400px); display:block; margin-inline:auto}
.scaleview .dim-line{stroke:var(--muted); stroke-width:1; fill:none}
.scaleview .obj{fill:rgba(243,233,222,.055); stroke:rgba(243,233,222,.34); stroke-width:1}
.scaleview .obj.is-on{fill:rgba(176,39,43,.14); stroke:var(--oxblood)}
.scaleview text{font-family:var(--mono); font-size:13px; letter-spacing:.08em; fill:var(--muted); text-transform:uppercase}
.scaleview text.sub{font-size:11px; opacity:.75}
.scaleview text.on{fill:var(--cream)}

/* ---------- home beats ---------- */
.beat{position:relative; min-height:76vh; display:flex; align-items:center}
.hero{min-height:100svh; position:relative; overflow:hidden}
.hero__in{position:relative; height:100svh; display:flex; flex-direction:column; padding-top:21vh}
.hero__top{position:relative; z-index:2; pointer-events:none}
.hero__mark{margin:0; line-height:0}
.wordmark{display:block; width:100%; height:auto}
.hero__rec{position:absolute; right:4vw; bottom:6vh; z-index:1}
.hero__rec .record{width:min(400px,41vmin)}
#scrollhint{position:absolute; bottom:26px; left:var(--gutter)}
@media(max-width:767px){
  .hero__in{padding-top:16vh}
  .hero__rec{position:static; margin-top:auto; margin-bottom:14vh; display:flex; justify-content:center}
  .hero__rec .record{width:min(330px,70vw)}}
.wall{position:relative}
.wall__sticky{position:sticky; top:0; height:100vh; overflow:hidden; display:grid;
  grid-template-rows:auto 1fr auto; padding-top:calc(var(--nav-h) + 24px); padding-bottom:22px}
.wall__rows{position:relative; height:100%; min-height:0; perspective:1700px}
.wall__row{position:absolute; left:0; display:flex; gap:clamp(20px,3vw,44px); align-items:center; will-change:transform;
  transform-style:preserve-3d}
.wall__item{transform-style:preserve-3d; will-change:transform}
.wall__row--back{top:3%}
.wall__row--mid{top:29%}
.wall__row--front{top:50%}
.wall__item{position:relative; cursor:pointer}
.wall__meta{position:absolute; left:0; right:0; top:calc(100% + 8px); text-align:center; opacity:0;
  transform:translateY(8px); transition:opacity 220ms var(--e-ui),transform 220ms var(--e-weight)}
.wall__item:hover .wall__meta{opacity:1; transform:none}
.wall__item:hover .record__disc{transform:translateY(-16px) scale(1.06)}
.wall__item .record__disc{transition:transform 380ms var(--e-spring)}
.wall__bg{position:absolute; inset:-10%; z-index:0; opacity:.10; filter:blur(50px); pointer-events:none}
.wall__bg img{width:100%; height:100%; object-fit:cover}
.wall__scroller{display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:12px; cursor:grab;
  -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; scrollbar-width:none}
.wall__scroller::-webkit-scrollbar{display:none}
.wall__scroller>*{scroll-snap-align:center; flex:none}
.picker{display:grid; gap:36px; align-items:center; grid-template-columns:minmax(0,1fr); width:100%; min-width:0}
.picker > *{min-width:0; width:100%}
@media(min-width:900px){
  .picker{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px}
  .picker__disc{order:2}
  .picker__info{order:1}
}
@media(max-width:899px){
  section#picker{
    min-height:auto!important;
    padding-top:clamp(20px, 3.5vw, 32px)!important;
  }
  .picker{display:flex; flex-direction:column; align-items:center; text-align:center; gap:20px; width:100%; min-width:0}
  .picker__info{display:contents}
  .picker__head{order:1; text-align:center; margin-inline:auto}
  .picker__head .cap{margin-inline:auto; text-align:center}
  .picker__head h2{font-size:clamp(1.75rem, 7vw, 2.3rem); margin:10px auto 14px; text-align:center; text-wrap:balance}
  .picker__head p{text-align:center; margin-inline:auto; max-width:34ch; font-size:.94rem; line-height:1.5}
  .picker__disc{order:2; display:flex; justify-content:center; align-items:center; width:100%; margin:6px auto}
  #pickrec{
    width:min(74vw, 280px)!important;
    height:min(74vw, 280px)!important;
    margin-inline:auto!important;
    max-width:none!important;
  }
  .picker__active{order:3; text-align:center; margin-inline:auto; margin-top:8px!important}
  .picker__active .card__artist{font-size:.70rem; letter-spacing:.16em; text-align:center}
  .picker__active .d-s{font-size:clamp(1.2rem, 4.5vw, 1.45rem); margin-top:2px; text-align:center}
  .picker .thumbs{
    order:4;
    width:100vw;
    margin-inline:calc(-1 * var(--gutter));
    padding-inline:calc(50vw - 28px);
    scroll-padding-inline:calc(50vw - 28px);
    justify-content:flex-start;
    padding-block:8px 14px;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
  }
  .picker .thumbs button{
    scroll-snap-align:center;
    width:56px;
    height:56px;
  }
  .picker__cta{
    order:5;
    justify-content:center!important;
    text-align:center;
    margin-inline:auto;
    gap:18px!important;
    margin-top:10px!important;
  }
}
/* drag-to-scroll (mountDragScroll, core.js): the strip itself carries the rubber-band
   overshoot as a transform, so it must never transition that property on its own —
   the JS drives every frame of it directly. */
.thumbs,.wall__scroller{transition:none}
.thumbs.is-dragging,.wall__scroller.is-dragging{cursor:grabbing!important; user-select:none}
.thumbs{display:flex; gap:12px; overflow-x:auto; padding:6px 2px 12px; cursor:grab;
  -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; scrollbar-width:none}
.thumbs::-webkit-scrollbar{display:none}
.thumbs button{flex:none; width:56px; height:56px; border-radius:50%; border:2px solid transparent;
  cursor:pointer; padding:0; background:none; overflow:hidden; opacity:.55;
  transition:transform var(--d-micro) var(--e-ui), opacity var(--d-micro) var(--e-ui), border-color var(--d-micro) var(--e-ui), box-shadow var(--d-micro) var(--e-ui)}
.thumbs button:hover{opacity:.9; transform:scale(1.05)}
.thumbs button.is-on{border-color:var(--ember); opacity:1; transform:scale(1.08);
  box-shadow:0 0 0 2px var(--ink), 0 0 0 4px rgba(192,53,63,.45), 0 0 12px rgba(192,53,63,.6)}
.thumbs img{width:100%; height:100%; object-fit:cover; border-radius:50%; pointer-events:none}
.scatter{position:relative; min-height:min(78vh,640px)}
.scatter>*{position:absolute}
@media(max-width:767px){.scatter{min-height:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
  .scatter>*{position:static!important; width:100%!important; transform:none!important}}
.price4{display:grid; gap:16px; grid-template-columns:minmax(0,1fr)}
@media(min-width:768px){.price4{grid-template-columns:repeat(4,minmax(0,1fr)); align-items:stretch}}
.pricecard{border:1px solid var(--border); padding:22px; background:transparent;
  display:flex; flex-direction:column; justify-content:flex-end; gap:6px}
.pricecard--hero{background:var(--elevated); border-color:rgba(142,31,43,.55); padding:34px 26px; box-shadow:var(--sh-card)}
.g-paper .pricecard{border-color:rgba(22,19,20,.16); background:transparent}
.g-paper .pricecard--hero{background:var(--ink); color:var(--cream); border-color:var(--oxblood);
  box-shadow:0 14px 34px rgba(22,19,20,.14)}
.g-paper .pricecard--hero .dim,.g-paper .pricecard--hero .mono-xs{color:rgba(243,239,232,.62)}
.figs{display:grid; gap:22px; grid-template-columns:minmax(0,1fr); border-top:1px solid var(--border); padding-top:26px}
@media(min-width:768px){.figs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.fig b{display:block; font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:clamp(1.6rem,3.4vw,2.6rem); letter-spacing:-.02em}
.fig span{font-family:var(--mono); font-size:.6rem; letter-spacing:.18em; color:var(--muted); text-transform:uppercase}

/* ---------- beat 6: the wall being assembled ---------- */
.wallbuild{position:relative; margin-top:54px; padding-inline:var(--gutter)}
.wallbuild__inner{position:relative; min-height:min(72vh,640px); max-width:var(--maxw); margin-inline:auto}
.wallbuild__floor{position:absolute; left:0; right:0; bottom:0; height:38%; pointer-events:none;
  background:linear-gradient(to top,rgba(243,233,222,.03),transparent)}
.wb{position:absolute; display:block; z-index:1; opacity:0;
  transform:rotate(var(--rot,0deg)) translateY(36px)}
.wb--pola{z-index:3}
.wallbuild.is-in .wb{opacity:1; transform:rotate(var(--rot,0deg)) translateY(var(--py,0px));
  transition:opacity 640ms var(--e-out-expo) var(--d,0ms),
             transform 800ms cubic-bezier(.25,1,.5,1) var(--d,0ms),
             left 800ms cubic-bezier(.25,1,.5,1),
             top 800ms cubic-bezier(.25,1,.5,1),
             width 800ms cubic-bezier(.25,1,.5,1);
}
.wallbuild.is-in .wb--pola{
  transition:opacity 560ms var(--e-out-expo) var(--d,0ms),
             transform 760ms cubic-bezier(.25,1,.5,1) var(--d,0ms),
             left 760ms cubic-bezier(.25,1,.5,1),
             top 760ms cubic-bezier(.25,1,.5,1),
             width 760ms cubic-bezier(.25,1,.5,1);
}
.wb:hover{transform:rotate(0deg) translateY(calc(var(--py,0px) - 12px)) scale(1.02); z-index:50!important}
.wb--pola:hover .polaroid{box-shadow:var(--sh-lift)}
.wb__tag{position:absolute; left:2px; top:calc(100% + 9px); color:var(--muted); opacity:0;
  transition:opacity 220ms var(--e-ui); white-space:nowrap; pointer-events:none}
.wb:hover .wb__tag{opacity:1}
@media(max-width:767px){
  .wallbuild{margin-top:24px; padding-inline:var(--gutter)}
  .wallbuild__inner{
    min-height:clamp(360px, 54vh, 440px);
    height:clamp(360px, 54vh, 440px);
    position:relative;
    width:100%;
    max-width:440px;
    margin-inline:auto;
    overflow:visible;
  }
  .wb{position:absolute!important; display:block!important; opacity:1!important}
  .wb__tag{display:none!important}
  .wallbuild__floor{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:25%;
    pointer-events:none;
    background:linear-gradient(to top,rgba(243,233,222,.04),transparent);
    display:block;
  }
}

.shot{margin:0; position:relative}
.shot img{width:100%; height:auto; display:block; border:1px solid var(--border); box-shadow:var(--sh-card)}
.shots--3 .shot img{aspect-ratio:4/5; object-fit:cover}
.shots--3 .shot{display:flex; flex-direction:column}
.shot figcaption{margin-top:9px}
.shots{display:grid; gap:18px; grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:900px){.shots{grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}}
.shot--inset{max-width:260px}
.shot--inset img{border-radius:2px}
.stagephoto{max-width:min(430px,78%); height:auto; border:1px solid var(--border); box-shadow:var(--sh-card)}
.pdp__thumb--photo{border-color:var(--border-2)}
.pdp__thumb--photo span{background:rgba(176,39,43,.9); color:var(--cream)}
.pull{margin:48px 0 0; padding:26px 0 0; border-top:1px solid var(--border)}
.pull p{font-family:var(--display); font-size:clamp(1.35rem,2.4vw,1.9rem); line-height:1.3;
  letter-spacing:-.015em; margin:0 0 14px; text-wrap:balance; max-width:22ch}
.pull cite{font-style:normal; display:block}
.comeback{display:grid; gap:36px; grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.comeback{grid-template-columns:minmax(0,1.55fr) minmax(0,.9fr); gap:56px; align-items:end}}

/* ---------- photographic composition ---------- */
/* one image, the whole stage */
.bleed{position:relative; width:100vw; margin-inline:calc(50% - 50vw); overflow:hidden}
.bleed img{width:100%; height:clamp(320px,64vh,640px); object-fit:cover; display:block; filter:saturate(.92)}
.bleed::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top,rgba(10,7,8,.9),rgba(10,7,8,.15) 46%,transparent 72%)}
.bleed__cap{position:absolute; left:var(--gutter); right:var(--gutter); bottom:26px; z-index:2}
.bleed__cap .d-s{max-width:18ch}
.bleed--tall img{height:clamp(400px,78vh,760px)}

/* parallel photo pair — two photographs aligned side by side */
.pair{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(12px, 3vw, 32px); margin-top:clamp(14px, 2vw, 24px); align-items:stretch}
.pair figure{margin:0; width:100%}
.pair img{width:100%; height:100%; aspect-ratio:3/4; object-fit:cover; display:block; border:1px solid var(--border); box-shadow:var(--sh-card); border-radius:2px}
.pair__a,.pair__b{width:100%; margin:0}
@media(max-width:540px){
  .pair{gap:10px}
  .pair img{aspect-ratio:3/4}
}

/* photograph that runs off the edge of the page */
.offright{margin-right:calc(-1 * var(--gutter))}
.offright img{width:100%; height:auto; display:block; border:1px solid var(--border); border-right:0; box-shadow:var(--sh-card)}

/* the brand collage, as texture only */
.tex{position:absolute; inset:0; pointer-events:none; background-repeat:repeat;
  background-size:auto 620px; background-position:center; opacity:.05; mix-blend-mode:screen}
.tex--red{opacity:.07}
@media(max-width:767px){.tex{background-size:auto 420px}}

/* ---------- misc blocks ---------- */
.reveal{opacity:0; transform:translateY(18px)}
.reveal.is-in{opacity:1; transform:none; transition:opacity var(--d-entrance) var(--e-out-expo),transform var(--d-entrance) var(--e-out-expo)}
.lines span{display:block; overflow:hidden}
.lines i{display:block; font-style:normal; transform:translateY(105%); transition:transform 760ms var(--e-out-expo)}
.lines.is-in i{transform:none}
.masthead{position:relative; overflow:hidden; border-bottom:1px solid var(--border)}
.emptyframe{border:1px solid var(--border); display:grid; place-items:center; color:var(--muted);
  font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; background:rgba(243,233,222,.012)}
.steps{display:grid; gap:24px; grid-template-columns:minmax(0,1fr)}
@media(min-width:768px){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.receipt{font-family:var(--mono); font-size:.72rem; font-variant-numeric:tabular-nums}
.receipt .row{display:flex; justify-content:space-between; gap:12px; padding:9px 0; position:relative}
.receipt .row::after{content:""; position:absolute; left:0; right:0; bottom:0;
  border-bottom:1px dotted var(--border-2)}
.receipt .row.total{border-top:1px solid rgba(243,233,222,.5); margin-top:8px; padding-top:14px; font-size:1.05rem}
.receipt .row.total::after{display:none}
.line{display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--border)}
.line__img{width:72px; flex:none; background:var(--elevated); display:grid; place-items:center; padding:6px; align-self:start}
.line__img img{max-height:64px; object-fit:contain}
/* ---------- search overlay (optimized for desktop, laptop & mobile) ---------- */
#search.menu{
  background:rgba(8, 6, 7, 0.95);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  padding:calc(var(--nav-h) + 16px) var(--gutter) 40px;
}
.searchwrap{
  max-width:740px;
  width:100%;
  margin-inline:auto;
}
.searchbar{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--elevated);
  border:1px solid rgba(243,233,222,.16);
  border-radius:6px;
  padding:12px 18px;
  box-shadow:0 8px 32px rgba(0,0,0,.6);
  transition:border-color 180ms var(--e-ui), box-shadow 180ms var(--e-ui);
}
.searchbar:focus-within{
  border-color:var(--ember);
  box-shadow:0 8px 36px rgba(192,53,63,.22), 0 0 0 1px var(--ember);
}
.searchbar__icon{
  flex:none;
  color:var(--muted);
  transition:color 180ms var(--e-ui);
}
.searchbar:focus-within .searchbar__icon{
  color:var(--cream);
}
.searchbar input{
  width:100%;
  background:none;
  border:0;
  outline:none;
  color:var(--cream);
  font-family:var(--body);
  font-size:clamp(0.95rem, 1.25vw, 1.15rem);
  font-weight:400;
  letter-spacing:.01em;
  padding:0;
}
.searchbar input::placeholder{
  color:var(--muted);
  opacity:.75;
}
.searchbar__hint{
  flex:none;
  font-family:var(--mono);
  font-size:.58rem;
  letter-spacing:.12em;
  padding:3px 7px;
  border-radius:3px;
  background:rgba(243,233,222,.08);
  border:1px solid rgba(243,233,222,.12);
  color:var(--muted);
}
#search a{
  font-family:inherit;
  font-size:inherit;
  padding:0;
  opacity:1;
  transform:none;
  animation:none;
}
#search .pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 14px;
  border-radius:999px;
  background:var(--elevated);
  border:1px solid rgba(243,233,222,.16);
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  text-decoration:none;
  transition:all 180ms var(--e-ui);
}
#search .pill:hover{
  background:var(--ink);
  border-color:var(--ember);
  color:var(--cream);
  transform:translateY(-1px);
}
#search .grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:18px;
}
#search .card__album{
  font-family:var(--display);
  font-size:.92rem;
  line-height:1.2;
}
#search .card__artist{
  font-size:.58rem;
}
#search .card__size{
  font-size:.56rem;
}
#search .card__price{
  font-size:.68rem;
}
.tile{border:1px solid var(--border); padding:18px; display:block; transition:border-color var(--d-micro) var(--e-ui),background var(--d-micro) var(--e-ui)}
.tile:hover{border-color:var(--border-2); background:var(--elevated)}
.ftr{border-top:1px solid var(--border); margin-top:40px; padding-block:40px 26px}
.ftr__grid{display:grid; gap:34px; grid-template-columns:minmax(0,1fr)}
@media(min-width:768px){.ftr__grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr)}}
.ftr a{display:block; padding:5px 0; color:var(--muted); font-size:.9rem}
.ftr a:hover{color:var(--cream)}
.ftr h4{font-family:var(--mono); font-size:.62rem; letter-spacing:.18em; color:var(--muted); text-transform:uppercase; margin:0 0 10px}

.skip{position:fixed; left:12px; top:12px; z-index:999; background:var(--oxblood); padding:12px 18px; transform:translateY(-200%); transition:transform var(--d-micro) var(--e-ui)}
.skip:focus{transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important}
  .reveal{opacity:1; transform:none}
  .lines i{transform:none}
}

/* ================================================================
   V2 — brand-native composition layer
   Derived from the PastForward flex, postcard and ad cards:
   hard black/red collage split, oversized cropped record, crimson
   label, script + didone-caps + grotesque lockup, serif-italic tag.
   ================================================================ */

/* ---------- chapter grounds: the page changes surface ---------- */
.ground{position:relative; isolation:isolate}
.ground>*{position:relative; z-index:2}
.g-paper{background:var(--paper); color:var(--paper-ink)}
/* a real band between two grounds, so a chapter dissolves into the next
   instead of being pasted onto it */
.seam{position:relative; height:clamp(56px,7vw,104px); width:100%;
  background:linear-gradient(to bottom,var(--from),var(--to))}
.seam--in-ink{--from:var(--ink); --to:var(--paper)}
.seam--to-ink{--from:var(--paper); --to:var(--ink)}
.seam--to-crimson{--from:var(--paper); --to:#160809}
.seam--from-crimson{--from:#160809; --to:var(--paper)}
/* the collage drifts across the seam so the two chapters share something */
.seam__col{position:absolute; inset:0; background-repeat:repeat; background-size:auto 620px;
  background-position:center; opacity:.16; mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 50%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 50%,transparent)}
.g-paper .lockup__script,.g-paper .lockup__caps{text-shadow:none}
.g-paper .dim{color:#6C6560}
.g-paper .mono,.g-paper .mono-xs{color:#5E5854}
.g-paper .hr,.g-paper .pull{border-color:rgba(22,19,20,.14)}
.g-crimson{background:linear-gradient(178deg,#120708,#2A0C11 55%,#120708)}

/* the substrate: groove arcs, always there, never loud.
   this is the brand's own line-work rather than a borrowed texture. */
#field{position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-repeat:no-repeat; background-position:14% -34vh, 118% 62vh;
  background-size:150vmax 150vmax, 118vmax 118vmax}
@media(max-width:767px){#field{background-position:-30% -18vh, 128% 68vh; opacity:.4}}

/* the collage, at a strength you can actually see */
.col{position:absolute; inset:0; z-index:0; pointer-events:none;
  background-repeat:repeat; background-size:auto 700px; background-position:center}
.col{-webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}
.col--g{opacity:.30}
.col--r{opacity:.34}
.col--soft{opacity:.10}
.col--mask{-webkit-mask-image:radial-gradient(120% 78% at 50% 42%,#000 8%,transparent 72%);
  mask-image:radial-gradient(120% 78% at 50% 42%,#000 8%,transparent 72%)}
@media(max-width:767px){.col{background-size:auto 460px}}

/* the postcard's hard 50/50 split — grey left, red right, no gradient */
.split{position:absolute; inset:0; z-index:0; pointer-events:none; display:flex;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 26%,#000 74%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 26%,#000 74%,transparent)}
.split>i{flex:1; background-repeat:repeat; background-size:auto 700px; background-position:center; opacity:.30}
.split>i:last-child{opacity:.34}
/* the seam between the two halves is softened so the join reads as one field */
.split>i:first-child{-webkit-mask-image:linear-gradient(90deg,#000 78%,transparent);
  mask-image:linear-gradient(90deg,#000 78%,transparent)}
.split>i:last-child{-webkit-mask-image:linear-gradient(270deg,#000 78%,transparent);
  mask-image:linear-gradient(270deg,#000 78%,transparent); margin-left:-6vw}
@media(max-width:767px){.split>i{background-size:auto 460px}}

/* ---------- the brand lockup: script / didone caps / grotesque ---------- */
.lockup{position:relative; text-align:center; line-height:1}
.lockup__script{font-family:var(--script); font-weight:400; display:block;
  font-size:clamp(2.4rem,8.2vw,8.2rem); line-height:1.05; letter-spacing:.01em;
  position:relative; z-index:2; text-shadow:0 2px 26px rgba(0,0,0,.5);
  margin-bottom:0.18em}
.lockup__caps{font-family:var(--display); font-weight:400; display:block;
  font-size:clamp(1.2rem,4.6vw,4.4rem); line-height:1.12; letter-spacing:.16em;
  text-transform:uppercase; margin-top:0; position:relative; z-index:1;
  text-shadow:0 2px 26px rgba(0,0,0,.5)}
.lockup__tag{font-family:var(--body); font-weight:700; display:block;
  font-size:clamp(.72rem,1.3vw,1.15rem); letter-spacing:.04em; text-transform:uppercase;
  margin-top:.6em}
.lockup--left{text-align:left; margin-top:.34em}
.lockup--left .lockup__script{margin-left:-.02em}
.lockup--red .lockup__script{color:var(--ember)}

/* the tagline, set the way the brand sets it */
.tagline{font-family:var(--display); font-weight:400; letter-spacing:.005em;
  font-size:clamp(1.24rem,1.95vw,1.69rem)}
.tagline em{font-style:italic; font-weight:500}

/* ---------- type range: one shout, one whisper ---------- */
.shout{font-family:var(--shout); font-weight:400; text-transform:uppercase;
  line-height:.84; letter-spacing:-.005em; margin:0}
.shout--xl{font-size:clamp(2.4rem,12vw,13rem)}
.shout--l{font-size:clamp(1.8rem,7vw,6.5rem)}
.cap{font-family:var(--mono); text-transform:uppercase; letter-spacing:.2em;
  font-size:.61rem; color:var(--muted)}

/* the manifesto: heavy grotesque with a few words swapped to display serif */
.manifesto{font-family:var(--shout); text-transform:uppercase; text-align:center;
  font-size:clamp(1.4rem,5.2vw,4.6rem); line-height:1.04; letter-spacing:-.01em;
  margin:0 auto; max-width:min(18ch, 100%)}
.manifesto b{font-family:var(--display); font-weight:400; font-style:italic;
  text-transform:none; color:var(--ember); letter-spacing:-.01em; font-size:1.06em}

/* a horizontal marquee, cropped by the viewport on both sides */
.marq{position:relative; width:100vw; margin-inline:calc(50% - 50vw); overflow:hidden; padding-block:.1em;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marq__t{display:inline-flex; gap:.5em; white-space:nowrap; will-change:transform}
.marq__t>span{padding-right:.5em}
.marq--serif .marq__t{font-family:var(--display); font-weight:400; font-style:italic;
  font-size:clamp(1.9rem,8.4vw,7.5rem); letter-spacing:-.01em; opacity:.9}
.marq--shout .marq__t{font-family:var(--shout); text-transform:uppercase;
  font-size:clamp(1.7rem,7vw,6rem); letter-spacing:-.005em}
.marq--out .marq__t{color:transparent; -webkit-text-stroke:1px rgba(243,239,232,.5)}

/* ---------- photography grammar (Norris rule) ----------
   no border, no card, no shadow. tiny mono caption OUTSIDE the frame,
   above-left. sizes vary hard. half of them run off a page edge.
   ------------------------------------------------------------- */
.plate{margin:0; position:relative; display:block}
.plate figcaption{font-family:var(--mono); text-transform:uppercase; letter-spacing:.2em;
  font-size:.6rem; color:var(--muted); margin:0 0 10px}
.plate img{width:100%; height:auto; display:block; border:0; box-shadow:none;
  filter:grayscale(1) contrast(1.04) brightness(.94);
  transition:filter 900ms var(--e-out-expo), transform 900ms var(--e-out-expo);
  transform:scale(1.03)}
.plate.is-in img{filter:none; transform:none}
.g-paper .plate img{filter:grayscale(1) contrast(1.02)}
.g-paper .plate.is-in img{filter:none}

/* a loose scatter field: photographs at wildly different sizes with real air */
.field{position:relative; margin-top:clamp(32px,5vw,68px)}
/* no single photograph is allowed to run away with a whole screen */
.field .plate img{max-height:min(72vh,640px); object-fit:cover}
  .field__row{display:flex; align-items:flex-start; gap:clamp(18px,4vw,72px);
  margin-top:clamp(30px,5vw,80px)}
.field__row:first-child{margin-top:0}
.field__row--end{align-items:flex-end}
.f-xs{width:min(15%,150px)} .f-s{width:min(24%,240px)}
.f-m{width:min(38%,400px)}  .f-l{width:min(60%,700px)}
.f-xl{width:min(82%,960px)}
.push{margin-left:auto}
.isle{align-self:center}
.isle p{margin:0; max-width:24ch}
.isle .cap{display:block; margin-bottom:12px}
.isle__q{font-family:var(--display); font-weight:400; font-size:clamp(1.15rem,1.9vw,1.75rem);
  line-height:1.24; letter-spacing:-.01em; margin:0; max-width:20ch}
.isle__q em{font-style:italic}
.isle__list{font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; line-height:2.1;
  text-transform:uppercase}
.isle__list div{border-bottom:1px solid currentColor; border-color:color-mix(in srgb,currentColor 16%,transparent);
  padding-bottom:3px; margin-bottom:9px; display:flex; justify-content:space-between; gap:20px}
.down-1{margin-top:clamp(24px,5vw,84px)} .down-2{margin-top:clamp(48px,11vw,180px)}
/* off the left / right edge of the page entirely */
.edge-l{margin-left:calc(-1 * var(--gutter) - 4vw)}
.edge-r{margin-right:calc(-1 * var(--gutter) - 4vw)}
.edge-l>figcaption{padding-left:calc(var(--gutter) + 4vw)}
@media(max-width:767px){
  .field__row{display:block}
  .f-xs,.f-s,.f-m,.f-l,.f-xl{width:100%}
  .field__row>*+*{margin-top:26px}
  .down-1,.down-2{margin-top:26px}
  .edge-l,.edge-r{margin-inline:calc(-1 * var(--gutter))}
}

/* full-viewport photograph with the lockup laid over it, ad-card style */
.stage{position:relative; width:100vw; margin-inline:calc(50% - 50vw); overflow:hidden;
  min-height:min(78vh,760px); display:grid; place-items:center}
.stage__img{position:absolute; inset:0; z-index:0}
.stage__img img{width:100%; height:100%; object-fit:cover; filter:brightness(.44) saturate(.85)}
.stage__in{position:relative; z-index:2; padding-inline:var(--gutter); width:100%}
.stage::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(90% 70% at 50% 45%,transparent 20%,rgba(6,5,6,.62))}

/* ---------- annotation markers, drawn over the object ---------- */
.annot{position:absolute; inset:0; pointer-events:none; z-index:5}
.annot__pt{position:absolute; transform:translate(-50%,-50%)}
.annot__dot{width:6px; height:6px; border-radius:50%; background:var(--ember);
  box-shadow:0 0 8px rgba(192,53,63,.8), 0 0 0 3px rgba(192,53,63,.25)}
.annot__lab{position:absolute; white-space:nowrap; font-family:var(--mono);
  font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; color:var(--cream);
  top:50%; transform:translateY(-50%);
  text-shadow:0 1px 4px rgba(0,0,0,.95), 0 2px 10px rgba(0,0,0,.85)}
.annot__lab b{color:var(--ember); font-weight:400; margin-right:.7em}

.annot__pt::before{content:""; position:absolute; top:50%; height:1px;
  background:linear-gradient(90deg,rgba(192,53,63,.8),rgba(243,239,232,.35))}
.annot__pt--l::before{
  background:linear-gradient(270deg,rgba(192,53,63,.8),rgba(243,239,232,.35))}

/* Desktop leader line lengths: push labels near vinyl perimeter */
.annot__pt:nth-child(1)::before{right:6px; width:clamp(260px, 25vw, 340px)}
.annot__pt:nth-child(1) .annot__lab{right:calc(100% + clamp(266px, 25vw + 6px, 346px)); text-align:right}

.annot__pt:nth-child(2)::before{left:6px; width:clamp(260px, 24vw, 340px)}
.annot__pt:nth-child(2) .annot__lab{left:calc(100% + clamp(266px, 24vw + 6px, 346px)); text-align:left}

.annot__pt:nth-child(3)::before{left:6px; width:clamp(95px, 9vw, 130px)}
.annot__pt:nth-child(3) .annot__lab{left:calc(100% + clamp(101px, 9vw + 6px, 136px)); text-align:left}

.annot__pt{opacity:0; transition:opacity 620ms var(--e-ui) var(--ad,0ms)}
.annot.is-in .annot__pt{opacity:1}
@media(max-width:1100px) and (min-width:768px){
  .annot{display:block}
  .annot__lab{font-size:.68rem; letter-spacing:.14em}
  .annot__pt:nth-child(1)::before{right:5px; width:180px}
  .annot__pt:nth-child(1) .annot__lab{right:calc(100% + 186px); text-align:right}
  .annot__pt:nth-child(2)::before{left:5px; width:170px}
  .annot__pt:nth-child(2) .annot__lab{left:calc(100% + 176px); text-align:left}
  .annot__pt:nth-child(3)::before{left:5px; width:80px}
  .annot__pt:nth-child(3) .annot__lab{left:calc(100% + 86px); text-align:left}
}
@media(max-width:767px){
  .annot{display:block; position:absolute; inset:0; pointer-events:none; z-index:5}
  .annot__dot{
    width:5px; height:5px; border-radius:50%;
    background:var(--ember);
    box-shadow:0 0 8px rgba(192,53,63,.8), 0 0 0 2px rgba(192,53,63,.3);
  }
  .annot__pt:nth-child(1){left:50%!important; top:50%!important}
  .annot__pt:nth-child(2){left:58%!important; top:50%!important}
  .annot__pt:nth-child(3){left:70%!important; top:29%!important}
  
  .annot__pt::before{
    content:""; position:absolute; top:50%; height:1px;
    background:linear-gradient(90deg, rgba(192,53,63,.8), rgba(243,239,232,.35));
  }
  .annot__pt--l::before{
    background:linear-gradient(270deg, rgba(192,53,63,.8), rgba(243,239,232,.35));
  }

  /* Extended leader lines to place labels near vinyl perimeter */
  .annot__pt:nth-child(1)::before{right:5px; width:82px}
  .annot__pt:nth-child(1) .annot__lab{right:calc(100% + 90px); text-align:right}

  .annot__pt:nth-child(2)::before{left:5px; width:42px}
  .annot__pt:nth-child(2) .annot__lab{left:calc(100% + 50px); text-align:left}

  .annot__pt:nth-child(3)::before{left:5px; width:34px}
  .annot__pt:nth-child(3) .annot__lab{left:calc(100% + 42px); text-align:left}

  .annot__lab{
    font-size:clamp(0.58rem, 2.2vw, 0.65rem);
    letter-spacing:0.12em;
    line-height:1.25;
    white-space:normal;
    max-width:96px;
    background:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    padding:0;
    border:none;
    border-radius:0;
    box-shadow:none;
    color:var(--cream);
    text-shadow:0 1px 4px rgba(0,0,0,.95), 0 2px 10px rgba(0,0,0,.85);
  }
}

/* ---------- corner chrome, always present ---------- */
#corners{position:fixed; inset:0; z-index:280; pointer-events:none;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(243,239,232,.62); text-shadow:0 1px 10px rgba(0,0,0,.75);
  transition:color 400ms var(--e-ui)}
html[data-light] #corners{color:rgba(22,19,20,.6); text-shadow:0 1px 10px rgba(237,231,221,.8)}
#corners>*{position:absolute; pointer-events:auto}
.cnr-br{right:var(--gutter); bottom:20px}
@media(max-width:767px){
  #corners{font-size:.55rem}
  .cnr-br{bottom:calc(12px + env(safe-area-inset-bottom, 0px))}
}
@media(max-width:1023px){
  body:has(.buybar.is-on) #corners,
  .has-buybar #corners{
    opacity:0; pointer-events:none;
  }
}

/* ---------- preloader ---------- */
#pre{position:fixed; inset:0; z-index:990; background:#050405; display:grid;
  place-items:center; transition:opacity 360ms var(--e-out-expo),visibility 360ms}
#pre.is-out{opacity:0; visibility:hidden}
#pre .pre__mark{width:min(340px,54vw); opacity:0; animation:preIn 900ms var(--e-out-expo) 120ms forwards}
#pre .pre__n{position:absolute; left:var(--gutter); bottom:4vh; font-family:var(--shout);
  font-size:clamp(4rem,17vw,15rem); line-height:.8; color:rgba(243,239,232,.1);
  font-variant-numeric:tabular-nums}
#pre .pre__bar{position:absolute; left:0; top:0; height:2px; background:var(--oxblood); width:0}
#pre .pre__cap{position:absolute; right:var(--gutter); bottom:calc(4vh + 10px)}
@keyframes preIn{to{opacity:1}}
@media(prefers-reduced-motion:reduce){#pre{display:none}}

/* ---------- misc v2 ---------- */
.rule-l{border-left:1px solid var(--border); padding-left:clamp(16px,2.4vw,34px)}
.hang{margin-left:calc(-1 * clamp(0px,3vw,60px))}
@media(max-width:767px){.hang{margin-left:0!important}}
.tight{max-width:15ch}

/* ================================================================
   THE FLEX HERO
   The brand's own standee, made kinetic: one enormous record that
   overflows every edge, a crimson label, the wordmark set ON the
   vinyl above the label and the tagline set ON it below.
   ================================================================ */
.fhero{position:relative; height:100svh; min-height:640px; overflow:hidden; display:flex; align-items:center; justify-content:center}
@media(max-width:767px){.fhero{min-height:520px}}
.fhero__col{position:absolute; inset:0; z-index:0; display:flex}
.fhero__col>i{flex:1; background-repeat:repeat; background-size:auto 760px;
  background-position:center; opacity:.44}
.fhero__col>i:last-child{opacity:.48}
.fhero__col::after{content:""; position:absolute; inset:0;
  background:radial-gradient(78% 62% at 50% 48%,rgba(6,5,6,.86) 24%,rgba(6,5,6,.4) 62%,rgba(6,5,6,.12))}
@media(max-width:767px){.fhero__col>i{background-size:auto 480px}}

/* the disc itself — sized to overflow the viewport on desktop, centered on mobile */
.fdisc{position:relative; z-index:2; width:min(104svh,124vw); aspect-ratio:1;
  display:flex; align-items:center; justify-content:center; margin-inline:auto}
/* the WebGL disc: same footprint as the CSS one, sits underneath it.
   When it mounts successfully, .is-gl hides the CSS layers it replaces —
   but .fdisc__type (wordmark/tagline) and .annot (callouts) stay on top either way. */
.fdiscgl{position:absolute; inset:0; border-radius:50%; overflow:hidden; z-index:1}
.fdisc.is-gl .fdisc__spin,
.fdisc.is-gl .fdisc__sheen,
.fdisc.is-gl .fdisc__gloss,
.fdisc.is-gl .fdisc__hole{display:none}
.fdisc__spin{position:absolute; inset:0; border-radius:50%; transform-origin:50% 50%;
  will-change:transform; overflow:hidden;
  background:radial-gradient(circle at 50% 50%,
    #100f0f 0 20.5%, #0b0a0a 20.5% 21.6%, #070707 21.6% 96.4%, #171616 96.4% 98.4%, #050505 98.4% 100%);
  box-shadow:0 60px 160px rgba(0,0,0,.9), 0 0 0 1px rgba(243,239,232,.05)}
.fdisc__gr{position:absolute; inset:0; border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%,
    rgba(255,255,255,.055) 0 .9px, rgba(0,0,0,.34) .9px 3.4px);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 21.4%,#000 22.2%,#000 95.6%,transparent 96.4%);
  mask-image:radial-gradient(circle at 50% 50%,transparent 21.4%,#000 22.2%,#000 95.6%,transparent 96.4%)}
.fdisc__gr2{position:absolute; inset:0; border-radius:50%; opacity:.5;
  background:repeating-radial-gradient(circle at 50% 50%,
    rgba(255,255,255,.03) 0 5px, rgba(0,0,0,.12) 5px 15px);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 22%,#000 23%,#000 95%,transparent 96%);
  mask-image:radial-gradient(circle at 50% 50%,transparent 22%,#000 23%,#000 95%,transparent 96%)}
/* the crimson label, exactly as the flex has it */
.fdisc__lab{position:absolute; left:50%; top:50%; width:41%; aspect-ratio:1;
  transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#1d1b1c,#151314 56%,#0d0c0c);   /* dark until the 3D record and its album art take over */
  box-shadow:inset 0 0 60px rgba(0,0,0,.42), inset 0 0 0 1px rgba(0,0,0,.3)}
.fdisc__lab::after{content:""; position:absolute; inset:0; border-radius:50%; opacity:.62;
  background:repeating-conic-gradient(from 0deg,rgba(0,0,0,.055) 0 .7deg,transparent .7deg 2.1deg),
    radial-gradient(circle at 50% 50%,transparent 52%,rgba(0,0,0,.22))}
.fdisc__hole{position:absolute; left:50%; top:50%; width:12.4%; aspect-ratio:1;
  transform:translate(-50%,-50%); border-radius:50%; background:#040404;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.6); z-index:4}
/* the two hairlines that cross a 45 label */
.fdisc__rule{position:absolute; left:50%; top:50%; width:41%; height:1px;
  transform:translate(-50%,-50%); background:rgba(0,0,0,.4); z-index:3}
.fdisc__rule--a{margin-top:-4.2%} .fdisc__rule--b{margin-top:4.2%}
/* the specular streak across the grooves — fixed in world space */
.fdisc__sheen{position:absolute; inset:0; border-radius:50%; pointer-events:none; z-index:3;
  background:conic-gradient(from 210deg at 50% 50%,
    transparent 0deg, rgba(255,255,255,.10) 24deg, rgba(255,255,255,.02) 46deg,
    transparent 78deg, transparent 190deg, rgba(255,255,255,.07) 214deg,
    rgba(255,255,255,.015) 236deg, transparent 268deg)}
.fdisc__gloss{position:absolute; inset:0; border-radius:50%; pointer-events:none; z-index:3;
  background:linear-gradient(128deg,rgba(255,255,255,.09) 0%,transparent 22%,transparent 74%,rgba(255,255,255,.045) 100%);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 21%,#000 22%);
  mask-image:radial-gradient(circle at 50% 50%,transparent 21%,#000 22%)}

/* type set ON the disc, like the flex */
.fdisc__type{position:absolute; inset:0; z-index:6; display:grid; place-items:center;
  pointer-events:none; text-align:center}
.fdisc__wm{position:absolute; top:20.5%; left:50%; transform:translateX(-50%);
  width:min(42%,470px); margin:0}
.fdisc__wm img{width:100%; filter:drop-shadow(0 2px 22px rgba(0,0,0,.75))}
.fdisc__tag{position:absolute; bottom:19%; left:50%; transform:translateX(-50%);
  width:78%; color:var(--cream); text-shadow:0 2px 20px rgba(0,0,0,.8);
  font-size:clamp(1.24rem,1.95vw,1.69rem)}
.fdisc__tag .tagline{font-size:clamp(1.24rem,1.95vw,1.69rem)}
@media(max-width:767px){
  .fdisc{
    width: min(84vw, 52svh, 340px);
    aspect-ratio: 1;
    margin-inline: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .fdisc__wm{
    position: absolute;
    top: 17%;
    left: 50%;
    transform: translateX(-50%);
    width: min(62%, 230px);
    margin: 0;
    text-align: center;
  }
  .fdisc__tag{
    position: absolute;
    bottom: 15.5%;
    left: 50%;
    transform: translateX(-50%);
    width: 86%;
    text-align: center;
    font-size: clamp(0.94rem, 4.16vw, 1.36rem);
  }
  .fdisc__tag .tagline{
    font-size: clamp(0.94rem, 4.16vw, 1.36rem);
  }
}
/* the hero's own corner text */
.fhero__cta{position:absolute; z-index:7; left:50%; transform:translateX(-50%);
  bottom:clamp(56px,8svh,96px); display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  justify-content:center}
.fhero__hint{position:absolute; z-index:7; left:var(--gutter); top:calc(var(--nav-h) + 6vh);
  max-width:15ch}
.fhero__hint2{position:absolute; z-index:7; right:var(--gutter); top:calc(var(--nav-h) + 6vh);
  max-width:16ch; text-align:right}
@media(max-width:900px) and (min-width:768px){
  .fhero__hint{top:calc(var(--nav-h) + 2vh); font-size:.58rem}
  .fhero__hint2{top:calc(var(--nav-h) + 2vh); font-size:.58rem}
}
@media(max-width:767px){
  .fhero__hint{
    position:absolute; z-index:7; left:var(--gutter);
    top:calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 8px);
    font-size:.54rem; letter-spacing:.14em; max-width:14ch; opacity:.78; line-height:1.25;
  }
  .fhero__hint2{
    position:absolute; z-index:7; right:var(--gutter);
    top:calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 8px);
    font-size:.54rem; letter-spacing:.14em; max-width:14ch; text-align:right; opacity:.78; line-height:1.25;
  }
}

/* ================================================================
   THE ARTWORK WALL
   The paper chapter used to be phone photographs in a lot of empty
   space. It is now the thing we actually sell: real album artwork,
   posters, polaroids and records, hung the way a wall is hung.
   Pieces hang from a shared baseline and keep their true proportions —
   a poster is never cropped.
   ================================================================ */
.hang-wall{position:relative; margin-top:clamp(24px,3vw,40px)}
.shelf{display:flex; align-items:flex-end; justify-content:center;
  gap:clamp(8px,1.2vw,18px); margin-top:clamp(10px,1.4vw,20px)}
.shelf:first-child{margin-top:0}
.hw{position:relative; display:block; flex:none;
  transition:transform 420ms var(--e-weight), filter 420ms var(--e-ui)}
.hw > .frame,.hw > .polaroid,.hw > .record{width:100%}
.hw .frame img,.hw .polaroid img{width:100%; height:auto; display:block; object-fit:contain}
.hw:hover{transform:translateY(-10px) rotate(0deg) scale(1.02); z-index:8}
.hw__t{position:absolute; left:0; top:calc(100% + 7px); font-family:var(--mono);
  font-size:.55rem; letter-spacing:.16em; text-transform:uppercase;
  color:currentColor; opacity:0; transition:opacity 200ms var(--e-ui); white-space:nowrap}
.hw:hover .hw__t{opacity:.6}
.hw--rec{display:grid; place-items:center}
/* the wall reveals piece by piece, like it is being hung */
.hang-wall .hw{opacity:0; transform:translateY(24px) rotate(var(--rot,0deg))}
.hang-wall.is-in .hw{opacity:1; transform:translateY(var(--dy,0px)) rotate(var(--rot,0deg));
  transition:opacity 540ms var(--e-out-expo) var(--d,0ms), transform 680ms var(--e-out-expo) var(--d,0ms)}
@media(prefers-reduced-motion:reduce){
  .hang-wall .hw{opacity:1; transform:translateY(var(--dy,0px)) rotate(var(--rot,0deg))}}
@media(max-width:860px){
  .shelf{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; align-items:end;
    margin-top:10px}
  .hw{width:100%!important; --dy:0px!important; --rot:0deg!important}
  .hw--hide{display:none}
  .hang-wall.is-in .hw{transform:none}
  .hang-wall .hw{transform:translateY(18px)}
}
@media(max-width:520px){
  .shelf{grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
  .shelf > .hw:nth-child(n+3){display:none}
}

/* ---------- glass surfaces: accessibility fallbacks ----------
   The header and mobile buy bar float as translucent, blurred "material"
   over content (see the WWDC materials-&-depth guidance this site's chrome
   follows). The mega menu and cart drawer used to as well, but backdrop-
   filter never read as glass against this site's dark, low-contrast
   backdrop — it just looked like a flatter black box — so they're solid,
   confident panels now (see .mega / .drawer above) and don't need a
   fallback here. Two OS-level settings still ask for something else from
   the surfaces that ARE glass:
   someone who has turned off transparency effects should get a plain
   solid surface instead of a blur; someone who has asked for more
   contrast should get a defined, high-contrast edge. Both are handled
   here rather than by touching the blur rules themselves, since they
   only apply under their respective media query. */
@media(prefers-reduced-transparency:reduce){
  .hdr,.buybar{backdrop-filter:none; background:#0a0708}
  .badge{backdrop-filter:none; background:#0a0708}
}
@media(prefers-contrast:more){
  .hdr,.buybar{backdrop-filter:none; background:#050405; border-color:var(--cream)}
  .badge{backdrop-filter:none; background:#050405; border-color:var(--cream)}
}

/* ---------- footer reveal ---------- */
/* PastForward — footer reveal (pairs with footer-reveal.js) */
[data-footer-reveal] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --rv-cw: 176px;
  --rv-ch: 48px;
}

/* the resting state: a barely-there grid, same hairline register as the annotation leaders */
[data-footer-reveal]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(243, 239, 232, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(243, 239, 232, .05) 1px, transparent 1px);
  background-size: var(--rv-cw) var(--rv-ch);
}

.rv-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* content sits above the canvas; pointer events bubble up to the footer, so there are no dead zones */
.rv-content { position: relative; z-index: 2; }

/* PastForward footer: the reveal gets its own clear band at the top of the footer, so it never sits behind text */
.ftr__reveal{height:208px; margin:-56px 0 48px;
  --rv-accent:var(--ember); --rv-fill:var(--oxblood); --rv-cream:var(--cream); --rv-ink:var(--ink);
  -webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent); mask-image:linear-gradient(to bottom,#000 62%,transparent)}
@media(max-width:640px){.ftr__reveal{height:176px; --rv-ch:44px}}

/* input & dropform base */
.input{width:100%; background:var(--elevated); border:1px solid var(--border); border-radius:3px;
  padding:14px 18px; font-size:16px; color:var(--cream); box-sizing:border-box; font-family:var(--sans);
  transition:border-color var(--d-micro) var(--e-ui)}
.input:focus{outline:none; border-color:var(--ember)}
.dropform__row{display:flex; gap:10px; max-width:480px; margin-inline:auto}
.format-select{appearance:none; -webkit-appearance:none; width:100%; background:var(--elevated);
  border:1px solid var(--border); border-radius:3px; padding:12px 16px; font-family:var(--mono);
  font-size:.70rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cream); cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23C0353F' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center}
.shop__formats-mobile{display:none}

@media(min-width:900px){
  #beat3{
    display:grid;
    grid-template-columns:minmax(0,44fr) minmax(0,56fr);
    gap:clamp(32px, 6vw, 72px);
    align-items:start;
    position:relative;
    width:100%;
  }
  .beat3__visual{
    position:relative!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    opacity:1!important;
    display:block!important;
    transform:none!important;
    top:auto!important;
    left:auto!important;
    pointer-events:auto!important;
  }
  .beat3__visual .plate{
    display:block!important;
    position:relative!important;
    z-index:1!important;
    width:52%!important;
    margin:-14% 0 0 auto!important;
    right:auto!important;
    bottom:auto!important;
    height:auto!important;
    opacity:1!important;
    filter:none!important;
  }
  .beat3__visual .plate img{
    border-radius:0!important;
    border:none!important;
  }
  .beat3__copy{
    text-align:left;
    margin:0;
    max-width:none;
    background:none;
    padding:clamp(8px, 1.5vw, 24px) 0 0;
  }
  .beat3__copy .cap{
    margin:0;
    text-align:left;
    display:block;
    padding:0;
    background:none;
    border:none;
    box-shadow:none;
  }
  .beat3__copy h1,.beat3__copy h2{
    text-align:left;
    margin:14px 0 20px;
    text-shadow:none;
  }
  .beat3__copy p.measure{
    text-align:left;
    margin:0;
    text-shadow:none;
  }
  .beat3__copy .spec-retro{
    background:none;
    backdrop-filter:none;
    border:none;
    border-top:1px solid var(--border);
    padding:0;
    box-shadow:none;
    margin-top:32px;
  }
}

/* ---------- mobile optimizations & responsive polish ---------- */
@media(max-width:767px){
  .fhero__cta{
    bottom:calc(clamp(44px, 6svh, 72px) + env(safe-area-inset-bottom, 0px));
    width:calc(100% - 32px);
    max-width:360px;
    gap:10px;
  }
  .fhero__cta .btn{
    width:auto;
    min-width:180px;
    padding:0 32px;
    text-align:center;
  }
  #pickrec, #beat3rec, .pdp-record{
    max-width:min(var(--size, 320px), calc(100vw - 2 * var(--gutter)))!important;
    margin-inline:auto;
  }
  form[data-form="custom"] > div[style*="grid-template-columns"],
  form[data-form="contact"] > div[style*="grid-template-columns"]{
    grid-template-columns:minmax(0,1fr)!important;
    gap:14px!important;
  }
  .edge-l, .edge-r{
    margin-inline:calc(-1 * var(--gutter));
    width:auto!important;
    max-width:none!important;
  }
  .offright{
    margin-right:0!important;
  }
  .pdp-wrap{
    padding-bottom:calc(76px + env(safe-area-inset-bottom, 0px));
  }
  .scaleview{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .shop__formats-desktop{display:none!important}
  .shop__formats-mobile{display:block!important; width:100%; max-width:320px}
  /* beat 3: THE OBJECT - mobile single-scroll layout */
  section[data-section="THE OBJECT"]{
    min-height:auto!important;
    padding-top:clamp(20px, 3vh, 32px)!important;
    padding-bottom:clamp(10px, 1.8vh, 18px)!important;
    position:relative;
    overflow:hidden;
  }
  .beat3-wrap{
    width:100%;
    padding-inline:var(--gutter);
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
  }
  #beat3{
    position:relative;
    width:100%;
    max-width:440px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:auto!important;
    padding-block:10px 14px;
    margin-inline:auto;
    text-align:center;
    overflow:visible;
  }
  .beat3__visual,
  .beat3__visual.reveal,
  .beat3__visual.reveal.is-in{
    position:absolute!important;
    top:48%!important;
    left:50%!important;
    transform:translate(-50%, -50%)!important;
    width:min(86vw, 320px)!important;
    height:min(86vw, 320px)!important;
    margin:0!important;
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    z-index:1!important;
    pointer-events:none!important;
    opacity:0.85!important;
  }
  .beat3__visual figcaption{
    display:none!important;
  }
  .beat3__discwrap{
    position:relative!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
  }
  #beat3rec{
    width:100%!important;
    height:100%!important;
    filter:contrast(1.16) brightness(1.22)!important;
  }
  #beat3rec .record__grooves{
    background:repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.13) 0 1px, rgba(0,0,0,0.30) 1px 3.2px)!important;
    opacity:1!important;
  }
  #beat3rec .record__sheen{
    opacity:1!important;
    background:conic-gradient(from var(--sheen-a,188deg) at 50% 50%,
      rgba(255,255,255,0) 0deg,
      rgba(255,255,255,.14) 14deg,
      rgba(255,255,255,.38) 30deg,
      rgba(255,255,255,.14) 50deg,
      rgba(255,255,255,0) 80deg,
      rgba(255,255,255,0) 170deg,
      rgba(255,255,255,.12) 188deg,
      rgba(255,255,255,.32) 208deg,
      rgba(255,255,255,.10) 228deg,
      rgba(255,255,255,0) 258deg,
      rgba(255,255,255,0) 360deg)!important;
  }
  .beat3__visual .plate{
    display:none!important;
  }
  .beat3__copy{
    position:relative;
    z-index:3;
    text-align:center;
    margin-inline:auto;
    max-width:min(92vw, 380px);
    width:100%;
    padding:10px 8px;
    background:none!important;
  }
  .beat3__copy .cap{
    margin-inline:auto;
    text-align:center;
    display:inline-block;
    padding:3px 12px;
    border-radius:999px;
    background:rgba(14, 11, 13, 0.85);
    border:1px solid rgba(243, 239, 232, 0.12);
    box-shadow:0 2px 10px rgba(0,0,0,0.85);
    text-shadow:0 1px 4px #000;
  }
  .beat3__copy h1,.beat3__copy h2{
    text-align:center;
    font-size:clamp(1.7rem, 6.5vw, 2.15rem);
    margin:10px auto 12px;
    text-wrap:balance;
    text-shadow:0 2px 16px rgba(0,0,0,1), 0 0 24px rgba(0,0,0,1), 0 3px 6px #000;
  }
  .beat3__copy p.measure{
    text-align:center;
    margin-inline:auto;
    max-width:34ch;
    font-size:.90rem;
    line-height:1.46;
    text-shadow:0 1px 10px rgba(0,0,0,1), 0 0 18px rgba(0,0,0,1), 0 2px 4px #000;
  }
  .beat3__copy .spec-retro{
    margin:16px auto 0;
    max-width:330px;
    background:rgba(14, 11, 13, 0.60);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border-radius:10px;
    padding:3px 14px;
    border:1px solid rgba(243, 239, 232, 0.12);
    box-shadow:0 8px 24px rgba(0,0,0,0.7);
  }
  .beat3__copy .spec-retro__item{
    padding:8px 2px;
  }
  [data-section="THE REST OF THE WALL"] .wrap{text-align:center}
  [data-section="THE REST OF THE WALL"] .cap{margin-inline:auto; text-align:center}
  [data-section="THE REST OF THE WALL"] .lockup{align-items:center; text-align:center; margin-inline:auto}
  [data-section="THE REST OF THE WALL"] p.measure{text-align:center; margin-inline:auto; max-width:34ch}
  [data-section="THE REST OF THE WALL"] .mono-xs{justify-content:center}
  [data-section="WALL DECOR"] .stage__in{text-align:center}
  [data-section="WALL DECOR"] .stage__in .lockup{align-items:center; text-align:center; margin-inline:auto}
  [data-section="WHY"] .wrap{text-align:center}
  [data-section="WHY"] .cap{margin-inline:auto; text-align:center}
  [data-section="WHY"] .manifesto{text-align:center; margin-inline:auto; max-width:32ch; font-size:clamp(1.3rem, 5.5vw, 1.8rem); line-height:1.25}
  [data-section="WHY"] .tagline{text-align:center; margin-inline:auto; display:block}
  [data-section="THE DROP"] .wrap{text-align:center}
  [data-section="THE DROP"] .cap{margin-inline:auto; text-align:center}
  [data-section="THE DROP"] .shout{text-align:center; margin-inline:auto}
  [data-section="THE DROP"] p.measure{text-align:center; margin-inline:auto; max-width:34ch}
  .dropform{margin-inline:auto; max-width:360px; width:100%}
  .dropform__row{flex-direction:column; width:100%; gap:10px}
  .dropform__row .btn{width:100%; justify-content:center}
}

/* the mega menu is only opened from the desktop nav (hidden under 900px); its 4-column grid
   was wider than a phone and let iOS widen the page, cropping the preloader and shop on the right */
@media(max-width:899px){.mega{display:none}}

/* ---------- the crate (MAKE IT YOURS): a diagonal row of records on the brand collage ----------
   One screen tall; arrows / swipe / keys move the row. */
/* tall enough for the page scroll to move through --steps records while the stage stays pinned */
.crate{position:relative; height:calc(100svh + var(--steps, 3) * 34svh); background:var(--ink)}
.crate__bg{position:absolute; inset:0; z-index:0; display:flex}
.crate__bg>i{flex:1; background-repeat:repeat; background-size:auto 680px; background-position:center; opacity:.30}
.crate__bg>i:last-child{opacity:.36}
.crate__bg::after{content:""; position:absolute; inset:0;
  background:radial-gradient(70% 70% at 54% 52%,rgba(6,5,6,.88) 18%,rgba(6,5,6,.55) 55%,rgba(6,5,6,.25))}
.crate__stage{position:sticky; top:0; z-index:2; height:100svh; min-height:640px; overflow:hidden; outline:none; background:var(--ink)}
.crate__gl{position:absolute; inset:0; z-index:1}
.crate__scribble{position:absolute; inset:0; width:100%; height:100%; z-index:3; pointer-events:none; overflow:visible; opacity:0}
.crate__scribble path{fill:none; stroke:var(--ember); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1 1; stroke-dashoffset:1; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 6px rgba(192,53,63,.45))}
.crate__meta{position:absolute; z-index:4; left:var(--gutter); top:calc(var(--nav-h) + 22px); width:min(350px, 27vw); pointer-events:none}
.crate__eyebrow{margin-bottom:12px}
.crate__head{font-family:var(--shout); font-weight:400; text-transform:uppercase; letter-spacing:-.005em; font-size:clamp(2.6rem,4.6vw,4.8rem); line-height:.92; margin:0 0 22px}
.crate__rows dd span,.crate__fv span,.crate__fl span{display:inline-block}
.crate__rows{margin:0; border-top:1px solid rgba(243,239,232,.24)}
.crate__rows>div{display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:8px 0 7px; border-bottom:1px solid rgba(243,239,232,.24)}
.crate__rows dt{font-family:var(--mono); font-size:.58rem; letter-spacing:.2em; color:var(--muted); flex:none}
.crate__rows dd{margin:0; text-align:right; overflow:hidden; font-size:.95rem; min-width:0; text-wrap:balance}
.crate__rows>div:first-child dd{font-family:var(--display); font-size:1.15rem; text-transform:uppercase; letter-spacing:-.01em}
.crate__hint{margin-top:18px; color:var(--muted); letter-spacing:.2em; line-height:1.9}
.crate__hint-m{display:none}
.crate__facts{position:absolute; z-index:4; left:50%; bottom:clamp(22px,5svh,50px); transform:translateX(-50%);
  display:flex; gap:clamp(36px,8vw,120px); text-align:center; pointer-events:none; width:max-content; max-width:calc(100vw - 2*var(--gutter) - 200px)}
.crate__fl{font-family:var(--mono); font-size:.58rem; letter-spacing:.22em; color:var(--muted); margin-bottom:8px; overflow:hidden}
.crate__fv{font-family:var(--display); font-weight:500; text-transform:uppercase; letter-spacing:-.01em;
  font-size:clamp(1.05rem,1.9vw,1.65rem); line-height:1.02; overflow:hidden}
.crate__nav{position:absolute; z-index:5; right:var(--gutter); bottom:clamp(22px,5svh,50px); display:flex; align-items:center; gap:14px}
.crate__count{color:var(--cream); letter-spacing:.2em; min-width:7ch; text-align:center; font-size:.72rem}
.crate__arrow{width:66px; height:66px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  background:var(--cream); border:2px solid var(--cream); color:var(--ink); box-shadow:0 8px 28px rgba(0,0,0,.55), 0 0 0 6px rgba(243,239,232,.08);
  transition:background .25s, border-color .25s, transform .35s var(--e-spring), opacity .25s; backdrop-filter:blur(6px)}
.crate__arrow svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.crate__arrow:hover:not(:disabled){background:var(--oxblood); border-color:var(--ember); color:var(--cream); transform:scale(1.08)}
.crate__arrow:active:not(:disabled){transform:scale(.94)}
.crate__arrow:disabled{opacity:.35; background:transparent; color:var(--cream); border-color:rgba(243,239,232,.45); box-shadow:none; cursor:default}
.crate__arrow:focus-visible{outline:2px solid var(--ember); outline-offset:3px}
/* a real link to the record in front, for keyboards and screen readers */
.sr-focus{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.sr-focus:focus{z-index:6; width:auto; height:auto; clip-path:none; left:var(--gutter); bottom:clamp(22px,5svh,50px);
  padding:10px 14px; background:var(--ink); border:1px solid var(--ember); font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase}
@media(max-width:1023px){ .crate__meta{width:min(380px, 42vw)} }
@media(max-width:767px){
  .crate__stage{min-height:600px}
  .crate__meta{width:calc(100% - 2*var(--gutter)); top:calc(var(--nav-h) + 6px)}
  .crate__eyebrow{margin-bottom:6px}
  .crate__head{font-size:clamp(1.55rem,7vw,2rem); margin-bottom:10px}
  .crate__rows>div{padding:5px 0 4px}
  .crate__rows dd{font-size:.85rem}
  .crate__rows>div:first-child dd{font-size:1rem}
  .crate__rows>div:nth-child(3){display:none}
  .crate__hint{display:none}
  .crate__facts{bottom:calc(92px + env(safe-area-inset-bottom,0px)); gap:26px; max-width:calc(100vw - 2*var(--gutter))}
  .crate__fv{font-size:1rem}
  .crate__nav{left:50%; right:auto; transform:translateX(-50%); bottom:calc(20px + env(safe-area-inset-bottom,0px))}
}
@media(prefers-reduced-motion:reduce){ .crate__arrow{transition:none} }
/* no WebGL: show the records as a simple list of links */
.crate--flat .crate__gl,.crate--flat .crate__scribble,.crate--flat .crate__facts,.crate--flat .crate__nav{display:none}
.crate--flat .sr-focus{position:absolute; width:auto; height:auto; clip-path:none; left:var(--gutter); bottom:clamp(22px,5svh,50px)}

#buy{scroll-margin-top:calc(var(--nav-h) + 8px)}
/* the product stage: give the media box the stage's width so the record (sized as a % of it) shows */
#stagemedia{width:100%; display:grid; place-items:center}
/* product page: the liquid album-art backdrop, fixed behind the content */
.pliq{position:fixed; inset:0; z-index:0; pointer-events:none}
.pliq canvas{display:block}
.pdp-wrap{position:relative; z-index:1}
/* the live wallpaper sits over the collage fallback and replaces it once running */
.crate__wall{position:absolute; inset:0; z-index:1}
.crate--live .crate__bg>i{display:none}
.crate--live .crate__bg::after{display:none}
.crate--flat{height:auto}

/* ---------- artist groups on the vinyl / posters / polaroids pages ---------- */
.ag-grid{align-items:start}
.ag{position:relative; display:flex; flex-direction:column}
.ag__head{all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column; gap:12px; position:relative;
  transition:transform 380ms var(--e-spring)}
.ag__head:hover{transform:translateY(-4px)}
.ag__head:focus-visible{outline:2px solid var(--ember); outline-offset:4px}
.ag__media{width:100%}
.ag__head:hover .ag__media{box-shadow:var(--sh-lift)}
/* more than one album: a second sleeve peeks out behind the first */
.ag__media--stack{overflow:visible}
.ag__media--stack::before{content:""; position:absolute; inset:0; z-index:-1; border:1px solid var(--border); background:var(--elevated-2);
  transform:translate(7px,-7px); transition:transform var(--d-std) var(--e-out-expo)}
.ag__head:hover .ag__media--stack::before{transform:translate(11px,-11px)}
.ag__meta{display:flex; flex-direction:column; gap:5px; padding-right:34px}
.ag__name{font-family:var(--display); font-size:clamp(1.05rem,1.6vw,1.35rem); line-height:1.1; letter-spacing:-.01em}
.ag__sub{display:flex; flex-wrap:wrap; column-gap:12px; row-gap:2px; color:var(--muted)}
.ag__sub>span{white-space:nowrap}
.ag__chev{position:absolute; right:0; bottom:4px; width:28px; height:28px; border-radius:50%; border:1px solid var(--border-2);
  display:grid; place-items:center; transition:background .25s, border-color .25s, transform .35s var(--e-out-expo)}
.ag__chev::before{content:""; width:7px; height:7px; border-right:1.5px solid var(--cream); border-bottom:1.5px solid var(--cream); transform:translateY(-2px) rotate(45deg)}
.ag__head:hover .ag__chev{border-color:var(--ember)}
.ag.is-open .ag__chev{transform:rotate(180deg); background:var(--oxblood); border-color:var(--oxblood)}
/* the dropdown: grid-rows trick animates to the list's natural height */
.ag__drop{display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--e-out-expo)}
.ag.is-open .ag__drop{grid-template-rows:1fr}
.ag__in{overflow:hidden; min-height:0}
.ag__list{list-style:none; margin:12px 0 0; padding:0; border-top:1px solid var(--border)}
.ag__row{display:flex; align-items:center; border-bottom:1px solid var(--border)}
.ag__link{flex:1; min-width:0; display:flex; align-items:center; gap:12px; padding:10px 0; transition:color .2s}
.ag__link:hover{color:var(--ember)}
.ag__thumb{flex:none; width:42px; height:42px; display:grid; place-items:center; overflow:hidden; background:var(--elevated)}
.ag__thumb img{width:100%; height:100%; object-fit:cover}
.ag__thumb--rec{background:none}
.ag__thumb--rec .record{--size:42px !important; width:42px}
.ag__album{flex:1; min-width:0; font-family:var(--display); font-size:.98rem; line-height:1.2; display:flex; flex-direction:column; gap:3px; overflow-wrap:anywhere}
.ag__tags{font-family:var(--mono); font-size:.55rem; letter-spacing:.14em; color:var(--muted)}
.ag__price{color:var(--cream); white-space:nowrap}
.ag__add{flex:none; width:30px; height:30px; margin-left:10px; border-radius:50%; border:1px solid var(--border-2); background:none; color:var(--cream);
  cursor:pointer; font-size:1rem; line-height:1; transition:background .2s, border-color .2s}
.ag__add:hover{background:var(--oxblood); border-color:var(--oxblood)}
@media(prefers-reduced-motion:reduce){ .ag__drop{transition:none} .ag__head,.ag__chev{transition:none} }
@media(max-width:767px){ .ag__thumb{width:36px; height:36px} .ag__thumb--rec .record{--size:36px !important; width:36px} .ag__link{gap:9px} .ag__add{width:28px; height:28px; margin-left:6px} .ag__meta{padding-right:32px} }
/* policy pages */
.policy{margin-top:40px; display:flex; flex-direction:column; gap:30px}
.policy section{border-top:1px solid var(--border); padding-top:20px}
.policy h2{margin:0 0 10px}
.policy p{margin:0}
.policy__nav{display:flex; flex-wrap:wrap; gap:22px; margin-top:56px; padding-top:20px; border-top:1px solid var(--border)}
.policy__nav a{color:var(--muted)} .policy__nav a.is-on,.policy__nav a:hover{color:var(--cream)}

/* ---------- every CSS record wears the realistic pressing ----------
   brand/disc.webp is the 3D record rendered top-down without a label. It doesn't turn:
   grooves look the same at any angle and the light should stay put, so only the label
   (and the etched ring) rotate on top of it. */
.record::before{content:""; position:absolute; inset:0; border-radius:50%; z-index:0;
  background:var(--disc-img, radial-gradient(circle,#151414 0 17%,#090909 17% 96%,#1a1919 96%)) center/100% 100% no-repeat;
  box-shadow:var(--sh-record)}
.record__disc{background:none; box-shadow:none; z-index:1}
.record__grooves,.record__grooves2,.record__deadwax,.record__sheen{display:none}
.record__rim{box-shadow:inset 0 0 0 1px rgba(0,0,0,.55); background:none; z-index:2}
.record__label{box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 0 0 3px rgba(255,255,255,.035), 0 2px 8px rgba(0,0,0,.6)}
.wall__item .record::before{transition:transform 380ms var(--e-spring)} .wall__item:hover .record::before{transform:translateY(-16px) scale(1.06)}

.fdisc__rule{display:none}
/* dropdown rows: album + size on the left, the price in its own column */
.ag__size{font-family:var(--mono); font-size:.56rem; letter-spacing:.14em; color:var(--muted); text-transform:uppercase}
.ag__link .ag__price{flex:none; font-family:var(--mono); font-size:.74rem; color:var(--cream); margin-left:10px; white-space:nowrap}

/* ---------- transitions between home sections ---------- */
/* hero → bestsellers: the collage melts into the dark the contours rise out of */
.fhero::before{content:""; position:absolute; left:0; right:0; bottom:0; height:40%; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(13,11,12,0), rgba(13,11,12,.8) 60%, #0d0b0c)}
/* and over the record itself, only in the last strip, so the disc sinks into the dark instead of being cut */
.fhero::after{content:""; position:absolute; left:0; right:0; bottom:0; height:16%; z-index:3; pointer-events:none;
  background:linear-gradient(to bottom, rgba(13,11,12,0), rgba(13,11,12,.55) 55%, #0d0b0c)}
.crate{--enter:0; margin-top:-1px}
.crate__wall{-webkit-mask-image:linear-gradient(to bottom, transparent calc(var(--enter) * 8%), #000 calc(var(--enter) * 62%));
  mask-image:linear-gradient(to bottom, transparent calc(var(--enter) * 8%), #000 calc(var(--enter) * 62%))}
.crate__stage{background:#0d0b0c}
/* the wall photo → the red manifesto band → the drop: no hard edges */
/* the stage already shades its photo with ::after; its <img> wrapper carries the fade into the red band */
.stage__img::after{content:""; position:absolute; left:0; right:0; bottom:0; height:38%; pointer-events:none;
  background:linear-gradient(to bottom, rgba(18,7,8,0), #120708)}
.stage__in{position:relative; z-index:2}
[data-section="THE DROP"]::before{content:""; position:absolute; left:0; right:0; top:0; height:180px; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom, #120708, rgba(18,7,8,0))}

/* ---------- the call-to-action button ----------
   A cream pill with a record turning in it. Three things keep it alive without a mouse: the label
   rolls between two lines, a ring breathes out of it, and the arrow nudges. Under a pointer or a
   finger it floods with oxblood from wherever it was touched, and on a laptop it leans toward the cursor. */
.cta-shop{position:relative; display:inline-flex; align-items:center; gap:14px; height:68px; padding:0 10px 0 11px; border-radius:999px;
  background:var(--cream); color:var(--ink); font-family:var(--shout); font-size:1.2rem; font-weight:400; letter-spacing:.07em; text-transform:uppercase; line-height:1;
  text-decoration:none; -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none;
  box-shadow:0 14px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(243,239,232,.6); isolation:isolate;
  transform:translate(var(--tx,0px),var(--ty,0px));
  transition:color .3s var(--e-out-expo), transform .5s var(--e-spring), box-shadow .35s}
/* the flood: a dot under the pointer that grows until it fills the pill */
.cta-shop__fill{position:absolute; inset:0; border-radius:inherit; overflow:hidden; z-index:-1; pointer-events:none}
.cta-shop__fill::before{content:""; position:absolute; left:var(--mx, calc(100% - 34px)); top:var(--my, 50%); width:12px; height:12px; margin:-6px;
  border-radius:50%; background:var(--oxblood); transform:scale(0); transition:transform .65s var(--e-out-expo)}
/* a soft ring breathes out from it, so the eye finds it */
.cta-shop::after{content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; z-index:-2;
  border:2px solid rgba(192,53,63,.7); opacity:0; animation:ctaPulse 2.8s ease-out 1.2s infinite}
@keyframes ctaPulse{0%{opacity:1; transform:scale(1)} 70%,100%{opacity:0; transform:scale(1.14,1.42)}}
.cta-shop__disc{width:46px; height:46px; border-radius:50%; flex:none; position:relative;
  background:var(--disc-img, #0b0a0b) center/100% 100%; box-shadow:0 2px 8px rgba(0,0,0,.45); animation:ctaSpin 3.2s linear infinite}
.cta-shop__disc i{position:absolute; inset:33%; border-radius:50%; background:radial-gradient(circle,#0b0a0b 0 10%, var(--ember) 12% 100%)}
@keyframes ctaSpin{to{transform:rotate(360deg)}}
/* the label: two lines on a loop (the first is repeated at the end so the loop has no seam) */
.cta-shop__txt{display:block; height:1.3em; overflow:hidden; padding:0 4px}
.cta-shop__roll{display:flex; flex-direction:column; align-items:center}
.cta-shop__roll b{flex:none; height:1.3em; line-height:1.3; font-weight:400; white-space:nowrap}
.cta-shop__roll--2{animation:ctaRoll 7s cubic-bezier(.7,0,.2,1) 2.6s infinite}
@keyframes ctaRoll{0%,36%{transform:translateY(0)} 44%,86%{transform:translateY(-1.3em)} 94%,100%{transform:translateY(-2.6em)}}
.cta-shop__arrow{width:48px; height:48px; border-radius:50%; flex:none; display:grid; place-items:center; overflow:hidden; background:var(--oxblood); color:var(--cream);
  transition:background .3s, color .3s, transform .45s var(--e-spring)}
.cta-shop__arrow svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; animation:ctaNudge 2.8s ease-in-out 1s infinite}
@keyframes ctaNudge{0%,62%,100%{transform:none} 74%{transform:translateX(5px)} 86%{transform:translateX(-1px)}}
@keyframes ctaArrow{0%{transform:none} 45%{transform:translateX(34px)} 46%{transform:translateX(-34px)} 100%{transform:none}}
@media(hover:hover){
  .cta-shop:hover{color:var(--cream); transform:translate(var(--tx,0px),calc(var(--ty,0px) - 3px)) scale(1.03); box-shadow:0 22px 54px rgba(142,31,43,.5), 0 0 0 1px var(--oxblood)}
  .cta-shop:hover .cta-shop__fill::before{transform:scale(90)}
  .cta-shop:hover .cta-shop__disc{animation-duration:.8s}
  .cta-shop:hover .cta-shop__arrow{background:var(--cream); color:var(--oxblood)}
  .cta-shop:hover .cta-shop__arrow svg{animation:ctaArrow .55s var(--e-out-expo)}
}
/* a finger: the same flood, from where it landed */
.cta-shop.is-press{color:var(--cream); transform:scale(.96)}
.cta-shop.is-press .cta-shop__fill::before{transform:scale(90); transition-duration:.4s}
.cta-shop.is-press .cta-shop__disc{animation-duration:.6s}
.cta-shop.is-press .cta-shop__arrow{background:var(--cream); color:var(--oxblood)}
.cta-shop:active{transform:translate(var(--tx,0px),var(--ty,0px)) scale(.96)}
.cta-shop:focus-visible{outline:2px solid var(--cream); outline-offset:5px}
/* the smaller cut, without the record (on the poster slides) */
.cta-shop--sm{height:54px; gap:12px; padding:0 7px 0 24px; font-size:1.02rem}
.cta-shop--sm::after{display:none}
.cta-shop--sm .cta-shop__arrow{width:40px; height:40px}
.cta-shop--sm .cta-shop__arrow svg{width:17px; height:17px}
@media(max-width:767px){
  .cta-shop{height:62px; font-size:1.1rem} .cta-shop__disc{width:42px; height:42px} .cta-shop__arrow{width:44px; height:44px}
  .cta-shop--sm{height:52px; font-size:1rem} .cta-shop--sm .cta-shop__arrow{width:38px; height:38px}
}
@media(max-width:380px){ .cta-shop:not(.cta-shop--sm){height:58px; font-size:.98rem; gap:10px; padding:0 8px 0 9px} .cta-shop__disc{width:38px; height:38px} .cta-shop:not(.cta-shop--sm) .cta-shop__arrow{width:40px; height:40px} }
@media(prefers-reduced-motion:reduce){ .cta-shop::after,.cta-shop__disc,.cta-shop__roll--2,.cta-shop__arrow svg{animation:none} .cta-shop,.cta-shop__fill::before{transition:none} }
/* the red band's collage fades in under the wall photo instead of starting on a line */

/* phones: an opened artist becomes a full-width panel, cover beside the name, albums below */
@media(max-width:767px){
  .ag.is-open{grid-column:1/-1}
  .ag.is-open .ag__head{flex-direction:row; align-items:center; gap:16px}
  .ag.is-open .ag__media{width:40%; flex:none}
  .ag.is-open .ag__meta{flex:1}
}
.ag__album{overflow-wrap:break-word}

/* ---- album → size step (posters) ---- */
.ag__row--multi{display:block}
.ag__pick{all:unset; box-sizing:border-box; cursor:pointer; width:100%; display:flex; align-items:center; gap:12px; padding:10px 0; transition:color .2s}
.ag__pick:hover{color:var(--ember)}
.ag__pick:focus-visible{outline:2px solid var(--ember); outline-offset:2px}
.ag__pchev{flex:none; width:26px; height:26px; border-radius:50%; border:1px solid var(--border-2); display:grid; place-items:center; transition:transform .35s var(--e-out-expo), background .2s, border-color .2s}
.ag__pchev::before{content:""; width:6px; height:6px; border-right:1.5px solid var(--cream); border-bottom:1.5px solid var(--cream); transform:translateY(-2px) rotate(45deg)}
.ag__pick:hover .ag__pchev{border-color:var(--ember)}
.ag__row.is-open .ag__pchev{transform:rotate(180deg); background:var(--oxblood); border-color:var(--oxblood)}
.ag__row.is-open .ag__pick{color:var(--cream)}
.ag__sizes{display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--e-out-expo)}
.ag__row.is-open .ag__sizes{grid-template-rows:1fr}
.ag__sin{overflow:hidden; min-height:0}
.ag__step{margin:0 0 6px 54px; color:var(--muted); letter-spacing:.16em}
.ag__slist{list-style:none; margin:0 0 12px 54px; padding:0; display:flex; flex-direction:column; gap:6px}
.ag__srow{display:flex; align-items:center; gap:8px; border:1px solid var(--border); background:rgba(243,239,232,.025); transition:border-color .2s, background .2s}
.ag__srow:hover{border-color:var(--ember); background:rgba(192,53,63,.08)}
.ag__slink{flex:1; min-width:0; display:flex; align-items:center; gap:10px; padding:8px 0 8px 10px}
.ag__badge{flex:none; min-width:44px; text-align:center; font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; padding:4px 6px; border:1px solid var(--border-2); color:var(--cream)}
.ag__sname{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; font-size:.82rem; line-height:1.2}
.ag__dim{font-family:var(--mono); font-size:.55rem; letter-spacing:.1em; color:var(--muted)}
.ag__slink .ag__price{flex:none; font-family:var(--mono); font-size:.76rem; color:var(--cream); white-space:nowrap}
.ag__sadd{flex:none; margin-right:8px; height:30px; padding:0 14px; border-radius:999px; border:1px solid var(--border-2); background:none; color:var(--cream); font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; transition:background .2s, border-color .2s}
.ag__sadd:hover,.ag__sadd:focus-visible{background:var(--oxblood); border-color:var(--oxblood)}
@media(max-width:767px){ .ag__step,.ag__slist{margin-left:45px} .ag__pick{gap:9px} .ag__sadd{padding:0 11px; margin-right:6px} .ag__badge{min-width:38px} }
@media(prefers-reduced-motion:reduce){ .ag__sizes,.ag__pchev{transition:none} }

/* narrow artist cards (desktop grid): badge already names the size, so drop the label and indent */
.ag__in{container-type:inline-size}
@container (max-width:340px){
  .ag__step,.ag__slist{margin-left:0}
  .ag__slab{display:none}
  .ag__dim{font-size:.6rem; color:rgba(243,239,232,.7)}
  .ag__slink{gap:8px; padding-left:8px}
  .ag__badge{min-width:40px; padding:4px}
  .ag__sadd{width:30px; height:30px; padding:0; border-radius:50%; margin-right:6px}
  .ag__saddt{font-size:0}
  .ag__saddt::before{content:"+"; font-size:.95rem; letter-spacing:0}
}

/* ---- size headings on the posters pages ---- */
.stabs{display:flex; gap:8px; flex-wrap:wrap; margin:-6px 0 40px; padding-bottom:22px; border-bottom:1px solid var(--border)}
.stab{display:flex; flex-direction:column; gap:4px; min-width:118px; padding:12px 18px 11px; border:1px solid var(--border-2); text-decoration:none; color:var(--cream); transition:border-color .2s, background .2s, transform .2s var(--e-ui)}
.stab:hover{border-color:var(--ember); transform:translateY(-2px)}
.stab__name{font-family:var(--display); font-size:1.18rem; line-height:1.1; letter-spacing:-.01em}
.stab__meta{color:var(--muted); letter-spacing:.12em}
.stab.is-on{background:var(--oxblood); border-color:var(--oxblood)}
.stab.is-on .stab__meta{color:rgba(243,239,232,.78)}
@media(max-width:767px){
  .stabs{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:-10px -16px 28px; padding:0 16px 16px; gap:6px}
  .stabs::-webkit-scrollbar{display:none}
  .stab{flex:none; min-width:0; padding:10px 14px 9px}
  .stab__name{font-size:1rem}
}
@media(prefers-reduced-motion:reduce){ .stab{transition:none} }

/* ---- the wall photo, shown whole: the full portrait photo sits centred, a blurred copy fills the sides ---- */
.stage__img img{filter:brightness(.74) saturate(.95)}
.stage__img .stage__bg{display:none}
.stage__img::after{height:14%; background:linear-gradient(to bottom, rgba(13,11,12,0), #0d0b0c)}
.stage::after{background:radial-gradient(60% 46% at 50% 50%, rgba(6,5,6,.42), transparent 75%)}
@media(min-width:768px){
  /* full-width and landscape; taller than before so more of the wall shows */
  .stage{min-height:0; height:min(112vh, 1100px)}
  .stage__img .stage__fg{width:100%; height:100%; object-fit:cover; object-position:50% 42%}
}

/* ---- the manifesto, now a slim strip between the wall photo and the drop ---- */
.why-strip{position:relative; padding:16px var(--gutter); background:#0d0b0c;
  border-block:1px solid rgba(192,53,63,.22); text-align:center}
.why-strip__t{margin:0 auto; max-width:none; font-family:var(--mono); text-transform:uppercase; letter-spacing:.16em;
  font-size:clamp(.6rem,.95vw,.74rem); line-height:1.7; color:rgba(243,239,232,.74)}
.why-strip__t b{font-family:var(--display); font-weight:400; font-style:italic; text-transform:none; letter-spacing:0;
  font-size:1.5em; color:var(--ember)}
[data-section="THE DROP"]::before{background:linear-gradient(to bottom, #0d0b0c, rgba(13,11,12,0))}

/* ---- vinyl sale: struck MRP beside the sale price ---- */
.mrp{color:var(--muted); text-decoration:line-through; text-decoration-color:var(--ember); text-decoration-thickness:1.5px; font-size:.86em; margin-right:.2em}
.sale{color:var(--cream)}
.fmt .f-price .mrp{display:block; margin:0 0 1px}

/* ---- slim sale bar above the header: the header grows by its height, so every --nav-h offset still clears it ---- */
:root{--bar-h:28px}
:root{--nav-h:calc(56px + var(--bar-h))}
@media(min-width:480px){:root{--nav-h:calc(60px + var(--bar-h))}}
@media(min-width:768px){:root{--nav-h:calc(64px + var(--bar-h))}}
.hdr{flex-direction:column; align-items:stretch}
.hdr__in{flex:1}
/* the sale ribbon: red caution tape, text running */
.tape{--tape:#D8312A; display:block; overflow:hidden; background:var(--tape); color:#0b0809; text-decoration:none;
  font-family:var(--shout); text-transform:uppercase; white-space:nowrap}
.tape__t{display:inline-flex; will-change:transform; animation:tapeRun 38s linear infinite}
.tape__i{display:inline-flex; align-items:center}
.tape__i>*{padding-inline:.7em}
.tape__i b{font-weight:400; letter-spacing:.04em}
.tape__i s{text-decoration-thickness:2px; opacity:.6}
.tape__i em{font-style:normal; background:#0b0809; color:var(--tape); padding:0 .3em}
.tape__i>span::after{content:"✦"; margin-left:1.4em; font-size:.7em; vertical-align:.12em}
@keyframes tapeRun{to{transform:translateX(-50%)}}
.salebar.tape{flex:none; height:var(--bar-h); line-height:var(--bar-h); font-size:.98rem; letter-spacing:.06em}
.salebar.tape:hover .tape__t{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){ .tape__t{animation:none} }

/* ---- hero: the collage behind the record, brighter ---- */
.fhero__col>i{opacity:.72}
.fhero__col>i:last-child{opacity:.76}
.fhero__col::after{background:radial-gradient(78% 62% at 50% 48%,rgba(6,5,6,.62) 22%,rgba(6,5,6,.22) 62%,rgba(6,5,6,.04))}
.ag__price .mrp{display:block; margin:0 0 1px; font-size:.82em; text-align:right}
.ag__price{text-align:right; line-height:1.15}
.ag__sub .mrp{margin-right:.35em}

/* ---- the sale section: two strips of tape crossing over a spray-painted price ---- */
.salesec{--tape:#D8312A; position:relative; overflow:hidden; background:#0b0809; text-align:center;
  padding:clamp(130px,13vw,180px) var(--gutter) clamp(48px,5vw,80px); isolation:isolate}
.salesec::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.55; mix-blend-mode:screen;
  background:radial-gradient(60% 50% at 50% 55%, rgba(216,49,42,.22), transparent 70%)}
.salesec__tape{position:absolute; left:-10%; right:-10%; z-index:3; pointer-events:none}
.salesec__tape .tape__t{display:inline-flex; background:var(--tape); color:#0b0809; font-family:var(--shout); text-transform:uppercase;
  font-size:clamp(1.1rem,2vw,1.6rem); line-height:2.1; white-space:nowrap; box-shadow:0 10px 30px rgba(0,0,0,.6)}
.salesec__tape--a{top:clamp(34px,5vw,64px); transform:rotate(-4deg)}
.salesec__tape--b{top:clamp(52px,7vw,96px); transform:rotate(3.5deg)}
.salesec__tape--b .tape__t{animation-direction:reverse; animation-duration:44s; filter:brightness(.88)}
.salesec__in{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center}
.salesec__k{margin:0; font-family:var(--shout); text-transform:uppercase; color:var(--tape); letter-spacing:.02em;
  font-size:clamp(1.6rem,3.6vw,3rem); line-height:1}
.salesec__was{margin:14px 0 0; font-family:var(--mono); text-transform:uppercase; letter-spacing:.2em; font-size:.8rem; color:rgba(243,239,232,.6)}
.salesec__was s{text-decoration-color:var(--tape); text-decoration-thickness:2px; color:rgba(243,239,232,.8); font-size:1.15em}
/* the price: sprayed on — soft edges, overspray halo, grain */
.salesec__now{margin:4px 0 34px; font-family:var(--shout); color:var(--tape); line-height:.9; letter-spacing:-.01em;
  font-size:clamp(7rem,21vw,17rem); filter:url(#spray);
  text-shadow:0 0 18px rgba(216,49,42,.55), 0 0 60px rgba(216,49,42,.25)}
.salesec .cta-shop{margin-top:0}
@media(max-width:767px){ .salesec{padding-block:108px 48px} .salesec__now{margin-bottom:6px} }
.salesec__now{display:block; text-decoration:none; margin-bottom:12px}
.salesec .assure--band{margin-top:16px}

/* ================= phones: speed and layout pass ================= */
/* the footer always paints above the product page's fixed album-art backdrop */
.ftr{position:relative; z-index:2; background:var(--ink)}
.pliq--static{background-size:cover; background-position:center; filter:blur(30px) brightness(.32) saturate(.9); transform:scale(1.2)}
.emptyframe{min-width:0; text-align:center; padding:8px; overflow-wrap:anywhere}
@media(max-width:767px){
  /* heavy full-screen effects off: animated grain blended over everything, blurred glass bars */
  #grain,#vignette{display:none}
  .hdr,.hdr.is-solid{backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(12,9,10,.96)}
  .mega,.menu{backdrop-filter:none; -webkit-backdrop-filter:none}
  /* hero: the tiny corner captions crowded the record */
  .fhero__hint,.fhero__hint2{display:none}
  /* bestsellers: one screen, not pinned — swipe or tap the arrows */
  .crate{height:auto}
  .crate__stage{position:relative; height:max(640px, 92svh); min-height:0}
  /* bigger tap targets */
  .ag__add{width:36px; height:36px; margin-left:4px}
  .ag__meta{padding-right:40px}
  .crate__arrow{width:58px; height:58px}
  .footer-news,.ftr__grid>div:last-child{display:none}
}
@media(max-width:767px){
  .stage::after{background:radial-gradient(85% 42% at 50% 50%, rgba(6,5,6,.72), rgba(6,5,6,.2) 75%, transparent)}
}

/* ---- phones, pass 2: nothing that repaints while you scroll ---- */
@media(max-width:767px){
  /* the spray-paint filter is rendered on the CPU in Safari: plain glowing type on phones */
  .salesec__now{filter:none; text-shadow:0 0 22px rgba(216,49,42,.45)}
  .salesec::before{mix-blend-mode:normal; opacity:.35}
  .salesec__tape .tape__t{box-shadow:none}
  /* the fixed groove-ring layer and its light/dark flip */
  #field{display:none}
}

/* ================= phones, pass 3 ================= */
/* taps never trigger double-tap zoom */
html{touch-action:manipulation; -webkit-text-size-adjust:100%}
/* fixed card shapes: the image fits inside, rows line up */
.ag__media>img,.ag__media .frame img,.ag__media .polaroid img{max-width:100%; max-height:100%; object-fit:contain}
@media(max-width:767px){
  /* iOS zooms into any field under 16px when tapped */
  input,select,textarea{font-size:16px !important}
  /* sale section: no blurred glow on the giant price, no filters or shadows on the moving tapes */
  .salesec__now{text-shadow:none}
  .salesec__tape .tape__t{filter:none !important; box-shadow:none; font-size:1.05rem}
  .salesec__tape--b .tape__t{background:#B8261F}
  .salesec__tape{contain:paint; will-change:transform}
  .salesec::before{display:none}
  /* records: lighter shadows when there are dozens on one page */
  :root{--sh-record:0 10px 22px rgba(0,0,0,.55)}
  /* the four size tabs fit the screen */
  .stabs{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); overflow:visible; margin-inline:0; padding-inline:0}
  .stab{min-width:0; padding:9px 8px 8px}
  .stab__name{font-size:.95rem}
  .stab__meta{font-size:.52rem; letter-spacing:.06em}
}
/* touch screens: hover lifts would stick after a tap */
@media(hover:none){
  .ag__head:hover,.card:hover .card__media>*,.ag__head:hover .ag__media--stack::before{transform:none}
  .ag__head:hover .ag__media,.card:hover .card__media{box-shadow:var(--sh-card)}
}

/* phone hero: the photographed record + album-art label, no WebGL */
.fdisc.is-css .fdisc__spin{background:var(--disc-img, #070707) center/100% 100% no-repeat}
.fdisc.is-css .fdisc__gr,.fdisc.is-css .fdisc__gr2,.fdisc.is-css .fdisc__rule,.fdisc.is-css .fdisc__gloss,.fdisc.is-css .fdisc__sheen{display:none}
.fdisc.is-css .fdisc__lab{width:37%; background-size:cover; background-position:center; transition:background-image .5s}
.fdisc.is-css .fdisc__lab::after{opacity:.35}

/* phone hero: a real-size spindle hole */
.fdisc.is-css .fdisc__hole{width:3.4%}
/* phone bestsellers: the crate layout with CSS records */
.crate--css{height:auto}
.crate--css .crate__stage{position:relative; height:max(660px, 94svh); min-height:0}
.crate--css .crate__bg>i{opacity:.34}
.ccss{position:absolute; inset:0; z-index:2}
.ccss__rec{position:absolute; left:50%; top:54%; width:min(78vw, 46svh); aspect-ratio:1; display:block;
  transition:transform .6s cubic-bezier(.3,1.3,.5,1), opacity .45s; will-change:transform}
.ccss__rec .record{--size:100% !important; width:100%; height:100%}
.ccss__rec.is-front .record__disc{animation:ctaSpin 9s linear infinite}
.ccss__rec.is-front::after{content:""; position:absolute; inset:-3%; border-radius:50%; border:2px solid rgba(192,53,63,.7); pointer-events:none}
@media(prefers-reduced-motion:reduce){ .ccss__rec{transition:none} .ccss__rec.is-front .record__disc{animation:none} }
.crate__count{white-space:nowrap}
.crate--css .crate__fv{white-space:nowrap}
.crate--css .crate__facts{gap:22px}
/* hero: no callout labels on the record; on phones the tagline sits under the record */
.annot{display:none}
.fhero__tagm{display:none}
@media(max-width:767px){
  .fdisc__tag{display:none}
  .fhero__tagm{display:block; position:absolute; z-index:7; left:var(--gutter); right:var(--gutter); margin:0; text-align:center;
    bottom:calc(clamp(44px, 6svh, 72px) + env(safe-area-inset-bottom, 0px) + 92px); color:var(--cream)}
  .fhero__tagm .tagline{font-size:1.2rem; line-height:1.3}
}
.ag__media .ag__photo{position:absolute; inset:0; width:100%; height:100%; max-width:none; max-height:none; object-fit:cover}
.ag__media:has(.ag__photo){padding:0}

/* ================= the rest of the wall: format slider ================= */
.fmts{position:relative; overflow:hidden; isolation:isolate; background:#0d0b0c; min-height:min(100svh, 880px);
  display:flex; align-items:center; justify-content:center; padding:clamp(70px,9vw,110px) 0; text-align:center; color:var(--cream)}
.fmts__bgs{position:absolute; inset:0; z-index:-1}
.fmts__bg{position:absolute; inset:-4%; width:108%; height:108%; object-fit:cover; opacity:0; transform:scale(1.06);
  filter:blur(9px) brightness(.46) saturate(1.05); transition:opacity .9s ease, transform 5s ease}
.fmts__bg.is-on{opacity:1; transform:scale(1)}
.fmts::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(70% 60% at 50% 50%, transparent, rgba(8,6,7,.55)), linear-gradient(to bottom, #0d0b0c, transparent 14%, transparent 86%, #0d0b0c)}
.fmts__plus{position:absolute; width:14px; height:14px; z-index:2}
.fmts__plus::before,.fmts__plus::after{content:""; position:absolute; background:var(--ember)}
.fmts__plus::before{left:6px; top:0; width:2px; height:14px} .fmts__plus::after{top:6px; left:0; width:14px; height:2px}
.fmts__plus--tl{left:var(--gutter); top:28px} .fmts__plus--tr{right:var(--gutter); top:28px}
.fmts__plus--bl{left:var(--gutter); bottom:28px} .fmts__plus--br{right:var(--gutter); bottom:28px}
.fmts__in{position:relative; width:100%}
.fmts__cap{color:rgba(243,239,232,.7); letter-spacing:.22em}
.fmts__titles,.fmts__caps{display:grid}
.fmts__t,.fmts__c{grid-area:1/1; opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .7s cubic-bezier(.2,.8,.2,1); pointer-events:none}
.fmts__t.is-on,.fmts__c.is-on{opacity:1; transform:none; pointer-events:auto}
.fmts__t{margin:10px 0 clamp(26px,3.4vw,44px); font-family:var(--shout); font-weight:400; text-transform:uppercase; line-height:.9;
  font-size:clamp(3.2rem,11vw,9.5rem); letter-spacing:-.01em; color:var(--cream); text-shadow:0 6px 40px rgba(0,0,0,.45)}
.fmts__strip{position:relative; height:clamp(130px,13vw,190px)}
.fmts__track{display:flex; gap:clamp(14px,2vw,28px); height:100%; transition:transform .65s cubic-bezier(.3,.9,.25,1); will-change:transform}
.fmts__th{all:unset; box-sizing:border-box; flex:none; height:100%; aspect-ratio:16/10; border-radius:6px; overflow:hidden; cursor:pointer;
  opacity:.38; filter:saturate(.6); transform:scale(.9); transition:opacity .5s, transform .6s cubic-bezier(.3,.9,.25,1), filter .5s}
.fmts__th img{width:100%; height:100%; object-fit:cover; display:block}
.fmts__th.is-on{opacity:1; filter:none; transform:none; box-shadow:0 0 0 1.5px var(--cream), 0 18px 40px rgba(0,0,0,.5)}
.fmts__th:hover{opacity:.75}
.fmts__th:focus-visible{outline:2px solid var(--ember); outline-offset:4px}
/* the viewfinder brackets around the centre thumbnail */
.fmts__frame{position:absolute; left:50%; top:50%; height:calc(100% + 26px); aspect-ratio:16/10; transform:translate(-50%,-50%); pointer-events:none;
  --c:var(--ember); background:
    linear-gradient(var(--c),var(--c)) 0 0/18px 2px, linear-gradient(var(--c),var(--c)) 0 0/2px 18px,
    linear-gradient(var(--c),var(--c)) 100% 0/18px 2px, linear-gradient(var(--c),var(--c)) 100% 0/2px 18px,
    linear-gradient(var(--c),var(--c)) 0 100%/18px 2px, linear-gradient(var(--c),var(--c)) 0 100%/2px 18px,
    linear-gradient(var(--c),var(--c)) 100% 100%/18px 2px, linear-gradient(var(--c),var(--c)) 100% 100%/2px 18px; background-repeat:no-repeat;
  margin-left:0; width:auto}
.fmts__frame{width:calc((clamp(130px,13vw,190px)) * 1.6 + 26px)}
.fmts__caps{margin-top:clamp(30px,3.6vw,48px)}
.fmts__c p{margin:0 auto; max-width:34ch; font-family:var(--shout); text-transform:uppercase; letter-spacing:.02em; line-height:1.25;
  font-size:clamp(1rem,1.5vw,1.3rem); color:rgba(243,239,232,.92)}
.fmts__go{margin-top:20px}
@media(max-width:767px){
  .fmts{min-height:0; padding:64px 0 70px}
  .fmts__bg{filter:blur(6px) brightness(.45)}
  .fmts__strip{height:118px}
  .fmts__frame{width:calc(118px * 1.6 + 22px); height:calc(100% + 22px)}
  .fmts__t{font-size:clamp(2.8rem,15vw,4.4rem)}
  .fmts__plus--tl,.fmts__plus--tr{top:18px} .fmts__plus--bl,.fmts__plus--br{bottom:18px}
}
@media(prefers-reduced-motion:reduce){ .fmts__bg,.fmts__t,.fmts__c,.fmts__track,.fmts__th{transition:none} }

/* designs as thumbnails: portrait cards, poster fills the slide background */
.fmts__th{aspect-ratio:3/4}
.fmts__th img{object-fit:cover}
.fmts__frame{aspect-ratio:3/4; width:calc(clamp(170px,16vw,240px) * .75 + 26px)}
.fmts__strip{height:clamp(170px,16vw,240px)}
.fmts__bg{filter:blur(22px) brightness(.42) saturate(1.1)}
.fmts__t{font-size:clamp(2.6rem,8.4vw,7.2rem); max-width:16ch; margin-inline:auto}
@media(max-width:767px){
  .fmts__strip{height:180px}
  .fmts__frame{width:calc(180px * .75 + 22px); height:calc(100% + 22px)}
  .fmts__t{font-size:clamp(2.2rem,11vw,3.4rem)}
}
.fmts{overflow:clip}
.fmts__strip{overflow:clip; overflow-clip-margin:30px}
.fmts__bg{filter:blur(18px) brightness(.58) saturate(1.15)}

/* real-size spindle holes (a 7mm hole in a 30cm record) */
.record__spindle{left:48.9%; top:48.9%; width:2.2%; height:2.2%}
.fdisc.is-css .fdisc__hole{width:2.4%}
/* slider arrows */
.fmts__arr{position:absolute; top:50%; z-index:3; width:52px; height:52px; margin-top:-26px; border-radius:50%; border:0; cursor:pointer;
  display:grid; place-items:center; background:var(--cream); color:#0d0b0c; box-shadow:0 10px 30px rgba(0,0,0,.45); transition:background .2s, color .2s, transform .2s}
.fmts__arr svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.fmts__arr:hover{background:var(--oxblood); color:var(--cream); transform:scale(1.06)}
.fmts__arr:focus-visible{outline:2px solid var(--ember); outline-offset:3px}
.fmts__arr--prev{left:calc(50% - clamp(170px,16vw,240px) * .375 - 13px - 78px)}
.fmts__arr--next{right:calc(50% - clamp(170px,16vw,240px) * .375 - 13px - 78px)}
@media(max-width:767px){
  .fmts__arr{width:44px; height:44px; margin-top:-22px}
  .fmts__arr--prev{left:8px} .fmts__arr--next{right:8px}
}
.stage .cta-shop{margin-top:6px}

/* hero record: sideways drags spin it on touch screens, vertical drags still scroll */
.fhero .fdisc{touch-action:pan-y}
@media(hover:none){ .card:hover{transform:none} .card:hover .card__media{box-shadow:none} }

/* ============================================================
   Nov 2026 — the sell-through pass
   Reassurance, a faster way to buy, phones first. Everything here
   states only what src/site.json says is true.
   ============================================================ */

/* ---- before the app boots: the mark on black, painted by the HTML itself ---- */
#boot{display:none}
.js #boot{position:fixed; inset:0; z-index:989; background:#050405; display:grid; place-items:center;
  transition:opacity 380ms var(--e-out-expo)}
.js #boot img{width:min(340px,54vw); height:auto}
#boot.is-out{opacity:0; pointer-events:none}
#pre.pre--warm .pre__mark{opacity:1; animation:none}   /* the mark is already on screen; don't fade it in twice */

/* ---- the page as plain HTML, for anything that reads it without running scripts ---- */
#pf-seo{max-width:880px; margin:0 auto; padding:48px 24px 64px; line-height:1.7}
#pf-seo a{color:var(--rose); text-decoration:underline; text-underline-offset:3px}
#pf-seo h1{font-family:var(--display); font-weight:500; font-size:clamp(1.8rem,5vw,3rem); line-height:1.1; margin:.5em 0}
#pf-seo h2{font-family:var(--display); font-weight:500; font-size:1.4rem; margin:1.6em 0 .4em}
#pf-seo h3{font-size:1rem; margin:1.2em 0 .2em}
#pf-seo ul{padding-left:1.2em}
#pf-seo nav{margin-top:40px; padding-top:20px; border-top:1px solid var(--border)}
.js #pf-seo{display:none}

/* ---- small line icons ---- */
.ico{width:14px; height:14px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}

/* ---- reassurance: what's true about buying here, said once, near the button ---- */
.assure{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:9px 18px; grid-template-columns:repeat(2,minmax(0,1fr));
  font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(243,239,232,.74)}
.assure li{display:flex; align-items:flex-start; gap:8px; line-height:1.45}
.assure .ico{color:var(--ember); margin-top:1px}
.assure--band{margin-top:30px; display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px; max-width:860px}
@media(max-width:767px){.assure--band{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 14px; text-align:left; padding-inline:var(--gutter); width:100%}}
.payline{display:flex; align-items:center; gap:8px; margin:14px 0 0; line-height:1.5}
.payline .ico{color:var(--muted)}
.receipt .ok{color:var(--success)}

/* ---- phones: the home page's bestsellers, and a visible add button on every card ---- */
.best{padding-block:46px 54px}
.best__h{margin:0 0 clamp(22px,3vw,40px); font-family:var(--shout); font-weight:400; text-transform:uppercase; line-height:.9; letter-spacing:-.01em;
  font-size:clamp(3rem,13vw,7.2rem); color:var(--cream); text-align:center}
.best__h i{font-style:normal; color:var(--ember)}
@media(min-width:768px){.best{padding-block:96px 104px}}
.best .cap{color:var(--ember)}
.fhero__subm{display:block; margin-top:10px; font-family:var(--mono); font-size:.6rem; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(243,239,232,.74)}
@media(hover:none){
  .card__add{transform:none; left:auto; right:8px; bottom:8px; width:38px; height:38px; border-radius:50%;
    font-size:0; letter-spacing:0; box-shadow:var(--sh-card)}
  .card__add::before{content:"+"; font-size:1.2rem; line-height:1; font-family:var(--body)}
  .card__add:active{transform:scale(.9)}
}

/* ---- catalogue: an artist with a single piece is the product itself ---- */
.ag--solo .ag__head{text-decoration:none; color:inherit}
.ag__alb{font-size:.86rem; line-height:1.3; color:rgba(243,239,232,.8)}
.ag__quick{position:absolute; right:0; bottom:4px; width:32px; height:32px; border-radius:50%; border:1px solid var(--border-2);
  background:none; color:var(--cream); cursor:pointer; font-size:1.05rem; line-height:1; display:grid; place-items:center;
  transition:background .2s, border-color .2s, transform .28s var(--e-spring)}
.ag__quick:hover{background:var(--oxblood); border-color:var(--oxblood)}
.ag__quick:active{transform:scale(.9)}
.ag__quick:focus-visible{outline:2px solid var(--ember); outline-offset:2px}
@media(max-width:767px){.ag__quick{width:38px; height:38px}}

/* ---- product page ---- */
.pdp__top{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:24px}
.pdp__share{all:unset; cursor:pointer; color:var(--muted); padding:6px 0; white-space:nowrap; transition:color .2s}
.pdp__share:hover{color:var(--cream)}
.pdp__share:focus-visible{outline:2px solid var(--ember); outline-offset:3px}
.pdp__blurb{margin:14px 0 0; color:rgba(243,239,232,.8); font-size:.98rem; line-height:1.6; max-width:54ch}
.pdp__buy{width:100%; margin-top:10px}
.btn.is-done,.btn.is-done:hover{background:var(--success)}

/* ---- the crate drawer: one add-on that belongs with what's in it ---- */
.addon{display:flex; align-items:center; gap:12px; padding:10px 12px; margin-bottom:14px; border:1px dashed var(--border-2);
  background:rgba(243,239,232,.025)}
.addon img{width:40px; height:40px; object-fit:contain; flex:none; background:var(--elevated)}
.addon__t{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; font-family:var(--display); font-size:.92rem; line-height:1.2}
.addon__t span:last-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.addon__b{flex:none; height:34px; padding:0 14px; border-radius:999px; border:1px solid var(--border-2); background:none;
  color:var(--cream); font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; cursor:pointer;
  white-space:nowrap; transition:background .2s, border-color .2s}
.addon__b:hover,.addon__b:active{background:var(--oxblood); border-color:var(--oxblood)}

/* ---- forms that say what they do ---- */
.formnote{margin:16px 0 0; padding:14px 16px; border:1px solid var(--border-2); background:var(--elevated); font-size:.95rem; line-height:1.5; max-width:560px}
.formnote a,.acc .panel__in a,.policy a{color:var(--ember)}
.btnrow{display:flex; flex-wrap:wrap; gap:10px}
.customform{margin-top:40px; display:grid; gap:18px; max-width:560px}
.frow{display:grid; gap:18px; grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media(max-width:560px){.frow{grid-template-columns:minmax(0,1fr)}}
.custom-summary{background:var(--elevated); border:1px solid var(--border); border-radius:3px; padding:16px 20px;
  display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:4px}
.reach{display:grid; gap:10px; grid-template-columns:repeat(3,minmax(0,1fr)); margin-bottom:22px}
.reach__a{display:flex; flex-direction:column; gap:6px; padding:16px 18px; border:1px solid var(--border-2);
  font-family:var(--display); font-size:1.05rem; line-height:1.2; overflow-wrap:anywhere;
  transition:border-color .2s, transform .28s var(--e-spring)}
.reach__a:hover{border-color:var(--ember); transform:translateY(-2px)}
.reach__a:active{transform:scale(.985)}
@media(max-width:640px){.reach{grid-template-columns:minmax(0,1fr)}}

/* ---- footer / the list ---- */
.listform{display:flex; gap:8px; flex-wrap:wrap}
.listform input{flex:1; min-width:150px; background:var(--elevated); border:1px solid var(--border); padding:12px;
  border-radius:2px; color:var(--cream); font-size:16px}
.listform--lg{justify-content:center; max-width:460px; width:100%}
.dropcta{width:100%; display:flex; flex-direction:column; align-items:center}
.ftr a.btn{display:inline-flex; padding:0 22px; color:var(--cream); font-size:.72rem}
.ftr__facts{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:6px}
.ftr__base{display:flex; flex-wrap:wrap; gap:14px 22px; justify-content:space-between; align-items:center;
  margin-top:44px; padding-top:20px; border-top:1px solid var(--border)}
.ftr__base a{display:inline; padding:0; font-size:inherit}
.ftr__legal{display:flex; gap:18px}

/* ---------- pages written for search (/vinyl-record-wall-decor, /artist/…): the words under the grid */
.lcopy{margin-top:88px; padding-top:40px; border-top:1px solid var(--border)}
.lcopy__grid{display:grid; gap:36px; grid-template-columns:minmax(0,1fr)}
@media(min-width:768px){.lcopy__grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:48px}}
.lcopy__grid h2{margin:0 0 12px}
.lcopy p{margin:0; line-height:1.65; max-width:60ch}
.lcopy p a, .lcopy__faq a{color:var(--cream); text-decoration:underline; text-underline-offset:3px}
.lcopy__faq{margin-top:56px; display:grid; gap:24px; max-width:72ch}
.lcopy__faq h2{letter-spacing:.18em; text-transform:uppercase; margin:0}
.lcopy__faq h3{margin:0 0 6px; font-weight:500}
.lcopy__more{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:56px; color:var(--muted)}
.lcopy__more a, .ftr__more a{color:var(--muted)}
.lcopy__more a:hover, .ftr__more a:hover{color:var(--cream)}
.ftr__more{display:flex; flex-wrap:wrap; gap:6px 20px; margin-top:40px}
.ftr .ftr__more a{display:inline; padding:0; font-size:inherit}
/* iPhone: no double-tap zoom anywhere (touch-action isn't inherited in every Safari, so set it on everything) */
html,body,*{touch-action:manipulation}
.fhero .fdisc{touch-action:pan-y}
.fmts,.crate__stage,.cratem__row{touch-action:pan-x pan-y}
/* product backdrop: stay exactly screen-sized (iOS Safari let the oversized blurred layer widen the page, so swipes panned/zoomed it) */
.pliq--static{transform:none; filter:none; overflow:hidden; background-size:0 0; background-repeat:no-repeat}
.pliq--static::before{content:""; position:absolute; inset:0; background-image:inherit; background-size:cover; background-position:center;
  filter:blur(30px) brightness(.32) saturate(.9); transform:scale(1.2)}
.pliq{max-width:100vw; overflow:hidden}
html{overflow-x:hidden}

/* ---------- artist cards that open the album's page ---------- */
.ag--go .ag__head{text-decoration:none; color:inherit}
.ag__chev--go::before{width:7px; height:7px; transform:translateX(-2px) rotate(-45deg)}
.ag--go .ag__head:hover .ag__chev{background:var(--oxblood); border-color:var(--oxblood); transform:translateX(3px)}

/* ---------- product page: choose the album ---------- */
.apick{min-width:0}
.apick__k{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin:0 0 10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.apick__k b{font-weight:500; color:var(--ember)}
.apick__row{display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  margin-inline:calc(var(--gutter, 16px) * -1); padding:2px var(--gutter, 16px) 4px}
.apick__row::-webkit-scrollbar{display:none}
.apick__a{flex:none; display:flex; align-items:center; gap:10px; min-height:60px; max-width:230px; padding:6px 16px 6px 6px; scroll-snap-align:center;
  border:1px solid var(--border-2); border-radius:999px; background:rgba(11,10,11,.55); color:var(--cream); text-decoration:none;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:border-color .25s, background .25s, transform .35s var(--e-spring)}
.apick__a:hover{border-color:var(--ember); transform:translateY(-2px)}
.apick__a:active{transform:scale(.97)}
.apick__a:focus-visible{outline:2px solid var(--ember); outline-offset:3px}
.apick__a.is-on{border-color:var(--ember); background:rgba(142,31,43,.34); box-shadow:0 0 0 1px var(--ember) inset}
.apick__th{flex:none; width:46px; height:46px; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:var(--elevated)}
.apick__th img{width:100%; height:100%; object-fit:cover}
.apick__th--rec{background:var(--disc-img, #0b0a0b) center/100% 100%; box-shadow:0 2px 8px rgba(0,0,0,.5)}
.apick__th--rec img{width:50%; height:50%; border-radius:50%}
.apick__a.is-on .apick__th--rec{animation:ctaSpin 7s linear infinite}
.apick__n{display:flex; flex-direction:column; gap:2px; min-width:0; font-family:var(--display); font-size:.98rem; line-height:1.15; overflow-wrap:anywhere}
.apick__f{font-family:var(--mono); font-size:.52rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
@media(min-width:1024px){
  .pdp--pick{grid-template-areas:"media pick" "media info"; grid-template-rows:auto 1fr; row-gap:26px}
  .pdp--pick .apick{grid-area:pick}
  .pdp--pick .pdp__media{grid-area:media}
  .pdp--pick .pdp__info{grid-area:info}
  .apick__row{flex-wrap:wrap; overflow:visible; margin-inline:0; padding:0}
}
@media(max-width:1023px){ .pdp--pick{gap:20px} .pdp--pick .pdp__info{margin-top:8px} }
@media(prefers-reduced-motion:reduce){ .apick__a{transition:none} .apick__a.is-on .apick__th--rec{animation:none} }

/* ============ bundles + build your wall ============ */
.menu__tag{font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; color:var(--rose); vertical-align:middle; margin-left:.5em; text-transform:uppercase}
.shout-h{font-family:var(--shout); font-weight:400; text-transform:uppercase; line-height:.9; letter-spacing:.01em; font-size:clamp(3.2rem,11vw,8.4rem); margin:10px 0 0}
.shout-h--sm{font-size:clamp(2.2rem,6.4vw,4.6rem); margin:0 0 22px}
.receipt .bundle-row{color:var(--success)}
.bnudge{display:flex; gap:8px; align-items:center; justify-content:space-between; margin:6px 0 2px; padding:10px 12px; border:1px dashed rgba(224,166,160,.45);
  border-radius:10px; color:var(--rose); font-size:.82rem; text-decoration:none; line-height:1.3; transition:background var(--d-std) var(--e-ui)}
.bnudge b{font-weight:600; color:var(--cream)}
.bnudge:hover{background:rgba(224,166,160,.08)}

/* mini walls: pieces as they'd hang */
.mwall{display:flex; align-items:center; justify-content:center; gap:6%; width:100%; height:100%; padding:10% 8%}
.mwall__i{display:block; flex:0 1 auto; transition:transform var(--d-entrance) var(--e-spring)}
.mwall__i .record{--size:100%!important; width:100%; height:auto; aspect-ratio:1}
.mwall__i--vinyl{width:31%}
.mwall__i--poster-a3{width:27%}
.mwall__i--poster-a5{width:17%}
.mwall__i--polaroid{width:15%}
.mwall__i .frame,.mwall__i .polaroid{width:100%; height:auto; box-shadow:0 8px 20px rgba(0,0,0,.35)}
.mwall__i--polaroid:nth-child(odd){transform:rotate(-4deg)} .mwall__i--polaroid:nth-child(even){transform:rotate(3deg) translateY(8%)}
.mwall--pair .mwall__i--vinyl{width:40%} .mwall--pair .mwall__i--poster-a3{width:30%}
.mwall--a5x5{flex-wrap:wrap; gap:4%} .mwall--pol10{flex-wrap:wrap; gap:3%}
.bcard:hover .mwall__i,.wset:hover .mwall__i{transform:translateY(-4px)}
.bcard:hover .mwall__i--polaroid:nth-child(odd){transform:rotate(-6deg) translateY(-4px)}

/* bundles page */
.bgrid{display:grid; gap:18px; margin-top:40px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.bcard{position:relative; display:flex; flex-direction:column; gap:8px; padding:14px 14px 20px; background:var(--elevated); border:1px solid var(--border); border-radius:18px}
.bcard__pic{display:block; aspect-ratio:4/3; border-radius:12px; background:#E7DFD2; overflow:hidden; margin-bottom:8px}
.bcard:nth-child(2) .bcard__pic{background:#A7B19A} .bcard:nth-child(3) .bcard__pic{background:#B5704F} .bcard:nth-child(4) .bcard__pic{background:#2a2425}
.bcard__save{position:absolute; top:24px; left:24px; background:var(--ember); color:#fff; padding:6px 10px; border-radius:999px; letter-spacing:.12em}
.bcard__h{font-family:var(--shout); font-weight:400; text-transform:uppercase; font-size:1.7rem; line-height:1; margin:4px 0 0}
.bcard__p{margin:0; display:flex; align-items:baseline; gap:10px}
.bcard__now{font-size:1.5rem}
.bcard__blurb{font-size:.9rem; line-height:1.45; margin:0 0 10px; flex:1}
.bcard .cta-shop{align-self:flex-start}
.bcta{margin:64px 0 24px; text-align:center; display:grid; justify-items:center; gap:20px}

/* the strip on the home page */
.bstrip{padding:44px 0 40px; background:var(--ink); border-block:1px solid var(--border)}
.bstrip__hd{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:16px}
.bstrip__hd a{color:var(--muted)}
.bstrip__h{font-family:var(--shout); font-weight:400; text-transform:uppercase; font-size:clamp(2rem,5vw,3.4rem); margin:0; line-height:1}
.bstrip__row{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.bstrip__row::-webkit-scrollbar{display:none}
.bchip{flex:0 0 auto; scroll-snap-align:start; display:grid; gap:6px; padding:16px 20px; min-width:200px; border-radius:14px; text-decoration:none; color:var(--cream);
  background:var(--elevated); border:1px solid var(--border-2); transition:transform var(--d-std) var(--e-spring), border-color var(--d-std)}
.bchip:hover{transform:translateY(-3px); border-color:var(--rose)}
.bchip:active{transform:scale(.97)}
.bchip__n{font-family:var(--shout); text-transform:uppercase; font-size:1.2rem; letter-spacing:.02em}
.bchip__p{font-size:.85rem; color:var(--rose)} .bchip__p s{color:var(--muted); margin-left:4px}
.bchip--wall{background:var(--oxblood); border-color:transparent} .bchip--wall .bchip__p{color:var(--cream)}

/* product page */
button.pdpb{width:100%; font:inherit; text-align:left; cursor:pointer}
.pdpb{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin:14px 0 0; padding:10px 14px; border-radius:12px; text-decoration:none; color:var(--cream);
  background:rgba(142,31,43,.18); border:1px solid rgba(192,53,63,.45); font-size:.9rem; transition:background var(--d-std)}
.pdpb:hover{background:rgba(142,31,43,.3)}
.pdpb__k{background:var(--ember); color:#fff; padding:3px 8px; border-radius:999px; letter-spacing:.14em}
.pdpb__s{margin-left:auto; color:var(--rose)}

/* ready-made sets (bundles page) */
.bsets{margin-top:72px}
.bw__sets{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.wset{display:flex; flex-direction:column; background:var(--elevated); border:1px solid var(--border); border-radius:18px; overflow:hidden}
.wset__wall{aspect-ratio:16/10; background:var(--wall); position:relative}
.wset__wall::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.12)); pointer-events:none}
.wset__meta{padding:16px 18px 20px; display:grid; gap:6px}
.wset__h{font-family:var(--shout); font-weight:400; text-transform:uppercase; font-size:1.6rem; margin:0; line-height:1}
.wset__p{font-size:1.25rem; margin:4px 0 8px} .wset__p s{font-size:.9rem; margin-left:6px}
.wset__add{width:100%}

/* build your wall */
.bw__build{margin-top:34px; padding-bottom:40px}
.bw__ctrls{display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center; justify-content:space-between; margin-bottom:16px}
.bw__adds{display:flex; gap:8px; flex-wrap:wrap}
.bw__addb{display:inline-flex; align-items:center; gap:8px; padding:10px 14px 10px 10px; border-radius:999px; border:1px solid var(--border-2); background:var(--elevated);
  color:var(--cream); font:500 .84rem var(--body); cursor:pointer; transition:transform var(--d-std) var(--e-spring), border-color var(--d-std), background var(--d-std)}
.bw__addb b{display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--oxblood); font:400 1rem/1 var(--body)}
.bw__addb span{display:inline-block} .bw__addb span::first-letter{text-transform:uppercase}
.bw__addb i{font-style:normal; color:var(--muted); font-size:.74rem}
.bw__addb:hover{transform:translateY(-2px); border-color:var(--rose); background:var(--elevated-2)}
.bw__addb:active{transform:scale(.95)}
.bw__cols{display:flex; gap:10px}
.bw__cols button{width:30px; height:30px; border-radius:50%; background:var(--c); border:2px solid var(--border-2); cursor:pointer; transition:transform var(--d-std) var(--e-spring)}
.bw__cols button.is-on{border-color:var(--cream); transform:scale(1.15)}

/* the room: a lit wall, skirting, floor and a sideboard for scale */
.room{--wall:#E9E2D6; position:relative; aspect-ratio:16/9; max-height:78vh; width:100%; border-radius:18px; overflow:hidden; background:var(--wall);
  transition:background .5s var(--e-ui); isolation:isolate; user-select:none; -webkit-user-select:none}
.room__wall{position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 18% 8%, rgba(255,252,244,.34), transparent 55%),
    radial-gradient(90% 80% at 100% 100%, rgba(0,0,0,.26), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.10))}
.room__wall::after{content:""; position:absolute; inset:0; opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E")}
.room__hang{position:absolute; left:3%; right:3%; top:4%; bottom:30%; z-index:2}
/* sunlight from a window off to the left; it falls across the pieces too */
.room__light{position:absolute; z-index:3; pointer-events:none; left:-6%; top:-12%; width:46%; height:92%; transform:skewX(-20deg); opacity:.55; mix-blend-mode:soft-light; filter:blur(7px);
  background:
    linear-gradient(180deg, transparent 0 47%, rgba(60,40,20,.5) 47% 50%, transparent 50%),
    repeating-linear-gradient(90deg, rgba(255,246,222,.95) 0 46%, rgba(60,40,20,.4) 46% 50%);
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent); mask-image:linear-gradient(180deg,#000 55%,transparent)}
.room--dark .room__light{opacity:.3}
.room__skirt{position:absolute; left:0; right:0; bottom:14%; height:3.2%; z-index:1; background:linear-gradient(180deg,#fbf8f2,#e4ddd0 70%,#bdb5a6);
  box-shadow:0 -1px 0 rgba(0,0,0,.12), 0 -8px 14px rgba(0,0,0,.06)}
.room__floor{position:absolute; left:0; right:0; bottom:0; height:14%; z-index:1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.38), transparent 45%),
    repeating-linear-gradient(90deg, transparent 0 11.9%, rgba(0,0,0,.28) 11.9% 12%),
    linear-gradient(90deg,#8a5f3c,#a77a50 30%,#946a43 62%,#b0835a)}
.room__side{position:absolute; z-index:4; left:50%; bottom:7%; width:40%; height:17%; transform:translateX(-50%); display:flex; gap:1.5%; padding:2.2% 1.5% 1.6%;
  border-radius:4px; background:linear-gradient(180deg,#b98a5c,#8e623c); box-shadow:0 2px 0 #caa074 inset, 0 30px 26px -14px rgba(0,0,0,.55), 14px -6px 30px rgba(0,0,0,.18)}
.room__side::before,.room__side::after{content:""; position:absolute; top:100%; width:1.6%; height:36%; background:#3a2a1c}
.room__side::before{left:5%} .room__side::after{right:5%}
.room__side span{flex:1; border-radius:2px; background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(0,0,0,.14)); box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)}
.room__vase{position:absolute; left:12%; bottom:100%; width:7%; aspect-ratio:.62; border-radius:44% 44% 30% 30%/60% 60% 26% 26%; background:linear-gradient(100deg,#f4efe6,#c9c0b0); box-shadow:6px 0 10px rgba(0,0,0,.18)}
.room__books{position:absolute; right:14%; bottom:100%; width:16%; height:16%; background:linear-gradient(180deg,#8E1F2B 0 34%,#ede7dd 34% 66%,#1f1b1c 66%); border-radius:1px; box-shadow:5px 0 8px rgba(0,0,0,.2)}
.room__empty{position:absolute; z-index:5; left:0; right:0; top:22%; display:grid; justify-items:center; gap:6px; text-align:center; color:rgba(20,16,14,.62); font-size:.92rem; padding:0 16px}
.room__empty[hidden]{display:none}
.room__empty b{font:400 clamp(1.5rem,3.6vw,2.6rem)/1 var(--shout); text-transform:uppercase; color:rgba(20,16,14,.78)}
.room__surprise{border:0; background:none; padding:4px 2px; font:inherit; font-weight:600; color:var(--oxblood); text-decoration:underline; text-underline-offset:4px; cursor:pointer}
.room--dark .room__empty{color:rgba(255,255,255,.66)} .room--dark .room__empty b{color:#fff} .room--dark .room__surprise{color:var(--rose)}

/* a piece on the wall */
.wp{position:absolute; transform:translate(-50%,-50%) rotate(var(--r,0deg)); cursor:grab; touch-action:none; -webkit-tap-highlight-color:transparent; outline:0;
  transition:filter .2s}
.wp img{-webkit-user-drag:none; -webkit-touch-callout:none; pointer-events:none}
.wp__in{position:absolute; inset:0; transition:transform .28s var(--e-spring)}
.wp:hover .wp__in{transform:translateY(-2px) scale(1.015)}
.wp.is-drag{cursor:grabbing; z-index:50}
.wp.is-drag .wp__in{transform:scale(1.06) translateY(-6px)}
.wp.is-sel{z-index:40}
.wp.is-sel::after{content:""; position:absolute; inset:-7px; border:2px dashed rgba(142,31,43,.85); border-radius:6px; pointer-events:none}
.wp--vinyl.is-sel::after{border-radius:50%}
.room--dark .wp.is-sel::after{border-color:var(--rose)}
/* record: a thick disc standing a few millimetres off the wall */
.wp--vinyl .wp__in::before{content:""; position:absolute; inset:1%; border-radius:50%; background:#000;
  box-shadow:2px 3px 2px rgba(0,0,0,.5), 7px 12px 12px rgba(0,0,0,.38), 18px 30px 34px rgba(0,0,0,.26); transition:box-shadow .28s}
.wp--vinyl.is-drag .wp__in::before{box-shadow:6px 10px 10px rgba(0,0,0,.3), 30px 52px 50px rgba(0,0,0,.3)}
.wp--vinyl .record{--size:100%!important; width:100%; height:100%; position:absolute; inset:0}
.wp--vinyl .wp__in::after{content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none; z-index:3;
  background:linear-gradient(135deg, rgba(255,255,255,.20), transparent 32%, transparent 68%, rgba(0,0,0,.28));
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.22), inset -1px -2px 1px rgba(0,0,0,.6)}
/* paper: lit from the top left, corners lifting a little off the wall */
.wp__paper{position:absolute; inset:0; display:block; background:#f4efe6; z-index:1;
  box-shadow:1px 1px 0 rgba(0,0,0,.18), 4px 6px 8px rgba(0,0,0,.26), 12px 20px 26px rgba(0,0,0,.16); transition:box-shadow .28s}
.wp__paper img{display:block; width:100%; height:100%; object-fit:cover; pointer-events:none}
.wp__paper::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(118deg, rgba(255,255,255,.22), transparent 30%, transparent 62%, rgba(0,0,0,.14));
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.4), inset -1px -1px 0 rgba(0,0,0,.18)}
.wp__in::before{content:""; position:absolute; z-index:0; left:6%; right:2%; bottom:3%; height:18%; transform:rotate(2.2deg) translateY(30%); border-radius:40%;
  box-shadow:10px 14px 16px rgba(0,0,0,.42)}
.wp--vinyl .wp__in::before{left:auto; right:auto; bottom:auto; height:auto; transform:none}
.wp.is-drag .wp__paper{box-shadow:8px 14px 18px rgba(0,0,0,.24), 30px 46px 50px rgba(0,0,0,.24)}
.wp--polaroid .wp__paper{border-radius:2px}
.wp__tape{position:absolute; z-index:2; width:26%; min-width:14px; height:7%; min-height:7px; top:-3%; left:37%; transform:rotate(-3deg);
  background:rgba(238,226,190,.78); box-shadow:0 1px 2px rgba(0,0,0,.22); backdrop-filter:blur(1px)}
.wp__tape--l{left:-7%; top:-1.5%; width:20%; height:4%; transform:rotate(-42deg)}
.wp__tape--r{left:auto; right:-7%; top:-1.5%; width:20%; height:4%; transform:rotate(42deg)}
.wp__ctl{position:absolute; left:50%; bottom:calc(100% + 12px); transform:translateX(-50%) rotate(calc(var(--r,0deg) * -1)); display:flex; align-items:center; gap:2px; padding:4px;
  white-space:nowrap; background:#141112; border:1px solid var(--border-2); border-radius:999px; box-shadow:0 10px 26px rgba(0,0,0,.45); z-index:60; cursor:default; animation:wpCtl .22s var(--e-spring)}
.wp__ctl--below{bottom:auto; top:calc(100% + 12px)}
@keyframes wpCtl{from{opacity:0; transform:translateX(-50%) translateY(6px) scale(.9)}}
.wp__name{padding:0 8px 0 10px; font:.72rem var(--display); color:var(--muted); max-width:120px; overflow:hidden; text-overflow:ellipsis}
.wp__ctl button{border:0; border-radius:999px; padding:8px 12px; font:500 .74rem var(--body); cursor:pointer; background:var(--elevated-2); color:var(--cream)}
.wp__ctl button:last-child{background:var(--oxblood)}
.bw__hint{margin-top:12px; text-align:center}
.bw__bar{position:sticky; bottom:0; z-index:20; margin-top:22px; background:rgba(12,10,11,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--border-2); padding:12px 0 calc(12px + env(safe-area-inset-bottom,0px))}
.bw__barin{display:flex; align-items:center; gap:10px 16px; flex-wrap:wrap}
.bw__count{flex:1 1 auto} .bw__count b{font-size:1rem; color:var(--cream)}
.bw__price{font-size:1.3rem} .bw__price s{font-size:.85rem; margin-left:6px}
.bw__fill{padding-inline:16px}
.bw__go[disabled],.bw__fill[disabled]{opacity:.5; cursor:not-allowed}
@media(max-width:767px){
  .room{aspect-ratio:4/5; max-height:none; border-radius:14px}
  .room__hang{left:2%; right:2%; top:3%; bottom:27%}
  .room__side{width:62%; height:12%; bottom:6%}
  .room__floor{height:11%} .room__skirt{bottom:11%; height:2.2%}
  .room__light{width:70%}
  .bw__adds{gap:6px; justify-content:center}
  .bw__addb{padding:8px 12px 8px 8px; font-size:.78rem} .bw__addb i{display:none} .bw__addb b{width:20px; height:20px}
  .bw__ctrls{flex-direction:column; align-items:stretch}
  .bw__cols{justify-content:center}
  .bw__barin{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px 12px; align-items:center}
  .bw__count{grid-column:1; grid-row:1} .bw__price{grid-column:2; grid-row:1; justify-self:end; font-size:1.15rem}
  .bw__fill{grid-column:1; grid-row:2} .bw__go{grid-column:2; grid-row:2}
  .bw__fill,.bw__go{min-height:48px; font-size:.72rem; white-space:nowrap; padding-inline:14px; letter-spacing:.1em}
  .bwpick__grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
  .bwopt{padding:2px} .bwopt__b{font-size:.8rem}
  .wp__name{display:none}
}
/* picker */
.bwpick{position:fixed; inset:0; z-index:200; background:var(--overlay); display:flex; align-items:flex-end; justify-content:center; opacity:0; transition:opacity .26s var(--e-ui)}
.bwpick[hidden]{display:none}
.bwpick.is-open{opacity:1}
.bwpick__in{width:min(880px,100%); max-height:86vh; max-height:86dvh; display:flex; flex-direction:column; background:var(--elevated); border:1px solid var(--border-2);
  border-radius:22px 22px 0 0; padding:16px 18px calc(16px + env(safe-area-inset-bottom,0px)); transform:translateY(40px); transition:transform .36s var(--e-spring)}
.bwpick.is-open .bwpick__in{transform:none}
@media(min-width:768px){.bwpick{align-items:center} .bwpick__in{border-radius:22px; max-height:80vh}}
.bwpick__hd{display:flex; align-items:center; justify-content:space-between}
.bwpick__t{font-family:var(--shout); text-transform:uppercase; font-size:1.5rem}
.bwpick__q{margin:10px 0 14px; width:100%; padding:14px 16px; border-radius:12px; border:1px solid var(--border-2); background:var(--ink); color:var(--cream); font:16px var(--body)}
.bwpick__grid{overflow-y:auto; -webkit-overflow-scrolling:touch; display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); padding-bottom:6px}
.bwopt{display:grid; gap:4px; text-align:left; background:none; border:1px solid transparent; border-radius:12px; padding:6px; cursor:pointer; color:var(--cream); transition:border-color var(--d-std), transform var(--d-std) var(--e-spring)}
.bwopt:hover{border-color:var(--border-2); transform:translateY(-2px)}
.bwopt.is-on{border-color:var(--rose)}
.bwopt__img{display:block; aspect-ratio:1; border-radius:8px; overflow:hidden; background:var(--ink)}
.bwopt__img img{width:100%; height:100%; object-fit:cover}
.bwopt__a{font-family:var(--mono); font-size:.6rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted)}
.bwopt__b{font-family:var(--display); font-size:.92rem; line-height:1.2}
/* Safari sizes grid columns from their content; never let a card push its column wider than its share */
.grid>*,.shots>*,.shelf>*,.scatter>*,.card,.card__body,.card__media{min-width:0}
.card__media img,.card__media .frame,.card__media .polaroid,.card__media .record{max-width:100%}

/* ---------- phone hero: two tiles above Shop now (option O3) ---------- */
.htiles{display:none}
@media(max-width:767px){
  .fhero{align-items:flex-start}
  .fhero{--dw:min(88vw, calc(100svh - 390px), 360px); --below:240px}
  /* the record sits in the middle of the space between the header and the tagline */
  .fhero .fdisc{width:var(--dw); margin-top:calc(var(--nav-h) + max(8px, (100svh - var(--nav-h) - var(--below) - var(--dw)) / 2))}
  .htiles{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; position:absolute; z-index:7; left:16px; right:16px;
    bottom:calc(18px + env(safe-area-inset-bottom, 0px) + 72px)}
  .fhero__cta{bottom:calc(18px + env(safe-area-inset-bottom, 0px))}
  .fhero__tagm{bottom:calc(18px + env(safe-area-inset-bottom, 0px) + 72px + 96px)}
  .htile{position:relative; height:84px; border-radius:14px; overflow:hidden; padding:10px 11px; display:flex; flex-direction:column; justify-content:flex-end;
    color:var(--cream); text-decoration:none; border:1px solid rgba(255,255,255,.14); background:rgba(18,16,17,.8);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:transform .3s var(--e-spring)}
  .htile:active{transform:scale(.95)}
  .htile b{position:relative; z-index:2; font:400 16px/1 var(--shout); text-transform:uppercase; letter-spacing:.03em}
  .htile small{position:relative; z-index:2; margin-top:4px; font:500 8.5px/1.2 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--rose)}
  .htile--b{background:#D8312A; border-color:transparent; color:#0b0809} .htile--b small{color:#0b0809}
  .htile__ar{position:absolute; z-index:2; right:9px; bottom:9px; width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
    background:#0b0809; color:var(--cream); font-size:11px; transition:transform .3s var(--e-spring)}
  .htile--w .htile__ar{background:var(--oxblood)}
  .htile:active .htile__ar{transform:translateX(3px)}
  .htile__recs{position:absolute; right:-12px; top:-12px; width:104px; height:64px}
  .htile__recs img{position:absolute; width:50px; height:50px; border-radius:50%; box-shadow:3px 5px 9px rgba(0,0,0,.4); animation:htileSpin 14s linear infinite}
  .htile__recs img:nth-child(1){left:0; top:14px} .htile__recs img:nth-child(2){left:22px; top:4px; animation-duration:11s} .htile__recs img:nth-child(3){left:44px; top:16px; animation-duration:17s}
  .htile__wall{position:absolute; right:9px; top:9px; display:flex; gap:4px; align-items:center}
  .htile__wall img{box-shadow:2px 3px 6px rgba(0,0,0,.45)}
  .htile__wall img.r{width:30px; height:30px; border-radius:50%} .htile__wall img.p{width:21px; height:30px; object-fit:cover}
  @keyframes htileSpin{to{transform:rotate(360deg)}}
}
@media(max-width:767px) and (max-height:700px){
  .fhero__tagm{display:none}
  .fhero{--dw:min(84vw, calc(100svh - 310px), 340px); --below:178px}
}
@media(prefers-reduced-motion:reduce){.htile__recs img{animation:none}}

/* custom order form */
.customform .req{font-style:normal; color:var(--ember)}
.telin{display:flex; align-items:stretch}
.telin b{display:grid; place-items:center; padding:0 12px; background:var(--elevated-2); border:1px solid var(--border); border-right:0; font:500 .95rem var(--mono); color:var(--cream)}
.telin input{flex:1; min-width:0; letter-spacing:.06em}
.filein{position:relative; display:block}
.filein input{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; z-index:2}
.filein__ui{display:flex; flex-direction:column; justify-content:center; gap:2px; min-height:52px; padding:8px 14px; border:1px dashed var(--border-2); background:var(--elevated); transition:border-color .2s}
.filein__ui b{font-weight:500; color:var(--cream); font-size:.92rem} .filein__ui em{font-style:normal; font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; color:var(--muted); text-transform:uppercase}
.filein:hover .filein__ui,.filein input:focus-visible + .filein__ui{border-color:var(--ember)}
.filein__ui.is-set{border-style:solid; border-color:var(--success)}
@media(max-width:767px){.customform .frow{grid-template-columns:minmax(0,1fr)}}
.customform .field{margin-top:0}
.customform .field > span:first-child{display:block; margin-bottom:8px}

/* =====================================================================================
   EXPERIENCE PASS (Nov 2026)
   One system for actions, sizes a thumb can hit, small type a phone can read,
   and a crate that stays one tap from checkout.
   ===================================================================================== */

/* ---------- 1. actions are pills, set in the poster face ---------- */
.btn{height:52px; padding:0 26px; border-radius:999px; font-family:var(--shout); font-weight:400; font-size:1.04rem;
  letter-spacing:.07em; line-height:1; white-space:nowrap; -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none}
.btn--ghost{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; border-radius:0; height:auto; padding:8px 0; white-space:normal}
.btn--secondary{box-shadow:inset 0 0 0 1.5px var(--border-2)}
.btn--secondary:hover{box-shadow:inset 0 0 0 1.5px var(--cream)}
.btn:focus-visible{outline:2px solid var(--cream); outline-offset:3px}
.btn[disabled]{box-shadow:none}
.btn--primary[disabled]:not(.is-loading){background:var(--elevated-2); color:var(--muted); opacity:1}
.btn.is-loading[disabled]{opacity:1}
.ftr a.btn{font-size:1rem; padding:0 24px}
/* the amount rides inside the button: "Add to cart | ₹999" */
.btn__amt{display:inline-block; margin-left:14px; padding-left:14px; border-left:1px solid rgba(255,255,255,.3); font-variant-numeric:tabular-nums; letter-spacing:.04em}
/* loading: a tiny record spins where the label starts */
.btn.is-loading{pointer-events:none}
.btn.is-loading::before{content:""; flex:none; width:18px; height:18px; border-radius:50%;
  background:conic-gradient(from 0deg, rgba(255,255,255,.9) 0 9%, transparent 9% 50%, rgba(255,255,255,.55) 50% 57%, transparent 57%),
    radial-gradient(circle, var(--cream) 0 20%, #0b0a0b 21%);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.55); animation:btnSpin .7s linear infinite}
@keyframes btnSpin{to{transform:rotate(360deg)}}
.qty{height:52px; border-radius:999px; border-color:var(--border-2); overflow:hidden}
.qty button{width:48px; height:52px}
.qty span{font-size:.95rem}
.line .qty{height:44px} .line .qty button{width:44px; height:44px}
.pdp__buy{width:100%; margin-top:10px}
.filterbtn{height:44px; border-radius:999px; font-size:.7rem}
.addon__b{height:40px; font-size:.66rem}
.iconbtn{border-radius:50%}

/* ---------- 2. touch: nothing you tap is smaller than a fingertip ---------- */
@media(hover:none){
  .card__add{width:44px; height:44px; right:6px; bottom:6px}
  .card__add::before{font-size:1.35rem}
  .card__add.is-added{background:var(--success)}
  .card__add.is-added::before{content:"✓"; font-size:1.05rem}
}
.card__add.is-added{background:var(--success)}
@media(max-width:767px){
  .ftr a{padding:11px 0}
  .ftr .ftr__more a{padding:0}
  .crumbs a,.crumbs span{padding-block:12px}
  .bw__addb{min-height:44px}
  .bw__cols button{width:40px; height:40px}
  .pill{min-height:36px}
  .acc button{min-height:54px}
  .apick__a{min-height:44px}
  [data-share]{min-height:44px; padding-inline:6px}
}

/* ---------- 3. small type, legible ---------- */
.card__artist{font-size:.66rem; letter-spacing:.14em}
.card__size{font-size:.64rem; letter-spacing:.11em}
.card__price{font-size:.8rem}
.badge{font-size:.62rem}
.mono-xs{font-size:.69rem}
.cap{font-size:.66rem}
.fmt button{padding:12px 14px; border-radius:12px}
.fmt .f-name{font-size:.74rem}
.fmt .f-size{font-size:.66rem}
.fmt .f-price{font-size:.8rem}
.as{font-size:.7rem}
.spec div{font-size:.7rem}
.toast{font-size:.76rem}
.field label,.field > span:first-child{font-size:.7rem}
.receipt{font-size:.78rem}
.ftr h4{font-size:.66rem}
/* accordions hold sentences ("Is it a real record?"), so they read as sentences */
.acc button{font-family:var(--body); font-size:1rem; font-weight:500; letter-spacing:0; text-transform:none; text-align:left; gap:16px; line-height:1.3; color:var(--cream)}
.acc button span{font-family:var(--mono); font-size:1.1rem; color:var(--ember); flex:none}
.acc .panel__in{font-size:.95rem; line-height:1.6}
@media(max-width:767px){
  .fhero__subm{font-size:.63rem}
  .htile small{font-size:9.5px}
  .pdp__thumb span{font-size:.56rem}
  .apick__f{font-size:.6rem}
  .ag__dim,.ag__tags{font-size:.64rem}
  /* iOS zooms the page when a field's text is under 16px; with real sizes the page can stay zoomable */
  input,select,textarea{font-size:16px!important}
}

/* ---------- 4. the crate bar (phones, tablets) ---------- */
.cratebar{position:fixed; z-index:170; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom, 0px)); display:flex; align-items:stretch; gap:6px;
  padding:6px; border-radius:22px; background:rgba(20,17,18,.86); border:1px solid rgba(255,255,255,.14); box-shadow:0 18px 44px rgba(0,0,0,.6);
  backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4);
  transform:translateY(calc(100% + 24px)); opacity:0; pointer-events:none; transition:transform 420ms var(--e-spring), opacity 200ms var(--e-ui)}
.cratebar.is-on{transform:none; opacity:1; pointer-events:auto}
.cratebar__open{flex:1; min-width:0; display:flex; align-items:center; gap:10px; padding:4px 6px 4px 8px; background:none; border:0; color:var(--cream); text-align:left; cursor:pointer; border-radius:16px}
.cratebar__open:active{background:rgba(255,255,255,.06)}
.cratebar__stack{display:flex; flex:none; padding-left:10px}
.cratebar__th{display:block; width:34px; height:34px; margin-left:-10px; border-radius:6px; overflow:hidden; background:#0b0a0b; box-shadow:0 0 0 2px #171415}
.cratebar__th.is-rec{border-radius:50%; padding:7px; background:repeating-radial-gradient(circle,#0e0d0e 0 1.2px,#262223 1.2px 2.2px)}
.cratebar__th img{display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit}
.cratebar__txt{min-width:0; display:grid; gap:2px}
.cratebar__txt b{font:400 1rem/1 var(--shout); letter-spacing:.05em; text-transform:uppercase}
.cratebar__txt i{font-style:normal; font-family:var(--mono); font-size:.6rem; letter-spacing:.06em; color:var(--rose); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cratebar__go{flex:none; display:grid; align-content:center; justify-items:center; gap:3px; min-width:104px; padding:0 16px; border:0; border-radius:16px; cursor:pointer;
  background:var(--cream); color:#0b0809; font:400 1rem/1 var(--shout); letter-spacing:.06em; text-transform:uppercase; transition:transform 200ms var(--e-spring)}
.cratebar__go .num{font-family:var(--mono); font-size:.64rem; letter-spacing:.04em}
.cratebar__go:active{transform:scale(.95)}
.cratebar__go.is-loading span:first-child{opacity:.5}
body.has-cratebar .ftr{padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px))}
body.has-cratebar .toasts{bottom:calc(92px + env(safe-area-inset-bottom, 0px))}
@media(min-width:1024px){.cratebar{display:none}}

/* ---------- 5. product page ---------- */
.buybar{gap:12px; padding-left:16px; padding-right:12px; align-items:center}
.buybar__t{flex:1; min-width:0; display:grid; gap:2px}
.buybar__t b{font-family:var(--display); font-weight:500; font-size:.98rem; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.buybar__t i{font-style:normal; font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.buybar .btn{flex:none; height:48px; padding:0 18px}

/* ---------- 6. the menu is a solid sheet, not a veil over the page ---------- */
.menu{background:rgba(8,6,7,.985)}
.ag__quick{width:40px; height:40px}
@media(max-width:767px){.ag__quick{width:44px; height:44px; bottom:0}}
.ag__quick.is-added{background:var(--success); border-color:var(--success); font-size:0}
.ag__quick.is-added::before{content:"✓"; font-size:1rem}

/* ---------- 7. size diagram: readable at phone width ---------- */
.scaleview{border-radius:16px; padding:clamp(18px,4vw,44px)}
.scaleview svg{height:auto; width:100%; max-width:560px; max-height:min(58vh,460px)}
.scaleview .obj{fill:rgba(243,233,222,.07); stroke:rgba(243,233,222,.55); stroke-width:2}
.scaleview .obj.is-on{fill:rgba(192,53,63,.2); stroke:var(--ember); stroke-width:2.5}
.scaleview .dim-line{stroke:rgba(243,233,222,.5); stroke-width:1.5}
.scaleview text{font-size:22px; letter-spacing:.06em; fill:rgba(243,233,222,.7)}
.scaleview text.sub{font-size:18px; opacity:.8}
.scaleview text.on{fill:var(--cream)}

/* ---------- 8. story: the record sits above the words on a phone, not behind them ---------- */
@media(max-width:767px){
  section[data-section="THE OBJECT"]{padding-top:calc(var(--nav-h) + 22px)!important}
  #beat3 .beat3__visual,#beat3 .beat3__visual.reveal,#beat3 .beat3__visual.reveal.is-in{position:relative!important; top:auto!important; left:auto!important; transform:none!important;
    width:min(60vw,240px)!important; height:min(60vw,240px)!important; margin:0 auto 22px!important; opacity:1!important}
  #beat3rec{filter:none!important}
  .beat3__copy h1,.beat3__copy h2,.beat3__copy p.measure{text-shadow:none}
  .beat3__copy h1{font-size:clamp(2rem,8vw,2.5rem); margin:12px auto 14px}
  .beat3__copy p.measure{font-size:1rem; line-height:1.55; color:rgba(243,239,232,.82)}
}

/* ---------- 9. loose ends from the touch + type audit ---------- */
.assure{font-size:.68rem; letter-spacing:.08em; gap:10px 16px}
.mrp{font-size:.9em}
.room__surprise{min-height:44px; padding-inline:8px}
@media(max-width:767px){
  .ftr .ftr__more{gap:2px 18px}
  .ftr .ftr__more a{display:inline-block; padding:9px 0}
  .pdp__top a,.pdp__top .pdp__share{display:inline-block; padding-block:14px; margin-block:-14px}
}
/* long lists of sentences read better in a column, not across a whole laptop screen */
.wrap.col-720 > .acc, .wrap.col-720 > form, .wrap.col-720 > p{max-width:760px}