:root{
  /* MOTION TOKENS (the rules live in the MOTION block at the end of this file; main.js reads these same tokens) */
  --ease:cubic-bezier(.4,0,.2,1);      /* things that CHANGE: hover, focus, selection, colour, fills (a soft in-out) */
  --ease-out:cubic-bezier(.16,1,.3,1); /* things that ARRIVE or MOVE: reveals, panels, slides, the wheel (fast start, long settle, like the scrolling) */
  --t-s:.4s;--t-m:.7s;--t-l:1.1s;      /* small controls and fades / wipes and nudges / arrivals and big moves */
  --stagger:50ms;                      /* delay step between siblings */
  --bg:#0b0b0b; --surface:#151515; --line:#262626;
   --white:#f4f2ee; --off:#ece8df; --dim:#a4a29d; --ink:#0b0b0b;
  --display:'Anton','Impact',sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'Space Mono',ui-monospace,monospace;
  --gutter:clamp(16px,3.2vw,40px);
  --gap:clamp(12px,1.6vw,20px);
  --maxw:1440px;
  --hh:56px;      /* sticky header height, measured by main.js */

  /* TEXT ON LIGHT SURFACES (off-white panels and bands): --ink, then two softer steps. --mute = the dimmed words on dark. --grid-light = lines on light. */
  --ink-2:#4a4844; --ink-3:#77746f; --mute:#6f6d69; --grid-light:#c9c6bf;

  /* TYPE SCALE (small text). Display type (Anton) is sized per component with clamp(), always uppercase.
     Mono caps:  --fs-tag tags, pills, chart ticks  /  --fs-label labels, captions, links  /  --fs-ctl filter chips, list rows
     Body font:  --fs-ui buttons, chips, hints  /  --fs-small secondary copy  /  --fs-body inputs  /  --fs-read long reading  /  --fs-lead intro paragraphs */
  --fs-tag:.68rem; --fs-label:.72rem; --fs-ctl:.78rem;
  --fs-ui:.85rem; --fs-small:.95rem; --fs-body:1rem; --fs-read:1.05rem; --fs-lead:clamp(1rem,1.5vw,1.25rem);

  /* CONTROL SIZES: chips and filters / icon buttons / buttons, inputs and platform squares */
  --ctl-s:40px; --ctl-m:44px; --ctl-l:56px;

  /* FILL STEPS for tinted controls (a tint of the control's own text colour): idle and hover on dark surfaces, idle on colour fields (hover goes solid) */
  --tint-1:10%; --tint-2:18%;
}
*{box-sizing:border-box;margin:0;padding:0}
/* No section snapping anywhere. Scrolling is eased by main.js on desktop and native elsewhere. */
html{scroll-behavior:smooth;scroll-padding-top:var(--hh);scroll-snap-type:none}
html.js-snap{scroll-snap-type:none}
body{background:var(--bg);color:var(--white);font-family:var(--body);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit}
.wrap{padding:0 var(--gutter);max-width:var(--maxw);margin:0 auto;position:relative;z-index:1}
.d{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.92}
.mono{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- nav ---------- */
header{position:sticky;top:0;z-index:100;background:var(--bg);border-bottom:1px solid var(--line)}
nav{display:flex;align-items:stretch;justify-content:space-between;max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter)}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:1.5rem;letter-spacing:.04em;padding:14px 0}
.logo svg{width:24px;height:24px;fill:var(--accent)}
.nav-r{display:flex;align-items:stretch}
.links{display:flex;gap:28px;align-items:center;padding-right:28px;font-size:var(--fs-ui);font-weight:500}
.links a{opacity:.85}.links a:hover{color:var(--accent);opacity:1}
.demo-btn{display:flex;align-items:center;gap:10px;padding:0 var(--gutter);border-left:1px solid var(--line);font-size:var(--fs-ui);font-weight:600}
.demo-btn:hover{background:var(--accent)}
.menu-btn{display:none;background:none;border:0;color:var(--white);padding:0 16px;font-size:var(--fs-ui);font-weight:600;cursor:pointer}

/* ---------- hero ---------- */
.hero{--tfs:min(20vw,19rem);--ch:min(max(240px,calc(100svh - var(--hh) - var(--tfs)*.95 - 24px - 72px)),45.8vw); /* 45.8vw: always about three cards across on desktop */
  min-height:calc(100svh - var(--hh));display:flex;flex-direction:column;justify-content:center;padding:28px 0;overflow:hidden}
.title{position:relative;color:var(--accent);font-size:var(--tfs);text-align:center;white-space:nowrap;margin-bottom:24px;line-height:.95}
.chip{position:absolute;background:var(--bg);color:var(--white);font:500 clamp(.58rem,.9vw,.82rem)/1.35 var(--body);text-transform:none;white-space:normal;text-align:left;padding:5px 9px;max-width:15em}
.chip.a{left:8%;top:30%}
.chip.b{left:56%;top:60%}

.carousel{overflow:hidden;padding-left:max(var(--gutter),calc((100vw - var(--maxw))/2 + var(--gutter)))}
.track{display:flex;width:max-content;animation:drift 165s linear infinite}
@keyframes drift{to{transform:translateX(-50%)}}
.card{position:relative;flex:none;height:var(--ch);width:calc(var(--ch)*.78);margin-right:var(--gap);overflow:hidden;display:block;background:var(--c)}
.card .photo{position:absolute;inset:0;background:var(--photo,none) center/cover}
.card .sil{position:absolute;left:50%;bottom:0;width:78%;height:auto;aspect-ratio:300/330;transform:translateX(-50%);fill:rgba(0,0,0,.28)}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(0,0,0,.55));pointer-events:none}
.card h3{position:absolute;left:20px;bottom:18px;z-index:2;font-size:clamp(1.6rem,3vw,2.6rem)}

/* ---------- grid system (injected by main.js) ---------- */
.gridded{position:relative}

/* ---------- info strip ---------- */
.strip{background:var(--white);color:var(--ink)}
.strip .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.strip .cell{padding:clamp(28px,4vw,48px) 20px}
.strip small{display:block;color:var(--ink-3);margin-bottom:10px}
.strip b{font:400 var(--fs-small)/1.45 var(--mono);text-transform:uppercase;letter-spacing:.04em}

/* ---------- releases ---------- */
.releases{position:relative;min-height:calc(100svh - var(--hh));overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:28px 0 32px;isolation:isolate}
.bd{position:absolute;inset:-12%;z-index:-3;background:var(--bgimg,var(--c,var(--surface))) center/cover;filter:blur(55px) saturate(1.25);opacity:0}
.bd.on{opacity:1}
.releases::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.35) 50%,rgba(0,0,0,.7))}
.rel-top{display:flex;justify-content:space-between;align-items:center}
.rel-top .mono{color:rgba(255,255,255,.8)}
.arrows{display:flex;gap:8px}
.arrows button{width:var(--ctl-m);height:var(--ctl-m);border-radius:0;cursor:pointer;font-size:var(--fs-body)}
/* releases are one ring of cards positioned by main.js: it rotates like a wheel, with no ends */
.rel-viewport{--cs:clamp(200px,min(22vw,30svh),290px);position:relative;height:var(--cs);overflow:hidden;cursor:grab;touch-action:pan-y;margin:24px 0}
.rel-viewport.drag{cursor:grabbing}
.rel-track{position:absolute;inset:0}
.rel-card{position:absolute;left:50%;top:0;margin-left:calc(var(--cs)/-2);width:var(--cs);height:var(--cs);background:var(--bgimg,var(--c)) center/cover;opacity:.4;overflow:hidden;cursor:pointer;border:0;outline:0}
.rel-card:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
.rel-card.active{opacity:1}
.rel-card .pbtn{position:absolute;inset:0;display:none;place-items:center;background:rgba(0,0,0,.18)}
.rel-card.active:not(.playing) .pbtn{display:grid}
.pbtn i{width:58px;height:58px;border-radius:0;background:#fff;display:grid;place-items:center}
.pbtn i::before{content:"";margin-left:4px;border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent var(--ink)}
.player{position:absolute;inset:0;background:var(--ink)}
.player iframe{width:100%;height:100%;border:0}
.rel-bottom .name{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:24px}
.rel-bottom h2{font-size:clamp(3rem,min(9vw,14svh),8rem);color:var(--white)}
.rel-bottom .by{color:rgba(255,255,255,.85);padding-bottom:.8em}
.progress{display:flex;align-items:center;gap:16px;max-width:360px;color:rgba(255,255,255,.8)}
.bar{flex:1;height:1px;background:rgba(255,255,255,.3);position:relative}
.bar i{position:absolute;left:0;top:-1px;height:3px;width:calc(100%/var(--n,1));background:#fff;transform:translateX(calc(var(--k,0)*100%))}  /* main.js sets --n (releases) and --k (current) */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--white);color:var(--ink);padding:12px 20px;font-size:var(--fs-ui);opacity:0;pointer-events:none;z-index:200}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- stats dashboard (fills one screen on desktop) ---------- */
.stats{--py:clamp(28px,4vw,56px);min-height:calc(100svh - var(--hh));display:flex;align-items:center;padding:var(--py) 0}
.stats .wrap{width:100%}
.sec-label{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:16px;color:var(--dim)}
.sec-label h2{font-size:clamp(2.4rem,min(6vw,8svh),4.4rem);color:var(--accent)}
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,minmax(140px,1fr));gap:var(--gap);height:calc(100svh - var(--hh) - 2*var(--py) - 100px);min-height:520px}
.tile{min-width:0;min-height:0;overflow:hidden;background:var(--surface);padding:20px;display:flex;flex-direction:column;justify-content:space-between;position:relative}
.tile .lbl{font:400 var(--fs-label) var(--mono);letter-spacing:.06em;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center;gap:8px}
.tile .num{font:400 clamp(2.2rem,min(5vw,7svh),4.2rem)/1 var(--mono)}
.tile .num small{font-size:var(--fs-small);color:var(--dim);margin-left:8px}
.t-wide{grid-column:span 2}
.t-tall{grid-row:span 2}
.delta{display:inline-block;margin-top:12px;border-radius:0;padding:4px 10px;color:var(--white);font-size:var(--fs-tag);white-space:nowrap}
.pill{border-radius:0;padding:4px 10px;font-size:var(--fs-tag);white-space:nowrap}

/* entrance + hover (cursor spotlight and tilt are driven by main.js) */
.tile::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.09),transparent 62%)}
.tile.cta::before{background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.2),transparent 62%)}
.tile:hover::before{opacity:1}
.js .bento:not(.go) .tile{opacity:0}                     /* hidden until the dashboard scrolls into view */
.js .bento.go .tile{animation:arrive var(--t-l) var(--ease-out) backwards;animation-delay:calc(var(--i)*var(--stagger))}
@keyframes arrive{from{opacity:0;transform:translateY(28px)}}

