/* ============================================================
   EXTATIC Records — V4
   Display + text : Termina Bold (Fort Foundry, web licence — licenses/)
   Data           : Fragment Mono (SIL OFL) — always uppercase
   One sans weight, one mono. Everything loud is Termina, everything
   small is the mono.
   ============================================================ */

@font-face{font-family:"Termina";src:url("/fonts/Termina-Bold.woff2") format("woff2"),url("/fonts/Termina-Bold.woff") format("woff");
  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:#6E6E7A;
  --hair:#191920;
  --accent:#E11B12;

  --display:"Termina","Helvetica Neue",Helvetica,Arial,sans-serif;
  --sans:"Termina","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:20px;
}
*,*::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(--mono);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,.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(14px,1.55vw,var(--nav));letter-spacing:.01em;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}
/* The live version: the wordmark and the X are drawn by hero.js on canvases.
   The videos stay in the DOM unloaded; they only wake if WebGL is missing. */
.wm canvas,.x canvas{position:absolute;inset:0;width:100%;height:100%;display:none}
.gl>canvas{display:block}
.gl>video,.wm.gl .wm-base{display:none}
.x canvas{filter:saturate(1.15)}
/* 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-family:var(--sans);font-weight:700;font-size:clamp(14px,1.55vw,var(--nav));letter-spacing:.01em;
  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)}

/* the small print: Termina too, tiny and tinted back so it never competes */
.meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 18px;
  font-family:var(--mono);font-size:12px;letter-spacing:.02em;text-transform:uppercase;
  color:#4E4E58;position:relative;z-index:50}
.meta a,.meta .meta-ck{color:#4E4E58}

/* 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. */
.page main,.stage{transition:opacity .2s ease,transform .3s cubic-bezier(.16,1,.3,1)}
.is-leaving{opacity:0;transform:translate3d(0,6px,0)}
.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}
video{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:700;
  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:1;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;outline:none;
  /* 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:16px}
.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:13px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--silver);white-space:nowrap;padding:3px 0;
  opacity:0;transform:translateX(6px);transition:opacity .18s,transform .22s cubic-bezier(.2,.8,.2,1),color .18s}
.rel-row:hover .rel-go,.rel-go:focus-visible,.rel[aria-current="true"] ~ .rel-go{opacity:1;transform:none}
.rel-go:hover{color:var(--paper)}
/* the phone's stream button, under the artwork */
.viewer-go{display:none}

/* ------------------------------------------------- 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:700;
  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:700;
  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:4px;min-width:0}
.ep-t{margin-top:6px}
.ep-thumb{
  position:relative;aspect-ratio:1;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:end center;padding-bottom:12px;
  background:linear-gradient(to top,rgba(0,0,0,.6) 0%,rgba(0,0,0,.25) 22%,rgba(0,0,0,0) 45%);
  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:700;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:700;
  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:flex;flex-direction:column;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:700;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(--sans);font-weight:700;font-size:11px;letter-spacing:.05em;text-transform:uppercase;
    color:var(--dim);padding:6px 0}
  .drawer-soc a:nth-child(3n+2){text-align:center}
  .drawer-soc a:nth-child(3n){text-align:right}
  .drawer-legal{display:flex;gap:22px;margin-top:auto;padding-top:26px;font-family:var(--mono);font-size:11px;
    letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}
  .drawer-legal a,.drawer-legal .meta-ck{color:var(--mute);text-decoration:none}
  /* the footer on phones is just the copyright line */
  .meta .meta-legal{display:none}
  html.menu-open .nav{z-index:95}
  .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}
  /* a CSS filter on a playing video costs a compositing pass per frame on iOS */
  .x video{filter:none}
  /* The ambient field on phones: a pre-blurred still instead of a video run
     through a 110px live blur — same colours, none of the GPU cost that made
     /links crawl on iPhones. The video isn't even downloaded (source media). */
  .bgx video{display:none}
  .bgx::before{content:"";position:absolute;inset:-25%;background:url("/video/hero-blur.jpg") center/cover no-repeat;
    opacity:.95;animation:drift 34s ease-in-out infinite alternate;will-change:transform}
  /* glass needs a live blur behind it; on a still it looks the same solid */
  .lk-item{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(22,22,28,.88)}
  .lk-item:hover,.lk-item:focus-visible{background:rgba(34,34,42,.92)}
  body.links .ck-back{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(0,0,0,.82)}
  .roster{grid-template-columns:repeat(3,1fr);gap:10px}

  /* the catalogue rows are a size smaller on a phone */
  .rel-row{gap:12px}
  .rel{padding:9px 0;gap:10px}
  .rel-t{font-size:13px;line-height:1.35}
  .rel-go{font-size:12px}
}
/* The releases panel on anything narrower than a desktop — phones AND iPads
   held upright (761–899px used to get the desktop split with the artwork
   column hidden, i.e. a list and nothing else): the artwork sits up top, the
   list slides up from the bottom where a thumb can reach it. */
