/* newsitedemo: towardsnight.com preview. A (Poster) base + B's phone tab bar + C's workbench Lab, one stylesheet. */
:root{
  --bg:#06060b; --bg2:#0d0c16; --card:#14121d; --ink:#f0ece4; --dim:#b3acbd; --line:rgba(240,236,228,.14);
  --crimson:#c0182f; --crimson-deep:#6d0c1b; --crimson-text:#f0566b; --glow:rgba(192,24,47,.32);
  --gut:clamp(16px,4.5vw,64px); --max:1240px;
  --display:"Anton",Impact,"Arial Narrow",sans-serif;
  --serif:"Spectral",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --banner-h:44px; --barh:60px; --tabh:64px; --tabpad:0px;
}
@media (max-width:820px){ :root{ --banner-h:60px; --tabpad:calc(var(--tabh) + env(safe-area-inset-bottom)) } }
.no-banner{ --banner-h:0px }
*{box-sizing:border-box}
/* THE BOOKING SWITCH: dormant until site.js sets BOOKING_LIVE = true (adds .booking-live to <html>) */
html:not(.booking-live) [data-dormant="booking"]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--barh) + var(--banner-h) + 8px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--sans);overflow-x:hidden;padding-bottom:var(--tabpad)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--crimson-text);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--ink);color:var(--bg);padding:10px 14px}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- preview banner ---------- */
.preview{position:fixed;inset:0 0 auto 0;z-index:60;min-height:44px;display:flex;align-items:center;gap:10px;
  padding:0 0 0 var(--gut);background:#1a0a10;border-bottom:1px solid rgba(240,86,107,.35);font:500 14px/1.35 var(--sans);color:var(--ink)}
.preview p{margin:0;flex:1;padding:6px 0}
.preview b{color:var(--crimson-text);letter-spacing:.12em;font-weight:600}
.preview a{color:var(--ink);font-weight:600;text-underline-offset:3px;white-space:nowrap;display:inline-flex;align-items:center;min-height:44px;vertical-align:middle;margin:-12px 0}
.preview a:hover{color:var(--crimson-text)}
.preview button{flex:0 0 auto;width:44px;height:44px;margin-right:max(4px,calc(var(--gut) - 14px));border:0;background:none;color:var(--dim);font:400 26px/1 var(--sans);cursor:pointer;border-radius:50%}
.preview button:hover{color:var(--ink);background:rgba(240,236,228,.08)}
.no-banner .preview{display:none}

/* ---------- top bar ---------- */
.bar{position:fixed;left:0;right:0;top:var(--banner-h);z-index:50;height:var(--barh);display:flex;align-items:center;gap:16px;
  padding:0 var(--gut);background:rgba(6,6,11,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-height:44px;min-width:44px;margin-right:auto}
.brand img{width:32px;height:32px;border-radius:50%}
.brand span{font:400 19px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
@media (max-width:429px){.brand span{display:none}}
.nav{display:flex;align-items:center;gap:4px}
.nav a{font:600 14px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  padding:0 12px;min-height:44px;display:flex;align-items:center;color:var(--dim);transition:color .2s;position:relative}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}
.nav a[aria-current]::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;background:var(--crimson)}
.nav a.pill{gap:8px;background:var(--crimson);color:#fff;border-radius:999px;padding:0 20px;margin-left:10px}
.nav a.pill:hover{background:#d81f39}
.nav a.pill svg{width:18px;height:18px}
.nav a.pill.book{margin-left:6px}
.menu-btn{display:none}
.pill-mini{display:none;align-items:center;gap:7px;white-space:nowrap;min-height:44px;padding:0 16px;border-radius:999px;background:var(--crimson);color:#fff;
  font:600 13px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;text-decoration:none}

@media (max-width:820px){
  .nav{display:none}
  .bar .pill-mini{display:flex}
  .pill-mini svg{width:17px;height:17px}
  .booking-live .pill-mini{padding:0 12px}
  .menu-btn{display:flex;align-items:center;gap:10px;min-height:44px;min-width:44px;padding:0 4px 0 12px;
    background:none;border:0;color:var(--ink);font:600 14px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
  .menu-btn i{display:block;width:24px;height:2px;background:currentColor;position:relative;transition:transform .25s}
  .menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;width:24px;height:2px;background:currentColor;transition:transform .25s,top .25s}
  .menu-btn i::before{top:-7px}.menu-btn i::after{top:7px}
  .menu-open .menu-btn i{background:transparent}
  .menu-open .menu-btn i::before{top:0;transform:rotate(45deg)}
  .menu-open .menu-btn i::after{top:0;transform:rotate(-45deg)}
}

/* full-screen numbered menu (from A) */
.overlay{position:fixed;top:calc(var(--banner-h) + var(--barh));left:0;right:0;bottom:0;z-index:55;background:var(--bg);display:flex;flex-direction:column;
  padding:20px var(--gut) calc(28px + env(safe-area-inset-bottom));overflow-x:hidden;overflow-y:auto;visibility:hidden;opacity:0;transition:opacity .25s,visibility 0s .25s}
.menu-open .overlay{visibility:visible;opacity:1;transition:opacity .25s}
.overlay::before{content:"";position:fixed;left:0;right:0;bottom:0;top:calc(var(--banner-h) + var(--barh));pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='92' fill='none' stroke='%23c0182f' stroke-opacity='.35' stroke-width='1.5' stroke-dasharray='120 10 30 10'/%3E%3Ccircle cx='100' cy='100' r='76' fill='none' stroke='%23f0ece4' stroke-opacity='.08' stroke-width='1'/%3E%3C/svg%3E") right -40vw bottom -30vw/110vw 110vw no-repeat}
.overlay ol{list-style:none;margin:0;padding:0;position:relative}
.overlay li{border-bottom:1px solid var(--line)}
.overlay li a{display:flex;align-items:baseline;gap:16px;padding:12px 0;min-height:44px;text-decoration:none;
  font:400 clamp(40px,12vw,56px)/1 var(--display);text-transform:uppercase;letter-spacing:.01em;transition:color .2s}
.overlay li a[aria-current]{color:var(--crimson-text)}
.overlay li a:hover{color:var(--gold)}
.overlay .big-cta + .big-cta{margin-top:12px;background:transparent;border:1.5px solid var(--crimson)}
.overlay .big-cta svg{width:26px;height:26px}
.overlay .big-cta{margin-top:24px;position:relative;display:flex;gap:12px;justify-content:center;align-items:center;min-height:60px;border-radius:999px;
  background:var(--crimson);color:#fff;text-decoration:none;font:400 26px/1 var(--display);letter-spacing:.06em;text-transform:uppercase}
.overlay .sig{position:relative;margin-top:auto;padding-top:24px;font:italic 400 18px/1.4 var(--serif);color:var(--dim)}
.menu-open{overflow:hidden}

/* ---------- phone bottom tab bar (from B, A palette) ---------- */
.tabbar{display:none}
@media (max-width:820px){
  .tabbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:58;padding:0 6px env(safe-area-inset-bottom);
    background:rgba(9,8,15,.95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line)}
  .menu-open .tabbar{display:none}
  .tabbar ul{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-flow:column;grid-auto-columns:84px;align-items:end;height:var(--tabh);max-width:560px}
  .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:var(--tabh);text-decoration:none;color:var(--dim);
    font:600 12px/1 var(--sans);letter-spacing:.02em;position:relative;-webkit-tap-highlight-color:transparent;transition:color .15s}
  .tabbar svg{width:24px;height:24px;transition:transform .15s}
  .tabbar a:active svg{transform:scale(.86)}
  .tabbar a[aria-current],.tabbar a.on{color:var(--ink)}
  .tabbar a[aria-current]::before,.tabbar a.on::before{content:"";position:absolute;top:0;left:20%;right:20%;height:3px;border-radius:0 0 3px 3px;background:var(--crimson-text)}
  .tabbar .raise a{color:#fff;height:auto;margin:0 2px 8px;transform:translateY(-12px);padding:10px 4px 9px;border-radius:16px;font-size:13px;
    background:linear-gradient(160deg,#df203b,#9b1127);border:1px solid #ff5a70;box-shadow:0 10px 24px -6px rgba(192,24,47,.85),0 0 0 4px var(--bg)}
  .tabbar .raise a::before{display:none}
  .tabbar .raise.book a{margin-left:4px;background:linear-gradient(160deg,#3a1520,#1e0b12);border-color:var(--crimson)}
}

/* ---------- shared type ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut);position:relative}
.kick{display:flex;align-items:center;gap:12px;font:600 13px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--crimson-text);margin:0 0 18px}
.kick::before{content:"";width:28px;height:2px;background:var(--crimson)}
.h{font:400 clamp(52px,13.5vw,132px)/.9 var(--display);text-transform:uppercase;letter-spacing:-.005em;margin:0}
.h em{font-style:normal;color:var(--crimson)}
.aside{font:italic 400 clamp(21px,2.4vw,30px)/1.35 var(--serif);color:var(--ink);margin:0}
.lede{font-size:clamp(17px,1.4vw,19px);color:var(--dim);max-width:58ch;margin:0}
.lede + .lede{margin-top:14px}
.lede b{color:var(--ink);font-weight:600}

/* buttons */
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;
  font:600 15px/1.25 var(--sans);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border:1.5px solid var(--ink);color:var(--ink);
  background:transparent;transition:background .2s,color .2s,border-color .2s;cursor:pointer}
.btn:hover{background:var(--ink);color:var(--bg)}
.btn.red{background:var(--crimson);border-color:var(--crimson);color:#fff}
.btn.red:hover{background:#d81f39;border-color:#d81f39;color:#fff}
.btn .arr{font-size:18px;line-height:0}
.btn.off{border-style:dashed;border-color:rgba(240,236,228,.4);color:var(--dim);cursor:default}
.btn.off:hover{background:transparent;color:var(--dim)}

/* poster section */
.sec{position:relative;padding:clamp(56px,8vw,120px) 0;border-top:1px solid var(--line)}
@media (max-width:820px){
  .sec{padding:38px 0} .h{font-size:clamp(46px,13vw,132px)} .kick{margin-bottom:14px}
  .p-index .more-link{display:none}
  .facts,.watch-grid,.strip,.notebook,.connect-grid{margin-top:22px}
  .connect-grid{gap:22px!important}
}
.num{position:absolute;top:clamp(40px,9vw,120px);right:var(--gut);font:400 clamp(96px,22vw,300px)/.8 var(--display);
  color:transparent;-webkit-text-stroke:1.5px rgba(240,236,228,.10);pointer-events:none;user-select:none;z-index:0}
.sec .wrap{z-index:1}

/* the loop ring motif */
.ring{position:absolute;pointer-events:none;z-index:0}
.ring svg{width:100%;height:100%;overflow:visible}
.ring .spin{transform-origin:50% 50%;animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* reveal: visible by default, hidden only once JS confirms it can reveal */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  .ring .spin,.hero-tag{animation:none!important}
  *{transition-duration:.01ms!important}
}

/* inner-page head (Music / Story / Lab / Riders share this) */
.page-head{position:relative;padding:calc(var(--banner-h) + var(--barh) + clamp(48px,8vw,120px)) 0 clamp(44px,6vw,80px);overflow:hidden;
  background:radial-gradient(ellipse 60% 80% at 82% 30%,rgba(192,24,47,.16),transparent 70%)}
.page-head .ring{width:min(110vw,720px);aspect-ratio:1;right:max(-36vw,-260px);top:55%;transform:translateY(-50%)}
.page-head .h{font-size:clamp(68px,17vw,210px);line-height:.86}
@media (min-width:1200px){.page-head .h{font-size:clamp(68px,10vw,150px)}}
.page-head .aside{margin-top:22px;max-width:34ch}
.page-head .lede{margin-top:14px;max-width:54ch}
@media (max-width:820px){ .page-head .ring{top:34%;opacity:.5} }

/* closing band shared by inner pages */
.outro{padding:clamp(56px,8vw,110px) 0;border-top:1px solid var(--line)}
.outro .wrap{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}
.outro .h{font-size:clamp(44px,8vw,96px)}

/* footer */
.foot{border-top:1px solid var(--line);padding:36px 0 44px}
.foot .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.foot img{width:44px;height:44px;border-radius:50%}
.foot .sig{font:italic 400 22px/1.2 var(--serif);margin:0 auto 0 0}
/* links pad 10px each side for 44px targets; the row is pulled out by 10px so text still lines up with the gutter, the rule is drawn inset to match */
.foot nav{display:flex;flex-wrap:wrap;gap:0 4px;width:calc(100% + 20px);margin:0 -10px;order:3;padding-top:10px;background:linear-gradient(var(--line),var(--line)) 10px 0/calc(100% - 20px) 1px no-repeat}
.foot nav a{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 10px;color:var(--dim);font-size:15px;text-decoration:none}
.foot nav a:hover{color:var(--ink)}
.foot small{color:var(--dim);font-size:14px}

/* =================================================================== HOME */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:calc(var(--banner-h) + var(--barh) + 24px) var(--gut) 36px;overflow:hidden;isolation:isolate}
.hero .sky,.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3}
.hero .sky{background:#06060b url("https://towardsnight.com/images/TN%20Night%20Sky%20Background%20copy.jpg") center/cover no-repeat}
.hero video{opacity:0;transition:opacity 1.2s}
.hero video.on{opacity:1}
.hero::after{content:"";position:absolute;inset:0;z-index:-2;
  background:radial-gradient(ellipse 70% 55% at 50% 42%,rgba(192,24,47,.20),transparent 70%),
    linear-gradient(180deg,rgba(6,6,11,.55) 0%,rgba(6,6,11,.25) 40%,rgba(6,6,11,.85) 85%,#06060b 100%)}
.hero-mark{position:relative;display:grid;place-items:center;width:min(80vw,540px,46svh);margin-bottom:clamp(8px,2.5vh,28px)}
.hero .ring{width:118%;aspect-ratio:1;left:50%;top:50%;transform:translate(-50%,-50%);z-index:-1}
.hero-tag{width:100%;height:auto;filter:drop-shadow(0 10px 40px rgba(0,0,0,.6));animation:land 1.1s cubic-bezier(.2,.8,.2,1) both}
@keyframes land{from{opacity:0;transform:scale(1.06) rotate(-2deg)}to{opacity:1;transform:none}}
.hero .aside{margin-top:clamp(4px,1.5vw,16px);font-size:clamp(24px,3.2vw,38px)}
.hero .roles{margin:14px auto 0;max-width:44ch;font-size:16px;line-height:1.55;color:var(--dim);letter-spacing:.01em}
.hero .btns{justify-content:center;margin-top:26px}
.latest{display:inline-flex;align-items:center;gap:12px;margin-top:20px;min-height:44px;padding:6px 18px 6px 6px;border-radius:999px;
  border:1px solid var(--line);background:rgba(6,6,11,.5);text-decoration:none;font-size:16px;color:var(--ink)}
.latest b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--crimson);color:#fff;font-size:12px}
.latest span{color:var(--dim)}
.status{position:absolute;left:var(--gut);bottom:22px;font:600 12px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--dim);text-align:left;margin:0}
.status i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--crimson);margin-right:10px;vertical-align:1px;box-shadow:0 0 0 4px var(--glow)}
@media (max-width:820px){
  .status{display:none}
  .hero{min-height:calc(100svh - var(--tabpad));padding-top:calc(var(--banner-h) + var(--barh) + 40px);padding-bottom:24px}
  .hero-mark{width:min(66vw,420px,34svh)}
  .hero .ring{width:112%}
  .hero .btns{margin-top:20px;width:100%}
  .hero .btns .btn{flex:1 1 140px;min-height:50px}
  .latest{margin-top:14px}
  .hero::after{background:radial-gradient(ellipse 70% 55% at 50% 42%,rgba(192,24,47,.18),transparent 70%),
    linear-gradient(180deg,rgba(6,6,11,.6) 0%,rgba(6,6,11,.5) 35%,rgba(6,6,11,.86) 56%,rgba(6,6,11,.92) 80%,#06060b 100%)}
  .hero .roles{color:var(--ink);text-shadow:0 1px 2px #000,0 0 14px rgba(0,0,0,.95)}
  .hero .aside{text-shadow:0 2px 16px rgba(0,0,0,.9)}
}

.who .aside{margin-top:22px;max-width:30ch}
.who .lede{margin-top:16px}
.facts{list-style:none;margin:clamp(30px,5vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.facts li{padding:22px 24px 0 0}
.facts li+li{padding-left:24px;border-left:1px solid var(--line)}
.facts strong{display:block;font:400 clamp(30px,3.4vw,46px)/1 var(--display);text-transform:uppercase;color:var(--ink)}
.facts strong em{font-style:normal;color:var(--crimson-text)}
.facts span{display:block;margin-top:8px;color:var(--dim);font-size:16px;line-height:1.5}
.more-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:22px;font:600 15px/1.25 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--crimson-text);text-decoration:none;transition:color .2s}
.more-link:hover{text-decoration:underline;text-underline-offset:4px}
.more-link::after{content:""}
@media (max-width:699px){
  .facts{grid-template-columns:1fr}
  .facts li,.facts li+li{padding:14px 0;border-left:0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:baseline}
  .facts strong{font-size:28px}.facts span{margin:0}
}

.watch-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(28px,4vw,64px);align-items:end;margin-top:clamp(28px,4vw,52px)}
.screen{position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#000;box-shadow:0 30px 80px -30px var(--glow),0 0 0 1px var(--line)}
.screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt{position:absolute;inset:0;width:100%;border:0;padding:0;cursor:pointer;color:#fff;font:inherit;
  background:linear-gradient(180deg,rgba(6,6,11,.15),rgba(6,6,11,.75)),url("https://towardsnight.com/tn-site/media/og.jpg") center/cover}
.yt .play{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:var(--crimson);
  display:grid;place-items:center;box-shadow:0 0 0 10px rgba(192,24,47,.25);transition:transform .2s}
.yt:hover .play{transform:scale(1.07)}
.yt .play::after{content:"";border-left:24px solid #fff;border-top:15px solid transparent;border-bottom:15px solid transparent;margin-left:6px}
.yt .cap{position:absolute;left:16px;top:14px;right:16px;text-align:left;font:600 13px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.cats{margin:16px 0 0;color:var(--dim);font-size:16px;line-height:1.7}
.cats b{color:var(--crimson-text);font-weight:400;margin:0 6px}
.live h3{font:400 clamp(34px,3.6vw,52px)/.95 var(--display);text-transform:uppercase;margin:0 0 14px}
.live h3 .dot{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--crimson);margin-right:12px;vertical-align:.2em;box-shadow:0 0 0 5px var(--glow)}
.live p{margin:0 0 22px;color:var(--dim)}
.live .btns{flex-direction:column;align-items:stretch}
@media (max-width:820px){ .watch-grid{grid-template-columns:1fr} .live .btns{flex-direction:row} .live .btn{flex:1 1 150px} }

/* moments: 4 photos, the stream shot shown whole (uncropped, natural ratio) */
.strip{display:grid;grid-template-columns:1.3fr 1fr 1fr .78fr;gap:clamp(12px,1.6vw,22px);margin-top:clamp(28px,4vw,52px);align-items:start}
.strip figure{margin:0}
.strip img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:4px;filter:saturate(.92) contrast(1.04)}
.strip .full img{aspect-ratio:auto;object-fit:contain;height:auto}
.strip figure:nth-child(2){margin-top:clamp(40px,6vw,96px)}
.strip figure:nth-child(3){margin-top:clamp(12px,2vw,30px)}
.strip figcaption{margin-top:10px;font:italic 400 18px/1.3 var(--serif);color:var(--dim)}
.strip figcaption b{font:600 12px/1 var(--sans);letter-spacing:.18em;color:var(--crimson-text);margin-right:8px;font-style:normal}
@media (max-width:699px){
  .strip{grid-template-columns:1fr 1fr;grid-template-areas:"a a" "d b" "d c";align-items:start}
  .strip figure:nth-child(1){grid-area:a}
  .strip figure:nth-child(2){grid-area:b;margin-top:0}
  .strip figure:nth-child(3){grid-area:c;margin-top:0}
  .strip figure:nth-child(4){grid-area:d}
  .strip figure:first-child img{aspect-ratio:5/4;object-position:50% 30%}
  .strip figure:nth-child(2) img,.strip figure:nth-child(3) img{aspect-ratio:1}
  .strip figcaption{font-size:16px}
}

.music-teaser{background:radial-gradient(ellipse 60% 70% at 85% 60%,rgba(192,24,47,.14),transparent 70%),var(--bg)}
.music-teaser .aside{margin-top:22px}
.music-teaser .lede{margin-top:14px}
.notebook{margin-top:clamp(30px,4.5vw,56px)}
.notebook .label{font:600 13px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin:0 0 14px}
.notebook ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 0}
.notebook li{font:400 clamp(30px,5.4vw,72px)/1.08 var(--display);text-transform:uppercase;color:transparent;-webkit-text-stroke:1.2px var(--ink)}
.notebook li:not(:last-child)::after{content:"/";-webkit-text-stroke:0;color:var(--crimson);margin:0 .32em}
.notebook .note{margin:18px 0 0;font-size:16px;color:var(--dim)}

.connect-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(20px,3vw,40px);margin-top:clamp(28px,4vw,52px)}
.blk{border-top:2px solid var(--ink);padding-top:18px}
.blk.book{border-color:var(--crimson)}
.blk h3{font:400 30px/1 var(--display);text-transform:uppercase;margin:0 0 10px;letter-spacing:.01em}
.blk p{margin:0 0 16px;color:var(--dim);font-size:16px}
.blk .btn{width:100%;text-transform:none;letter-spacing:.01em;font-size:16px}
.socials{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.socials a{display:flex;justify-content:space-between;align-items:center;min-height:44px;border-bottom:1px solid var(--line);text-decoration:none;font-weight:500}
.socials a::after{content:"\2197";color:var(--crimson-text);font-size:14px}
.socials a:hover{color:var(--crimson-text)}
.socials .discord{grid-column:1/-1;padding:10px 0 0;color:var(--dim);font-size:16px}
.socials .discord b{color:var(--ink);font-weight:500}
.support{list-style:none;margin:0 0 14px;padding:0}
.support a{display:flex;justify-content:space-between;align-items:center;min-height:48px;border-bottom:1px solid var(--line);text-decoration:none;font-weight:500}
.support a span{color:var(--dim);font-weight:400;font-size:15px}
.support a:hover{color:var(--crimson-text)}
.free{font:italic 400 17px/1.45 var(--serif)!important;color:var(--ink)!important;margin:0!important}
@media (max-width:820px){ .connect-grid{grid-template-columns:1fr;gap:30px} }

/* =================================================================== MUSIC */
.pillars{list-style:none;margin:clamp(28px,4vw,52px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.pillars li{border-top:2px solid var(--ink);padding-top:18px}
.pillars li:first-child{border-color:var(--crimson)}
.pillars b{display:block;font:500 13px/1 var(--sans);letter-spacing:.2em;color:var(--crimson-text);margin-bottom:12px}
.pillars h3{font:400 clamp(32px,3.4vw,44px)/1 var(--display);text-transform:uppercase;margin:0 0 10px}
.pillars p{margin:0;color:var(--dim);font-size:17px}
.roots{margin:clamp(30px,4vw,48px) 0 0;color:var(--dim);font-size:17px;max-width:62ch}
.roots b{color:var(--ink);font-weight:600}
.listen{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,24px);margin-top:clamp(28px,4vw,48px)}
.listen a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;min-height:96px;padding:20px 24px;border-radius:10px;
  background:var(--card);border:1px solid var(--line);text-decoration:none;transition:border-color .2s,transform .2s}
.listen a:hover{border-color:var(--crimson);transform:translateY(-2px)}
.listen svg{width:40px;height:40px;color:var(--crimson-text)}
.listen strong{display:block;font:400 30px/1 var(--display);text-transform:uppercase}
.listen span{display:block;margin-top:6px;color:var(--dim);font-size:16px;line-height:1.4}
.listen i{font-style:normal;color:var(--crimson-text);font-size:22px}
@media (max-width:820px){ .pillars{grid-template-columns:1fr;gap:26px} .listen{grid-template-columns:1fr} }

/* =================================================================== STORY */
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:clamp(10px,14vw,170px);top:8px;bottom:8px;width:2px;background:linear-gradient(var(--crimson),rgba(192,24,47,.15))}
.timeline > li{position:relative;display:grid;grid-template-columns:clamp(10px,14vw,170px) 1fr;gap:0 clamp(26px,4vw,56px);padding:clamp(30px,4.5vw,56px) 0;border-bottom:1px solid var(--line)}
.timeline > li:last-child{border-bottom:0}
.timeline > li::before{content:"";position:absolute;left:clamp(10px,14vw,170px);top:clamp(38px,5vw,64px);width:16px;height:16px;margin-left:-7px;border-radius:50%;background:var(--bg);border:3px solid var(--crimson);box-shadow:0 0 0 5px var(--glow)}
.timeline .when{font:600 13px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--crimson-text);padding-top:6px;text-align:right;padding-right:20px}
.timeline .body{display:grid;grid-template-columns:1fr minmax(0,300px);gap:clamp(18px,3vw,44px);align-items:start}
.timeline h2{font:400 clamp(36px,5vw,68px)/.95 var(--display);text-transform:uppercase;margin:0 0 14px}
.timeline p{margin:0;color:var(--dim);max-width:56ch}
.timeline figure{margin:0}
.timeline figure img{width:100%;border-radius:4px}
.timeline figcaption{margin-top:8px;font:italic 400 16px/1.3 var(--serif);color:var(--dim)}
.timeline .big{font:400 clamp(64px,10vw,140px)/.85 var(--display);color:transparent;-webkit-text-stroke:1.5px var(--ink);margin:0 0 10px;display:block}
.timeline .big em{font-style:normal;color:var(--crimson);-webkit-text-stroke:0}
.pull{padding:clamp(56px,8vw,110px) 0;border-top:1px solid var(--line);background:radial-gradient(ellipse 60% 80% at 15% 50%,rgba(192,24,47,.12),transparent 70%)}
.pull blockquote{margin:0;font:italic 400 clamp(30px,4.6vw,60px)/1.18 var(--serif);max-width:22ch}
.pull blockquote em{color:var(--crimson-text)}
.pull p{margin:22px 0 0;color:var(--dim)}
@media (max-width:820px){
  .timeline::before{left:7px}
  .timeline > li{grid-template-columns:1fr;padding-left:34px}
  .timeline > li::before{left:7px;top:clamp(34px,5vw,64px)}
  .timeline .when{text-align:left;padding:0 0 10px}
  .timeline .body{grid-template-columns:1fr}
  .timeline figure{max-width:340px}
}

/* =================================================================== LAB (C's workbench, A's palette) */
.pegboard{padding:clamp(36px,5vw,64px) 0 clamp(48px,6vw,80px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:radial-gradient(circle at 14px 14px,#000 0 3px,transparent 3.5px) 0 0/28px 28px,linear-gradient(#16131f,#100e17)}
.pegboard .hint{margin:0 0 24px;color:var(--dim);font-size:16px}
.tags{display:grid;gap:26px;list-style:none;margin:0;padding:0}
.tags > li{position:relative}
.tags > li:nth-child(odd){transform:rotate(-.8deg)}
.tags > li:nth-child(even){transform:rotate(.7deg)}
.tags > li:nth-child(3n){transform:none}
.tagcard{position:relative;background:linear-gradient(180deg,#1d1a27,#171420);color:var(--ink);border-radius:6px 22px 22px 6px;
  border:1px solid rgba(240,236,228,.12);border-left:10px solid var(--crimson);box-shadow:0 18px 34px rgba(0,0,0,.6)}
.tagcard::before{content:"";position:absolute;right:18px;top:20px;width:16px;height:16px;border-radius:50%;background:#000;box-shadow:0 0 0 4px rgba(240,236,228,.22)}
.tagcard::after{content:"";position:absolute;right:25px;top:-26px;width:2px;height:48px;background:linear-gradient(rgba(240,236,228,0),rgba(240,236,228,.35));transform:rotate(-8deg);transform-origin:bottom}
.tagcard summary{list-style:none;cursor:pointer;display:grid;gap:8px;padding:18px 54px 18px 20px;min-height:96px}
.tagcard summary::-webkit-details-marker{display:none}
.tagcard .no{font:500 13px/1 var(--sans);color:var(--dim);letter-spacing:.16em;text-transform:uppercase}
.tagcard h2{margin:0;font:400 clamp(32px,7vw,42px)/1 var(--display);text-transform:uppercase}
.tagcard .what{font:italic 400 19px/1.35 var(--serif);color:var(--ink);margin:0}
.tagcard .more{display:inline-flex;align-items:center;gap:8px;font:600 15px/1 var(--sans);color:var(--crimson-text);margin-top:4px;min-height:28px}
.tagcard .more::after{content:"+";font:400 24px/1 var(--display);transition:transform .2s}
.tagcard[open] .more::after{transform:rotate(45deg)}
.tagcard[open] .more span::after{content:" (close)"}
.tagcard summary:hover h2{color:var(--crimson-text)}
.tagcard .inside{margin:0 20px;border-top:1px dashed rgba(240,236,228,.25);padding:16px 0 22px}
.tagcard .inside p{margin:0 0 16px;color:var(--dim)}
.tagcard .inside .btn{min-height:48px;padding:0 20px;font-size:14px}
.tagcard.dev{border-left-color:#6b6478}
.tagcard.beta{border-left-color:#e8a33c}
.tagcard.play{border-left-color:var(--ink)}
.stamp{justify-self:start;display:inline-block;margin-top:4px;font:400 15px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;
  padding:7px 10px 6px;border:3px double currentColor;border-radius:4px;transform:rotate(-5deg);
  color:#ffd9de;background:rgba(192,24,47,.28)}
.stamp.dev{color:#e2dcec;background:rgba(240,236,228,.08)}
.stamp.beta{color:#ffd99a;background:rgba(232,163,60,.14)}
.stamp.play{color:#fff;background:rgba(240,236,228,.12)}
@media (min-width:821px){ .tags{grid-template-columns:repeat(3,1fr);align-items:start;gap:34px} }

/* =================================================================== RIDERS */
.rider-links{list-style:none;margin:clamp(28px,4vw,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(14px,2vw,22px)}
.rider-links a{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;align-items:start;min-height:120px;padding:22px 22px 22px 20px;border-radius:10px;
  background:var(--card);border:1px solid var(--line);border-left:4px solid var(--crimson);text-decoration:none;position:relative;transition:border-color .2s,transform .2s}
.rider-links a:hover{border-color:var(--crimson);transform:translateY(-2px)}
.rider-links a::after{content:"\2197";position:absolute;right:18px;top:18px;color:var(--crimson-text)}
.rider-links b{grid-row:1/3;font:400 34px/1 var(--display);color:transparent;-webkit-text-stroke:1.2px rgba(240,236,228,.45)}
.rider-links strong{font:400 28px/1 var(--display);text-transform:uppercase;padding-right:24px}
.rider-links span{color:var(--dim);font-size:16px;line-height:1.45}
.rider-3{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:10px;max-width:62ch}
.rider-3 li{display:flex;gap:14px;font-size:clamp(18px,1.6vw,21px);color:var(--ink)}
.rider-3 li::before{content:"";flex:0 0 10px;height:10px;margin-top:.55em;border-radius:50%;background:var(--crimson);box-shadow:0 0 0 4px var(--glow)}
.rider-cta{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);margin-top:clamp(28px,4vw,48px)}
@media (max-width:820px){ .rider-cta{grid-template-columns:1fr;gap:30px} }

/* booking live: the old three-column connect grid, the 7-slot tab bar */
.booking-live .connect-grid{grid-template-columns:1.1fr 1fr 1fr}
@media (max-width:820px){ .booking-live .connect-grid{grid-template-columns:1fr} .booking-live .tabbar ul{grid-auto-columns:68px} .booking-live .tabbar .raise a{font-size:11px} }

/* shared extras */
.btn .ico{width:20px;height:20px;flex:0 0 auto}
.btn .tri{font-size:11px}
.more-link.show{display:inline-flex!important}
.facts span a{color:var(--crimson-text);font-weight:600;text-underline-offset:3px}
.status a{color:var(--ink)}

/* ---------- home: 2.0 teaser ---------- */
.two{background:radial-gradient(ellipse 55% 75% at 78% 50%,rgba(180,140,255,.10),transparent 70%),radial-gradient(ellipse 40% 60% at 20% 80%,rgba(192,24,47,.10),transparent 70%),var(--bg)}
.two-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,5vw,80px);align-items:center}
.two .aside{margin-top:20px}
.two .lede{margin-top:14px;color:var(--ink)}
.two .btns{margin-top:24px}
.two-mark{display:grid;justify-items:center;gap:12px;text-decoration:none;color:var(--dim)}
.two-mark svg{width:min(100%,400px);height:auto;overflow:visible}
.two-mark text{font:400 54px var(--display);fill:var(--ink);letter-spacing:.02em}
.two-mark .two-lanes{font:600 12px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;text-align:center}
.two-mark:hover text{fill:var(--crimson-text)}
.spin-slow{transform-origin:100px 100px;animation:spin 90s linear infinite}
.arc{fill:none;stroke-width:9;stroke-linecap:round}
.arc.mind{stroke:#ff5a52}.arc.heart{stroke:#f2c14e}.arc.hands{stroke:#5b9dff}.arc.body{stroke:#7ed69b}.arc.feet{stroke:#ff9a4d}.arc.full{stroke:#b48cff}
@media (max-width:820px){ .two-grid{grid-template-columns:1fr} .two-mark{order:-1;justify-items:start} .two-mark svg{width:150px} .two-mark .two-lanes{text-align:left} }

/* ---------- home: Twitch facade + latest row ---------- */
.tw-facade{position:absolute;inset:0;width:100%;border:0;padding:0;cursor:pointer;color:#fff;font:inherit;
  background:linear-gradient(180deg,rgba(6,6,11,.2),rgba(6,6,11,.8)),url("https://towardsnight.com/tn-site/media/tn-ig-rig.jpg") center 40%/cover}
.tw-facade .play,.yt .play{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:var(--crimson);
  display:grid;place-items:center;box-shadow:0 0 0 10px rgba(192,24,47,.25);transition:transform .2s}
.tw-facade:hover .play{transform:scale(1.07)}
.tw-facade .play::after{content:"";border-left:24px solid #fff;border-top:15px solid transparent;border-bottom:15px solid transparent;margin-left:6px}
.tw-facade .cap{position:absolute;left:16px;bottom:14px;right:16px;display:flex;align-items:center;gap:8px;text-align:left;font:600 13px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.tw-facade .cap svg{width:20px;height:20px;flex:0 0 auto}
.tw-fallback{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;padding:20px;text-align:center;
  background:linear-gradient(180deg,rgba(6,6,11,.75),rgba(6,6,11,.92)),url("https://towardsnight.com/tn-site/media/tn-ig-rig.jpg") center/cover}
.tw-fallback p{margin:0;color:var(--ink);font-size:16px}
.tw-alt{margin:12px 0 0;color:var(--dim);font-size:15px}
.tw-alt a{color:var(--ink);font-weight:600;display:inline-flex;align-items:center;min-height:44px;text-underline-offset:3px}
.live p b{color:var(--ink);font-weight:600;display:block;margin-bottom:6px}
.latest-row{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(20px,4vw,56px);align-items:center;margin-top:clamp(36px,5vw,72px);padding-top:clamp(24px,3vw,40px);border-top:1px solid var(--line)}
.latest-row h3{font:400 clamp(28px,3vw,40px)/1 var(--display);text-transform:uppercase;margin:0}
.latest-row .cats{margin-top:12px}
.latest-row .more-link{margin-top:8px}
@media (max-width:820px){
  .latest-row{grid-template-columns:1fr;margin-top:30px;padding-top:24px;gap:14px}
  .latest-row .screen{order:2}
  .latest-row .cats{font-size:15px;line-height:1.55;margin-top:8px}
  .latest-row .more-link{display:none!important}
  .tw-facade .play,.yt .play{width:68px;height:68px;margin:-34px 0 0 -34px}
}

/* ---------- home: moments as one swipe row on phones (keeps the page short) ---------- */
@media (max-width:699px){
  .strip{display:flex;grid-template-areas:none;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut));padding:0 var(--gut) 6px;scrollbar-width:none}
  .strip::-webkit-scrollbar{display:none}
  .strip figure{flex:0 0 auto;scroll-snap-align:start;margin:0!important}
  .strip img,.strip figure:first-child img,.strip figure:nth-child(2) img,.strip figure:nth-child(3) img{height:300px;width:auto;aspect-ratio:auto;max-width:none}
  .strip figure:not(.full) img{width:250px;object-fit:cover}
  .strip .full img{height:300px;width:169px;object-fit:contain}
  .strip figcaption{font-size:16px}
}

/* =================================================================== 2.0 PAGE */
.two-head{background:radial-gradient(ellipse 60% 80% at 82% 30%,rgba(180,140,255,.14),transparent 70%),radial-gradient(ellipse 50% 60% at 10% 90%,rgba(192,24,47,.14),transparent 70%)}
.idea{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(24px,5vw,80px);align-items:start}
.idea-txt .lede{color:var(--ink);font-size:clamp(18px,1.5vw,21px);max-width:56ch}
.idea-txt .lede+.lede{margin-top:16px}
.idea-txt .lede b{color:var(--crimson-text)}
.idea-txt .aside{margin-top:28px;padding-left:20px;border-left:3px solid var(--crimson);max-width:30ch}
@media (max-width:820px){ .idea{grid-template-columns:1fr;gap:20px} }

.lanes-lede{margin-top:18px}
.lanes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);align-items:center;margin-top:clamp(28px,4vw,52px)}
.lane-ring{position:relative;margin:0;width:min(100%,460px);justify-self:center}
.lane-ring svg{width:100%;height:auto;display:block;overflow:visible}
.lane-ring .arc{cursor:pointer;opacity:.25;transition:opacity .3s,stroke-width .3s,filter .3s}
.lanes[data-on="full"] .arc,.lanes[data-on="mind"] .arc.mind,.lanes[data-on="heart"] .arc.heart,.lanes[data-on="hands"] .arc.hands,
.lanes[data-on="body"] .arc.body,.lanes[data-on="feet"] .arc.feet{opacity:1;stroke-width:12;filter:drop-shadow(0 0 6px currentColor)}
.arc.mind{color:#ff5a52}.arc.heart{color:#f2c14e}.arc.hands{color:#5b9dff}.arc.body{color:#7ed69b}.arc.feet{color:#ff9a4d}.arc.full{color:#b48cff}
.lane-read{position:absolute;inset:26%;display:grid;place-content:center;text-align:center;gap:6px}
.lane-read b{font:400 clamp(34px,5vw,56px)/1 var(--display);text-transform:uppercase;color:#b48cff}
.lane-read span{font:italic 400 clamp(16px,1.5vw,19px)/1.3 var(--serif);color:var(--ink)}
.lane-read.mind b{color:#ff5a52}.lane-read.heart b{color:#f2c14e}.lane-read.hands b{color:#5b9dff}.lane-read.body b{color:#7ed69b}.lane-read.feet b{color:#ff9a4d}
.lane-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.lane-list button{width:100%;display:grid;grid-template-columns:96px 1fr;align-items:center;gap:14px;min-height:56px;padding:10px 16px;border-radius:10px;
  background:var(--card);border:1px solid var(--line);border-left:6px solid currentColor;color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:background .2s,border-color .2s}
.lane-list b{font:400 24px/1 var(--display);text-transform:uppercase;letter-spacing:.03em}
.lane-list span{color:var(--dim);font-size:16px;line-height:1.4}
.lane-list button.mind{color:#ff5a52}.lane-list button.heart{color:#f2c14e}.lane-list button.hands{color:#5b9dff}.lane-list button.body{color:#7ed69b}.lane-list button.feet{color:#ff9a4d}.lane-list button.full{color:#b48cff}
.lane-list button:hover,.lane-list button[aria-pressed="true"]{background:#1d1a29;border-color:currentColor}
.lane-list button[aria-pressed="true"] span{color:var(--ink)}
.lane-cap{margin:22px 0 0;font:italic 400 18px/1.4 var(--serif);color:var(--dim)}
@media (max-width:820px){ .lanes{grid-template-columns:1fr} .lane-ring{width:min(100%,330px)} .lane-list button{grid-template-columns:78px 1fr;padding:8px 14px} .lane-list b{font-size:22px} }

.engine{list-style:none;margin:clamp(28px,4vw,52px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,40px);counter-reset:e}
.engine li{position:relative;border-top:2px solid var(--ink);padding-top:18px}
.engine li:nth-child(3){border-color:var(--crimson)}
.engine li:not(:last-child)::after{content:"\2192";position:absolute;right:-6px;top:-18px;font:400 28px/1 var(--display);color:var(--crimson-text)}
.engine b{display:block;font:500 13px/1 var(--sans);letter-spacing:.2em;color:var(--crimson-text);margin-bottom:12px}
.engine h3{font:400 clamp(36px,4vw,56px)/1 var(--display);text-transform:uppercase;margin:0 0 10px}
.engine p{margin:0;color:var(--dim)}
.engine em{font-style:italic;font-family:var(--serif);color:var(--ink)}
@media (max-width:820px){ .engine{grid-template-columns:1fr;gap:24px} .engine li:not(:last-child)::after{content:"\2193";right:0;top:auto;bottom:-24px} }

.streams-lede{margin-top:18px}
.stream-menu{list-style:none;margin:clamp(28px,4vw,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px)}
.stream-menu li{padding:22px;border-radius:10px;background:var(--card);border:1px solid var(--line)}
.stream-menu li:first-child{border-color:rgba(192,24,47,.55);background:linear-gradient(160deg,#21121a,var(--card))}
.stream-menu h3{font:400 30px/1 var(--display);text-transform:uppercase;margin:0 0 10px}
.stream-menu p{margin:0;color:var(--dim);font-size:16px}
@media (max-width:820px){ .stream-menu{grid-template-columns:1fr} }

.rule{padding:clamp(64px,9vw,130px) 0;border-top:1px solid var(--line);background:radial-gradient(ellipse 60% 80% at 50% 50%,rgba(192,24,47,.18),transparent 70%)}
.rule h2{font:400 clamp(44px,7.5vw,104px)/.95 var(--display);text-transform:uppercase;margin:0;max-width:16ch}
.rule h2 em{font-style:normal;color:var(--crimson)}
.rule p:last-child{margin:24px 0 0;max-width:56ch;color:var(--ink);font-size:clamp(17px,1.4vw,20px)}

.status-box{display:grid;grid-template-columns:1fr 1fr;margin-top:clamp(28px,4vw,48px);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.status-box > div{padding:clamp(20px,3vw,36px)}
.status-box .soon{background:var(--bg2);border-left:1px dashed rgba(240,236,228,.25)}
.status-box h3{display:flex;align-items:center;gap:12px;font:400 30px/1 var(--display);text-transform:uppercase;margin:0 0 12px}
.status-box h3 i{width:12px;height:12px;border-radius:50%;background:#7ed69b;box-shadow:0 0 0 4px rgba(126,214,155,.2)}
.status-box .soon h3 i{background:transparent;border:2px dashed #f2c14e;box-shadow:none}
.status-box ul{list-style:none;margin:0;padding:0}
.status-box li{border-bottom:1px solid var(--line);min-height:48px;display:flex;align-items:center;color:var(--dim)}
.status-box li a{flex:1;display:flex;align-items:center;justify-content:space-between;min-height:48px;color:var(--ink);text-decoration:none;font-weight:500}
.status-box li a::after{content:"\2192";color:var(--crimson-text)}
.status-box li a:hover{color:var(--crimson-text)}
.status-box .soon p{margin:16px 0 0;font:italic 400 17px/1.4 var(--serif);color:var(--dim)}
@media (max-width:820px){ .status-box{grid-template-columns:1fr} .status-box .soon{border-left:0;border-top:1px dashed rgba(240,236,228,.25)} }

/* =================================================================== RIDERS v2 */
.room-btns{margin-top:26px;align-items:center;gap:16px 22px}
.discord-note{margin:0;color:var(--dim);font-size:16px;max-width:40ch}
.discord-note b{color:var(--ink);font-weight:500}
.step{font:400 15px/1 var(--display);letter-spacing:.06em;color:var(--ink);background:var(--crimson);padding:4px 7px 3px;border-radius:4px}
.kick .step{margin-right:2px}
.chatspace{background:radial-gradient(ellipse 55% 70% at 80% 50%,rgba(192,24,47,.14),transparent 70%),var(--bg)}
.cs-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,80px);align-items:center}
.chatspace .lede{margin-top:18px;color:var(--ink)}
.chatspace .btns{margin-top:24px}
.cs-demo{margin:0;display:grid;gap:14px}
.cs-card{--b1:#f0566b;--b2:#b48cff;position:relative;display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:center;padding:16px 18px;border-radius:16px;
  background:linear-gradient(135deg,#2a0f1d,#150f26) padding-box,conic-gradient(from var(--a,0deg),var(--b1),var(--b2),#5b9dff,var(--b1)) border-box;border:3px solid transparent;
  box-shadow:0 20px 40px -18px rgba(192,24,47,.6);animation:cs-spin 6s linear infinite}
.cs-card.alt{--b1:#7ed69b;--b2:#f2c14e;background:linear-gradient(135deg,#0f1f1a,#14121d) padding-box,conic-gradient(from var(--a,0deg),var(--b1),var(--b2),var(--b1)) border-box;margin-left:clamp(0px,6vw,60px);opacity:.85}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes cs-spin{to{--a:360deg}}
.cs-av{width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff6,transparent 40%),linear-gradient(135deg,var(--b1),var(--b2))}
.cs-card b{display:block;font:600 15px/1.2 var(--sans);color:var(--b1);letter-spacing:.02em}
.cs-card p{margin:4px 0 0;font:500 17px/1.35 var(--sans);color:#fff}
.cs-demo figcaption{font:italic 400 16px/1.3 var(--serif);color:var(--dim)}
@media (prefers-reduced-motion:reduce){ .cs-card,.spin-slow{animation:none} }
@media (max-width:820px){ .cs-grid{grid-template-columns:1fr} }

.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,32px)}
.duo-card{position:relative;overflow:hidden;padding:clamp(24px,3vw,40px);border-radius:14px;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;align-items:flex-start}
.duo-card h2{font:400 clamp(48px,6vw,84px)/.9 var(--display);text-transform:uppercase;margin:0 0 14px}
.duo-card h2 em{font-style:normal;color:var(--crimson)}
.duo-card p:not(.kick){margin:0 0 22px;color:var(--dim);max-width:46ch}
.duo-card .btn{margin-top:auto}
.wave-card{background:linear-gradient(135deg,rgba(255,106,40,.20),transparent 45%),linear-gradient(315deg,rgba(60,140,255,.22),transparent 50%),#0f0d18;border-color:rgba(240,236,228,.2)}
.wave-card::before{content:"";position:absolute;left:-10%;right:-10%;bottom:16px;height:2px;background:linear-gradient(90deg,#ff7a3c,#fff,#5b9dff);opacity:.35;transform:rotate(-6deg);pointer-events:none}
.wave-card h2 em{color:#7fb2ff}
.wave-card p:not(.kick){color:var(--ink)}
@media (max-width:820px){ .duo{grid-template-columns:1fr} }

.more-tools{padding-top:clamp(36px,5vw,64px)}
.tool-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,2vw,20px)}
.tool-row a{display:flex;flex-direction:column;gap:4px;min-height:84px;padding:16px 18px;border-radius:10px;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--crimson);text-decoration:none;position:relative}
.tool-row a::after{content:"\2197";position:absolute;right:14px;top:14px;color:var(--crimson-text)}
.tool-row a:hover{border-color:var(--crimson)}
.tool-row strong{font:400 26px/1 var(--display);text-transform:uppercase}
.tool-row span{color:var(--dim);font-size:15px}
@media (max-width:600px){ .tool-row{grid-template-columns:1fr} .tool-row a{min-height:64px} }

/* inline text links: a 44px hit area without moving the text */
.facts span a,.status a,.lede a{display:inline-block;padding:12px 0;margin:-12px 0}

@media (max-width:820px){
  .hero .btns .btn{flex:1 1 100%;letter-spacing:.06em}
  .hero .btns .btn:not(.red){min-height:46px}
  .live .btns{flex-direction:column;align-items:stretch}
  .live .btn{flex:0 0 auto;letter-spacing:.06em}
}
@media (max-width:699px){ .strip{scroll-padding-inline:var(--gut)} }
.status a{padding:15px 0;margin:-15px 0}
@media (max-width:429px){ .booking-live .menu-btn .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .booking-live .bar{gap:10px} .brand{flex:0 0 auto} }