/* roster dots */
.roster{display:flex;gap:8px;margin-top:10px}
.roster i{width:14px;height:14px;border-radius:0;border:1.5px solid #fff}
.go .roster i{background:#fff}
.tile:hover .roster i{transform:translateY(-4px)}

/* streams chart */
.seg{display:flex;gap:2px}
.seg button{background:none;border:0;color:var(--dim);font:inherit;padding:3px 8px;cursor:pointer;border-radius:0}
.seg button:hover{color:var(--white)}.seg button.on{background:var(--line);color:var(--white)}
.chart-body{display:flex;align-items:stretch;gap:clamp(16px,2.4vw,32px);flex:1;min-height:0;margin-top:10px}
.chart-body .num{display:flex;flex-direction:column;justify-content:flex-end;flex:none;white-space:nowrap}
.chart-body .num small#chartNote{margin:6px 0 26px;font:400 var(--fs-tag) var(--mono);letter-spacing:.06em;text-transform:uppercase}
.chart{position:relative;flex:1;min-width:0;display:flex;align-items:stretch;gap:clamp(4px,1vw,10px);margin:0 0 22px}
.chart .b{position:relative;flex:1;display:flex;align-items:flex-end;background:none;border:0;cursor:pointer;padding:0}
.chart .b i{display:block;width:100%;height:100%;background:#b9b6ae;transform:scaleY(var(--h,0));transform-origin:bottom}  /* --h is 0..1, set by main.js */
.chart .b span{position:absolute;top:100%;left:0;right:0;margin-top:6px;text-align:center;font:400 var(--fs-tag) var(--mono);color:var(--dim);text-transform:uppercase}
.chart:hover .b:not(:hover) i{opacity:.4}
.chart .b.sel i,.chart .b:hover i,.chart .b:focus-visible i{background:var(--accent)}
.chart .b:hover span{color:#fff}
.tip{position:absolute;left:0;top:0;z-index:3;pointer-events:none;background:var(--white);color:var(--ink);font:700 var(--fs-tag) var(--mono);padding:4px 8px;white-space:nowrap;transform:translate(-50%,-100%);opacity:0}
.tip.on{opacity:1}

/* progress */
.ptrack{height:4px;background:var(--line);margin-top:14px}
.ptrack i{display:block;height:100%;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}
.go .ptrack i{transform:scaleX(.8)}

/* latest works */
.thumbs{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:6px;flex:1;min-height:0;margin:14px 0 10px}
.thumbs button{min-width:0;min-height:0;border:0;background:var(--c);cursor:pointer}
.thumb-cap{color:var(--dim);min-height:1.2em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ring */
.ring-tile{font:inherit;color:inherit;border:0;text-align:left;cursor:pointer;width:100%}
.ring{display:grid;place-items:center;flex:1;min-height:0;position:relative}
.ring svg{height:100%;max-height:170px;aspect-ratio:1;width:auto;transform:rotate(-90deg)}
.ring b{position:absolute;font:400 2rem var(--mono)}
.ring em{position:absolute;margin-top:46px;font:400 var(--fs-tag) var(--mono);letter-spacing:.08em;font-style:normal;color:var(--dim)}
.ring-tile:hover .ring em{color:var(--white)}

/* statement */
.tile.statement h3{font-size:clamp(2rem,min(3.4vw,5svh),3rem);margin-bottom:12px;position:relative}
.tile.statement p{font:400 var(--fs-label)/1.35 var(--mono);text-transform:uppercase;position:relative;max-width:22em}
.tile.statement.swap h3,.tile.statement.swap p{opacity:0;transform:translateY(10px)}
.dots{display:flex;gap:8px;margin-top:18px;position:relative;z-index:3}
.dots button{width:9px;height:9px;border-radius:0;border:1px solid #fff;background:none;padding:0;cursor:pointer}
.dots button.on{background:#fff;transform:scale(1.25)}

/* live tile */
.tile.cta{background:var(--off);color:var(--ink)}
.tile.cta:hover{background:var(--white)}
.tile.cta h3{font-size:clamp(2rem,min(4vw,6svh),3.4rem);max-width:9em}
.tile.cta .arr{position:absolute;top:18px;right:18px;width:42px;height:42px;border-radius:0;background:var(--ink);color:#fff;display:grid;place-items:center}
.tile.cta .arr b{font-weight:400;line-height:1}
.tile.cta:hover .arr{background:var(--accent);color:var(--on-accent)}
.tile.cta .lbl{color:var(--ink-2)}
.live{display:inline-flex;align-items:center;gap:8px}
.live i{width:8px;height:8px;border-radius:0;background:var(--accent);animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.2}}
.eq{position:absolute;right:22px;bottom:22px;display:flex;align-items:flex-end;gap:4px;height:46px}
.eq i{width:5px;height:100%;background:var(--ink);transform-origin:bottom;animation:eq 1.1s ease-in-out infinite}
.eq i:nth-child(2){animation-duration:.8s;animation-delay:-.3s}
.eq i:nth-child(3){animation-duration:1.3s;animation-delay:-.6s}
.eq i:nth-child(4){animation-duration:.9s;animation-delay:-.2s}
.eq i:nth-child(5){animation-duration:1.2s;animation-delay:-.8s}
.eq i:nth-child(6){animation-duration:1s;animation-delay:-.5s}
@keyframes eq{0%,100%{transform:scaleY(.2)}50%{transform:scaleY(1)}}
.tile.cta:hover .eq i{background:var(--accent)}

/* ---------- about: half text, half image ---------- */
.about{padding:0;display:block}
.about-split{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;min-height:calc(100svh - var(--hh))}
.about-text{display:flex;flex-direction:column;justify-content:center;padding:clamp(40px,6vw,80px) clamp(24px,4vw,64px) clamp(40px,6vw,80px) max(var(--gutter),calc((100vw - var(--maxw))/2 + var(--gutter)))}
.about .tag{color:var(--dim);margin-bottom:28px;display:flex;align-items:center;gap:8px}
.about .tag::before{content:"";width:6px;height:6px;background:var(--accent);border-radius:0}
.about .statement{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.7rem,min(3.5vw,5.6svh),3.6rem);line-height:1.04;color:var(--mute)}
.about .statement b{font-weight:400;color:var(--white)}
.about-img{position:relative;overflow:hidden;min-height:100%}
.about-img .img{position:absolute;inset:0;background:var(--photo,linear-gradient(160deg,#a01018,#3a0508)) center/cover;transform:scale(1.1)}
.about-img .img svg{position:absolute;left:50%;bottom:0;width:58%;height:auto;transform:translateX(-50%);fill:rgba(0,0,0,.35)}
.about-img::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 65%,rgba(0,0,0,.5));pointer-events:none}
.about-img .cap{position:absolute;left:clamp(16px,2vw,28px);bottom:clamp(14px,2vw,24px);z-index:2;color:rgba(255,255,255,.88);font:400 var(--fs-label)/1.35 var(--mono);letter-spacing:.08em;text-transform:uppercase}
/* the image wipes in from the right instead of the usual fade-up */
.about-img.reveal{opacity:1;transform:none}
.about-img .img{clip-path:inset(0 0 0 100%)}
.about-img.in .img{clip-path:inset(0);transform:none}
.about-img .cap{opacity:0}
.about-img.in .cap{opacity:1}
/* ---------- demo ---------- */
.demo{--dh:min(40vw,540px,calc((100svh - var(--hh))*.5));min-height:calc(100svh - var(--hh));display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(32px,5vw,72px) 0 0;overflow:hidden;border-top:1px solid var(--line)}
.demo .wrap{width:100%}
.demo h2{font-size:var(--dh);line-height:.8;height:calc(var(--dh)*.8);color:var(--accent);text-align:center;letter-spacing:.01em}
.panel{background:var(--off);color:var(--ink);margin-left:25%;margin-top:calc(var(--dh)*-.28);padding:clamp(20px,2.6vw,40px);position:relative}
/* form header + progress meter */
.panel-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:clamp(16px,2.6vh,30px);color:var(--ink-2)}
.meter{display:flex;align-items:center;gap:12px}
.meter i{display:block;width:96px;height:3px;background:rgba(11,11,11,.14);position:relative;overflow:hidden}
.meter b{position:absolute;inset:0;background:var(--accent);transform:scaleX(var(--m,0));transform-origin:left}

.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px clamp(28px,5vw,72px)}
.col{display:grid;gap:clamp(8px,1.4vh,16px);align-content:start}

/* underlined fields: number + label on top, big input below, red line draws in on focus */
.f{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:baseline;padding-top:6px;border-bottom:1px solid rgba(11,11,11,.3);cursor:text}
.f::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left}
.f:focus-within::after{transform:scaleX(1)}
.f .n{color:rgba(11,11,11,.4)}
.f .t{font:500 var(--fs-label) var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(11,11,11,.62)}
.f:focus-within .t{color:var(--ink)}
.f input,.f textarea{grid-column:1/-1;width:100%;background:transparent;border:0;padding:4px 30px clamp(8px,1.4vh,14px) 0;font:500 clamp(1.05rem,1.45vw,1.3rem) var(--body);color:var(--ink);outline:none;border-radius:0}
.f textarea{min-height:clamp(64px,11vh,120px);resize:none}
.f small{grid-column:1/-1;font-size:var(--fs-label);color:rgba(11,11,11,.5);padding-bottom:8px;margin-top:-4px}
.f .ok{position:absolute;right:2px;top:50%;margin-top:-4px;color:var(--accent);font-weight:700;opacity:0;transform:scale(.4)}
.f input:not(:placeholder-shown):valid ~ .ok{opacity:1;transform:none}
.f.bad{border-color:var(--accent)}.f.bad .t{color:var(--accent)}.f.bad{animation:nudge var(--t-s) var(--ease)}
@keyframes nudge{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* genre chips */
.genre{border:0;min-width:0;padding:0}
.genre legend{float:left;width:100%;margin-bottom:10px;color:rgba(11,11,11,.62);font-size:var(--fs-label);padding:0}
.genre legend em{font-style:normal;opacity:.7}
.chips{display:flex;flex-wrap:wrap;gap:8px;clear:both}
.chips label{cursor:pointer;position:relative}
.chips input{position:absolute;opacity:0;width:0;height:0}
.chips span{display:inline-flex;align-items:center;min-height:var(--ctl-s);padding:0 16px;border:0;border-radius:0;font:500 var(--fs-ui) var(--body)}
.chips input:checked+span{background:var(--ink);color:var(--off);border-color:var(--ink)}
.chips input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}

/* consent + send */
.panel-foot{display:flex;justify-content:space-between;align-items:center;gap:20px 32px;flex-wrap:wrap;margin-top:clamp(14px,2.4vh,28px)}
/* consent: a clear square tick box, text beside it */
.consent{position:relative;display:flex;align-items:center;gap:12px;flex:1 1 280px;font-size:var(--fs-ui);line-height:1.35;color:var(--ink);cursor:pointer;user-select:none}
.consent input{position:absolute;opacity:0;width:24px;height:24px;margin:0;left:0}
.consent i{flex:none;width:24px;height:24px;border:2px solid var(--ink);position:relative}
.consent i::after{content:"";position:absolute;left:6px;top:1px;width:6px;height:11px;border:solid var(--off);border-width:0 3px 3px 0;transform:rotate(45deg) scale(0)}
.consent:hover i{border-color:var(--accent)}
.consent input:checked+i{background:var(--ink);border-color:var(--ink)}
.consent input:checked+i::after{transform:rotate(45deg) scale(1)}
.consent input:focus-visible+i{outline:2px solid var(--accent);outline-offset:3px}
.consent.bad i{border-color:var(--accent);animation:nudge var(--t-s) var(--ease)}
/* send: one solid block, red wipes in from the left on hover */
.send{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:48px;min-height:var(--ctl-l);min-width:240px;padding:0 22px;border:0;border-radius:0;background:var(--ink);color:var(--off);font:600 var(--fs-ui) var(--body);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.send::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);transform:scaleX(0);transform-origin:left}
.send:hover::before,.send:focus-visible::before{transform:scaleX(1)}
.send b{font-weight:400;font-size:1.25rem;line-height:1}
.send:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.err-msg{min-height:1.3em;margin-top:10px;color:var(--accent);font:500 var(--fs-ui) var(--body)}
.hp{position:absolute;left:-9999px}
.done{padding:clamp(24px,6vh,60px) 0}
.done h3{font-size:clamp(3rem,7vw,6rem);color:var(--accent);margin-bottom:12px}
.done p{max-width:30em;font-size:var(--fs-read)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:40px 0 28px}
footer .wrap{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
footer .logo{padding:0}
footer ul{list-style:none;display:grid;gap:8px}footer li a{color:var(--dim)}footer li a:hover{color:var(--accent)}
footer h4{color:var(--dim);font:400 var(--fs-label) var(--mono);text-transform:uppercase;margin-bottom:12px}
.legal{width:100%;color:var(--dim);font-size:var(--fs-label);border-top:1px solid var(--line);padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* ---------- motion ---------- */
.reveal{opacity:0;transform:translateY(34px)}   /* fade + rise only: a blur on large blocks drops frames on weaker graphics, a transform never does */
.reveal.in{opacity:1;transform:none}
.sp{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;pointer-events:none} /* scroll progress: a leaf element moved by main.js, so scrolling never restyles the whole header */
/* page-load intro */
.js .title{opacity:0;transform:translateY(46px);animation:rise var(--t-l) var(--ease-out) .1s forwards}
.js .carousel{opacity:0;transform:translateX(70px);animation:slidein var(--t-l) var(--ease-out) .35s forwards}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes slidein{to{opacity:1;transform:none}}
.rel-bottom h2.swap,.rel-bottom .by.swap{animation:titleIn var(--t-m) var(--ease-out)}
@keyframes titleIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .stats{min-height:0}
  .bento{grid-template-columns:repeat(2,1fr);grid-template-rows:none;grid-auto-rows:minmax(170px,auto);height:auto;min-height:0}
  .t-tall{grid-row:span 1;min-height:320px}
}
@media (max-width:860px){
  .hero{--ch:min(max(240px,calc(100svh - var(--hh) - var(--tfs)*.95 - 24px - 72px)),130vw)}  /* taller cap so portrait phones fill the screen instead of leaving a black gap under the cards */
  .chip.a{left:2%;top:100%}.chip.b{display:none}
  .strip .wrap{grid-template-columns:repeat(2,1fr)}
  .about-split{grid-template-columns:1fr}.about-text{padding:48px var(--gutter)}.about-img{min-height:60svh}
  .panel{margin-left:0}
  .fields{grid-template-columns:1fr}.panel textarea{min-height:140px}
}
@media (max-width:560px){
  .bento{grid-template-columns:1fr}.t-wide{grid-column:span 1}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .js .title,.js .carousel,.js .bento .tile{opacity:1;transform:none}
  html{scroll-behavior:auto}
  .carousel{overflow-x:auto}
}

/* ---------- merch page ---------- */
.links a.here{color:var(--accent);opacity:1}
.merch{min-height:calc(100svh - var(--hh));padding:clamp(40px,6vw,88px) 0 clamp(48px,6vw,96px)}
.merch-title{font-size:min(31vw,26rem);color:var(--accent);line-height:.86;margin-left:-.02em}
.merch-lead{max-width:30em;margin:clamp(16px,2.4vw,28px) 0 clamp(28px,4vw,48px);font-size:var(--fs-lead);color:var(--dim)}
.merch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.m-card{position:relative;aspect-ratio:.85;overflow:hidden;display:flex;align-items:flex-end;padding:20px;background:var(--c);isolation:isolate}
.m-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(transparent 55%,rgba(0,0,0,.55))}
.m-art{position:absolute;left:50%;top:44%;width:62%;transform:translate(-50%,-50%);fill:rgba(0,0,0,.26);z-index:-1}
.m-tag{position:absolute;top:16px;left:16px;padding:4px 10px;font-size:var(--fs-tag);color:var(--white)}
.m-card h3{font-size:clamp(1.8rem,3vw,2.6rem)}
.merch-foot{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(28px,4vw,48px)}
.sq-btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:space-between;gap:36px;min-height:var(--ctl-l);min-width:220px;padding:0 22px;background:var(--ink);color:var(--off);border:0;font:600 var(--fs-ui) var(--body);letter-spacing:.1em;text-transform:uppercase}
.sq-btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);transform:scaleX(0);transform-origin:left}
.sq-btn:hover::before{transform:scaleX(1)}
.sq-btn b{font-weight:400;font-size:1.25rem;line-height:1}
@media (max-width:1000px){.merch-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.merch-grid{grid-template-columns:1fr}.m-card{aspect-ratio:1.2}}

