:root{
  --bg0:#050506; --bg1:#0b0b0d;
  --ink:#f2f2f2; --ink2:rgba(242,242,242,.86);
  --muted:rgba(242,242,242,.60); --line:rgba(255,255,255,.14);
  --red:#ff2a2a; --cyan:#00e5ff; --mag:#ff2bd6;
  --shadow: 0 30px 100px rgba(0,0,0,.70);
  --max: 1280px;
  --ocr: "OCR A Extended","OCR A Std","OCR-A","Share Tech Mono",
         ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink);
  font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background: linear-gradient(180deg,var(--bg0),var(--bg1) 55%,var(--bg0));
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.wrap{width:min(var(--max), calc(100% - 48px)); margin:0 auto}

/* animated dirty grunge */
.grunge{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.86;mix-blend-mode:overlay}
.grunge:before{
  content:""; position:absolute; inset:-14%;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='900'%20height='900'%20viewBox='0%200%20900%20900'%3E%20%20%3Cfilter%20id='s'%3E%20%20%20%20%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.85'%20numOctaves='3'%20seed='11'%20result='n'/%3E%20%20%20%20%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%200%200%200%201%200'%20in='n'%20result='a'/%3E%20%20%3C/filter%3E%20%20%3Crect%20width='900'%20height='900'%20filter='url(%23s)'%20opacity='.65'/%3E%20%20%3Cg%20stroke='%23fff'%20stroke-width='2'%20opacity='.40'%3E%20%20%20%20%3Cpath%20d='M20%2090%20L880%2040'/%3E%20%20%20%20%3Cpath%20d='M10%20170%20L890%20120'/%3E%20%20%20%20%3Cpath%20d='M30%20260%20L870%20210'/%3E%20%20%20%20%3Cpath%20d='M40%20360%20L860%20310'/%3E%20%20%20%20%3Cpath%20d='M20%20470%20L880%20410'/%3E%20%20%20%20%3Cpath%20d='M60%20610%20L840%20540'/%3E%20%20%20%20%3Cpath%20d='M40%20740%20L860%20670'/%3E%20%20%20%20%3Cpath%20d='M70%20850%20L830%20790'/%3E%20%20%20%20%3Cpath%20d='M120%2020%20L260%20880'/%3E%20%20%20%20%3Cpath%20d='M220%2010%20L420%20890'/%3E%20%20%20%20%3Cpath%20d='M520%2015%20L700%20885'/%3E%20%20%20%20%3Cpath%20d='M640%2010%20L820%20890'/%3E%20%20%3C/g%3E%3C/svg%3E");
  background-size:340px 340px;
  filter:contrast(1.3) brightness(.95);
  animation:drift 12s linear infinite;
}
.grunge:after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(980px 560px at 14% 10%, rgba(255,42,42,.18), transparent 55%),
    radial-gradient(980px 640px at 88% 16%, rgba(0,229,255,.10), transparent 58%),
    radial-gradient(980px 720px at 54% 120%, rgba(255,43,214,.08), transparent 62%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.055) 0 1px, rgba(0,0,0,0) 1px 4px);
  mix-blend-mode:screen;
  opacity:.44;
  animation:shimmer 5.6s steps(6,end) infinite;
}
@keyframes drift{
  0%{transform:translate3d(-2%,-2%,0) scale(1.06)}
  50%{transform:translate3d(2.2%,1.6%,0) scale(1.07)}
  100%{transform:translate3d(-2%,-2%,0) scale(1.06)}
}
@keyframes shimmer{
  0%,100%{filter:hue-rotate(0deg) contrast(1.0); opacity:.44}
  50%{filter:hue-rotate(8deg) contrast(1.12); opacity:.52}
}

/* nav */
.nav{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg, rgba(5,5,6,.84), rgba(5,5,6,.34));
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.navRow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.brand{display:flex;align-items:flex-start;gap:14px;text-transform:uppercase}
.brandText{display:flex;flex-direction:column;gap:2px;transform:translateY(2px)}
.brandText .site{font-family:var(--ocr);letter-spacing:.24em;font-size:12px;color:rgba(242,242,242,.92)}
.brandText .sub{font-family:var(--ocr);letter-spacing:.18em;font-size:10px;color:var(--muted)}

/* logo as white mark, no frame */
.logoMark{width:52px;height:52px;position:relative;overflow:hidden;background:transparent;transform:translate(-2px,-2px) rotate(-1deg)}
.logoMark img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:grayscale(1) contrast(1.55) brightness(1.35)}
.logoMark .c{mix-blend-mode:screen;opacity:.62}
.logoMark .c.cyan{transform:translate(2px,0);filter:grayscale(1) contrast(1.45) brightness(1.25) drop-shadow(0 0 0 var(--cyan))}
.logoMark .c.mag{transform:translate(-2px,0);filter:grayscale(1) contrast(1.45) brightness(1.25) drop-shadow(0 0 0 var(--mag))}
.logoMark:after{
  content:""; position:absolute; inset:-40% -10%;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.18), transparent);
  opacity:.32; mix-blend-mode:overlay;
  transform:translateY(-50%);
  animation:scan 3.9s linear infinite;
  pointer-events:none;
}
@keyframes scan{0%{transform:translateY(-55%)}100%{transform:translateY(55%)}}

