/* ==========================================================================
   Clouds Above Earth
   Flat near-black ground, full-bleed art, hard edges, big type.
   Colour values are the brand's own, sampled from the source artwork.
   ========================================================================== */

:root {
  /* Brand ---------------------------------------------------------------- */
  --violet:       #9858FE;
  --violet-light: #D294FD;
  --blush:        #FE2C1E;
  --cream:        #EDE6CE;
  --parchment:    #F1E4D2;
  --lamp:         #FBE388;
  --night:        #0D406C;
  --terracotta:   #C97B5C;
  --hoodie:       #364F5C;
  --outline:      #23252B;

  /* Ground --------------------------------------------------------------- */
  --bg:      #0A0A0C;
  --bg-2:    #101013;
  --panel:   #15141A;
  --panel-2: #1C1A22;
  --line:    rgba(242, 234, 220, 0.13);
  --line-2:  rgba(242, 234, 220, 0.24);

  --ink:      #F4ECDE;
  --ink-soft: rgba(244, 236, 222, 0.62);
  --ink-dim:  rgba(244, 236, 222, 0.38);

  --font: "Nunito", ui-rounded, "SF Pro Rounded", "Segoe UI Variable", system-ui, sans-serif;

  --gut:  clamp(1.25rem, 4vw, 3rem);
  --page: min(1320px, 100% - (var(--gut) * 2));
  --bar:  76px;
  --bar-m: 86px;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html[data-open="true"], html[data-open="true"] body { overflow: hidden; }

body {
  margin: 0;
  font: 400 100%/1.6 var(--font);
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; }

.sr-only, .skip:not(:focus) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip:focus {
  position: fixed; inset: 12px auto auto 12px; z-index: 300;
  background: var(--ink); color: var(--bg); padding: .7rem 1rem; border-radius: 4px;
  text-decoration: none; font-weight: 800;
}
:focus-visible { outline: 2px solid var(--violet-light); outline-offset: 3px; }

::selection { background: var(--violet); color: #fff; }

/* Film grain over everything ------------------------------------------------ */
.grain {
  position: fixed; inset: -50%; z-index: 250; pointer-events: none;
  opacity: .16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  animation: grainshift 900ms steps(4) infinite;
}
@keyframes grainshift {
  0%   { transform: translate3d(0,0,0); }
  25%  { transform: translate3d(-3%, 2%, 0); }
  50%  { transform: translate3d(2%, -3%, 0); }
  75%  { transform: translate3d(-2%, -2%, 0); }
  100% { transform: translate3d(0,0,0); }
}

/* ==========================================================================
   Type
   ========================================================================== */
.mega {
  font-weight: 900;
  font-size: clamp(2.1rem, 5.4vw, 4.3rem);
  line-height: 1.0; letter-spacing: -0.038em;
  text-transform: none;
}
.big {
  font-weight: 900;
  font-size: clamp(1.9rem, 4.6vw, 3.4rem);
  line-height: 1.04; letter-spacing: -0.034em;
  max-width: 20ch;
}
.big--sm { font-size: clamp(1.5rem, 3vw, 2.1rem); max-width: 24ch; }
.eyebrow {
  font-size: .72rem; font-weight: 800;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-dim);
}
.kicker {
  font-size: .74rem; font-weight: 800;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--violet-light);
}

/* Masked line reveal --------------------------------------------------------- */
.js [data-lines] { overflow: hidden; }
.js [data-lines] > .lnmask { display: block; overflow: hidden; }
.js [data-lines] > .lnmask > span {
  display: block;
  transform: translateY(110%);
  transition: transform 900ms cubic-bezier(.16,.84,.24,1) var(--ld, 0ms);
}
.js [data-lines].in > .lnmask > span { transform: none; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  --press: 1;
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .95rem 1.7rem; border: 0; border-radius: 999px;
  font-size: .9rem; font-weight: 800; letter-spacing: .01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transform: scale(var(--press));
  transition: transform 110ms cubic-bezier(.2,.8,.3,1), background 220ms, color 220ms, border-color 220ms;
  touch-action: manipulation;
}
.btn:active { --press: .96; }
.btn--sm { padding: .62rem 1.2rem; font-size: .82rem; }

.btn--solid { background: var(--ink); color: #0B0B0E; }
.btn--solid:hover { background: var(--violet-light); color: #14061F; }

.btn--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.btn--line:hover { background: var(--ink); color: #0B0B0E; box-shadow: inset 0 0 0 1.5px var(--ink); }

.pillbtn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1rem; border-radius: 999px;
  font-size: .74rem !important; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  box-shadow: inset 0 0 0 1.5px var(--line-2);
  transition: background 220ms, color 220ms;
}
.pillbtn:hover { background: var(--ink); color: #0B0B0E; }

/* ==========================================================================
   Top bar
   ========================================================================== */
.topbar {
  position: fixed; z-index: 200;
  top: max(14px, env(safe-area-inset-top));
  left: 50%; transform: translateX(-50%);
  width: var(--page); max-width: 700px;
  display: flex; align-items: center;
  padding: .35rem .5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(13, 12, 16, .58);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.9);
  transition: background 320ms ease, border-color 320ms ease, box-shadow 320ms ease;
}
.topbar[data-lifted="true"] {
  background: rgba(10, 10, 12, .86);
  border-color: var(--line-2);
  box-shadow: 0 22px 48px -22px rgba(0,0,0,.95);
}
.topbar__in {
  position: relative; width: 100%;
  display: flex; align-items: center;
}
.topbar__side { display: flex; align-items: center; gap: .2rem; flex: 1 1 0; }
.topbar__side:first-of-type { justify-content: flex-end; }
.topbar__side:last-of-type { justify-content: flex-start; }
.topbar__side > a {
  padding: .5rem .85rem;
  font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; color: var(--ink-soft);
  transition: color 200ms;
}
.topbar__side > a:hover, .topbar__side > a[aria-current="true"] { color: var(--ink); }

.topbar__mark { display: block; line-height: 0; margin: 0 .9rem; will-change: transform; }
.topbar__mark img { width: clamp(44px, 5vw, 56px); height: auto; }
.topbar__mark:active { transform: scale(.92); }

/* The sandwich, shown once the links stop fitting -------------------------- */
.burger {
  display: none; position: relative; flex: none;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--line-2); border-radius: 50%;
  background: transparent; cursor: pointer;
  transition: background 240ms, border-color 240ms;
}
.burger:hover { border-color: var(--ink-soft); }
.burger span {
  position: absolute; left: 50%; width: 17px; height: 1.8px;
  border-radius: 2px; background: var(--ink); translate: -50% 0;
  transition: transform 420ms cubic-bezier(.2,.8,.25,1), opacity 200ms ease;
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 27px; }
[data-open="true"] .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
[data-open="true"] .burger span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
[data-open="true"] .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.menu:focus { outline: none; }
.menu {
  position: fixed; inset: 0; z-index: 190;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(1.5rem, 5vh, 3rem);
  padding: calc(var(--bar-m) + 2.5rem) var(--gut) calc(2rem + env(safe-area-inset-bottom));
  background: rgba(8, 8, 11, .96);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  opacity: 0; transition: opacity 320ms ease;
  overflow-y: auto;
}
[data-open="true"] .menu { opacity: 1; }

.menu__links { display: grid; border-top: 1px solid var(--line); }
.menu__links a {
  display: flex; align-items: baseline; gap: 1rem;
  padding: clamp(.7rem, 2.2vh, 1.1rem) .2rem;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  font-weight: 900; font-size: clamp(1.6rem, 7.5vw, 2.6rem);
  letter-spacing: -0.034em; line-height: 1.1;
  opacity: 0; transform: translateY(18px);
  transition: opacity 520ms cubic-bezier(.2,.7,.2,1) var(--ld, 0ms),
              transform 620ms cubic-bezier(.16,.84,.24,1) var(--ld, 0ms),
              color 200ms;
}
[data-open="true"] .menu__links a { opacity: 1; transform: none; }
.menu__links a:active { color: var(--violet-light); }
.menu__links i {
  font-style: normal; font-size: .68rem; font-weight: 800;
  letter-spacing: .16em; color: var(--violet-light);
}

.menu__foot {
  display: grid; gap: 1.2rem; justify-items: start;
  opacity: 0; transform: translateY(18px);
  transition: opacity 520ms cubic-bezier(.2,.7,.2,1) 400ms,
              transform 620ms cubic-bezier(.16,.84,.24,1) 400ms;
}
[data-open="true"] .menu__foot { opacity: 1; transform: none; }
.menu__foot .tiles { margin-top: 0; max-width: none; width: 100%; }

@media (max-width: 820px) {
  .topbar {
    width: auto; max-width: none;
    left: 50%; right: auto; transform: translateX(-50%);
    padding: .45rem .5rem .45rem .8rem;
  }
  .topbar__in { gap: .85rem; }
  .topbar__side { display: none; }
  .topbar__mark { margin: 0; }
  .topbar__mark img { width: 54px; }
  .burger { display: block; width: 50px; height: 50px; }
  .burger span { width: 19px; height: 2px; }
  .burger span:nth-child(1) { top: 17px; }
  .burger span:nth-child(2) { top: 24px; }
  .burger span:nth-child(3) { top: 31px; }
  [data-open="true"] .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  [data-open="true"] .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
@media (min-width: 821px) {
  .menu { display: none !important; }
}
/* There used to be a 460px block here shrinking the mark to 34px and squeezing
   `.topbar__side`. Both were left over from when the desktop links still tried
   to fit on a phone. `.topbar__side` is display:none below 820px, so those
   rules did nothing except undo the larger mark. */

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  padding: calc(var(--bar) + 2rem) 0 clamp(2.5rem, 6vh, 4rem);
  overflow: hidden;
  isolation: isolate;
}
.hero__stage { position: absolute; inset: 0; z-index: -2; }
.hero__plate { position: absolute; inset: -3%; will-change: transform; }
.hero__plate img,
.hero__plate video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  object-position: var(--heropos, 50% 58%);
  filter: blur(0.3px) saturate(1.08) brightness(1.0) contrast(1.02);
  transform: scale(1.03);
  animation: kenburns 40s ease-in-out infinite alternate;
}
/* The loop animates by itself, so the slow push is switched off once it lands */
.hero__plate.static img,
.hero__plate.static video { animation: none; transform: scale(1.02); }
.hero__loop { opacity: 0; transition: opacity 700ms ease; }
.hero__loop.on { opacity: 1; }
@keyframes kenburns {
  0%   { transform: scale(1.03) translate3d(0, 0, 0); }
  100% { transform: scale(1.09) translate3d(-1%, -1%, 0); }
}
/* The dark is there to make the headline readable, nothing else, so it is kept
   inside the text column. The old ellipse was 78% of the width centred at 20%,
   which reached past halfway and buried Clay, Cloudy and Stella in the middle of
   the frame. This one has released by about 40% across. */
