/* ==========================================================================
   ON THE 50 PODCAST
   LiveOak Web Designs. Plain CSS, no build step.
   Two colors run the whole site: --red and --black. Change them here.
   ========================================================================== */

:root{
  --red:#E01B2C;
  --red-deep:#8E1220;
  --red-glow:rgba(224,27,44,.38);
  --black:#0A0A0B;
  --panel:#131316;
  --panel-2:#1B1B1F;
  --cream:#F4EADA;
  --gold:#E0B252;
  --muted:#9A9187;
  --line:rgba(244,234,218,.14);

  --display:"Oswald","Arial Narrow",Impact,system-ui,sans-serif;
  --body:"Figtree","Segoe UI",Arial,sans-serif;

  --wrap:1180px;
  --pad:clamp(20px,5vw,48px);
  --bar:0px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

html{scroll-behavior:smooth;scroll-padding-top:84px;}

body{
  background:var(--black);
  color:var(--cream);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-bottom:var(--bar);
}

img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--red);color:#fff;}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad);}

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--display);font-weight:600;
  font-size:15px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--red);display:flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";width:34px;height:3px;background:var(--red);flex:none;}

h2.big{
  font-family:var(--display);font-weight:700;
  font-size:clamp(38px,6.4vw,74px);line-height:.94;
  text-transform:uppercase;letter-spacing:-.01em;
  margin:18px 0 0;
}
h2.big em{font-style:normal;color:var(--red);}

.lede{font-size:clamp(17px,2vw,20px);color:#D9CFBE;max-width:62ch;margin-top:18px;line-height:1.62;}

section{padding-block:clamp(64px,9vw,116px);position:relative;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--display);font-weight:600;
  font-size:16px;letter-spacing:.12em;text-transform:uppercase;
  padding:16px 30px;border:2px solid transparent;cursor:pointer;
  transition:transform .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn-red{background:var(--red);color:#fff;box-shadow:0 10px 30px -12px var(--red-glow);}
.btn-red:hover{background:#F42C3D;box-shadow:0 16px 40px -12px var(--red-glow);}
.btn-ghost{border-color:var(--line);color:var(--cream);background:transparent;}
.btn-ghost:hover{border-color:var(--red);color:var(--red);}
.btn-cream{background:var(--cream);color:var(--black);}
.btn-cream:hover{background:#fff;}

/* ==========================================================================
   HEADER
   ========================================================================== */
header.site{
  position:sticky;top:0;z-index:60;
  background:rgba(10,10,11,.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:background .2s ease;
}
header.site .inner{
  display:flex;align-items:center;gap:24px;
  height:76px;
}
.brand{display:flex;align-items:center;gap:12px;flex:none;}
.brand svg,.brand img{width:46px;height:46px;object-fit:contain;}
.brand .txt{
  font-family:var(--display);font-weight:700;
  font-size:22px;letter-spacing:.02em;text-transform:uppercase;line-height:1;
}
.brand .txt em{font-style:normal;color:var(--red);}

nav.main{margin-left:auto;display:flex;align-items:center;gap:30px;}
nav.main a{
  font-family:var(--display);font-weight:500;
  font-size:15px;letter-spacing:.14em;text-transform:uppercase;
  color:#C9BFAE;position:relative;padding-block:6px;
}
nav.main a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:2px;
  background:var(--red);transition:width .2s ease;
}
nav.main a:hover{color:var(--cream);}
nav.main a:hover::after{width:100%;}
header.site .btn{padding:12px 22px;font-size:14px;}
/* the nav copy of the call button is for the mobile drawer only */
@media (min-width:821px){ nav.main .btn{display:none;} }

.menu-btn{display:none;margin-left:auto;background:none;border:0;color:var(--cream);padding:8px;cursor:pointer;}
.menu-btn svg{width:28px;height:28px;}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  padding-top:clamp(48px,7vw,86px);
  padding-bottom:clamp(56px,8vw,96px);
  overflow:hidden;
}
.hero::before{
  /* yard lines */
  content:"";position:absolute;inset:0;z-index:0;
  background:repeating-linear-gradient(to right,transparent 0 calc(6.25% - 1px),rgba(244,234,218,.045) calc(6.25% - 1px) 6.25%);
  pointer-events:none;
}
.hero::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:min(760px,90vw);aspect-ratio:1;border-radius:50%;
  right:-16%;top:-28%;
  background:radial-gradient(circle,rgba(224,27,44,.20) 0%,transparent 66%);
}
.hero .inner{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,64px);align-items:center;}

.hero h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(60px,12.5vw,152px);line-height:.82;
  text-transform:uppercase;letter-spacing:-.02em;
  margin:22px 0 0;
}
.hero h1 .fifty{
  color:var(--red);
  text-shadow:0 0 62px var(--red-glow);
  display:inline-block;
}
.hero .tagline{
  font-family:var(--display);font-weight:600;
  font-size:clamp(17px,2.5vw,25px);letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold);margin-top:20px;line-height:1.28;
}
.hero .place{
  margin-top:14px;color:var(--muted);font-size:17px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;}