.navLinks{display:flex;gap:12px;flex-wrap:wrap;font-family:var(--ocr);letter-spacing:.18em;font-size:11px;color:var(--muted)}
.navLinks a{
  padding:8px 10px; border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.02);
  border-radius:0;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.navLinks a:hover{color:var(--ink2);border-color:rgba(255,42,42,.35);box-shadow:0 0 0 3px rgba(255,42,42,.10) inset}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.03);
  font-family:var(--ocr);
  letter-spacing:.18em;font-size:11px;text-transform:uppercase;
  border-radius:0;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  box-shadow:0 18px 60px rgba(0,0,0,.45);
  position:relative;
}
.btn:before{
  content:""; position:absolute; inset:2px;
  border:1px dashed rgba(255,255,255,.14);
  opacity:.55; pointer-events:none;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.btn:hover{border-color:rgba(255,42,42,.35);transform:translateY(-1px)}
.btnPrimary{border-color:rgba(255,42,42,.48);box-shadow:0 0 0 3px rgba(255,42,42,.12) inset, 0 18px 70px rgba(0,0,0,.55)}
.dot{width:8px;height:8px;border-radius:99px;background:var(--red);box-shadow:0 0 18px rgba(255,42,42,.65)}

main{position:relative;z-index:1}
.hero{padding:34px 0 10px}
.heroTop{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:14px}
.headline{margin:0;text-transform:uppercase;line-height:.88;font-weight:900;font-size:clamp(42px,6.2vw,86px);letter-spacing:-.03em}
.headline .rgb{position:relative;display:inline-block;text-shadow:0 0 34px rgba(255,42,42,.14)}
.headline .rgb:before,.headline .rgb:after{content:attr(data-text);position:absolute;left:0;top:0;opacity:.56;mix-blend-mode:screen;pointer-events:none}
.headline .rgb:before{color:var(--cyan);transform:translate(2px,0);clip-path:inset(0 0 56% 0)}
.headline .rgb:after{color:var(--mag);transform:translate(-2px,0);clip-path:inset(56% 0 0 0)}
.kicker{margin-top:10px;font-family:var(--ocr);letter-spacing:.22em;font-size:11px;text-transform:uppercase;color:var(--muted)}
.heroMeta{max-width:52ch;font-size:13px;line-height:1.55;color:var(--muted)}

.covers{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:12px}
.coverCard{
  position:relative;
  /* square hero covers */
  aspect-ratio: 1 / 1;
  width:100%;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.02);
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  box-shadow:var(--shadow);
  isolation:isolate;
}
.coverCard:hover{border-color:rgba(255,42,42,.35)}
.coverArt{position:absolute;inset:0;background:#000}
.coverArt img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain; /* show full square cover */
  background:#000;
  filter:grayscale(.15) contrast(1.06) saturate(.95);
  transform: scale(1.0);
}
.coverArt .split{opacity:.38;mix-blend-mode:screen;pointer-events:none}
.coverArt .cyan{
  transform: translate(2px,0) scale(1.0);
  filter: grayscale(.15) contrast(1.06) saturate(.95) drop-shadow(0 0 0 var(--cyan));
}
.coverArt .mag{
  transform: translate(-2px,0) scale(1.0);
  filter: grayscale(.15) contrast(1.06) saturate(.95) drop-shadow(0 0 0 var(--mag));
}
.coverCard:before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,0) 22%, rgba(0,0,0,.38)),
    repeating-linear-gradient(180deg, rgba(255,255,255,.07) 0 1px, rgba(0,0,0,0) 1px 4px);
  mix-blend-mode:overlay; opacity:.62; pointer-events:none; z-index:2;
}

.badge{
  position:absolute; top:14px; left:14px;
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.40);
  font-family:var(--ocr); letter-spacing:.22em; font-size:11px; text-transform:uppercase;
  z-index:3;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
}
.badge .p{width:8px;height:8px;border-radius:99px;background:var(--red);box-shadow:0 0 18px rgba(255,42,42,.65)}

.info{
  position:absolute; left:14px; right:14px; bottom:14px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.46);
  padding:14px; z-index:3;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
}
.code{font-family:var(--ocr);letter-spacing:.22em;font-size:11px;text-transform:uppercase;color:var(--muted)}
.title{margin-top:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;font-size:16px}
.artist{margin-top:8px;color:var(--ink2);font-family:var(--ocr);letter-spacing:.18em;font-size:11px;text-transform:uppercase}
.tags{margin-top:12px;display:flex;gap:6px;flex-wrap:wrap}
.tag{
  font-family:var(--ocr);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  padding:6px 8px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.02);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  color:rgba(242,242,242,.82);
}

.sectionHead{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:18px 0 14px}
.h2{margin:0;font-family:var(--ocr);letter-spacing:.26em;font-size:12px;text-transform:uppercase;color:rgba(242,242,242,.88)}
.sub{color:var(--muted);font-size:13px;line-height:1.55;max-width:78ch}

.hub{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;margin-bottom:36px}
.hub a{
  grid-column:span 4;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.02);
  padding:14px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
}
.hub a:hover{border-color:rgba(255,42,42,.35);box-shadow:0 0 0 3px rgba(255,42,42,.10) inset}
.hub .left{display:flex;flex-direction:column;gap:8px}
.hub .name{font-family:var(--ocr);letter-spacing:.22em;font-size:11px;text-transform:uppercase;color:rgba(242,242,242,.92)}
.hub .note{color:var(--muted);font-size:12px}
.arrow{
  width:34px;height:34px;border:1px solid rgba(255,255,255,.16);
  display:grid;place-items:center;background:rgba(0,0,0,.38);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  font-family:var(--ocr);
}

footer{border-top:1px solid rgba(255,255,255,.14);padding:22px 0 34px;color:var(--muted);font-size:12px;position:relative;z-index:1}
.footRow{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.badgeFooter{height:auto; width:auto; max-width:none; opacity:.95; filter:grayscale(1) contrast(1.2) brightness(1.15)}

/* release pages */
.releaseGrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:16px}
.card{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.02);padding:14px;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);box-shadow:0 22px 80px rgba(0,0,0,.55)}
.releaseHeroArt{
  position:relative;
  aspect-ratio: 1 / 1;
  width:100%;
  overflow:hidden;
}
.releaseHeroArt img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  background:#000;
  filter:contrast(1.08) saturate(.95);
  transform: scale(1.0);
}
.releaseHeroArt:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,0) 30%, rgba(0,0,0,.50)),repeating-linear-gradient(180deg, rgba(255,255,255,.07) 0 1px, rgba(0,0,0,0) 1px 4px);mix-blend-mode:overlay;opacity:.68;pointer-events:none}
.releaseBody h1{margin:0;font-size:clamp(26px,3vw,34px);text-transform:uppercase;letter-spacing:.08em}
.releaseBody .metaLine{margin-top:10px;font-family:var(--ocr);letter-spacing:.22em;font-size:11px;text-transform:uppercase;color:rgba(242,242,242,.88)}
.releaseBody p{color:rgba(242,242,242,.78);line-height:1.65;font-size:13px}
.list{margin:12px 0 0;padding:0;list-style:none;color:rgba(242,242,242,.80);font-size:13px;line-height:1.65}
.list li{padding:8px 0;border-bottom:1px dashed rgba(255,255,255,.12)}
.embed{aspect-ratio:16/9;width:100%;border:0;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.35)}

