/* ============================================================
   14 SOUNDS — v6
   The illustrations provide the chaos. The interface provides
   the structure: rectangles, hairlines, no radii, no shadows.
   ============================================================ */

/* ---------- fonts ---------- */
@font-face{font-family:'Archivo';src:url('../fonts/archivo-latin-900-normal.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap;}
@font-face{font-family:'Archivo';src:url('../fonts/archivo-latin-800-normal.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:'Inter Tight';src:url('../fonts/inter-tight-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Inter Tight';src:url('../fonts/inter-tight-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Inter Tight';src:url('../fonts/inter-tight-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}

/* ---------- tokens ---------- */
:root{
  --paper:#F7F3EA; --ink:#000000;
  --red:#FF3B20; --blue:#2457FF; --cyan:#00CFFF; --pink:#FF2DA8;
  --lime:#C8FF00; --yellow:#FFD900; --purple:#7D35FF;
  --line:rgba(0,0,0,.16); --line-strong:rgba(0,0,0,.4);
  --gut:20px; --wrap:1440px;
  --hdr:58px;
  --display:'Archivo',Impact,'Haettenschweiler','Arial Narrow Bold',sans-serif;
  --ui:'Inter Tight',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  /* set per section by JS / inline style */
  --field:var(--paper); --field-ink:var(--ink); --accent:var(--red);
  --btn-bg:var(--ink); --btn-fg:var(--paper);
}
@media (min-width:900px){ :root{ --gut:40px; --hdr:66px; } }

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--ui);font-size:16px;line-height:1.5;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
input,select,textarea{font:inherit;color:inherit;}
ul,ol{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,p{margin:0;}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px;}
.field--dark :focus-visible,.foot :focus-visible{outline-color:var(--paper);}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--paper);padding:12px 18px;}
.skip:focus{left:0;}

/* ---------- type ---------- */
.d1{font-family:var(--display);font-weight:900;line-height:.86;letter-spacing:-.02em;text-transform:uppercase;
    font-size:clamp(44px,12.5vw,132px);}
.d2{font-family:var(--display);font-weight:900;line-height:.88;letter-spacing:-.015em;text-transform:uppercase;
    font-size:clamp(32px,7.2vw,72px);}
.d3{font-family:var(--display);font-weight:800;line-height:.95;letter-spacing:-.01em;text-transform:uppercase;
    font-size:clamp(22px,3.4vw,34px);}
.lead{font-size:clamp(16px,2.2vw,21px);line-height:1.45;max-width:46ch;}
.small{font-size:13px;line-height:1.5;}
.mono{display:inline-flex;align-items:center;gap:9px;font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;line-height:1.2;}
.spine{font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase;}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut);width:100%;}
.sec{padding:clamp(48px,8vw,104px) 0;}
.sec--tight{padding:clamp(34px,5vw,64px) 0;}
.rule{height:1px;background:var(--line);border:0;margin:0;}
.field{background:var(--field);color:var(--field-ink);--btn-bg:var(--field-ink);--btn-fg:var(--field);}
.field--dark{--field:var(--ink);--field-ink:var(--paper);background:var(--ink);color:var(--paper);}
.field--dark .rule{background:rgba(247,243,234,.22);}

.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:clamp(22px,3vw,38px);}
.field--dark .sec-head{border-color:rgba(247,243,234,.3);}
.sec-head .mono{display:flex;align-items:center;gap:10px;}
.sec-head__link{font-weight:600;font-size:13px;letter-spacing:.04em;border-bottom:2px solid currentColor;padding-bottom:2px;}