.hero__wash {
  position: absolute; inset: 0;
  background:
    radial-gradient(58% 42% at 4% 88%, rgba(6,6,10,.93) 0%, rgba(6,6,10,.44) 44%, transparent 72%),
    linear-gradient(180deg, rgba(10,10,12,.46) 0%, transparent 24%, transparent 70%, rgba(10,10,12,.5) 90%, var(--bg) 100%);
}
.hero__sweep {
  position: absolute; inset: -40% -10%;
  background: linear-gradient(102deg, transparent 42%, rgba(255,255,255,.055) 50%, transparent 58%);
  animation: sweep 9s ease-in-out infinite;
}
@keyframes sweep {
  0%, 100% { transform: translateX(-38%); }
  50%      { transform: translateX(38%); }
}

.mascot {
  position: relative; z-index: 3;
  width: min(200px, 44vw);
  will-change: transform;
}
.mascot > img { width: 100%; height: auto; filter: drop-shadow(0 26px 50px rgba(0,0,0,.8)); }
.cans { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cans-halo   { fill: none; stroke: #fff; stroke-width: 40; stroke-linecap: round; }
.cans-band   { fill: none; stroke: var(--outline); stroke-width: 22; stroke-linecap: round; }
.cans-halo-c { fill: #fff; stroke: #fff; stroke-width: 24; }
.cans-cup    { fill: var(--hoodie); stroke: var(--outline); stroke-width: 13; }
.cans-pad    { fill: #24363F; }
.cans [data-cup] {
  transform-box: fill-box; transform-origin: center;
  animation: beat 0.8333s cubic-bezier(.22,.7,.2,1) infinite;   /* 72 bpm */
}
@keyframes beat {
  0%, 100% { transform: scale(1); }
  10%      { transform: scale(1.055); }
  38%      { transform: scale(1); }
}
.mascot__notes { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.mascot__notes svg {
  position: absolute; width: 24px; height: 24px; opacity: 0;
  color: var(--violet-light); will-change: transform, opacity;
}


.hero__copy { position: relative; z-index: 2; width: var(--page); margin-inline: auto; }
.hero__copy .mega { margin: .6rem 0 .9rem; }
.hero__sub { font-size: clamp(.95rem, 1.4vw, 1.06rem); color: var(--ink-soft); max-width: 38ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }

.hero__foot {
  position: absolute; z-index: 2; right: max(var(--gut), calc((100vw - var(--page)) / 2));
  bottom: clamp(3rem, 8vh, 5rem);
  display: flex; align-items: center; gap: .8rem;
}
.scrollword {
  font-size: .68rem; font-weight: 800; letter-spacing: .24em;
  text-transform: uppercase; color: var(--ink-dim);
}
.scrollbar { position: relative; display: block; width: 66px; height: 1px; background: var(--line-2); overflow: hidden; }
.scrollbar i { position: absolute; inset: 0 auto 0 0; width: 24px; background: var(--violet-light); animation: runline 2.2s cubic-bezier(.6,0,.3,1) infinite; }
@keyframes runline {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(280%); }
}
@media (max-width: 640px) { .hero__foot { display: none; } }

@media (max-width: 820px) {
  /* A 16:9 loop cropped into a portrait viewport hides its own subject, so on
     a phone the artwork gets shown whole and the copy sits underneath it. */
  .hero {
    display: block; min-height: 0;
    padding: calc(var(--bar-m) + 1.4rem) 0 clamp(2rem, 6vh, 3.5rem);
  }
  .hero__stage {
    position: relative; inset: auto; z-index: auto;
    width: var(--page); margin: 0 auto clamp(1.6rem, 4.5vh, 2.6rem);
    aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden;
    border: 1px solid var(--line);
  }
  .hero__plate { inset: 0; }
  .hero__plate img,
  .hero__plate video {
    --heropos: 50% 50%;
    filter: saturate(1.08) brightness(.98) contrast(1.02);
  }
  .hero__wash {
    background: linear-gradient(180deg, rgba(10,10,12,.3) 0%, transparent 26%,
                transparent 64%, rgba(10,10,12,.45) 100%);
  }
  .hero__copy { width: var(--page); margin-inline: auto; }
  .hero__foot { display: none; }
  .hero__copy .mega { max-width: 14ch; }
  .charbanner { min-height: 0; padding: calc(var(--bar-m) + 1.4rem) 0 clamp(2rem, 6vh, 3rem); }
  .charbanner__in { gap: 1.4rem; }
  .charbanner__card { max-width: 240px; }
  .charnav { grid-template-columns: 1fr; }
  .hero__cta .btn { flex: 1 1 auto; justify-content: center; }
  /* A three pixel scrubber is not a tap target */
  .thumbs { gap: .35rem; }
  .thumbs button { height: 4px; padding: 10px 0; background: transparent; }
  .thumbs button::before {
    content: ""; position: absolute; inset: 10px 0; background: var(--line);
  }
  .thumbs button::after { inset: 10px 0; }
  .deckroom__art { max-width: 320px; }
  .ticker__track { gap: 1rem; }
  .beat { padding: 1.2rem 0; }
  .foot { padding-bottom: 6.5rem; }
}

/* ==========================================================================
   Ticker
   ========================================================================== */
.ticker {
  overflow: hidden; padding: 1.1rem 0;
  border-block: 1px solid var(--line);
  background: var(--bg-2);
}
.ticker__track { display: flex; align-items: center; gap: 1.6rem; width: max-content; will-change: transform; }
.ticker__track span {
  font-weight: 900; font-size: clamp(1.1rem, 2.6vw, 1.9rem);
  letter-spacing: -0.028em; white-space: nowrap;
}
.ticker__track b { width: 7px; height: 7px; border-radius: 50%; background: var(--violet-light); flex: none; }

/* ==========================================================================
   Bands and headings
   ========================================================================== */
.band { width: var(--page); margin-inline: auto; padding: clamp(4.5rem, 12vh, 8.5rem) 0; }
.head { margin-bottom: clamp(2rem, 5vw, 3.4rem); }
.head .big { margin-top: .8rem; }
.head__note { margin-top: 1rem; font-size: .8rem; color: var(--ink-dim); letter-spacing: .04em; }

/* ==========================================================================
   Release rail
   ========================================================================== */
.deckrail { position: relative; margin-inline: calc(50% - 50vw); overflow: hidden; }
.deckrail__track {
  display: flex; gap: clamp(1rem, 2vw, 1.6rem);
  padding-inline: max(var(--gut), calc((100vw - var(--page)) / 2));
  cursor: grab; touch-action: pan-y; will-change: transform;
}
.deckrail__track:active { cursor: grabbing; }

.deck {
  flex: 0 0 auto; width: min(560px, 84vw);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px; overflow: hidden;
  user-select: none; -webkit-user-select: none;
  transition: border-color 300ms;
}
.deck:hover { border-color: var(--line-2); }
.deck__art {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  display: grid; place-items: center;
  padding: clamp(1rem, 2.4vw, 1.6rem);
  background: radial-gradient(120% 120% at 30% 10%, #221f2b 0%, #0d0c11 70%);
}
.deck__sleeve {
  position: relative; z-index: 1; height: 100%; aspect-ratio: 1;
  border-radius: 3px; overflow: hidden; background: #0b0d14;
  box-shadow: 0 20px 34px -18px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.5);
}
.deck__sleeve img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

.vinyl {
  position: absolute; z-index: 0; top: 50%; left: 50%;
  height: calc(100% - 2 * clamp(1rem, 2.4vw, 1.6rem)); aspect-ratio: 1;
  translate: -50% -50%;
  transform: translateX(8%);
  transition: transform 800ms cubic-bezier(.2,.8,.25,1);
  filter: drop-shadow(0 14px 24px rgba(0,0,0,.8));
}
.vinyl__in {
  position: relative; width: 100%; height: 100%; border-radius: 50%;
  background:
    radial-gradient(circle, #C97B5C 0 13%, #0b0a0f 13.6% 17%,
      #23212c 17% 18%, #131218 18% 26%,
      #23212c 26% 27%, #131218 27% 37%,
      #23212c 37% 38%, #131218 38% 47%,
      #2c2a36 47% 48%, #141319 48% 100%);
  animation: spin 3.4s linear infinite; animation-play-state: paused;
}
.vinyl__in::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 210deg, transparent 0deg, rgba(255,255,255,.17) 26deg, transparent 62deg,
                             transparent 180deg, rgba(255,255,255,.1) 208deg, transparent 244deg);
}
@keyframes spin { to { transform: rotate(360deg); } }
.deck:hover .vinyl, .deck:focus-within .vinyl { transform: translateX(52%); }
.deck:hover .vinyl__in, .deck:focus-within .vinyl__in { animation-play-state: running; }

.deck__meta { padding: 1.4rem 1.5rem 1.6rem; display: grid; gap: .55rem; }
.deck__meta h3 { font-weight: 900; font-size: 1.6rem; letter-spacing: -0.03em; line-height: 1.1; }
.deck__meta p { font-size: .93rem; color: var(--ink-soft); }
.deck__tag { font-size: .68rem !important; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim); }
.deck__row { display: flex; align-items: center; gap: 1rem; margin-top: .5rem; }
.deck__date { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); font-weight: 800; }

/* Hand-built sleeves for the two releases without shipped art --------------- */
.cover {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  display: grid; place-items: end center; padding-bottom: 1.1rem;
  background: linear-gradient(168deg, #0D406C 0%, #14213A 58%, #241a2e 100%);
}
.cover b {
  position: relative; z-index: 2; font-weight: 900;
  font-size: clamp(1.1rem, 2.4vw, 1.6rem); line-height: 1.04;
  letter-spacing: -0.03em; text-align: center; color: var(--cream);
  text-shadow: 0 2px 18px rgba(0,0,0,.6);
}
.cover__moon {
  position: absolute; top: 12%; right: 14%; width: 28%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, #FBE388, #E8C86A 60%, #c9a84f);
  box-shadow: 0 0 54px 12px rgba(251,227,136,.32);
}
.cover__ridge {
  position: absolute; left: -12%; right: -12%; bottom: -30%; height: 56%;
  border-radius: 50% 50% 0 0 / 62% 62% 0 0;
  background: linear-gradient(180deg, #101a2c, #070b14);
}
.cover--scene { place-items: center; padding-bottom: 0; background: radial-gradient(120% 90% at 50% 110%, #7A2018 0%, #2b0d0c 46%, #08060a 100%); }
.cover__pulse {
  position: absolute; inset: 0; margin: auto; width: 46%; aspect-ratio: 1; border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgba(254,44,30,.6), 0 0 0 16px rgba(254,44,30,.16), 0 0 0 34px rgba(254,44,30,.07);
  animation: pulse 2.6s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes pulse {
  0%   { transform: scale(.82); opacity: .5; }
  60%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1.2); opacity: 0; }
}

/* Thumbnail rail under the carousel ----------------------------------------- */
.thumbs {
  width: var(--page); margin: clamp(.6rem, 1.6vw, 1.2rem) auto 0;
  display: flex; gap: .5rem;
}
/* The visible line is 3px, which is far too small to hit with a thumb, so the
   button itself is 26px tall and transparent, with the line drawn inside it. */
.thumbs button {
  flex: 1 1 0; height: 26px; padding: 0; border: 0; cursor: pointer;
  background: none; position: relative;
  display: flex; align-items: center;
  -webkit-tap-highlight-color: transparent;
}
.thumbs button::before {
  content: ""; display: block; width: 100%; height: 3px;
  background: var(--line); transition: background 260ms;
}
.thumbs button::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px;
  translate: 0 -50%;
  transform: scaleX(0); transform-origin: left;
  background: var(--violet-light);
  transition: transform 500ms cubic-bezier(.2,.8,.25,1);
}
.thumbs button[aria-selected="true"]::after { transform: scaleX(1); }
.thumbs button:hover::before { background: var(--line-2); }

/* ==========================================================================
   Turntable
   ========================================================================== */
.deckroom {
  width: var(--page); margin-inline: auto;
  padding: clamp(4rem, 11vh, 7rem) 0 clamp(3rem, 9vh, 6rem);
  display: grid; gap: clamp(2.5rem, 6vw, 5rem);
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
}
@media (max-width: 900px) { .deckroom { grid-template-columns: 1fr; } }

.deckroom__art {
  position: relative; aspect-ratio: 1; width: 100%; max-width: 460px;
  justify-self: center; overflow: visible;
  border-radius: 8px;
  background: linear-gradient(150deg, #1b1922, #0d0c11);
  border: 1px solid var(--line);
  display: grid; place-items: center;
}
.platter {
  position: relative; width: 74%; aspect-ratio: 1; border-radius: 50%;
  background: #08070b;
  box-shadow: 0 0 0 8px #131218, 0 30px 60px -30px #000;
  display: grid; place-items: center;
}
.platter__disc {
  position: absolute; inset: 4%; border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 22%,
      #26242f 22% 22.7%, #131218 22.7% 30%,
      #26242f 30% 30.7%, #131218 30.7% 39%,
      #26242f 39% 39.7%, #131218 39.7% 48%,
      #2e2c39 48% 49%, #141319 49% 100%);
  animation: spin 1.8s linear infinite;
  animation-play-state: paused;
}
.platter__disc::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 200deg, transparent 0deg, rgba(255,255,255,.16) 24deg, transparent 58deg,
                             transparent 180deg, rgba(255,255,255,.1) 204deg, transparent 240deg);
}
[data-platter].on .platter__disc { animation-play-state: running; }
.platter__label {
  position: relative; z-index: 2; width: 30%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 40% 34%, #E0A07C, #C97B5C 60%, #9c5c42);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4);
}
.platter__label::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 8%; aspect-ratio: 1;
  border-radius: 50%; background: #08070b;
}
.tonearm {
  position: absolute; top: 12%; right: 12%;
  width: 44%; height: 6px; transform-origin: right center;
  transform: rotate(-26deg);
  transition: transform 1400ms cubic-bezier(.5,0,.2,1);
}
.tonearm i {
  position: absolute; inset: 0 0 0 auto; width: 100%; height: 100%;
  border-radius: 4px; background: linear-gradient(180deg, #6a6675, #3a3743);
  box-shadow: 0 2px 6px rgba(0,0,0,.7);
}
.tonearm::before {
  content: ""; position: absolute; right: -9px; top: -9px;
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(150deg, #57535f, #2a2833);
  box-shadow: 0 3px 8px rgba(0,0,0,.7);
}
.tonearm::after {
  content: ""; position: absolute; left: -2px; top: -3px;
  width: 16px; height: 13px; border-radius: 2px; background: #d8d2c4;
}
[data-tonearm].on { transform: rotate(6deg); }

.deckroom__sub { margin-top: 1.1rem; font-size: 1.02rem; color: var(--ink-soft); max-width: 46ch; }
.counters {
  display: flex; flex-wrap: wrap; gap: clamp(1.4rem, 4vw, 3rem);
  margin-top: clamp(2rem, 5vh, 3rem); padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.counters li { display: grid; gap: .1rem; }
.counters b { font-weight: 900; font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.counters span { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); }

/* Genre chips ---------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: clamp(1.4rem, 3vw, 2rem); }
.chips li {
  padding: .48rem 1rem; border-radius: 999px;
  border: 1px solid var(--line-2);
  font-size: .78rem; font-weight: 800; letter-spacing: .04em;
  color: var(--ink-soft);
  transition: border-color 240ms, color 240ms, background 240ms;
}
.chips li:hover { border-color: var(--violet-light); color: var(--ink); background: rgba(210,148,253,.08); }

/* ==========================================================================
   Cast
   ========================================================================== */
.cast { display: grid; gap: clamp(.8rem, 1.6vw, 1.2rem); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .cast { grid-template-columns: 1fr; } }

.face {
  position: relative; display: grid; grid-template-rows: 1fr auto;
  overflow: hidden; border-radius: 6px; border: 1px solid var(--line);
  text-decoration: none; aspect-ratio: 3 / 4;
  background: radial-gradient(115% 80% at 50% 24%, #1c1a23 0%, #100f14 58%, #0b0a0e 100%);
  isolation: isolate;
  transition: border-color 320ms, transform 420ms cubic-bezier(.2,.8,.25,1);
}
.face:hover { border-color: var(--line-2); transform: translateY(-4px); }

.face__art {
  position: relative; overflow: hidden; min-height: 0;
}
.face__art::before {
  content: ""; position: absolute; left: 50%; bottom: 4%;
  width: 62%; height: 12%; translate: -50% 0;
  background: radial-gradient(closest-side ellipse, rgba(0,0,0,.65), transparent 72%);
}
.face__art img {
  /* A 1fr grid track is not a definite height, so a percentage height on an
     in-flow image never resolves. Positioning it absolutely does give it one,
     and the padding is what object-fit contains against. */
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  padding: clamp(1.2rem, 3vw, 2.2rem) clamp(1rem, 2.5vw, 1.8rem) clamp(.6rem, 1.5vw, 1rem);
  object-fit: contain;
  filter: drop-shadow(0 22px 30px rgba(0,0,0,.65));
  transition: transform 800ms cubic-bezier(.2,.8,.25,1);
}

.face:hover .face__art img { transform: translateY(-10px) scale(1.04); }

/* A card holding a whole scene rather than a cut-out subject. The default card
   is built for a cut-out floating on the panel, with padding, a contact shadow
   under it and a drop shadow around it. None of that applies to a photograph,
   so a scene fills the art area instead and is graded down, since two of these
   are bright daylight skies sitting on a near-black page. */
.face--scene .face__art::before { display: none; }
.face--scene .face__art img {
  padding: 0;
  object-fit: cover;
  object-position: var(--facepos, 50% 45%);
  filter: brightness(.84) saturate(1.02) contrast(1.03);
  transition: transform 800ms cubic-bezier(.2,.8,.25,1), filter 500ms ease;
}
/* Cover leaves no slack, so lifting the image would expose an edge. Scale only. */
.face--scene:hover .face__art img { transform: scale(1.06); filter: brightness(1) saturate(1.06); }

/* Carries the picture down into the meta panel instead of ending on a hard line. */
/* The world rail fills its frames.
   The gallery frames on the character pages still contain rather than crop,
   because those hold portraits and cut-outs that a crop would ruin. The rail
   holds wide scenes, so here the picture fills the frame and the blurred
   backer is never needed. `--pos` aims the crop per picture: the two square
   shots lose a third of their height to a 3:2 frame, and the heads are high in
   both, so they are pulled upward. */
.world .frame { aspect-ratio: 3 / 2; }
.world .frame__fill { display: none; }
.world .frame__pic {
  object-fit: cover;
  object-position: var(--pos, 50% 42%);
}

.face--scene .face__art::after {
  content: ""; position: absolute; z-index: 1; inset: auto 0 0 0; height: 52%;
  background: linear-gradient(transparent, rgba(11,10,14,.55) 62%, rgba(11,10,14,.9));
  pointer-events: none;
}

.face::after {
  content: ""; position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 40%), rgba(210,148,253,.16), transparent 70%);
  transition: opacity 400ms;
}
.face:hover::after { opacity: 1; }

.face__meta {
  position: relative; z-index: 2;
  padding: 1.2rem 1.4rem 1.5rem;
  display: grid; gap: .3rem;
  border-top: 1px solid var(--line);
  background: #0B0A0E;
}
.face__role { font-size: .66rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--violet-light); }
.face__meta h3 { font-weight: 900; font-size: clamp(1.5rem, 2.4vw, 1.95rem); letter-spacing: -0.034em; }
.face__go {
  margin-top: .15rem; font-size: .78rem; font-weight: 800; color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: .4rem;
}
.face__go::after { content: "\2192"; transition: transform 340ms cubic-bezier(.2,.8,.25,1); }
.face:hover .face__go { color: var(--ink); }
.face:hover .face__go::after { transform: translateX(5px); }

/* ==========================================================================
   World, scrolls sideways
   ========================================================================== */
.world { position: relative; height: 340vh; }
.world__pin {
  position: sticky; top: 0; height: 100svh;
  display: flex; flex-direction: column; justify-content: center; gap: clamp(1.5rem, 4vh, 3rem);
  overflow: hidden;
  padding-top: var(--bar);
}
.world__head { width: var(--page); margin-inline: auto; }
.world__head .big { margin-top: .8rem; }
.world__row {
  display: flex; gap: clamp(.8rem, 1.6vw, 1.2rem);
  padding-inline: max(var(--gut), calc((100vw - var(--page)) / 2));
  width: max-content; will-change: transform;
}
/* The scene art is square, so the frames are square. A 4:3 window over a 1:1
   picture crops a quarter of its height away, and in these compositions the
   faces are high, so what it cropped was heads. */
.frame {
  position: relative; flex: 0 0 auto;
  width: clamp(240px, 30vw, 420px); aspect-ratio: 1 / 1;
  border-radius: 6px; overflow: hidden; border: 1px solid var(--line);
  background: #111014;
}

/* Anything that is not square still has to go somewhere. Rather than crop it or
   letterbox it against flat black, a blurred copy of the same picture fills the
   gap, so the frame keeps its shape and the subject stays whole. Where the
   picture already fits, this sits underneath and is never seen. */
.frame__fill {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: blur(24px) brightness(.55) saturate(1.15);
  transform: scale(1.18);
}
.frame__pic {
  position: relative; z-index: 1;
  width: 100%; height: 100%; object-fit: contain;
  filter: brightness(.9);
  transition: filter 500ms, transform 900ms cubic-bezier(.2,.8,.25,1);
}
.frame:hover .frame__pic { filter: brightness(1.05); transform: scale(1.05); }
.frame figcaption {
  position: absolute; z-index: 2; inset: auto 0 0 0; padding: 2.4rem .95rem .9rem;
  font-size: .78rem; font-weight: 700; color: #fff;
  background: linear-gradient(transparent, rgba(8,7,11,.85));
}
@media (max-width: 700px) { .world { height: 300vh; } }

/* ==========================================================================
   History
   ========================================================================== */
.timeline { border-top: 1px solid var(--line); }
.beat {
  display: grid; grid-template-columns: 12rem 1fr; gap: clamp(1rem, 4vw, 3rem);
  padding: clamp(1.4rem, 3vw, 2.2rem) 0;
  border-bottom: 1px solid var(--line);
  transition: background 400ms;
}
.beat:hover { background: rgba(244,236,222,.025); }
.beat__when {
  font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--violet-light); padding-top: .4rem;
}
.beat p {
  font-size: clamp(1.02rem, 1.9vw, 1.32rem); line-height: 1.5; font-weight: 500;
  letter-spacing: -0.018em; color: var(--ink); max-width: 54ch;
}
.beat:last-child p { color: var(--ink); }
@media (max-width: 620px) { .beat { grid-template-columns: 1fr; gap: .5rem; } }

.cover--plain {
  place-items: center; padding: 1rem;
  background: linear-gradient(160deg, #2a2633 0%, #14131a 60%, #0b0a0f 100%);
}

/* ==========================================================================
   The quiet beat
   ========================================================================== */
.quote {
  position: relative; isolation: isolate; overflow: hidden;
  width: var(--page); margin-inline: auto;
  padding: clamp(4rem, 11vh, 7rem) 0 clamp(4.4rem, 12vh, 7.5rem);
  border-block: 1px solid var(--line);
}
/* Something behind him, so he is not a cutout floating on flat black. */
.quote::before {
  content: ""; position: absolute; z-index: -1;
  left: 50%; top: 34%; translate: -50% -50%;
  width: min(560px, 90vw); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(210,148,253,.16), rgba(210,148,253,.04) 45%, transparent 70%);
}
.quote__in {
  position: relative;
  max-width: 700px; margin-inline: auto;
  display: grid; justify-items: center; gap: clamp(.9rem, 2.2vh, 1.4rem);
  text-align: center;
}
.quote .eyebrow { margin-bottom: .2rem; }
.quote .mascot { width: min(150px, 34vw); margin-block: .1rem .5rem; }
.quote__text {
  margin: 0; font-weight: 900;
  font-size: clamp(1.6rem, 4.4vw, 3rem);
  line-height: 1.14; letter-spacing: -0.034em;
  text-wrap: balance;
}
.quote__text::after {
  content: ""; display: block;
  width: 56px; height: 2px; margin: clamp(1.4rem, 3.4vh, 2.1rem) auto 0;
  background: var(--violet-light); opacity: .55;
}


/* ==========================================================================
   Studio steps
   ========================================================================== */
.steps { border-top: 1px solid var(--line); }
.step {
  display: grid; grid-template-columns: 5rem 1fr; gap: clamp(1rem, 4vw, 3rem);
  padding: clamp(1.6rem, 3.4vw, 2.6rem) 0;
  border-bottom: 1px solid var(--line);
  transition: background 400ms;
}
.step:hover { background: rgba(244,236,222,.025); }
.beat:hover { background: rgba(244,236,222,.025); }
.step__no { font-weight: 900; font-size: 1rem; letter-spacing: .06em; color: var(--violet-light); }
.step h3 { font-weight: 900; font-size: clamp(1.3rem, 2.4vw, 1.8rem); letter-spacing: -0.03em; margin-bottom: .45rem; }
.step p { font-size: .98rem; color: var(--ink-soft); max-width: 58ch; }
@media (max-width: 620px) { .step { grid-template-columns: 1fr; gap: .5rem; } }

/* Roadmap rows carry an icon as well as a number. */
.step--ico { grid-template-columns: auto 3.2rem 1fr; align-items: start; }
.step__ico {
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--line-2); color: var(--ink-soft);
  transition: border-color 380ms, color 380ms, background 380ms, transform 460ms cubic-bezier(.2,.8,.25,1);
}
.step__ico .ico { width: 23px; height: 23px; }
.step--ico:hover .step__ico {
  border-color: var(--violet-light); color: var(--violet-light);
  background: rgba(210,148,253,.07); transform: translateY(-2px);
}
.step--ico .step__no { padding-top: 1rem; }
@media (max-width: 620px) {
  .step--ico { grid-template-columns: auto 1fr; gap: .9rem 1rem; }
  .step--ico .step__no { padding-top: 0; align-self: center; }
  .step--ico > div { grid-column: 1 / -1; }
}