@media (max-width:980px){
  .navLinks{display:none}
  .covers{grid-template-columns:1fr}
  .hub a{grid-column:span 6}
  .releaseGrid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .wrap{width:min(var(--max), calc(100% - 28px))}
  .hub a{grid-column:span 12}
}

/* micro flicker */
.flicker .headline .rgb:before{transform:translate(3px,0)}
.flicker .headline .rgb:after{transform:translate(-3px,0)}
.flicker .logoMark .c.cyan{transform:translate(3px,0)}
.flicker .logoMark .c.mag{transform:translate(-3px,0)}
.flicker .coverArt img{filter:contrast(1.16) saturate(1.05)}


/* v5: move RGB headline effect to artist names above covers */
.headlineSmall{
  font-size: clamp(26px, 3.2vw, 44px);
  letter-spacing:-.02em;
  line-height:.95;
}

/* Artist heading that uses the same RGB split idea, but tuned for over-cover label */
.coverHeading{
  position:absolute;
  top:14px;
  right:14px;
  left:14px;
  z-index:4;
  display:flex;
  justify-content:flex-end;
  pointer-events:none;
}
.coverHeading .txt{
  position:relative;
  display:inline-block;
  padding:10px 12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size: clamp(18px, 2.2vw, 28px);
  line-height:1;
  background: rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.18);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  text-shadow: 0 0 34px rgba(255,42,42,.14); /* uses text-shadow baseline */ 
}
.coverHeading .txt:before,
.coverHeading .txt:after{
  content: attr(data-text);
  position:absolute; left:12px; top:10px;
  opacity:.58;
  mix-blend-mode: screen;
}
.coverHeading .txt:before{
  color: var(--cyan);
  transform: translate(2px,0);
  clip-path: inset(0 0 52% 0);
}
.coverHeading .txt:after{
  color: var(--mag);
  transform: translate(-2px,0);
  clip-path: inset(52% 0 0 0);
}

/* Push badge slightly lower so it doesn't collide with artist heading */
.coverCard .badge{ top:72px; }
@media (max-width: 980px){
  .coverCard .badge{ top:68px; }
}


/* Shopify buy button integration */
.shopifyCard{
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.38);
  padding:14px;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  box-shadow: 0 22px 80px rgba(0,0,0,.55);
}
.shopifyRow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.shopifyTitle{
  font-family: var(--ocr);
  letter-spacing:.22em;
  font-size:11px;
  text-transform:uppercase;
  color: rgba(242,242,242,.88);
  margin-bottom:8px;
}
.shopifyHint{
  color: var(--muted);
  font-size:12px;
  max-width:60ch;
  line-height:1.55;
}
.shopifyMount{
  min-width: 280px;
  flex: 1 1 320px;
}


/* UX: make cover cards support a separate 'details' hit area so Shopify button isn't nested inside an <a> */
.coverCard{ position:relative; }
.coverHit{
  position:absolute; inset:0;
  z-index:3;
  /* keep Shopify button clickable */
  pointer-events:auto;
}
.coverHit:focus{ outline:2px solid rgba(255,42,42,.55); outline-offset:-2px; }
.coverCard .info, .coverCard .badge, .coverCard .coverHeading{ z-index:4; position:relative; }
.coverCard .shopifyInline{
  margin-top:12px;
  border-top:1px dashed rgba(255,255,255,.14);
  padding-top:12px;
}
.coverCard .shopifyInline .shopifyMount{ min-width: 0; flex: 1 1 auto; }


/* v10 index hero restructure */
.releasesGrid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:16px;
  margin-top:14px;
}
.releaseItem{
  grid-column: span 6;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.coverLink{
  display:block;
  position:relative;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.02);
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.coverLink .coverArt{ position:absolute; inset:0; }
.coverLink .coverArt img{ object-fit:contain; background:#000; }
.coverLink:before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,0) 28%, rgba(0,0,0,.46)),
    repeating-linear-gradient(180deg, rgba(255,255,255,.06) 0 1px, rgba(0,0,0,0) 1px 4px);
  mix-blend-mode:overlay;
  opacity:.62;
  pointer-events:none;
  z-index:2;
}
.coverLink .badge{ position:absolute; top:14px; left:14px; z-index:3; }

.metaCard{
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.38);
  padding:14px;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  box-shadow:0 22px 80px rgba(0,0,0,.55);
}
.metaTop{ display:flex; flex-direction:column; gap:8px; }
.metaArtist{
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:16px;
}
.metaTitle{
  font-family:var(--ocr);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(242,242,242,.86);
  font-size:12px;
}

.metaRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-top:10px;
}
.pill{
  display:inline-flex;
  align-items:center;
  padding:7px 10px;
  background:rgba(255,42,42,.92);
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  font-family:var(--ocr);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:10px;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
}
.pillAlt{
  background:rgba(242,242,242,.10);
  color:rgba(242,242,242,.92);
  border-color:rgba(255,255,255,.18);
}

.metaActions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.metaActions .btn{ box-shadow:none; }

/* Shopify Buy Button: try match OCR microtype (if rendered in DOM). */
.shopify-buy__btn, .shopify-buy__btn--cart-checkout, .shopify-buy__btn--close{
  font-family: var(--ocr) !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
}

/* responsive */
@media (max-width:980px){
  .releaseItem{ grid-column: span 12; }
}


.phaseTag{ font-size: 14px; }
  .phaseName{ font-size: 14px; }
}


/* phase masthead */
.phaseMasthead{
  position:relative;
  min-height: 74vh;
  display:grid;
  place-items:center;
  padding: 110px 20px 150px;
  background:
    radial-gradient(1200px 560px at 50% 42%, rgba(250,250,250,1) 0 52%, rgba(238,238,238,1) 72%, rgba(225,225,225,1) 100%);
  color:#0a0a0a;
  overflow:hidden;
}

