/* The home page (home.js, and the footer in index.html). Needs tokens.css. */
main#app.is-home{max-width:none;margin:0;padding:0}
main#app.is-home h1:focus{outline:none}

/* ── hero: the featured stream, full bleed ───────────────────────────────── */
.hero{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:flex-end;min-height:520px;height:clamp(520px,calc(100svh - 150px),900px);background:#05040a}
.hero__aurora{z-index:0}
.hero__media{position:absolute;inset:0;z-index:1}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:screen;opacity:.8}
.hero__frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;opacity:0;transition:opacity .9s var(--gl-ease);pointer-events:none}
.hero__frame.is-on{opacity:1}
.hero__scrim{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(7,6,11,.5) 0%,rgba(7,6,11,0) 24%),linear-gradient(0deg,#07060b 0%,rgba(7,6,11,.8) 24%,rgba(7,6,11,0) 62%),linear-gradient(90deg,rgba(7,6,11,.62) 0%,rgba(7,6,11,0) 60%)}
.hero__body{position:relative;z-index:3;width:100%;max-width:var(--gl-max);margin:0 auto;padding:0 var(--gl-gutter) clamp(28px,6vw,76px);display:grid;gap:var(--gl-4);justify-items:start}
.hero__eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gl-2)}
.hero__chip{display:inline-flex;align-items:center;min-height:26px;padding:0 12px;border-radius:var(--gl-r-pill);background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--gl-text);font:600 var(--gl-fs-xs)/1 var(--gl-font-ui);letter-spacing:.04em}
.hero__chip--plain{background:none;padding:0;color:var(--gl-muted);letter-spacing:var(--gl-track-caps);text-transform:uppercase}
.hero__title{margin:0;max-width:13ch;font-size:var(--gl-fs-hero);line-height:.98;text-wrap:balance;text-shadow:0 4px 60px rgba(0,0,0,.55)}
.hero__title em{font-style:italic;color:var(--gl-accent-hi)}
.hero__sub{margin:0;max-width:54ch;color:var(--gl-text-2);font-size:clamp(1rem,2.2vw,1.2rem);line-height:1.5;text-shadow:0 1px 20px rgba(0,0,0,.6)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--gl-3);margin-top:var(--gl-2)}
.hero__cta .gl-btn{backdrop-filter:blur(6px)}
.hero__cta .gl-btn--primary{backdrop-filter:none}
.hero__next{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gl-2);margin-top:var(--gl-3)}
.hero__next[hidden]{display:none}
.hero__nextl{color:var(--gl-muted);font:600 var(--gl-fs-xs)/1 var(--gl-font-ui);letter-spacing:var(--gl-track-caps);text-transform:uppercase;margin-right:4px}
.hero__nextb{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 14px;border-radius:var(--gl-r-pill);border:1px solid var(--gl-line-2);background:rgba(7,6,11,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--gl-text);font:600 var(--gl-fs-sm)/1 var(--gl-font-ui);cursor:pointer}
.hero__nextb:hover{border-color:rgba(255,255,255,.4)}
.hero__nextb i{width:7px;height:7px;border-radius:50%;background:var(--gl-signal)}
.hero__nextb small{color:var(--gl-muted);font-size:var(--gl-fs-xs);font-weight:500}

/* ── category chips under the hero ───────────────────────────────────────── */
.catbar{max-width:var(--gl-max);margin:0 auto;padding:var(--gl-4) var(--gl-gutter) 0;display:flex;align-items:center;gap:var(--gl-4)}
.catbar[hidden]{display:none}
.catbar__l{flex:none}
.catbar__in{display:flex;flex:1 1 auto;min-width:0;gap:var(--gl-2);overflow-x:auto;scrollbar-width:none;scroll-padding-inline:4px;padding:4px;-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)}
/* a wide screen has the room to show every chip whole (none cut off at the edge); a small one keeps the row that scrolls sideways */
@media (min-width:900px){
  .catbar{align-items:flex-start}
  .catbar__l{padding-top:17px}
  .catbar__in{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none}
}
.catbar__in::-webkit-scrollbar{display:none}
.gl-chip--more{border-style:dashed}
@media (max-width:560px){.catbar__l{display:none}}

/* ── sections ────────────────────────────────────────────────────────────── */
.sec{max-width:var(--gl-max);margin:0 auto;padding:clamp(40px,7vw,88px) var(--gl-gutter) 0}
.sec[hidden]{display:none}
.sec__h{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--gl-2) var(--gl-4);margin-bottom:var(--gl-5)}
.sec__h h2{margin:0;font-size:var(--gl-fs-3xl);line-height:1}
.sec__h em{color:var(--gl-accent-hi)}
.sec__n{color:var(--gl-muted);font-size:var(--gl-fs-sm)}
.sec__more{margin-left:auto;color:var(--gl-muted);font-size:var(--gl-fs-sm);text-decoration:none;white-space:nowrap}
.sec__more:hover{color:var(--gl-text)}
.sec__more::after{content:" \2192"}

