:root{--gold:#ffcf48;--paper:#fff;--ink:#090909;--muted:#aaa;--line:#343434}
*{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--paper);font:16px/1.55 Arial,sans-serif}
a{color:inherit;text-underline-offset:4px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
header,.wrap,footer,.intro{max-width:1200px;width:90%;margin:auto}
header,footer,nav{display:flex;align-items:center;gap:28px}
header{min-height:90px;position:relative}header>a{margin-right:25px}.wordmark{display:block;width:95px}
nav a,button,summary,.button,.outline,small{font:14px/1.4 monospace}nav a{text-decoration:none}nav a:hover{text-decoration:underline}
header details{display:none}
h1,h2,h3,p{margin:0}h1,h2,h3,.ribbon span{font-family:"Arial Black","Helvetica Neue",sans-serif;text-transform:uppercase;letter-spacing:-.045em;line-height:1.05}
h1{font-size:clamp(58px,6.5vw,99px)}h2,.ribbon span{font-size:clamp(36px,4.4vw,65px)}h3{font-size:clamp(22px,2.5vw,34px)}em{color:var(--muted);font-style:normal}
.intro{display:grid;grid-template-columns:45% 55%;align-items:center;min-height:min(660px,76vh);padding:36px 0 64px}.intro>div{padding:0 20px 0 0}.intro p,.contact p{margin:24px 0 32px}.intro img{width:100%;height:clamp(360px,39vw,560px);object-fit:cover;object-position:50% 48%}
.button,.outline{display:inline-block;padding:13px 25px;text-decoration:none}.button{background:var(--gold);color:#101010}.outline{border:1px solid var(--gold)}
.spotlight,.questions,.contact,.team{display:grid;grid-template-columns:42% 1fr;gap:9%;align-items:center;padding:80px 0}.spotlight img,.questions img{width:min(90%,330px);margin-top:26px}.pull{border-left:2px solid var(--gold);color:var(--gold);padding-left:18px;font:clamp(21px,2.3vw,32px)/1.3 monospace}.release-copy p+p{margin:24px 0}.release-copy .outline{margin-top:16px}
.ribbon{display:flex;align-items:center;overflow:hidden;white-space:nowrap;gap:35px;margin:42px 0}.ribbon h2,.ribbon span{font-size:clamp(58px,7.5vw,115px);font-weight:800;flex:none}.ribbon span{color:transparent;-webkit-text-stroke:1px #b6b6b6}
.artists{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.artists img{width:100%;aspect-ratio:1;object-fit:cover;object-position:center 22%;display:block;margin-bottom:12px}.artists a{text-decoration:none;font-family:monospace}.artists span{margin-left:10px;color:var(--gold)}
.story,.catalogue{padding:90px 0 30px}.story>h2,.catalogue>h2{text-align:center;margin-bottom:36px}.story-grid{display:grid;grid-template-columns:22% 1fr}.choices button{display:block;width:100%;text-align:left;padding:18px;background:transparent;border:0;color:white;cursor:pointer}.choices button[aria-pressed=true]{background:#222;color:var(--gold)}.story-content{background:#222;padding:38px;display:grid;grid-template-columns:40% 1fr;gap:30px;align-items:center}.story-content img,.team img{width:100%}.story-content p,article p,.team p{margin:12px 0 20px}
.tracks{max-width:580px;margin:auto;border-left:1px solid var(--gold);padding-left:26px}.tracks article{padding:24px 30px;border:1px solid #796521;margin-bottom:28px;background:#171717}.tracks small{color:var(--gold)}.tracks h3{margin-top:8px}.questions details{padding:20px;border-bottom:1px solid #474747;background:#202020}.questions summary{cursor:pointer;font-size:16px}.questions p{padding-top:15px}.team{padding-top:0}.team a{display:inline-block;margin-top:15px}.contact{border-top:1px solid var(--line)}.contact img{width:min(80%,310px);justify-self:center}footer{justify-content:space-between;padding:32px 0;border-top:1px solid var(--line);font-size:13px}
@media(max-width:740px){header{min-height:70px;justify-content:space-between}.wordmark{width:78px}header>nav{display:none}header details{display:block}header summary{cursor:pointer;padding:10px}header details nav{position:absolute;right:0;top:58px;background:#202020;padding:20px;flex-direction:column;align-items:start;gap:16px;z-index:5}.intro,.spotlight,.questions,.team,.contact{grid-template-columns:1fr;gap:25px;padding:35px 0;min-height:0}.intro img{height:auto}.intro p,.contact p{margin:15px 0 22px}.artists{grid-template-columns:1fr 1fr;gap:20px 14px}.story,.catalogue{padding:44px 0 12px}.story-grid,.story-content{display:block}.choices{display:flex}.choices button{width:auto;padding:12px}.story-content{padding:20px}.story-content img{margin-bottom:20px}.ribbon{margin:30px 0}.questions img,.contact img{max-width:175px}.tracks{padding-left:14px}.tracks article{padding:20px}footer{gap:16px;flex-wrap:wrap}}
@font-face{font-family:Audiowide;src:url("audiowide.ttf") format("truetype");font-display:swap}
body{background:#000}
h1,h2,.ribbon h2,.ribbon span{font-family:Audiowide,"Arial Black",sans-serif;font-weight:400;letter-spacing:-.035em}
.intro{grid-template-columns:39fr 61fr;min-height:0;padding:48px 0 60px}
.intro h1{font-size:clamp(32px,4.4vw,67px);line-height:1.1}
.intro p{margin-bottom:40px}
.sleeves{margin:0;position:relative;isolation:isolate;aspect-ratio:1.36;perspective:1100px}
.sleeve,.vinyl{position:absolute;filter:drop-shadow(0 14px 10px #0009)}
.sleeves .sleeve img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.previous{width:52%;left:1%;top:22%;transform:rotateY(26deg) rotateZ(-9deg);filter:brightness(.68)}
.featured{width:57%;left:22%;top:12%;transform:rotateY(-12deg) rotateZ(5deg);box-shadow:1px 2px 0 #c5bca0}
.vinyl{width:54%;aspect-ratio:1;right:0;top:21%;border-radius:50%;border:1px solid #57524a;background:repeating-radial-gradient(circle,transparent 0 2px,#ffffff16 2.4px,transparent 3px),conic-gradient(from 35deg,#101010,#685f47 13%,#111 25%,#353532 47%,#111 53%,#a49776 65%,#161616 78%,#101010)}
.spotlight{align-items:start}.release-copy{padding-top:8px}.artists a{text-align:center}
.tracks{counter-reset:releases}.tracks article{counter-increment:releases;position:relative}.tracks article:before{content:counter(releases,decimal-leading-zero);display:block;color:var(--gold);font:13px monospace;letter-spacing:.12em;border-bottom:1px solid #544626;padding-bottom:10px;margin-bottom:12px}
@media(max-width:740px){.intro{grid-template-columns:1fr;padding:32px 0 10px;gap:12px}.intro h1{font-size:clamp(34px,9vw,62px)}.intro p{margin-bottom:22px}.sleeves{width:100%;max-width:520px;justify-self:center}.spotlight{gap:18px}.release-copy{padding-top:0}}
.intro>.deck{min-width:0;padding:0}.deck .sleeves{width:100%;max-width:none;aspect-ratio:1.61}.deck .previous{width:48%;left:3%;top:14%;transform:rotate(-13deg);filter:brightness(.82)}.deck .middle{width:51%;left:16%;top:10%;transform:rotate(-6deg)}.deck .featured{width:55%;left:31%;top:7%;transform:rotate(5deg)}.deck .vinyl{width:47%;right:0;top:20%}
.deck-bar{display:flex;align-items:center;gap:12px;margin:8px 2% 0 4%;padding-top:14px;border-top:1px solid #373737}.serial,.deck-credit span,.record-grid small{font:12px/1.4 monospace}.serial,.record-grid small{color:var(--gold)}.deck-credit{flex:1}.deck-credit b,.deck-credit span{display:block}.deck-credit span{color:#bbb}.deck button{background:none;border:1px solid #555;color:white;cursor:pointer;width:42px;height:42px;font-size:18px}.deck button:hover{border-color:var(--gold)}
.record-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 24px}.record-grid article img{width:100%;aspect-ratio:1;display:block}.record-grid article div{padding-top:12px}.record-grid h3{margin-top:5px;font-size:clamp(19px,2vw,30px)}.record-grid a{text-decoration:none}.record-grid a:hover{text-decoration:underline}.record-grid p{margin:5px 0;color:#bbb}
@media(max-width:740px){.record-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 14px}.deck-bar{gap:8px;margin-left:0;margin-right:0}.deck{margin-top:12px}.deck-credit b{font-size:14px}.serial{font-size:11px}}


.cover-rack {
  position: relative;
  isolation: isolate;
  margin: 0;
  aspect-ratio: 1.68;
}
.deck .cover-slot {
  position: absolute;
  width: 43%;
  height: auto;
  aspect-ratio: 1;
  left: calc(3% + var(--slot) * 10%);
  top: calc(8% + var(--slot) * 2%);
  z-index: var(--slot);
  background: #151515;
  padding: 0;
  border: 0;
  transform: rotate(calc(-6deg + var(--slot) * 1.8deg));
  box-shadow: -3px 5px 14px #0009;
  transition: transform 240ms ease-out, box-shadow 240ms ease-out;
}
.cover-rack .cover-slot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  outline: 1px solid #ffffff38;
}
.deck .cover-slot.revealed {
  z-index: 8;
  transform: translateY(-5%) rotate(0deg) scale(1.035);
  box-shadow: 0 10px 24px #000b;
}
.cover-slot.revealed img { outline-color: #c9ad73; }
.rotation[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .deck .cover-slot { transition: none; }
}

.guest-credit { margin-top: 10px; max-width: 35ch; }
.guest-credit .outline { margin: 0; }

.deck-bar .rotation {
  width: auto;
  padding: 0 12px;
  font: 13px monospace;
}
:is(a, button, summary):is(:hover, :focus-visible) {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.cover-rack .cover-slot:is(:hover, :focus-visible) { outline: none; }
.cover-rack .cover-slot:is(:hover, :focus-visible) img {
  outline: 2px solid var(--gold);
}

.artist-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.artist-marquee { overflow: hidden; margin: 42px 0 clamp(48px, 8vw, 110px); }
.ribbon-track, .ribbon-repeat { display: flex; width: max-content; }
.ribbon-track { animation: artist-scroll 40s linear infinite; }
.ribbon-repeat {
  flex: none;
  font: 400 clamp(54px, 6.5vw, 96px)/1.15 Audiowide, sans-serif;
  letter-spacing: -.045em;
  text-transform: uppercase;
}
.ribbon-repeat b, .ribbon-repeat i { font: inherit; padding-right: .05em; }
.ribbon-repeat i { color: transparent; -webkit-text-stroke: 1px #aaa; }
@keyframes artist-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ribbon-track { animation: none; } }

.artists {
  max-width: 1100px;
  margin-inline: auto;
  grid-template-columns: repeat(4, minmax(0, 230px));
  justify-content: space-between;
  gap: clamp(18px, 4vw, 60px);
}
.artists .portrait {
  display: block;
  overflow: hidden;
  margin: 0 0 15px;
  background: var(--gold);
  border-radius: 0 0 0 23px;
  padding-bottom: 4px;
}
.artists .portrait img {
  margin: 0;
  border-radius: 0 0 0 21px;
  filter: grayscale(1);
  object-position: 50% 23%;
}
.artists :is(a, .artist-photo):is(:hover, :focus-visible) { outline: none; }
.artists :is(a, .artist-photo):is(:hover, :focus-visible) .portrait { outline: 2px solid var(--gold); }
.artists strong { font: 600 15px/1.4 monospace; }
@media (max-width: 740px) {
  .artists { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; max-width: 480px; }
  .artists .portrait { margin-bottom: 10px; }
}

.record-grid {
  max-width: 1100px;
  margin-inline: auto;
  grid-template-columns: repeat(4, minmax(0, 230px));
  justify-content: space-between;
  gap: 44px clamp(18px, 4vw, 60px);
}
.record-grid h3 { font-size: clamp(18px, 1.55vw, 23px); }
.sleeve-preview {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}
.sleeve-preview img {
  transition: transform 320ms cubic-bezier(.2,.8,.2,1), box-shadow 320ms;
  transform-origin: center 72%;
  pointer-events: none;
}
@media (hover: hover) and (min-width: 741px) {
  .sleeve-preview:is(:hover, :focus-visible) { z-index: 2; outline: none; }
  .sleeve-preview:is(:hover, :focus-visible) img {
    transform: scale(1.65) rotate(-2deg);
    box-shadow: 0 0 0 2px var(--gold), 0 16px 50px #000c;
  }
  .record-grid article:nth-child(4n+1) img { transform-origin: left 72%; }
  .record-grid article:nth-child(4n) img { transform-origin: right 72%; }
}
.art-view {
  max-width: 94vw;
  padding: 12px;
  border: 1px solid var(--gold);
  background: #101010;
  color: white;
}
.art-view::backdrop { background: #000d; }
.art-view img { display: block; width: min(70vh, 78vw, 600px); }
.art-view button { display: block; margin: 0 0 10px auto; cursor: pointer; background: transparent; border: 0; color: white; }
.art-view p { margin-top: 10px; font-family: monospace; }
@media (max-width: 740px) {
  .record-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; max-width: 480px; }
}
@media (prefers-reduced-motion: reduce) { .sleeve-preview img { transition: none; } }

@media (min-width: 741px) {
  .artists { grid-template-columns: repeat(4, minmax(0, 230px)); justify-content: space-between; }
}
.artists .portrait img { transition: filter 200ms ease; }
.artists :is(a, .artist-photo):is(:focus-visible, :active, .in-colour) img { filter: none; }
@media (hover: hover) {
  .artists :is(a, .artist-photo):hover img { filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .artists .portrait img { transition: none; }
}

header > a:has(.wordmark):hover:not(:focus-visible) { outline: none; }

.artist-photo { align-self: start; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; text-align: center; }

footer a, .team a { text-decoration: none; }
header nav a:is(:hover, :focus-visible),
footer a:is(:hover, :focus-visible),
.team a:is(:hover, :focus-visible) {
  outline: none;
  text-decoration: underline solid var(--gold) 2px;
  text-underline-offset: 5px;
}

.partner-logo { display: inline-block; max-width: 100%; }
.partner-logo img { display: block; width: 180px; max-width: 100%; height: auto; }

/* Keep the full music-note mark and the Deftwave wordmark. */
.partner-logo img {
  clip-path: polygon(0 0, 100% 0, 100% 64%, 29% 64%, 29% 100%, 0 100%);
}

.events { padding-block: clamp(50px,8vw,110px); }
.event-grid { display:grid; grid-template-columns:repeat(2,minmax(0,290px)); gap:clamp(20px,3vw,44px); }
.event-art { position:relative; margin-bottom:16px; }
.event-art img { width:100%; aspect-ratio:1 / 1; display:block; }
.event-status { display:inline-block; margin-bottom:8px; padding:5px 10px; background:#121212; color:#ffda46; font:bold 13px/1.3 monospace; }
@media(max-width:640px){ .event-grid { grid-template-columns:minmax(0,260px); gap:30px; } }
.events h2 { margin-bottom: 20px; }
.events article p { margin: 6px 0; }
.listen { display: grid; grid-template-columns: minmax(0,420px) minmax(0,1fr); align-items: center; gap: 7%; padding-block: 6vw; }
.listen > img { width: 100%; }
.listen h1 { font-size: clamp(36px,5vw,74px); margin-block: 8px 35px; }
.listen h2 { font: 16px monospace; text-transform: none; }
.services { display:flex; flex-wrap:wrap; gap:12px; margin-top:12px; }
.services a { display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border:1px solid #555; text-decoration:none; }
.services svg { width:24px; height:24px; }
@media(max-width:740px){.listen { grid-template-columns:1fr; gap:25px; }.listen > img { max-width:420px; }}



.event-grid article:first-child .event-art img { transform-origin: left 72%; }

.record-grid .release-card { display: block; }
.record-grid .release-card:is(:hover, :focus-visible) { outline: none; text-decoration: none; }
.release-card .sleeve-preview { cursor: pointer; }
.release-card:is(:hover, :focus-visible) h3 {
  text-decoration: underline solid var(--gold) 2px;
  text-underline-offset: 0.18em;
}
@media (hover: hover) and (min-width: 741px) {
  .release-card .sleeve-preview:hover img { box-shadow: 0 16px 50px #000c; }
}

.song-video { margin-top: 2rem; }
.song-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

.video-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
.video-grid iframe { width: 100%; aspect-ratio: 16 / 9; display: block; border: 0; }
.video-grid h3 { margin-top: 16px; }
.video-grid p { margin: 4px 0 12px; color: #bbb; }
.video-grid a { text-decoration: none; }
.video-grid a:is(:hover, :focus-visible) { outline: none; text-decoration: underline 2px var(--gold); text-underline-offset: 4px; }
@media (max-width: 740px) { .video-grid { grid-template-columns: 1fr; } }

.video-preview { display:block; position:relative; aspect-ratio:16/9; background:#111; }
.video-preview img { display:block; width:100%; height:100%; object-fit:cover; }
.video-preview::after { content:"▶"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%; width:52px; height:52px; display:grid; place-items:center; color:white; background:#121212e6; font:22px sans-serif; }
.video-preview:is(:hover,:focus-visible)::after { color:var(--gold); }