/* =========================================================================
   GenXTalks — ON AIR
   The whole network on one desk that never stops broadcasting.

   THE IDEA
   Six live shows, 276 podcast episodes, a 24-hour station, a store and five
   competing teams. Previous attempts treated those as separate sections that
   happened to share a page. This treats them as one signal: a dock player
   pinned to the bottom of every page keeps audio running while you browse,
   and the team scoreboard runs through the whole site rather than sitting in
   a box near the footer.

   THE LANGUAGE
   Dark, saturated and high contrast — bold enough to be remembered, built on
   a system strict enough not to look assembled from parts.
     · ONE surface stack (page / panel / raised) and ONE border.
     · ONE radius, ONE lift on hover, ONE section header.
     · Colour is meaning, never decoration: a show identity, a team, a live
       state, a points value. Nothing is coloured because it looked plain.
     · Monospace on every number, tag and timecode — metadata reads as
       instrumentation, not styling.

   PERFORMANCE
   Nothing decorative is ever downloaded: the glow, the waveform, the rules
   and the dividers are all CSS. Below-the-fold sections opt out of layout
   with content-visibility. Two self-hosted fonts, no third-party request
   until a visitor presses play.
   ====================================================================== */

/* ---------- fonts (self-hosted; no third-party connection) ----------
   Both files carry full Latin coverage. The previous pair were subsets whose
   character maps contained no letters or digits at all, so every word on the
   site silently fell back to Georgia — worth checking with fontTools rather
   than trusting that a font "loaded".
   `format('woff2')` is deliberate: the older `woff2-variations` keyword is
   ignored by current browsers, which would drop the variable axis. */
@font-face{
  font-family:'AlfaSlab';src:url('fonts/alfa-slab-v2.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'InterVar';src:url('fonts/inter-var-v2.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}

/* =========================================================================
   Tokens
   ====================================================================== */
:root{
  /* surfaces — four steps, no more */
  --page:#08080d;
  --sunken:#101018;
  --panel:#16161f;
  --raised:#1d1d28;

  --ink:#ffffff;
  --body:#a8a8bd;
  /* Lifted from #6e6e85, which measured 3.36:1 on --raised and failed WCAG AA
     on every surface. #848497 clears 4.5:1 on page, sunken, panel and raised. */
  --muted:#848497;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.22);

  /* brand — their indigo and red, opened up for a dark ground */
  --brand:#2B3BEF;
  /* --brand as text is 2.36:1 on --raised. Fills keep the saturated brand
     colour; text uses this lifted variant, which clears 4.5:1 everywhere. */
  --brand-ink:#6E79F4;
  --brand-dk:#141C7A;
  --brand-tint:rgba(43,59,239,.14);
  --accent:#FF3B2F;
  /* #FF3B2F is fine as TEXT on a dark ground (5.63:1) but only 3.55:1 behind
     white — so every filled button and pill failed AA. Fills use this deeper
     red (4.51:1 with white); text keeps the brighter one. Same split as
     --brand / --brand-ink. */
  --accent-fill:#DF3429;
  --accent-tint:rgba(255,59,47,.13);
  --gold:#FFB020;
  --good:#19C37D;

  /* show identity — one colour per show, used everywhere that show appears */
  --ch-otr:#FF3B2F; --ch-world:#2B3BEF; --ch-garage:#FFB020;
  --ch-glass:#A855F7; --ch-int:#22D3EE; --ch-comm:#F0518B;
  --ch-short:#19C37D; --ch-pod:#38BDF8;

  /* team identity — the scoreboard palette */
  /* Scoreboard palette. --tm-3 is the lifted brand blue: the saturated
     #2B3BEF measured 2.83:1 behind the large points figures. */
  --tm-1:#FFB020; --tm-2:#FF3B2F; --tm-3:#6E79F4; --tm-4:#A855F7; --tm-5:#19C37D;

  --f-display:'AlfaSlab',Rockwell,'Roboto Slab',Georgia,serif;
  --f-sans:'InterVar',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --f-mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;

  /* fluid scale — one ramp, no per-component font sizes */
  --t-xs:11.5px;
  --t-sm:13px;
  --t-base:clamp(15.5px,.35vw + 15px,17px);
  --t-lg:clamp(17px,.6vw + 15px,20px);
  --t-h3:clamp(18px,.9vw + 15px,23px);
  --t-h2:clamp(27px,3.1vw + 16px,44px);
  --t-h1:clamp(40px,5.4vw + 16px,82px);

  --r:14px;
  --r-sm:9px;
  --bd:1px solid var(--line);
  --sh:0 1px 2px rgba(0,0,0,.4);
  --sh-lift:0 24px 60px -22px rgba(0,0,0,.95);

  --s1:8px; --s2:16px; --s3:24px; --s4:38px; --s5:58px; --s6:92px;

  --max:1280px;
  --ease:cubic-bezier(.22,.7,.28,1);
  --head-h:72px;
  --dock-h:76px;

  /* ---- bridge: the media plugin's stylesheet reads these ---------------
     One palette, two files. The plugin styles components; the theme owns
     the colours. Keeping the bridge here means the plugin never has to
     know which theme is active. */
  --g-ink:var(--ink); --g-mute:var(--body); --g-dim:var(--muted);
  --g-line:var(--line); --g-line-2:var(--line-2);
  --g-bg:var(--page); --g-bg-2:var(--sunken); --g-panel:var(--panel);
  --g-red:var(--accent); --g-max:var(--max); --g-r:var(--r); --g-r-lg:var(--r);
  --g-head-h:var(--head-h); --g-ease:var(--ease); --g-shadow:var(--sh-lift);
  --g-sans:var(--f-sans);
  --gxt-ink:var(--ink); --gxt-body:var(--body); --gxt-line:var(--line);
  --gxt-bg:var(--sunken); --gxt-white:var(--panel); --gxt-navy:var(--brand);
  --gxt-red:var(--accent); --gxt-r:var(--r); --gxt-sans:var(--f-sans);
  --gxt-shadow:var(--sh-lift); --gxt-ease:var(--ease);
  --c-brand:var(--brand-ink); --c-brand-tint:var(--brand-tint); --c-line:var(--line);
  --c-line-2:var(--line-2); --c-ink:var(--ink); --c-body:var(--body);
  --c-mute:var(--body); --c-dim:var(--muted); --c-muted:var(--muted);
  --c-card:var(--panel); --c-surface:var(--panel); --c-surface-2:var(--raised);
  --c-sunken:var(--sunken); --c-red:var(--accent); --c-radius:var(--r);
  /* NB: do not re-declare --f-display, --ease or --sh here. They are already
     defined above, and `--x: var(--x)` is circular, which makes the property
     invalid and silently drops the display face back to the body font. */
}

/* =========================================================================
   Reset
   ====================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:calc(var(--head-h) + var(--s2))}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--f-sans);
  font-size:var(--t-base);line-height:1.62;-webkit-font-smoothing:antialiased;
  overflow-x:hidden}
/* room for the dock, only once it is actually mounted */
body.has-dock{padding-bottom:var(--dock-h)}
img,svg,video,iframe{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
p a:not([class]){color:#93A2FF;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1.5px;text-decoration-color:rgba(147,162,255,.4)}
p a:not([class]):hover{text-decoration-color:currentColor}
button{font:inherit;color:inherit}
:where(button,a,input,select,textarea,summary):focus-visible{
  outline:3px solid var(--accent);outline-offset:2px;border-radius:5px}
::selection{background:var(--accent);color:#fff}

h1,h2,h3,h4{font-family:var(--f-display);font-weight:400;line-height:1;
  letter-spacing:-.018em;margin:0 0 .45em;color:var(--ink)}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);line-height:1.1}
h4{font-size:var(--t-lg);line-height:1.15}

/* Every number, tag, label and timecode. This one choice is what makes the
   metadata read as instrumentation instead of decoration. */
.mono,.tag,.metric__n,.rrow__pts,.pts,.dk__s,.dtime,.guide__time,.card__meta,
.eyebrow,.shead__go,.ticker,.team__pts,.team__rank{
  font-family:var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:.02em}

.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(16px,3vw,28px)}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent-fill);color:#fff;
  padding:12px 20px;font-weight:800;border-radius:0 0 var(--r) 0}
