/* Purple Theory Records — site styles
   Palette: a night ground with the moon-coloured text of the covers' skies,
   lilac and peach as the two accents, plum for the emblem. Single theme. */
:root{
  --night:#0E0B12; --night-2:#15101A; --night-3:#1D1624; --line:#2A2231; --line-soft:#1F1826;
  --moon:#EFE7EC; --soft:#D9CFD8; --haze:#A69AAF; --dim:#7C7085;
  --lilac:#B9A8EE; --peach:#F2B9A4; --plum:#8A3B6A; --plum-soft:#C98AAE;
  --display:'Zodiak', Georgia, 'Times New Roman', serif;
  --sans:'Satoshi', 'Helvetica Neue', Arial, sans-serif;
  --gutter:clamp(16px, 4vw, 48px);
  --max:1280px;
  color-scheme:dark;
  scrollbar-color:#3A2E44 var(--night);
}
*{box-sizing:border-box}
html{height:100%;-webkit-text-size-adjust:100%;background:var(--night)}
body{margin:0;min-height:100%;background:var(--night);color:var(--moon);font:400 1.0625rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;caret-color:var(--lilac);padding-inline:var(--gutter)}
::selection{background:var(--plum);color:var(--moon)}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-color:var(--plum-soft);text-decoration-thickness:1px;text-underline-offset:.2em;transition:color .18s, text-decoration-color .18s}
a:hover{color:var(--peach);text-decoration-color:currentColor}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
:where(a,button,input,[tabindex]):focus-visible{outline:2px solid var(--peach);outline-offset:3px;border-radius:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--gutter);top:-3rem;background:var(--moon);color:var(--night);padding:.5rem .9rem;z-index:50}
.skip:focus{top:.6rem}
code{font-family:ui-monospace,Menlo,monospace;font-size:.9em;background:var(--night-3);padding:.1em .35em}

h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.012em;margin:0;text-wrap:balance}
h1{font-size:clamp(2.4rem, 5.4vw, 4.4rem);line-height:.98}
h2{font-size:clamp(1.8rem, 3vw, 2.5rem);line-height:1.05}
.h-small{font-size:1.45rem;color:var(--soft);margin:2.8rem 0 .9rem}
p{margin:0}
.prose{max-width:66ch;display:grid;gap:1em;color:var(--soft)}
.prose p,.prose ul{margin:0}
.prose ul{padding-left:1.2em}
.prose h2{font-size:1.6rem;margin-top:.6em;color:var(--moon)}
.small{font-size:.92rem;color:var(--haze);max-width:44ch}
.page-meta,.intro-meta,.section-lede{color:var(--haze);max-width:60ch;font-size:1.05rem}
.more{font-size:.95rem;white-space:nowrap}

/* ---------- header / footer ---------- */
.top{max-width:var(--max);margin-inline:auto;display:flex;justify-content:space-between;align-items:center;gap:1.5rem 2.5rem;flex-wrap:wrap;padding-block:1.25rem 1.1rem;border-bottom:1px solid var(--line-soft)}
.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none;font:400 1.3rem/1 var(--display);letter-spacing:-.01em}
.brand img{width:52px;height:40px;object-fit:contain}
.brand em{font-style:italic;color:var(--plum-soft)}
.brand:hover{color:var(--moon)}
.brand:hover em{color:var(--peach)}
.nav{display:flex;gap:1.6rem;flex-wrap:wrap;font-weight:500;font-size:.98rem}
.nav a{text-decoration:none;padding-block:.2rem;border-bottom:1px solid transparent}
.nav a[aria-current]{border-bottom-color:var(--peach)}
.nav-demo{color:var(--lilac)}
.main{max-width:var(--max);margin-inline:auto;padding-block:0 6rem}
.foot{max-width:var(--max);margin-inline:auto;display:grid;grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr));gap:2rem 3rem;padding-block:2.5rem 3rem;border-top:1px solid var(--line-soft);font-size:.95rem;color:var(--haze)}
.foot-brand{display:grid;gap:1rem;align-content:start}
.foot-brand img{width:78px}
.foot-links{list-style:none;margin:0;padding:0;display:grid;gap:.4rem;align-content:start}
.foot-links a{text-decoration:none}
.foot-note{grid-column:1 / -1;font-size:.82rem;color:var(--dim)}