.phaseMasthead::before{
  content:"";
  position:absolute; inset:-120px;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='900'%20height='900'%20viewBox='0%200%20900%20900'%3E%20%20%3Cfilter%20id='n'%3E%20%20%20%20%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.9'%20numOctaves='3'%20seed='8'%20stitchTiles='stitch'%20result='t'/%3E%20%20%20%20%3CfeColorMatrix%20type='matrix'%20values='%20%20%20%20%20%200%200%200%200%200%20%20%20%20%20%200%200%200%200%200%20%20%20%20%20%200%200%200%200%200%20%20%20%20%20%200%200%200%201%200'%20in='t'%20result='a'/%3E%20%20%20%20%3CfeTurbulence%20type='turbulence'%20baseFrequency='.015%20.07'%20numOctaves='2'%20seed='4'%20result='w'/%3E%20%20%20%20%3CfeDisplacementMap%20in2='w'%20in='t'%20scale='55'%20xChannelSelector='R'%20yChannelSelector='G'%20result='d'/%3E%20%20%3C/filter%3E%20%20%3Crect%20width='900'%20height='900'%20filter='url(%23n)'%20opacity='.55'/%3E%3C/svg%3E"),
    repeating-linear-gradient(0deg, rgba(0,0,0,.045) 0 1px, rgba(0,0,0,0) 1px 6px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.032) 0 1px, rgba(0,0,0,0) 1px 10px);
  background-size: 520px 520px, 100% 100%, 100% 100%;
  background-position: 0 0, 0 0, 0 0;
  mix-blend-mode:multiply;
  opacity:.85;
  filter: contrast(1.25) brightness(.98);
  animation: crumpleDrift 10s linear infinite;
  pointer-events:none;
}

.phaseMasthead::after{
  content:"";
  position:absolute; left:-10%; right:-10%; bottom:-6px;
  height: 46vh;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.92) 74%, rgba(0,0,0,1) 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 2px, rgba(0,0,0,0) 2px 10px);
  mix-blend-mode:multiply;
  transform: skewX(-10deg);
  pointer-events:none;
}

.phaseMasthead .phaseInner::before{
  /* glitch bands */
  content:"";
  position:absolute; inset:-40px;
  background:
    linear-gradient(90deg, rgba(255,42,42,.18), rgba(0,0,0,0) 35%, rgba(0,255,255,.14) 70%, rgba(0,0,0,0)),
    repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 3px, rgba(0,0,0,0) 3px 13px);
  opacity:.35;
  mix-blend-mode:overlay;
  filter: blur(.2px);
  animation: bandShift 5.5s steps(18,end) infinite;
  pointer-events:none;
  z-index:-1;
}

@keyframes crumpleDrift{
  0%{ background-position: 0 0, 0 0, 0 0; transform: translate3d(0,0,0) scale(1.02); }
  50%{ background-position: 260px -180px, 0 0, 0 0; transform: translate3d(-6px,4px,0) scale(1.025); }
  100%{ background-position: 520px -360px, 0 0, 0 0; transform: translate3d(0,0,0) scale(1.02); }
}

@keyframes bandShift{
  0%{ transform: translateX(-2%) translateY(0); clip-path: inset(22% 0 54% 0); }
  20%{ transform: translateX(3%) translateY(-1%); clip-path: inset(8% 0 72% 0); }
  42%{ transform: translateX(-4%) translateY(1%); clip-path: inset(40% 0 32% 0); }
  60%{ transform: translateX(2%) translateY(0); clip-path: inset(55% 0 18% 0); }
  100%{ transform: translateX(-2%) translateY(0); clip-path: inset(22% 0 54% 0); }
}

.phaseInner{
  position:relative;
  z-index:2;
  display:grid;
  place-items:center;
  gap:22px;
  text-align:center;
}

.phaseLogo{
  position:relative;
  width: min(520px, 70vw);
  aspect-ratio: 1/1;
  display:grid;
  place-items:center;
}

.phaseLogo img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter: contrast(1.35) brightness(.12);
}

.phaseLogoBase{ filter: contrast(1.45) brightness(.09); }
.phaseLogoGhost{
  position:absolute; inset:0;
  opacity:.20;
  mix-blend-mode:multiply;
  animation: phaseJit 6.2s steps(12,end) infinite;
}
.phaseLogoGhost.g1{ transform: translate(7px,-4px); }
.phaseLogoGhost.g2{ transform: translate(-6px,5px); animation-duration: 7.8s; }

@keyframes phaseJit{
  0%{ clip-path: inset(0 0 92% 0); }
  10%{ clip-path: inset(14% 0 60% 0); }
  22%{ clip-path: inset(42% 0 32% 0); }
  36%{ clip-path: inset(62% 0 10% 0); }
  52%{ clip-path: inset(0 0 0 0); }
  70%{ clip-path: inset(24% 0 46% 0); }
  86%{ clip-path: inset(46% 0 16% 0); }
  100%{ clip-path: inset(0 0 0 0); }
}

.phaseText{ display:grid; gap:10px; }
.phaseName{
  font-family: var(--ocr);
  letter-spacing: .22em;
  text-transform: lowercase;
  font-size: 18px;
}
.phaseTag{
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
  color: rgba(0,0,0,.82);
}

.phaseFade{
  position:absolute; left:0; right:0; bottom:0;
  height: 180px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.92) 100%);
  z-index:1;
}

@media (max-width: 720px){
  .phaseMasthead{ min-height: 66vh; padding: 92px 16px 140px; }
  .phaseTag{ font-size: 14px; }
  .phaseName{ font-size: 14px; }
}

/* v14 logo visibility */
.phaseLogo{
  width: min(430px, 86vw);
  aspect-ratio: auto;
}

.phaseLogo img{
  filter: none !important;
  width: 100%;
  height: auto;
  image-rendering: auto;
}

.phaseText{
  display:none; /* png already contains wordmark + strapline */
}

/* brighten background slightly so white mark pops less needed, but keep grunge */
.phaseMasthead{
  background:
    radial-gradient(1200px 560px at 50% 42%, rgba(255,255,255,1) 0 54%, rgba(246,246,246,1) 74%, rgba(232,232,232,1) 100%) !important;
}
.phaseMasthead::before{
  opacity:.68 !important;
  filter: contrast(1.22) brightness(1.02) !important;
}