.hero .actions .btn{padding-inline:24px;}

/* live chip */
.livechip{
  display:inline-flex;align-items:center;gap:11px;
  border:1px solid rgba(224,27,44,.45);
  background:rgba(224,27,44,.10);
  padding:9px 18px;border-radius:100px;
  font-size:15px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cream);
}
.livechip .dot{
  width:9px;height:9px;border-radius:50%;background:var(--red);flex:none;
  box-shadow:0 0 0 0 var(--red-glow);animation:pulse 2s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(224,27,44,.7);}
  70%{box-shadow:0 0 0 12px rgba(224,27,44,0);}
  100%{box-shadow:0 0 0 0 rgba(224,27,44,0);}
}

/* the crest */
.hero-art{position:relative;display:flex;justify-content:center;}
/* The crest is a shield, not a disc, and the PNG is transparent. Shadows have to
   be drop-shadow filters so they follow the artwork; box-shadow would draw a
   rectangle around the whole image box. */
.hero-art .crest{
  width:min(470px,92%);height:auto;
  filter:drop-shadow(0 26px 44px rgba(0,0,0,.75))
         drop-shadow(0 0 60px rgba(224,27,44,.28));
  animation:float 7s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}

/* ==========================================================================
   TICKER
   ========================================================================== */
.ticker{
  background:var(--red);color:#fff;
  padding:15px 0;overflow:hidden;white-space:nowrap;
  border-block:2px solid #000;
}
.ticker .track{display:inline-flex;gap:0;animation:scroll 34s linear infinite;}
.ticker span{
  font-family:var(--display);font-weight:600;
  font-size:19px;letter-spacing:.2em;text-transform:uppercase;
  padding-inline:26px;display:inline-flex;align-items:center;gap:26px;
}
.ticker span::after{content:"★";color:#000;font-size:14px;}
@keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){
  .ticker .track{animation:none;}
  .hero-art .disc{animation:none;}
}

/* ==========================================================================
   STATS
   ========================================================================== */
.stats{background:var(--panel);border-bottom:1px solid var(--line);}
.stats .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.stat{background:var(--panel);padding:34px 24px;text-align:center;transition:background .2s ease;}
.stat:hover{background:var(--panel-2);}
.stat .n{
  font-family:var(--display);font-weight:700;
  font-size:clamp(42px,5.6vw,62px);line-height:1;color:var(--red);letter-spacing:-.02em;
}
.stat:nth-child(2) .n{color:var(--gold);}
.stat:nth-child(3) .n{color:var(--cream);}
.stat:nth-child(4) .n{color:var(--gold);}
.stat .l{font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;margin-top:12px;}
.stat .s{font-size:15px;color:var(--muted);margin-top:4px;}
.stats .src{margin-top:18px;font-size:15px;color:var(--muted);text-align:center;}

/* ==========================================================================
   SHOW / PILLARS
   ========================================================================== */