/* ---------- inner pages (artists, releases, studio, about, contact) ---------- */
.more{font:500 var(--fs-label) var(--mono);letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:2px;white-space:nowrap}
.more:hover{color:var(--accent)}
.pg{padding:clamp(40px,6vw,88px) 0 clamp(48px,6vw,96px)}
.pg-title{position:relative;font-size:var(--fs,min(30vw,24rem));color:var(--accent);line-height:.88;margin-left:-.02em;white-space:nowrap}
.pg-lead{max-width:32em;margin:clamp(16px,2.4vw,28px) 0 clamp(28px,4vw,48px);font-size:var(--fs-lead);color:var(--dim)}
.pg-sec{padding:clamp(48px,7vw,104px) 0;border-top:1px solid var(--line)}
.sec-tag{display:flex;align-items:center;gap:8px;color:var(--dim);margin-bottom:clamp(20px,3vw,36px)}
.sec-tag::before{content:"";width:6px;height:6px;background:var(--accent)}
.pg-sec h2.d{font-size:clamp(2.4rem,6vw,5rem);color:var(--white);margin-bottom:clamp(20px,3vw,40px)}

/* artists grid */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--gap)}
.cards-grid .card{width:auto;height:auto;aspect-ratio:.78;margin:0}
.cta-band{background:var(--white);color:var(--ink);padding:clamp(32px,5vw,64px) 0}
.cta-band .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.cta-band h2{font-size:clamp(2.2rem,5vw,4.4rem);line-height:.95}
.cta-band p{color:var(--ink-2);max-width:28em;margin-top:10px}

/* releases list */
.fbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.fbar .mono{color:var(--dim)}
.fchips{display:flex;gap:8px;flex-wrap:wrap}
.fchips button{display:inline-flex;align-items:center;min-height:var(--ctl-s);border:0;color:var(--white);padding:0 18px;font:500 var(--fs-ctl) var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.r-list{border-top:1px solid var(--line)}
.r-row{display:grid;grid-template-columns:48px 72px 1fr 110px 70px 56px;align-items:center;gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}
.r-row[hidden]{display:none}
.r-row:hover{background:var(--surface);padding-left:14px}
.r-row .no,.r-row .type,.r-row .yr{color:var(--dim)}
.r-row .cov{width:72px;height:72px;background:var(--c)}
.r-row h3{font:400 clamp(1.4rem,2.4vw,2.2rem)/1 var(--display);text-transform:uppercase}
.r-row:hover h3{color:var(--accent)}
.r-row .ra{display:inline-block;margin-top:6px;color:var(--dim);font-size:var(--fs-small)}
.r-row .ra:hover{color:var(--white)}
.r-play{width:var(--ctl-m);height:var(--ctl-m);border:0;background:none;cursor:pointer;display:grid;place-items:center}
.r-play i{border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent var(--white);margin-left:3px}
.r-play:hover{background:var(--accent);border-color:var(--accent)}
.rin{animation:rowIn var(--t-m) var(--ease-out)}
@keyframes rowIn{from{opacity:0;transform:translateY(14px)}}

/* studio: accordion + steps */
.acc{border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-h{width:100%;display:grid;grid-template-columns:64px 1fr 40px;align-items:center;gap:16px;padding:26px 0;background:none;border:0;color:var(--white);text-align:left;cursor:pointer}
.acc-h .n{color:var(--dim)}
.acc-h h3{font:400 clamp(1.8rem,4vw,3.6rem)/1 var(--display);text-transform:uppercase}
.acc-h .pl{position:relative;width:24px;height:24px;justify-self:end}
.acc-h .pl::before,.acc-h .pl::after{content:"";position:absolute;left:0;right:0;top:11px;height:2px;background:currentColor}
.acc-h .pl::after{transform:rotate(90deg)}
.acc-item.open .pl::after{transform:rotate(0)}
.acc-h:hover,.acc-item.open .acc-h{color:var(--accent)}
.acc-p{display:grid;grid-template-rows:0fr;visibility:hidden}  /* closed panels are also out of the tab order */
.acc-item.open .acc-p{grid-template-rows:1fr;visibility:visible}
.acc-p>div{padding:0 0 30px 80px;max-width:46em;color:var(--dim);font-size:var(--fs-read)}
.steps{display:grid;grid-template-columns:repeat(4,1fr)}
.step{padding:clamp(24px,3vw,40px) 20px}
.step .n{color:var(--accent)}
.step h3{font:400 clamp(1.8rem,3vw,2.6rem)/1 var(--display);text-transform:uppercase;margin:14px 0 10px}
.step p{color:var(--dim);font-size:var(--fs-small)}

/* about: values + team */
.vals{display:grid;grid-template-columns:repeat(3,1fr)}
.val{padding:clamp(24px,3vw,44px) 20px}
.val .n{color:var(--accent)}
.val h3{font:400 clamp(2rem,3.4vw,3rem)/1 var(--display);text-transform:uppercase;margin:14px 0 12px}
.val p{color:var(--dim);max-width:24em}
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.member .ph{position:relative;aspect-ratio:.9;background:var(--c);overflow:hidden}
.member .ph svg{position:absolute;left:50%;bottom:0;width:70%;height:auto;aspect-ratio:300/330;transform:translateX(-50%);fill:rgba(0,0,0,.28)}
.member h3{font:400 1.6rem/1 var(--display);text-transform:uppercase;margin:14px 0 4px}
.member p{color:var(--dim);font-size:var(--fs-ui)}

/* artist page */
.a-hero{position:relative;min-height:calc(100svh - var(--hh));display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(24px,4vw,56px) 0;overflow:hidden;isolation:isolate;background:var(--photo,linear-gradient(160deg,var(--c),#0b0b0b 150%)) center/cover}
.a-hero .sil{position:absolute;right:8%;bottom:0;height:80%;width:auto;aspect-ratio:300/330;fill:rgba(0,0,0,.28);z-index:-1}
.a-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(transparent 30%,rgba(0,0,0,.7))}
.a-kind{color:rgba(255,255,255,.85);margin-bottom:10px}
.a-name{font-size:min(14vw,13rem);color:var(--accent);line-height:.88}
.a-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-top:clamp(16px,2.4vw,28px)}
.a-bio{max-width:34em;color:rgba(255,255,255,.9);font-size:var(--fs-small)}
.a-ico{display:flex;gap:8px}
.a-ico a{width:var(--ctl-m);height:var(--ctl-m);display:grid;place-items:center}
.a-ico svg{width:18px;height:18px;fill:#fff}
.a-ico a:hover{background:var(--white)}.a-ico a:hover svg{fill:#000}
.a-body{padding:clamp(48px,7vw,104px) 0}
.a-body .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px)}
.a-body p.big{font-size:clamp(1.1rem,1.6vw,1.4rem);color:var(--dim);max-width:30em}
.a-nav{display:grid;grid-template-columns:1fr 1fr}
.a-nav a{position:relative;display:flex;flex-direction:column;gap:6px;padding:clamp(28px,5vw,64px) var(--gutter);background:var(--c);overflow:hidden;isolation:isolate}
.a-nav a::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(0,0,0,.45)}
.a-nav a:hover::after{background:rgba(0,0,0,.2)}
.a-nav .mono{color:rgba(255,255,255,.85)}
.a-nav h3{font:400 clamp(2.4rem,6vw,5.4rem)/.95 var(--display);text-transform:uppercase}
.a-nav a.next{text-align:right;align-items:flex-end}

@media (max-width:860px){
  .r-row{grid-template-columns:36px 56px 1fr 44px;gap:14px}.r-row .cov{width:56px;height:56px}.r-row .type,.r-row .yr{display:none}
  .acc-h{grid-template-columns:40px 1fr 28px}.acc-p>div{padding-left:56px}
  .steps{grid-template-columns:repeat(2,1fr)}.vals{grid-template-columns:1fr}.team{grid-template-columns:repeat(2,1fr)}
  .a-body .wrap{grid-template-columns:1fr}.a-nav{grid-template-columns:1fr}.a-hero .sil{right:-10%;height:60%}
}

/* ================= grid alignment =================
   Everything sits on the same 4 columns (gap = --gap). */

/* info strip: four cells on the four columns */
.strip .wrap{gap:var(--gap)}
.strip .cell{padding:clamp(28px,4vw,48px) 12px}

/* demo / contact / booking panel starts exactly at column 2 */
.panel{margin-left:calc(25% + var(--gap)/4)}

/* cards, tiles, steps, team: always four across, gaps in line with the guides */
.cards-grid{grid-template-columns:repeat(4,1fr)}
.merch-grid,.team,.steps{gap:var(--gap)}
.step{padding:clamp(24px,3vw,40px) 12px 0 0}

/* label column + content columns (studio services, about values) */
.sec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.sec-side{grid-column:1}
.sec-side h2.d{font-size:clamp(1.9rem,3vw,2.8rem)!important;margin-bottom:12px!important}
.sec-side p{color:var(--dim);font-size:var(--fs-small)}
.sec-main{grid-column:2/-1;background:var(--bg)}
.vals{grid-column:2/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.val{padding:0 12px 0 0}
.acc{border-top:0}

/* releases list: number+cover | title | type+year | play, on the four columns */
.r-row{grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.r-row>div,.r-row>span{min-width:0}
.rc1{display:flex;align-items:center;gap:20px}
.rc3{display:flex;align-items:center;gap:28px;color:var(--dim)}
.rc4{display:flex;justify-content:flex-end}

/* artist page: about on the left half, releases + links on the right half */
.a-body .wrap{grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.a-body .wrap>div:first-child{grid-column:1/3;background:var(--bg);padding-right:12px}
.a-body .wrap>div:nth-child(2){grid-column:3/5;background:var(--bg)}

/* small text blocks that span several columns get a backdrop so no line runs through the words */
.pg-lead,.merch-lead,.about .statement,.about .tag,.fchips,.cta-band p{background:var(--bg)}
.pg-lead,.merch-lead{width:fit-content}
.about .tag{width:fit-content}
.merch-foot{width:fit-content}
.cta-band p{background:none}

@media (max-width:860px){
  .cards-grid{grid-template-columns:repeat(2,1fr)}
  .sec-grid{grid-template-columns:1fr}.sec-side,.sec-main,.vals{grid-column:1}.vals{grid-template-columns:1fr}
  .r-row{grid-template-columns:36px 56px 1fr 44px;gap:14px}
  .rc1,.rc3,.rc4{display:contents}.r-list .r-row .no{grid-column:1}.r-list .r-row .cov{grid-column:2}.rc3{display:none}.rc4{display:flex}
  .a-body .wrap{grid-template-columns:1fr}.a-body .wrap>div:first-child,.a-body .wrap>div:nth-child(2){grid-column:1}
  .panel{margin-left:0}
}

.sec-main .acc-item:first-child{border-top:1px solid var(--line)}

.sec-main .acc-item:first-child{border-top:1px solid var(--line)}

/* ================= CELL GRID (replaces the overlay guide lines) =================
   The lines are the borders of the cells themselves, vertical AND horizontal, like a boxed grid.
   Content lives inside a cell; bigger content is one merged cell (grid-column: span n), so no line ever runs through text. */
:root{--grid:rgba(255,255,255,.22)}
.strip{--grid:rgba(11,11,11,.22)}

/* every cell container: top + left border; every cell: right + bottom border */
.bento,.cards-grid,.merch-grid,.team,.steps,.strip .wrap,.sec-grid,.a-body .wrap{gap:0;border-top:1px solid var(--grid);border-left:1px solid var(--grid)}
.bento>*,.cards-grid>*,.merch-grid>*,.team>*,.steps>*,.strip .wrap>*,.sec-grid>*,.a-body .wrap>*,.vals>*{border-right:1px solid var(--grid);border-bottom:1px solid var(--grid)}
.sec-grid>.vals{border:0;gap:0}
.vals{gap:0}

/* cells need their own padding now that there are no gaps */
.strip .cell{padding:clamp(24px,3.4vw,44px) 20px}
.step{padding:clamp(24px,3vw,40px) 20px}
.val{padding:clamp(24px,3vw,44px) 20px}
.sec-side{padding:clamp(24px,3vw,40px) 20px}
.sec-main{background:none}
.acc-h{padding-left:20px;padding-right:20px}
.acc-p>div{padding-left:calc(64px + 16px + 20px);padding-right:20px}
.member{padding:16px}
.merch-grid .m-card,.cards-grid .card{margin:0}
.a-body .wrap>div:first-child,.a-body .wrap>div:nth-child(2){background:none;padding:clamp(28px,3.6vw,52px) clamp(20px,3vw,44px)}
.a-body{padding:clamp(40px,6vw,88px) 0}
.tile{border-radius:0}

/* no masks any more: wide text is just a merged cell or sits outside the grid */
.pg-lead,.merch-lead,.about .statement,.about .tag,.fchips,.cta-band p{background:none}
.pg-lead,.merch-lead,.about .tag,.merch-foot{width:auto}

/* releases list: each row is a row of four cells */
.r-list{border-top:1px solid var(--grid);border-left:1px solid var(--grid)}
.r-row{gap:0;padding:0;border-bottom:1px solid var(--grid)}
.r-row:hover{padding-left:0;background:var(--surface)}
.r-row>div{padding:16px 20px;border-right:1px solid var(--grid)}
.rc1,.rc2,.rc3,.rc4{min-height:96px}
.rc2{display:flex;flex-direction:column;justify-content:center}
.rc3{align-items:center}
.rc4{align-items:center}

/* about (home + page): text cell and image cell split by one line */
.about-text{border-right:1px solid var(--grid)}
.about{border-top:1px solid var(--grid)}

/* the demo/contact/booking panel starts at column 2 of the page grid */
.panel{margin-left:25%}

@media (max-width:860px){
  .panel{margin-left:0}
  .rc1,.rc2,.rc3,.rc4{min-height:0}
  .r-row>div{padding:12px 12px}
  .about-text{border-right:0}
  .acc-p>div{padding-left:20px}
}

/* ================= FRAME LINES =================
   1) a vertical line at the left and right content margins runs the full height of every page
   2) the horizontal lines of each cell grid are extended out to the screen edges (drawn by main.js as .xl)
   One solid line colour everywhere, so overlapping lines never look doubled. */
:root{--grid:#363636;--line:#363636;--edge:max(var(--gutter),calc(50% - var(--maxw)/2 + var(--gutter)))}
.strip,.cta-band{--grid:var(--grid-light);position:relative}
body{position:relative}
body::before,body::after,.strip::before,.strip::after,.cta-band::before,.cta-band::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--grid);pointer-events:none;z-index:5}
body::before,.strip::before,.cta-band::before{left:var(--edge)}
body::after,.strip::after,.cta-band::after{right:var(--edge)}
.strip::before,.strip::after,.cta-band::before,.cta-band::after{z-index:6}

.bento,.cards-grid,.merch-grid,.team,.steps,.strip .wrap,.sec-grid,.a-body .wrap,.r-list{position:relative}
.xl{position:absolute;height:1px;background:var(--grid);pointer-events:none;z-index:1}

/* ================= CELL PADDING (one knob) =================
   --cell-pad is the padding inside every grid cell on the site. Change it here and every cell follows.
   Photo cells keep their image full-bleed; their labels and icons are inset by the same amount. */
:root{--cell-pad:clamp(18px,2vw,30px)}

.tile{padding:var(--cell-pad)}
.tile.cta .arr{top:var(--cell-pad);right:var(--cell-pad)}
.eq{right:var(--cell-pad);bottom:var(--cell-pad)}

.strip .cell,.step,.val,.sec-side,.member{padding:var(--cell-pad)}
.acc-h{padding:calc(var(--cell-pad)*.85) var(--cell-pad)}
.acc-p>div{min-height:0;overflow:hidden;padding:0 var(--cell-pad) 0 calc(var(--cell-pad) + 64px + 16px)}
.acc-p>div::after{content:"";display:block;height:var(--cell-pad)}  /* bottom space lives in the content so a closed panel collapses to nothing */
.r-row>div{padding:calc(var(--cell-pad)*.6) var(--cell-pad)}
.a-body .wrap>div:first-child,.a-body .wrap>div:nth-child(2){padding:var(--cell-pad)}
.about-text{padding:var(--cell-pad) var(--cell-pad) var(--cell-pad) max(calc(var(--gutter) + var(--cell-pad)),calc((100vw - var(--maxw))/2 + var(--gutter) + var(--cell-pad)))}

/* photo / image cells: image stays full-bleed, content inside is inset */
.card h3{left:var(--cell-pad);bottom:var(--cell-pad)}
.m-card{padding:var(--cell-pad)}
.m-tag{top:var(--cell-pad);left:var(--cell-pad)}
.about-img .cap{left:var(--cell-pad);bottom:var(--cell-pad)}

@media (max-width:860px){
  .about-text{padding:48px var(--cell-pad)}
  .acc-p>div{padding-left:var(--cell-pad)}
}

/* ================= MARGIN LINES ARE OPT-IN =================
   Only sections that are mostly a cell grid draw the left/right margin lines (list below). Title-above-grid pages
   (artists, releases, merch) don't: the grid's own edges and extended row lines already frame it.
   Add class="ln" to any other section to turn them on, or class="no-ln" to turn them off. */
body::before,body::after{content:none}
:is(.stats,.strip,.pg-sec,.a-body,.ln){position:relative}
:is(.stats,.strip,.pg-sec,.a-body,.ln)::before,
:is(.stats,.strip,.pg-sec,.a-body,.ln)::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--grid);pointer-events:none;z-index:5}
:is(.stats,.strip,.pg-sec,.a-body,.ln)::before{left:var(--edge)}
:is(.stats,.strip,.pg-sec,.a-body,.ln)::after{right:var(--edge)}
.strip::before,.strip::after{z-index:6}
.no-ln::before,.no-ln::after,.cta-band::before,.cta-band::after{content:none!important}

/* ================= LAYOUT FIXES =================
   1) a grid that is ALSO a .wrap kept the page margin as padding, so its border sat 40px outside its cells (the double lines / empty strip).
      The margin is now a real margin, so the grid's edge lands exactly on the margin line.
   2) text that sits outside a cell, beside a margin line, gets breathing room.
   3) release rows: cells stretch the full row height so vertical and horizontal lines join.
   4) every grid's vertical lines continue down to the end of their section (.xv, drawn by main.js).
   5) the footer divider runs to the screen edges. */
.sec-grid,.a-body .wrap,.strip .wrap{padding-left:0;padding-right:0;width:calc(100% - 2*var(--gutter));max-width:calc(var(--maxw) - 2*var(--gutter))}
.stats .sec-label,.pg-sec .wrap>.sec-tag{padding-left:var(--cell-pad);padding-right:var(--cell-pad)}
.stats .sec-label{margin-bottom:calc(var(--cell-pad)*.6)}
.pg-sec .wrap>.sec-tag{margin-bottom:calc(var(--cell-pad)*.8)}
.r-row{align-items:stretch}
.xv{position:absolute;width:1px;background:var(--grid);pointer-events:none}
.legal{position:relative;border-top:0}
.legal::before{content:"";position:absolute;top:0;left:50%;width:var(--vw,100vw);height:1px;background:var(--grid);transform:translateX(-50%);pointer-events:none}

/* ================= LIVE STREAMS: a full section =================  */
.live-band{background:var(--off);color:var(--ink);padding:clamp(56px,9vw,140px) 0}
.live-band .wrap{display:grid;grid-template-columns:1.7fr 1fr;gap:clamp(24px,5vw,80px);align-items:end}
.live-band .live{display:inline-flex;align-items:center;gap:10px;margin-bottom:clamp(16px,2vw,28px);font:500 var(--fs-ctl) var(--mono);letter-spacing:.1em;text-transform:uppercase}
.live-band h2{font-size:clamp(3rem,min(8vw,7.5rem),7.5rem);line-height:.88;color:var(--ink)}
.live-band p{max-width:30em;margin-top:clamp(16px,2vw,28px);color:var(--ink-2);font-size:var(--fs-lead)}
.live-band .lb-side{display:flex;flex-direction:column;align-items:flex-end;gap:clamp(20px,3vw,36px)}
.live-band .eq{position:static;height:clamp(70px,9vw,140px);gap:8px}
.live-band .eq i{width:9px}
@media (max-width:860px){.live-band .wrap{grid-template-columns:1fr}.live-band .lb-side{align-items:flex-start}}

/* ================= MERCH PAGE SECTIONS ================= */
.cap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--grid);border-left:1px solid var(--grid);position:relative}
.cap-grid>*{border-right:1px solid var(--grid);border-bottom:1px solid var(--grid)}
.cap{display:flex;flex-direction:column;justify-content:space-between;gap:36px;min-height:170px;padding:var(--cell-pad)}
.cap:hover{background:var(--surface)}
.cap .mono{color:var(--dim)}
.cap h3{font:400 clamp(1.6rem,2.4vw,2.2rem)/1 var(--display);text-transform:uppercase}
.cap b{align-self:flex-end;font-weight:400}
.cap:hover b{transform:translate(4px,-4px);color:var(--accent)}
.drop{padding:clamp(28px,4vw,56px) var(--cell-pad)}
.drop h3{font:400 clamp(2.4rem,5vw,4.6rem)/.95 var(--display);text-transform:uppercase;max-width:12em}
.drop p{color:var(--dim);max-width:30em;margin:14px 0 24px}
.notify{display:flex;max-width:36em}
.notify input{flex:1;min-width:0;background:transparent;border:0;min-height:var(--ctl-l);padding:0 16px;color:var(--white);font:500 var(--fs-body) var(--body);outline:none;border-radius:0}
.notify .sq-btn{min-width:0;gap:20px;cursor:pointer}
.notify-msg{min-height:1.4em;margin:12px 0 0!important;font-size:var(--fs-ui)}
@media (max-width:1000px){.cap-grid{grid-template-columns:repeat(2,1fr)}}