/* v17: minimal Helvetica-style cleanup inspired by glitch minimalism references */
:root{
  --sans: "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Global typography */
body.v17{
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: .01em;
}

/* Keep OCR only in the very top label line */
body.v17 .site{
  font-family: var(--ocr);
  letter-spacing: .22em;
  text-transform: lowercase; /* fix: no uppercase */
}
body.v17 .sub{
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: none;
}

/* Remove decorative frames / clip-paths everywhere (negative space, flat composition) */
body.v17 .panel,
body.v17 .hub a,
body.v17 .coverLink,
body.v17 .metaCard,
body.v17 .headerBannerInner,
body.v17 .atMarkSvg,
body.v17 .btn{
  border: none !important;
  clip-path: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Increase negative space */
body.v17 .wrap{ padding-left: 28px; padding-right: 28px; }
body.v17 .hero{ padding-top: 28px; padding-bottom: 64px; }
body.v17 .sectionHead{ margin-bottom: 28px; }
body.v17 .releasesGrid{ gap: 34px; margin-top: 26px; }
body.v17 .releaseItem{ gap: 16px; }
body.v17 .tags{ margin-top: 14px; }

/* Masthead stays as-is; just give it a cleaner margin rhythm */
body.v17 .phaseMasthead{ margin-bottom: 22px; }
body.v17 .phaseMasthead::after{ opacity: .92; } /* keep the ink band */

/* Covers: simple, square, no frame; keep a subtle shadow only */
body.v17 .coverLink{
  background: transparent !important;
}
body.v17 .coverLink .coverArt img{
  background: transparent !important;
}
body.v17 .coverLink:before{ display:none !important; }
body.v17 .coverLink{
  box-shadow: 0 26px 120px rgba(0,0,0,.55) !important;
}
body.v17 .coverLink .badge{
  top: 10px;
  left: 10px;
}

/* Meta block: minimal, left aligned, lowercase for most copy */
body.v17 .metaCard{
  padding: 0 !important;
}
body.v17 .code{
  font-family: var(--ocr);
  letter-spacing: .22em;
  text-transform: lowercase;
  opacity: .82;
}
body.v17 .metaArtist{
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase; /* exception: artist name */
  margin-top: 6px;
}
body.v17 .metaTitle{
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: uppercase; /* exception: release title */
  opacity: .92;
}
body.v17 .tag{
  font-family: var(--sans);
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: .01em;
  padding: 0;
  margin-right: 12px;
  border: none;
  background: none;
  opacity: .78;
}
body.v17 .tag::before{
  content:"•";
  margin-right: 10px;
  opacity: .55;
}
body.v17 .tag:first-child::before{ content:""; margin-right:0; }

/* Format pill: minimal bar */
body.v17 .pill, body.v17 .pillAlt{
  background: rgba(255,42,42,.95) !important;
  color: #fff !important;
  font-family: var(--sans) !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  text-transform: lowercase !important;
  clip-path: none !important;
  padding: 6px 10px;
}
body.v17 .pillAlt{
  background: rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.9) !important;
}

/* Buttons: text-only CTA with underline, minimal glitch accent on hover */
body.v17 .btn,
body.v17 .btnPrimary{
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: lowercase;
  color: rgba(255,255,255,.92) !important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
body.v17 .btn .dot{ display:none !important; }
body.v17 .btn:hover, body.v17 .btnPrimary:hover{
  color: #fff !important;
  text-shadow: 2px 0 0 rgba(0,255,255,.55), -2px 0 0 rgba(255,42,42,.55);
}

/* Links hub: simpler */
body.v17 .hub{
  gap: 18px;
}
body.v17 .hub a{
  padding: 0 !important;
}
body.v17 .hub .name{
  font-family: var(--sans);
  font-weight: 800;
  text-transform: lowercase;
}
body.v17 .hub .note{
  font-family: var(--sans);
  font-weight: 700;
  text-transform: lowercase;
  opacity: .75;
}
body.v17 .hub .arrow{
  opacity: .45;
}

/* Footer badge: keep real size, but remove filters if desired later */
body.v17 .badgeFooter{
  filter: none !important;
  opacity: 1 !important;
}

/* Responsive spacing */
@media (max-width: 640px){
  body.v17 .wrap{ padding-left: 18px; padding-right: 18px; }
  body.v17 .releasesGrid{ gap: 26px; }
}


/* v18: UI/UX cleanup - bigger type, alternate sections, refined links & footer */
:root{
  --sans: "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

body.v17{
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
}

/* Top bar scale */
.nav .brandText .site{
  font-size: 14px;
  text-transform: lowercase;
}
.nav .brandText{
  gap: 6px;
}
.nav .brandText .sub{
  font-size: 14px;
  opacity: .82;
  max-width: 46ch;
}
.navLinks a{
  font-size: 15px;
}
.nav .btn{
  font-size: 15px;
}

/* Replace logo mark size */
.logoMark{
  width: 44px;
  height: 44px;
}
.logoMark img{
  object-fit: contain;
}

/* Section alternation */
.section{
  padding-top: 78px;
  padding-bottom: 78px;
}
.sectionDark{
  background: #070707;
  color: #f2f2f2;
}
.sectionLight{
  background: #f2f2f2;
  color: #0b0b0b;
}

/* Ensure headings readable */
.h2{
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: .01em;
  font-size: 30px;
}
.sectionLight .sub{
  color: rgba(0,0,0,.72);
}
.sectionDark .sub{
  color: rgba(255,255,255,.72);
}

/* Links list */
.linkList{
  margin-top: 24px;
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(0,0,0,.12);
}
.sectionDark .linkList{
  border-top-color: rgba(255,255,255,.12);
}
.linkRow{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(0,0,0,.10);
  text-decoration: none;
}
.sectionDark .linkRow{
  border-bottom-color: rgba(255,255,255,.12);
}
.linkRow .l{
  font-weight: 800;
  text-transform: lowercase;
}
.linkRow .r{
  opacity: .68;
  text-transform: lowercase;
  font-weight: 700;
}
.linkRow:hover{
  text-shadow: 2px 0 0 rgba(0,255,255,.45), -2px 0 0 rgba(255,42,42,.45);
}

.linksCTA{
  margin-top: 26px;
}
.ctaShop{
  font-weight: 800;
  text-transform: lowercase;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* Footer grid */
.footer{
  padding-top: 64px;
  padding-bottom: 64px;
}
.footGrid{
  display:grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 38px;
  align-items:start;
}
.footBrand{
  display:flex;
  gap: 18px;
  align-items:center;
}
.badgeFooter{
  width: 110px;
  height: auto;
}
.footSite{
  font-weight: 900;
  font-size: 18px;
  text-transform: lowercase;
}
.footSmall{
  margin-top: 6px;
  font-size: 14px;
  opacity: .75;
  font-weight: 700;
}
.footLinks{
  display:grid;
  gap: 12px;
  justify-items: start;
}
.footLinks a{
  font-weight: 800;
  text-transform: lowercase;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
  opacity: .92;
}
.footLinks a:hover{
  text-shadow: 2px 0 0 rgba(0,255,255,.45), -2px 0 0 rgba(255,42,42,.45);
}

/* Responsive */
@media (max-width: 840px){
  .section{ padding-top: 60px; padding-bottom: 60px; }
  .footGrid{ grid-template-columns: 1fr; }
  .badgeFooter{ width: 96px; }
  .navLinks{ display:none; }
}


/* v19: topbar scale + hero punch */
.nav .brandText .site{
  font-size: 28px !important; /* +100% from 14px */
  letter-spacing: .08em;
}
.nav .brandText .sub{
  font-size: 14px; /* keep readable but secondary */
  max-width: 52ch;
}

/* Make nav height breathe with bigger brand */
.nav{
  padding-top: 18px;
  padding-bottom: 18px;
}

/* Hero punch block */
.heroPunch{
  margin-top: 16px;
  margin-bottom: 34px;
  padding-top: 10px;
}
.heroKicker{
  font-family: var(--ocr);
  letter-spacing: .24em;
  text-transform: lowercase;
  opacity: .75;
  font-size: 12px;
}
.heroTitle{
  margin-top: 14px;
  font-family: var(--sans);
  font-weight: 900;
  letter-spacing: .01em;
  text-transform: lowercase;
  font-size: clamp(38px, 5.2vw, 74px);
  line-height: .95;
}
.heroMeta{
  display:block;
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 700;
  opacity: .72;
  letter-spacing: .01em;
  max-width: 56ch;
}

/* Glitch word: minimal, punchy */
.glitchWord{
  position: relative;
  display: inline-block;
}
.glitchWord::before,
.glitchWord::after{
  content: attr(data-t);
  position:absolute;
  left:0; top:0;
  width:100%;
  overflow:hidden;
  pointer-events:none;
  opacity:.9;
}
.glitchWord::before{
  transform: translate(2px,0);
  color: rgba(0,255,255,.9);
  mix-blend-mode: screen;
  clip-path: inset(0 0 52% 0);
  animation: glitchSlice 3.6s steps(12,end) infinite;
}
.glitchWord::after{
  transform: translate(-2px,0);
  color: rgba(255,42,42,.95);
  mix-blend-mode: screen;
  clip-path: inset(54% 0 0 0);
  animation: glitchSlice 4.4s steps(14,end) infinite;
}

@keyframes glitchSlice{
  0%{ clip-path: inset(8% 0 72% 0); transform: translate(2px,0); }
  14%{ clip-path: inset(42% 0 34% 0); transform: translate(-3px,0); }
  28%{ clip-path: inset(18% 0 58% 0); transform: translate(3px,0); }
  44%{ clip-path: inset(62% 0 12% 0); transform: translate(-2px,0); }
  60%{ clip-path: inset(30% 0 44% 0); transform: translate(2px,0); }
  100%{ clip-path: inset(8% 0 72% 0); transform: translate(2px,0); }
}

/* Make releases section feel more "poster" */
#releases.sectionDark{
  position:relative;
  overflow:hidden;
}
#releases.sectionDark::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 18% 14%, rgba(255,42,42,.14), rgba(0,0,0,0) 60%),
    radial-gradient(900px 520px at 82% 30%, rgba(0,255,255,.10), rgba(0,0,0,0) 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, rgba(0,0,0,0) 1px 6px);
  opacity:.55;
  pointer-events:none;
}
#releases .wrap{
  position:relative;
  z-index:1;
}

/* Slightly bigger release meta for punch */
.metaArtist{ font-size: 18px !important; }
.metaTitle{ font-size: 14px !important; }
.code{ font-size: 12px !important; }

/* Mobile tuning */
@media (max-width: 640px){
  .nav .brandText .site{ font-size: 24px !important; }
  .heroTitle{ font-size: 40px; }
  .heroMeta{ font-size: 15px; }
}


/* v20: hero card refinements */
.coverCode{
  font-family: var(--ocr);
  letter-spacing: .22em;
  text-transform: lowercase;
  opacity: .78;
  font-size: 12px;
  margin-bottom: 10px;
  align-self: flex-start;
}

/* remove any old badge styles (safe) */
.coverLink .badge{ display:none !important; }

/* Make artist/title bigger, and keep styles right under title */
.metaArtist{ font-size: 22px !important; }
.metaTitle{ font-size: 16px !important; margin-top: 4px; }

/* tags directly under title: one line-ish, subtle */
.metaTop .tags{
  margin-top: 12px;
  display:flex;
  flex-wrap:wrap;
  gap: 0;
}
.metaTop .tag{
  font-size: 15px;
  opacity:.72;
}
.metaTop .tag::before{
  margin-right: 10px;
}


/* v21: enforce Buy Button = button-only (avoid duplicate covers) */
.shopify-buy__product__image,
.shopify-buy__product__title,
.shopify-buy__product__price,
.shopify-buy__product__variant-title,
.shopify-buy__product__description{
  display: none !important;
}
.shopify-buy__btn{
  border-radius: 0 !important;
  text-transform: lowercase !important;
  letter-spacing: .02em !important;
  font-family: "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
}

/* v21: overlay vignette + scratches */
.fxOverlay{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: .22;
  background:
    radial-gradient(1200px 720px at 50% 40%, rgba(0,0,0,0) 0 55%, rgba(0,0,0,.55) 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, rgba(0,0,0,0) 1px 6px);
  mix-blend-mode: overlay;
}

/* scratches layer using SVG noise */
.fxOverlay::after{
  content:"";
  position:absolute;
  inset:-20%;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='900'%20height='900'%20viewBox='0%200%20900%20900'%3E%20%20%3Cfilter%20id='s'%3E%20%20%20%20%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.75'%20numOctaves='2'%20seed='7'%20result='n'/%3E%20%20%20%20%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%200%200%200%201%200'%20in='n'%20result='a'/%3E%20%20%3C/filter%3E%20%20%3Crect%20width='900'%20height='900'%20filter='url(%23s)'%20opacity='.55'/%3E%20%20%3Cg%20stroke='%23fff'%20stroke-width='2'%20opacity='.35'%3E%20%20%20%20%3Cpath%20d='M40%20120%20L860%2090'/%3E%20%20%20%20%3Cpath%20d='M20%20420%20L880%20360'/%3E%20%20%20%20%3Cpath%20d='M60%20740%20L840%20680'/%3E%20%20%20%20%3Cpath%20d='M110%2030%20L260%20870'/%3E%20%20%20%20%3Cpath%20d='M640%2010%20L820%20890'/%3E%20%20%3C/g%3E%3C/svg%3E");
  background-size: 520px 520px;
  mix-blend-mode: overlay;
  opacity: .35;
  transform: rotate(-2deg);
  animation: scratchDrift 9s linear infinite;
}

@keyframes scratchDrift{
  0%{ transform: translate3d(0,0,0) rotate(-2deg); }
  50%{ transform: translate3d(-14px,10px,0) rotate(-2deg); }
  100%{ transform: translate3d(0,0,0) rotate(-2deg); }
}


/* v22: stronger overlay (more scratches, higher contrast) */
.fxOverlay{
  opacity: .34 !important;
  filter: contrast(1.35) brightness(.98) !important;
}
.fxOverlay::after{
  opacity: .62 !important;
  background-size: 420px 420px !important;
}

/* v22: ensure buy button root visible */
.shopify-buy__product{
  display: block !important;
}

/* v22: video section */
.videoGrid{
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}
.videoLabel{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
}
.videoLabel .code{
  font-family: var(--ocr);
  letter-spacing: .22em;
  text-transform: lowercase;
  opacity: .75;
  font-size: 12px;
}
.videoLabel .metaTitle{
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: lowercase;
  opacity: .92;
}
.videoFrame{
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: rgba(255,255,255,.06);
}
.videoFrame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  filter: contrast(1.05);
}
@media (max-width: 860px){
  .videoGrid{ grid-template-columns: 1fr; }
}