.show .inner{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,80px);align-items:start;}
.pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.pillar{
  background:var(--panel);border:1px solid var(--line);
  border-left:4px solid var(--red);
  padding:26px 24px;transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.pillar:hover{transform:translateY(-4px);background:var(--panel-2);border-left-color:var(--gold);}
.pillar h3{
  font-family:var(--display);font-weight:700;font-size:23px;
  text-transform:uppercase;letter-spacing:.07em;
}
.pillar p{font-size:16px;color:#C4BAA9;margin-top:10px;line-height:1.55;}

.creed{
  margin-top:34px;padding:26px 28px;
  background:linear-gradient(120deg,rgba(224,27,44,.16),transparent 72%);
  border-left:4px solid var(--gold);
}
.creed .q{font-family:var(--display);font-weight:700;font-size:clamp(22px,3vw,32px);
  text-transform:uppercase;line-height:1.14;letter-spacing:.01em;}
.creed .v{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px;}
.creed .v span{
  font-size:14px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);border:1px solid rgba(224,178,82,.4);padding:6px 14px;
}

/* ==========================================================================
   WATCH
   ========================================================================== */
.watch{background:var(--panel);}
.plats{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:44px;}
.plat{
  background:var(--black);border:1px solid var(--line);
  padding:32px 28px;display:flex;flex-direction:column;gap:8px;
  transition:transform .2s ease,border-color .2s ease;
  position:relative;overflow:hidden;
}
.plat:hover{transform:translateY(-5px);border-color:var(--red);}
.plat .ico{width:44px;height:44px;color:var(--red);margin-bottom:8px;}
.plat h3{font-family:var(--display);font-weight:700;font-size:26px;text-transform:uppercase;letter-spacing:.05em;}
.plat .h{color:var(--muted);font-size:16px;}
.plat .go{
  margin-top:14px;font-family:var(--display);font-weight:600;font-size:15px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
}
.plat.soon{opacity:.55;}
.plat.soon .go{color:var(--muted);}

/* call-in band */
.callband{
  margin-top:44px;background:var(--red);color:#fff;
  padding:clamp(28px,4vw,44px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:26px;
}
.callband .t{font-family:var(--display);font-weight:700;
  font-size:clamp(26px,4vw,44px);line-height:1;text-transform:uppercase;}
.callband .s{margin-top:10px;font-size:17px;color:rgba(255,255,255,.9);}
.callband .num{
  font-family:var(--display);font-weight:700;
  font-size:clamp(34px,5.4vw,58px);line-height:1;letter-spacing:.01em;color:#fff;
  transition:transform .16s ease;
}
.callband .num:hover{transform:scale(1.04);}

/* ==========================================================================
   HOSTS
   ========================================================================== */
.hosts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:44px;}
.host{background:var(--panel);border:1px solid var(--line);padding:34px 30px;border-top:4px solid var(--red);}
.host h3{font-family:var(--display);font-weight:700;font-size:32px;text-transform:uppercase;letter-spacing:.02em;}
.host .role{font-size:14px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-top:6px;}
.host p{font-size:16px;color:#C4BAA9;margin-top:16px;line-height:1.6;}
.host a.lnk{display:inline-block;margin-top:16px;color:var(--red);font-weight:700;font-size:16px;border-bottom:2px solid var(--red);padding-bottom:2px;}

/* ==========================================================================
   SPONSOR
   ========================================================================== */
.sponsor{background:var(--black);}
.sponsor .head{max-width:780px;}
.pitchrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:44px;}
.pitch{border:1px solid var(--line);background:var(--panel);padding:26px 24px;}
.pitch .k{font-family:var(--display);font-weight:700;font-size:40px;color:var(--red);line-height:1;}
.pitch p{font-size:16px;color:#C4BAA9;margin-top:12px;line-height:1.55;}

.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:44px;align-items:stretch;}
.tier{
  background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--muted);
  padding:32px 26px 28px;display:flex;flex-direction:column;
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.tier:hover{transform:translateY(-6px);background:var(--panel-2);}
.tier.featured{
  border-color:rgba(224,27,44,.5);border-top-color:var(--red);
  background:linear-gradient(180deg,rgba(224,27,44,.10),var(--panel) 62%);
  box-shadow:0 30px 60px -34px var(--red-glow);
}
.tier .flag{
  align-self:flex-start;background:var(--red);color:#fff;
  font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;padding:5px 12px;margin-bottom:14px;
}
.tier h3{font-family:var(--display);font-weight:700;font-size:25px;text-transform:uppercase;letter-spacing:.06em;line-height:1.05;}
.tier .price{font-family:var(--display);font-weight:700;font-size:52px;color:var(--red);line-height:1;margin-top:14px;}
.tier.featured .price{color:var(--gold);}
.tier .per{font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-top:4px;}
.tier .pitchline{font-size:16px;color:#C4BAA9;margin-top:14px;}
.tier ul{list-style:none;margin-top:20px;padding-top:20px;border-top:1px solid var(--line);flex:1;}
.tier ul li{font-size:16px;line-height:1.45;padding-left:26px;position:relative;margin-bottom:12px;color:#D9CFBE;}
.tier ul li::before{
  content:"";position:absolute;left:0;top:7px;width:13px;height:13px;background:var(--red);
  clip-path:polygon(0 0,100% 50%,0 100%);
}
.tier .limited{margin-top:14px;font-size:14px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--red);}
.tier .btn{margin-top:22px;width:100%;}

/* sponsor wall */
.wall{margin-top:56px;}
.wall h3{font-family:var(--display);font-weight:700;font-size:clamp(24px,3.4vw,34px);text-transform:uppercase;letter-spacing:.05em;}
.wall .slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:22px;}
.slot{
  border:2px dashed rgba(244,234,218,.22);
  min-height:132px;display:grid;place-items:center;text-align:center;padding:20px;
  transition:border-color .2s ease,background .2s ease;
}
.slot:hover{border-color:var(--red);background:rgba(224,27,44,.06);}
.slot .txt{font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);line-height:1.5;}
.slot.filled{border:1px solid var(--line);background:var(--panel);}
.slot.filled img{max-height:74px;width:auto;}
.slot.filled .nm{font-family:var(--display);font-weight:700;font-size:20px;text-transform:uppercase;color:var(--cream);}

