/* Full-width featured conversation. Typography and copy stay native to the site. */
.immersive-hero {
  margin-top:-108px; padding:108px 0 0; height:clamp(680px,100svh,1050px);
  overflow:hidden; background:#08080a url('/assets/hero-wave-background.png') center / cover no-repeat;
}
.immersive-hero:before {
  inset:0; z-index:-1; opacity:.1; mask-image:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.5' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
  background-size:180px 180px;
}
.immersive-hero:after {content:'';position:absolute;inset:75% 0 0;background:linear-gradient(transparent,var(--bg));pointer-events:none;z-index:-1}
.immersive-hero .hero {position:relative;height:100%;display:flex;align-items:center;gap:0;padding:20px 0 54px;isolation:isolate}
/* Supplied transparent glow sits over the portrait, below the copy and controls. */
.immersive-hero .hero:after {
  content:'';position:absolute;right:-10%;bottom:-8%;width:68%;height:67%;
  background:url('/assets/hero-corner-glow.png') right bottom / contain no-repeat;
  opacity:.8;pointer-events:none;z-index:1;
  mask-image:linear-gradient(to bottom,#000 75%,transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,#000 75%,transparent 100%);
}
.immersive-hero .hero-copy {position:relative;z-index:2;width:53%;max-width:750px}
.immersive-hero .intro-label {margin:22px 0 16px}
.immersive-hero h1.featured-name {font-size:clamp(54px,min(6.2vw,10.8svh),104px);line-height:.98;margin-bottom:24px;letter-spacing:-.055em}
.immersive-hero h2.featured-title {font-size:clamp(25px,min(2.65vw,4.6svh),40px);line-height:1.15;max-width:580px}
.immersive-hero .hero-description {color:#c6c2ca;font-size:clamp(14px,1.15vw,18px);line-height:1.65;max-width:600px;margin-top:22px}
.immersive-hero .audio-teaser {margin-top:30px;padding:18px 26px;border-radius:60px;border-color:#d3cbd455;background:linear-gradient(110deg,#b7ed0012,#24222d88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 10px 40px #0002}
.immersive-hero .audio-teaser:hover {border-color:var(--lime);background-color:#c4ff000c}
.immersive-hero .audio-teaser-top {gap:22px}
.immersive-hero .play-circle {width:54px;height:54px}
.immersive-hero .wave {height:50px}
.immersive-hero .hero-art {position:absolute;inset:auto -9% 0 auto;width:68%;height:calc(100% + 88px);margin:0;z-index:0;max-width:980px}
.immersive-hero .hero-art:before,.immersive-hero .hero-art:after {display:none}
.immersive-hero .portrait {width:100%;height:100%;aspect-ratio:auto;border-radius:0;background:transparent;overflow:visible}
.immersive-hero .portrait>img {width:100%;height:100%;object-fit:contain;object-position:right bottom;mask-image:linear-gradient(to bottom,#000 67%,transparent 99%);-webkit-mask-image:linear-gradient(to bottom,#000 67%,transparent 99%)}
.immersive-hero .portrait-caption {left:auto;right:16%;bottom:38px;align-items:center;gap:24px}
.immersive-hero .portrait-caption .portrait-guest-name {font-size:30px}
.immersive-hero .portrait-caption .portrait-guest-role {font-size:9px}
@media(min-width:761px) and (max-height:780px) {
 .immersive-hero .hero {padding-bottom:30px}
 .immersive-hero .intro-label {margin:15px 0 12px}
 .immersive-hero h1.featured-name {margin-bottom:18px}
 .immersive-hero .hero-description {margin-top:16px}
 .immersive-hero .audio-teaser {margin-top:20px;padding:14px 22px}
 .immersive-hero .play-circle {width:46px;height:46px}
 .immersive-hero .wave {height:42px}
}
@media(min-width:761px) and (max-width:1050px) {
 .immersive-hero .hero-copy {width:57%}
 .immersive-hero .hero-art {right:-17%;width:73%;height:90%}
 .immersive-hero .portrait-caption {right:25%;bottom:32px}
 .immersive-hero .portrait-caption .portrait-guest-name {font-size:25px}
 .immersive-hero .portrait-caption .portrait-guest-role {max-width:170px}
}
@media(max-width:760px) {
 .immersive-hero {margin-top:0;padding:16px 0 0;height:auto}
 .immersive-hero .hero {display:flex;flex-direction:column;padding:0;gap:0}
 .immersive-hero .hero:after {right:-22px;bottom:-20px;width:calc(100% + 44px);height:clamp(270px,75vw,440px);opacity:.65}
 .immersive-hero .hero-copy {width:100%;max-width:560px}
 .immersive-hero .intro-label {margin:20px 0 14px}
 .immersive-hero h1.featured-name {font-size:clamp(44px,10.4vw,78px);margin-bottom:20px}
 .immersive-hero h2.featured-title {font-size:clamp(25px,5.2vw,34px)}
 .immersive-hero .hero-description {font-size:15px;margin-top:18px}
 .immersive-hero .audio-teaser {margin-top:24px;padding:16px 20px;border-radius:28px}
 .immersive-hero .audio-teaser-top {gap:16px}
 .immersive-hero .play-circle {width:46px;height:46px}
 .immersive-hero .wave {height:44px}
 .immersive-hero .hero-art {position:relative;inset:auto;width:calc(100% + 44px);height:clamp(380px,105vw,620px);max-width:650px;margin:28px -22px 0}
 .immersive-hero .portrait>img {object-position:center bottom}
 .immersive-hero .portrait-caption {left:30px;right:30px;bottom:28px;justify-content:space-between}
 .immersive-hero .portrait-caption .portrait-guest-name {font-size:34px}
}

/* Keep the play control and waveform on one centered row. */
.immersive-hero .audio-teaser {display:grid;grid-template-columns:54px minmax(0,1fr);column-gap:22px;align-items:center}
.immersive-hero .audio-teaser-top {display:contents}
.immersive-hero .audio-teaser .play-circle {grid-column:1;grid-row:1;align-self:center;line-height:1}
.immersive-hero .audio-teaser .play-circle svg {display:block;width:24px;height:24px}
.immersive-hero .audio-teaser .wave {grid-column:2;grid-row:1;width:100%;min-width:0}
.immersive-hero .audio-teaser .wave i {max-height:100%;border-radius:99px}
@media(min-width:761px) and (max-height:780px) {
 .immersive-hero .audio-teaser {grid-template-columns:46px minmax(0,1fr);column-gap:20px}
}
@media(max-width:760px) {
 .immersive-hero .audio-teaser {grid-template-columns:46px minmax(0,1fr);column-gap:16px}
}

.immersive-hero .portrait:after {display:none}

/* Transparent Kyle cutout, with his poster artwork preserved. */
.kyle-feature .hero-art{width:75%;right:-13%;height:110%;max-width:1120px}
.kyle-feature .portrait>img{object-fit:contain;object-position:right bottom;mask-image:linear-gradient(to bottom,#000 77%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 77%,transparent 100%)}
.kyle-feature .portrait-caption{display:none}
.kyle-feature .hero:after{opacity:.35}
/* Homepage takeover is enabled only while Kyle is the featured guest. */
.kyle-home .immersive-hero{background:linear-gradient(#08000044,#08000044),#100302 url('/assets/kyle-feature-background.webp') center / cover no-repeat}
.kyle-home .immersive-hero:before{display:none}
.kyle-home .hero-copy{width:53%;max-width:760px}
.kyle-home .hero-art{right:-17%;width:73%;mask-image:linear-gradient(to right,transparent,#000 24%);-webkit-mask-image:linear-gradient(to right,transparent,#000 24%)}
.kyle-kicker{font-family:HostDisplay,Impact,sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(22px,2.2vw,34px);line-height:1.15;color:#d9ac8c;margin-bottom:20px}
.kyle-kicker span{font-family:Georgia,serif;color:#f02c22;letter-spacing:-.055em}
.kyle-home .hero h1.kyle-title{font-size:inherit;line-height:0;margin:0 0 0 -2.8%;width:102.8%;letter-spacing:normal}
.kyle-title img{display:block;width:100%;height:auto;max-width:none}
.kyle-home .hero-description{color:#f1d8c6;max-width:650px;font-family:Syne,Arial,sans-serif;font-weight:600;font-size:clamp(16px,1.3vw,20px);line-height:1.6;margin-top:26px;text-wrap:pretty}
.kyle-home .hero-description strong{font-weight:800}
.kyle-home .kyle-watch{margin-top:30px;border:1px solid #f32b1b;background:#20050277;color:#f4d9c3;padding:16px 24px;font-family:Syne,Arial,sans-serif;font-weight:700;font-size:16px;text-transform:uppercase;border-radius:999px;gap:0;box-shadow:inset 0 1px 0 #ff795a33;transition:background .2s,box-shadow .2s}
.kyle-home .kyle-watch>span{display:none}
.kyle-home .kyle-watch:hover{background:#8d0e08;box-shadow:0 0 28px #eb251a40}
.kyle-home .header-play{background:linear-gradient(145deg,#bd140e,#690603);border:1px solid #ef4a2c;color:#fff5ee;box-shadow:inset 0 2px 6px #ff794b66,0 6px 24px #920c1233}
.kyle-home .header-play:hover{background:#c22117}
.kyle-home .header a:focus-visible,.kyle-home .hero a:focus-visible{outline:3px solid #fff1de;outline-offset:6px}
.kyle-home .hero:after{opacity:.8;filter:none}
@media(min-width:761px) and (max-height:780px){.kyle-home .hero-copy{max-width:650px}.kyle-kicker{margin-bottom:15px}.kyle-home .hero h1.kyle-title{max-width:665px}.kyle-home .hero-description{margin-top:20px}.kyle-home .kyle-watch{margin-top:22px;padding:16px 25px}}
@media(max-width:760px){.kyle-home .header{background:#100302;width:100%;max-width:none;padding-left:22px;padding-right:22px}.kyle-home .hero-copy{width:100%;max-width:560px}.kyle-home .hero-art{right:auto;width:calc(100% + 44px);mask-image:none;-webkit-mask-image:none}.kyle-kicker{font-size:clamp(22px,5.6vw,34px);margin:12px 0 22px}.kyle-home .hero-description{font-size:16px;margin-top:22px}.kyle-home .kyle-watch{margin-top:24px;padding:16px 22px;font-size:14px}.kyle-home .hero:after{opacity:.65}}
@media(min-width:761px) and (max-width:1050px){.kyle-feature .hero-art{width:64%;right:-13%;height:85%}}
@media(max-width:760px){.kyle-feature .hero-art{width:calc(100% + 44px);height:auto;aspect-ratio:1;inset:auto;margin-top:26px}.kyle-feature .portrait>img{object-position:center bottom;mask-image:linear-gradient(to bottom,#000 80%,transparent);-webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent)}}