/* v23: contact section on light background */
.sectionLight .hub a,
.sectionLight .hub .name,
.sectionLight .hub .note,
.sectionLight .hub .arrow{
  color: #0b0b0b !important;
}
.sectionLight .hub .note{ opacity: .72; }
.sectionLight .hub a:hover{
  text-shadow: 2px 0 0 rgba(0,255,255,.30), -2px 0 0 rgba(255,42,42,.30);
}

/* v23: video label simplified */
.videoLabel{
  justify-content: flex-start;
}
.videoLabelText{
  font-family: var(--sans);
  font-weight: 900;
  letter-spacing: .01em;
  text-transform: none;
  opacity: .92;
}



/* v23: overlay harsher */
.fxOverlay{
  opacity: .42 !important;
  filter: contrast(1.55) brightness(.95) !important;
}
.fxOverlay::after{
  opacity: .78 !important;
}


/* v24: mobile hero redesign for cleaner rhythm */
@media (max-width: 640px){
  /* hero punch */
  .heroKicker{ font-size: 11px; opacity: .68; }
  .heroTitle{ font-size: 34px; line-height: .98; }
  .heroMeta{ font-size: 14px; max-width: 34ch; }

  /* release cards: poster-like stack */
  .releasesGrid{
    gap: 44px;
  }
  .releaseItem{
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
  }
  .coverCode{
    margin: 8px 0 4px;
    font-size: 11px;
    letter-spacing: .26em;
  }
  .coverLink{
    width: 100%;
    max-width: 100%;
  }
  .cover{
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
  }

  /* meta card becomes borderless list */
  .metaCard{
    padding: 0;
    background: transparent;
    border: 0;
  }
  .metaTop{
    margin-top: 10px;
  }
  .code{
    font-size: 11px !important;
    opacity: .78;
  }
  .metaArtist{ font-size: 26px !important; line-height: 1.05; }
  .metaTitle{ font-size: 18px !important; opacity: .95; }
  .metaTop .tags{
    margin-top: 10px;
    gap: 10px 12px;
  }
  .metaTop .tag{
    font-size: 14px;
    opacity: .7;
    padding: 0;
  }
  .metaTop .tag::before{ display:none; }

  /* format pill + CTA row */
  .metaRow{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
  }
  .pill{
    font-size: 12px;
    padding: 8px 10px;
  }
  .metaActions{
    margin-top: 16px;
    display: grid;
    gap: 10px;
  }
  /* Shopify button full-width */
  .shopify-buy__btn{
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Ensure the embedded button container doesn't collapse */
  #product-component-1770385985294,
  #product-component-1770467028654{
    width: 100%;
    min-height: 56px;
  }
  .btnPrimary{
    width: 100%;
    text-align:center;
  }
  .btnPrimary, .btn{
    min-height: 52px;
  }
  .btnSecondary{
    width: 100%;
    text-align:center;
  }
}