/* ---------- shared blocks ---------- */
.section{padding-block:4.5rem 0}
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem 2rem;flex-wrap:wrap;margin-bottom:1.4rem}
.section-lede{margin:-.6rem 0 1.4rem}
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem 4rem}
.split h2{margin-bottom:.7rem}
.split p{color:var(--soft);max-width:52ch}
.split p+p{margin-top:.8rem}
.page-head{padding-block:3.5rem 2.2rem;display:grid;gap:1rem;max-width:64ch}
.page-head h1{max-width:18ch}
.pill{border:1px solid rgba(239,231,236,.42);background:rgba(14,11,18,.82);color:var(--moon);border-radius:999px;padding:.62em 1.2em;font-weight:500;font-size:.92rem;line-height:1;transition:border-color .2s,background-color .2s}
.pill:hover{border-color:var(--moon);background:rgba(14,11,18,.96)}
.btn{display:inline-block;background:var(--moon);color:var(--night);text-decoration:none;font-weight:700;font-size:.98rem;padding:.9em 1.4em;border-radius:999px;transition:background-color .18s,transform .18s}
.btn:hover{background:var(--peach);color:var(--night);transform:translateY(-1px)}
.stream{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.45rem;font-size:.98rem}
.stream.inline{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin-top:1.2rem}
.tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:2.4rem}
.tags span{font-size:.82rem;color:var(--haze);border:1px solid var(--line);border-radius:999px;padding:.3em .75em}
.facts{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.5rem}
.facts div{display:grid;gap:.15rem}
.facts dt{font-size:.82rem;color:var(--haze)}
.facts dd{margin:0;font:400 1.5rem/1.1 var(--display)}
.empty{color:var(--haze);padding-block:2rem}
.howto{color:var(--haze);font-size:.95rem;max-width:70ch;margin-top:1rem}

/* stages */
.stage{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;container-type:inline-size;-webkit-user-select:none;user-select:none;background:var(--night-2)}
@media (max-width:720px){.stage{aspect-ratio:4/5}}

/* release grid */
.rgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2.2rem 1.4rem}
.rgrid-all{grid-template-columns:repeat(5,minmax(0,1fr))}
.rgrid a{display:grid;gap:.2rem;text-decoration:none;color:var(--moon)}
.rgrid img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--night-3);margin-bottom:.55rem;transition:filter .25s}
.rgrid a:hover img{filter:brightness(1.08)}
.rg-title{font-weight:700;font-size:.98rem;line-height:1.3}
.rgrid a:hover .rg-title{color:var(--peach)}
.rg-by{color:var(--soft);font-size:.92rem;line-height:1.3}
.rg-meta{color:var(--dim);font-size:.82rem;margin-top:.15rem}
.rgrid li[hidden]{display:none}

/* youtube facades */
.ytgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.8rem 1.4rem}
.ytgrid-1{grid-template-columns:minmax(0,1fr)}
.yt{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--night-3)}
.yt img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease,filter .3s}
.yt:hover img{transform:scale(1.03);filter:brightness(1.05)}
.yt-play{position:absolute;left:50%;top:50%;width:64px;height:64px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(14,11,18,.7);border:1px solid rgba(239,231,236,.6);transition:background-color .2s}
.yt-play::after{content:"";position:absolute;left:55%;top:50%;transform:translate(-50%,-50%);border-left:16px solid var(--moon);border-top:10px solid transparent;border-bottom:10px solid transparent}
.yt:hover .yt-play{background:var(--plum)}
.yt-len{position:absolute;right:.6rem;bottom:.6rem;background:rgba(14,11,18,.8);color:var(--moon);font-size:.78rem;font-weight:500;padding:.25em .5em;font-variant-numeric:tabular-nums}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-title{margin-top:.6rem;font-size:.95rem;color:var(--soft)}