/* ================= SECTIONS STACK ON ONE LINE =================
   No blank bands between grids: a grid ends exactly where the next section begins, so there is one line between them
   (the grid's own bottom line), not two lines with an empty row of cells in between. */
.pg-sec{border-top:0;padding-bottom:0;padding-top:clamp(28px,4vw,48px)}
.pg:has(.cards-grid,.r-list,.merch-grid),.merch{padding-bottom:0}
.stats{padding-bottom:0;align-items:flex-end}
.bento{height:calc(100svh - var(--hh) - var(--py) - 100px)}
.about{border-top:0}
.fill{min-width:0}

/* the hero artist carousel starts part-way round its loop, so there are already artists to the left of the first card */
.track{animation-delay:-45s}

/* ================= DEMO PAGE: a four-step slide wizard ================= */
.dm{min-height:calc(100svh - var(--hh));display:flex;align-items:stretch}
.dm-grid{display:grid;grid-template-columns:repeat(4,1fr);width:calc(100% - 2*var(--gutter));max-width:calc(var(--maxw) - 2*var(--gutter));margin:0 auto;border-left:1px solid var(--grid);border-right:1px solid var(--grid);min-height:calc(100svh - var(--hh))}
.dm-side{grid-column:1;display:flex;flex-direction:column;justify-content:space-between;gap:32px;padding:calc(var(--cell-pad)*1.4) var(--cell-pad);border-right:1px solid var(--grid)}
.dm-kick{color:var(--dim);display:flex;align-items:center;gap:8px;margin-bottom:20px}
.dm-kick::before{content:"";width:6px;height:6px;background:var(--accent)}
.dm-h1{font-size:clamp(2.6rem,4.4vw,4.6rem);color:var(--accent);line-height:.92}
.dm-note{color:var(--dim);margin-top:18px;max-width:20em;font-size:var(--fs-small)}
.dm-prog{list-style:none;display:grid;gap:0}
.dm-prog li{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--grid);color:var(--dim);font:400 1rem var(--display);text-transform:uppercase;letter-spacing:.02em}
.dm-prog li span{width:28px;color:var(--dim)}
.dm-prog li.on{color:var(--white)}
.dm-prog li.on span{color:var(--accent)}
.dm-prog li.done{color:var(--white)}
.dm-prog li.done::after{content:"✓";margin-left:auto;color:var(--accent)}

.dm-stage{grid-column:2/-1;position:relative;overflow:hidden;display:flex;flex-direction:column}
.dm-bar{display:grid;grid-template-columns:repeat(4,1fr);height:3px;background:var(--grid)}
.dm-bar i{background:transparent}
.dm-bar i.on{background:var(--accent)}
#dmForm{display:flex;flex-direction:column;flex:1}
.dm-track{display:flex;flex:1}
.dm-slide{flex:0 0 100%;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,2.4vw,32px);padding:calc(var(--cell-pad)*1.6) calc(var(--cell-pad)*1.6)}
.dm-slide[aria-hidden="true"]{opacity:.12;pointer-events:none}
.dm-step{color:var(--dim)}
.dm-slide h2.d{font-size:clamp(2.8rem,6.4vw,6rem);line-height:.9}
.dm-fields{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,22px) clamp(24px,4vw,56px)}
.dm-fields .wide{grid-column:1/-1}
.dm-slide .lead{max-width:30em;color:var(--dim);font-size:var(--fs-lead)}