/* ==========================================================================
   What we do, folded into the vinyl section
   ========================================================================== */
.deckdo {
  margin-top: clamp(1.5rem, 3.4vw, 2.2rem);
  border-top: 1px solid var(--line);
  counter-reset: deckdo;
}
.deckdo li {
  display: grid; grid-template-columns: 1.9rem 1fr; gap: .2rem .9rem;
  padding: .95rem 0; border-bottom: 1px solid var(--line);
}
.deckdo li::before {
  counter-increment: deckdo; content: counter(deckdo, decimal-leading-zero);
  grid-row: 1 / 3; padding-top: .16rem;
  font-size: .72rem; font-weight: 800; letter-spacing: .1em;
  color: var(--violet-light); font-variant-numeric: tabular-nums;
}
.deckdo b { font-weight: 900; font-size: 1.02rem; letter-spacing: -0.022em; }
.deckdo span { font-size: .9rem; line-height: 1.55; color: var(--ink-soft); }

.soon {
  margin-top: clamp(2rem, 5vw, 3.4rem); padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid var(--line); border-radius: 6px; background: var(--bg-2);
}
.soon__label { font-size: .68rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: .9rem; }
.soon ul { display: flex; flex-wrap: wrap; gap: .5rem; }
.soon li {
  padding: .5rem 1rem; border-radius: 999px;
  border: 1px solid var(--line-2); font-size: .82rem; font-weight: 700; color: var(--ink-soft);
}