/* ---------- home: the vase ---------- */
.intro{padding-block:3.5rem 2rem;display:grid;gap:1rem}
.intro h1{max-width:16ch}
.st-vase{background:var(--night);touch-action:pan-y;--m:0}
.st-vase svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.vz-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(14,11,18,.55) 0%,transparent 28%,transparent 70%,rgba(14,11,18,.7) 100%);opacity:calc(.25 + var(--m) * .75)}
.vz-copy{position:absolute;left:3.4cqi;top:3cqi;max-width:34cqi;display:grid;gap:.6cqi}
.vz-label{font-size:max(11px,1cqi);color:var(--peach);font-weight:500}
.vz-title{font-size:max(26px,4cqi);line-height:.95;font-style:italic}
.vz-title a{text-decoration:none;color:var(--moon)}
.vz-title a:hover{color:var(--peach)}
.vz-by{font-size:max(13px,1.4cqi);color:var(--soft)}
.vz-actions{position:absolute;right:3.4cqi;top:3cqi;display:flex;gap:.8cqi;flex-wrap:wrap;justify-content:flex-end}
.vz-name{position:absolute;bottom:3.2cqi;max-width:26cqi;font:400 max(15px,2.1cqi)/1.05 var(--display);color:var(--moon);text-wrap:balance}
.vz-a{left:3.4cqi}.vz-b{right:3.4cqi;text-align:right}
@media (max-width:720px){
  .vz-scrim{opacity:.9}
  .vz-copy{max-width:60cqi}
  .vz-actions{position:absolute;left:3.4cqi;right:auto;top:auto;bottom:16cqi;justify-content:flex-start}
  .vz-name{bottom:3.4cqi;max-width:40cqi}
}