@media (max-width:899px){
  .ovl .cat-list{top:auto;bottom:0;height:50vh;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}
  .viewer{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:14px;
    position:fixed;left:0;right:0;top:0;bottom:50vh;width:auto;height:auto;padding:60px var(--pad) 14px}
  .viewer img{max-height:calc(100% - 58px)}
  .viewer-cap{display:none}
  .viewer-go{display:inline-flex;align-items:center;min-height:44px;padding:0 22px;border:1px solid var(--paper);
    color:var(--paper);font-family:var(--mono-b);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
  .viewer-go[hidden]{display:none}
  .rel-go{display:none}
  /* the page behind is solid black on a phone, so the glass has nothing to blur —
     a flat gradient looks the same and costs nothing to scroll */
  .cat-list{-webkit-backdrop-filter:none;backdrop-filter:none;
    background:linear-gradient(158deg,#23212E 0%,#161520 40%,#1C1219 70%,#0C0B11 100%)}
  .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:50svh}
    .viewer{bottom:50svh}
  }
  html.ovl-open .socials{opacity:0;pointer-events:none}
}
/* Reduce Motion: no animations at all. The panel needs no extra rules here —
   with transitions off, the normal open/closed states already appear
   instantly. (An unconditional .viewer{opacity:1} used to live here and kept
   the artwork on screen after the panel closed.) */
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}
  .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:700;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}
}

/* ================================================================ cookies
   One bar, two shapes: a compact black strip centred at the bottom on desktop,
   a glass card along the bottom on phones. Accept and Reject are the same size
   on purpose — that equality is what the regulator checks. */