/* ==========================================================================
   Follow
   ========================================================================== */
/* The platform count keeps changing and almost never divides evenly, so this is
   a wrapping flex row rather than a grid: cards keep an exact column width, and
   whatever is left over on the last row centres itself instead of hanging off
   the left edge. Add a twelfth platform and it still looks deliberate. */
.socials {
  --gap: clamp(.7rem, 1.4vw, 1rem);
  --per: 4;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--gap);
}
.socials > .social {
  flex: 0 1 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
}
@media (max-width: 1240px) { .socials { --per: 3; } }
@media (max-width: 860px)  { .socials { --per: 2; } }
@media (max-width: 520px)  { .socials { --per: 1; } }

.social {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: .85rem;
  min-height: 252px;
  padding: 1.25rem 1.25rem 1.1rem;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--ink); text-decoration: none;
  transition: border-color 320ms, transform 420ms cubic-bezier(.2,.8,.25,1);
}
.social:hover, .social:focus-visible { transform: translateY(-5px); border-color: var(--line-2); }

/* The accent wash. A radial gradient in the platform colour, held at a low
   overall opacity so one rule covers every platform without needing an alpha
   value per colour. */
.social::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(340px circle at 50% 0%, var(--accent), transparent 72%);
  opacity: 0; transition: opacity 420ms;
}
.social:hover::after, .social:focus-visible::after { opacity: .13; }