.skip:focus{left:0}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* Below-the-fold sections skip layout until they are near the viewport. */
.sec{padding:var(--s6) 0;content-visibility:auto;contain-intrinsic-size:auto 700px}
.sec--tight{padding:var(--s5) 0}
.sec--alt{background:var(--sunken);border-block:1px solid var(--line)}

/* =========================================================================
   Buttons
   ====================================================================== */
.btn{display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;
  font-family:var(--f-sans);font-weight:800;font-size:14.5px;line-height:1;
  padding:13px 20px;border-radius:var(--r-sm);transition:transform .15s var(--ease),
  background-color .15s var(--ease),box-shadow .15s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:17px;height:17px;flex:none}
.btn--accent{background:var(--accent-fill);color:#fff}
.btn--accent:hover{background:#ff5347}
.btn--brand{background:var(--brand);color:#fff}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn--sm{padding:9px 15px;font-size:13px}

/* =========================================================================
   Ticker — the live state of the network, above everything
   ====================================================================== */
 /* #FF3B2F under white text is 3.55:1. This deeper red clears 4.5:1 and
    still reads as the live/on-air colour. */
.ticker{background:#DF3429;color:#fff;font-size:var(--t-xs);font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;overflow:hidden}
.ticker__in{display:flex;gap:30px;align-items:center;padding:9px clamp(16px,3vw,28px);
  white-space:nowrap;overflow-x:auto;scrollbar-width:none}
.ticker__in::-webkit-scrollbar{display:none}
.ticker b{opacity:.72;margin-right:6px;font-weight:800}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none;
  box-shadow:0 0 0 0 currentColor;animation:pulse 1.9s infinite}
@keyframes pulse{
  70%{box-shadow:0 0 0 9px rgba(255,255,255,0)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}

/* =========================================================================
   Header
   ====================================================================== */
.site-head{position:sticky;top:0;z-index:60;background:rgba(8,8,13,.88);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line)}
.site-head__in{display:flex;align-items:center;gap:clamp(14px,2.4vw,32px);height:var(--head-h)}
.brand{flex:none;display:block}
.brand img{max-height:38px;width:auto}
.brand--text{font-family:var(--f-display);font-size:20px;letter-spacing:-.01em}

.nav ul{display:flex;gap:clamp(12px,1.7vw,26px);list-style:none;margin:0;padding:0}
.nav a{display:block;color:var(--body);font-weight:600;font-size:14.5px;padding:7px 0;
  border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.nav a:hover,.nav .current-menu-item > a,.nav .current_page_item > a{
  color:#fff;border-color:var(--accent)}
.nav li{position:relative}
.nav .sub-menu{display:none;position:absolute;top:100%;left:-14px;min-width:210px;
  background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-sm);
  padding:8px;box-shadow:var(--sh-lift);flex-direction:column;gap:0;z-index:70}
.nav li:hover > .sub-menu,.nav li:focus-within > .sub-menu{display:flex}
.nav .sub-menu a{padding:8px 12px;border:0;border-radius:6px;font-weight:600}
.nav .sub-menu a:hover{background:var(--raised);color:#fff}

.head-tools{margin-left:auto;display:flex;align-items:center;gap:10px}
.icon-btn{width:38px;height:38px;border-radius:50%;background:transparent;border:1px solid var(--line);
  display:grid;place-items:center;cursor:pointer;color:var(--body);position:relative;transition:.15s}
.icon-btn:hover{color:#fff;border-color:var(--line-2)}
.icon-btn svg{width:18px;height:18px}
.icon-btn__n{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;
  border-radius:9px;background:var(--accent);color:#fff;font-family:var(--f-mono);
  font-size:10px;font-weight:800;display:grid;place-items:center}

/* the visitor's team, applied client-side so the page cache stays shared */
.myteam{display:none;align-items:center;gap:9px;background:var(--panel);
  border:1px solid var(--line-2);border-radius:100px;padding:5px 14px 5px 6px;
  font-size:13px;font-weight:700;white-space:nowrap}
body.has-team .myteam{display:flex}
.myteam i{width:24px;height:24px;border-radius:50%;background:var(--team,var(--brand));flex:none}
.myteam span{font-family:var(--f-mono);color:var(--gold)}

.burger{display:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:transparent;cursor:pointer;position:relative}
.burger span:first-child,.burger::before,.burger::after{
  content:"";position:absolute;left:10px;right:10px;height:2px;background:currentColor;
  border-radius:2px;transition:.2s var(--ease)}
.burger::before{top:13px}
.burger span:first-child{top:18px}
.burger::after{top:23px}
.burger[aria-expanded=true]::before{top:18px;transform:rotate(45deg)}
.burger[aria-expanded=true] span:first-child{opacity:0}
.burger[aria-expanded=true]::after{top:18px;transform:rotate(-45deg)}

.searchbar{display:none;border-top:1px solid var(--line);background:var(--sunken);padding:16px 0}
.searchbar.open{display:block}
.searchbar form{display:flex;gap:10px;max-width:var(--max);margin:0 auto}
.searchbar input{flex:1;background:var(--panel);border:1px solid var(--line-2);color:var(--ink);
  border-radius:var(--r-sm);padding:13px 16px;font:inherit}
.searchbar input::placeholder{color:var(--muted)}

.nav-panel{display:none;background:var(--sunken);border-bottom:1px solid var(--line);padding:14px 0}
.nav-panel.open{display:block}
.nav-panel ul{list-style:none;margin:0;padding:0 clamp(16px,3vw,28px)}
.nav-panel a{display:block;padding:11px 0;font-weight:700;border-bottom:1px solid var(--line)}
.nav-panel .sub-menu a{padding-left:16px;font-weight:500;color:var(--body)}

/* =========================================================================
   Hero
   ====================================================================== */
.hero{position:relative;padding:clamp(40px,6vw,72px) 0 clamp(48px,6vw,78px);overflow:hidden}
/* the glow is painted, never downloaded */
.hero::before{content:"";position:absolute;inset:-240px -160px auto -160px;height:640px;
  pointer-events:none;
  background:radial-gradient(58% 68% at 22% 32%,rgba(43,59,239,.5),transparent 70%),
             radial-gradient(48% 58% at 80% 18%,rgba(255,59,47,.32),transparent 70%)}
.hero__in{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(28px,4vw,56px);align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:var(--t-xs);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  background:var(--accent-tint);border:1px solid rgba(255,59,47,.3);
  padding:6px 13px;border-radius:100px;margin-bottom:20px}
.hero__title{margin:0 0 20px}
.hero__title em{font-style:normal;color:var(--accent)}
.hero__sub{color:var(--body);font-size:var(--t-lg);max-width:46ch;margin:0 0 28px}
.hero__cta{display:flex;gap:11px;flex-wrap:wrap}
.hero__art{position:relative;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line-2);box-shadow:var(--sh-lift)}
.hero__art img{width:100%}

/* =========================================================================
   Metrics — the proof strip
   ====================================================================== */
.metrics{background:var(--sunken);border-block:1px solid var(--line)}
.metrics__in{display:grid;grid-template-columns:repeat(5,1fr)}
.metric{padding:24px clamp(12px,2vw,22px);border-right:1px solid var(--line)}
.metric:last-child{border-right:0}
.metric__n{display:block;font-family:var(--f-display);font-size:clamp(24px,2.4vw,33px);
  line-height:1;margin-bottom:6px}
.metric__l{font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  font-family:var(--f-mono)}
.metric:nth-child(1) .metric__n{color:var(--accent)}
.metric:nth-child(2) .metric__n{color:var(--brand-ink)}
.metric:nth-child(3) .metric__n{color:var(--gold)}
.metric:nth-child(4) .metric__n{color:var(--good)}
.metric:nth-child(5) .metric__n{color:var(--ch-int)}

/* =========================================================================
   Section header — one, used everywhere
   ====================================================================== */
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;
  margin-bottom:var(--s4);flex-wrap:wrap}
.shead h2{margin:0}
.shead p{color:var(--muted);margin:9px 0 0;font-size:15px;max-width:62ch}
.shead__go{font-size:12.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--accent);white-space:nowrap}
.shead__go:hover{color:#fff}

/* =========================================================================
   Show tiles
   ====================================================================== */
.shows{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.show{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:3/4;
  background:var(--panel);border:1px solid var(--line);
  transition:transform .2s var(--ease),border-color .2s var(--ease);display:block}
.show:hover{transform:translateY(-6px);border-color:var(--c,var(--accent))}
.show img{width:100%;height:100%;object-fit:cover;opacity:.5;transition:.3s var(--ease)}
.show:hover img{opacity:.74;transform:scale(1.05)}
.show__grad{position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 26%,rgba(8,8,13,.96) 92%)}
.show__n{position:absolute;top:12px;left:12px;min-width:34px;height:34px;padding:0 8px;
  border-radius:var(--r-sm);background:var(--c,var(--accent));color:#fff;
  font-family:var(--f-mono);font-size:13.5px;font-weight:800;display:grid;place-items:center}
.show__b{position:absolute;left:15px;right:15px;bottom:16px}
.show__b h3{margin:0 0 4px;font-size:17.5px}
.show__b span{font-family:var(--f-mono);font-size:11px;color:var(--body);letter-spacing:.06em}
.show__bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--c,var(--accent))}
.show .ph{width:100%;height:100%;display:grid;place-items:center;font-family:var(--f-display);
  font-size:30px;color:var(--muted);background:var(--raised)}

/* =========================================================================
   Guide — the week
   ====================================================================== */
.guide{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel)}
.guide__row{display:grid;grid-template-columns:44px 128px 1fr auto;gap:16px;align-items:center;
  padding:16px 20px;border-bottom:1px solid var(--line);transition:background .15s}
.guide__row:last-child{border-bottom:0}
a.guide__row:hover{background:var(--raised)}
.guide__n{width:34px;height:34px;border-radius:var(--r-sm);background:var(--c,var(--accent));
  color:#fff;font-family:var(--f-mono);font-size:13px;font-weight:800;display:grid;place-items:center}
.guide__day{font-family:var(--f-mono);font-size:12.5px;color:var(--muted);letter-spacing:.06em}
.guide__day b{display:block;color:var(--ink);font-size:13.5px;margin-bottom:2px}
.guide__name{font-weight:700;font-size:15.5px}
.guide__name span{display:block;font-weight:400;font-size:13px;color:var(--muted);margin-top:2px}
.guide__go{font-family:var(--f-mono);font-size:11.5px;color:var(--muted);letter-spacing:.07em;
  text-transform:uppercase}

/* =========================================================================
   Standings — the scoreboard, rendered as a race
   ====================================================================== */
.race{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(20px,3vw,32px)}
.rrow{display:grid;grid-template-columns:34px 1fr auto;gap:18px;align-items:center;
  padding:16px 0;border-bottom:1px solid var(--line)}
.rrow:last-of-type{border-bottom:0}
.rrow__r{width:34px;height:34px;border-radius:50%;background:var(--raised);color:var(--muted);
  font-family:var(--f-mono);font-size:13px;font-weight:800;display:grid;place-items:center}
.rrow:first-of-type .rrow__r{background:var(--gold);color:#000}
.rrow__n{font-weight:800;font-size:15.5px;margin-bottom:8px}
.rrow__you{font-family:var(--f-mono);font-size:11px;color:var(--gold);margin-left:8px;
  letter-spacing:.08em}
.rrow__track{height:9px;border-radius:100px;background:var(--raised);overflow:hidden}
.rrow__fill{height:100%;border-radius:100px;background:var(--c,var(--brand))}
.rrow__pts{font-size:17px;font-weight:800;color:var(--c,var(--brand))}

.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:var(--s3)}
.rule{background:var(--raised);border-radius:var(--r-sm);padding:15px 17px}
.rule b{display:block;font-family:var(--f-mono);font-size:15px;color:var(--gold);margin-bottom:3px}
.rule span{font-size:12.5px;color:var(--body)}

/* team picker */
.teams{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.team{background:var(--c);border-radius:var(--r);padding:24px 18px;text-align:center;
  position:relative;overflow:hidden;border:3px solid transparent;cursor:pointer;
  transition:transform .2s var(--ease);color:#fff;display:block;width:100%;font:inherit}
.team:hover{transform:translateY(-7px)}
.team.on{border-color:#fff}
.team::after{content:"";position:absolute;top:-24px;right:-24px;width:76px;height:76px;
  border-radius:50%;background:rgba(255,255,255,.14)}
.team__rank{font-size:11px;font-weight:800;opacity:.78;letter-spacing:.1em;display:block}
.team__n{font-family:var(--f-display);font-size:16.5px;line-height:1.15;margin:10px 0 6px;
  display:block}
.team__pts{font-size:21px;font-weight:800;display:block}
.team__join{display:block;margin-top:14px;background:rgba(0,0,0,.3);color:#fff;
  font-size:12px;font-weight:800;padding:8px;border-radius:100px}

/* =========================================================================
   Cards — one component, every content type
   ====================================================================== */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.grid--4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .2s var(--ease),border-color .2s var(--ease)}
.card:hover{transform:translateY(-5px);border-color:var(--line-2)}
.card__art{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--raised)}
.card__art img{width:100%;height:100%;object-fit:cover}
.card__dur{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.82);color:#fff;
  font-family:var(--f-mono);font-size:11px;padding:3px 7px;border-radius:5px}
.card__b{padding:14px 15px 16px;flex:1;display:flex;flex-direction:column;gap:7px}
.card__t{font-size:14.5px;font-weight:700;line-height:1.32;margin:0}
.card__meta{font-size:11.5px;color:var(--muted);letter-spacing:.05em;margin-top:auto}

/* products */
.prod{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .2s var(--ease),border-color .2s var(--ease)}
.prod:hover{transform:translateY(-5px);border-color:var(--line-2)}
.prod__img{aspect-ratio:1;background:#fff;display:grid;place-items:center;padding:14px}
.prod__img img{max-height:100%;width:auto;object-fit:contain}
.prod__b{padding:14px 15px 16px}
.prod__t{font-size:14.5px;font-weight:700;line-height:1.3;margin:0 0 9px}
.prod__row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.prod__p{font-family:var(--f-mono);font-size:16px;font-weight:800}
.pts{font-size:11px;font-weight:800;color:#000;background:var(--gold);
  padding:4px 9px;border-radius:100px;white-space:nowrap}
.pts--dbl{background:var(--accent);color:#fff}

/* =========================================================================
   Platform wall
   ====================================================================== */
.plat{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}
.patch{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:16px 8px;text-align:center;font-size:12.5px;font-weight:700;
  transition:transform .18s var(--ease),border-color .18s,color .18s}
.patch:hover{border-color:var(--pc,var(--accent));color:var(--pc,var(--accent));transform:translateY(-4px)}
.patch i{display:block;width:26px;height:26px;border-radius:7px;background:var(--pc,var(--accent));
  margin:0 auto 9px}

/* =========================================================================
   Revenue band
   ====================================================================== */
.band{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rev{border-radius:var(--r);padding:28px;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(140deg,var(--c1),var(--c2))}
.rev h3{margin:0 0 9px;font-size:22px}
.rev p{margin:0 0 18px;font-size:14.5px;opacity:.92}
.rev .btn{background:rgba(255,255,255,.18);color:#fff}
.rev .btn:hover{background:rgba(255,255,255,.3)}

/* =========================================================================
   Player facade — nothing loads from YouTube until it is clicked
   ====================================================================== */
.player{position:relative;border-radius:var(--r);overflow:hidden;background:#000;
  border:1px solid var(--line-2)}
.player img{width:100%;aspect-ratio:16/9;object-fit:cover}
.player__btn{position:absolute;inset:0;width:100%;border:0;background:transparent;
  cursor:pointer;display:grid;place-items:center}
.player__btn > span:first-child{width:72px;height:72px;border-radius:50%;
  background:rgba(255,255,255,.94);color:#08080d;display:grid;place-items:center;
  transition:transform .18s var(--ease)}
.player__btn:hover > span:first-child{transform:scale(1.08);background:#fff}
.player__btn svg{width:28px;height:28px;margin-left:3px}
.player__tag{position:absolute;top:13px;left:13px;z-index:2;background:var(--accent-fill);color:#fff;
  font-family:var(--f-mono);font-size:11px;font-weight:800;letter-spacing:.11em;
  padding:6px 11px;border-radius:6px;display:flex;align-items:center;gap:7px}
.player__cap{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;
  background:linear-gradient(transparent,rgba(0,0,0,.9));font-weight:700;font-size:14.5px}
.player iframe{width:100%;aspect-ratio:16/9;border:0;display:block}

/* =========================================================================
   THE DOCK — the stay-time engine
   Rendered once, outside the swappable region, so navigating the site never
   interrupts playback.
   ====================================================================== */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:90;height:var(--dock-h);
  background:rgba(16,16,24,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--line-2);transform:translateY(100%);
  transition:transform .3s var(--ease)}
.dock.up{transform:translateY(0)}
.dock__in{max-width:var(--max);margin:0 auto;padding:0 clamp(14px,3vw,28px);height:100%;
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:18px;align-items:center}
.dk{display:flex;align-items:center;gap:12px;min-width:0}
.dk img{width:46px;height:46px;border-radius:var(--r-sm);object-fit:cover;flex:none;background:var(--raised)}
.dk__m{min-width:0}
.dk__t{font-size:13.5px;font-weight:700;line-height:1.25;margin-bottom:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dk__s{font-size:10.5px;color:var(--accent);letter-spacing:.08em;text-transform:uppercase;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dctl{display:flex;align-items:center;gap:14px;justify-content:center}
.dbtn{width:34px;height:34px;border-radius:50%;background:transparent;color:var(--body);
  display:grid;place-items:center;border:0;cursor:pointer;transition:color .15s,background .15s}
.dbtn:hover{color:#fff;background:var(--raised)}
.dbtn svg{width:17px;height:17px}
.dbtn--main{width:42px;height:42px;background:#fff;color:#08080d}
.dbtn--main:hover{background:#fff;color:#000;transform:scale(1.05)}
.dbtn--main svg{width:19px;height:19px}
.dseek{display:flex;align-items:center;gap:11px;min-width:0}
.dtime{font-size:11px;color:var(--muted);flex:none;min-width:42px}
.dtrack{flex:1;height:5px;border-radius:100px;background:var(--raised);position:relative;
  cursor:pointer;min-width:60px}
.dprog{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accent);border-radius:100px}
.dprog::after{content:"";position:absolute;right:-5px;top:-3px;width:11px;height:11px;
  border-radius:50%;background:#fff;opacity:0;transition:opacity .15s}
.dtrack:hover .dprog::after{opacity:1}
.dright{display:flex;align-items:center;gap:10px;justify-content:flex-end}
.wave{display:flex;align-items:flex-end;gap:2px;height:20px;flex:none}
.wave i{width:3px;background:var(--accent);border-radius:2px;height:30%}
.dock.playing .wave i{animation:w .9s ease-in-out infinite alternate}
.wave i:nth-child(1){animation-delay:0s}
.wave i:nth-child(2){animation-delay:.12s;height:80%}
.wave i:nth-child(3){animation-delay:.24s;height:50%}
.wave i:nth-child(4){animation-delay:.36s;height:100%}
.wave i:nth-child(5){animation-delay:.48s;height:62%}
@keyframes w{to{height:20%}}

/* a play control anywhere on the page hands its track to the dock */
.playbtn{border:0;padding:0;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:38px;height:38px;border-radius:50%;background:var(--accent-fill);color:#fff;
  cursor:pointer;flex:none;transition:transform .15s var(--ease)}
.playbtn:hover{transform:scale(1.08)}
.playbtn svg{width:16px;height:16px;margin-left:2px}
.playbtn.on svg{margin-left:0}

/* =========================================================================
   Editorial / page content
   ====================================================================== */
.phead{background:var(--sunken);border-bottom:1px solid var(--line);
  padding:clamp(34px,5vw,60px) 0}
.phead .eyebrow{color:var(--brand-ink);background:var(--brand-tint);border-color:rgba(110,121,244,.4)}
.phead h1{margin:0 0 12px}
.phead p{color:var(--body);font-size:var(--t-lg);max-width:60ch;margin:0}
.crumbs{font-family:var(--f-mono);font-size:12px;color:var(--muted);margin-bottom:16px}
.crumbs a:hover{color:var(--ink)}

.prose{max-width:74ch;font-size:var(--t-base)}
.prose > * + *{margin-top:1.1em}
.prose h2{margin:1.8em 0 .5em;font-size:var(--t-h2)}
.prose h3{margin:1.5em 0 .4em}
.prose ul,.prose ol{padding-left:1.3em}
.prose li + li{margin-top:.4em}
.prose img{border-radius:var(--r);margin-block:1.6em}
.prose blockquote{border-left:3px solid var(--accent);padding-left:20px;margin-left:0;
  color:var(--body);font-size:var(--t-lg)}
.prose code{font-family:var(--f-mono);font-size:.9em;background:var(--raised);
  padding:2px 6px;border-radius:5px}
.prose table{width:100%;border-collapse:collapse}
.prose th,.prose td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.prose th{background:var(--raised);font-weight:700}

/* pagination */
.pager{display:flex;gap:8px;justify-content:center;margin-top:var(--s5);flex-wrap:wrap}
.pager .page-numbers{display:grid;place-items:center;min-width:40px;height:40px;padding:0 12px;
  border-radius:var(--r-sm);background:var(--panel);border:1px solid var(--line);
  font-family:var(--f-mono);font-size:13.5px;font-weight:700}
.pager .page-numbers:hover{border-color:var(--line-2);color:#fff}
.pager .current{background:var(--accent);border-color:var(--accent);color:#fff}

/* =========================================================================
   Footer
   ====================================================================== */
.site-foot{background:var(--sunken);border-top:1px solid var(--line);
  padding:var(--s6) 0 var(--s4);margin-top:var(--s6)}
.foot__grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));
  gap:var(--s4);margin-bottom:var(--s5)}
.foot__grid .foot__h{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 14px}
.foot__grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.foot__grid a{color:var(--body);font-size:14px}
.foot__grid a:hover{color:var(--ink)}
.foot__about p{color:var(--body);font-size:14.5px;margin:14px 0 0;max-width:44ch}
.foot__bot{border-top:1px solid var(--line);padding-top:var(--s3);display:flex;
  justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:11.5px;color:var(--muted);letter-spacing:.04em}

/* =========================================================================
   View transitions — only where the browser supports them
   ====================================================================== */
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vt-out .16s ease both}
  ::view-transition-new(root){animation:vt-in .22s ease both}
}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(6px)}}
/* the dock is excluded from the transition so it never flickers */
.dock{view-transition-name:gxt-dock}

/* a thin progress line while an instant navigation is in flight */
.navbar{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent);z-index:200;
  transition:width .2s ease,opacity .3s ease;opacity:0;pointer-events:none}
.navbar.on{opacity:1}

/* =========================================================================
   Responsive
   ====================================================================== */
@media (max-width:1100px){
  .shows{grid-template-columns:repeat(3,1fr)}
  .grid--4{grid-template-columns:repeat(3,1fr)}
  .plat{grid-template-columns:repeat(4,1fr)}
  .teams{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .nav,.myteam{display:none}
  body.has-team .myteam{display:none}
  .burger{display:block}
  .hero__in{grid-template-columns:1fr}
  .hero__art{order:-1}
  .metrics__in{grid-template-columns:repeat(3,1fr)}
  .metric:nth-child(3){border-right:0}
  .band{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr 1fr}
  .guide__row{grid-template-columns:34px 1fr;row-gap:8px}
  .guide__day{grid-column:2}
  .guide__go{display:none}
  .rules{grid-template-columns:1fr}
}
@media (max-width:640px){
  :root{--dock-h:64px}
  .shows,.grid--4{grid-template-columns:repeat(2,1fr)}
  .teams{grid-template-columns:repeat(2,1fr)}
  .metrics__in{grid-template-columns:repeat(2,1fr)}
  .metric{border-right:0;border-bottom:1px solid var(--line)}
  .foot__grid{grid-template-columns:1fr}
  .dock__in{grid-template-columns:minmax(0,1fr) auto}
  .dright,.dseek{display:none}
  .dctl{gap:8px}
}

/* =========================================================================
   THE ARTWORK LAYER

   Everything below draws with real graphics rather than CSS boxes: their own
   cut-out illustrations, the minted team coins, the composed show banners and
   the event posters. See inc/art.php for where each asset comes from.
   ====================================================================== */

/* ---------- the stage: an illustrated banner, not a gradient ---------- */
.stage{position:relative;overflow:hidden;min-height:clamp(460px,58vw,660px);
  background:
    radial-gradient(70% 90% at 50% 8%,rgba(75,91,255,.4),transparent 62%),
    radial-gradient(55% 70% at 50% 96%,rgba(255,192,46,.2),transparent 68%),
    linear-gradient(180deg,var(--sunken),var(--page))}
/* the lamp pool on the desk surface */
.stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:190px;
  background:linear-gradient(transparent,rgba(255,192,46,.09));pointer-events:none}

/* their objects, hanging overhead */
.arc{position:absolute;top:0;left:0;right:0;height:200px;pointer-events:none;z-index:2}
.arc img{position:absolute;filter:drop-shadow(0 10px 18px rgba(0,0,0,.7));opacity:.95;
  height:auto}

/* The cast flank the stage. The scrim sits between them and the type — without
   it the headline and the shelf labels disappear into the artwork. */
.cast{position:absolute;bottom:0;pointer-events:none;z-index:2}
.cast--l{left:-40px;width:min(250px,18vw)}
.cast--r{right:-52px;width:min(430px,31vw)}
.cast img{width:100%;display:block;height:auto}
.scrim{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(58% 62% at 50% 42%,rgba(8,8,13,.9) 0%,rgba(8,8,13,.72) 45%,transparent 78%)}

.stage__in{position:relative;z-index:5;text-align:center;max-width:820px;margin:0 auto;
  padding:clamp(120px,17vw,186px) clamp(16px,3vw,26px) clamp(40px,6vw,64px)}
.stage h1{margin:0 0 18px;text-shadow:0 6px 30px rgba(0,0,0,.6)}
.stage h1 em{font-style:normal;color:var(--accent)}
.stage__sub{color:var(--body);font-size:var(--t-lg);margin:0 auto 26px;max-width:47ch}
.kick{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-mono);font-size:var(--t-xs);
  font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  background:rgba(255,192,46,.12);border:1px solid rgba(255,192,46,.34);
  padding:7px 15px;border-radius:100px;margin:0 0 22px}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;
  animation:pl 1.7s infinite}
@keyframes pl{0%,100%{opacity:1}50%{opacity:.2}}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- the object shelf: this is the navigation ---------- */
.shelfband{position:relative;z-index:8;border-top:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg,rgba(8,8,13,.35) 0%,rgba(8,8,13,.92) 22%,var(--page) 100%);
  padding-top:26px}
.shelf{display:flex;justify-content:center;align-items:flex-end;flex-wrap:wrap;list-style:none;
  gap:clamp(4px,1.3vw,20px);margin:0;padding:0 clamp(14px,3vw,26px) 46px}
.ob{position:relative;display:block;width:clamp(72px,8.4vw,112px);text-align:center;
  transition:transform .24s var(--ease)}
.ob:hover{transform:translateY(-18px)}
.ob__p{height:96px;display:grid;place-items:end center;position:relative}
.ob__p img{max-width:100%;max-height:92px;width:auto;height:auto;display:block;
  filter:drop-shadow(0 14px 16px rgba(0,0,0,.85));transition:filter .24s}
.ob:hover .ob__p img{filter:drop-shadow(0 20px 22px rgba(0,0,0,.9)) drop-shadow(0 0 22px var(--c))}
/* the shadow each object casts on the shelf */
.ob__p::after{content:"";position:absolute;bottom:-6px;left:16%;right:16%;height:12px;
  border-radius:50%;background:rgba(0,0,0,.75);filter:blur(7px);transition:.24s}
.ob:hover .ob__p::after{transform:scale(.75);opacity:.6}
.ob__l{display:block;margin-top:16px;font-family:var(--f-mono);font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);transition:color .2s}
.ob:hover .ob__l{color:var(--c)}
.ob__n{display:block;font-size:12.5px;font-weight:800;margin-top:3px}
.ob__b{position:absolute;top:-2px;right:2px;min-width:24px;height:24px;padding:0 7px;
  border-radius:100px;background:var(--c);color:#08080d;font-family:var(--f-mono);font-size:11px;
  font-weight:800;display:grid;place-items:center;z-index:3;
  box-shadow:0 0 0 3px var(--page),0 0 16px var(--c)}

/* ---------- episode list with dock play buttons ---------- */
.eplist{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:var(--panel)}
.ep{display:grid;grid-template-columns:38px 56px 1fr auto;gap:14px;align-items:center;
  padding:12px 18px;border-bottom:1px solid var(--line)}
.ep:last-child{border-bottom:0}
.ep:hover{background:var(--raised)}
.ep__art img{width:56px;height:56px;object-fit:cover;border-radius:var(--r-sm);display:block}
.ep__t{font-weight:700;font-size:14.5px;min-width:0}
.ep__t span{display:block;font-family:var(--f-mono);font-size:11px;color:var(--muted);
  font-weight:400;margin-top:3px}
.ep__d{font-family:var(--f-mono);font-size:12px;color:var(--muted)}

/* ---------- show banners ---------- */
.banners{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.bn{position:relative;display:block;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);transition:transform .2s var(--ease),border-color .2s}
.bn:hover{transform:translateY(-5px);border-color:var(--c)}
.bn img{width:100%;height:auto;display:block}
.bn__ph{display:grid;place-items:center;aspect-ratio:1600/440;background:var(--raised);
  font-family:var(--f-display);font-size:22px;color:var(--muted)}
.bn__go{position:absolute;right:14px;bottom:14px;font-family:var(--f-mono);font-size:11px;
  font-weight:800;letter-spacing:.08em;background:rgba(8,8,13,.82);padding:8px 12px;
  border-radius:100px;opacity:0;transform:translateY(6px);transition:.2s}
.bn:hover .bn__go{opacity:1;transform:none}
/* the banner at the head of a show archive */
.showbanner img{width:100%;height:auto;display:block;border-radius:var(--r);
  margin-bottom:var(--s4)}

/* ---------- standings, built on the minted coins ---------- */
.stand{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.tm{background:linear-gradient(170deg,var(--panel),var(--page));border:1px solid var(--line);
  border-radius:16px;padding:24px 16px;text-align:center;position:relative;overflow:hidden;
  cursor:pointer;font:inherit;color:inherit;transition:transform .2s var(--ease),
  border-color .2s,box-shadow .2s;width:100%;display:block}
.tm:hover{transform:translateY(-8px);border-color:var(--c);box-shadow:0 26px 46px -22px var(--c)}
.tm::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--c)}
.tm.on{border-color:var(--c);box-shadow:0 0 0 1px var(--c) inset}
.tm__coin{display:block;width:120px;height:120px;margin:0 auto 16px;
  transition:transform .35s var(--ease)}