.ck{position:fixed;z-index:120;inset:0;pointer-events:none;
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.02em;color:var(--paper)}
.ck[hidden]{display:none}
.ck-back{position:absolute;inset:0;display:none;background:rgba(0,0,0,.72);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ck-box{pointer-events:auto;position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  width:min(560px,calc(100% - 26px));padding:14px 16px 12px;
  background:#08080C;border:1px solid #2A2A33;box-shadow:0 24px 70px rgba(0,0,0,.6)}
.ck-h{font-family:var(--display);font-weight:700;font-size:14px;line-height:1;letter-spacing:.01em;margin:0 0 8px}
.ck-p{margin:0 0 12px;font-size:12px;line-height:1.65;color:var(--silver)}
.ck-p a{color:var(--paper);text-decoration:underline;text-underline-offset:3px}
.ck-b{display:flex;gap:8px;align-items:center}
.ck-btn{flex:1 1 0;min-height:44px;padding:0 14px;background:none;border:1px solid var(--paper);color:var(--paper);
  font:inherit;font-size:12px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;border-radius:0;
  white-space:nowrap;transition:background .15s,color .15s}
.ck-btn.on{background:var(--paper);color:#000}
.ck-btn:hover{background:var(--paper);color:#000}
.ck-s{background:none;border:0;padding:0;color:var(--silver);font:inherit;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:underline;text-underline-offset:3px;cursor:pointer;white-space:nowrap}
.ck-s:hover{color:var(--paper)}
.ck-main .ck-b .ck-s{margin-left:6px}
/* settings layer */
.ck-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;
  border-top:1px solid var(--hair);cursor:pointer}
.ck-row:first-of-type{border-top:0}
.ck-row b{display:block;font-weight:400;font-size:12px;color:var(--paper)}
.ck-row small{display:block;font-size:11px;line-height:1.5;color:var(--mute);text-transform:none;letter-spacing:0;
  font-family:var(--mono);margin-top:2px}
.ck-row input{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:40px;height:22px;margin:0;border:1px solid var(--silver);
  background:none;position:relative;cursor:pointer}
.ck-row input::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;background:var(--mute);transition:transform .15s,background .15s}
.ck-row input:checked{border-color:var(--paper)}
.ck-row input:checked::after{transform:translateX(18px);background:var(--paper)}
.ck-row input:disabled{opacity:.5;cursor:default}
.ck-set .ck-b{margin-top:12px}
.ck-set .ck-s{margin-top:10px}
.ck-set .ck-h{margin-bottom:2px}
/* footer link that reopens the bar */
.meta-ck{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;text-transform:inherit;letter-spacing:inherit}
.meta-ck:hover,.meta a:hover,.lk-copy a:hover{color:var(--paper)}
.meta a,.lk-copy a{text-decoration:underline;text-underline-offset:3px}

/* ---------------------------------------------------------------- 404 */
.nf-go{display:flex;flex-wrap:wrap;gap:10px 26px;margin:0;font-family:var(--mono-b);font-weight:600;font-size:13px;
  letter-spacing:.06em;text-transform:uppercase}
.nf-go a{color:var(--silver);padding:4px 0}
.nf-go a:hover{color:var(--paper)}

/* ---------------------------------------------------------------- prose
   The privacy page: the one place with paragraphs of running text, so the
   sans in sentence case, with mono uppercase headings. */
.prose{max-width:68ch;padding-bottom:40px}
.prose p{margin:0 0 16px;font-family:var(--mono);font-size:14px;line-height:1.7;color:var(--silver)}
.prose p b{color:var(--paper);font-weight:700}
.prose h2{margin:34px 0 12px;font-family:var(--mono-b);font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--paper)}
.prose h3{margin:22px 0 8px;font-family:var(--mono-b);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.prose a{color:var(--paper);text-decoration:underline;text-underline-offset:3px}
.prose code{font-family:var(--mono);font-size:13px;color:var(--paper)}
.prose .meta-ck{font-family:inherit;font-size:inherit;color:var(--paper);text-transform:none;letter-spacing:0}
.prose h1.title{font-family:var(--display)}
/* /links: the bar holds the page until a choice is made — either choice opens it */
body.links .ck-back{display:block;pointer-events:auto}
body.links .ck-box{top:50%;bottom:auto;transform:translate(-50%,-50%)}
html.ck-lock,html.ck-lock body{overflow:hidden}
@media (max-width:760px){
  .ck-box{left:13px;right:13px;bottom:calc(46px + env(safe-area-inset-bottom));transform:none;width:auto;
    padding:18px 16px 16px;border:1px solid rgba(255,255,255,.12);
    background:linear-gradient(158deg,rgba(96,94,124,.34) 0%,rgba(40,38,58,.42) 40%,rgba(66,32,58,.40) 70%,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)}
  .ck-h{font-size:15px}
  .ck-main .ck-b{flex-wrap:wrap}
  .ck-main .ck-b .ck-s{flex-basis:100%;margin:10px 0 0;text-align:left}
  body.links .ck-box{top:50%;bottom:auto;transform:translateY(-50%)}
}