/* Hairline that fills across the top edge on hover. */
.social__rule {
  position: absolute; inset: 0 0 auto; height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 520ms cubic-bezier(.2,.8,.25,1);
}
.social:hover .social__rule, .social:focus-visible .social__rule { transform: scaleX(1); }

/* Oversized watermark of the same icon, bled off the bottom corner. */
.social__ghost {
  position: absolute; right: -26px; bottom: -30px; z-index: -1;
  color: var(--ink); opacity: .045;
  transition: opacity 460ms, color 460ms, transform 620ms cubic-bezier(.2,.8,.25,1);
}
.social__ghost .ico { width: 132px; height: 132px; stroke-width: .9; }
.social:hover .social__ghost, .social:focus-visible .social__ghost {
  opacity: .16; color: var(--accent); transform: translate(-6px, -8px) rotate(-6deg);
}

.social__head { display: flex; align-items: center; justify-content: space-between; }
.social__ico {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-2); color: var(--ink);
  transition: border-color 320ms, color 320ms;
}
.social:hover .social__ico, .social:focus-visible .social__ico { border-color: var(--accent); color: var(--accent); }
.ico { width: 21px; height: 21px; }

.social__no {
  font-size: .68rem; font-weight: 800; letter-spacing: .16em;
  color: var(--ink-dim); font-variant-numeric: tabular-nums;
}

