/* Housematic — v4 Signal (Oct 29 2026). */
:root{
  /* Housematic v4 · Signal / Glow (Oct 29 2026): graphite ground, UV + signal orange, Gotham, the tube line */
  --ink:#0A0B0F; --ink-2:#121319; --ink-3:#1A1C24;
  --bone:#E4E6EB; --bone-2:#A8ACB6; --mute:#8A8F9A; --line:rgba(211,214,221,.12); --line-2:rgba(211,214,221,.26);
  --hm:#7B5CFF;          /* UV */
  --sig:#FF6A2B;         /* Signal orange */
  --glow:linear-gradient(100deg,#9C86FF 0%,#FF6A2B 100%);
  --g-mid:linear-gradient(150deg,#0A0B0F 15%,#7B5CFF 100%);
  --g-emb:linear-gradient(150deg,#1A1C24 15%,#FF6A2B 100%);
  --g-dusk:radial-gradient(circle at 50% 120%,#FF6A2B 0%,#7B5CFF 45%,#0A0B0F 85%);
  --id:#FF6A2B;          /* Island Disco — sunset */
  --sg:#7dc392;          /* Secret Garden — leaf */
  --dd:#ff3d6e;
  --bt:#5aa6ff;          /* Boat — open water */
  --serif:Gotham,"Montserrat","Helvetica Neue",Arial,sans-serif;
  --sans:Gotham,"Montserrat","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:28px; --r-s:18px;
  --g:clamp(16px,4vw,48px); --max:1440px;
  --strip:38px; --ease:cubic-bezier(.2,.7,.1,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;background:var(--ink);color:var(--bone);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,video{display:block;max-width:100%}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--bone);color:var(--ink)}
:focus-visible{outline:1.5px solid var(--bone);outline-offset:3px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--bone);color:var(--ink);padding:10px 14px;font-size:13px}
.skip:focus{top:12px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--g)}

/* ---------- type ---------- */
.eyebrow{font:400 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);display:inline-flex;gap:10px;align-items:center}
.eyebrow i{width:18px;height:1px;background:currentColor;display:inline-block}
.display{font:400 clamp(44px,8.2vw,132px)/.92 var(--serif);letter-spacing:-.02em;margin:0}
.h2{font:400 clamp(36px,5.4vw,80px)/.96 var(--serif);letter-spacing:-.015em;margin:14px 0 0}
.h2 em,.display em,.statement em{font-style:italic;color:var(--bone-2)}
.statement{font:400 clamp(28px,3.6vw,54px)/1.08 var(--serif);letter-spacing:-.01em;margin:0;max-width:22ch}
.lede{font-size:clamp(16px,1.25vw,18px);color:var(--bone-2);max-width:56ch;margin:0 0 1em}
.small{font-size:13px;color:var(--mute)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 22px;border:1px solid var(--line-2);border-radius:999px;font:500 13px/1 var(--sans);letter-spacing:.02em;background:transparent;cursor:pointer;transition:background .25s,color .25s,border-color .25s;white-space:nowrap}
.btn:hover{border-color:var(--bone)}
.btn.solid{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.btn.solid:hover{background:#fff}
.btn.sm{height:36px;padding:0 16px;font-size:12px}
.btn .ar{transition:transform .3s var(--ease)}
.btn:hover .ar{transform:translateX(3px)}
.link{border-bottom:1px solid var(--line-2);padding-bottom:2px;transition:border-color .2s}
.link:hover{border-color:var(--bone)}

/* ---------- radio strip (every page) ---------- */
.strip{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--strip);background:#000;border-bottom:1px solid var(--line);font:400 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.strip .wrap{height:100%;display:flex;align-items:center;gap:18px}
.onair{display:flex;align-items:center;gap:10px;min-width:0;cursor:pointer;background:none;border:0;padding:0;text-transform:inherit;letter-spacing:inherit;font:inherit}
.dot{width:7px;height:7px;border-radius:50%;background:#FF6A2B;box-shadow:0 0 0 0 rgba(255,106,43,.6);animation:pulse 2s infinite;flex:none}
@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(255,106,43,0)}100%{box-shadow:0 0 0 0 rgba(255,106,43,0)}}
.eq{display:inline-flex;gap:2px;align-items:flex-end;height:11px;flex:none}
.eq b{width:2px;background:var(--bone);height:30%;animation:eq 1s ease-in-out infinite}
.eq b:nth-child(2){animation-delay:-.3s}.eq b:nth-child(3){animation-delay:-.6s}.eq b:nth-child(4){animation-delay:-.15s}
.strip:not(.playing) .eq b{animation-play-state:paused}
@keyframes eq{0%,100%{height:25%}50%{height:100%}}
.onair .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.onair .t span{color:var(--mute)}
.strip .play{margin-left:2px;border:1px solid var(--line-2);border-radius:999px;padding:5px 10px;flex:none}
.strip .play:hover{border-color:var(--bone)}
.strip .right{margin-left:auto;display:flex;gap:20px;align-items:center;flex:none}
.strip .right a{color:var(--mute);transition:color .2s}
.strip .right a:hover{color:var(--bone)}
@media (max-width:720px){.strip .right .opt{display:none}.onair .t span{display:none}}

/* ---------- header ---------- */
.hdr{position:fixed;top:var(--strip);left:0;right:0;z-index:50;transition:background .35s,border-color .35s,transform .35s var(--ease);border-bottom:1px solid transparent}
.hdr.solid{background:rgba(10,11,15,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line)}
.hdr .wrap{height:68px;display:flex;align-items:center;gap:28px}
.hdr .logo img{height:26px;width:auto}
.nav{display:flex;gap:26px;margin-left:auto;font-size:13px;letter-spacing:.02em}
.nav a{color:var(--bone-2);transition:color .2s;position:relative;padding:6px 0}
.nav a:hover,.nav a[aria-current=page]{color:var(--bone)}
.nav a[aria-current=page]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--bone)}
.hdr .btn{height:38px;padding:0 18px}
.menu-btn{display:none;background:none;border:0;padding:8px 0;margin-left:auto;font:400 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
@media (max-width:960px){.nav,.hdr .join-cta{display:none}.menu-btn{display:block}}

.drawer{position:fixed;inset:0;z-index:90;background:var(--ink);padding:calc(var(--strip) + 18px) var(--g) 32px;display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.drawer.open{opacity:1;visibility:visible}
.drawer .top{display:flex;justify-content:space-between;align-items:center;height:50px}
.drawer .top img{height:24px;width:auto}
.drawer .menu-btn{display:block;margin:0}
.drawer nav{display:flex;flex-direction:column;margin-top:4vh}
.drawer nav a{font:400 clamp(40px,11vw,64px)/1.08 var(--serif);border-bottom:1px solid var(--line);padding:6px 0}
.drawer nav a:last-child{font-style:italic;color:var(--bone-2)}
.drawer .soc{margin-top:auto}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;background:#000}
.hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero video{opacity:0;transition:opacity .6s}.hero video.on{opacity:1}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 48%,rgba(0,0,0,.82) 100%)}
.hero .in{position:absolute;inset:auto 0 0 0;z-index:2;padding-bottom:clamp(28px,5vh,56px)}
.hero .in .wrap{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:end}
.hero .display{max-width:12ch}
.hero .meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;font:400 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--bone-2)}
.hero .meta span+span::before{content:"/";margin-right:18px;color:var(--mute)}
.next{display:block;width:min(340px,100%);border:1px solid var(--line-2);background:rgba(10,11,15,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:16px 18px;border-radius:2px;transition:border-color .2s}
.next:hover{border-color:var(--bone)}
.next .eyebrow{color:var(--bone-2)}
.next b{display:block;font:400 26px/1.05 var(--serif);margin:10px 0 6px}
.next span.w{font-size:13px;color:var(--bone-2)}
.next .go{display:flex;justify-content:space-between;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font:400 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.scrollcue{position:absolute;z-index:2;left:50%;bottom:18px;width:1px;height:38px;background:linear-gradient(var(--bone),transparent);opacity:.6}
@media (max-width:820px){.hero .in .wrap{grid-template-columns:1fr}.scrollcue{display:none}}

/* page header (inner pages) */
.phead{position:relative;padding:calc(var(--strip) + 68px + clamp(56px,10vh,120px)) 0 clamp(40px,6vh,72px);overflow:hidden;border-bottom:1px solid var(--line)}
.phead .bg{position:absolute;inset:0;z-index:-1}
.phead .bg img{width:100%;height:100%;object-fit:cover;opacity:.32;filter:saturate(.8)}
.phead .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,15,.5),var(--ink))}
.phead .display{margin-top:18px}
.phead .lede{margin-top:22px}