/* motif beside a label */
.motif{width:18px;height:18px;flex:0 0 auto;}
.motif path,.motif circle,.motif rect{fill:currentColor;}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:90;background:var(--paper);border-bottom:1px solid var(--ink);}
.hdr__in{display:flex;align-items:center;gap:14px;height:var(--hdr);}
.logo{display:block;flex:0 0 auto;line-height:0;}
.logo img{height:19px;width:auto;}
@media (min-width:900px){ .logo img{height:23px;} }
@media (max-width:359px){ .hdr__in{gap:10px;} .logo img{height:16px;} .cartbtn{padding:7px 9px;} .hdr__end{gap:6px;} }
.nav{display:none;margin-left:auto;gap:clamp(14px,2vw,30px);}
.nav a{font-weight:500;font-size:14px;letter-spacing:.02em;padding:4px 0;border-bottom:2px solid transparent;}
.nav a:hover,.nav a[aria-current="page"]{border-color:var(--ink);}
.hdr__end{margin-left:auto;display:flex;align-items:center;gap:8px;}
.nav+.hdr__end{margin-left:clamp(14px,2vw,30px);}
.cartbtn{display:flex;align-items:center;gap:7px;border:1px solid var(--ink);padding:8px 12px;font-weight:600;font-size:13px;letter-spacing:.02em;}
.cartbtn:hover{background:var(--ink);color:var(--paper);}
.cartbtn__n{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;background:var(--red);color:#000;font-size:11px;font-weight:600;}
.cartbtn:hover .cartbtn__n{background:var(--paper);}
.burger{width:42px;height:38px;border:1px solid var(--ink);display:grid;place-items:center;gap:4px;align-content:center;}
.burger span{display:block;width:18px;height:2px;background:currentColor;}
/* after .burger so it wins: desktop shows the nav, never the burger */
@media (min-width:860px){ .nav{display:flex;} .burger,.mnav{display:none;} }

/* mobile menu */
.mnav{position:fixed;inset:var(--hdr) 0 0;z-index:88;background:var(--paper);border-top:1px solid var(--ink);
  transform:translateY(-100%);visibility:hidden;transition:transform .25s ease,visibility .25s;overflow-y:auto;}
.mnav[data-open="true"]{transform:none;visibility:visible;}
.mnav a{display:flex;justify-content:space-between;align-items:center;padding:20px var(--gut);border-bottom:1px solid var(--line);
  font-family:var(--display);font-weight:800;font-size:30px;text-transform:uppercase;}
@media (prefers-reduced-motion:reduce){ .mnav{transition:none;} }

/* ---------- ticker ---------- */
.ticker{background:var(--ink);color:var(--paper);overflow:hidden;border-bottom:1px solid var(--ink);}
/* the track is sized and animated by fitTicker() in ui.js */
.ticker__in{display:flex;width:max-content;will-change:transform;}
.ticker__grp{display:flex;flex:0 0 auto;}
.ticker span{padding:9px 0;font-weight:600;font-size:12px;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;}
.ticker span::after{content:'\2726';padding:0 18px;opacity:.65;}

/* ---------- buttons ---------- */
/* Buttons print in the field's two inks, so they always clear AA on any colour. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:2px solid var(--btn-bg);background:var(--btn-bg);color:var(--btn-fg);
  padding:14px 22px;font-weight:600;font-size:15px;letter-spacing:.02em;text-align:center;
  transition:background .12s ease,color .12s ease;}
.btn:hover{background:transparent;color:var(--btn-bg);}
.btn--ghost{background:transparent;color:var(--btn-bg);}
.btn--ghost:hover{background:var(--btn-bg);color:var(--btn-fg);}
.btn--big{padding:17px 30px;font-size:16px;}
.btn--block{display:flex;width:100%;}
.btn[disabled]{opacity:.45;pointer-events:none;}

/* ---------- poster / card ---------- */
/* two columns from the smallest phone up: the covers stay readable and the archive
   scrolls half as far (most visitors arrive from Instagram on a phone) */
.grid{display:grid;gap:clamp(18px,2.4vw,30px);grid-template-columns:repeat(2,minmax(0,1fr));}
@media (max-width:559px){ .grid{column-gap:12px;row-gap:26px;} }
@media (min-width:1000px){ .grid--3{grid-template-columns:repeat(3,1fr);} }
@media (min-width:1000px){ .grid--4{grid-template-columns:repeat(4,1fr);} }

.card{display:flex;flex-direction:column;position:relative;background:transparent;}
.card__art picture{display:block;width:100%;height:100%;}
.card__art{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--line);border:1px solid var(--ink);}
.card__art img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1);}
.card:hover .card__art img{transform:scale(1.035);}
@media (prefers-reduced-motion:reduce){ .card__art img{transition:none;} .card:hover .card__art img{transform:none;} }
.card__num{position:absolute;top:0;left:0;background:var(--ink);color:var(--paper);padding:5px 9px;font-weight:600;font-size:11px;letter-spacing:.14em;z-index:2;}
.card__bar{position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s ease;}
.card:hover .card__bar,.card:focus-within .card__bar{transform:none;}
.card__body{padding-top:12px;display:flex;flex-direction:column;gap:6px;}
.card__title{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(19px,2.3vw,24px);line-height:1;}
.card__meta{display:flex;justify-content:space-between;gap:12px;align-items:baseline;border-top:1px solid var(--line);padding-top:8px;margin-top:2px;}
.card__price{font-weight:600;white-space:nowrap;}
.card__foot{display:flex;gap:8px;padding-top:10px;}
.card__foot .btn{flex:1;padding:11px 14px;font-size:14px;}
.card a.card__art::after{content:'';position:absolute;inset:0;}
/* on phones the preview button leaves the cover (it would hide the title) and sits next to Add to cart */
.card__body{flex:1 1 auto;}
.card__meta{margin-top:auto;}
.card__foot .play{position:relative;right:auto;bottom:auto;flex:0 0 42px;width:42px;height:auto;min-height:40px;}
@media (min-width:560px){ .play--foot{display:none;} }
@media (max-width:559px){
  .play--art{display:none;}
  .card__title{font-size:16px;}
  .card__body{padding-top:9px;gap:4px;}
  .card__body .spine{font-size:10px;letter-spacing:.08em;}
  .card__meta{gap:6px;padding-top:6px;}
  .card__meta .spine{font-size:10px;letter-spacing:.06em;}
  .card__price{font-size:14px;}
  .card__foot{padding-top:8px;}
  .card__foot .btn{padding:10px 8px;font-size:13px;}
  .card__num{font-size:10px;padding:4px 7px;}
  .play{width:34px;height:34px;right:5px;bottom:5px;}
}

