/* ============================================================
   EXTATIC Records — V4
   Display : Helvetica Neue LT Std 83 Heavy Extended  (the artwork font)
             Helvetica Neue LT Std 87 Heavy Condensed (tall stacks)
   Text    : Monument Grotesk        (ABC Dinamo)
   Data    : Monument Grotesk Mono   — always uppercase
   ============================================================ */

@font-face{font-family:"HN Extended";src:url("/fonts/HelveticaNeueLTStd-HvEx.woff2") format("woff2");
  font-weight:750;font-style:normal;font-display:swap}
@font-face{font-family:"HN Condensed";src:url("/fonts/HelveticaNeueLTStd-HvCn.woff2") format("woff2");
  font-weight:750;font-style:normal;font-display:swap}
@font-face{font-family:"Monument";src:url("/fonts/MonumentGrotesk-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Monument";src:url("/fonts/MonumentGrotesk-Medium.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Monument";src:url("/fonts/MonumentGrotesk-Bold.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}
/* Fragment Mono (SIL OFL) — one weight. Declared for 400–700 so the browser
   synthesises the heavier steps the design asks for instead of falling back. */
@font-face{font-family:"Fragment Mono";src:url("/fonts/FragmentMono-Regular.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fragment Mono";src:url("/fonts/FragmentMono-Regular-ext.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --ink:#000;
  --paper:#F4F4F6;
  --silver:#B9B9C2;
  --dim:#8B8B95;
  --mute:#5F5F69;
  --hair:#191920;
  --accent:#E11B12;

  --display:"HN Extended","Helvetica Neue",Helvetica,Arial,sans-serif;
  --display-cn:"HN Condensed","Helvetica Neue",Helvetica,Arial,sans-serif;
  --sans:"Monument","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"Fragment Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --mono-b:"Fragment Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --pad:16px;
  --nav:23px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{height:100%;overflow-x:hidden}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--sans);font-size:16px;line-height:1.5;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow:hidden;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Every mono run on the site is uppercase. */
.mono,.meta,.stage-note,.rel-c,.rel-d,.sub,.ep-n,.ep-d,.ev-d,.artist-n,.cd span,.locked,.panel-cat{
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.02em;
}

/* ---------------------------------------------------------------- chrome */
.nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 14px;width:100%;
  position:relative;z-index:50}
.nav-items{display:contents}
.nav a{
  font-family:var(--sans);font-weight:700;word-spacing:.1em;
  font-size:clamp(15px,2.9vw,var(--nav));letter-spacing:-.005em;text-transform:uppercase;
  position:relative;padding-bottom:4px;white-space:nowrap;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--paper);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .26s cubic-bezier(.2,.8,.2,1);
}
.nav a:hover::after,.nav a:focus-visible::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}

.brand img{width:min(38vw,320px);height:auto;filter:grayscale(1) brightness(1.35);opacity:.95}
/* home only: the wordmark sits in the frame's middle, above the X */
.brand-mid{position:absolute;left:50%;top:7.5%;transform:translate(-50%,-50%);z-index:4;pointer-events:auto}

/* The wordmark is cut out of the same loop that draws the X, so the name is made
   of the label's colour rather than sitting on top of it in flat white. The plate
   is screened back over the fill: it lifts the letterforms clear of the darkest
   frames without flattening them, so parts of the mark can sink into the ground
   and come back as the loop turns. */
.wm{display:block;width:min(62vw,620px);aspect-ratio:1600/306;position:relative;overflow:hidden;
  -webkit-mask:url("/brand/wordmark.png") center/contain no-repeat;
  mask:url("/brand/wordmark.png") center/contain no-repeat}
/* A silver ground under the fill fixes the luminance, so the mark stays readable
   whatever frame the loop is on; the video rides on top in `overlay`, which moves
   the colour without ever taking the letterforms to black. */
.wm-base{position:absolute;inset:0;background:linear-gradient(180deg,#D7D7E0 0%,#C2C2CE 58%,#A9A9B6 100%)}
.wm video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 38%;mix-blend-mode:overlay;
  filter:saturate(2.3) contrast(1.1) brightness(1.12);
  /* The loop's own colours shift slowly; panning the sampled window across it
     as well is what makes the colour visibly travel through the letterforms. */
  will-change:transform;
  animation:wmdrift 7.5s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes wmdrift{
  from{transform:scale(1.5) translate3d(-19%,-7%,0)}
  to{transform:scale(2.05) translate3d(19%,8%,0)}
}
.wm-plate{position:absolute;inset:0;background:url("/brand/wordmark.png") center/contain no-repeat;
  filter:grayscale(1) brightness(1.5);mix-blend-mode:screen;opacity:.24;pointer-events:none}
.wm-fallback{display:none}
/* No mask support, or motion turned down: the flat mark, as before. */
@supports not ((-webkit-mask-image:url(#a)) or (mask-image:url(#a))){
  .wm{display:none}
  .wm-fallback{display:block;width:min(62vw,620px);height:auto;filter:grayscale(1) brightness(1.4);opacity:.97}
}
@media (prefers-reduced-motion:reduce){
  .wm video{display:none}
}

.socials{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 14px;width:100%;
  position:relative;z-index:50}
.socials a{
  font-weight:700;font-size:clamp(15px,2.9vw,var(--nav));letter-spacing:-.005em;
  text-transform:uppercase;position:relative;padding-bottom:4px;white-space:nowrap;
}
.socials a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--paper);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .26s cubic-bezier(.2,.8,.2,1);
}
.socials a:hover::after,.socials a:focus-visible::after{transform:scaleX(1)}

.meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 18px;
  font-size:13px;color:var(--mute);position:relative;z-index:50}

/* burger — mobile only */
.burger{display:none;background:none;border:0;cursor:pointer;padding:10px 0 10px 12px;
  margin-left:auto;flex-direction:column;justify-content:center;gap:5px}
.burger span{display:block;width:26px;height:2px;background:var(--paper);border-radius:1px;
  transition:transform .25s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.drawer{display:none}

/* ------------------------------------------------- page transitions */
/* The router swaps .frame/.page in place; these two classes are the whole
   effect. Transform + opacity only. */
.frame,.page{transition:opacity .22s ease,transform .32s cubic-bezier(.16,1,.3,1)}
.frame.is-leaving,.page.is-leaving{opacity:0;transform:translate3d(0,6px,0)}
.frame.is-entering,.page.is-entering{opacity:0;transform:translate3d(0,-6px,0);transition:none}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ------------------------------------------------- release page */
.rp{display:grid;gap:clamp(20px,4vw,48px);align-items:start}
@media (min-width:820px){.rp{grid-template-columns:minmax(0,420px) 1fr}}
.rp-art{width:100%;max-width:420px;height:auto;display:block;box-shadow:0 0 80px rgba(0,0,0,.8)}
.rp-title{font-size:clamp(26px,4.2vw,54px);line-height:1;margin-bottom:18px}
.viewer-cap{color:var(--mute)}
.viewer-cap:hover{color:var(--paper);text-decoration:underline;text-underline-offset:3px}

/* ---------------------------------------------------------------- home */
.frame{height:100svh;display:flex;flex-direction:column;padding:var(--pad);gap:10px;position:relative}
.stage{flex:1;position:relative;min-height:0;display:grid;grid-template-columns:1fr 1fr;align-items:center}
.stage-note{font-family:var(--mono-b);font-weight:700;font-size:clamp(15px,1.35vw,19px);line-height:1.85;
  position:relative;z-index:3;margin:0;text-transform:uppercase;letter-spacing:.01em}
.stage-note.l{text-align:left;justify-self:start}
.stage-note.r{text-align:right;justify-self:end}
.stage-note .k{color:var(--mute)}
.stage-note .v{color:var(--paper)}
.stage-note b{font-weight:400;color:var(--paper)}
.x{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;
  display:flex;align-items:center;justify-content:center}
.x video{height:100%;width:auto;max-width:100%;object-fit:contain;filter:saturate(1.3) contrast(1.05)}
.x::after{content:"";position:absolute;inset:0;
  background:radial-gradient(62% 52% at 50% 47%, transparent 0%, transparent 48%, rgba(0,0,0,.6) 84%, #000 100%)}

/* ---------------------------------------------------------------- interior */
/* Nav and the social bar never move; only the middle scrolls. */
.page{height:100svh;display:flex;flex-direction:column;padding:var(--pad);gap:10px;
  position:relative;overflow-x:hidden}
.page main{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  padding:clamp(18px,3.5vh,34px) 0 clamp(24px,4vh,40px);scrollbar-width:thin;
  /* scrolling text is cut off clean of the nav and the social bar */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14px,#000 calc(100% - 40px),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 14px,#000 calc(100% - 40px),transparent 100%)}
/* Chrome stays welded to the frame edge; the reading column steps in from it. */
.page main > div{padding-left:clamp(6px,3.5vw,58px);padding-right:clamp(6px,2vw,32px)}
.page main.flush > div{padding-left:0;padding-right:0}
@media (min-width:900px){.page main{padding-top:clamp(60px,14vh,170px)}}
.page main.flush{overflow:hidden;padding:clamp(14px,2.5vh,26px) 0 clamp(14px,2.5vh,24px)}
.page main::-webkit-scrollbar{width:6px}
.page main::-webkit-scrollbar-thumb{background:#26262E}

/* the loop, way back — colour and movement without noise */
.bgx{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bgx video{
  width:100%;height:100%;object-fit:cover;
  /* blown well past the frame so the X's own colours become the page's
     ambient field — cyan on the left, red and magenta on the right */
  transform:scale(1.75);
  filter:blur(110px) saturate(1.9) brightness(.85);
  opacity:.95;
  animation:drift 34s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes drift{
  from{transform:scale(1.75) translate3d(-6%,-3%,0)}
  to{transform:scale(2.15) translate3d(6%,4%,0)}
}
.bgx::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.3) 40%, rgba(0,0,0,.45) 100%)}

.title{
  margin:0 0 4px;font-family:var(--display);font-weight:750;
  font-size:clamp(28px,5.2vw,58px);line-height:.94;letter-spacing:-.005em;text-transform:uppercase;
}
.sub{margin:0 0 clamp(20px,3.5vh,34px);font-family:var(--mono-b);font-weight:600;font-size:15px;color:var(--dim)}
.sub b{color:var(--paper);font-weight:400}
.blurb{margin:0 0 clamp(18px,3vh,28px);max-width:62ch;font-family:var(--mono-b);font-weight:600;
  font-size:15px;text-transform:uppercase;letter-spacing:.02em;line-height:1.7;color:var(--silver)}

/* ------------------------------------------------- releases (split view) */
.split{position:absolute;inset:0;min-height:0}

/* ------------------------------------------------- the releases overlay
   Transform + opacity only, so it stays on the compositor. */
.ovl{display:contents}
.ovl-back{position:fixed;inset:0;z-index:30;background:#000;opacity:0;pointer-events:none;
  transition:opacity .46s cubic-bezier(.4,0,.2,1)}
.ovl[data-open="true"] .ovl-back{opacity:.94;pointer-events:auto}
/* the bars sit above the glass, so the page behind them must not scroll-lock
   them out of reach */
.ovl-back,.ovl .split{touch-action:none}
.ovl .split{position:fixed;inset:0;z-index:40;visibility:hidden;pointer-events:none;overflow:hidden;contain:paint}
.ovl[data-open="true"] .split{visibility:visible;pointer-events:auto}
.ovl .cat-list{
  will-change:transform;transform:translate3d(101%,0,0);
  transition:transform .52s cubic-bezier(.16,1,.3,1);
}
.ovl[data-open="true"] .cat-list{transform:translate3d(0,0,0)}
.ovl .viewer{opacity:0;transform:translate3d(0,14px,0);will-change:transform,opacity;
  transition:opacity .4s .12s ease,transform .55s .12s cubic-bezier(.16,1,.3,1)}
.ovl[data-open="true"] .viewer{opacity:1;transform:none}
.ovl-close{position:absolute;top:calc(var(--pad) + 46px);right:var(--pad);z-index:3;
  background:none;border:0;cursor:pointer;color:var(--silver);
  font-family:var(--mono-b);font-weight:600;font-size:14px;text-transform:uppercase;
  letter-spacing:.02em;padding:6px 2px;transition:color .2s}
.ovl-close:hover{color:var(--paper)}
html.ovl-open,html.ovl-open body{overflow:hidden}

/* left: the artwork, inset so it doesn't crowd the panel */
.viewer{position:relative;display:none;align-items:center;justify-content:center;
  height:100%;width:50%;padding:4% 6% 7% 2%}
@media (min-width:900px){.viewer{display:flex}}
.viewer img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  box-shadow:0 0 90px rgba(0,0,0,.85)}
.viewer-cap{position:absolute;left:2%;bottom:96px;font-family:var(--mono-b);font-weight:600;
  font-size:13px;text-transform:uppercase;letter-spacing:.02em;color:var(--mute)}

/* right: a glass slab welded to the edge, running the full height so it tints
   the nav and the social bar the way the reference does */
.cat-list{
  position:fixed;top:0;right:0;bottom:0;width:100%;z-index:2;overflow:hidden;
  /* the glass itself is full-bleed — no mask here, so the colour runs over
     the top and bottom edges and tints the nav and the social bar */
  background:linear-gradient(158deg,
    rgba(96,94,124,.34) 0%, rgba(40,38,58,.42) 34%,
    rgba(66,32,58,.40) 66%, rgba(20,18,30,.52) 100%);
  -webkit-backdrop-filter:blur(24px) saturate(2.2) brightness(1.2);
  backdrop-filter:blur(24px) saturate(2.2) brightness(1.2);
}
/* the scroller inside is what gets cut off, clear of both bars */
.cat-inner{
  height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
  padding:128px var(--pad) 104px var(--pad);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 98px,#000 120px,#000 calc(100% - 96px),transparent calc(100% - 74px),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,transparent 98px,#000 120px,#000 calc(100% - 96px),transparent calc(100% - 74px),transparent 100%);
}
@media (min-width:900px){
  .cat-list{width:50vw;border-left:1px solid rgba(255,255,255,.10)}
  .cat-inner{padding-left:34px}
}
.cat-inner::-webkit-scrollbar{width:5px}
.cat-inner::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2)}
.rel-row{display:flex;align-items:baseline;justify-content:space-between;gap:18px}
.rel{display:flex;align-items:baseline;gap:14px;flex:1;min-width:0;
  padding:15px 0;background:none;border:0;color:inherit;font:inherit;cursor:pointer;text-align:left}
.rel-t{font-family:var(--mono-b);font-weight:600;font-size:16px;line-height:1.4;
  text-transform:uppercase;letter-spacing:.01em;color:var(--silver);transition:color .18s}
.rel:hover .rel-t,.rel[aria-current="true"] .rel-t{color:var(--paper)}
.rel-go{font-family:var(--mono-b);font-weight:600;font-size:15px;text-transform:uppercase;
  letter-spacing:.02em;color:var(--mute);white-space:nowrap;transition:color .18s;padding:3px 0}
.rel-go:hover,.rel[aria-current="true"] ~ .rel-go{color:var(--paper)}

/* ------------------------------------------------- roster (small squares) */
.roster{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (min-width:620px){.roster{grid-template-columns:repeat(5,1fr);gap:14px}}
@media (min-width:1050px){.roster{grid-template-columns:repeat(7,1fr);gap:16px}}
.artist{display:flex;flex-direction:column;gap:8px;min-width:0}
.artist-sq{position:relative;aspect-ratio:1;overflow:hidden;background:#0C0C11}
.artist-sq img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);
  transition:filter .3s,transform .5s cubic-bezier(.2,.8,.2,1)}
.artist:hover .artist-sq img{filter:grayscale(0);transform:scale(1.06)}
.artist-sq .field{position:absolute;inset:0;
  background:radial-gradient(72% 62% at 50% 40%, var(--c,#7B4DFF) 0%, transparent 74%);opacity:.5;
  transition:opacity .3s}
.artist:hover .artist-sq .field{opacity:.8}
.artist-name{font-family:var(--sans);font-weight:700;font-size:12.5px;line-height:1.2;
  text-transform:uppercase;letter-spacing:.005em;word-spacing:.12em;overflow-wrap:anywhere}

/* ------------------------------------------------- events */
.sec-head{margin:0 0 18px;font-family:var(--display);font-weight:750;
  font-size:clamp(18px,2.4vw,26px);text-transform:uppercase;letter-spacing:-.005em;color:var(--paper)}
.sec-head + .ev{padding-top:0}
.ev-group{margin-bottom:clamp(64px,11vh,132px)}
.ev-group:last-child{margin-bottom:0}
.ev-group + .ev-group{padding-top:clamp(30px,5vh,54px);border-top:1px solid rgba(255,255,255,.14)}
.sec-head{display:flex;align-items:center;gap:14px}
.sec-head::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.14)}
.ev{display:grid;grid-template-columns:1fr;gap:3px;padding:15px 0}
.ev-d{font-family:var(--mono-b);font-weight:600;font-size:15px;color:var(--mute)}
.ev.up .ev-d{color:var(--paper)}
.ev-t{margin:3px 0 0;font-family:var(--display);font-weight:750;
  font-size:clamp(19px,3.4vw,30px);line-height:1.02;letter-spacing:-.005em;text-transform:uppercase}
.ev-w{margin:8px 0 0;font-family:var(--mono-b);font-weight:600;font-size:15px;text-transform:uppercase;letter-spacing:.02em;color:var(--dim)}
.ev-n{margin:7px 0 0;font-family:var(--mono-b);font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.02em;color:var(--mute);max-width:64ch;line-height:1.65}
@media (min-width:820px){.ev{grid-template-columns:180px 1fr;gap:0 24px;align-items:start}
  .ev-d{margin-top:9px}}

/* ------------------------------------------------- radio + demo */
.ep-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 16px}
@media (min-width:700px){.ep-grid{grid-template-columns:repeat(3,1fr);gap:26px 20px}}
@media (min-width:1100px){.ep-grid{grid-template-columns:repeat(4,1fr);gap:30px 22px}}
.ep{display:flex;flex-direction:column;gap:10px;min-width:0}
.ep-thumb{
  position:relative;aspect-ratio:16/9;overflow:hidden;background:#0C0C12;
  box-shadow:0 0 0 1px rgba(255,255,255,.07);
}
.ep-thumb img{width:100%;height:100%;object-fit:cover;filter:saturate(1.1);
  transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .3s}
a.ep:hover .ep-thumb img{transform:scale(1.05);filter:saturate(1.3)}
.ep-thumb .play{
  position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,.05));
  font-family:var(--mono-b);font-weight:600;font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--paper);opacity:0;transition:opacity .25s;
}
a.ep:hover .ep-thumb .play{opacity:1}
.ep-thumb .soon{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--display);font-weight:750;font-size:28px;color:#2A2A34;
}
.ep-n{font-size:14px;color:var(--mute);font-variant-numeric:tabular-nums}
.ep-t{font-family:var(--mono-b);font-weight:600;font-size:15px;text-transform:uppercase;letter-spacing:.02em;color:var(--paper)}
.ep-d{font-family:var(--mono-b);font-weight:600;font-size:14px;color:var(--mute);
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

/* The closed state is the whole point of this page: a countdown, centred,
   in the display face, with nothing else competing for attention. */
.demo{min-height:100%;display:flex;flex-direction:column;justify-content:center;
  align-items:center;text-align:center;padding:clamp(10px,4vh,40px) 0}
/* The teaser is vertically centred for real: main's usual top inset would
   otherwise push the whole block above the optical centre of the screen. */
.page main:has(.demo){padding-top:clamp(12px,2vh,22px);padding-bottom:clamp(12px,2vh,22px)}
@media (min-width:900px){.page main:has(.demo){padding-top:clamp(12px,2vh,22px)}}
/* main is the only box with a real height here, so the wrapper has to inherit
   it before .demo's min-height:100% means anything. */
.page main:has(.demo) > div{height:100%}
.demo[data-state="open"]{justify-content:flex-start}
.demo-mid{width:100%;max-width:960px}
.demo-copy{margin:clamp(18px,3vh,28px) auto 0;max-width:46ch;
  font-family:var(--mono-b);font-weight:600;font-size:clamp(15px,1.4vw,18px);line-height:1.8;
  text-transform:uppercase;letter-spacing:.02em;color:var(--dim)}
.demo-copy a{color:var(--paper);text-decoration:underline;text-underline-offset:3px}
.ev-go{display:inline-block;margin-top:8px;font-family:var(--mono-b);font-weight:600;font-size:14px;
  text-transform:uppercase;letter-spacing:.02em;color:var(--paper);text-decoration:underline;text-underline-offset:3px}
.blurb a{color:var(--paper);text-decoration:underline;text-underline-offset:3px}
.listen{display:flex;flex-wrap:wrap;gap:10px 22px;margin:-6px 0 clamp(22px,4vh,34px)}
.listen a{font-family:var(--mono-b);font-weight:600;font-size:14px;text-transform:uppercase;
  letter-spacing:.03em;color:var(--silver)}
.listen a:hover{color:var(--paper)}
.demo .title{margin-bottom:10px}
.demo .sub{margin:0 0 clamp(26px,5vh,48px)}
.demo .blurb{margin:0 0 clamp(24px,4vh,36px);max-width:52ch;text-align:left}

.cd-row{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(8px,1.6vw,20px);margin:0 auto}
.cd{padding:0 clamp(4px,1vw,14px);flex:1 1 130px;max-width:220px;text-align:center}
.cd b{display:block;font-family:var(--display);font-weight:750;
  font-size:clamp(38px,7.4vw,104px);line-height:.92;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums}
.cd span{display:block;margin-top:clamp(4px,0.8vh,9px);font-size:11px;
  letter-spacing:.14em;color:var(--mute)}
@media (max-width:620px){
  .cd-row{row-gap:clamp(16px,3vh,28px)}
  .cd{flex:1 1 40%;max-width:none}
  .cd b{font-size:clamp(38px,15vw,62px)}
}
/* ------------------------------------------------- submit demo */
.demo .win{color:var(--paper);font-weight:700}
.dform{margin-top:clamp(30px,6vh,56px);max-width:640px;display:grid;gap:16px;
  text-align:left;width:100%}
.dform[hidden]{display:none}  /* display:grid would otherwise beat the UA rule for [hidden] */
.f{display:grid;gap:7px}
.f-l{font-family:var(--mono-b);font-weight:600;font-size:13px;text-transform:uppercase;
  letter-spacing:.04em;color:var(--dim)}
.f-l em{font-style:normal;color:var(--mute)}
.f input,.f textarea{width:100%;background:transparent;color:var(--paper);
  border:0;border-bottom:1px solid #2A2A34;padding:11px 2px;
  font-family:var(--mono-b);font-weight:600;font-size:15px;letter-spacing:.01em;
  border-radius:0;-webkit-appearance:none;transition:border-color .2s}
.f textarea{resize:vertical;line-height:1.6}
.f input:focus,.f textarea:focus{outline:none;border-bottom-color:var(--paper)}
.f input::placeholder,.f textarea::placeholder{color:#4A4A54}
.send{justify-self:start;margin-top:8px;cursor:pointer;border:0;
  background:var(--paper);color:#000;padding:14px 22px;
  font-family:var(--mono-b);font-weight:600;font-size:14px;text-transform:uppercase;
  letter-spacing:.06em;transition:background .2s}
.send:hover{background:var(--accent)}

.note{margin:20px 0 0;font-family:var(--mono-b);font-weight:600;font-size:14px;text-transform:uppercase;
  letter-spacing:.02em;line-height:1.7;color:var(--mute);max-width:64ch}
.note a{color:var(--paper);text-decoration:underline}

/* ---------------------------------------------------------------- mobile */
@media (max-width:760px){
  :root{--pad:13px}
  .nav .nav-items{display:none}
  .burger{display:flex}
  .nav{justify-content:flex-end;align-items:center;min-height:44px}
  .drawer{
    display:block;position:fixed;inset:0;z-index:90;background:#08080C;
    padding:64px var(--pad) calc(var(--pad) + env(safe-area-inset-bottom));
    transform:translateY(-101%);overflow-y:auto;
    transition:transform .34s cubic-bezier(.6,0,.2,1);
  }
  .drawer[data-open="true"]{transform:translateY(0)}
  .drawer-nav a{display:block;font-family:var(--display);font-weight:750;font-size:26px;
    line-height:1.05;text-transform:uppercase;padding:13px 0;border-bottom:1px solid var(--hair)}
  .drawer-nav a:last-child{border-bottom:0}
  /* the quick links: three across, a hairline above, small and dim so they
     read as "elsewhere" rather than as menu items */
  .drawer-soc{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 12px;
    margin-top:22px;padding-top:18px;border-top:1px solid var(--hair)}
  .drawer-soc a{font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;
    color:var(--silver);padding:6px 0}
  .drawer-soc a:nth-child(3n+2){text-align:center}
  .drawer-soc a:nth-child(3n){text-align:right}
  .drawer .close{position:absolute;top:16px;right:var(--pad);background:none;border:0;color:var(--paper);
    font-family:var(--mono);font-size:12px;text-transform:uppercase;cursor:pointer}
  .brand img{width:56vw}
  .stage{grid-template-columns:1fr;align-content:end;gap:16px;padding-bottom:6px}
  .stage-note{font-size:14px;line-height:1.7}
  .stage-note.l,.stage-note.r{text-align:left;justify-self:start}
  /* the social bar moves into the menu on phones, every page */
  .socials{display:none}
  .roster{grid-template-columns:repeat(3,1fr);gap:10px}

  /* releases on a phone: the artwork sits up top, the list slides up from
     the bottom where a thumb can reach it — the row you tap is what you see */
  .ovl .cat-list{top:auto;bottom:0;height:56vh;transform:translate3d(0,101%,0)}
  .ovl[data-open="true"] .cat-list{transform:translate3d(0,0,0)}
  .cat-inner{padding:46px var(--pad) calc(24px + env(safe-area-inset-bottom));
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 34px,#000 52px,#000 calc(100% - 30px),transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0,transparent 34px,#000 52px,#000 calc(100% - 30px),transparent 100%)}
  .ovl-close{top:8px}
  .rel-row{gap:12px}
  .rel{padding:9px 0;gap:10px}
  .rel-t{font-size:13px;line-height:1.35}
  .rel-go{font-size:12px}
  .viewer{display:flex;position:fixed;left:0;right:0;top:0;bottom:56vh;width:auto;height:auto;
    padding:64px var(--pad) 34px}
  .ovl .viewer{transform:translate3d(0,-14px,0)}
  .ovl[data-open="true"] .viewer{transform:none}
  /* the artwork needs the whole top half: the footer steps aside and the
     page behind goes fully dark while the panel is open */
  html.ovl-open .meta{opacity:0;pointer-events:none}
  .ovl[data-open="true"] .ovl-back{opacity:1}
  .viewer img{box-shadow:0 0 50px rgba(0,0,0,.8)}
  .viewer-cap{left:var(--pad);bottom:10px;font-size:11px}
  @supports (height:1svh){
    .ovl .cat-list{height:56svh}
    .viewer{bottom:56svh}
  }
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}
  .ovl .cat-list{transform:none}
  .ovl .viewer{opacity:1;transform:none}
  .bgx{display:none}}

/* ================================================================ /links/
   The link-in-bio page. One centred column, phone width even on a desktop.
   Ambient X field behind it, same as the interior pages. */
body.links{overflow:auto;height:auto;min-height:100%;background:#000}
body.links .bgx{opacity:.7}
.lk{position:relative;z-index:1;max-width:480px;margin:0 auto;
  padding:calc(28px + env(safe-area-inset-top)) 18px calc(34px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:center;text-align:center}
.lk-x{display:block;margin:0 0 10px}
.lk-x img{width:104px;height:104px;display:block;mix-blend-mode:screen}  /* the png has a black ground; screen makes it vanish */
.lk-title{margin:0 0 26px;font-family:var(--display);font-weight:750;font-size:22px;
  letter-spacing:.005em;text-transform:uppercase;color:var(--paper)}
.lk-sec{width:100%;margin:0 0 26px}
.lk-h{margin:0 0 14px;font-family:var(--mono-b);font-weight:600;font-size:14px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--silver)}
.lk-item{display:grid;grid-template-columns:56px 1fr 22px;align-items:center;gap:14px;
  width:100%;min-height:72px;margin:0 0 10px;padding:8px 12px 8px 8px;text-align:left;
  border-radius:10px;background:rgba(22,22,28,.62);border:1px solid rgba(255,255,255,.09);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
  transition:background .2s,border-color .2s,transform .2s;will-change:transform}
.lk-item:hover,.lk-item:focus-visible{background:rgba(34,34,42,.72);border-color:rgba(255,255,255,.2)}
.lk-item:active{transform:scale(.985)}
.lk-thumb{width:56px;height:56px;border-radius:6px;background:#0C0C10 url("/links/x-240.png") center/70% no-repeat;overflow:hidden}
.lk-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.lk-label{font-family:var(--mono-b);font-weight:600;font-size:13.5px;line-height:1.35;
  text-transform:uppercase;letter-spacing:.01em;color:var(--paper);overflow-wrap:anywhere}
.lk-label b{font-weight:600;color:var(--accent)}
.lk-arr{font-family:var(--mono-b);font-size:16px;color:var(--mute);text-align:right}
.lk-item:hover .lk-arr{color:var(--paper)}
.lk-soc{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:6px 0 22px}
.lk-soc a{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;
  color:var(--paper);opacity:.85;transition:opacity .2s,transform .2s}
.lk-soc a svg{display:block}
.lk-soc a:hover,.lk-soc a:focus-visible{opacity:1;transform:translateY(-1px)}
.lk-foot{font-family:var(--mono-b);font-weight:600;font-size:12.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dim);text-decoration:underline;text-underline-offset:4px}
.lk-foot:hover{color:var(--paper)}
.lk-copy{margin:26px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mute)}
@media (min-width:600px){
  .lk-title{font-size:26px}
  .lk-label{font-size:14px}
}