/* v31: release pages - cover hero (no masthead) */
.releaseHero{
  padding: 84px 0 32px;
}
.releaseHero .wrap{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 34px;
  align-items:end;
}
.releaseHero .coverBig{
  width: 100%;
  max-width: 860px;
}
.releaseHero .coverBig img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  /* responsive cover: never behave like an absolute background layer */
  position: static;
  /* keep it fully visible and prevent spill on small screens */
  max-height: 76vh;
  object-fit: contain;
  box-shadow: 0 18px 70px rgba(0,0,0,.45);
}
.releaseHero .metaSide{
  padding-bottom: 10px;
}
.releaseHero .k{
  font-family: var(--ocr);
  letter-spacing: .26em;
  font-size: 12px;
  opacity: .7;
  text-transform: lowercase;
}
.releaseHero .artist{
  font-family: var(--sans);
  font-weight: 900;
  font-size: 46px;
  line-height: 1.0;
  margin-top: 10px;
}
.releaseHero .title{
  font-family: var(--sans);
  font-weight: 800;
  font-size: 22px;
  margin-top: 12px;
  text-transform: lowercase;
  opacity: .92;
}
.releaseHero .ctaRow{
  margin-top: 18px;
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  align-items:center;
}
.releaseHero .pill{
  font-size: 12px;
}
.releaseText{
  max-width: 78ch;
  font-size: 16px;
  line-height: 1.7;
  opacity: .92;
}
.releaseText p{ margin: 0 0 14px; }
.releaseText p:last-child{ margin-bottom:0; }
.creditsBlock{
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.65;
  opacity: .85;
}
.pressList{
  margin-top: 18px;
  display:grid;
  gap: 10px;
}
.pressList a{
  display:flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,.16);
}
.sectionLight .pressList a{
  border-top: 1px solid rgba(0,0,0,.14);
}
.pressList a .l{
  font-weight: 900;
  text-transform: lowercase;
}
.pressList a .r{
  opacity: .7;
  text-transform: lowercase;
}
@media (max-width: 980px){
  .releaseHero .wrap{ grid-template-columns: 1fr; }
  .releaseHero .artist{ font-size: 40px; }
}
@media (max-width: 640px){
  .releaseHero{ padding-top: 70px; }
  .releaseHero .artist{ font-size: 34px; }
  .releaseHero .title{ font-size: 18px; }
  .releaseHero .ctaRow{ display:grid; }
  .releaseHero .ctaRow .btn{ width:100%; text-align:center; }
}