/* ---------- release: mirror of water ---------- */
.st-water{background:radial-gradient(120% 95% at 50% 46%,#1C1527 0%,#120E18 58%,#0B080F 100%);cursor:pointer}
.st-water canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0}   /* water.js turns it on after its first frame */
/* the plain cover sits exactly where the water draws it (the same maths as water.js, in container units), so it is in the first paint;
   the shade on top gives it the water's own edge darkening and lilac tint, so the two look the same when the water takes over */
.wt-fallback,.wt-shade{position:absolute;border-radius:50%;pointer-events:none;left:36cqi;top:9.28cqi;width:28cqi;height:37.69cqi}
.wt-fallback{object-fit:cover}
.wt-shade{background:radial-gradient(closest-side,transparent 72%,rgba(0,0,0,.047) 79%,rgba(0,0,0,.15) 86%,rgba(0,0,0,.253) 93%,rgba(0,0,0,.3) 100%),linear-gradient(to top left,transparent 50%,rgba(186,168,237,.1) 85.4%)}
.wt-fallback[hidden],.wt-shade[hidden]{display:none}
/* the ring, like the plain cover, is placed by CSS with the same maths as water.js, so the first paint before the script runs is right */
.wt-ring{position:absolute;overflow:visible;pointer-events:none;color:var(--lilac);left:28.946cqi;top:1.659cqi;width:42.108cqi;height:52.932cqi}
.wt-ringtext{font-family:var(--display);font-size:19px;letter-spacing:3px;fill:var(--moon);white-space:pre}
.wt-gauge{visibility:hidden;letter-spacing:0}
.wt-drop{position:absolute;left:0;top:0;width:max(10px,1.1cqi);height:auto;fill:var(--lilac);opacity:0;pointer-events:none}
.wt-next{position:absolute;right:3.4cqi;bottom:3.4cqi;display:grid;justify-items:end;gap:.5cqi;text-align:right;text-decoration:none;font-size:max(11px,1cqi);color:var(--haze);max-width:26cqi}
.wt-next b{font:italic 400 max(15px,1.8cqi)/1.1 var(--display);color:var(--moon)}
.wt-next img{width:max(34px,4.6cqi);height:auto;aspect-ratio:.743;object-fit:cover;border-radius:50%}
.wt-next:hover b{color:var(--peach)}
@media (max-width:720px){
  .wt-fallback,.wt-shade{left:21.21cqi;top:16.25cqi;width:57.58cqi;height:77.5cqi}
  .wt-ring{left:6.705cqi;top:.576cqi;width:86.59cqi;height:108.848cqi}
  .wt-next{left:3.4cqi;right:3.4cqi;max-width:none;grid-template-columns:auto minmax(0,1fr);justify-items:start;text-align:left;align-items:center;column-gap:.8rem;row-gap:.1rem;font-size:11px}
  .wt-next img{grid-row:1 / span 2;width:40px}
  .wt-next b{font-size:16px}
}
.rel-head{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:1.5rem 3rem;align-items:end;padding-block:2.8rem 2rem;border-bottom:1px solid var(--line-soft)}
.rel-title{font-style:italic;font-size:clamp(2.6rem,6vw,5rem)}
.rel-by{font-size:1.25rem;color:var(--soft);margin-top:.6rem}
.rel-by a{text-decoration-color:var(--line)}
.rel-facts{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 2rem;justify-self:end;width:100%;max-width:26rem}
.rel-facts div{display:grid;gap:.2rem}
.rel-facts dt{font-size:.82rem;color:var(--haze)}
.rel-facts dd{margin:0;color:var(--moon)}
.rel-body{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:2.5rem 4rem;padding-top:2.4rem}
.rel-main .prose{margin-bottom:.5rem}
.tracks{list-style:none;margin:0;padding:0;max-width:40rem}
.tracks li{display:grid;grid-template-columns:2rem minmax(0,1fr) auto;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--line-soft);font-size:1rem}
.tr-n{color:var(--dim);font-variant-numeric:tabular-nums}
.tr-d{color:var(--haze);font-variant-numeric:tabular-nums}
.tr-a{display:block;font-size:.88rem;color:var(--haze);margin-top:.1rem}
.tr-a a{text-decoration-color:var(--line)}
.credits{color:var(--haze);font-size:.95rem;max-width:56ch;line-height:1.55}
/* ---------- physical editions: a card in the release aside, and a row on the front page ---------- */
.phys{display:grid;gap:.5rem;padding:1rem;background:var(--night-2);border:1px solid var(--line-soft);border-radius:14px;margin-top:.4rem}
.phys-pic{display:block;overflow:hidden;border-radius:10px;background:var(--night-3)}
.phys-pic img{width:100%;aspect-ratio:1;object-fit:cover;display:block;transition:transform .5s ease}
.phys-pic:hover img{transform:scale(1.03)}
.phys-kicker{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--peach);font-weight:500;margin-top:.35rem}
.phys-title{font:italic 400 1.35rem/1.15 var(--display)}
.phys-note{font-size:.9rem;color:var(--haze)}
.phys .btn{justify-self:start;margin-top:.25rem}
.pgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.8rem 1.4rem}
.pg-pic{display:block;overflow:hidden;border-radius:14px;background:var(--night-3)}
.pg-pic img{width:100%;aspect-ratio:1;object-fit:cover;display:block;transition:transform .5s ease,filter .3s}
.pg-pic:hover img{transform:scale(1.03);filter:brightness(1.05)}
.pg-title{margin-top:.75rem;font:italic 400 1.3rem/1.15 var(--display)}
.pg-title a{text-decoration:none;color:var(--moon)}
.pg-title a:hover{color:var(--peach)}
.pg-by{font-size:.92rem;color:var(--soft);margin-top:.1rem}
.pg-meta{font-size:.85rem;color:var(--haze);margin-top:.3rem}
.rel-aside{display:grid;gap:1rem;align-content:start;position:sticky;top:1.5rem}
.rel-aside .btn{justify-self:start}
.bc-wrap{margin-top:.6rem;background:var(--night-2);border:1px solid var(--line-soft)}
.bc-player{display:block;width:100%;border:0}
.bc-album{height:470px}
.bc-track{height:120px}
.rel-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;margin-top:4.5rem;padding-top:1.5rem;border-top:1px solid var(--line-soft)}
.rel-nav a{display:grid;gap:.15rem;text-decoration:none}
.rel-nav span{font-size:.82rem;color:var(--haze)}
.rel-nav b{font:italic 400 1.5rem/1.15 var(--display)}
.rel-nav i{font-style:normal;font-size:.92rem;color:var(--soft)}
.rel-next{text-align:right;justify-items:end}
.rel-nav a:hover b{color:var(--peach)}

