:root{--ink:#07060a;--text:#f4efe8;--muted:rgba(244,239,232,.72)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--text);font:300 18px/1.6 Jost,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
nav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:22px clamp(18px,4vw,56px);font:400 14px/1 Jost;letter-spacing:.22em;text-transform:uppercase;background:linear-gradient(rgba(7,6,10,.55),transparent)}
nav a{text-decoration:none;opacity:.85}nav a:hover{opacity:1}
nav .links{display:flex;gap:clamp(14px,2.4vw,30px)}
@media (max-width:640px){nav .links{display:none}}

/* Hero: drifting color, breathing mark, strings you can pluck */
.hero{position:relative;height:100svh;min-height:620px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 18px;touch-action:pan-y}
.sky{position:absolute;inset:-10%;filter:blur(80px) saturate(1.15)}
.blob{position:absolute;border-radius:50%;mix-blend-mode:screen;opacity:.85;will-change:transform}
.b1{width:56vmax;height:56vmax;left:-14vmax;top:8vmax;background:#ff3d7f;animation:d1 38s ease-in-out infinite alternate}
.b2{width:60vmax;height:60vmax;left:24vmax;top:-26vmax;background:#7b3dff;animation:d2 44s ease-in-out infinite alternate}
.b3{width:50vmax;height:50vmax;right:-14vmax;top:10vmax;background:#00c2b8;animation:d3 41s ease-in-out infinite alternate}
.b4{width:44vmax;height:44vmax;left:34vmax;top:30vmax;background:#ffb627;animation:d4 35s ease-in-out infinite alternate}
.b5{width:48vmax;height:48vmax;left:-6vmax;bottom:-24vmax;background:#ff6a3d;animation:d5 39s ease-in-out infinite alternate}
@keyframes d5{to{transform:translate(26vmax,-8vmax) scale(1.1)}}
@keyframes d1{to{transform:translate(18vmax,-10vmax) scale(1.15)}}
@keyframes d2{to{transform:translate(-16vmax,14vmax) scale(.9)}}
@keyframes d3{to{transform:translate(-20vmax,-6vmax) scale(1.2)}}
@keyframes d4{to{transform:translate(12vmax,-18vmax) scale(.85)}}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.mark{position:relative;z-index:2;width:clamp(150px,18vw,230px);animation:breathe 11s ease-in-out infinite;filter:drop-shadow(0 0 22px rgba(255,255,255,.35))}
@keyframes breathe{0%,100%{transform:scale(1)}45%{transform:scale(1.08)}55%{transform:scale(1.08)}}
.word{position:relative;z-index:2;margin:26px 0 10px;font:600 clamp(40px,8vw,108px)/1 Cinzel,serif;letter-spacing:.16em;padding-left:.16em;text-shadow:0 4px 40px rgba(0,0,0,.35)}
.tag{position:relative;z-index:2;margin:0;font:italic 400 clamp(22px,2.6vw,36px)/1.2 'Cormorant Garamond',serif}
.cue{position:relative;z-index:2;margin-top:34px;font:400 13px Jost;letter-spacing:.24em;text-transform:uppercase;opacity:.8}
.sound{position:absolute;z-index:3;right:clamp(18px,4vw,56px);bottom:26px;background:rgba(7,6,10,.35);border:1px solid rgba(255,255,255,.5);color:#fff;font:400 12px Jost;letter-spacing:.2em;text-transform:uppercase;padding:10px 14px;border-radius:999px;cursor:pointer;backdrop-filter:blur(6px)}

/* Series tiles: color that slowly turns */
section{padding:clamp(56px,8vw,110px) clamp(18px,4vw,56px)}
h2{font:600 clamp(30px,4vw,52px)/1.05 Cinzel,serif;letter-spacing:.08em;margin:0 0 10px}
.lede{font:italic 400 clamp(22px,2.2vw,30px)/1.3 'Cormorant Garamond',serif;color:var(--muted);margin:0 0 36px;max-width:36em}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:800px){.tiles{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.tiles{grid-template-columns:minmax(0,1fr)}}
.tile{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;text-decoration:none;isolation:isolate;transition:transform .5s ease}
.tile:hover{transform:translateY(-6px)}
.tile::before{content:"";position:absolute;inset:-40%;z-index:-1;background:var(--g);animation:turn 24s linear infinite}
.tile:hover::before{animation-duration:8s}
@keyframes turn{to{transform:rotate(360deg)}}
.tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(transparent 45%,rgba(0,0,0,.45))}
.tile h3{margin:0;font:600 clamp(26px,2.4vw,34px)/1 Cinzel,serif;letter-spacing:.1em}
.tile p{margin:8px 0 0;font:italic 400 22px/1.25 'Cormorant Garamond',serif}
.tile small{position:absolute;top:20px;left:24px;font:400 12px Jost;letter-spacing:.22em;text-transform:uppercase;opacity:.85}

/* Live: the band */
.band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,70px);align-items:center}
@media (max-width:860px){.band{grid-template-columns:minmax(0,1fr)}}
.orb{aspect-ratio:1;border-radius:50%;background:conic-gradient(from 0deg,#ff3d7f,#ffb627,#00c2b8,#7b3dff,#ff3d7f);animation:turn 30s linear infinite;filter:blur(2px);position:relative}
.orb::after{content:"";position:absolute;inset:14%;border-radius:50%;background:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.chips li{border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:6px 14px;font:400 14px Jost;letter-spacing:.06em}
footer{padding:40px clamp(18px,4vw,56px);font:400 13px Jost;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;border-top:1px solid rgba(255,255,255,.1)}

@media (prefers-reduced-motion:reduce){.blob,.mark,.tile::before,.orb{animation:none}}

/* Series detail and soundscapes */
.series{display:grid;gap:18px}
.row{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:clamp(18px,4vw,48px);align-items:center;padding:28px 0;border-top:1px solid rgba(255,255,255,.12)}
@media (max-width:640px){.row{grid-template-columns:minmax(0,1fr)}}
.swatch{aspect-ratio:1;border-radius:12px;background:var(--g);position:relative;overflow:hidden}
.row h3{margin:0 0 6px;font:600 28px/1 Cinzel,serif;letter-spacing:.1em}
.row p{margin:0 0 12px;color:var(--muted)}
.soon{font:400 13px Jost;letter-spacing:.2em;text-transform:uppercase;opacity:.75}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.55);border-radius:999px;padding:12px 20px;font:400 14px Jost;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;transition:background .3s}
.btn:hover{background:rgba(255,255,255,.12)}
.btn.solid{background:#fff;color:#07060a;border-color:#fff}.btn.solid:hover{background:#f1e6ff}
.class{border-radius:18px;padding:clamp(28px,5vw,56px);background:linear-gradient(135deg,rgba(123,61,255,.22),rgba(0,194,184,.16));border:1px solid rgba(255,255,255,.12)}
.players{display:grid;gap:12px;margin:22px 0}
audio{width:100%;max-width:560px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:50;background:#fff;color:#000;padding:8px 12px}

html,body{overflow-x:clip}
#live{overflow:hidden}

/* Series tiles now carry the description and status themselves */
.tile .soon{margin-top:14px;font-size:12px}
.tile{scroll-margin-top:90px}

/* Playable strings inside each series tile */
.tile canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.tile{touch-action:pan-y;cursor:pointer}
.sound.inline{position:static;display:inline-block;margin:-14px 0 30px}