/* ==========================================================================
   celes.wav
   One long page with the player always in reach. The logo is the only thing
   with the stacked rims: nothing else imitates it. Around it, plain big type,
   centred section names and flat pills. Colour comes from the record: the fog
   and the accent are read off whichever release is loaded; the ground and the
   type stay cold black and ice.
   ========================================================================== */

@font-face {
  font-family: "Instrument Sans";
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
}

:root {
  --ink: #05070b;
  --black: #000;
  --ice: #eef3f5;
  --steel: #8d99a3;
  --acc: #ebca51;                 /* the new release's; the player replaces it per record */

  --gutter: clamp(16px, 2.6vw, 44px);
  --dock-h: 84px;
  --display: "Instrument Sans", Arial, sans-serif;
  --text: "Inter", Arial, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); color-scheme: dark; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--ice);
  font: 400 15px/1.5 var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  padding-bottom: calc(var(--dock-h) + 28px);
}
a { color: inherit; text-decoration: none; }
img, svg, canvas { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol, dl, dd, h1, h2, h3, p { margin: 0; padding: 0; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
section[id] { scroll-margin-top: calc(72px - clamp(72px, 10vw, 150px)); }
main, .foot { overflow-x: clip; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ==========================================================================
   Fog and grain: the page's weather, fixed behind and over everything
   ========================================================================== */
.fog { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--ink); }
.fog__layer {
  position: absolute;
  inset: -12%;
  background-position: center;
  background-size: cover;
  opacity: 0;
  filter: blur(30px) saturate(1.45) brightness(1.02);
  transition: opacity 1.4s ease;
  animation: fog-breathe 22s ease-in-out infinite alternate;
}
.fog__layer.is-on { opacity: .72; }
.fog::after { content: ""; position: absolute; inset: 0; background: radial-gradient(130% 100% at 62% 34%, transparent 18%, rgba(5,7,11,.72) 74%, var(--ink) 100%); }
@keyframes fog-breathe { from { transform: scale(1) rotate(0); } to { transform: scale(1.14) rotate(3deg); } }

.grain {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  background: url("../img/grain-light.png") 0 0 / 256px 256px;
  opacity: .075;
  animation: grain-jump .7s steps(1, end) infinite;
}
@keyframes grain-jump {
  0% { background-position: 0 0; }
  17% { background-position: -71px 45px; }
  33% { background-position: 38px -96px; }
  50% { background-position: -120px -33px; }
  67% { background-position: 84px 118px; }
  83% { background-position: -26px 71px; }
}

/* ==========================================================================
   Buttons: flat pills, with a light that follows the pointer (site.js sets --x, --y)
   ========================================================================== */
.btn {
  --x: 50%;
  --y: 50%;
  --spot: rgba(255, 255, 255, .3);
  --edge: rgba(255, 255, 255, .95);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: .55em;
  min-height: 46px;
  padding: 0 1.35em;
  border-radius: 999px;
  background: rgba(238, 243, 245, .1);
  box-shadow: inset 0 0 0 1px rgba(238, 243, 245, .3);
  color: var(--ice);
  font: 600 15px/1 var(--display);
  white-space: nowrap;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: transform .26s var(--ease), background-color .5s;
}
.btn::before, .btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}
.btn::before { background: radial-gradient(130px circle at var(--x) var(--y), var(--spot), transparent 62%); }
.btn::after {
  z-index: 0;
  padding: 1.5px;
  background: radial-gradient(100px circle at var(--x) var(--y), var(--edge), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.btn:hover::before, .btn:hover::after { opacity: 1; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.975); }
.btn__arrow { width: 14px; height: 14px; flex: none; transition: transform .25s var(--ease); }
a.btn:hover .btn__arrow { transform: translate(2px, -2px); }
.btn--solid { background: var(--acc); box-shadow: none; color: var(--black); --spot: rgba(255, 255, 255, .55); }
/* A button with nowhere to go yet is drawn as a gap, not as a dimmed button */
.btn[aria-disabled="true"] {
  background: none;
  color: inherit;
  box-shadow: none;
  outline: 1.5px dashed currentColor;
  outline-offset: -1.5px;
  opacity: .7;
  cursor: default;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: none;
}
.btn[aria-disabled="true"]::before, .btn[aria-disabled="true"]::after { display: none; }
.btn__off, .is-playing > .btn__on { display: none; }
.is-playing > .btn__off { display: inline; }

/* What is not real yet says so, so it cannot go live by accident. */
.ph {
  display: inline-block;
  padding: .28em .6em;
  border-radius: 3px;
  font: 600 11px/1.1 var(--text);
  letter-spacing: .02em;
  white-space: nowrap;
  color: var(--black);
  background: repeating-linear-gradient(-45deg, #ffe14d 0 7px, #ffd000 7px 14px);
}

/* ==========================================================================
   Top line
   ========================================================================== */
.top {
  position: fixed;
  z-index: 30;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px var(--gutter);
  color: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
}
/* No bar behind the nav: whatever scrolls up under it just blurs away, with no edge and no tint.
   Off at the top of the page, where it would soften the logo. site.js sets the class on scroll. */
body::before {
  content: "";
  position: fixed;
  z-index: 29;
  inset: 0 0 auto;
  height: 76px;
  pointer-events: none;
  opacity: 0;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(#000 58%, transparent);
  mask-image: linear-gradient(#000 58%, transparent);
  transition: opacity .25s ease;
}
.is-scrolled body::before { opacity: 1; }
.top a { pointer-events: auto; }
.top__nav ul { display: flex; gap: clamp(10px, 1.7vw, 26px); }
.top__nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 clamp(13px, 1.05vw, 15px)/1 var(--display);
}
.top__nav a::before {
  content: "";
  width: 7px;
  height: 7px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  transition: background-color .2s;
}
.top__nav a:hover::before, .top__nav a[aria-current]::before { background: currentColor; }

/* ==========================================================================
   Hero: the logo steps down left to right, so the news sits in the corner it leaves
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: 58px var(--gutter) calc(var(--dock-h) + 24px);
  margin-bottom: calc((var(--dock-h) + 28px) * -1 + 40px);
}
.stage {
  position: relative;
  container-type: inline-size;
  width: 100%;
  max-width: 1860px;
  margin: 0 auto;
  --d: 0;
  transform: scale(calc(1 + var(--bass, 0) * .012));
  transform-origin: 50% 55%;
}
.stage__art { position: relative; aspect-ratio: 2000 / 628; }
.stage__art svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* The rings live behind the logo, at rest exactly under it: the logo itself never changes shape.
   The music, the pointer and the arrival push them out in the direction of its own stack. */
.ring { opacity: clamp(0, calc((var(--d) - .05) * 16), 1); transform: translate(calc(var(--i) * var(--d) * .14cqw), calc(var(--i) * var(--d) * .62cqw)); will-change: transform; }
.ring use { stroke-linejoin: round; }

.hero__foot {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(-90px, -5.5vw, -20px);
  pointer-events: none;
}
.news { display: flex; align-items: flex-end; gap: clamp(14px, 1.6vw, 24px); pointer-events: auto; }
.news__cover {
  position: relative;
  width: clamp(112px, 15vh, 188px);
  aspect-ratio: 1;
  flex: none;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 18px 50px rgba(0,0,0,.5);
}
.news__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.news__cover:hover img { transform: scale(1.06); }
.news__kicker { font: 500 13px/1.2 var(--text); color: var(--steel); }
.news__title {
  margin: 2px 0 12px;
  font: 700 clamp(30px, 4.2vw, 68px)/.98 var(--display);
  letter-spacing: -.045em;
}
/* A long version name stays on one line rather than pushing the card up into the logo */
.news__title.is-long { font-size: clamp(24px, 3vw, 48px); line-height: 1.05; }
.news__cover img, .news__kicker, .news__title { transition: opacity .16s ease, transform .6s var(--ease); }
.news.is-changing .news__cover img, .news.is-changing .news__kicker, .news.is-changing .news__title { opacity: 0; }
.news__actions { display: flex; flex-wrap: wrap; gap: 14px; padding-bottom: 12px; }
.hero__line { max-width: 19em; padding-bottom: 12px; color: var(--ice); text-align: right; font-size: 14px; }

/* The spectrum: a chain of dots at rest, as in the logo, that stretch into bars when there is music */
.spectrum { position: relative; z-index: 1; margin-top: 18px; }
.spectrum canvas { width: 100%; height: clamp(44px, 8vh, 84px); }
.axis { position: relative; height: 18px; margin-top: 4px; border-top: 1px solid rgba(238,243,245,.28); }
.axis span { white-space: nowrap; position: absolute; top: 5px; font: 500 11px/1 var(--text); color: var(--steel); transform: translateX(-50%); }
.axis span:first-child { transform: none; }
.axis span:last-child { transform: translateX(-100%); }

/* ==========================================================================
   Section heads: the name, as big as it will go, centred on the page
   ========================================================================== */
.sec { position: relative; padding: clamp(72px, 10vw, 150px) var(--gutter) 0; }
.head {
  text-align: center;
  margin-bottom: clamp(30px, 4vw, 64px);
}
.head h1, .head h2 {
  font: 700 clamp(64px, 13.5vw, 240px)/.82 var(--display);
  letter-spacing: -.065em;
  /* Tight tracking lets the ink overhang its box to the right, by about .044em on these
     five words: this pads it back. Re-measure if the tracking or the words change, and not
     from a full-page screenshot: those drop the scrollbar and read 7.5px off. */
  padding-right: .087em;
}

/* ==========================================================================
   Music: the record on the left stays, the list runs past it
   ========================================================================== */
.music { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 72px); align-items: start; }
.deck { position: sticky; top: 72px; max-width: max(300px, calc(100svh - 72px - var(--dock-h) - 200px)); }
.deck__cover { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 10px; background: #000; box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 30px 80px rgba(0,0,0,.5); }
.deck__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.deck__cover img.is-on { opacity: 1; }
.deck__meta { display: flex; justify-content: space-between; gap: 14px; margin-top: 14px; font-size: 13px; color: var(--steel); }
.deck__meta b { color: var(--ice); font: 700 15px/1.3 var(--display); letter-spacing: -.02em; }
.plats { display: flex; flex-wrap: wrap; gap: 16px 14px; margin-top: 26px; padding-bottom: 12px; }

.rows { border-top: 1px solid rgba(238,243,245,.2); }
.row {
  position: relative;
  display: grid;
  grid-template-columns: 2.1em minmax(0, 1fr) auto;
  column-gap: 12px;
  align-items: baseline;
  padding: clamp(11px, 1.3vw, 18px) 0;
  border-bottom: 1px solid rgba(238,243,245,.2);
}
.row__no { font: 500 12px/1 var(--text); color: var(--steel); font-variant-numeric: tabular-nums; }
.row__thumb { display: none; }
.row__play {
  display: block;
  width: 100%;
  text-align: left;
  font: 600 clamp(25px, 3.5vw, 58px)/1.02 var(--display);
  letter-spacing: -.05em;
  overflow-wrap: anywhere;
  transition: color .15s, transform .35s var(--ease);
}
.row__play::after { content: ""; position: absolute; inset: 0; }
.row:hover .row__play { transform: translateX(.16em); }
.row__sub { display: block; margin-top: 5px; font-size: 13px; color: var(--steel); }
.row__side { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 13px; color: var(--steel); white-space: nowrap; }
.row__link { position: relative; z-index: 1; display: inline-flex; gap: 5px; align-items: center; color: var(--ice); font-weight: 500; }
.row__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.row__link svg { width: 11px; height: 11px; }
.is-playing > .row__play, .row__play.is-playing { color: var(--acc); }

.subs { position: relative; z-index: 1; grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.sub {
  padding: 7px 12px;
  border-radius: 99px;
  box-shadow: inset 0 0 0 1px rgba(238,243,245,.32);
  font: 500 13px/1 var(--text);
  transition: background-color .15s, color .15s;
}
.sub:hover { background: rgba(238,243,245,.14); }
.sub.is-playing { background: var(--acc); color: var(--black); box-shadow: none; }

/* ==========================================================================
   Kits: on the same ground as the rest, so the fog carries through
   ========================================================================== */
.kit { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 90px); align-items: end; }
.kit__name { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; font-size: 14px; color: rgba(238, 243, 245, .72); }
.kit__title { font: 700 clamp(38px, 5.6vw, 96px)/.92 var(--display); letter-spacing: -.055em; }
.kit__spec { margin-top: clamp(20px, 3vw, 40px); max-width: 44em; border-top: 1px solid rgba(238, 243, 245, .22); }
.kit__spec li { display: flex; justify-content: space-between; gap: 18px; padding: 9px 0; border-bottom: 1px solid rgba(238, 243, 245, .22); font-size: 14px; }
.kit__spec span:first-child { color: rgba(238, 243, 245, .72); }
.kit__buy { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 28px; padding-bottom: 12px; }
.kit__fine { font-size: 12px; color: rgba(238, 243, 245, .72); }

/* The box: the logo on a black tile */
.box { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--black); box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 30px 80px rgba(0, 0, 0, .5); }
.box svg { position: absolute; top: 42%; left: 50%; width: 92%; height: auto; transform: translate(-50%, -50%); }
.box__tag { position: absolute; left: 10%; bottom: 10%; color: var(--ice); font: 700 clamp(16px, 2vw, 28px)/1 var(--display); letter-spacing: -.04em; }

.made { margin-top: clamp(52px, 7vw, 100px); }
.made__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-bottom: 18px; }
.made__head h3 { font: 700 clamp(26px, 3.2vw, 50px)/1 var(--display); letter-spacing: -.05em; }
.made__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 22px); }
.made__tile { display: block; width: 100%; text-align: left; }
.made__art { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: #000; }
.made__art img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.made__tile:hover .made__art img { transform: scale(1.05); }
.made__glyph { position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(0,0,0,.72); color: #fff; }
.made__glyph svg { width: 14px; height: 14px; }
.made__tile.is-playing .made__glyph { background: var(--acc); color: #000; }
.made__title { display: block; margin-top: 8px; font: 700 clamp(15px, 1.5vw, 21px)/1.1 var(--display); letter-spacing: -.03em; }
.made__note { margin-top: 14px; font-size: 13px; color: rgba(238, 243, 245, .72); }

/* ==========================================================================
   About
   ========================================================================== */
.about { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(28px, 5vw, 90px); align-items: end; }
.about__say { font: 600 clamp(30px, 5vw, 82px)/1.01 var(--display); letter-spacing: -.05em; }
.about__say span { color: var(--steel); }
.about__facts div { display: grid; grid-template-columns: 6.2em 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(238,243,245,.22); font-size: 14px; }
.about__facts div:last-child { border-bottom: 1px solid rgba(238,243,245,.22); }
.about__facts dt { color: var(--steel); }
.about__draft { margin-top: 14px; }

/* ==========================================================================
   Tour: an empty row is the design until there are dates; the row template is in the page
   ========================================================================== */
.dates { border-top: 1px solid rgba(238,243,245,.2); }
.date { display: grid; grid-template-columns: 1fr 2fr 1fr auto; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid rgba(238,243,245,.2); }
.date--none { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 28px; padding: clamp(22px, 3vw, 44px) 0; }
.date__empty { font: 600 clamp(36px, 7vw, 118px)/.95 var(--display); letter-spacing: -.01em; color: transparent; -webkit-text-stroke: 1.5px var(--steel); }
.date__book { color: var(--steel); }
.date__book a { color: var(--ice); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Merch: the whole object is the link
   ========================================================================== */
.vinyl { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(20px, 4vw, 70px); align-items: center; }
.record { position: relative; display: block; width: min(100%, 620px); aspect-ratio: 1.66; }
.record__disc {
  position: absolute;
  top: 4%;
  left: 37%;
  width: 55.5%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff 0 1.6%, transparent 1.7%),
    conic-gradient(from 20deg, rgba(255,255,255,.22), transparent 12%, rgba(255,255,255,.1) 25%, transparent 38%, rgba(255,255,255,.22) 50%, transparent 62%, rgba(255,255,255,.1) 75%, transparent 88%, rgba(255,255,255,.22)),
    repeating-radial-gradient(circle, #0a0c10 0 2px, #14171c 2px 4px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 18px 40px rgba(0,0,0,.6);
  transition: left .8s var(--ease);
  animation: spin 3.4s linear infinite paused;
}
.record__label { position: absolute; inset: 30%; border-radius: 50%; overflow: hidden; }
.record__label img { width: 100%; height: 100%; object-fit: cover; }
.record__hole { position: absolute; top: 50%; left: 50%; width: 4%; height: 4%; border-radius: 50%; background: var(--ink); transform: translate(-50%, -50%); }
.record__sleeve {
  position: absolute;
  top: 0;
  left: 0;
  width: 60.2%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 6px;
  background: var(--black);
  box-shadow: 0 0 0 1px rgba(255,255,255,.2), 14px 0 40px rgba(0,0,0,.6);
}
.record__sleeve svg { position: absolute; top: 50%; left: 50%; width: 88%; height: auto; transform: translate(-50%, -50%); }
a.record:hover .record__disc, .record:hover .record__disc, .is-music .record__disc { animation-play-state: running; }
.record:hover .record__disc { left: 44%; }
@keyframes spin { to { transform: rotate(360deg); } }
.vinyl__title { font: 700 clamp(38px, 5.6vw, 96px)/.92 var(--display); letter-spacing: -.055em; }
.vinyl__copy { margin: 14px 0 20px; max-width: 30em; color: var(--steel); }
.vinyl__row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding-bottom: 12px; }

/* ==========================================================================
   Foot
   ========================================================================== */
.foot { padding: clamp(80px, 10vw, 150px) var(--gutter) 0; }
.foot__logo { width: 100%; max-width: 760px; height: auto; margin-bottom: clamp(30px, 4vw, 56px); }
.foot__links { display: flex; flex-wrap: wrap; gap: 4px clamp(14px, 2vw, 32px); font: 600 clamp(26px, 4vw, 66px)/1.15 var(--display); letter-spacing: -.05em; }
.foot__links a { transition: color .15s; }
.foot__links a:hover { color: var(--acc); }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; margin-top: clamp(28px, 4vw, 52px); font-size: 13px; color: var(--steel); }
.foot__base a:hover { color: var(--ice); }
.sound { display: inline-flex; align-items: center; gap: 7px; margin-left: 14px; color: var(--steel); vertical-align: middle; }
.sound svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sound[aria-pressed="true"] .sound__off, .sound[aria-pressed="false"] .sound__on { display: none; }
.sound:hover { color: var(--ice); }

/* ==========================================================================
   Snippets: his latest TikToks, small and still until pressed
   ========================================================================== */
.sec--snips { padding-top: clamp(56px, 7vw, 110px); }
.snips__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; margin-bottom: 18px; }
.snips__head h2 { font: 700 clamp(26px, 3.2vw, 50px)/1 var(--display); letter-spacing: -.05em; }
.snips__head a, .snip__meta a { display: inline-flex; align-items: center; gap: 5px; color: rgba(238, 243, 245, .72); font-size: 13px; }
.snips__head a:hover, .snip__meta a:hover { color: var(--ice); }
.snips__head svg, .snip__meta svg { width: 10px; height: 10px; }
.snips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); }
.snip { min-width: 0; }
.snip__frame { position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
/* dimmed at rest so a row of glitch stills doesn't shout; full when you're on it */
.snip__video { width: 100%; height: 100%; object-fit: cover; filter: brightness(.78) saturate(.85); transition: filter .4s ease; }
.snip__frame:hover .snip__video, .snip.is-on .snip__video { filter: none; }
.snip__glyph { position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(0, 0, 0, .66); color: #fff; transition: background-color .2s, color .2s; }
.snip__glyph svg { width: 13px; height: 13px; fill: currentColor; }
.snip__off, .snip.is-playing .snip__on { display: none; }
.snip.is-playing .snip__off { display: block; }
.snip.is-on .snip__glyph { background: var(--acc); color: #000; }
.snip__bar { position: absolute; left: 0; bottom: 0; height: 3px; width: var(--p, 0%); background: var(--acc); opacity: 0; }
.snip.is-on .snip__bar { opacity: 1; }
.snip__cap { margin-top: 9px; font: 600 14px/1.25 var(--display); letter-spacing: -.015em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.snip__meta { display: flex; gap: 10px; margin-top: 4px; font-size: 12px; color: rgba(238, 243, 245, .6); }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact { text-align: center; }
.contact__line { color: rgba(238, 243, 245, .72); font-size: clamp(15px, 1.3vw, 18px); }
.contact__mail { display: inline-block; max-width: 100%; margin-top: 10px; font: 700 clamp(30px, 6.4vw, 112px)/1.02 var(--display); letter-spacing: -.05em; overflow-wrap: anywhere; transition: color .15s; }
.contact__mail:hover { color: var(--acc); }
.contact__go { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: clamp(22px, 3vw, 40px); }

/* ==========================================================================
   Links: the link-in-bio page (links.html, and links.celeswav.com once the domain is in)
   ========================================================================== */
.lp { width: min(100%, 540px); margin: 0 auto; padding: clamp(36px, 7vh, 72px) 18px 40px; }
.lp__logo { display: block; width: min(100%, 420px); margin: 0 auto; }
.lp__logo img { width: 100%; height: auto; }
.lp__name { margin-top: 14px; text-align: center; color: rgba(238, 243, 245, .72); font-size: 14px; }
.lp__new { display: flex; align-items: center; gap: 14px; margin-top: 28px; padding: 10px 16px 10px 10px; border-radius: 14px; background: rgba(238, 243, 245, .08); box-shadow: inset 0 0 0 1px rgba(238, 243, 245, .18); transition: background-color .2s; }
.lp__new:hover { background: rgba(238, 243, 245, .14); }
.lp__new img { width: 64px; height: 64px; flex: none; border-radius: 7px; object-fit: cover; }
.lp__new-text { flex: 1; min-width: 0; }
.lp__new-kicker { display: block; font-size: 12px; color: rgba(238, 243, 245, .72); }
.lp__new-title { display: block; font: 700 22px/1.1 var(--display); letter-spacing: -.04em; }
.lp__new svg { width: 14px; height: 14px; flex: none; }
.lp__links { display: grid; gap: 10px; margin-top: 18px; }
.lp__links .btn { width: 100%; justify-content: center; min-height: 54px; font-size: 16px; }
.lp__group { margin-top: 34px; font: 700 20px/1 var(--display); letter-spacing: -.04em; }
.lp__rels { margin-top: 12px; border-top: 1px solid rgba(238, 243, 245, .2); }
.lp__rel { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(238, 243, 245, .2); }
.lp__rel img { width: 44px; height: 44px; border-radius: 5px; object-fit: cover; }
.lp__rel b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 16px/1.2 var(--display); letter-spacing: -.02em; }
.lp__rel span { font-size: 12px; color: rgba(238, 243, 245, .6); }
.lp__rel svg { width: 12px; height: 12px; color: rgba(238, 243, 245, .6); }
.lp__rel:hover b { color: var(--acc); }
.lp__foot { display: flex; justify-content: center; gap: 18px; margin-top: 34px; font-size: 13px; color: rgba(238, 243, 245, .6); }
.lp__foot a:hover { color: var(--ice); }

/* ==========================================================================
   Help: who to ask about what, two people side by side
   ========================================================================== */
body.plain { padding-bottom: 0; }
/* clears the descender of the p in "help" */
.head__sub { margin-top: clamp(24px, 4.2vw, 72px); color: var(--steel); font-size: clamp(15px, 1.3vw, 18px); }
.help__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 6vw, 110px); max-width: 1240px; margin: clamp(20px, 3vw, 44px) auto 0; }
.ask__scope { font: 700 clamp(38px, 5.6vw, 96px)/.92 var(--display); letter-spacing: -.055em; }
.ask__who { margin-top: 10px; color: var(--steel); font-size: 14px; }
.ask__covers { margin-top: clamp(20px, 2.4vw, 34px); border-top: 1px solid rgba(238, 243, 245, .22); }
.ask__covers li { padding: 12px 0; border-bottom: 1px solid rgba(238, 243, 245, .22); font-size: 15px; }
.ask__go { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(20px, 2.4vw, 32px); }
.foot__base > span:last-child, .foot__right { display: inline-flex; flex-wrap: wrap; gap: 8px 20px; }
.plain .foot { padding-top: clamp(64px, 8vw, 120px); padding-bottom: 28px; }

/* ==========================================================================
   The player: a full-width bar on the bottom edge, laid out like a music app's.
   What's playing on the left, transport and seek in the middle, volume on the right.
   ========================================================================== */
.dock {
  position: fixed;
  z-index: 35;
  inset: auto 0 0;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 3fr);
  align-items: center;
  gap: clamp(12px, 2vw, 32px);
  height: var(--dock-h);
  padding: 0 clamp(12px, 1.4vw, 22px);
  background: rgba(6, 8, 12, .92);
  box-shadow: 0 -1px 0 rgba(238, 243, 245, .14), 0 -18px 50px rgba(0, 0, 0, .3);
  color: var(--ice);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  backdrop-filter: blur(22px) saturate(1.3);
}
.dock__now { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dock__art { width: 58px; height: 58px; flex: none; overflow: hidden; border-radius: 5px; background: #111; }
.dock__art img { width: 100%; height: 100%; object-fit: cover; }
.dock__what { min-width: 0; line-height: 1.25; }
.dock__title, .dock__by { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dock__title { font: 700 15px/1.25 var(--display); letter-spacing: -.02em; }
.dock__by { margin-top: 2px; font-size: 12.5px; color: var(--steel); }

.dock__mid { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.dock__go { display: flex; align-items: center; gap: clamp(2px, .5vw, 8px); }
.dock__btn { position: relative; display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; color: rgba(238, 243, 245, .72); transition: color .15s, transform .2s var(--ease); }
.dock__btn:hover { color: var(--ice); transform: scale(1.08); }
.dock__btn svg { width: 16px; height: 16px; fill: currentColor; }
.dock__btn svg.ln { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* A mode that is on: the accent, and a dot under it */
.dock__btn[aria-pressed="true"] { color: var(--acc); }
.dock__btn[aria-pressed="true"]::after { content: ""; position: absolute; bottom: 1px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.dock__one { position: absolute; top: 3px; right: 2px; display: none; min-width: 12px; border-radius: 6px; background: var(--acc); color: #000; font: 700 9px/12px var(--text); text-align: center; }
.dock__btn[data-repeat="one"] .dock__one { display: block; }
.dock__btn--play { width: 36px; height: 36px; margin: 0 4px; background: var(--acc); color: #000; transition: background-color .5s, transform .2s var(--ease); }
.dock__btn--play:hover { color: #000; transform: scale(1.07); }
.dock__play-pause, .is-music .dock__play-play { display: none; }
.is-music .dock__play-pause { display: block; }

.dock__line { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 640px; }
.dock__time { flex: none; min-width: 2.4em; font: 500 11.5px/1 var(--text); font-variant-numeric: tabular-nums; color: var(--steel); }
.dock__time:first-child { text-align: right; }

/* The seek and volume sliders: a thin line, the thumb only while you're on it */
.slide { position: relative; flex: 1; min-width: 40px; height: 18px; display: flex; align-items: center; --p: 0%; }
.slide::before { content: ""; position: absolute; left: 0; right: 0; height: 4px; border-radius: 9px; background: linear-gradient(to right, var(--acc) var(--p), rgba(238, 243, 245, .24) var(--p)); }
.slide input { position: relative; width: 100%; height: 18px; margin: 0; background: none; appearance: none; -webkit-appearance: none; cursor: pointer; }
.slide input::-moz-range-track { background: none; }
.slide input::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--ice); opacity: 0; transition: opacity .12s; }
.slide input::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--ice); opacity: 0; transition: opacity .12s; }
.slide:hover input::-webkit-slider-thumb, .slide input:focus-visible::-webkit-slider-thumb { opacity: 1; }
.slide:hover input::-moz-range-thumb, .slide input:focus-visible::-moz-range-thumb { opacity: 1; }

.dock__side { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }
.dock__tag { font-size: 12px; color: var(--steel); white-space: nowrap; }
.dock__full { flex: none; display: inline-flex; align-items: center; gap: 5px; margin-right: 8px; font: 600 13px/1 var(--display); white-space: nowrap; }
.dock__full svg { width: 11px; height: 11px; }
.dock__full:hover { color: var(--acc); }
.slide--vol { flex: 0 1 112px; min-width: 56px; }
.dock__mute .vol-hi, .dock__mute .vol-lo, .dock__mute .vol-x { display: none; }
.dock__mute[data-level="high"] .vol-hi, .dock__mute[data-level="high"] .vol-lo, .dock__mute[data-level="low"] .vol-lo, .dock__mute[data-level="off"] .vol-x { display: block; }

/* ==========================================================================
   Narrower
   ========================================================================== */
@media (min-width: 821px) {
  /* a short window: the logo gives way so the news and the spectrum stay above the dock */
  .stage { max-width: min(1860px, max(560px, calc((100svh - 316px) * 3.18))); }
}
@media (max-height: 760px) { .hero__line { display: none; } }
.only-touch { display: none; }
@media (hover: none) { .only-touch { display: inline; } .only-hover { display: none; } }
@media (max-width: 1180px) { .dock__tag { display: none; } }
@media (max-width: 1000px) {
  .snips { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 22px; }
  .dock { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) minmax(0, 2fr); }
  .slide--vol { display: none; }
  .dock__mute { display: none; }
  .about, .kit { grid-template-columns: minmax(0, 1fr); }
  .box { max-width: 420px; }
}
@media (max-width: 820px) {
  :root { --dock-h: 60px; }
  .hero__line { display: none; }
  .hero__foot { margin-top: 26px; align-items: stretch; }
  .news { flex-direction: column; align-items: flex-start; width: 100%; }
  .news__cover { width: 100%; max-width: min(100%, 44svh); }
  .music { grid-template-columns: minmax(0, 1fr); }
  .deck { position: static; max-width: none; }
  .deck__cover, .deck__meta { display: none; }
  .plats { margin-top: 0; }
  .axis .is-minor { display: none; }
  .date__empty { -webkit-text-stroke-width: 1px; }
  .row { grid-template-columns: 54px minmax(0, 1fr) auto; }
  .row__no { display: none; }
  .row__thumb { display: block; width: 54px; height: 54px; border-radius: 5px; object-fit: cover; align-self: start; }
  .row__play { font-size: clamp(22px, 6.4vw, 34px); }
  .row__side { font-size: 12px; align-self: start; }
  .subs { grid-column: 1 / -1; }
  .made__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vinyl, .help__grid { grid-template-columns: minmax(0, 1fr); }
  /* the snippets become a row you swipe, running to the edges */
  .snips { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 6px; scrollbar-width: none; }
  .snips::-webkit-scrollbar { display: none; }
  .snip { flex: 0 0 min(44vw, 220px); scroll-snap-align: start; }
  .date { grid-template-columns: 1fr; gap: 4px; }
  /* The mini player: a card above the bottom edge, what's playing and the two buttons you
     reach for, with the seek line along its foot */
  .dock {
    inset: auto 8px calc(8px + env(safe-area-inset-bottom));
    display: flex;
    gap: 6px;
    padding: 0 8px 0 7px;
    border-radius: 9px;
    box-shadow: inset 0 0 0 1px rgba(238, 243, 245, .14), 0 10px 34px rgba(0, 0, 0, .45);
  }
  .dock__now { flex: 1; gap: 10px; }
  .dock__art { width: 44px; height: 44px; }
  .dock__mid, .dock__side { display: contents; }
  .dock__go { order: 3; gap: 0; }
  .dock__side > .dock__full { order: 2; margin: 0 4px; }
  .dock__tag, .dock__shuffle, .dock__repeat, .dock__btn--prev, .dock__time { display: none; }
  .dock__btn--play { width: 38px; height: 38px; margin: 0 2px; }
  .dock__line { position: absolute; left: 9px; right: 9px; bottom: 0; width: auto; max-width: none; }
  .dock__line .slide { height: 10px; }
  .dock__line .slide::before { height: 2px; }
  .dock__line .slide input { height: 10px; }
}

/* Seven links on a phone: the dots go */
@media (max-width: 429px) {
  .top__nav ul { gap: 9px; }
  .top__nav a { font-size: 12.5px; }
  .top__nav a::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fog__layer, .grain, .record__disc { animation: none; }
  .btn, .row__play, .record__disc { transition: none; }
}
@media (forced-colors: active) {
  .btn, .dock { box-shadow: none; border: 2px solid ButtonText; }
  .grain, .fog { display: none; }
}