/* play button */
.play{position:absolute;right:8px;bottom:8px;z-index:3;width:46px;height:46px;
  background:var(--paper);border:1px solid var(--ink);color:var(--ink);}
.play button{width:100%;height:100%;display:grid;place-items:center;}
.play:hover{background:var(--accent);}
.play svg{width:15px;height:15px;fill:currentColor;}
.play .i-pause{display:none;}
.play[data-playing="true"]{background:var(--ink);color:var(--paper);}
.play[data-playing="true"] .i-pause{display:block;}
.play[data-playing="true"] .i-play{display:none;}

/* chips / filters */
.chips{display:flex;gap:8px;flex-wrap:wrap;}
.chip{border:1px solid var(--ink);padding:8px 14px;font-weight:500;font-size:13px;letter-spacing:.02em;background:transparent;}
.chip:hover{background:rgba(0,0,0,.07);}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);}

/* ---------- footer ---------- */
.foot{--btn-bg:var(--paper);--btn-fg:var(--ink);background:var(--ink);color:var(--paper);padding:clamp(40px,6vw,72px) 0 28px;}
.foot a:hover{border-bottom:1px solid currentColor;}
.foot .formnote a{border-bottom:1px solid currentColor;}
.formnote a{text-decoration:underline;text-underline-offset:2px;}
.sub__done{font-weight:600;margin-top:18px;max-width:46ch;}
.sub__done a{text-decoration:underline;text-underline-offset:2px;}
.foot__grid{display:grid;gap:34px;grid-template-columns:1fr;}
@media (min-width:520px){ .foot__grid{grid-template-columns:repeat(3,1fr);} .foot__grid>div:first-child{grid-column:1 / -1;} }
@media (min-width:980px){ .foot__grid{grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;} .foot__grid>div:first-child{grid-column:auto;} }
.foot__logo{display:block;line-height:0;width:clamp(170px,26vw,300px);}
.foot__logo img{width:100%;height:auto;}
.foot a.foot__logo:hover{border-bottom:0;}
.foot h3{font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.6;margin-bottom:12px;}
.foot li{padding:5px 0;font-size:15px;}
.foot__end{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:40px;padding-top:18px;border-top:1px solid rgba(247,243,234,.22);font-size:12px;opacity:.75;}

/* ---------- forms ---------- */
.sub{display:flex;flex-direction:column;gap:10px;max-width:460px;}
@media (min-width:520px){ .sub{flex-direction:row;} }
.sub input{flex:1;border:2px solid currentColor;background:transparent;padding:14px 16px;min-width:0;}
.sub input::placeholder{color:currentColor;opacity:.55;}
.sub .btn{white-space:nowrap;}
.formnote{font-size:12px;opacity:.7;margin-top:10px;}

/* ---------- drawer (mini cart) ---------- */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:95;opacity:0;visibility:hidden;transition:opacity .2s;}
.scrim[data-open="true"]{opacity:1;visibility:visible;}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--paper);z-index:96;
  border-left:1px solid var(--ink);display:flex;flex-direction:column;transform:translateX(100%);
  transition:transform .26s cubic-bezier(.3,.8,.3,1);visibility:hidden;}
.drawer[data-open="true"]{transform:none;visibility:visible;}
@media (prefers-reduced-motion:reduce){ .drawer,.scrim{transition:none;} }
.drawer__top{display:flex;align-items:center;justify-content:space-between;padding:16px var(--gut);border-bottom:1px solid var(--ink);}
.drawer__body{flex:1;overflow-y:auto;padding:0 var(--gut);}
.drawer__foot{border-top:1px solid var(--ink);padding:16px var(--gut) calc(16px + env(safe-area-inset-bottom));display:grid;gap:12px;}
.xbtn{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--ink);}
.xbtn:hover{background:var(--ink);color:var(--paper);}
.line{display:grid;grid-template-columns:62px 1fr auto;gap:12px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line);}
.line img{width:62px;height:78px;object-fit:cover;border:1px solid var(--ink);}
.line__t{font-weight:600;font-size:15px;line-height:1.25;}
.line__s{font-size:12px;opacity:.65;margin-top:3px;}
.line__r{display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
.line__x{font-size:12px;text-decoration:underline;opacity:.65;}
.line__x:hover{opacity:1;}
.total{display:flex;justify-content:space-between;align-items:baseline;font-weight:600;}
.total b{font-family:var(--display);font-weight:900;font-size:26px;}
.empty{padding:50px 0;text-align:center;}

/* ---------- utility ---------- */
.stack{display:grid;gap:clamp(14px,2vw,22px);}
.cluster{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.bleed-r{margin-right:calc(var(--gut) * -1);}
.hide-s{display:none;}
@media (min-width:760px){ .hide-s{display:block;} .hide-l{display:none;} }
.noscroll{overflow:hidden;}