/* ==========================================================================
   SUPPORT
   ========================================================================== */
.support{background:var(--panel);}
.support .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:44px;}
.scard{background:var(--black);border:1px solid var(--line);padding:32px 28px;border-left:4px solid var(--gold);}
.scard h3{font-family:var(--display);font-weight:700;font-size:25px;text-transform:uppercase;letter-spacing:.05em;}
.scard p{font-size:16px;color:#C4BAA9;margin-top:12px;line-height:1.55;}
.scard .btn{margin-top:20px;}

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer.site{background:var(--black);border-top:1px solid var(--line);padding-block:56px 34px;}
footer.site .top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;}
footer.site .blurb{color:var(--muted);font-size:16px;margin-top:16px;max-width:44ch;line-height:1.6;}
footer.site h4{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;}
footer.site ul{list-style:none;}
footer.site ul li{margin-bottom:11px;}
footer.site ul a{color:#C4BAA9;font-size:16px;}
footer.site ul a:hover{color:var(--red);}
footer.site .bottom{
  margin-top:44px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  color:var(--muted);font-size:15px;
}
footer.site .bottom a{color:var(--muted);}
footer.site .bottom a:hover{color:var(--cream);}

/* ==========================================================================
   MOBILE CALL BAR
   ========================================================================== */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  background:var(--red);border-top:2px solid #000;
}
.callbar a{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:17px 12px;color:#fff;
  font-family:var(--display);font-weight:600;font-size:17px;
  letter-spacing:.14em;text-transform:uppercase;
}
.callbar a + a{border-left:2px solid rgba(0,0,0,.35);}
.callbar .row{display:grid;grid-template-columns:1fr 1fr;}

/* ==========================================================================
   REVEAL
   ========================================================================== */
.rv{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease;}
.rv.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none;}}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1000px){
  .hero .inner{grid-template-columns:1fr;}
  .hero-art{order:-1;}
  .hero-art .crest{width:min(330px,80%);}
  .show .inner{grid-template-columns:1fr;}
  .stats .grid{grid-template-columns:repeat(2,1fr);}
  footer.site .top{grid-template-columns:1fr 1fr;}
}

@media (max-width:820px){
  nav.main{
    position:fixed;inset:76px 0 auto 0;
    background:rgba(10,10,11,.98);backdrop-filter:blur(14px);
    flex-direction:column;align-items:stretch;gap:0;
    padding:8px var(--pad) 26px;
    border-bottom:1px solid var(--line);
    transform:translateY(-140%);transition:transform .28s ease;
  }
  nav.main.open{transform:none;}
  nav.main a{padding:16px 0;border-bottom:1px solid var(--line);font-size:17px;}
  nav.main a::after{display:none;}
  nav.main .btn{margin-top:18px;}
  .menu-btn{display:block;}
  header.site .inner > .btn{display:none;}
  .callbar{display:block;}
  body{--bar:60px;}
  .pillars{grid-template-columns:1fr;}
}

@media (max-width:560px){
  .stats .grid{grid-template-columns:1fr;}
  footer.site .top{grid-template-columns:1fr;}
  .callband{flex-direction:column;align-items:flex-start;}
}