/* ---------- sections ---------- */
section{position:relative}
.sec{padding:clamp(72px,11vw,160px) 0}
.sec.bt{border-top:1px solid var(--line)}
.head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,56px)}

/* intro */
.intro{display:grid;grid-template-columns:5fr 4fr;gap:clamp(32px,6vw,96px);align-items:end}
.intro .ph{aspect-ratio:4/5;overflow:hidden;background:var(--ink-2)}
.intro .ph img{width:100%;height:100%;object-fit:cover}
.intro .statement{margin:22px 0 32px}
@media (max-width:820px){.intro{grid-template-columns:1fr}.intro .ph{aspect-ratio:4/3}}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);margin-top:clamp(56px,7vw,96px)}
.stat{padding:26px 22px 0 0;border-right:1px solid var(--line);padding-left:22px}
.stat:first-child{padding-left:0}.stat:last-child{border-right:0}
.stat b{display:block;font:400 clamp(44px,5.6vw,84px)/1 var(--serif);letter-spacing:-.02em}
.stat span{display:block;margin-top:10px;font:400 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
@media (max-width:820px){.stats{grid-template-columns:1fr 1fr}.stat{padding:22px 16px 22px 0;border-right:0;border-bottom:1px solid var(--line)}.stat:nth-child(odd){border-right:1px solid var(--line)}.stat:nth-child(even){padding-left:16px}}

/* ---------- calendar ---------- */
.filters{display:flex;gap:8px;flex-wrap:wrap}
.chip{--c:var(--bone);display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border:1px solid var(--line-2);border-radius:999px;background:none;cursor:pointer;font:400 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--bone-2);transition:all .2s}
.chip i{width:7px;height:7px;border-radius:50%;background:var(--c)}
.chip:hover{border-color:var(--c);color:var(--bone)}
.chip[aria-pressed=true]{background:var(--bone);color:var(--ink);border-color:var(--bone)}
[data-b="Housematic"]{--c:var(--hm)}[data-b="Island Disco"]{--c:var(--id)}[data-b="Secret Garden"]{--c:var(--sg)}[data-b="Boat"]{--c:var(--bt)}
.cal{border-top:1px solid var(--line)}
.ev{--c:var(--hm);display:grid;grid-template-columns:150px 1.3fr 1fr 320px;gap:28px;align-items:center;padding:26px 0;border-bottom:1px solid var(--line);position:relative;transition:background .25s}
.ev::before{content:"";position:absolute;left:calc(-1 * var(--g));top:0;bottom:0;width:3px;background:var(--c);transform:scaleY(0);transform-origin:top;transition:transform .35s var(--ease)}
.ev:hover::before{transform:scaleY(1)}
.ev .d{font:400 11px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.ev .d b{display:block;font:400 54px/.9 var(--serif);letter-spacing:-.02em;color:var(--bone);margin-bottom:6px}
.ev .tg{display:inline-flex;align-items:center;gap:8px;font:400 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--c)}
.ev .tg::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c)}
.ev h3{font:400 clamp(26px,2.6vw,38px)/1.02 var(--serif);margin:10px 0 0;letter-spacing:-.01em}
.ev .lu{font-size:13px;color:var(--bone-2);margin-top:8px}
.ev .where{font-size:15px}
.ev .where span{display:block;font-size:13px;color:var(--mute);margin-top:4px}
.ev .act{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.flag{font:400 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:7px 10px;border:1px solid var(--line-2);border-radius:999px;color:var(--bone-2)}
.flag.hot{border-color:var(--c);color:var(--c)}
.flag.out{text-decoration:line-through;color:var(--mute)}
.ev.past{grid-template-columns:150px 1.3fr 1fr 320px;padding:18px 0}
.ev.past .d b{font-size:34px}
.ev.past h3{font-size:24px;margin-top:6px}
@media (max-width:900px){
  .ev,.ev.past{grid-template-columns:76px 1fr;gap:6px 18px;align-items:start}
  .ev .d b{font-size:40px}
  .ev .where{grid-column:2}
  .ev .act{grid-column:2;justify-content:flex-start;margin-top:10px}
}
.empty{padding:56px 0;display:grid;gap:14px;justify-items:start;border-bottom:1px solid var(--line)}
.empty b{font:400 clamp(28px,3vw,40px)/1.05 var(--serif)}
.empty span{color:var(--bone-2);max-width:48ch}

/* ---------- brands ---------- */
.brands{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.brand{--c:var(--hm);position:relative;aspect-ratio:3/4.4;overflow:hidden;background:#000;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;isolation:isolate}
.brand img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.2s var(--ease),filter .6s;filter:saturate(.85) brightness(.82)}
.brand::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.85)),linear-gradient(0deg,var(--c),transparent 60%);opacity:.9;mix-blend-mode:normal}
.brand::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--c);mix-blend-mode:color;opacity:.28;transition:opacity .5s}
.brand:hover img{transform:scale(1.05);filter:saturate(1) brightness(.9)}
.brand:hover::after{opacity:.12}
.brand .n{position:absolute;top:20px;left:22px;font:400 11px/1 var(--mono);letter-spacing:.14em;color:rgba(255,255,255,.8)}
.brand .wm{font-size:clamp(30px,2.8vw,44px);line-height:.95;margin:0;color:#fff}
.brand p{margin:12px 0 0;font-size:14px;color:rgba(255,255,255,.82)}
.brand .by{margin-top:18px;padding-top:12px;border-top:1px solid rgba(255,255,255,.25);font:400 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);display:flex;justify-content:space-between}
@media (max-width:900px){.brands{grid-template-columns:1fr}.brand{aspect-ratio:4/3.4}}