.social__body { display: grid; gap: .22rem; min-width: 0; }
.social__body b { font-weight: 900; font-size: 1.16rem; letter-spacing: -0.028em; line-height: 1.1; }
/* A card with no handle keeps the line, empty, so the titles and notes stay on
   the same baseline as the rest of the row. */
.social__handle:empty::before { content: "\00a0"; }
.social__handle { font-size: .73rem; font-weight: 700; letter-spacing: .04em; color: var(--violet-light); }
.social__note { margin-top: .3rem; font-size: .84rem; line-height: 1.5; color: var(--ink-soft); }

.social__cta {
  margin-top: auto; display: flex; align-items: center; gap: .4rem;
  font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-dim); transition: color 320ms;
}
.social:hover .social__cta, .social:focus-visible .social__cta { color: var(--ink); }
.social__arw {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 420ms cubic-bezier(.2,.8,.25,1);
}
.social:hover .social__arw, .social:focus-visible .social__arw { transform: translate(3px, -3px); }

.follow__line { margin-top: clamp(1.4rem, 3vw, 2rem); font-size: .92rem; color: var(--ink-soft); line-height: 1.6; }
.follow__line a { color: var(--ink); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--line-2); }
.follow__line a:hover { border-bottom-color: var(--violet-light); color: var(--violet-light); }

.foot__mail { margin-top: 1rem; font-size: .88rem; }
.foot__mail a { color: rgba(239,234,223,.8); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.18); }
.foot__mail a:hover { color: #fff; }

/* ==========================================================================
   Lanes
   ========================================================================== */
.lanes { display: grid; gap: clamp(.8rem, 1.6vw, 1.2rem); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .lanes { grid-template-columns: 1fr; } }
.lane {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: .6rem;
  padding: 1.8rem 1.6rem 1.6rem;
  border: 1px solid var(--line); border-radius: 6px; background: var(--panel);
  transition: border-color 300ms, transform 400ms cubic-bezier(.2,.8,.25,1);
}
.lane::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(210,148,253,.10), transparent 70%);
  transition: opacity 400ms;
}
.lane:hover { border-color: var(--line-2); transform: translateY(-4px); }
.lane:hover::after { opacity: 1; }
.lane__tag { font-size: .66rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--violet-light); }
.lane h3 { font-weight: 900; font-size: 1.45rem; letter-spacing: -0.03em; }
.lane p { font-size: .94rem; color: var(--ink-soft); }
.lane__list { display: grid; gap: .4rem; margin: .3rem 0 .2rem; }
.lane__list li {
  position: relative; padding-left: 1.1rem;
  font-size: .88rem; color: var(--ink-soft); line-height: 1.5;
}
.lane__list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--violet-light);
}
.lane__note { font-size: .8rem !important; color: var(--ink-dim) !important; margin-top: .4rem; }
.lane .btn { align-self: start; margin-top: auto; }

.terms {
  margin-top: clamp(1rem, 2.4vw, 1.6rem); padding: 1.3rem 1.5rem;
  border: 1px solid var(--line); border-radius: 6px;
  display: grid; gap: .8rem;
  font-size: .88rem; color: var(--ink-soft); background: var(--bg-2);
}
.terms p { max-width: 92ch; }
.terms b { color: var(--ink); font-weight: 800; }

/* ==========================================================================
   Signup
   ========================================================================== */
.signup {
  display: grid; gap: clamp(1.4rem, 3vw, 2.6rem);
  grid-template-columns: 1fr minmax(280px, 460px); align-items: center;
  padding: clamp(1.8rem, 4vw, 3rem);
  border: 1px solid var(--line); border-radius: 6px; background: var(--panel);
}
.signup p { margin-top: .6rem; color: var(--ink-soft); font-size: .95rem; }
@media (max-width: 860px) { .signup { grid-template-columns: 1fr; } }

/* ==========================================================================
   Forms
   ========================================================================== */
.form { display: grid; gap: .7rem; }
.form--inline { grid-template-columns: 1fr auto; align-items: start; }
.form--inline .form__msg { grid-column: 1 / -1; }
@media (max-width: 520px) { .form--inline { grid-template-columns: 1fr; } }
.form__row { display: grid; gap: .7rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .form__row { grid-template-columns: 1fr; } }

.field { display: grid; gap: .35rem; }
.field label { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); }

input, textarea, select {
  width: 100%; padding: .9rem 1rem;
  border: 1px solid var(--line); border-radius: 4px;
  background: #0E0D11; font-size: .95rem; resize: vertical;
  transition: border-color 200ms, box-shadow 200ms;
}
input::placeholder, textarea::placeholder { color: var(--ink-dim); }
select {
  appearance: none; cursor: pointer; padding-right: 2.4rem;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F4ECDE' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
}
select option { background: #15141A; color: var(--ink); }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--violet-light);
  box-shadow: 0 0 0 3px rgba(210,148,253,.16);
}
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--blush); box-shadow: 0 0 0 3px rgba(254,44,30,.14); }

.form__msg { font-size: .84rem; min-height: 1.2em; margin: 0; color: var(--ink-dim); }
.form__msg[data-state="ok"]  { color: #7ee2b0; font-weight: 700; }
.form__msg[data-state="bad"] { color: var(--blush); font-weight: 700; }

/* ==========================================================================
   Footer
   ========================================================================== */
.foot { border-top: 1px solid var(--line); background: var(--bg-2); padding: clamp(3.5rem, 9vh, 6rem) 0 7rem; }
.foot__top {
  width: var(--page); margin-inline: auto;
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: minmax(240px, 1fr) minmax(320px, 1.4fr);
}
@media (max-width: 860px) { .foot__top { grid-template-columns: 1fr; } }
.foot__brand > p { margin-top: 1.1rem; font-size: .95rem; line-height: 1.6; color: var(--ink-soft); }
.foot__note { margin: .8rem 0 1.4rem; font-size: .92rem; color: var(--ink-soft); max-width: 46ch; }

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-top: 1.6rem; max-width: 340px; }
.tiles a {
  display: grid; place-items: center; gap: .35rem; padding: .8rem .3rem;
  border: 1px solid var(--line); border-radius: 4px;
  font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); text-decoration: none;
  transition: border-color 240ms, color 240ms, background 240ms, transform 240ms cubic-bezier(.2,.8,.25,1);
}
.tiles a .ico { width: 20px; height: 20px; color: var(--ink); }
.tiles a:hover { border-color: var(--line-2); color: var(--ink); background: rgba(244,236,222,.04); transform: translateY(-3px); }

.foot__legal {
  width: var(--page); margin: clamp(2.5rem, 6vh, 4rem) auto 0; padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; justify-content: space-between;
  font-size: .74rem; letter-spacing: .06em; color: var(--ink-dim);
}

/* ==========================================================================
   Character pages
   ========================================================================== */
.charbanner {
  position: relative; min-height: 76svh;
  display: flex; align-items: flex-end;
  padding: calc(var(--bar) + 3rem) 0 clamp(2.5rem, 6vh, 4rem);
  overflow: hidden; isolation: isolate;
}
.charbanner__plate { position: absolute; inset: -6%; z-index: -2; }
.charbanner__plate img {
  width: 100%; height: 100%; object-fit: cover;
  filter: blur(3px) saturate(1.1) brightness(.5) contrast(1.05);
  transform: scale(1.1);
  animation: kenburns 34s ease-in-out infinite alternate;
}
.charbanner__wash {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(110% 80% at 18% 80%, rgba(152,88,254,.18) 0%, transparent 62%),
    linear-gradient(180deg, rgba(10,10,12,.78) 0%, rgba(10,10,12,.3) 34%, rgba(10,10,12,.9) 86%, var(--bg) 100%);
}
.charbanner__in {
  position: relative; width: var(--page); margin-inline: auto;
  display: grid; gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  align-items: end;
}
@media (max-width: 760px) { .charbanner__in { grid-template-columns: 1fr; } }
.charbanner__card {
  border-radius: 6px; overflow: hidden; border: 1px solid var(--line-2);
  background: #111014; box-shadow: 0 30px 60px -28px rgba(0,0,0,.95);
  aspect-ratio: 4 / 5;
}
.charbanner__card img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 40%); }
.charbanner__card--plain { border: 0; background: none; box-shadow: none; aspect-ratio: auto; display: grid; place-items: center; }
.charbanner__card--plain img { width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 26px 46px rgba(0,0,0,.8)); }
.charbanner .mega { margin: .7rem 0 1.1rem; }
.charbanner__sub { font-size: clamp(1rem, 1.7vw, 1.18rem); color: var(--ink-soft); max-width: 42ch; }