/* dark-theme versions of the form parts (they were designed for the off-white panels) */
.dm .f{border-bottom-color:rgba(255,255,255,.28)}
.dm .f .n{color:rgba(255,255,255,.4)}
.dm .f .t{color:rgba(255,255,255,.62)}
.dm .f:focus-within .t{color:var(--white)}
.dm .f input,.dm .f textarea{color:var(--white)}
.dm .f small{color:rgba(255,255,255,.5)}
.dm .genre legend{color:rgba(255,255,255,.62)}
.dm .chips input:checked+span{background:var(--accent);border-color:var(--accent);color:#fff}
.dm .consent{color:var(--white)}
.dm .consent i{border-color:var(--white)}
.dm .consent input:checked+i{background:var(--accent);border-color:var(--accent)}
.dm .consent input:checked+i::after{border-color:#fff}

.dm-review{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--grid);border-left:1px solid var(--grid)}
.dm-review>div{padding:14px 18px;border-right:1px solid var(--grid);border-bottom:1px solid var(--grid);min-width:0}
.dm-review small{display:block;color:var(--dim);font:400 var(--fs-tag) var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}
.dm-review b{font-weight:500;overflow-wrap:anywhere}
.dm-review .wide{grid-column:1/-1}

.dm-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;border-top:1px solid var(--grid);padding:var(--cell-pad)}
.dm-nav .err-msg{flex:1;margin:0;text-align:center}
.dm-nav .sq-btn{min-width:170px}
.dm-nav .dm-next{background:var(--accent);border-color:var(--accent);color:#fff}
.dm-nav .dm-next::before{background:var(--white)}
.dm-nav .dm-next:hover{color:var(--ink)}
.dm-nav .sq-btn{cursor:pointer}
.dm-nav[data-state="first"] #dmBack,.dm-nav[data-state="done"]{visibility:hidden}
.dm-nav[data-state="first"] #dmSend,.dm-nav[data-state="mid"] #dmSend{display:none}
.dm-nav[data-state="last"] #dmNext{display:none}
.dm-nav[data-state="mid"] #dmNext,.dm-nav[data-state="first"] #dmNext{display:inline-flex}
.dm-done{align-items:flex-start}
.dm-done h2.d{color:var(--accent)}

@media (max-width:860px){
  .dm-grid{grid-template-columns:1fr}
  .dm-side{border-right:0;border-bottom:1px solid var(--grid);padding:24px var(--cell-pad)}
  .dm-prog{display:none}
  .dm-stage{grid-column:1}
  .dm-fields,.dm-review{grid-template-columns:1fr}
  .dm-slide{padding:28px var(--cell-pad)}
}

/* artists: three across */
.cards-grid{grid-template-columns:repeat(3,1fr)}
.cards-grid .card{aspect-ratio:.85}
@media (max-width:860px){.cards-grid{grid-template-columns:repeat(2,1fr)}}

/* ================= HOVER STAYS ON THE GRID =================
   A cell never moves or tilts: it stays locked to its place in the grid and only what is inside it scales (cells clip it). */
.card:hover .photo{transform:scale(1.08)}
.card:hover .sil{transform:translateX(-50%) scale(1.08)}
.m-card:hover .m-art{transform:translate(-50%,-50%) scale(1.08)}

/* ================= SMALL-SCREEN FIXES =================
   A grid cell must be allowed to shrink to its column, otherwise one long word (an email address) or a form row
   widens the whole column and the page scrolls sideways. */
.bento>*,.cards-grid>*,.merch-grid>*,.cap-grid>*,.team>*,.steps>*,.strip .wrap>*,.sec-grid>*,.a-body .wrap>*,.vals>*,.dm-grid>*,.dm-fields>*,.dm-review>*,.r-row>*{min-width:0}
.strip b,.cap h3,.val p,.step p,.dm-review b{overflow-wrap:anywhere}
.notify input{width:0;flex:1 1 auto}

@media (max-width:860px){
  .strip .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sec-grid{grid-template-columns:minmax(0,1fr)}
  .notify .sq-btn{padding:0 16px;gap:12px}
  .dm-nav{flex-wrap:wrap;gap:12px}
  .dm-nav .err-msg{order:3;flex:1 0 100%;text-align:left}
  .dm-nav .sq-btn{min-width:0;flex:1 1 0;padding:0 16px;gap:12px}
  .dm-nav #dmBack{flex:0 0 auto}
}

/* ================= LOGO MARK =================
   The star mark is inlined from assets/Asset 2.svg (see <symbol id="logo">) so it takes the brand red. */
.logo svg{width:26px;height:26px;fill:var(--accent);flex:none}
.logo:hover svg{transform:rotate(72deg)}

/* ================= ARTIST CARD HOVER BIO =================
   The name sits at the bottom of the card; on hover a short description opens up beneath it.
   Everything stays inside the cell (the card is clipped), and the card itself never moves. */
.card .meta{position:absolute;left:var(--cell-pad);right:var(--cell-pad);bottom:var(--cell-pad);z-index:2;display:grid;grid-template-rows:auto 0fr;row-gap:0}
.card .meta h3{position:static}
.card .bio{min-height:0;opacity:0;overflow:hidden;font:400 var(--fs-small)/1.3 var(--body);color:rgba(255,255,255,.92)}
.card:hover .meta,.card:focus-visible .meta{grid-template-rows:auto 1fr;row-gap:12px}
.card:hover .bio,.card:focus-visible .bio{opacity:1}
/* touch screens cannot hover: show a short version of the description */
@media (hover:none){
  .card .meta{grid-template-rows:auto auto;row-gap:8px}
  .card .bio{opacity:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
}

/* ================= PALETTE =================
   A small colour system built around the brand red, on the black base.

   NEUTRALS   black base, surface, line, off-white  (defined at the top of this file, unchanged)
   BRAND      --red                                  the Tropolis red
   THE RING   ten bold colours with the same weight as the red, so any of them can sit next to it:
              red, orange, amber, lime, green, teal, cyan, blue, violet, pink
   EACH COLOUR comes with --X-deep (pressed / shadow) and --X-tint (soft background), both derived from it,
              and --on-X, the type colour that reads on it (black on light colours, white on red / blue / violet)
   ROLES      --accent / --on-accent = the colour of the current page (body class t-red, t-orange ...)
              --c / --cc = an artist card's own colour and its type colour (set inline on each card)

   Change a hex in :root and everything that uses that colour follows. */
:root{
  --red:#E8101C;
  /* Our own palette, built around the brand red. Ten flat colours, one per role, no gradients.
     Warm side: red, orange, amber. Fresh side: lime, green, teal, cyan. Cool side: blue, violet. Pop: pink.
     Each is bright enough to sit as a solid field and to carry black or white type (see --on-X below). */
  --orange:#FF7A1A; --amber:#FFC21A; --lime:#BDE82B; --green:#1FCF6B; --teal:#12B5A6;
  --cyan:#17BFEF; --blue:#2D5BFF; --violet:#6A3DF0; --pink:#FF6AB6;
  --mint:var(--green); /* older name, still used by the studio tagline tile */

  --red-deep:color-mix(in oklab,var(--red) 76%,#000);       --red-tint:color-mix(in oklab,var(--red) 14%,#fff);
  --orange-deep:color-mix(in oklab,var(--orange) 76%,#000); --orange-tint:color-mix(in oklab,var(--orange) 16%,#fff);
  --amber-deep:color-mix(in oklab,var(--amber) 76%,#000);   --amber-tint:color-mix(in oklab,var(--amber) 16%,#fff);
  --lime-deep:color-mix(in oklab,var(--lime) 76%,#000);     --lime-tint:color-mix(in oklab,var(--lime) 16%,#fff);
  --green-deep:color-mix(in oklab,var(--green) 76%,#000);   --green-tint:color-mix(in oklab,var(--green) 14%,#fff);
  --teal-deep:color-mix(in oklab,var(--teal) 76%,#000);     --teal-tint:color-mix(in oklab,var(--teal) 14%,#fff);
  --cyan-deep:color-mix(in oklab,var(--cyan) 76%,#000);     --cyan-tint:color-mix(in oklab,var(--cyan) 16%,#fff);
  --blue-deep:color-mix(in oklab,var(--blue) 76%,#000);     --blue-tint:color-mix(in oklab,var(--blue) 14%,#fff);
  --violet-deep:color-mix(in oklab,var(--violet) 76%,#000); --violet-tint:color-mix(in oklab,var(--violet) 14%,#fff);
  --pink-deep:color-mix(in oklab,var(--pink) 76%,#000);     --pink-tint:color-mix(in oklab,var(--pink) 16%,#fff);

  --on-red:#fff; --on-orange:var(--ink); --on-amber:var(--ink); --on-lime:var(--ink); --on-green:var(--ink);
  --on-teal:var(--ink); --on-cyan:var(--ink); --on-blue:#fff; --on-violet:#fff; --on-pink:var(--ink);

  --on:var(--ink);
  --accent:var(--red); --on-accent:var(--on-red);
}
body.t-red{--accent:var(--red);--on-accent:var(--on-red)}
body.t-orange{--accent:var(--orange);--on-accent:var(--on-orange)}
body.t-amber{--accent:var(--amber);--on-accent:var(--on-amber)}
body.t-lime{--accent:var(--lime);--on-accent:var(--on-lime)}
body.t-green{--accent:var(--green);--on-accent:var(--on-green)}
body.t-teal{--accent:var(--teal);--on-accent:var(--on-teal)}
body.t-cyan{--accent:var(--cyan);--on-accent:var(--on-cyan)}
body.t-blue{--accent:var(--blue);--on-accent:var(--on-blue)}
body.t-violet{--accent:var(--violet);--on-accent:var(--on-violet)}
body.t-pink{--accent:var(--pink);--on-accent:var(--on-pink)}
.panel{--accent:var(--red);--on-accent:#fff}   /* forms sit on off-white: always the brand red, which reads there */

.logo svg{fill:var(--red)}

/* ---- type on bright fields ---- */
.demo-btn:hover,.sq-btn:hover,.send:hover{color:var(--on-accent)}
.fchips button.on{color:var(--on-accent)}
.r-play:hover i{border-left-color:var(--on-accent)}
.dm .chips input:checked+span{color:var(--on-accent)}
.dm .consent input:checked+i::after{border-color:var(--on-accent)}
.dm-nav .dm-next,.dm-nav .dm-next:hover{color:var(--on-accent)}

/* ---- flat colour bands ---- */
.cta-band,.live-band{background:var(--accent);color:var(--on-accent)}
.cta-band h2,.live-band h2{color:var(--on-accent)}
.cta-band p,.live-band p{color:var(--on-accent);opacity:.72}
.live-band .live{color:var(--on-accent)}.live-band .live i,.live-band .eq i{background:var(--on-accent)}
.strip,.cta-band{--grid:color-mix(in srgb,var(--on-accent) 28%,var(--accent))}
.strip{background:var(--accent);color:var(--on-accent)}
.strip small{color:var(--on-accent);opacity:.65}
.strip b{color:var(--on-accent)}

/* ---- dashboard: tiles are colour fields ---- */
.c-red{background:var(--red);color:var(--on-red)}      .c-orange{background:var(--orange);color:var(--on-orange)}
.c-amber{background:var(--amber);color:var(--on-amber)}.c-lime{background:var(--lime);color:var(--on-lime)}
.c-green{background:var(--green);color:var(--on-green)}.c-teal{background:var(--teal);color:var(--on-teal)}
.c-cyan{background:var(--cyan);color:var(--on-cyan)}   .c-blue{background:var(--blue);color:var(--on-blue)}
.c-violet{background:var(--violet);color:var(--on-violet)}.c-pink{background:var(--pink);color:var(--on-pink)}
.tile[class*="c-"] small{color:inherit;opacity:.62}
.tile[class*="c-"]::before{background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.3),transparent 62%)}
.roster i{border-color:currentColor}.go .roster i{background:currentColor}
.c-cyan .delta,.c-amber .delta{border-color:currentColor;color:inherit}
.c-amber .ptrack{background:rgba(11,11,11,.18)}.c-amber .ptrack i{background:var(--ink)}
.tile.cta.c-green,.tile.cta.c-green:hover{background:var(--green);color:var(--on-green)}
.tile.cta .lbl{color:var(--on-green)}
.chart .b i{background:rgba(255,255,255,.3)}
.ring .fg{stroke:var(--accent)}

/* ---- artist cards: a flat colour each, duotone photo, name set on the colour ---- */
.card{background:var(--c);isolation:isolate;contain:layout paint}   /* the bio opening never reflows anything outside its card */
.card .photo{filter:grayscale(1) contrast(1.12);mix-blend-mode:multiply}
.card::after{z-index:1;background:linear-gradient(transparent 45%,var(--c) 98%)}
.card:hover::after,.card:focus-visible::after{background:linear-gradient(transparent 12%,var(--c) 90%)}
.card .sil{fill:rgba(11,11,11,.16)}
.card[style*="--cc"] .sil{fill:rgba(255,255,255,.16)}
.card .meta{z-index:2}
.card h3,.card .bio{color:var(--cc,var(--ink))}

/* ---- releases: the whole section takes the colour of the active release ---- */
.releases{--rel-on:var(--ink)}
.releases::before{content:none}
.rel-top .mono,.rel-bottom .by,.progress,.rel-bottom h2,.rel-top .more{color:var(--rel-on)}
.bar{background:color-mix(in srgb,var(--rel-on) 28%,transparent)}.bar i{background:var(--rel-on)}
.rel-card{opacity:.55}.rel-card.active{opacity:1}

/* ---- merch ---- */
.m-card{background:var(--c)}
.m-card::after{background:none}
.m-card h3,.m-tag{color:var(--cc,var(--ink))}
.m-tag{border-color:currentColor}
.m-art{fill:rgba(11,11,11,.16)}
.m-card[style*="--cc"] .m-art{fill:rgba(255,255,255,.16)}

/* ---- about ---- */
.about-img .img{background:var(--photo,var(--accent)) center/cover}
.about-img .img svg{fill:rgba(11,11,11,.16)}
.about-img::after{background:none}
.about-img .cap{color:var(--on-accent)}
.member .ph{background:var(--c)}
.member .ph svg{fill:rgba(11,11,11,.16)}

/* ---- artist page: the hero is the artist's colour ---- */
.a-hero{background:var(--c);color:var(--cc,var(--ink))}
.a-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--photo,none) center/cover;filter:grayscale(1) contrast(1.12);mix-blend-mode:multiply}
.a-hero::after{background:none}
.a-hero .sil{fill:rgba(11,11,11,.14)}
.a-hero[style*="--cc"] .sil{fill:rgba(255,255,255,.14)}
.a-kind,.a-bio,.a-name{color:var(--cc,var(--ink))}
.a-ico a{color:var(--cc,var(--ink))}
.a-ico svg{fill:currentColor}
.a-ico a:hover{background:var(--cc,var(--ink));color:var(--c)}
.a-nav a::after{background:none}
.a-nav .mono,.a-nav h3{color:var(--cc,var(--ink))}

/* ================= SECTION COLOURS =================
   Any section or band can take its own colour: add class="a-orange" (a-red, a-orange, a-amber, a-lime, a-green,
   a-teal, a-cyan, a-blue, a-violet, a-pink). Everything inside that uses the accent follows. */
.a-red{--accent:var(--red);--on-accent:var(--on-red)}
.a-orange{--accent:var(--orange);--on-accent:var(--on-orange)}
.a-amber{--accent:var(--amber);--on-accent:var(--on-amber)}
.a-lime{--accent:var(--lime);--on-accent:var(--on-lime)}
.a-green{--accent:var(--green);--on-accent:var(--on-green)}
.a-teal{--accent:var(--teal);--on-accent:var(--on-teal)}
.a-cyan{--accent:var(--cyan);--on-accent:var(--on-cyan)}
.a-blue{--accent:var(--blue);--on-accent:var(--on-blue)}
.a-violet{--accent:var(--violet);--on-accent:var(--on-violet)}
.a-pink{--accent:var(--pink);--on-accent:var(--on-pink)}

/* the silhouette and caption inside a coloured field follow that field's type colour */
.about-img .img svg,.member .ph svg{fill:color-mix(in srgb,var(--on-accent) 16%,transparent)}
/* the active release cover would vanish into a backdrop of its own colour: outline it */
.rel-card.active{outline:3px solid var(--rel-on);outline-offset:-3px}

/* ---- clean buttons: no strokes ---- */
.sq-btn.ghost{background:color-mix(in srgb,currentColor var(--tint-1),transparent);color:inherit}
.cta-band .sq-btn.ghost,.live-band .sq-btn.ghost{background:color-mix(in srgb,var(--on-accent) 14%,transparent);color:var(--on-accent)}
.cta-band .sq-btn:not(.ghost):hover,.live-band .sq-btn:not(.ghost):hover{color:var(--on-accent)}
.rel-card.active{outline:0}

/* stacked dashboard: the covers tile grows to fit its two rows instead of clipping them */
@media (max-width:1000px){
  .tile.t-tall:has(.thumbs){min-height:0}
  .tile .thumbs{flex:none;grid-template-rows:none;grid-auto-rows:auto}
  .tile .thumbs button{aspect-ratio:1/1}
}

/* tagline tile: changes colour with each tagline (mint, red, orange, pink, indigo) */
.tile.statement{background:var(--sb,var(--mint));color:var(--sn,var(--ink))}
.tile.statement .dots button{border-color:currentColor}.tile.statement .dots button.on{background:currentColor}

/* the info strip stays white */
.strip,.strip[class*="a-"]{background:var(--white);color:var(--ink);--grid:var(--grid-light)}
.strip small{color:var(--ink-3);opacity:1}
.strip b{color:var(--ink)}

/* streaming tile and the live band stay white */
.tile.cta,.tile.cta.c-green,.tile.cta.c-green:hover{background:var(--off);color:var(--ink)}
.tile.cta:hover,.tile.cta.c-green:hover{background:var(--white)}
.tile.cta .lbl{color:var(--ink-2)}
.live-band,.live-band[class*="a-"]{background:var(--off);color:var(--ink)}
.live-band h2{color:var(--ink)}.live-band p{color:var(--ink-2);opacity:1}
.live-band .live{color:var(--ink)}.live-band .live i,.live-band .eq i{background:var(--red)}

/* call-to-action bands stay white */
.cta-band,.cta-band[class*="a-"]{background:var(--white);color:var(--ink);--grid:var(--grid-light)}
.cta-band h2{color:var(--ink)}.cta-band p{color:var(--ink-2);opacity:1}

/* text buttons: no underline stroke */
.more{border-bottom:0;padding-bottom:0}

/* paragraphs: tighter line spacing everywhere */
p{line-height:1.38}
.card .bio{line-height:1.28}

/* "Book it" inside the services accordion is a real button on its own line */
.acc-p .book-it{display:flex;width:max-content;margin-top:20px;min-width:200px}
.acc-p .book-it{background:var(--white);color:var(--ink)}
.acc-p .book-it:hover{color:var(--on-accent)}

/* the studio photo caption shares the class name with the merch capsules: keep their box styles off it */
.about-img .cap{display:block;min-height:0;padding:0;gap:0;background:none}
.about-img .cap:hover{background:none}

/* artist card hover: the colour wash rises and the bio opens in one slow, continuous motion (the wash is scaled, the bio's grid row opens to the text's real height: nothing is measured, nothing jumps at the end) */
.card::after,.card:hover::after,.card:focus-visible::after{inset:auto 0 0 0;height:92%;background:linear-gradient(transparent,var(--c) 82%);transform:scaleY(.6087);transform-origin:bottom}  /* .6087 = 56/92: the wash rests at 56% of the card */
.card:hover::after,.card:focus-visible::after{transform:none}

/* bio text: a soft fade-and-rise */
.card .bio{transform:translateY(14px)}
.card:hover .bio,.card:focus-visible .bio{transform:none}
@media (hover:none){.card .bio{transform:none}}

@media (max-width:1000px){.tile.t-tall:has(.thumbs){min-height:max-content;overflow:visible}}
@media (max-width:1000px){.bento{height:auto;min-height:0}}

/* ===== Latest works: a tracklist instead of cover thumbnails (nothing here can squash or stretch) ===== */
.tile .thumbs,.thumbs{display:flex;flex-direction:column;justify-content:space-between;gap:0;flex:1;min-height:0;margin:14px 0 0;grid-template-rows:none}
.tile .thumbs button,.thumbs button{aspect-ratio:auto;flex:1 1 0;min-height:36px;display:grid;grid-template-columns:14px 2.2em minmax(0,1fr) auto;align-items:center;gap:12px;
  padding:0 12px;margin:0 -12px;text-align:left;color:inherit;background:none;border:0;border-top:1px solid color-mix(in srgb,currentColor 18%,transparent);font:400 var(--fs-ctl) var(--mono);letter-spacing:.04em;text-transform:uppercase}
.thumbs button .sw{width:14px;height:14px;background:var(--c)}
.thumbs button .n{opacity:.55}
.thumbs button b{font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thumbs button em{font-style:normal;opacity:.6;white-space:nowrap}
.thumbs button:hover,.thumbs button:focus-visible{background:var(--c);color:var(--cc,var(--ink))}
.thumbs button:hover .sw,.thumbs button:focus-visible .sw{background:var(--cc,var(--ink))}
.thumbs button:hover .n,.thumbs button:hover em{opacity:.8}
@media (max-width:420px){.thumbs button{grid-template-columns:14px minmax(0,1fr) auto}.thumbs button .n{display:none}}
@media (max-width:1000px){.tile .thumbs{flex:none}.tile .thumbs button{flex:none;height:46px}}

/* ================= NAV ON TABLET + PHONE =================
   Up to 1000px: the links fold into a hamburger drawer and the Send Demo button leaves the bar (it is a tile in the drawer). */
@media (max-width:1000px){
  .demo-btn{display:none}
  .menu-btn{display:flex;flex-direction:column;justify-content:center;gap:5px;width:64px;height:100%;padding:0;align-items:center;border-left:1px solid var(--line);background:none;cursor:pointer}
  .menu-btn span{display:block;width:22px;height:2px;background:var(--white)}
  .menu-btn.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-btn.on span:nth-child(2){opacity:0}
  .menu-btn.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav-r{align-items:stretch}
  .links{display:flex;visibility:hidden;opacity:0;transform:translateY(-8px);pointer-events:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gutter) 20px;background:var(--bg);border-bottom:1px solid var(--line);font-size:1.1rem}
  .links.open{visibility:visible;opacity:1;transform:none;pointer-events:auto}
  .links a{padding:16px 0;border-bottom:1px solid var(--line);opacity:1}
}

/* ================= NO STROKES BETWEEN COLOURED CARDS =================
   Card grids (home dashboard, artists, merch, team) show a line only around the whole grid, never between the cards. */
.bento,.cards-grid,.merch-grid,.team{border:1px solid var(--grid)}
.bento>*,.cards-grid>*,.merch-grid>*,.team>*{border:0}

/* ================= AUDIT FIXES (tablet + phone) ================= */
.r-play{flex:none;min-width:var(--ctl-m)}
@media (max-width:1000px){
  .more{display:inline-block;padding:10px 0}
  .r-row .ra{padding:8px 0}
  .seg button{padding:9px 12px}
  footer ul{gap:0}footer li a{display:inline-block;padding:9px 0}
  footer .logo{padding:6px 0}
}
@media (max-width:860px){
  .pg-title .chip{position:static;display:block;width:max-content;max-width:100%;margin-top:12px;font-size:.78rem}
}

/* Latest works rows: stacked title / artist by default, one line when the tile is wide enough */
.tile:has(.thumbs){container-type:inline-size}
.thumbs button,.tile .thumbs button{grid-template-columns:14px minmax(0,1fr);grid-template-rows:auto auto;align-content:center;column-gap:12px;row-gap:1px;line-height:1.2}
.thumbs button .sw{grid-row:1/3;grid-column:1;align-self:center}
.thumbs button .n{display:none}
.thumbs button b{grid-column:2;grid-row:1}
.thumbs button em{grid-column:2;grid-row:2;font-size:var(--fs-tag)}
@container (min-width:380px){
  .thumbs button,.tile .thumbs button{grid-template-columns:14px 2.2em minmax(0,1fr) auto;grid-template-rows:auto;align-content:normal;align-items:center}
  .thumbs button .sw{grid-row:1;grid-column:1}
  .thumbs button .n{display:block;grid-column:2;grid-row:1}
  .thumbs button b{grid-column:3;grid-row:1}
  .thumbs button em{grid-column:4;grid-row:1;font-size:inherit}
}

/* artist page: social buttons are solid squares, no outline */
.a-ico a{border:0;background:color-mix(in srgb,var(--cc,var(--ink)) var(--tint-2),transparent)}
.a-ico a:hover{background:var(--cc,var(--ink))}
.r-play{border:0;background:color-mix(in srgb,var(--white) var(--tint-1),transparent)}
.r-play:hover{background:var(--accent)}



/* ================= RELEASE ROWS: one system (releases page + artist pages) =================
   A row is: [cover = a flush colour square] [title + artist] [type / year] [play = a flush square].
   No lines inside a row or between rows; the list has one frame around it, like every other card grid. */
:root{--rh:96px}
@media (max-width:860px){:root{--rh:72px}}
.r-list{border:1px solid var(--grid)}
.r-row{display:grid;grid-template-columns:var(--rh) minmax(0,1fr) auto var(--rh);gap:0;padding:0;border:0;align-items:stretch;min-height:var(--rh)}
.r-row:hover{padding:0;background:var(--surface)}
.r-row>div{display:flex;padding:0;border:0;min-width:0;min-height:0}
.r-row .rc1{display:block;position:relative}
.r-row .rc1 .cov{display:block;width:100%;height:100%;min-height:var(--rh)}
.r-row .rc1 .no{position:absolute;left:12px;top:10px;color:var(--cc,var(--ink));opacity:.75}
.r-row .rc2{flex-direction:column;justify-content:center;gap:2px;padding:0 var(--cell-pad)}
.r-row .rc3{align-items:center;gap:28px;padding:0 var(--cell-pad);color:var(--dim)}
.r-row .rc4{align-items:stretch;justify-content:stretch}
.r-row .r-play{width:100%;height:100%;min-width:0;border:0;background:color-mix(in srgb,var(--white) var(--tint-1),transparent)}
.r-row .r-play:hover{background:var(--accent)}
.r-row .ra{margin-top:0;padding:0}
@media (max-width:860px){
  .r-row{grid-template-columns:var(--rh) minmax(0,1fr) var(--rh)}
  .r-row .rc3{display:none}
  .r-row .rc1,.r-row .rc4{display:block}
  .r-row .rc4{display:flex}
  .r-row .rc2{padding:0 16px}
}
.r-row .rc1:has(.cov[style*="--cc"]) .no{color:#fff}
.r-row .r-play{background:transparent}
.r-row .r-play:hover{background:var(--accent)}
.r-row:hover .r-play{background:color-mix(in srgb,var(--white) var(--tint-1),transparent)}
.r-row:hover .r-play:hover{background:var(--accent)}
.fchips button{border:0;background:color-mix(in srgb,var(--white) var(--tint-1),transparent)}
.fchips button:hover{background:color-mix(in srgb,var(--white) var(--tint-2),transparent)}
.fchips button.on{background:var(--accent);color:var(--on-accent)}

/* on an artist page the release row sits in a narrow cell: type and year go under the title */
.a-body .r-row{grid-template-columns:var(--rh) minmax(0,1fr) var(--rh)}
.a-body .r-row .rc3{display:none}
@media (max-width:1000px){.r-row a.ra{padding:10px 0;margin:-10px 0;align-self:flex-start}}

/* selectable chips: solid fills, no outlines */
.chips span{border:0;background:color-mix(in srgb,currentColor var(--tint-1),transparent)}
.chips label:hover span{background:color-mix(in srgb,currentColor var(--tint-2),transparent)}
.chips input:checked+span{background:var(--ink);color:var(--off)}
.dm .chips span{color:var(--white)}
.dm .chips input:checked+span{background:var(--accent);color:var(--on-accent)}

/* small labels (pills, delta, coming-soon tags): solid tint instead of an outline */
.delta,.pill,.m-tag,.c-cyan .delta,.c-amber .delta{border:0;background:color-mix(in srgb,currentColor var(--tint-2),transparent);opacity:1}

/* ---------- UI/UX pass ---------- */

/* readability: slightly brighter secondary text and no label smaller than ~11px */

/* artist page: the hero text block sat shrink-wrapped and centred (auto margins inside a flex column); pin it to the grid like every other page */
.a-hero{min-height:min(calc(100svh - var(--hh)),760px)}
.a-hero .wrap{width:100%}
.a-ico:empty{display:none}
.a-bio{max-width:38em}

/* artist page: stream / follow buttons */
.plats{display:flex;flex-wrap:wrap;gap:12px}
.plat{width:var(--ctl-l);height:var(--ctl-l);display:grid;place-items:center;background:color-mix(in srgb,currentColor var(--tint-1),transparent);border:0;color:var(--white)}
.plat svg{width:22px;height:22px;fill:currentColor}
a.plat:hover,a.plat:focus-visible{background:var(--accent);color:var(--on-accent,#fff)}
.plat.off{opacity:.38;cursor:not-allowed}

/* artist page: merch strip */
.a-merch{min-height:0;padding:clamp(40px,6vw,88px) 0}
.a-merch-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:clamp(20px,3vw,36px)}
.a-merch-top .sec-tag{margin-bottom:0}
.a-merch .m-card{aspect-ratio:1}
@media (max-width:560px){.a-merch .m-card{aspect-ratio:1.5}}


/* releases page: smaller title so the list starts higher; artist names read as links */
.pg-title[style*="19rem"]{--fs:min(15vw,12.5rem)!important}
.r-row .ra{color:var(--white);opacity:.75;text-decoration:none}
.r-row .ra:hover{opacity:1;color:var(--white)}

/* merch page: nine capsules fit a 3 x 3 grid with no empty cells, and the page no longer stretches to a full screen */
.cap-grid{grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){.cap-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cap-grid{grid-template-columns:1fr}}
.merch:not(.a-merch){min-height:0}

/* demo wizard: shorter panel, content starts at the top instead of floating in the middle, nav sits closer to the fields */
.dm-grid{min-height:min(calc(100svh - var(--hh)),680px)}
.dm-slide{justify-content:flex-start;padding-top:calc(var(--cell-pad)*1.4);padding-bottom:calc(var(--cell-pad)*1.2)}
.dm-slide>.lead{margin-top:-6px}
.dm{min-height:0}

/* platform icons are one outline set (Arcticons), so they share stroke weight and style */
.plat svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.7}
.a-ico svg{fill:none;stroke:currentColor;stroke-width:1.7}

/* artist page frame lines: the stream/follow frame sits flush under the about frame so the column line runs through both, and the merch strip draws the same edge lines */
.a-links{padding-top:0}
.a-body:has(+ .a-links){padding-bottom:0}
.a-links{padding-bottom:0}
.a-merch{padding-top:0}
.a-merch-top{padding:var(--cell-pad);margin-bottom:0}
/* same inset as the other frames, at every width, so the edge lines run beside the cards instead of through them */
.a-merch .wrap{padding-left:0;padding-right:0;width:calc(100% - 2*var(--gutter));max-width:calc(var(--maxw) - 2*var(--gutter))}
.a-links .wrap{border-top:0}

/* artist photos: one-colour duotone. The photo goes greyscale and multiplies into the card colour, so shadows stay black and highlights take the artist's colour */
.card .photo{filter:grayscale(1) contrast(1.12);mix-blend-mode:multiply}
.card .photo[style*="--photo"]~.sil{display:none}
/* no blank band under the merch strip: it ends where the previous/next strip begins, like every other stacked section */
.a-merch{padding-bottom:0}

/* no stroke where a coloured grid meets the coloured strip below it: the grey frame line cut across both blocks and doubled the margin line */
.a-merch .merch-grid{border:0}
.pg:has(.cards-grid) .cards-grid,.cards-grid:has(+ .cta-band){border-bottom:0}
.a-merch.ln::before,.a-merch.ln::after{z-index:0}  /* margin lines sit behind the coloured cards, so no hairline runs down a card's edge */

/* notify form (merch): a filled field joined to a solid accent button, no outlines. The dark default button vanished into the dark page. */
.notify input{background:color-mix(in srgb,var(--white) var(--tint-1),transparent);border:0}
.notify input:focus{background:color-mix(in srgb,var(--white) var(--tint-2),transparent)}
.notify .sq-btn{background:var(--accent);color:var(--on-accent)}
.notify .sq-btn::before{background:var(--white)}
.notify .sq-btn:hover{color:var(--ink)}

/* releases: no grey line between the last row and the white band below it */
.pg:has(.r-list) .r-list{border-bottom:0}

/* ================= NAVBAR: a modular tile menu =================
   The menu is a bento panel like the studio dashboard: flat colour tiles on one cell grid, each page in its own colour.
   Markup from partials/header.html, labels / colours / notes from tools/site.json. Works the same at every width. */
.menu-btn{display:flex;align-items:center;gap:14px;width:auto;height:100%;padding:0 var(--gutter);border:0;background:none;color:var(--white);cursor:pointer;font-size:.72rem}
.menu-btn b::before{content:"Menu"}
.menu-btn.on b::before{content:"Close"}
.menu-btn i{display:flex;flex-direction:column;gap:5px}
.menu-btn span{display:block;width:22px;height:2px;background:currentColor}
.menu-btn.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn.on span:nth-child(2){opacity:0}
.menu-btn.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu-btn:hover{background:color-mix(in srgb,currentColor var(--tint-1),transparent)}
.demo-btn{border-left:0;background:var(--accent);color:var(--on-accent)}
.demo-btn:hover{background:var(--white);color:var(--ink)}

.links{position:absolute;top:100%;left:0;right:0;display:grid;gap:0;align-items:stretch;justify-items:stretch;padding:0 max(var(--gutter),calc(50% - var(--maxw)/2 + var(--gutter))) var(--gutter);margin:0;
  background:var(--bg);border-bottom:1px solid var(--line);max-height:calc(100svh - var(--hh));overflow:auto;
  grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,minmax(clamp(110px,16vh,170px),1fr));
  grid-template-areas:"artists artists releases merch" "artists artists studio about" "contact demo demo demo";
  visibility:hidden;opacity:0;transform:translateY(-8px);pointer-events:none;font-size:1rem;
  }
.links.open{visibility:visible;opacity:1;transform:none;pointer-events:auto}
.mt{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:18px 20px;min-width:0;opacity:1;background:var(--c);color:var(--cc,var(--ink));border:0;
  }
.mt-artists{grid-area:artists}.mt-releases{grid-area:releases}.mt-merch{grid-area:merch}.mt-studio{grid-area:studio}.mt-about{grid-area:about}.mt-contact{grid-area:contact}.mt-demo{grid-area:demo}
.mt-n{opacity:.7}
.mt-a{position:absolute;top:14px;right:18px;font-size:1.25rem;line-height:1}
.mt-t{font:400 clamp(1.7rem,2.8vw,2.8rem)/.95 var(--display);text-transform:uppercase;margin-top:auto}
.mt-artists .mt-t{font-size:clamp(2.6rem,6vw,5.6rem)}
.mt-demo .mt-t{font-size:clamp(2rem,4vw,3.6rem)}
.mt-s{font-size:var(--fs-tag);opacity:.75;margin-top:6px}
.mt:hover,.mt.here{background:var(--white);color:var(--ink)}
.links .mt{opacity:0;transform:translateY(10px)}
.links.open .mt{opacity:1;transform:none}
.links .mt:hover{transform:none}
@media (max-width:760px){
  .links{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:minmax(112px,auto);
    grid-template-areas:"artists artists" "releases merch" "studio about" "contact demo"}
  .mt-artists{min-height:170px}
  .demo-btn{display:none}
}
@media (max-width:1000px){.demo-btn{display:none}}

/* ================= FOOTER =================
   From partials/footer.html + tools/site.json. Explore is the big column, Follow reuses the artist-page platform buttons,
   Company and Legal sit small on the right. */
footer{padding:clamp(40px,6vw,88px) 0 28px}
footer .wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(32px,5vw,64px) var(--gap)}
.f-brand{grid-column:1/5;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.f-brand p{color:var(--dim)}
.f-mail{color:var(--white);font-size:var(--fs-small)}
.f-mail:hover{color:var(--accent)}
.f-follow{grid-column:1/5;grid-row:2}
.f-explore{grid-column:5/9;grid-row:1/3}
.f-cols{grid-column:9/13;grid-row:1/3;display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-content:start}
footer .legal{grid-column:1/-1;grid-row:3}
footer h4{margin-bottom:16px}
.f-explore ul{gap:0}
.f-explore li a{display:inline-block;padding:2px 0;font:400 clamp(2.2rem,4.4vw,4rem)/1.04 var(--display);text-transform:uppercase;color:var(--white)}
.f-explore li a:hover,.f-explore li a.here{color:var(--c,var(--accent))}
.f-cols li a{display:inline-block;padding:3px 0;font-size:var(--fs-small);color:var(--dim)}
.f-cols li a:hover,.f-cols li a.here{color:var(--c,var(--accent))}
@media (max-width:1000px){
  footer .wrap{grid-template-columns:1fr 1fr}
  .f-brand{grid-column:1/-1}
  .f-explore{grid-column:1/-1;grid-row:auto}
  .f-follow{grid-column:1/-1;grid-row:auto}
  .f-cols{grid-column:1/-1;grid-row:auto}
  footer .legal{grid-row:auto}
}
footer nav{display:block;padding:0;margin:0;max-width:none;justify-content:flex-start}
footer .wrap{grid-template-rows:auto 1fr auto;align-content:start}
.f-follow{align-self:start}
.links .mt{padding:18px 20px;border:0;opacity:inherit}
@media (max-width:760px){.links .mt{padding:14px 16px}}

/* menu: hamburger icon only, tiles run edge to edge with no black frame around them */
.menu-btn b{display:none}
.menu-btn{padding:0 clamp(18px,3vw,28px);gap:0}
.links{padding:0;border-bottom:0}
.links .mt-artists,.links .mt-contact{padding-left:max(20px,calc((var(--vw,100vw) - var(--maxw))/2 + var(--gutter)))}
.links .mt-about,.links .mt-demo{padding-right:max(20px,calc((var(--vw,100vw) - var(--maxw))/2 + var(--gutter)))}
.mt-a{right:max(18px,calc((var(--vw,100vw) - var(--maxw))/2 + var(--gutter)))}
.mt-releases .mt-a,.mt-studio .mt-a,.mt-merch .mt-a,.mt-artists .mt-a,.mt-contact .mt-a{right:18px}
.mt-about .mt-a,.mt-demo .mt-a{right:max(18px,calc((var(--vw,100vw) - var(--maxw))/2 + var(--gutter)))}
@media (max-width:760px){.links .mt-artists,.links .mt-contact{padding-left:16px}.links .mt-about,.links .mt-demo{padding-right:16px}.mt-about .mt-a,.mt-demo .mt-a{right:16px}}

/* release ring: inactive covers are darkened instead of faded, so they keep their own colour instead of muddying into the backdrop */
.rel-card,.rel-card.active{opacity:1}
.rel-card::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.42);pointer-events:none}
.rel-card.active::after{opacity:0}


/* text pages (careers, terms, privacy): one frame, a row per section, readable text inside its cell */
.sec-text{padding:var(--cell-pad);display:flex;flex-direction:column;gap:14px;justify-content:center}
.sec-text p{max-width:42em;font-size:var(--fs-read);line-height:1.7;color:color-mix(in srgb,var(--white) 80%,transparent)}

/* release backdrop: the cover colour, a little deeper, so the active cover (true colour) stands out from it without any outline */
.bd{filter:blur(55px) brightness(.8)}
.rel-card::after{background:rgba(0,0,0,.36)}

/* artists grid on phones: the odd ninth card takes the full row instead of leaving an empty cell */
@media (max-width:560px){
  .cards-grid .fill{display:none}
  .cards-grid>a.card:last-of-type{grid-column:1/-1;aspect-ratio:2/1}
  .cards-grid>a.card:last-of-type .sil{width:auto;height:84%}
}
/* release ring arrows: solid squares, no outline */
.arrows button{border:0;background:color-mix(in srgb,var(--rel-on) var(--tint-2),transparent);color:var(--rel-on)}
.arrows button:hover{background:var(--rel-on);color:var(--c,var(--bg))}
/* menu tiles: focus ring sits inside the tile so the full-bleed panel never clips it */
.mt:focus-visible{outline:3px solid var(--ink);outline-offset:-6px}
.mt-artists.here:focus-visible{outline-color:var(--violet)}

/* two-column capsule grid: the ninth capsule takes the full row instead of leaving an empty cell */
@media (max-width:1000px){
  .cap-grid .fill{display:none}
  .cap-grid>a.cap:last-of-type{grid-column:1/-1}
}
/* menu tiles: hover / current page = white tile with black type (the older link-hover colour rule must not tint it) */
.links .mt:hover,.links .mt.here,.links a.mt:hover,.links a.mt.here{background:var(--white);color:var(--ink);opacity:1}
.links .mt.here .mt-s{opacity:.75}
@media (prefers-reduced-motion:reduce){.links,.links .mt{transition:none!important;transform:none!important}}

/* finishing touches: selection in the page colour, quiet scrollbar */
::selection{background:var(--accent);color:var(--on-accent)}
html{scrollbar-color:var(--line) var(--bg)}

/* title labels: the original black labels sitting over the big word; hidden on phones where they would cover too much */
@media (max-width:560px){.chip,.pg-title .chip{display:none}}

/* text pages: the frame starts straight under the title block (no stub of margin lines above it), headings keep a readable line height */
.pg-sec.pg-info{padding-top:0}
.sec-side h2.d{line-height:1}

/* footer on tablets: brand, follow and company/legal stack on the left, the big Explore list takes the right half */
@media (min-width:761px) and (max-width:1000px){
  footer .wrap{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto auto}
  .f-brand{grid-column:1;grid-row:1}
  .f-follow{grid-column:1;grid-row:2}
  .f-cols{grid-column:1;grid-row:3;align-self:start}
  .f-explore{grid-column:2;grid-row:1/4}
  footer .legal{grid-column:1/-1;grid-row:4}
}
/* small footer links: the active / hover colour is lifted toward white so dark colours (violet, blue) stay readable */
.f-cols li a:hover,.f-cols li a.here{color:color-mix(in srgb,var(--c,var(--accent)) 62%,#fff)}

/* ---- doubled lines: where two borders met they stacked into a 2px line. One rule per junction ---- */
footer{margin-top:-1px}                                              /* the footer's top line sits on the previous section's bottom line */
.sec-main .acc-item:first-child{border-top:0}                         /* the frame already draws the top line */
.sec-main.acc .acc-item:last-child{border-bottom:0}                   /* ...and the bottom line */
.strip + .demo{border-top:0}                                         /* white strip, then the demo section: one line, not two */
main>.strip:first-of-type .wrap{border-top:0}                         /* strip directly under the header: the header line is enough */

/* ---- stubs: margin lines started above the first line of their frame ----
   The rule above meant to remove the section padding when the frame comes first, but its selector never matched
   (the frame IS the wrap: class="wrap sec-grid"). Fixed here. On artist pages the frame also starts straight under the hero. */
.pg-sec:has(>.sec-grid:first-child){padding-top:0}
.a-hero + .a-body{padding-top:0}
.pg-sec:has(>.sec-grid:first-child){margin-top:-1px}   /* a frame that starts a section sits on the previous section's last line: one line, not two */

/* text pages: lists and links inside the cells */
.sec-text ul{max-width:42em;padding-left:1.2em;display:grid;gap:8px;font-size:var(--fs-read);line-height:1.6;color:color-mix(in srgb,var(--white) 80%,transparent)}
.sec-text a{color:var(--white);font-weight:600;text-decoration:none}
.sec-text a:hover{color:var(--accent)}
.demo-btn{margin-bottom:-1px;position:relative;z-index:1}   /* the coloured button covers the header's bottom line instead of leaving a grey line under it */

/* ================= MOTION =================
   ONE SYSTEM. Every transition on the site is set in this block and nowhere else. (Keyframe animations sit beside their
   component, but take their timing from the same tokens in :root. main.js reads the same tokens for counters and easing.)

   CURVES   --ease      a soft in-out. For things that CHANGE: hover, focus, selection, colour, fills.
            --ease-out  fast start, long settle, the same feel as the page scrolling. For things that ARRIVE or MOVE:
                        reveals, panels, slides, the release wheel, fills, counters.
   SPEEDS   --t-s  .4s   fades on controls, links, rows and tiles
            --t-m  .7s   wipes, underlines, arrow nudges, text swaps
            --t-l  1.1s  arrivals and big moves: reveals, slides, the wheel, artist-card hover
   RULES    Only transform, opacity, colour, background and clip-path animate (never a blur or a layout property), so scrolling and hovering stay smooth on any machine.
            (grid-template-rows on the accordion and on the artist bio is the one exception: it opens a panel to its content's real height.)
            Hover never moves a cell. Only what is inside it moves (photo zoom, arrow nudge, logo turn).
            Ambient loops (drift, equaliser, blink) are linear / looping and never change speed mid-loop.
            Reduced motion turns all of it off (rules at the very end). */

/* a registered colour can itself be transitioned: the whole releases section changes colour with the release in one smooth fade */
@property --rel-on{syntax:'<color>';inherits:true;initial-value:#0b0b0b}

:root{--fade:color var(--t-s) var(--ease),background-color var(--t-s) var(--ease),border-color var(--t-s) var(--ease),opacity var(--t-s) var(--ease)}

/* 1 · every control and cell fades its colour, fill and opacity. Rules below add to this or replace it for one component. */
a,button,input,textarea,select,label,.tile,.r-row,.r-row h3,.cap,.f .t,.ring em,.dm-prog li,.dm-bar i,.consent i,.chips span,.eq i{transition:var(--fade)}

/* 2 · things that ARRIVE */
.reveal{transition:opacity var(--t-l) var(--ease-out),transform var(--t-l) var(--ease-out);transition-delay:var(--d,0s)}
.about-img.reveal{transition:none}
.about-img .img{transition:clip-path var(--t-l) var(--ease-out),transform var(--t-l) var(--ease-out)}
.about-img .cap{transition:opacity var(--t-m) var(--ease) .8s}
.toast{transition:opacity var(--t-m) var(--ease),transform var(--t-m) var(--ease-out)}
.dm-track{transition:transform var(--t-l) var(--ease-out)}
.dm-slide{transition:opacity var(--t-m) var(--ease)}
.bd{transition:opacity var(--t-l) var(--ease)}

/* 3 · hover on an image card: the photo zooms, the colour wash rises and the bio opens, together, in one 1.1s motion */
.card .photo,.card .sil,.m-art{transition:transform var(--t-l) var(--ease)}
.card::after{transition:transform var(--t-l) var(--ease)}
.card .meta{transition:grid-template-rows var(--t-l) var(--ease),row-gap var(--t-l) var(--ease)}
.card .bio{transition:opacity var(--t-m) var(--ease) .15s,transform var(--t-l) var(--ease) .1s}

/* 4 · buttons: the big ones wipe their fill in from the left. Arrows nudge along their own direction; the button stays put. */
.sq-btn,.send{transition:color var(--t-m) var(--ease)}
.sq-btn::before,.send::before{transition:transform var(--t-m) var(--ease)}
.sq-btn b,.send b,.cap b,.tile.cta .arr b,.mt-a{transition:transform var(--t-m) var(--ease-out),color var(--t-s) var(--ease)}
.sq-btn:hover b,.send:hover b{transform:translateX(6px)}
.cap:hover b,.tile.cta:hover .arr b,.mt:hover .mt-a{transform:translate(4px,-4px)}
.tile.cta .arr{transition:background-color var(--t-s) var(--ease),color var(--t-s) var(--ease)}
.logo svg{transition:transform var(--t-m) var(--ease-out)}

/* 5 · the menu: the panel fades and settles, then the tiles arrive one after another */
.menu-btn span{transition:transform var(--t-m) var(--ease-out),opacity var(--t-s) var(--ease)}
.links{transition:opacity var(--t-m) var(--ease),transform var(--t-m) var(--ease-out),visibility 0s var(--t-m)}
.links.open{transition:opacity var(--t-m) var(--ease),transform var(--t-m) var(--ease-out),visibility 0s}
.links .mt{transition:opacity var(--t-m) var(--ease),transform var(--t-m) var(--ease-out),background-color var(--t-s) var(--ease),color var(--t-s) var(--ease)}
.links.open .mt{transition-delay:calc(var(--i)*var(--stagger)),calc(var(--i)*var(--stagger)),0s,0s}

/* 6 · the dashboard */
.tile.statement{transition:background-color var(--t-l) var(--ease),color var(--t-l) var(--ease)}   /* changes colour with each tagline */
.tile::before{transition:opacity var(--t-m) var(--ease)}                                          /* cursor spotlight */
.tile.statement h3,.tile.statement p{transition:opacity var(--t-s) var(--ease),transform var(--t-s) var(--ease)}   /* tagline swap: main.js changes the words after exactly --t-s */
.roster i{transition:transform var(--t-m) var(--ease-out);transition-delay:calc(var(--k)*var(--stagger)*.8)}   /* the squares hop one after another when the tile is hovered */
.go .roster i{animation:fill var(--t-m) var(--ease) backwards;animation-delay:calc(var(--t-m) + var(--k)*3*var(--stagger))}   /* and fill in one after another when the dashboard arrives */
@keyframes fill{from{background-color:transparent}}
.dots button{transition:background-color var(--t-s) var(--ease),border-color var(--t-s) var(--ease),transform var(--t-s) var(--ease)}
.chart .b i{transition:transform var(--t-m) var(--ease-out),background-color var(--t-s) var(--ease),opacity var(--t-s) var(--ease)}
.tip{transition:opacity var(--t-s) var(--ease),transform var(--t-m) var(--ease-out)}
.ptrack i{transition:transform var(--t-l) var(--ease-out) .5s}
.ring .fg{transition:stroke-dashoffset var(--t-l) var(--ease-out) .3s}

/* 7 · the release wheel: a section-wide colour (--rel-on) that fades, covers that turn, a progress mark that slides */
.rel-top,.rel-bottom{transition:--rel-on var(--t-l) var(--ease)}   /* on the two blocks that use it, so the covers' subtree is not restyled on every frame of the fade */
.rel-card{transition:transform var(--t-l) var(--ease-out)}
.rel-viewport.drag .rel-card{transition:none}                       /* while dragging the cards follow the pointer 1:1 */
.rel-card::after{transition:opacity var(--t-m) var(--ease)}
.bar i{transition:transform var(--t-m) var(--ease-out)}

/* 8 · forms and accordions */
.acc.no-anim *{transition:none!important}   /* the first panel is open on arrival without playing the opening motion */
.f{transition:border-color var(--t-s) var(--ease)}
.f::after{transition:transform var(--t-m) var(--ease-out)}          /* the focus underline draws in */
.f .ok{transition:opacity var(--t-s) var(--ease),transform var(--t-m) var(--ease-out)}
.consent i::after{transition:transform var(--t-s) var(--ease-out)}
.meter b{transition:transform var(--t-m) var(--ease-out)}
.acc-h .pl::before,.acc-h .pl::after{transition:transform var(--t-m) var(--ease-out)}
.acc-p{transition:grid-template-rows var(--t-m) var(--ease-out),visibility 0s var(--t-m)}
.acc-item.open .acc-p{transition:grid-template-rows var(--t-m) var(--ease-out),visibility 0s}
.a-nav a::after{transition:background-color var(--t-s) var(--ease)}

/* 9 · ambient loops pause while they are off screen (main.js adds .idle), and resume exactly where they were */
.idle,.idle *{animation-play-state:paused!important}

/* 10 · moving between pages: a short cross-fade where the browser supports it (Chrome, Edge, Safari) */
@view-transition{navigation:auto}
::view-transition-group(root),::view-transition-old(root),::view-transition-new(root){animation-duration:var(--t-s);animation-timing-function:var(--ease)}

/* every motion off when the visitor asks for it */
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ================= STATES =================
   Hover and focus are defined with each component. Pressed and disabled are the same on every control. */
a,button,label{-webkit-tap-highlight-color:transparent}
button:not(:disabled),[role="button"],summary{cursor:pointer}
:is(.sq-btn,.send,.demo-btn,.plat,.a-ico a,.r-play,.arrows button,.fchips button,.seg button,.menu-btn,.dots button):active,
.chips label:active span{opacity:.78;transition-duration:.1s}      /* pressed: dims at once, recovers with the normal fade */
button:disabled,.send:disabled{opacity:.5;cursor:progress;pointer-events:none}   /* a form that is being sent */