/* The inner pages' shared look: Live now, Go live, Studio, Notices, the error page. Needs tokens.css (and app.css for the older components).
   The home page has its own sheet (home.css); the cards and the footer here match it on purpose, so the whole site reads as one place. */

*,*::before,*::after{box-sizing:border-box}

/* ── the page: a faint violet light from above, never moving ───────────────────────────────────────────────────── */
body.gl-inner{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:radial-gradient(90% 420px at 50% -80px,rgba(157,123,255,.15),transparent 72%),radial-gradient(60% 300px at 100% 0,rgba(94,225,255,.05),transparent 70%),var(--gl-bg);background-repeat:no-repeat}
body.gl-inner>main{flex:1 0 auto;width:100%}
body.gl-inner main#app{padding:clamp(24px,5vw,56px) var(--gl-gutter) clamp(48px,8vw,96px);max-width:960px}
body.gl-inner main#app.live-list{max-width:var(--gl-max)}
body.gl-inner main#app>h1:first-child::before{content:"";display:block;width:34px;height:3px;margin-bottom:14px;border-radius:3px;background:var(--gl-spectrum)}
body.gl-inner main#app>h1{font-size:clamp(2.2rem,6vw,3.6rem)}
body.gl-inner main#app:focus{outline:none}

/* ── a page head: eyebrow, title, a line under it ──────────────────────────────────────────────────────────────── */
.gl-pagehead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--gl-3) var(--gl-5);margin:0 0 clamp(20px,4vw,36px)}
.gl-pagehead__t{min-width:0}
.gl-pagehead__e{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gl-2) var(--gl-3);margin-bottom:var(--gl-3)}
.gl-pagehead__e .gl-count{min-height:28px;padding:0 var(--gl-3);font-size:var(--gl-fs-xs)}
.gl-pagehead h1{margin:0;font:400 clamp(2.4rem,7vw,4.2rem)/1 var(--gl-font-display);letter-spacing:-.012em}
.gl-pagehead h1 em{font-style:italic;color:var(--gl-accent-hi)}
.gl-pagehead p{margin:var(--gl-3) 0 0;max-width:52ch;color:var(--gl-text-2);font-size:clamp(1rem,2vw,1.12rem)}
.gl-count{display:inline-flex;align-items:center;gap:var(--gl-2);min-height:34px;padding:0 var(--gl-4);border-radius:var(--gl-r-pill);border:1px solid var(--gl-line-2);background:rgba(255,255,255,.04);color:var(--gl-text-2);font:600 var(--gl-fs-sm)/1 var(--gl-font-ui)}
.gl-count[hidden]{display:none}
.gl-count::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gl-signal)}