/* brand wordmarks: each brand has its own voice */
.wm{font-weight:400}
.wm-id{font-family:"Shrikhand",var(--serif);letter-spacing:-.01em}
.wm-sg{font-family:"Cormorant Garamond",var(--serif);font-style:italic;font-weight:300;letter-spacing:-.01em}
.wm-dd{font-family:"Bodoni Moda",var(--serif);font-style:italic;font-weight:800;letter-spacing:-.03em;text-transform:uppercase}
.wm-bt{font-family:"Unbounded",var(--sans);font-weight:300;text-transform:uppercase;letter-spacing:.08em}

/* brand feature (brands page) */
.bf{--c:var(--hm);display:grid;grid-template-columns:1.25fr 1fr;min-height:88vh;border-top:1px solid var(--line)}
.bf:nth-child(even) .media{order:2}
.bf .media{position:relative;overflow:hidden;background:#000}
.bf .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bf .media::after{content:"";position:absolute;inset:0;background:var(--c);mix-blend-mode:color;opacity:.18}
.bf .txt{padding:clamp(40px,6vw,96px) var(--g);display:flex;flex-direction:column;justify-content:center;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 9%,var(--ink)),var(--ink))}
.bf .wm{font-size:clamp(52px,6.4vw,104px);line-height:.92;margin:18px 0 0;color:var(--c)}
.bf .tagl{font:400 italic clamp(22px,2vw,30px)/1.2 var(--serif);margin:18px 0 26px;color:var(--bone)}
.bf .facts{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 34px}
.bf .facts span{font:400 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:8px 12px;border:1px solid color-mix(in srgb,var(--c) 55%,transparent);border-radius:999px;color:var(--bone-2)}
@media (max-width:900px){.bf{grid-template-columns:1fr;min-height:0}.bf .media{aspect-ratio:4/3}.bf:nth-child(even) .media{order:0}}

