/* Public design system: one shell, one gutter, one spacing rhythm.
   Loaded after feature styles so outer geometry stays consistent. */
:root{
  --public-max:1180px;
  --public-gutter:24px;
  --public-radius:22px;
  --public-gap:20px;
  --public-edge:rgba(225,196,119,.24);
  --public-surface:#0b0f14;
}

.site-header{
  padding-left:max(var(--public-gutter),calc((100vw - var(--public-max))/2))!important;
  padding-right:max(var(--public-gutter),calc((100vw - var(--public-max))/2))!important;
}

body main > .hero,
body main > .status-strip,
body main > .home-content-section,
body main > .home-hosts-bridge,
body main > .home-people-section,
body main > .section-grid,
body main > .public-contact-section,
body main > .public-lounge-section{
  width:min(var(--public-max),calc(100% - var(--public-gutter) - var(--public-gutter)))!important;
  max-width:none!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

body main > .section-grid{
  padding-left:0!important;
  padding-right:0!important;
  gap:var(--public-gap)!important;
}

/* Hero becomes one environment, not a panel beside a second panel. */
body main > .hero{
  position:relative;
  isolation:isolate;
  display:block!important;
  min-height:390px!important;
  margin-top:26px!important;
  margin-bottom:14px!important;
  padding:58px 58px 54px!important;
  overflow:hidden;
  border:1px solid rgba(224,193,113,.30)!important;
  border-radius:var(--public-radius)!important;
  background:
    radial-gradient(circle at 77% 30%,rgba(40,211,236,.13),transparent 27%),
    radial-gradient(circle at 91% 74%,rgba(221,54,156,.11),transparent 24%),
    radial-gradient(circle at 69% 76%,rgba(225,183,91,.08),transparent 22%),
    linear-gradient(112deg,#0b1117 0%,#090d12 51%,#100d13 100%)!important;
  box-shadow:
    0 24px 58px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.045)!important;
}
body main > .hero::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  opacity:.92;
  background:
    linear-gradient(90deg,transparent 0 59%,rgba(59,220,244,.08) 59.2% 59.5%,transparent 59.7%),
    linear-gradient(90deg,transparent 0 78%,rgba(255,68,174,.07) 78.2% 78.5%,transparent 78.7%),
    radial-gradient(circle at 78% 15%,rgba(255,213,126,.13) 0 2%,transparent 2.2%),
    repeating-linear-gradient(90deg,transparent 0 54px,rgba(255,255,255,.018) 55px 56px);
  -webkit-mask-image:linear-gradient(90deg,transparent 40%,#000 66%);
  mask-image:linear-gradient(90deg,transparent 40%,#000 66%);
}
body main > .hero::after{
  content:"ON AIR";
  position:absolute;
  top:56px;
  right:58px;
  padding:8px 12px 7px;
  border:1px solid rgba(255,78,150,.48);
  border-radius:9px;
  background:rgba(34,8,20,.66);
  color:#ff8cbf;
  font-size:12px;
  font-weight:950;
  letter-spacing:.14em;
  box-shadow:0 0 18px rgba(255,61,151,.14),inset 0 1px 0 rgba(255,255,255,.06);
}
body main > .hero .hero-main{
  position:relative;
  z-index:2;
  width:min(730px,72%);
}
body main > .hero .eyebrow{
  margin:0 0 9px!important;
  color:#e7c56f!important;
}
body main > .hero h1{
  max-width:700px!important;
  margin:5px 0 14px!important;
  white-space:normal!important;
  font-size:clamp(3.45rem,6.45vw,6.35rem)!important;
  line-height:.90!important;
}
body main > .hero .hero-copy{
  max-width:650px!important;
  color:#d6d9df!important;
}
body main > .hero .hero-actions{margin-top:27px!important}

/* Live strip uses exactly the same left and right edge as the hero. */
body main > .status-strip{
  margin-top:0!important;
  margin-bottom:20px!important;
  border-radius:16px!important;
}

/* Host intro is centered and behaves like a divider, not another competing header. */
body main > .home-hosts-bridge{
  min-height:42px;
  margin-bottom:8px!important;
  padding:5px 2px 3px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:14px!important;
  text-align:center;
}
body main > .home-hosts-bridge::before,
body main > .home-hosts-bridge::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(224,193,113,.25));
}
body main > .home-hosts-bridge::after{
  background:linear-gradient(90deg,rgba(224,193,113,.25),transparent);
}
body main > .home-hosts-bridge b{display:none!important}
body main > .home-hosts-bridge span{
  white-space:nowrap;
  color:#e9c978!important;
  font-size:12px!important;
  letter-spacing:.15em!important;
}

/* Host cards share one footprint and quieter surfaces. */
body main > .home-people-section{
  gap:var(--public-gap)!important;
  margin-bottom:22px!important;
}
body main > .home-people-section .home-person-card{
  min-height:286px!important;
  max-height:308px!important;
  border-radius:18px!important;
  background:linear-gradient(145deg,rgba(10,14,20,.97),rgba(12,11,16,.98))!important;
  box-shadow:0 14px 28px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
body main > .home-people-section .home-person-copy{padding:23px 22px 21px!important}
body main > .home-people-section .home-person-bio{max-height:132px!important}

/* Top homepage feature cards align to the same geometry and reduce glow clutter. */
body main > .section-grid > #videos,
body main > .section-grid > #shows{
  border-radius:var(--public-radius)!important;
  box-shadow:0 15px 30px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
body main > .section-grid > #videos{
  min-height:220px!important;
}
body main > .section-grid > #shows{
  padding:26px!important;
}

/* Every major lower public block keys to the same shell. */
body main > .public-contact-section,
body main > .public-lounge-section{
  margin-top:0!important;
  margin-bottom:36px!important;
  border-radius:var(--public-radius)!important;
}

/* Footer content lines up with every section above it. */
.site-footer-inner,
.site-footer-bottom{
  width:min(var(--public-max),calc(100% - var(--public-gutter) - var(--public-gutter)))!important;
  max-width:none!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:0!important;
  padding-right:0!important;
}

/* Large monitors get atmosphere outside the content shell, not extra random boxes. */
@media(min-width:1450px){
  :root{--public-max:1240px}
}

@media(max-width:980px){
  body main > .hero{
    min-height:350px!important;
    padding:48px 42px!important;
  }
  body main > .hero .hero-main{width:min(760px,82%)}
  body main > .hero::after{top:46px;right:42px}
}

@media(max-width:760px){
  :root{--public-gutter:14px}
  .site-header{
    padding-left:var(--public-gutter)!important;
    padding-right:var(--public-gutter)!important;
  }
  body main > .hero{
    min-height:0!important;
    margin-top:14px!important;
    padding:36px 24px 34px!important;
  }
  body main > .hero .hero-main{width:100%}
  body main > .hero::after{display:none}
  body main > .home-hosts-bridge::before,
  body main > .home-hosts-bridge::after{min-width:20px}
  body main > .home-people-section .home-person-card{
    max-height:none!important;
  }
  .site-footer-inner,
  .site-footer-bottom{
    width:min(var(--public-max),calc(100% - var(--public-gutter) - var(--public-gutter)))!important;
  }
}