.back {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .7rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  text-decoration: none; color: var(--ink-dim); transition: color 220ms;
}
.back::before { content: "\2190"; }
.back:hover { color: var(--ink); }

.prose {
  width: var(--page); max-width: 680px; margin-inline: auto;
  padding: clamp(3rem, 8vh, 5.5rem) 0 clamp(1.5rem, 4vh, 2.5rem);
  display: grid; gap: 1.2rem;
}
.prose p { font-size: clamp(1rem, 1.7vw, 1.1rem); line-height: 1.75; color: var(--ink-soft); }
.prose p.lead { font-size: clamp(1.2rem, 2.2vw, 1.5rem); line-height: 1.5; font-weight: 600; color: var(--ink); letter-spacing: -0.022em; }
.prose h2 { margin-top: 1.6rem; font-weight: 900; font-size: clamp(1.25rem, 2.4vw, 1.6rem); letter-spacing: -0.03em; }

.spec {
  width: var(--page); max-width: 680px; margin-inline: auto;
  border-top: 1px solid var(--line);
}
.spec > div {
  display: grid; grid-template-columns: minmax(120px, 28%) 1fr; gap: 1rem;
  padding: .95rem 0; border-bottom: 1px solid var(--line); font-size: .96rem;
}
.spec dt { font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim); align-self: center; }
.spec dd { margin: 0; }
@media (max-width: 520px) { .spec > div { grid-template-columns: 1fr; gap: .2rem; } }

.frames { display: grid; gap: clamp(.7rem, 1.6vw, 1.1rem); grid-template-columns: repeat(3, 1fr); }
.frames--4 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) { .frames, .frames--4 { grid-template-columns: 1fr; } }
.frames .frame { width: auto; }

.charnav {
  width: var(--page); margin-inline: auto;
  padding: clamp(2.5rem, 7vh, 4.5rem) 0 clamp(1rem, 3vh, 2rem);
  display: grid; gap: clamp(.7rem, 1.6vw, 1.1rem); grid-template-columns: 1fr 1fr;
}
@media (max-width: 620px) { .charnav { grid-template-columns: 1fr; } }
.charnav a {
  display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem;
  border: 1px solid var(--line); border-radius: 6px; background: var(--panel);
  text-decoration: none;
  transition: border-color 260ms, transform 380ms cubic-bezier(.2,.8,.25,1);
}
.charnav a:hover { border-color: var(--line-2); transform: translateY(-3px); }
.charnav img { width: 56px; height: 56px; border-radius: 4px; object-fit: cover; object-position: var(--pos, 50% 40%); flex: none; }
.charnav small { display: block; font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 800; color: var(--violet-light); }
.charnav b { font-weight: 900; font-size: 1.2rem; letter-spacing: -0.03em; }

/* ==========================================================================
   Fixed player bar
   ========================================================================== */
.player {
  position: fixed; z-index: 210; left: 50%; bottom: 18px;
  transform: translate(-50%, 160%);
  display: flex; align-items: center; gap: .9rem;
  padding: .6rem .7rem .6rem 1rem;
  border: 1px solid var(--line-2); border-radius: 999px;
  isolation: isolate;
  background: rgba(14,13,17,.86);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 20px 44px -20px rgba(0,0,0,.9);
  transition: transform 620ms cubic-bezier(.2,.8,.25,1), border-color 240ms;
}
.player[data-on="true"] { transform: translate(-50%, 0); }
.player:hover { border-color: var(--violet-light); }

/* The link inside the bar carries the row. */
.player__link {
  display: flex; align-items: center; gap: .9rem;
  text-decoration: none; white-space: nowrap;
}

/* Only present once data.js names a track. */
.player__btn {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 34px; height: 34px; margin-right: -.25rem;
  border: 1px solid var(--line-2); border-radius: 50%;
  background: transparent; color: var(--ink); cursor: pointer;
  transition: border-color 260ms, color 260ms, background 260ms, transform 320ms cubic-bezier(.2,.8,.25,1);
}
.player__btn:hover { border-color: var(--violet-light); color: var(--violet-light); background: rgba(210,148,253,.08); }
.player__btn:active { transform: scale(.94); }
.player__btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.player__btn .ic-play  { fill: currentColor; stroke: none; }
.player__btn .ic-pause { display: none; }
.player[data-playing="true"] .player__btn .ic-play  { display: none; }
.player[data-playing="true"] .player__btn .ic-pause { display: block; }

/* The equaliser should only move when sound is actually coming out. */
.player--live { padding-bottom: .78rem; padding-left: .55rem; }
.player--live .player__eq i { animation-play-state: paused; opacity: .4; }
.player--live[data-playing="true"] .player__eq i { animation-play-state: running; opacity: 1; }