/* ---------- radio + recordings ---------- */
.split2{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line)}
.panel{background:var(--ink);padding:clamp(36px,5vw,72px) var(--g);position:relative;overflow:hidden;min-height:540px;display:flex;flex-direction:column}
.panel .bg{position:absolute;inset:0;z-index:0}
.panel .bg img{width:100%;height:100%;object-fit:cover;opacity:.38}
.panel .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,15,.2),rgba(10,11,15,.95) 75%)}
.panel>*:not(.bg){position:relative;z-index:1}
.panel .h2{margin-top:auto;padding-top:120px}
.panel .lede{margin-top:18px}
.panel .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.live{display:inline-flex;align-items:center;gap:10px;font:400 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
@media (max-width:900px){.split2{grid-template-columns:1fr}.panel{min-height:0}.panel .h2{padding-top:72px}}

/* ---------- places ticker ---------- */
.ticker{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;white-space:nowrap;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker .tr{display:inline-flex;gap:0;animation:tick 70s linear infinite}
.ticker span{font:400 italic clamp(26px,3vw,40px)/1 var(--serif);padding:0 22px;color:var(--bone-2)}
.ticker span::after{content:"✦";font-style:normal;font-size:.45em;vertical-align:middle;margin-left:44px;color:var(--mute)}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- partners ---------- */
.logos{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.logos div{min-width:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);aspect-ratio:16/9;display:grid;place-items:center;padding:18%}
.logos img{max-height:46px;max-width:100%;width:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.66;transition:opacity .25s}
.logos div:hover img{opacity:1}
@media (max-width:900px){.logos{grid-template-columns:repeat(3,1fr)}}

/* ---------- residents (members' list) ---------- */
.res{background:var(--ink-2);border-top:1px solid var(--line);overflow:hidden}
.res .grid{display:grid;grid-template-columns:4fr 6fr;gap:clamp(36px,6vw,96px)}
.res .h2{font-size:clamp(44px,6vw,92px)}
.perks{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid var(--line)}
.perks li{display:grid;grid-template-columns:44px 1fr;padding:16px 0;border-bottom:1px solid var(--line);font-size:15px}
.perks li b{font:400 11px/1.9 var(--mono);color:var(--mute);letter-spacing:.1em}
.perks li span{color:var(--bone-2)}
.perks li strong{color:var(--bone);font-weight:500}
.form{display:grid;gap:22px}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.f{display:grid;gap:7px}
.f>span,.legend{font:400 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.f input,.f select{height:50px;border:0;border-bottom:1px solid var(--line-2);background:transparent;padding:0 2px;font-size:16px;border-radius:0;transition:border-color .2s;-webkit-appearance:none;appearance:none}
.f select{background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),linear-gradient(135deg,var(--mute) 50%,transparent 50%);background-position:calc(100% - 12px) 22px,calc(100% - 7px) 22px;background-size:5px 5px;background-repeat:no-repeat;padding-right:22px}
.f select option{background:var(--ink-2)}
.f input:focus,.f select:focus{outline:0;border-color:var(--bone)}
.f input::placeholder{color:#5A5E68}
.bday{display:grid;grid-template-columns:1.4fr 1fr;gap:10px}
.opt-h{display:flex;align-items:center;gap:12px;font:400 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--bone-2);margin-top:6px}
.opt-h::after{content:"";flex:1;height:1px;background:var(--line)}
fieldset{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
fieldset .legend{width:100%;margin-bottom:6px;padding:0}
.tick{position:relative}
.tick input{position:absolute;opacity:0;pointer-events:none}
.tick span{display:inline-flex;align-items:center;height:36px;padding:0 14px;border:1px solid var(--line-2);border-radius:999px;font-size:13px;color:var(--bone-2);cursor:pointer;transition:all .2s;user-select:none}
.tick input:checked+span{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.tick input:focus-visible+span{outline:1.5px solid var(--bone);outline-offset:2px}
.consent{display:grid;grid-template-columns:20px 1fr;gap:12px;font-size:13px;color:var(--mute);line-height:1.5}
.consent input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--bone)}
.consent a{text-decoration:underline}
.form .row{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.note{font-size:13px;color:var(--bone-2)}
.note.err{color:#ff8a80}
.hp{position:absolute;left:-9999px}
.done{display:none}
.join.sent .form{display:none}
.join.sent .done{display:block}
.done b{display:block;font:400 clamp(36px,4vw,56px)/1 var(--serif)}
.done p{color:var(--bone-2);margin:16px 0 0;max-width:46ch}
@media (max-width:960px){.res .grid{grid-template-columns:1fr}}
@media (max-width:520px){.fg{grid-template-columns:1fr}}

/* compact one-line capture */
.quick{display:flex;gap:10px;max-width:520px}
.quick input{flex:1;min-width:0;height:46px;border:1px solid var(--line-2);background:transparent;border-radius:999px;padding:0 20px;font-size:15px}
.quick input:focus{outline:0;border-color:var(--bone)}

/* ---------- shop ---------- */
.shopbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font:400 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--bone-2)}
.prods{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.prod .fr{aspect-ratio:4/5;background:var(--ink-2);position:relative;overflow:hidden;display:grid;place-items:center}
.prod .fr img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.prod:hover .fr img{transform:scale(1.03)}
.prod .fr .mk{width:40%;height:auto;opacity:.18}
.prod .badge{position:absolute;top:14px;left:14px;font:400 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;background:var(--bone);color:var(--ink);padding:7px 10px}
.prod .r{display:flex;justify-content:space-between;gap:12px;margin-top:14px}
.prod h3{font:400 24px/1.1 var(--serif);margin:0}
.prod .price{font:400 13px/1.8 var(--mono)}
.prod p{font-size:14px;color:var(--mute);margin:6px 0 0}
@media (max-width:900px){.prods{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.prods{grid-template-columns:1fr}}

/* ---------- about ---------- */
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px)}
@media (max-width:820px){.cols2{grid-template-columns:1fr}}
.places{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.places div{padding:24px 24px 28px 0;border-bottom:1px solid var(--line)}
.places h3{font:400 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:0 0 14px}
.places p{margin:0;font:400 22px/1.35 var(--serif);color:var(--bone-2)}
@media (max-width:820px){.places{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.places{grid-template-columns:1fr}}
.list{list-style:none;padding:0;margin:24px 0 0;border-top:1px solid var(--line)}
.list li{padding:14px 0;border-bottom:1px solid var(--line);color:var(--bone-2);font-size:15px;display:flex;gap:16px}
.list li::before{content:"—";color:var(--mute)}

/* ---------- socials ---------- */
.soc{display:flex;gap:8px;flex-wrap:wrap}
.soc a{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border:1px solid var(--line-2);border-radius:999px;font-size:12px;color:var(--bone-2);transition:all .2s}
.soc a:hover{border-color:var(--bone);color:var(--bone)}
.soc svg{width:14px;height:14px;fill:currentColor}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:clamp(56px,7vw,96px) 0 28px;background:#000}
.ft{display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;gap:40px}
.ft .big img{width:min(260px,70%);height:auto}
.ft .big p{color:var(--mute);font-size:14px;max-width:38ch;margin:22px 0 0}
.ft .big p a{text-decoration:underline}
.ft h4{font:400 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:0 0 16px;font-weight:400}
.ft .c a,.ft .c span{display:block;font-size:14px;color:var(--bone-2);padding:5px 0}
.ft .c a:hover{color:var(--bone)}
.legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:64px;padding-top:20px;border-top:1px solid var(--line);font:400 11px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
@media (max-width:900px){.ft{grid-template-columns:1fr 1fr}.ft .big{grid-column:1/-1}}

/* ---------- announcement ---------- */
.announce{display:block;text-align:center;padding:12px var(--g);background:var(--bone);color:var(--ink);font:500 13px/1.4 var(--sans);margin-top:calc(var(--strip) + 68px)}
.announce+main .hero{margin-top:0}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
.no-js .rv{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- v3 (Oct 28) ---------- */
.hero-mark{margin:0;line-height:0}
.hero-mark img{width:clamp(220px,36vw,620px);height:auto;filter:drop-shadow(0 2px 30px rgba(0,0,0,.35))}

/* produced-by list */
.produced{margin-top:clamp(48px,6vw,88px)}
.produced .phd{margin-bottom:24px}
.pcols{display:grid;grid-template-columns:repeat(5,1fr);gap:28px;border-top:1px solid var(--line);padding-top:24px}
.pcols h3{font:400 10.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:0 0 14px}
.pcols ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pcols li{font:400 19px/1.25 var(--serif);color:var(--bone-2)}
@media (max-width:1100px){.pcols{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.pcols{grid-template-columns:1fr 1fr;gap:24px 16px}.pcols li{font-size:17px}}

/* resident card */
.rcard{position:relative;margin:30px 0 4px;width:min(360px,100%);aspect-ratio:1.586;border-radius:14px;padding:20px 22px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;
  background:radial-gradient(120% 90% at 85% 0%,rgba(123,92,255,.35),transparent 55%),radial-gradient(90% 80% at 0% 100%,rgba(255,106,43,.18),transparent 60%),linear-gradient(145deg,#1A1C24,#0A0B0F);
  border:1px solid rgba(239,233,223,.18);box-shadow:0 24px 60px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08)}
.rcard::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.07) 45%,transparent 55%);pointer-events:none}
.rcard img{width:72px;height:auto;opacity:.95}
.rcard .rc-l{font:400 34px/1 var(--serif);letter-spacing:.01em;font-style:italic}
.rcard .rc-m{display:flex;justify-content:space-between;font:400 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--bone-2)}

/* shop */
.prod{cursor:pointer;background:none;border:0;padding:0;text-align:left;color:inherit;display:block;width:100%}
.prod .fr{background:linear-gradient(160deg,#1A1C24,#0E0F14)}
.prod .ph-t{position:absolute;inset:auto 18px 18px 18px;font:400 10.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);text-align:left}
.prod .sz{font:400 11px/1 var(--mono);letter-spacing:.08em;color:var(--mute);margin-top:8px}
.shopinfo{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:clamp(48px,6vw,80px);padding-top:24px;border-top:1px solid var(--line)}
.shopinfo b{display:block;font:400 10.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--bone);margin-bottom:8px;font-weight:400}
.shopinfo span{font-size:14px;color:var(--mute)}
@media (max-width:760px){.shopinfo{grid-template-columns:1fr}}
.pd{border:1px solid var(--line-2);background:var(--ink);color:var(--bone);padding:0;width:min(980px,calc(100% - 32px));max-height:calc(100% - 48px);border-radius:4px}
.pd::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(4px)}
.pd[open]{display:grid;grid-template-columns:1.1fr 1fr}
.pd-x{position:absolute;top:12px;right:12px;z-index:2}
.pd-x button{background:rgba(10,11,15,.7);border:1px solid var(--line-2);border-radius:999px;padding:8px 14px;font:400 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.pd-media{background:linear-gradient(160deg,#1A1C24,#0E0F14);aspect-ratio:4/5;display:grid;place-items:center;overflow:hidden}
.pd-media img{width:100%;height:100%;object-fit:cover}
.pd-media img.mk{width:40%;height:auto;opacity:.2}
.pd-info{padding:clamp(24px,4vw,48px);display:flex;flex-direction:column;gap:14px;overflow:auto}
.pd-info h2{font:400 clamp(32px,3.4vw,48px)/1 var(--serif);margin:4px 0 0}
.pd-price{font:400 15px/1 var(--mono);margin:0}
.pd-desc{color:var(--bone-2);margin:0;font-size:15px}
.pd-sizes{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.pd-sizes button{min-width:48px;height:42px;border:1px solid var(--line-2);border-radius:4px;background:none;font:400 13px/1 var(--mono);cursor:pointer}
.pd-sizes button[aria-checked=true]{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.pd-buy[aria-disabled=true]{opacity:.45;pointer-events:none}
@media (max-width:760px){.pd[open]{grid-template-columns:1fr}.pd-media{aspect-ratio:4/3.4}}

/* ---------- ecosystem (home) ---------- */
.eco{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:auto auto;gap:2px;background:var(--line)}
.et{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:380px;overflow:hidden;background:var(--ink-2);color:var(--bone);isolation:isolate}
.et>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.2s var(--ease)}
.et::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,11,15,0) 30%,rgba(10,11,15,.9) 100%)}
.et:hover>img{transform:scale(1.04)}
.et-in{padding:22px 22px 24px;display:flex;flex-direction:column;gap:8px}
.et-k{display:inline-flex;align-items:center;gap:8px;font:400 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--bone-2)}
.et h3{font:400 clamp(28px,2.6vw,40px)/1 var(--serif);margin:2px 0 0;letter-spacing:-.01em}
.et p{margin:0;font-size:14px;color:var(--bone-2);max-width:40ch}
.et-go{margin-top:8px;font:400 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--bone)}
.btnlink{background:none;border:0;padding:0;cursor:pointer;text-align:left}
.et-events{grid-column:span 2;grid-row:span 2;min-height:760px}
.et-events h3{font-size:clamp(44px,5vw,76px)}
.et-events p{font-size:16px}
.et-subs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.et-subs .small{width:100%;font:400 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:2px}
.sub{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 13px;border:1px solid color-mix(in srgb,var(--c) 60%,transparent);border-radius:999px;font-size:13px;color:var(--bone);background:rgba(10,11,15,.45);backdrop-filter:blur(6px)}
.sub::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c)}
.et-mk{position:absolute;inset:0;z-index:-2;display:grid;place-items:center;background:radial-gradient(80% 60% at 70% 20%,rgba(123,92,255,.18),transparent 60%),linear-gradient(160deg,#1A1C24,#0A0B0F)}
.et-mk img{width:46%;height:auto;opacity:.22}
@media (max-width:1100px){.eco{grid-template-columns:1fr 1fr}.et-events{grid-column:span 2;grid-row:auto;min-height:560px}}
@media (max-width:620px){.eco{grid-template-columns:1fr}.et-events{grid-column:auto;min-height:640px}.et{min-height:340px}}

/* partner band (home) */
.pband{border-top:1px solid var(--line);padding:clamp(48px,6vw,88px) 0;background:var(--ink-2)}
.pband .wrap{display:flex;justify-content:space-between;align-items:end;gap:28px;flex-wrap:wrap}

/* partner page offers */
.offers{display:grid;gap:0}
.offer{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,80px);padding:clamp(40px,5vw,72px) 0;border-top:1px solid var(--line)}
.offer:first-child{border-top:0;padding-top:0}
.offer .oh .h2{margin-top:12px}
.offer .oh .lede{margin-top:18px}
.offer .ob .small{font:400 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.ocase{margin-top:28px;padding:22px;border:1px solid var(--line-2);background:var(--ink-2)}
.ocase p{margin:12px 0 0;color:var(--bone-2);font:400 20px/1.4 var(--serif)}
@media (max-width:860px){.offer{grid-template-columns:1fr}}
.f textarea{border:0;border-bottom:1px solid var(--line-2);background:transparent;padding:10px 2px;font-size:16px;resize:vertical;min-height:96px}
.f textarea:focus{outline:0;border-color:var(--bone)}

/* vinyl on the radio strip: always spinning, faster while the stream plays */
.vinyl{width:24px;height:24px;flex:none;animation:spin 3.2s linear infinite;filter:drop-shadow(0 0 4px rgba(123,92,255,.35))}
.strip.playing .vinyl{animation-duration:1.8s}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.vinyl{animation:none!important}}

/* ---------- no-photo mode (Oct 28): type + color instead of pictures ---------- */
.intro{grid-template-columns:1fr}
.intro .statement{max-width:24ch;font-size:clamp(34px,4.6vw,68px)}
.et{background:var(--ink-2)}
.et::before{display:none}
.et-events{background:radial-gradient(70% 60% at 85% 10%,color-mix(in srgb,var(--hm) 38%,transparent),transparent 70%),radial-gradient(60% 50% at 0% 100%,color-mix(in srgb,var(--id) 22%,transparent),transparent 70%),#121319}
.et-radio{background:radial-gradient(80% 70% at 100% 0%,rgba(255,106,43,.22),transparent 65%),#121319}
.et-label{background:radial-gradient(80% 70% at 100% 0%,color-mix(in srgb,var(--bt) 26%,transparent),transparent 65%),#121319}
.et-res{background:radial-gradient(80% 70% at 100% 0%,color-mix(in srgb,var(--id) 26%,transparent),transparent 65%),#121319}
.et-shop .et-mk{background:radial-gradient(80% 70% at 100% 0%,color-mix(in srgb,var(--sg) 18%,transparent),transparent 65%),#121319}
.et{border:0;transition:background-color .3s}
.et:hover{filter:brightness(1.12)}
.et-events{min-height:620px}
.et{min-height:300px}
.brand{background:radial-gradient(90% 70% at 80% 0%,color-mix(in srgb,var(--c) 55%,transparent),transparent 70%),linear-gradient(180deg,#121319,#0A0B0F);aspect-ratio:auto;min-height:360px}
.brand::before{background:none}
.brand::after{display:none}
.brand .wm{font-size:clamp(38px,3.6vw,58px);color:var(--c)}
.bf .media{display:grid;place-items:center;min-height:420px;background:radial-gradient(70% 60% at 50% 40%,color-mix(in srgb,var(--c) 45%,transparent),transparent 72%),#0E0F14}
.bf .media::after{display:none}
.bf .media .wm{font-size:clamp(56px,7vw,120px);color:var(--bone);text-align:center;padding:0 24px;line-height:.95}
.panel{background:radial-gradient(70% 60% at 100% 0%,color-mix(in srgb,var(--hm) 18%,transparent),transparent 70%),var(--ink)}
.panel#recordings{background:radial-gradient(70% 60% at 100% 0%,color-mix(in srgb,var(--bt) 18%,transparent),transparent 70%),var(--ink)}
.panel .h2{padding-top:72px}
.phead{background:radial-gradient(60% 80% at 90% 0%,color-mix(in srgb,var(--hm) 14%,transparent),transparent 70%)}
@media (max-width:620px){.et-events{min-height:520px}.brand{min-height:280px}.bf .media{min-height:260px}}

/* radio strip: vinyl toggles play, the name links to the app */
.vbtn{display:inline-flex;align-items:center;gap:10px;background:none;border:0;padding:0;cursor:pointer;color:inherit}
.onair a.t{color:inherit;transition:color .2s}
.onair a.t:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.strip .play{background:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}
.et h3 a{color:inherit}
.et h3 a:hover{text-decoration:underline;text-underline-offset:4px}

/* calendar: more to be announced */
.ev.tba{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.ev.tba h3{margin:0;color:var(--mute);font-style:italic}
.ev.tba::before{display:none}
@media (max-width:900px){.ev .where:empty{display:none}}

/* Instagram slider */
.igs{padding:clamp(64px,8vw,110px) 0 clamp(40px,5vw,70px);border-top:1px solid var(--line)}
.igs-h{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.igs-nav{display:flex;gap:10px;align-items:center}
.igs-b{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--bone);font-size:18px;cursor:pointer;transition:border-color .2s,background .2s}
.igs-b:hover{border-color:var(--bone);background:rgba(255,255,255,.04)}
.igs-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px)/4);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.igs-track::-webkit-scrollbar{display:none}
.igp{scroll-snap-align:start;display:block;color:inherit;text-decoration:none}
.igp-m{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;border-radius:4px;background:#1A1C24}
.igp-m img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block;transition:transform .6s var(--ease)}
.igp:hover .igp-m img{transform:scale(1.04)}
.igp-v{position:absolute;top:12px;right:12px;font-size:12px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.igp-c{white-space:pre-line;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;margin-top:12px;font-size:14px;line-height:1.45;color:var(--bone-2)}
@media (max-width:1000px){.igs-track{grid-auto-columns:calc((100% - 32px)/3)}}
@media (max-width:700px){.igs-track{grid-auto-columns:78%}.igs-b{display:none}}

/* =========================================================
   v4 · SIGNAL (Oct 29 2026)
   Bold Gotham caps, UV + signal orange, glow on black,
   fully rounded corners, the tube line.
   ========================================================= */
body{font-weight:400;letter-spacing:-.005em}
.eyebrow{color:var(--hm);letter-spacing:.12em}
.eyebrow i{background:var(--glow);height:3px;border-radius:3px;width:22px}

/* type: bold caps display, glow emphasis */
.display,.h2{font-weight:800;text-transform:uppercase;letter-spacing:-.025em;line-height:.92}
.display{font-size:clamp(42px,7.6vw,124px)}
.h2{font-size:clamp(34px,5vw,76px)}
.statement{font-weight:600;letter-spacing:-.025em;line-height:1.06}
.h2 em,.display em,.statement em{font-style:normal;color:transparent;background:var(--glow);-webkit-background-clip:text;background-clip:text}
.intro .statement{font-size:clamp(44px,7vw,112px);font-weight:800;text-transform:uppercase;line-height:.92;max-width:14ch}
.res .h2{font-size:clamp(40px,5.6vw,86px)}
.ev h3,.et h3,.prod h3,.pd-info h2,.next b,.empty b,.done b,.stat b,.ev .d b{font-weight:800;text-transform:uppercase;letter-spacing:-.02em;font-style:normal}
.ev h3{font-size:clamp(22px,2.2vw,32px)}
.ev .d b{font-size:46px;color:var(--bone)}
.ev.past .d b{font-size:30px}.ev.past h3{font-size:20px}
.ev.tba h3{font-style:normal;text-transform:none;font-weight:600}
.stat b{background:var(--glow);-webkit-background-clip:text;background-clip:text;color:transparent}
.places p,.pcols li,.ocase p{font-weight:500;letter-spacing:-.01em}
.bf .tagl{font-style:normal;font-weight:500}
.ticker span{font-style:normal;font-weight:800;text-transform:uppercase;letter-spacing:-.02em;color:var(--bone)}
.ticker span::after{content:"";display:inline-block;width:.4em;height:.4em;border-radius:50%;background:var(--sig);margin-left:44px;vertical-align:middle}
.drawer nav a{font-weight:800;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(34px,10vw,58px)}
.drawer nav a:last-child{font-style:normal;color:transparent;background:var(--glow);-webkit-background-clip:text;background-clip:text}
.nav{font-weight:500}
.nav a[aria-current=page]::after{height:3px;border-radius:3px;background:var(--glow)}

/* buttons: chrome pill + signal accent */
.btn{font-weight:600}
.btn.solid{background:var(--bone);border-color:var(--bone)}
.btn.solid:hover{background:#fff}
.btn:not(.solid):hover{border-color:var(--hm)}
.chip[aria-pressed=true]{background:var(--hm);border-color:var(--hm);color:#fff}
.tick input:checked+span{background:var(--hm);border-color:var(--hm);color:#fff}
.flag.hot{border-color:var(--sig);color:var(--sig)}
.dot{background:var(--sig)}
.strip{background:var(--ink)}
.strip .play{border-color:var(--sig);color:var(--sig)}
.hdr.solid{background:rgba(10,11,15,.88)}
.hdr .logo img{height:28px}

/* hero: glow logo, orange live line */
.hero::after{background:linear-gradient(180deg,rgba(10,11,15,.6) 0%,rgba(10,11,15,0) 26%,rgba(10,11,15,0) 45%,rgba(10,11,15,.9) 100%)}
.hero-mark img{filter:drop-shadow(0 2px 30px rgba(0,0,0,.4))}
.hero .meta{color:var(--bone)}
.hero .meta span+span::before{color:var(--sig)}
.next{border-radius:var(--r-s);background:rgba(18,19,25,.7)}
.next .go{color:var(--sig)}

/* rounded everything */
.eco{gap:16px;background:none}
.et{border-radius:var(--r);overflow:hidden}
.brands{gap:16px}
.brand{border-radius:var(--r)}
.split2{gap:16px;background:none}
.panel{border-radius:var(--r)}
.prod .fr,.pd-media{border-radius:var(--r-s)}
.pd{border-radius:var(--r);overflow:hidden}
.pd-sizes button{border-radius:999px}
.ocase{border-radius:var(--r-s)}
.igp-m{border-radius:var(--r-s)}
.bf .media{border-radius:var(--r);margin:16px;overflow:hidden}
.logos{border:0;gap:12px}
.logos div{border:1px solid var(--line);border-radius:var(--r-s)}

/* ecosystem tiles carry the gradient system */
.et-events{background:var(--g-mid)}
.et-radio{background:var(--ink-3)}
.et-label{background:var(--g-dusk)}
.et-res{background:var(--g-emb)}
.et-shop .et-mk{background:var(--ink-2)}
.et-k{color:var(--bone)}
.et-radio .et-k{color:var(--sig)}
.et-go{color:var(--bone);font-weight:500}

/* the tube line: same stroke + round corner as the hm */
.et-events::after,.pband::after,.phead::after{content:"";position:absolute;pointer-events:none;border-style:solid;border-color:currentColor;border-width:22px 0 0 22px;border-radius:90px 0 0 0;z-index:-1}
.et-events::after{color:rgba(255,255,255,.9);right:-40px;top:56px;width:26%;height:130%}
.pband{position:relative;overflow:hidden;isolation:isolate}
.pband::after{color:var(--hm);right:-30px;top:44px;width:min(380px,40%);height:200%;opacity:.9}
.phead{isolation:isolate}
.phead::after{color:var(--hm);right:-40px;top:calc(var(--strip) + 90px);width:min(220px,16%);height:200%;opacity:.85}
@media (max-width:700px){.et-events::after{width:24%;top:40px}.phead::after,.pband::after{width:46%;border-width:14px 0 0 14px;border-radius:56px 0 0 0}}

/* resident card: UV like the brand board */
.rcard{background:var(--hm);color:var(--ink);border:0;border-radius:22px;box-shadow:0 24px 60px rgba(123,92,255,.25)}
.rcard::after{display:none}
.rcard img{filter:brightness(0);opacity:1}
.rcard .rc-l{font-style:normal;font-weight:800;text-transform:uppercase;letter-spacing:-.02em;font-size:30px}
.rcard .rc-m{color:var(--ink)}

/* footer + forms */
footer{background:var(--ink)}
.ft .big img{width:min(240px,70%)}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--hm)}
.quick input:focus{border-color:var(--hm)}
.perks li b{color:var(--sig)}
.announce{background:var(--glow);color:#fff;font-weight:600}
.vinyl{filter:drop-shadow(0 0 4px rgba(123,92,255,.45))}

/* ---------- radio page (Oct 29) ---------- */
.lp{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r);background:var(--g-mid);display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:32px;padding:clamp(32px,5vw,72px)}
.lp::after{content:"";position:absolute;z-index:-1;right:-40px;top:48px;width:34%;height:140%;border:22px solid rgba(255,255,255,.9);border-right:0;border-bottom:0;border-radius:90px 0 0 0;pointer-events:none}
.lp-k{display:inline-flex;align-items:center;gap:10px;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sig)}
.lp .h2{font-size:clamp(56px,9vw,150px);margin-top:16px}
.lp .lede{color:var(--bone);margin:10px 0 28px}
.lp-play{display:inline-flex;align-items:center;gap:14px;height:58px;padding:0 28px;border:0;border-radius:999px;background:var(--sig);color:var(--ink);font:700 15px/1 var(--sans);cursor:pointer;transition:transform .2s var(--ease)}
.lp-play:hover{transform:scale(1.03)}
.lp-disc{justify-self:center;width:min(320px,70vw);aspect-ratio:1;border-radius:50%;background:var(--ink);display:grid;place-items:center;box-shadow:inset 0 0 0 26px var(--ink),inset 0 0 0 27px #23252E,inset 0 0 0 52px var(--ink),inset 0 0 0 53px #23252E,inset 0 0 0 78px var(--ink),inset 0 0 0 79px #23252E,0 30px 60px rgba(0,0,0,.4);animation:spin 9s linear infinite}
.strip.playing ~ main .lp-disc{animation-duration:3s}
.lp-disc img{width:34%;height:auto}
@media (max-width:820px){.lp{grid-template-columns:1fr}.lp-disc{order:-1;width:min(220px,60vw)}.lp::after{width:30%}}
.opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.opt-c{display:flex;flex-direction:column;gap:12px;text-align:left;padding:28px;border-radius:var(--r);background:var(--ink-3);border:1px solid var(--line);color:var(--bone);font:inherit;cursor:pointer;min-height:280px;transition:border-color .2s,transform .3s var(--ease)}
.opt-c:hover{border-color:var(--hm);transform:translateY(-3px)}
.opt-c:nth-child(1){background:var(--g-emb)}
.opt-n{font:500 11px/1 var(--mono);letter-spacing:.14em;color:var(--sig)}
.opt-c:nth-child(1) .opt-n{color:var(--bone)}
.opt-c b{font:800 clamp(28px,2.6vw,40px)/1 var(--sans);text-transform:uppercase;letter-spacing:-.02em;margin-top:auto}
.opt-c>span:not(.opt-n):not(.opt-go){font-size:15px;color:var(--bone-2);max-width:34ch}
.opt-c:nth-child(1)>span:not(.opt-n):not(.opt-go){color:var(--bone)}
.opt-go{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding-top:14px;border-top:1px solid var(--line-2)}
@media (max-width:900px){.opts{grid-template-columns:1fr}.opt-c{min-height:0}}
.mixes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.mix{display:flex;flex-direction:column;gap:6px;color:var(--bone)}
.mix-art{aspect-ratio:1;border-radius:var(--r-s);display:grid;place-items:center;margin-bottom:10px;overflow:hidden;transition:transform .4s var(--ease)}
.mix:hover .mix-art{transform:scale(1.02)}
.mix-art{position:relative}.mix-art img.mk{width:32%;height:auto}.mix-art img.cov{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mix-play{position:absolute;right:14px;bottom:14px;width:46px;height:46px;border-radius:50%;background:var(--sig);color:var(--ink);display:grid;place-items:center;font-size:15px;opacity:0;transform:translateY(6px);transition:all .3s var(--ease)}
.mix:hover .mix-play,.mix:focus-visible .mix-play{opacity:1;transform:none}
.mix b{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mix-art.g1{background:var(--g-mid)}.mix-art.g2{background:var(--g-emb)}.mix-art.g3{background:var(--g-dusk)}.mix-art.g4{background:linear-gradient(135deg,#7B5CFF,#FF6A2B)}
.mix-k{font:500 10.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.mix b{font:800 18px/1.12 var(--sans);text-transform:uppercase;letter-spacing:-.01em}
.mix-a{font-size:14px;color:var(--bone-2)}
@media (max-width:1000px){.mixes{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Residents form, minimal (Oct 29) ---------- */
.fm-min{gap:18px}
.fm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fi{display:block;min-width:0}
.fi input,.fi select{width:100%;height:58px;border:1px solid var(--line-2);border-radius:16px;background:var(--ink-3);padding:0 20px;font:400 16px/1 var(--sans);color:var(--bone);-webkit-appearance:none;appearance:none;transition:border-color .2s,background .2s}
.fi input::placeholder{color:var(--mute)}
.fi select:invalid{color:var(--mute)}
.fi select option{color:var(--bone);background:var(--ink-2)}
.fi select{background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),linear-gradient(135deg,var(--mute) 50%,transparent 50%);background-position:calc(100% - 26px) 26px,calc(100% - 21px) 26px;background-size:5px 5px;background-repeat:no-repeat;padding-right:44px}
.fi input:hover,.fi select:hover{border-color:var(--bone-2)}
.fi input:focus,.fi select:focus{outline:0;border-color:var(--hm);background:var(--ink-2)}
.fm-min .consent{font-size:13px}
.fm-min .consent input{accent-color:var(--hm)}
.fm-min .btn.solid{height:54px;padding:0 28px;font-size:14px}
@media (max-width:560px){.fm{grid-template-columns:1fr}}

/* ---------- shop: drop countdown (Oct 29) ---------- */
.drop{position:relative;overflow:hidden;isolation:isolate;padding:calc(var(--strip) + 68px + clamp(56px,9vh,110px)) 0 clamp(72px,10vw,140px);background:radial-gradient(70% 60% at 85% 0%,rgba(123,92,255,.28),transparent 70%),radial-gradient(60% 50% at 0% 100%,rgba(255,106,43,.16),transparent 70%),var(--ink)}
.drop::after{content:"";position:absolute;z-index:-1;right:-40px;top:calc(var(--strip) + 90px);width:min(220px,16%);height:200%;border:22px solid var(--hm);border-right:0;border-bottom:0;border-radius:90px 0 0 0;opacity:.85}
.drop .display{margin-top:18px}
.drop .lede{margin-top:20px}
.cd{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:760px;margin-top:clamp(36px,5vw,56px)}
.cd-u{background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-s);padding:22px 12px 18px;text-align:center}
.cd-u b{display:block;font:800 clamp(40px,6vw,76px)/1 var(--sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:transparent;background:var(--glow);-webkit-background-clip:text;background-clip:text}
.cd-u span{display:block;margin-top:10px;font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.cd-when{margin:16px 0 0;font:500 12px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--sig)}
.drop-join{max-width:760px;margin-top:clamp(36px,5vw,56px)}
.drop-f{display:grid;gap:14px}
.drop-row{display:flex;gap:10px}
.drop-row .fi{flex:1}
.drop-row .btn.solid{height:58px;padding:0 28px;font-size:14px}
.drop-join .done b{font:800 clamp(28px,3.4vw,44px)/1 var(--sans);text-transform:uppercase;letter-spacing:-.02em}
@media (max-width:560px){.cd{gap:8px}.cd-u{padding:16px 6px 14px}.drop-row{flex-direction:column}.drop-row .btn.solid{justify-content:center}}

/* ---------- label page: release of the month (Oct 29) ---------- */
.rom{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);align-items:center;padding:clamp(20px,3vw,32px);border-radius:var(--r);background:var(--ink-3);border:1px solid var(--line)}
.rom-art{position:relative;aspect-ratio:1;border-radius:var(--r-s);overflow:hidden;background:var(--g-dusk);display:grid;place-items:center;box-shadow:0 30px 70px rgba(0,0,0,.45)}
.rom-art img.mk{width:30%;height:auto}
.rom-art img.cov,.mix-art img.cov{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rom-k{display:inline-flex;align-items:center;gap:10px;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sig)}
.rom .h2{font-size:clamp(48px,6.4vw,104px);margin-top:16px}
.rom-a{margin:12px 0 0;font:600 clamp(20px,2vw,26px)/1.2 var(--sans);color:var(--bone)}
.rom-meta{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.rom-meta li{font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:9px 12px;border:1px solid var(--line-2);border-radius:999px;color:var(--bone-2)}
.rom-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:30px}
.rom-cta .btn{height:58px;padding:0 24px}
.lp-play:disabled{opacity:.5;cursor:default;transform:none}
@media (max-width:860px){.rom{grid-template-columns:1fr}}

/* ---------- hero: logo centred on the video (Oct 29) ---------- */
.hero .in{inset:0;display:grid;place-items:center;padding:calc(var(--strip) + 68px) 0 clamp(28px,5vh,56px)}
.hero .in>.wrap{width:100%;height:100%;display:grid;grid-template-columns:1fr;grid-template-rows:1fr auto;align-items:center;justify-items:center;position:relative}
.hero .in>.wrap>div:first-child{grid-row:1;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero .hero-mark img{width:clamp(220px,34vw,560px);margin:0 auto}
.hero .meta{justify-content:center}
.hero .next{grid-row:2;justify-self:end}
.hero::after{background:radial-gradient(60% 50% at 50% 50%,rgba(10,11,15,.35),transparent 70%),linear-gradient(180deg,rgba(10,11,15,.55) 0%,rgba(10,11,15,0) 24%,rgba(10,11,15,0) 70%,rgba(10,11,15,.75) 100%)}
@media (max-width:820px){.hero .next{justify-self:stretch;width:100%}}