/* ── Live now: cards like the home page's, a skeleton while it loads, a friendly empty page ────────────────────── */
/* the "sign in first" screens (Streaming, Studio): a plain line and a button, not a bordered box that looks like an empty field to type in */
body.gl-inner main#app .note--gate{padding:0;border:0;border-radius:0;background:none;color:var(--gl-text-2);font-size:var(--gl-fs-lg);line-height:1.5;max-width:44ch}
body.gl-inner main#app .note--gate+.btn{margin:var(--gl-5) 0 var(--gl-4)}
.lsec{margin:0 0 clamp(32px,6vw,56px)}
.lsec[hidden]{display:none}
.lsec__h{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--gl-1) var(--gl-4);margin:0 0 var(--gl-4)}
.lsec__h h2{margin:0;font:400 var(--gl-fs-2xl)/1.1 var(--gl-font-display);letter-spacing:-.005em}
.lsec__h p{margin:0;color:var(--gl-muted);font-size:var(--gl-fs-sm)}
.lgrid[hidden]{display:none}
.lgrid{list-style:none;margin:0;padding:0;display:grid;gap:var(--gl-4);grid-template-columns:minmax(0,1fr)}
/* the Live now cards: one across on a phone, two on a tablet, three on a desktop; every card the same size, so a row is never ragged */
@media (min-width:560px){.lgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.lgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.lgrid>li{display:flex;min-width:0}
.lgrid>li>.lcard,.lgrid>li>.lskel{flex:1 1 auto;width:100%;min-width:0}
.lcard{position:relative;display:block;aspect-ratio:16/11;overflow:hidden;isolation:isolate;border-radius:var(--gl-r-lg);border:1px solid var(--gl-line);background:#0b0911;color:var(--gl-text);text-decoration:none;transition:transform .45s var(--gl-ease),border-color .3s,box-shadow .45s}
.lcard:hover,.lcard:focus-visible{transform:translateY(-4px);border-color:var(--gl-line-2);box-shadow:0 26px 60px -24px var(--c1,var(--gl-accent));color:var(--gl-text)}
.lcard:focus-visible{outline:2px solid var(--gl-accent-hi);outline-offset:3px;border-radius:var(--gl-r-lg)}
.lcard__art{position:absolute;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(95% 110% at 12% 115%,color-mix(in srgb,var(--c1) 55%,transparent),transparent 62%),radial-gradient(80% 90% at 98% -10%,color-mix(in srgb,var(--c2) 42%,transparent),transparent 58%),#0b0911}
.lcard__art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,6,11,.05) 20%,rgba(7,6,11,.92) 100%)}
.lcard__art :is(.gl-spiralart,.gl-art){animation-play-state:paused;will-change:auto}
.lcard.is-in :is(.gl-spiralart,.gl-art){animation-play-state:running}
.lcard__top{position:absolute;top:14px;left:14px;display:flex;align-items:center;gap:var(--gl-2)}
.lcard__tag{padding:4px 9px;border-radius:var(--gl-r-pill);background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:700 var(--gl-fs-xs)/1 var(--gl-font-ui);letter-spacing:.06em}
.lcard__views{position:absolute;top:14px;right:14px;padding:5px 10px;border-radius:var(--gl-r-pill);background:rgba(7,6,11,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:600 var(--gl-fs-xs)/1 var(--gl-font-ui)}
.lcard__meta{position:absolute;left:0;right:0;bottom:0;padding:var(--gl-4) var(--gl-5) var(--gl-5)}
.lcard__meta h3{margin:0;font:400 clamp(1.6rem,3vw,2rem)/1 var(--gl-font-display);letter-spacing:-.01em}
.lcard__t{margin:6px 0 0;color:var(--gl-text-2);font-size:var(--gl-fs-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lcard__tags{margin:4px 0 0;color:var(--gl-muted);font-size:var(--gl-fs-xs);letter-spacing:.04em}
.lcard__go{position:absolute;right:14px;bottom:14px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--gl-accent);color:var(--gl-accent-ink);opacity:0;transform:translateY(6px) scale(.9);transition:opacity .3s,transform .4s var(--gl-ease)}
.lcard:hover .lcard__go,.lcard:focus-visible .lcard__go{opacity:1;transform:none}
.lcard__go svg{display:block;margin-left:2px}
@media (hover:none){.lcard__go{opacity:1;transform:none;width:36px;height:36px;background:rgba(255,255,255,.14);color:var(--gl-text);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}}
@media (max-width:560px){.lcard{aspect-ratio:16/9}}

.lskel{display:block;aspect-ratio:16/11;border-radius:var(--gl-r-lg);border:1px solid var(--gl-line);background:linear-gradient(100deg,#0f0c18 30%,#201a33 50%,#0f0c18 70%) 0 0/300% 100%;animation:gl-shimmer 2.4s ease-in-out infinite}
@keyframes gl-shimmer{from{background-position:100% 0}to{background-position:-100% 0}}
@media (max-width:560px){.lskel{aspect-ratio:16/9}}
@media (prefers-reduced-motion:reduce){.lskel{animation:none}}

.lempty{padding:clamp(32px,6vw,64px) var(--gl-5);text-align:center;border:1px dashed var(--gl-line-2);border-radius:var(--gl-r-lg);background:radial-gradient(70% 120% at 50% 0%,rgba(157,123,255,.1),transparent)}
.lempty[hidden]{display:none}
.lempty__h{margin:0;font:400 var(--gl-fs-3xl)/1.05 var(--gl-font-display)}
.lempty__h em{font-style:italic;color:var(--gl-accent-hi)}
.lempty p{margin:var(--gl-2) auto 0;max-width:46ch;color:var(--gl-muted)}
.lempty__a{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gl-3);margin-top:var(--gl-5)}
.lempty--slim{padding:var(--gl-5);text-align:left;display:flex;flex-wrap:wrap;align-items:center;gap:var(--gl-2) var(--gl-5);justify-content:space-between}
.lempty--slim p{margin:0;max-width:none;flex:1 1 260px}
.lempty--slim strong{color:var(--gl-text);font-weight:600}
.lerr{margin:0 0 var(--gl-5);padding:12px 16px;border-radius:var(--gl-r);border:1px solid rgba(255,125,141,.4);background:rgba(255,125,141,.08);color:var(--gl-text)}
.lerr[hidden]{display:none}
.lfoot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gl-3) var(--gl-5);margin-top:clamp(24px,5vw,48px);padding-top:var(--gl-5);border-top:1px solid var(--gl-line);color:var(--gl-muted);font-size:var(--gl-fs-sm)}
.lfoot p{margin:0;color:var(--gl-muted)}

/* ── the footer the inner pages share with the home page (assets/foot.js builds it) ────────────────────────────── */
#foot{max-width:none;margin:clamp(48px,8vw,96px) 0 0;padding:0;border-top:1px solid var(--gl-line);background:linear-gradient(180deg,transparent,rgba(157,123,255,.05));color:var(--gl-muted);font-size:var(--gl-fs-sm)}
#foot:empty{display:none}
.foot__in{max-width:var(--gl-max);margin:0 auto;padding:var(--gl-7) var(--gl-gutter) var(--gl-5);display:grid;gap:var(--gl-6)}
@media (min-width:820px){.foot__in{grid-template-columns:1.1fr 2fr;gap:var(--gl-8)}}
.foot__brand img{display:block;height:23px;width:auto}
.foot__brand p{margin:var(--gl-3) 0 0;max-width:34ch;color:var(--gl-muted)}
.foot__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gl-5)}
.foot__cols h2{margin:0 0 var(--gl-2);font:600 var(--gl-fs-xs)/1 var(--gl-font-ui);letter-spacing:var(--gl-track-caps);text-transform:uppercase;color:var(--gl-dim)}
.foot__cols a{display:block;padding:7px 0;color:var(--gl-text-2);text-decoration:none}
.foot__cols a:hover{color:var(--gl-text);text-decoration:underline;text-underline-offset:3px}
.foot__fine{max-width:var(--gl-max);margin:0 auto;padding:var(--gl-5) var(--gl-gutter) calc(var(--gl-7) + env(safe-area-inset-bottom,0px));border-top:1px solid var(--gl-line);color:var(--gl-dim);font-size:var(--gl-fs-xs);line-height:1.65}
.foot__fine p{margin:0 0 var(--gl-2);max-width:96ch}
.foot__fine a{color:var(--gl-muted)}
.foot__fine a:hover{color:var(--gl-text)}
.foot__2257 a{text-decoration-color:var(--gl-line-2)}