/* Progress, along the bottom edge of the pill. */
.player__seek {
  position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px;
  border-radius: 2px; background: rgba(244,236,222,.14); overflow: hidden;
}
.player__seek i {
  display: block; height: 100%; border-radius: 2px;
  background: var(--violet-light);
  transform: scaleX(0); transform-origin: 0 50%;
}
.player__eq { display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.player__eq i { width: 3px; border-radius: 2px; background: var(--violet-light); animation: eq 0.8333s ease-in-out infinite; }
.player__eq i:nth-child(1) { height: 40%; animation-delay: 0ms; }
.player__eq i:nth-child(2) { height: 90%; animation-delay: 120ms; }
.player__eq i:nth-child(3) { height: 60%; animation-delay: 240ms; }
.player__eq i:nth-child(4) { height: 100%; animation-delay: 80ms; }
.player__eq i:nth-child(5) { height: 50%; animation-delay: 300ms; }
@keyframes eq { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.player__now { font-size: .8rem; color: var(--ink-soft); }
.player__now b { color: var(--ink); font-weight: 800; }
.player__go {
  padding: .42rem .95rem; border-radius: 999px; background: var(--ink); color: #0B0B0E;
  font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
@media (max-width: 560px) { .player__now { display: none; } }

/* ==========================================================================
   Entrance
   ========================================================================== */
.js [data-step], .js .beat, .js .deck, .js .face, .js .lane, .js .frame, .js .signup, .js .soon, .js .terms, .js .counters, .js .spec > div, .js .charnav a {
  opacity: 0; transform: translateY(26px);
  transition: opacity 760ms cubic-bezier(.2,.7,.2,1) var(--ld, 0ms), transform 900ms cubic-bezier(.16,.84,.24,1) var(--ld, 0ms);
}
.js [data-step].in, .js .beat.in, .js .deck.in, .js .face.in, .js .lane.in, .js .frame.in,
.js .signup.in, .js .soon.in, .js .terms.in, .js .counters.in,
.js .spec > div.in, .js .charnav a.in { opacity: 1; transform: none; }

/* ==========================================================================
   Accessibility preferences
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .grain, .hero__plate img, .hero__plate video, .hero__sweep, .scrollbar i, .cover__pulse,
  .cans [data-cup], .player__eq i { animation: none; }
  .vinyl, .deck:hover .vinyl { transform: translateX(40%); transition: none; }
  .vinyl__in, .deck:hover .vinyl__in, .platter__disc { animation: none; }
  .tonearm, [data-tonearm].on { transform: rotate(6deg); transition: none; }
  .js [data-lines] > .lnmask > span { transform: none; transition: opacity 300ms ease; }
  .js [data-step], .js .beat, .js .deck, .js .face, .js .lane, .js .frame,
  .js .signup, .js .soon, .js .terms, .js .counters, .js .spec > div, .js .charnav a {
    transform: none; transition: opacity 300ms ease var(--ld, 0ms);
  }
  .charbanner__plate img { animation: none; }
  .face:hover .face__art img, .frame:hover img { transform: none; }
  .lane:hover, .tiles a:hover, .charnav a:hover { transform: none; }
  .face__go::after, .face:hover .face__go::after { transform: none; }
  .player { transition: opacity 300ms ease; }
  .btn:active { --press: 1; }
}

@media (prefers-reduced-transparency: reduce) {
  .topbar[data-lifted="true"], .player { backdrop-filter: none; -webkit-backdrop-filter: none; background: #0E0D11; }
  .grain { display: none; }
  .hero__plate img { filter: brightness(.5); }
}

@media (prefers-contrast: more) {
  :root { --ink-soft: var(--ink); --ink-dim: rgba(244,236,222,.8); --line: rgba(244,236,222,.42); --line-2: rgba(244,236,222,.7); }
  .face::before { background: linear-gradient(180deg, transparent 20%, rgba(8,7,11,.9) 55%, #08070b 100%); }
}

/* ==========================================================================
   CLOUDY_ORIGIN.DAT
   The classified block on cloudy.html. Cloudy's origin is not written down
   anywhere, so this is what the page shows instead.
   ========================================================================== */
.term {
  position: relative; isolation: isolate; overflow: hidden;
  max-width: 640px; margin: clamp(1.6rem, 4vw, 2.6rem) 0;
  border: 1px solid var(--line-2); border-radius: 8px;
  background: #08080A; cursor: pointer;
  box-shadow: 0 22px 60px rgba(0,0,0,.5);
}
.term::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom, rgba(255,255,255,.028) 0 1px, transparent 1px 3px);
}
.term__bar {
  display: flex; align-items: center; gap: .45rem;
  padding: .6rem .85rem; border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.022);
}
.term__bar span {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--line-2);
}
.term__bar span:first-child { background: #FF4438; }
.term__bar b {
  margin-left: .5rem; font-size: .7rem; font-weight: 700; letter-spacing: .12em;
  color: var(--ink-dim); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.term__out {
  display: block; margin: 0; padding: 1.15rem 1.15rem 1.3rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(.76rem, 1.9vw, .87rem); line-height: 1.85;
  white-space: pre-wrap; word-break: break-word;
  min-height: 15.4em;
}
.term__ln { display: block; color: var(--ink-soft); }
.term__ln.is-k { color: var(--ink-dim); letter-spacing: .04em; }
.term__ln.is-q { color: var(--violet-light); }
.term__ln.is-d { color: #FF5A4E; font-weight: 700; letter-spacing: .02em; }
.term__ln.is-m { color: var(--ink-dim); font-style: italic; }

/* Block cursor, only while it is still typing. */
.term:not([data-done]) .term__ln:last-child::after {
  content: ""; display: inline-block; vertical-align: -2px;
  width: .58em; height: 1.05em; margin-left: .12em;
  background: var(--violet-light); animation: termblink 1s steps(1) infinite;
}
@keyframes termblink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

.term__hint {
  margin-top: -.6rem; font-size: .78rem; color: var(--ink-dim);
  letter-spacing: .02em;
}

@media (prefers-reduced-motion: reduce) {
  .term:not([data-done]) .term__ln:last-child::after { animation: none; }
}

/* ==========================================================================
   The room, coming soon
   A screen that behaves like a stream that has not been switched on yet:
   real local clock, an equaliser at the catalogue tempo, and a seek bar with
   no end to it.
   ========================================================================== */
.screen {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: clamp(380px, 52vw, 560px);
  padding: clamp(1.2rem, 2.6vw, 2rem);
  border: 1px solid var(--line-2); border-radius: 10px;
  background: linear-gradient(180deg, #14121A 0%, #0B0A0E 62%);
  box-shadow: 0 30px 70px rgba(0,0,0,.5);
}
/* Perspective floor, the same idea as the album title. */
.screen__grid {
  position: absolute; inset: 46% -30% -12% -30%; z-index: -2;
  background:
    repeating-linear-gradient(to right, rgba(210,148,253,.34) 0 1px, transparent 1px 76px),
    repeating-linear-gradient(to bottom, rgba(210,148,253,.34) 0 1px, transparent 1px 42px);
  transform: perspective(300px) rotateX(62deg);
  transform-origin: 50% 0;
  mask-image: linear-gradient(to bottom, transparent, #000 38%, transparent 88%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 38%, transparent 88%);
  opacity: .75;
}
.screen__glow {
  position: absolute; z-index: -1; left: 50%; top: 40%; translate: -50% -50%;
  width: min(420px, 80%); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(210,148,253,.18), transparent 68%);
}
.screen__sweep {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(244,236,222,.055) 50%, transparent 62%);
  transform: translateX(-100%);
  animation: sweep 9s ease-in-out infinite;
}
@keyframes sweep {
  0%, 62%  { transform: translateX(-100%); }
  100%     { transform: translateX(100%); }
}

.screen::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.022) 0 1px, transparent 1px 3px);
}

.screen__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.onair {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .75rem .4rem .6rem; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgba(0,0,0,.35);
  font-size: .66rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase;
  color: var(--ink-dim);
}
.onair i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ink-dim);
  animation: onair 2.6s ease-in-out infinite;
}
@keyframes onair { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

.screen__clock { display: grid; justify-items: end; gap: .1rem; }
.screen__clock b {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(.95rem, 2.1vw, 1.15rem); font-weight: 700;
  color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: .04em;
}
.screen__clock span {
  font-size: .6rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-dim);
}

.screen__mid {
  flex: 1; display: grid; place-content: center; justify-items: center;
  gap: .6rem; text-align: center; padding: 1.4rem 0;
}
.screen__eq { display: flex; align-items: flex-end; gap: 4px; height: 40px; margin-bottom: .5rem; }
.screen__eq i {
  width: 4px; border-radius: 3px; background: var(--violet-light);
  animation: eq 0.8333s ease-in-out infinite;   /* 72 bpm */
}
.screen__eq i:nth-child(1) { height: 36%; animation-delay:   0ms; }
.screen__eq i:nth-child(2) { height: 68%; animation-delay:  90ms; }
.screen__eq i:nth-child(3) { height: 96%; animation-delay: 180ms; }
.screen__eq i:nth-child(4) { height: 52%; animation-delay:  40ms; }
.screen__eq i:nth-child(5) { height: 84%; animation-delay: 260ms; }
.screen__eq i:nth-child(6) { height: 44%; animation-delay: 140ms; }
.screen__eq i:nth-child(7) { height: 100%; animation-delay: 320ms; }
.screen__eq i:nth-child(8) { height: 60%; animation-delay:  60ms; }
.screen__eq i:nth-child(9) { height: 32%; animation-delay: 210ms; }

.screen__big {
  font-weight: 900; font-size: clamp(3.6rem, 13vw, 8.5rem);
  letter-spacing: -0.05em; line-height: .92; color: var(--ink);
}
.screen__soon {
  margin-top: .3rem;
  font-size: clamp(.74rem, 1.7vw, .88rem); font-weight: 800;
  letter-spacing: .38em; text-transform: uppercase;
  color: var(--violet-light); text-indent: .38em;
}

.screen__foot { display: flex; align-items: center; gap: .9rem; }
.screen__seek {
  position: relative; flex: 1; height: 3px; border-radius: 2px;
  background: rgba(244,236,222,.12); overflow: hidden;
}
.screen__seek i {
  position: absolute; inset: 0 auto 0 0; width: 40%; border-radius: 2px;
  background: var(--violet-light);
  animation: seek 9s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes seek {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
.screen__dur {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.5rem; line-height: 1; color: var(--ink-soft);
}

@media (prefers-reduced-motion: reduce) {
  .onair i, .screen__eq i, .screen__seek i, .screen__sweep { animation: none; }
  .screen__sweep { display: none; }
  .screen__seek i { transform: translateX(0); width: 22%; }
}

/* A sleeve for a release that does not exist yet. */
.cover--soon {
  display: grid; place-items: center; gap: .5rem; align-content: center;
  background:
    radial-gradient(120% 90% at 50% 20%, rgba(210,148,253,.22), transparent 62%),
    linear-gradient(160deg, #1a1722 0%, #0d0c11 70%);
  border: 1px dashed rgba(210,148,253,.35);
}
.cover--soon .cover__q {
  font-size: clamp(3.4rem, 9vw, 5rem); font-weight: 900; line-height: 1;
  color: var(--violet-light); opacity: .55;
}
.cover--soon b {
  font-size: .72rem; font-weight: 800; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-soft); text-indent: .22em;
}