.tm:hover .tm__coin{transform:rotateY(22deg) scale(1.06)}
.tm__coin img{width:100%;height:auto;display:block;filter:drop-shadow(0 12px 20px rgba(0,0,0,.8))}
.tm__r{display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;color:var(--muted)}
.tm__n{display:block;font-family:var(--f-display);font-size:15px;line-height:1.2;margin:8px 0 10px;
  min-height:36px}
.tm__p{display:block;font-family:var(--f-mono);font-size:23px;font-weight:800;color:var(--c)}
.tm__j{display:block;margin-top:14px;font-family:var(--f-mono);font-size:11.5px;font-weight:800;
  letter-spacing:.08em;color:var(--muted)}
.tm:hover .tm__j{color:#fff}

/* ---------- product cards carry the points badge ---------- */
.prod{position:relative}
.prod__pts{position:absolute;top:11px;right:11px;z-index:2;background:var(--gold);color:#08080d;
  font-family:var(--f-mono);font-size:11.5px;font-weight:800;padding:6px 10px;border-radius:100px;
  box-shadow:0 0 20px rgba(255,192,46,.5)}
.prod__pts--x2{background:var(--accent);color:#fff;box-shadow:0 0 20px rgba(255,59,47,.55)}

/* ---------- event posters ---------- */
.posters{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.poster{display:block;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  transition:transform .2s var(--ease),border-color .2s}
.poster:hover{transform:translateY(-7px) rotate(-1deg);border-color:var(--gold)}
.poster img{width:100%;height:auto;display:block}

/* ---------- the platform wall, with the house icon set ---------- */
.patch{display:flex;flex-direction:column;align-items:center;gap:9px;padding:16px 8px}
.patch svg{display:block;border-radius:11px}
.patch span{font-size:12.5px;font-weight:700}

@media (max-width:1100px){
  .stand{grid-template-columns:repeat(3,1fr)}
  .posters{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .banners{grid-template-columns:1fr}
  .cast--l{display:none}
  .cast--r{opacity:.3}
  .ep{grid-template-columns:38px 1fr auto}
  .ep__art{display:none}
}
@media (max-width:640px){
  .stand{grid-template-columns:repeat(2,1fr)}
  .posters{grid-template-columns:repeat(2,1fr)}
  .arc img{transform:scale(.7)}
}

/* the vector wordmark, and the coin-hunt map */
.brand--mark svg{display:block;color:var(--ink)}
.coinmap{margin:var(--s5) 0;display:flex;justify-content:center}
.coinmap svg{width:100%;max-width:520px;height:auto}
.dept-ico{display:inline-flex;vertical-align:middle;margin-right:8px}
.dept-ico svg{display:block;border-radius:8px}

/* ---------- the object band, and the signs ---------- */
.objband{height:96px;background-image:var(--band);background-repeat:repeat-x;
  background-position:center;background-size:auto 96px;pointer-events:none}
.objband--solid{border-block:1px solid var(--line);background-color:var(--sunken)}
.objband--dim{opacity:.9}
.sign{display:block;height:auto}
.sign--center{margin:0 auto var(--s4)}
@media (max-width:640px){.objband{height:66px;background-size:auto 66px}}

/* ---------- the cast roster ---------- */
.roster{list-style:none;margin:0 0 var(--s5);padding:0;
  display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.castcard{text-align:center}
.castcard img{width:100%;height:auto;border-radius:50%;display:block;margin:0 auto 14px;
  background:var(--panel);transition:transform .22s var(--ease)}
.castcard:hover img{transform:translateY(-6px) scale(1.03)}
.castcard b{display:block;font-family:var(--f-display);font-size:15px;line-height:1.2}
.castcard span{display:block;font-family:var(--f-mono);font-size:11px;color:var(--muted);
  letter-spacing:.06em;margin-top:5px}

/* ---------- the sponsor wall ---------- */
.sponsorwall{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:var(--s5) 0}
.sponsor{display:block;border-radius:var(--r);overflow:hidden;
  transition:transform .2s var(--ease)}
.sponsor:hover{transform:translateY(-6px)}
.sponsor img{width:100%;height:auto;display:block}

@media (max-width:1000px){
  .roster{grid-template-columns:repeat(3,1fr)}
  .sponsorwall{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .roster{grid-template-columns:repeat(2,1fr)}
  .sponsorwall{grid-template-columns:1fr}
}

/* ---------- the plugin's single pages, dressed ---------- */
.gxt-single__title{transition:border-color .2s}
.gxt-single__art img,.gxt-buy__shot img{border-radius:var(--r)}
/* the points figure on a product page reads as a score, not body copy */
.gxt-points{font-family:var(--f-mono);font-weight:800;color:var(--gold);
  background:rgba(255,176,32,.1);border:1px solid rgba(255,176,32,.3);
  padding:10px 14px;border-radius:100px;display:inline-block}
.gxt-pill{display:inline-flex;align-items:center}


/* =========================================================================
   Components the media plugin expects the THEME to style

   The plugin deliberately delegates these — its stylesheet only tints the
   chip ("The theme styles the chip itself; this only tints it") and defines
   no rule at all for the card play badge. Without these the chip renders as
   highlighted text and the badge's SVG, which carries a viewBox but no
   width/height, expands to fill its container.
   ====================================================================== */

.gxt-chip{display:inline-flex;align-items:center;gap:6px;
  font-family:var(--f-mono);font-size:10.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;line-height:1;
  padding:6px 11px;border-radius:100px;
  border:1px solid var(--line-2);color:var(--body);background:transparent;
  white-space:nowrap}

/* the play badge over a card's thumbnail */
.gxt-card__media{position:relative;overflow:hidden}
.gxt-card__play{position:absolute;right:10px;bottom:10px;
  width:40px;height:40px;flex:none;border-radius:50%;
  background:var(--accent-fill);color:#fff;display:grid;place-items:center;
  box-shadow:0 8px 20px -6px rgba(0,0,0,.8);
  transition:transform .18s var(--ease);pointer-events:none}
.gxt-card__play svg{width:17px;height:17px;margin-left:2px;display:block}
.gxt-card:hover .gxt-card__play{transform:scale(1.12)}

/* Any SVG the plugin ships without intrinsic dimensions. The global reset
   sets height:auto, which lets a viewBox-only SVG grow to its container. */
.gxt-card__play svg,.gxt-plat svg,.gxt-btn svg{height:auto;max-height:100%}

/* An oEmbed converted to a click-to-load facade has no poster image, so it
   needs its own ground rather than inheriting the card's aspect box. */
.gxt-player--inline{position:relative;aspect-ratio:16/9;border-radius:var(--r);
  background:linear-gradient(140deg,var(--raised),var(--panel));
  border:1px solid var(--line-2);overflow:hidden;margin:1.6em 0}
.gxt-player--inline iframe{width:100%;height:100%;border:0;display:block}

/* ---------- the store's buy button and points line ---------- */
/* The plugin's .gxt-btn has no white-space rule, so "See it in the store"
   wrapped to three lines inside its pill in this narrower column. */
.gxt-btn{white-space:nowrap}
.gxt-btn--buy{background:var(--good);border-color:var(--good);
  box-shadow:0 8px 26px -10px var(--good)}
.gxt-btn--buy:hover{background:#14a86a}

/* The points line is a <p> with a <strong> and a link inside, so without
   these it picks up three different inherited colours. */
.gxt-points strong{font-family:var(--f-mono);color:var(--gold);font-weight:800}
.gxt-points a{color:var(--gold);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:rgba(255,176,32,.45)}
.gxt-points a:hover{text-decoration-color:currentColor}

/* ---------- the gold coin hunt ---------- */
.coinhunt{margin:var(--s5) 0}
.coinboard{margin:0 0 var(--s4)}
.coinboard img{width:100%;height:auto;border-radius:var(--r);border:1px solid var(--line)}
.coinboard figcaption{font-family:var(--f-mono);font-size:11.5px;color:var(--muted);
  margin-top:12px;letter-spacing:.03em}
.coinstats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:var(--s4)}
.coinstats div{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:20px;text-align:center}
.coinstats b{display:block;font-family:var(--f-display);font-size:34px;line-height:1;color:var(--gold)}
.coinstats span{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);margin-top:8px}

.coinlist{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.coin{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.coin__n{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--f-mono);font-size:14px;font-weight:800;
  background:var(--raised);color:var(--muted)}
.coin--found .coin__n{background:var(--raised);color:var(--good);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--good) 40%,transparent)}
.coin--open .coin__n{background:linear-gradient(160deg,#FFE49A,#E09A00);color:#3a2600}
.coin__b b{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.coin--open .coin__b b{color:var(--gold)}
.coin--found .coin__b b{color:var(--good)}
.coin__b span{display:block;font-size:13.5px;color:var(--body);line-height:1.5}
.coin__go{display:inline-block;margin-top:8px;font-family:var(--f-mono);font-size:12px;
  color:var(--gold);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(255,176,32,.4)}
.coin__go:hover{text-decoration-color:currentColor}
.coin--unplaced{opacity:.55}
@media (max-width:640px){.coinstats{grid-template-columns:1fr}}

/* =========================================================================
   Mobile header

   The header row is the widest thing on the site: logo (~170px) + search +
   cart + "Become a Member" + burger comes to roughly 450px, which is wider
   than a phone. Because body has overflow-x:hidden that never showed up as a
   scrollbar — it just silently clipped the right edge of EVERY page.
   ====================================================================== */
@media (max-width:720px){
  .site-head__in{gap:10px}
  .brand img{max-height:30px}
  /* the membership call to action lives in the drawer at this width */
  .head-tools .btn--accent{display:none}
}
@media (max-width:400px){
  .brand img{max-height:26px}
  .icon-btn{width:34px;height:34px}
  .burger{width:34px;height:34px}
}

/* The drawer carries what the header drops, so nothing becomes unreachable. */
.nav-panel__cta{display:none;padding:16px clamp(16px,3vw,28px) 4px}
.nav-panel__cta .btn{width:100%;justify-content:center}
@media (max-width:720px){ .nav-panel__cta{display:block} }

/* A guard against any future overflow: nothing may force the page wider than
   the viewport. Cheap, and it turns a silent clip into a visible wrap. */
html,body{max-width:100%}

/* The plugin's filled controls put white on the accent, which is 3.55:1 with
   the bright red. Its --c-red token is shared with text, so the fill is
   overridden here rather than by changing the token. */
.gxt-btn{background:var(--accent-fill)}
.gxt-btn--ghost{background:transparent}
.gxt-btn--buy{background:var(--good)}
.gxt-pill.is-active,.gxt-player__btn{background:var(--accent-fill)}

/* A draft-status banner on the legal pages, so nobody mistakes placeholder
   wording for reviewed text. */
.legal-draft{background:rgba(255,176,32,.1);border:1px solid rgba(255,176,32,.4);
  border-left:4px solid var(--gold);border-radius:var(--r-sm);
  padding:16px 18px;margin:0 0 var(--s4);font-size:14.5px;color:var(--body)}
.legal-draft strong{color:var(--gold);display:block;margin-bottom:4px}

/* The search page when there is nothing to show — either no query yet or no
   match. Both need a way onwards rather than a dead end. */
.searchbig{display:flex;gap:10px;margin:0 0 var(--s4);max-width:620px}
.searchbig input{flex:1;min-width:0;background:var(--sunken);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 16px;font-size:16px}
.searchbig input::placeholder{color:var(--muted)}
.searchbig input:focus-visible{outline:2px solid var(--brand-ink);outline-offset:2px;border-color:transparent}
.routes{list-style:none;margin:0 0 var(--s4);padding:0;display:flex;flex-wrap:wrap;gap:10px}
.routes a{display:inline-block;background:var(--panel);border:1px solid var(--line);
  border-radius:999px;padding:9px 16px;font-size:14.5px;font-weight:600;
  color:var(--ink);text-decoration:none}
.routes a:hover{background:var(--raised);border-color:var(--brand-ink)}
.routes a:focus-visible{outline:2px solid var(--brand-ink);outline-offset:2px}
@media (max-width:520px){.searchbig{flex-direction:column}}

/* Shown on the events page once the whole line-up is in the past, so nobody is
   invited to buy a ticket to something that is over. */
.notice--past{background:rgba(110,121,244,.1);border:1px solid rgba(110,121,244,.38);
  border-left:4px solid var(--brand-ink);border-radius:var(--r-sm);
  padding:16px 18px;margin:0 0 var(--s4);font-size:14.5px;color:var(--body)}
.notice--past strong{color:var(--brand-ink);display:block;margin-bottom:4px}