/* ---------- catalogue ---------- */
.controls{display:flex;justify-content:space-between;align-items:center;gap:1rem 2rem;flex-wrap:wrap;padding-bottom:1.6rem;margin-bottom:2rem;border-bottom:1px solid var(--line-soft)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px}
.seg button{padding:.5em 1.1em;border-radius:999px;font-weight:500;font-size:.95rem;color:var(--haze);transition:background-color .2s,color .2s}
.seg button[aria-selected="true"]{background:var(--moon);color:var(--night)}
.search input{width:min(22rem,100%);background:var(--night-2);border:1px solid var(--line);color:var(--moon);font:inherit;font-size:.98rem;padding:.6em 1em;border-radius:999px}
.search input::placeholder{color:var(--dim)}
.search input:focus{border-color:var(--lilac);outline:none}
.st-color{--ct-bg:hsl(300 42% 15%);--ct-fg:#EFE7EC;--ct-soft:rgba(239,231,236,.72);background:var(--ct-bg);color:var(--ct-fg);transition:background-color .7s ease,color .4s ease;cursor:crosshair}
.st-color:focus-visible{outline-offset:-4px}
.ct-chip{position:absolute;left:0;top:0;width:var(--cw,18px);aspect-ratio:.743;border-radius:50%;overflow:hidden;will-change:transform;box-shadow:0 1px 4px rgba(0,0,0,.35);background:rgba(0,0,0,.2);display:block}
/* the built page gives every chip its tile in the cover sprite and its resting place on the ring (--x/--y in cqi); catalogue.js then moves them in px */
.ct-chip{background-image:var(--sprite);background-size:var(--sprite-size);transform:translate(calc(var(--x,50) * 1cqi - var(--cw,18px) / 2),calc(var(--y,28) * 1cqi - var(--cw,18px) / 1.486));z-index:10}
.ct-chip img{width:100%;height:100%;object-fit:cover}
.ct-chip:focus-visible{outline:2px solid var(--peach)}
.ct-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(40cqi,90%);display:grid;justify-items:center;text-align:center;pointer-events:none}
.ct-word{font:italic 400 max(34px,5.6cqi)/.9 var(--display)}
.ct-en{font-size:max(10px,1cqi);letter-spacing:.14em;text-transform:uppercase;color:var(--ct-soft);margin-top:.7cqi;font-weight:500}
.ct-cover{width:max(64px,10.5cqi);aspect-ratio:1;margin-top:1.6cqi;box-shadow:0 1cqi 2.6cqi rgba(0,0,0,.35);background:rgba(0,0,0,.2);pointer-events:auto;display:block}
.ct-cover img{width:100%;height:100%;object-fit:cover}
.ct-title{font:400 max(16px,1.9cqi)/1.1 var(--display);margin-top:1.2cqi;text-wrap:balance}
.ct-by{font-size:max(12px,1.1cqi);color:var(--ct-soft);margin-top:.3cqi}
.ct-meta{font-size:max(11px,.95cqi);color:var(--ct-soft);margin-top:.7cqi}
.ct-star{position:absolute;left:0;top:0;width:max(12px,1.7cqi);height:max(12px,1.7cqi);fill:var(--ct-fg);pointer-events:none;opacity:0}   /* catalogue.js shows it once it has placed it */
.ct-row{display:contents}
.howto-band{display:none}
@media (max-width:720px){
  /* on a phone the wheel becomes two rows of covers you slide along */
  .st-color{aspect-ratio:auto;display:grid;gap:.6rem;padding-block:1.6rem 1rem;cursor:default}
  .ct-center{position:static;transform:none;width:100%;padding-inline:1rem}
  .ct-word{font-size:36px}
  .ct-en{font-size:11px;margin-top:.4rem}
  .ct-cover{width:128px;margin-top:1rem;box-shadow:0 8px 22px rgba(0,0,0,.35)}
  .ct-title{font-size:19px;margin-top:.9rem}
  .ct-by{font-size:13px;margin-top:.2rem}
  .ct-meta{font-size:11px;margin-top:.5rem}
  .ct-star{display:none}
  .ct-ring{display:grid;gap:6px;padding-block:8px 10px}
  .ct-row{display:flex;gap:5px;overflow-x:auto;overscroll-behavior-x:contain;padding:2px 16px;scrollbar-width:none;touch-action:pan-x pan-y}
  .ct-row::-webkit-scrollbar{display:none}
  .ct-chip{position:static;flex:0 0 34px;width:34px;transform:none!important;will-change:auto;outline:2px solid transparent;outline-offset:2px;transition:outline-color .15s}
  .ct-chip.sel{outline-color:var(--ct-fg)}
  .howto-wheel{display:none}
  .howto-band{display:block}
}