/* ── the error page (404.html): one calm screen with a turning spiral and a way out ────────────────────────────── */
body.gl-inner main#app.gl-lost{max-width:none;padding:var(--gl-6) var(--gl-gutter)}
.gl-lost{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(460px,calc(100svh - 230px),780px);display:flex;align-items:center;justify-content:center;padding:var(--gl-6) var(--gl-gutter);text-align:center}
.gl-lost__art{position:absolute;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(70% 60% at 50% 45%,rgba(157,123,255,.18),transparent 70%),var(--gl-bg)}
.gl-lost__art::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 55% at 50% 50%,rgba(7,6,11,.9),rgba(7,6,11,.55) 70%,rgba(7,6,11,.2))}
.gl-lost__in{display:flex;flex-direction:column;align-items:center;gap:var(--gl-4);max-width:34rem}
.gl-lost__code{margin:0;font:600 var(--gl-fs-xs)/1 var(--gl-font-ui);letter-spacing:var(--gl-track-caps);text-transform:uppercase;color:var(--gl-accent-hi)}
.gl-lost h1{margin:0;font:400 clamp(2.8rem,10vw,5.6rem)/.98 var(--gl-font-display);letter-spacing:-.015em;text-wrap:balance}
.gl-lost h1 em{font-style:italic;color:var(--gl-accent-hi)}
.gl-lost p{margin:0;color:var(--gl-text-2);font-size:var(--gl-fs-lg)}
.gl-lost__a{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gl-3);margin-top:var(--gl-3)}
.gl-lost__fine{font-size:var(--gl-fs-sm)!important;color:var(--gl-muted)!important}