/* ── live now ────────────────────────────────────────────────────────────── */
.lgrid{list-style:none;margin:0;padding:0;display:grid;gap:var(--gl-4);grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))}
.lgrid[hidden]{display:none}
.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))}
.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,0) 28%,rgba(7,6,11,.9) 100%)}
.lcard__art :is(.gl-spiralart,.gl-art),.tile__art :is(.gl-spiralart,.gl-art),.ways__art :is(.gl-spiralart,.gl-art){animation-play-state:paused;will-change:auto}
.lcard.is-in :is(.gl-spiralart,.gl-art),.tile.is-in :is(.gl-spiralart,.gl-art),.ways .card:hover :is(.gl-spiralart,.gl-art),.ways .card:focus-visible :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-size:clamp(1.6rem,3vw,2rem);line-height:1}
.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}
.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-size:var(--gl-fs-3xl)}
.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)}

/* ── the three ways in (the old Fork, now cinematic) ─────────────────────── */
.cards.ways{max-width:var(--gl-max);margin:clamp(40px,7vw,88px) auto 0;padding:0 var(--gl-gutter);gap:var(--gl-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.ways .card{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(200px,24vw,280px);padding:var(--gl-5);border-radius:var(--gl-r-lg);background:#0b0911;border:1px solid var(--gl-line);justify-content:flex-end;cursor:pointer;color:var(--gl-text);transition:transform .45s var(--gl-ease),border-color .3s}
.ways .card:hover,.ways .card:focus-visible{transform:translateY(-4px);border-color:var(--gl-line-2)}
.ways .card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,6,11,.1) 20%,rgba(7,6,11,.9) 100%)}
.ways__art{position:absolute;inset:0;z-index:-2;overflow:hidden;background:radial-gradient(80% 90% at 20% 110%,rgba(157,123,255,.4),transparent 60%),#0b0911}
.ways .card strong{font:400 clamp(2rem,3.4vw,2.6rem)/1 var(--gl-font-display);letter-spacing:-.01em}
.ways .card p{margin:6px 0 0;color:var(--gl-text-2);font-size:var(--gl-fs-sm);max-width:30ch}
.ways .card strong::after{content:" \2192";color:var(--gl-accent-hi);font-family:var(--gl-font-ui);font-size:.6em;margin-left:4px}

/* ── clips ───────────────────────────────────────────────────────────────── */
.cgrid{list-style:none;margin:0;padding:0;display:grid;gap:var(--gl-4) var(--gl-3);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:700px){.cgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1040px){.cgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ccard__m{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--gl-r);background:#0b0911;border:1px solid var(--gl-line)}
.ccard__m img,.ccard__m video,.ccard__ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ccard__ph{background:linear-gradient(135deg,#171322,#0b0911)}
.ccard__b{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;background:transparent;cursor:pointer}
.ccard__b:focus-visible{outline:3px solid var(--gl-accent-hi);outline-offset:-3px}
.ccard__m::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);transition:box-shadow .3s}
.ccard__m:hover::after{box-shadow:inset 0 0 0 2px var(--gl-accent)}
.ccard__d{position:absolute;right:8px;bottom:8px;padding:3px 7px;border-radius:6px;background:rgba(0,0,0,.72);color:#fff;font:600 var(--gl-fs-xs)/1 var(--gl-font-ui);pointer-events:none}
.ccard__meta{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--gl-2);padding-top:10px}
.ccard__txt{min-width:0}
.ccard__txt h3{margin:0;font:600 var(--gl-fs-sm)/1.3 var(--gl-font-ui);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ccard__txt p{margin:2px 0 0;color:var(--gl-muted);font-size:var(--gl-fs-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.heart{flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--gl-line);background:transparent;color:var(--gl-muted);font-size:1rem;cursor:pointer;transition:color .2s,border-color .2s,transform .2s}
.heart:hover{color:var(--gl-text);border-color:var(--gl-line-2)}
.heart[aria-pressed="true"]{color:var(--gl-signal);border-color:rgba(255,77,109,.5);background:rgba(255,77,109,.1)}
.heart:active{transform:scale(.9)}
.gl-gate--clip{align-items:center;background:rgba(5,4,9,.9)}
.cmodal{position:relative;width:min(100%,1000px);max-height:100vh;max-height:100dvh;overflow-y:auto;padding:var(--gl-4) var(--gl-3) calc(var(--gl-4) + env(safe-area-inset-bottom,0px));animation:gl-sheet-in .35s var(--gl-ease)}
.cmodal__x{top:calc(var(--gl-4) + 8px)!important;right:calc(var(--gl-3) + 8px)!important;z-index:2}
.cmodal__v{display:block;width:100%;max-height:60vh;max-height:60dvh;border-radius:var(--gl-r-lg);background:#000;box-shadow:0 30px 100px -20px rgba(157,123,255,.4)}
.cmodal__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--gl-4);padding:var(--gl-4) var(--gl-2) 0}
.cmodal__bar h2{margin:0;font-size:var(--gl-fs-2xl)}
.cmodal__bar p{margin:4px 0 0;color:var(--gl-muted);font-size:var(--gl-fs-sm)}
.cmodal__a{display:flex;align-items:center;flex-wrap:wrap;gap:var(--gl-3)}

/* ── category tiles ──────────────────────────────────────────────────────── */
.tiles{list-style:none;margin:0;padding:0;display:grid;gap:var(--gl-3);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:700px){.tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1040px){.tiles{grid-template-columns:repeat(6,minmax(0,1fr))}}
.tile{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;width:100%;aspect-ratio:4/3;padding:var(--gl-4);border-radius:var(--gl-r);border:1px solid var(--gl-line);background:#0b0911;color:var(--gl-text);text-align:left;cursor:pointer;transition:transform .4s var(--gl-ease),border-color .3s}
.tile:hover,.tile:focus-visible{transform:translateY(-3px);border-color:var(--gl-line-2)}
.tile__art{position:absolute;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(90% 100% at 10% 120%,color-mix(in srgb,var(--c1) 50%,transparent),transparent 60%),radial-gradient(80% 90% at 100% -10%,color-mix(in srgb,var(--c2) 36%,transparent),transparent 58%),#0b0911}
.tile__art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,6,11,0) 30%,rgba(7,6,11,.85) 100%)}
.tile__n{font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1;text-transform:capitalize}
.tile__c{color:var(--gl-muted);font-size:var(--gl-fs-xs)}

/* ── "For you" (signed in) ───────────────────────────────────────────────── */
.rail.sec{border:0;background:none;border-radius:0;max-width:var(--gl-max);margin:0 auto;padding-top:clamp(40px,7vw,88px);text-align:left}
.rail.sec>*{max-width:640px}

/* ── footer ──────────────────────────────────────────────────────────────── */
#foot{max-width:none;margin:clamp(64px,10vw,120px) 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__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 stock spirals are grey on black: a violet-to-cyan multiply makes them the brand's */
.hero__media:has(.hero__video)::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(120deg,#9d7bff 10%,#6f8bff 55%,#5ee1ff 100%);mix-blend-mode:multiply}
.hero__frame{z-index:2}
/* the poster is the hero until the real player is cheap to start (home-ui.js playerHold): a link under the words and buttons, so a tap anywhere else on the hero goes where
   Watch live goes. It is no tab stop and is hidden from screen readers; it lets clicks through while the player is showing, and when there is nowhere to go */
.hero__poster{position:absolute;inset:0;z-index:2;display:block;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hero__poster:not([href]),.hero.is-playing .hero__poster{pointer-events:none;cursor:default}
.hero__body{pointer-events:none}
.hero__body :is(a,button){pointer-events:auto}
/* nobody can see the art while the hero is scrolled away, so it stops turning (the cards below do the same) */
.hero.is-away .gl-aurora::before,.hero.is-away .gl-aurora::after,.hero.is-away .gl-spiralart{animation-play-state:paused}

.lcard__art::after{background:linear-gradient(180deg,rgba(7,6,11,.05) 20%,rgba(7,6,11,.92) 100%)}
.tile__art::after{background:linear-gradient(180deg,rgba(7,6,11,.1) 20%,rgba(7,6,11,.9) 100%)}
@media (max-width:640px){
  .hero__next{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:calc(var(--gl-gutter) * -1);padding-right:var(--gl-gutter)}
  .hero__next::-webkit-scrollbar{display:none}
  .hero__nextl,.hero__nextb{flex:none}
}

@media (max-width:560px){
  .lcard{aspect-ratio:16/9}
  .tile{aspect-ratio:16/11}
  .ways .card{min-height:170px}
}

.sec,#categories,#live-now{scroll-margin-top:120px}
.hero__title.is-long{font-size:clamp(2.3rem,7.5vw,4.8rem);max-width:20ch}