@media (max-width: 520px){
  .releaseHero .coverBig{ max-width: 100%; }
  .releaseHero .coverBig img{ max-height: 60vh; }
}


/* v32: polished release pages (mobile-first cover layout) */
.releaseCover{
  padding: 86px 0 0;
  background: transparent;
}
.releaseCover .wrap{ max-width: 1200px; }
.releaseCoverGrid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 34px;
  align-items: end;
}
.releaseCoverImg{
  width: 100%;
  /* Responsive cover art */
  aspect-ratio: 1/1;
  object-fit: contain;
  background: rgba(0,0,0,.55);
  display:block;
  box-shadow: 0 18px 70px rgba(0,0,0,.45);
}

/*
  Some release pages omit the .releaseCoverImg class.
  Make the cover responsive anyway by targeting the img inside
  the release cover grid.
*/
.releaseCoverGrid .releaseCoverArt img{
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  background: rgba(0,0,0,.55);
  box-shadow: 0 18px 70px rgba(0,0,0,.45);
}

/*
  Mobile responsive fix
  ---------------------
  The release cover was effectively behaving like a big fixed layer on some
  mobile layouts (two-column grid + 1:1 aspect), making the cover feel huge and
  pushing the content far down.

  Fix:
  - Collapse the 2-column grid to a single column on small screens
  - Remove forced square aspect ratio, let the image keep its native ratio
  - Cap the rendered height using svh/dvh so it never exceeds the visible
    viewport on mobile browsers
*/
@media (max-width: 900px){
  .releaseCover{ padding-top: 72px; }
  .releaseCoverGrid{
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
  }
  .releaseCoverImg,
  .releaseCoverGrid .releaseCoverArt img{
    aspect-ratio: auto;
    height: auto;
    max-height: 70svh;
    max-height: 70dvh;
    object-fit: contain;
  }
}

@media (max-width: 520px){
  .releaseCover{ padding-top: 64px; }
}
.releaseMeta{
  padding-bottom: 10px;
}
.releaseMeta .k{
  font-family: var(--ocr);
  letter-spacing: .26em;
  font-size: 12px;
  opacity: .7;
  text-transform: lowercase;
}
.releaseMeta .artist{
  font-family: var(--sans);
  font-weight: 900;
  font-size: 46px;
  line-height: 1.0;
  margin-top: 10px;
  letter-spacing: .01em;
}
.releaseMeta .title{
  font-family: var(--sans);
  font-weight: 800;
  font-size: 22px;
  margin-top: 10px;
  text-transform: lowercase;
  opacity: .92;
}
.releaseMeta .metaRow{
  margin-top: 16px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
}
.releaseMeta .ctaRow{
  margin-top: 16px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
}
.releaseMeta .ctaRow .btn{ padding: 14px 18px; }
.releaseMeta .ctaRow .btnPrimary{ min-width: 210px; justify-content:center; }

@media (max-width: 980px){
  .releaseCoverGrid{ grid-template-columns: 1fr; gap: 18px; }
  .releaseMeta .artist{ font-size: 40px; }
}
@media (max-width: 640px){
  .releaseCover{
    padding-top: 66px;
  }
  .releaseCover .wrap{ padding: 0; }
  .releaseCoverGrid{ gap:0; }
  .releaseCoverImg,
  .releaseCoverGrid .releaseCoverArt img{
    /* On small screens the cover was too tall; constrain by viewport height */
    aspect-ratio: auto;
    height: auto;
    max-height: 70svh;
    max-height: 70dvh;
    box-shadow:none;
  }
  .releaseMeta{
    margin-top:-84px;
    padding: 18px 18px 20px;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.65) 22%, rgba(0,0,0,.92) 100%);
    backdrop-filter: blur(2px);
  }
  .releaseMeta .artist{ font-size: 34px; }
  .releaseMeta .title{ font-size: 18px; }
  .releaseMeta .ctaRow{ display:grid; }
  .releaseMeta .ctaRow .btnPrimary,
  .releaseMeta .ctaRow .btnSecondary{ width:100%; }
  /* Ensure Shopify buy button uses full width and doesn't inject image */
  .shopify-buy__product__image{ display:none !important; }
  .shopify-buy__btn, .shopify-buy__btn-wrapper{ width:100% !important; }
}

/* release tracklist table (improve readability) */
.trackTable{width:100%;max-width:760px;margin:0 auto;border-collapse:collapse;font-family:var(--sans);font-size:16px;line-height:1.35}
.trackTable td{padding:10px 0;border-bottom:1px solid rgba(0,0,0,.12)}
.sectionDark .trackTable td{border-bottom-color:rgba(255,255,255,.12)}
.trackTable .num{width:64px;color:rgba(0,0,0,.55);font-variant-numeric:tabular-nums;letter-spacing:.06em}
.sectionDark .trackTable .num{color:rgba(255,255,255,.55)}
.trackTable .title{padding-right:16px}
.trackTable .time{width:84px;text-align:right;color:rgba(0,0,0,.65);font-variant-numeric:tabular-nums}
.sectionDark .trackTable .time{color:rgba(255,255,255,.65)}
@media (max-width:640px){
  .trackTable{font-size:15px}
  .trackTable .num{width:56px}
  .trackTable .time{width:72px}
}

/* ===== Release pages (releaseDetail markup) ===== */
.releaseDetail{
  padding-top: 90px;
}

.releaseHeroGrid{
  width: min(1100px, calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 40px;
  align-items: start;
}

.releaseCover{
  display: block;
  width: 100%;
}

.releaseCover img{
  width: 100%;
  height: auto;
  display: block;
  max-height: min(70vh, 760px);
  object-fit: contain;
}

@media (max-width: 980px){
  .releaseHeroGrid{
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 640px){
  .releaseDetail{
    padding-top: 72px;
  }
  .releaseHeroGrid{
    width: calc(100% - 24px);
  }
  .releaseCover img{
    /* Keep tall/portrait covers from dominating the first screen */
    max-height: 52vh;
  }
}