/* ---------- artists: the sky ---------- */
.st-sky{background:#0A080E;touch-action:pan-y;cursor:grab}
.st-sky.dragging{cursor:grabbing}
.st-sky canvas,.st-sky svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.st-sky svg{pointer-events:none;overflow:visible}
.sky-letter{font:400 12.5px var(--display);letter-spacing:4px;fill:var(--haze)}
.sky-legend{position:absolute;left:2.6cqi;bottom:2.2cqi;max-width:max(24cqi,16rem);font-size:max(11px,1cqi);line-height:1.4;color:var(--haze);pointer-events:none}
.sky-count{position:absolute;right:2.6cqi;top:2.2cqi;text-align:right;font:italic 400 max(15px,1.9cqi)/1.1 var(--display);color:var(--soft);pointer-events:none;max-width:min(40cqi,13em)}
.sky-count span{display:block;font:400 max(10px,.95cqi)/1.4 var(--sans);font-style:normal;color:var(--haze);margin-top:.4cqi}
.sky-card{position:absolute;left:0;top:0;width:17.5rem;display:grid;grid-template-columns:4.1rem minmax(0,1fr);gap:.1rem .9rem;align-items:center;padding:.85rem 1rem .9rem .85rem;background:var(--night-3);border-radius:14px;box-shadow:0 14px 34px rgba(0,0,0,.5);cursor:auto}
.sky-card[hidden]{display:none}
.sky-card img{grid-row:1 / span 3;width:4.1rem;height:auto;aspect-ratio:.743;object-fit:cover;border-radius:50%}
.sky-card .t{font:italic 400 1.3rem/1.05 var(--display)}
.sky-card .b{font-size:.85rem;color:var(--soft);line-height:1.3}
.sky-card a{font-size:.85rem;color:var(--lilac);margin-top:.3rem}
.page-artist .st-sky{aspect-ratio:16/7}
@media (max-width:720px){
  .page-artist .st-sky{aspect-ratio:4/5}
  .sky-legend{max-width:62cqi;font-size:11px}
  .sky-count{max-width:min(60cqi,13em);font-size:16px}
}
.alist{list-style:none;margin:3.5rem 0 0;padding:0;columns:3;column-gap:3rem}
.alist li{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px solid var(--line-soft);break-inside:avoid;font-size:1rem}
.alist li[hidden]{display:none}
.alist a{text-decoration:none}
.alist span{color:var(--dim);font-variant-numeric:tabular-nums}
.alist-controls{margin:3.5rem 0 0;padding-bottom:1.2rem;margin-bottom:0}
.alist-controls + .alist{margin-top:.6rem}
.art-head{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:2rem 4rem;padding-block:2.8rem 0}
.art-head .prose{margin-top:1.4rem}
.bio-src{margin-top:.6rem;font-size:.82rem}
.with h2{margin-top:.4rem}
.with ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.with a{text-decoration:none}
.with span{color:var(--dim);font-size:.9rem}

.follow{margin-top:2.2rem;color:var(--haze);max-width:60ch;font-size:.98rem}

/* ---------- about / submit ---------- */
.about{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:2.5rem 4rem}
.about.closed .prose,.about.closed .about-side{color:var(--dim)}
.about.closed .prose h2,.about.closed .h-small{color:var(--haze)}
.about.closed .small{color:var(--dim)}
.about.one{grid-template-columns:minmax(0,1fr);max-width:66ch}
.about-side{display:grid;gap:1rem;align-content:start}
.about-side .h-small{margin-top:1.6rem;margin-bottom:0}
.about-side .stream{margin-top:0}
.about-emblem{width:min(300px,70%);margin-bottom:1rem}
.spin{width:min(300px,70%);margin-bottom:1rem;perspective:900px;cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.spin.dragging{cursor:grabbing}
.spin .about-emblem{width:100%;margin:0;transform-style:preserve-3d;backface-visibility:visible;will-change:transform;pointer-events:none}

/* ---------- demos: the spark (the star between the two profiles) ---------- */
.st-spark{background:var(--night-2);touch-action:pan-y;margin-bottom:3rem}
.st-spark svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.sp-hot{position:absolute;left:50%;top:44%;width:max(64px,14cqi);height:max(64px,14cqi);transform:translate(-50%,-50%);border-radius:50%;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sp-hot:focus-visible{outline-offset:-6px;border-radius:50%}
.sp-copy{position:absolute;left:3.4cqi;top:3cqi;max-width:32cqi;display:grid;gap:.6cqi;pointer-events:none}
.sp-label{font-size:max(11px,1cqi);color:var(--peach);font-weight:500}
.sp-title{font-size:max(26px,4cqi);line-height:.95;font-style:italic;color:var(--moon)}
.sp-line{font-size:max(13px,1.3cqi);color:var(--soft);max-width:30ch}
.sp-actions{position:absolute;left:3.4cqi;bottom:3.4cqi}
.sp-form{position:absolute;left:3.4cqi;bottom:3.2cqi;display:grid;gap:.5rem;max-width:28cqi}   /* the left face begins at about a third of the stage */
.sp-form input{flex-basis:9rem}
.sp-form-label{font:italic 400 max(15px,1.8cqi)/1.1 var(--display);color:var(--moon)}
.sp-form-row{display:flex;gap:.5rem;flex-wrap:wrap}
.sp-form .news-note{max-width:34ch}
@media (max-width:720px){
  .sp-hot{top:38%}
  .sp-copy{max-width:70cqi}
  .sp-form{right:3.4cqi;max-width:none}
  .sp-form .news-note{display:none}
}

/* ---------- the coin ---------- */
.coin{position:fixed;right:calc(1.1rem + env(safe-area-inset-right,0px));bottom:calc(1.1rem + env(safe-area-inset-bottom,0px));width:64px;height:64px;z-index:40;perspective:400px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}
.coin-3d{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.coin:hover .coin-3d{transform:rotateY(-24deg)}
.coin-face{position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:grid;place-items:center;overflow:hidden}
.coin-front{background:radial-gradient(ellipse at 34% 28%,#FFFAFC 0%,#F0E6EE 42%,#D6C4D5 100%);box-shadow:inset 0 0 0 1.5px #7E3561,inset 0 0 0 3px #F6EDF3}
.coin-front img{width:76%;height:auto}
.coin-back{transform:rotateY(180deg);background:var(--night-3);box-shadow:inset 0 0 0 1.5px var(--plum)}
.coin-back img{width:100%;height:100%;object-fit:cover}
.coin.tossing .coin-3d{transition:none}
.coin-big .main{min-height:100vh}
.coin-big .coin{width:min(56vw,300px);height:min(56vw,300px);right:auto;left:50%;bottom:auto;top:min(62vh,640px);transform:translate(-50%,-50%);position:absolute}
.coin-big .coin-front img{width:78%}
.coin{transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .3s}
.coin-away{transform:translateY(130px);opacity:0;pointer-events:none}
@media (max-width:720px){.coin{width:48px;height:48px}}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .rgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rgrid-all{grid-template-columns:repeat(4,minmax(0,1fr))}
  .rel-head,.rel-body,.art-head,.about{grid-template-columns:1fr}
  .rel-facts{justify-self:start}
  .rel-aside{position:static}
  .alist{columns:2}
  .foot{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .rgrid,.rgrid-all{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem 1rem}
  .ytgrid{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .top{gap:1rem 1.5rem}
  .brand span{font-size:1.15rem}
  .nav{gap:1.1rem;font-size:.92rem}
  .alist{columns:1}
  .foot{grid-template-columns:1fr}
  .rel-nav{grid-template-columns:1fr}
  .rel-next{text-align:left;justify-items:start}
  .controls{align-items:stretch}
  .search input{width:100%}
}

/* the physical row folds to two columns on a phone, like the release grid */
@media (max-width:720px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem 1rem}.pg-title{font-size:1.15rem}}

/* ---------- newsletter sign-up (Buttondown) ---------- */
.news{display:grid;gap:.6rem;max-width:34rem}
.news-form{display:flex;gap:.5rem;flex-wrap:wrap}
.news-form input{flex:1 1 14rem;min-width:0;font:inherit;color:var(--moon);background:var(--night-2);border:1px solid var(--line);border-radius:999px;padding:.72em 1.1em}
.news-form input::placeholder{color:var(--dim)}
.news-form input:focus{outline:2px solid var(--peach);outline-offset:2px;border-color:var(--moon)}
.news-form .btn{padding-block:.72em}
.news-note{font-size:.85rem;color:var(--dim)}
.foot .news{grid-column:1 / -1;padding-top:.5rem}

/* ---------- playlists on the front page ---------- */
.plgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.6rem 1.2rem}
.pl{display:grid;gap:.2rem;text-decoration:none;color:var(--moon)}
.pl img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--night-3);border-radius:10px;margin-bottom:.5rem;transition:filter .25s,transform .4s ease}
.pl:hover img{filter:brightness(1.08);transform:translateY(-2px)}
.pl-name{font-weight:700;font-size:.98rem;line-height:1.3}
.pl:hover .pl-name{color:var(--peach)}
.pl-note{color:var(--soft);font-size:.88rem;line-height:1.3}
@media (max-width:980px){.plgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:720px){.plgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem 1rem}}