:root {
  --ink: #111;
  --paper: #f6f0df;
  --yellow: #ffe400;
  --red: #ef3030;
  --blue: #1775d1;
  --white: #fff;
  --border: 4px solid var(--ink);
  --shadow: 8px 8px 0 var(--ink);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

* {
  min-width: 0;
}
a { color: inherit; text-decoration: none; }
.site-header { position: sticky; top: 0; z-index: 20; display:flex; align-items:center; justify-content:space-between; gap:30px; padding:16px 5vw; background:var(--white); border-bottom:var(--border); }
.brand { display:flex; flex-direction:column; line-height:.85; }
.brand-main { font: 2rem Bangers, Impact, sans-serif; letter-spacing:1px; }
.brand-sub { font-size:.55rem; font-weight:800; letter-spacing:.16em; margin-top:7px; }
nav { display:flex; gap:24px; font-size:.78rem; font-weight:900; letter-spacing:.08em; }
nav a:hover { color:var(--red); }
.menu-toggle { display:none; border:0; background:none; font-size:1.8rem; }
.hero { min-height:78vh; position:relative; overflow:hidden; display:flex; align-items:center; padding:80px 8vw; background:var(--yellow); border-bottom:var(--border); }
.hero:before { content:""; position:absolute; inset:0; opacity:.14; background-image: radial-gradient(var(--ink) 1.5px, transparent 1.5px); background-size:16px 16px; }
.hero-content { position:relative; z-index:2; max-width:850px; }
.eyebrow { font-size:.72rem; font-weight:900; letter-spacing:.18em; margin:0 0 12px; }
h1,h2,h3,.brand-main,.footer-brand { font-family:Bangers, Impact, sans-serif; }
h1 { font-size:clamp(5rem, 13vw, 10.5rem); line-height:.78; margin:0; letter-spacing:.015em; text-shadow:7px 7px 0 var(--white), 11px 11px 0 var(--ink); }
h1 span { color:var(--red); }
.hero-copy { max-width:600px; font-size:1.15rem; font-weight:700; line-height:1.5; margin:35px 0 25px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; }
.button { display:inline-block; padding:15px 21px; border:var(--border); font-weight:900; box-shadow:6px 6px 0 var(--ink); transition:.15s; }
.button:hover { transform:translate(4px,4px); box-shadow:2px 2px 0 var(--ink); }
.button-primary { background:var(--red); color:var(--white); }
.button-secondary { background:var(--white); }
.hero-caption { position:absolute; right:5vw; bottom:24px; transform:rotate(-5deg); font:2rem Bangers; letter-spacing:.05em; }
.burst { position:absolute; width:260px; height:260px; background:var(--blue); clip-path:polygon(50% 0,59% 37%,84% 8%,70% 43%,100% 50%,70% 57%,92% 84%,62% 68%,50% 100%,40% 68%,10% 90%,30% 58%,0 50%,31% 42%,9% 14%,40% 35%); opacity:.95; }
.burst-one { right:7%; top:13%; transform:rotate(8deg); }
.burst-two { right:24%; bottom:-70px; transform:scale(.7) rotate(-12deg); background:var(--red); }
.section { padding:90px 7vw; border-bottom:var(--border); }
.section-heading { margin-bottom:40px; }
.section-heading.split { display:flex; justify-content:space-between; align-items:end; gap:20px; }
h2 { font-size:clamp(3rem, 7vw, 6rem); line-height:.85; margin:0; }
.latest-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 30px; align-items: stretch; max-width: 100%; }
.video-frame {
    width: 100%;
    height: max-content;
    align-self: center;
    border: var(--border);
    box-shadow: var(--shadow);
    background: var(--ink);
}

.video-placeholder {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--ink);
    color: var(--white);

    display: flex;
    align-items: center;
    justify-content: center; 
}
.video-placeholder iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-placeholder .play,
.video-placeholder > span:not(.play) {
  /* Keep placeholder content centered before the video loads */
}

.video-placeholder:not(:has(iframe)) { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 15px; text-align: center; padding: 30px; }
.play { display:grid; place-items:center; width:76px; height:76px; border-radius:50%; background:var(--red); border:var(--border); color:var(--white); font-size:1.5rem; }
.latest-copy { padding:35px; border:var(--border); background:var(--white); box-shadow:var(--shadow); }
.latest-copy h3 { font-size:3.5rem; line-height:.9; margin:15px 0; }
.latest-copy p { line-height:1.7; }
.issue-label,.card-meta,.host-role { font-size:.7rem; font-weight:900; letter-spacing:.13em; }
.tag-row { display:flex; flex-wrap:wrap; gap:8px; margin:25px 0; }
.tag-row span { background:var(--yellow); border:2px solid var(--ink); padding:6px 8px; font-size:.7rem; font-weight:900; }
.text-link { font-weight:900; text-decoration:underline; }
.episodes { background:var(--blue); color:var(--white); }
.episode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; width: 100%; max-width: 100%; }
.episode-card { min-width: 0; overflow: hidden; display:grid; grid-template-columns:auto 1fr; gap:18px; background:var(--white); color:var(--ink); border:var(--border); padding:23px; min-height:180px; box-shadow:6px 6px 0 var(--ink); }
.episode-card:hover { transform:rotate(-1deg); }
.number { font:3.5rem Bangers; color:var(--red); line-height:.8; }
.episode-card h3 { font-size:2rem; line-height:.9; margin:8px 0; }
.episode-card p { overflow-wrap: anywhere; word-break: break-word; font-size:.85rem; line-height:1.45; margin-bottom:0; }
.episode-card img { display: block; width: 100%; max-width: 100%; height: auto; }
.host-grid { display:grid; grid-template-columns:1fr 1fr; gap:30px; }
.host-card { border:var(--border); background:var(--white); box-shadow:var(--shadow); }
.host-card:hover { transform:rotate(-1deg); }
.host-photo { min-height:360px; display:flex; align-items:end; padding:25px; background:var(--yellow); position:relative; overflow:hidden; }
.host-photo:after { content:""; position:absolute; inset:20px; border:3px dashed var(--ink); transform:rotate(-2deg); }
.host-photo span { position:relative; z-index:2; font:5rem Bangers; text-shadow:4px 4px 0 var(--white); }
.photo-paul { background:var(--red); }
.host-info { padding:25px; }
.host-info h3 { font-size:3.5rem; margin:8px 0; }
.host-info p { line-height:1.6; }
.find-us { background:var(--paper); }
.social-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:var(--border); border-left:var(--border); }
.social-grid a { min-height:140px; display:flex; flex-direction:column; justify-content:space-between; padding:20px; border-right:var(--border); border-bottom:var(--border); background:var(--white); }
.social-grid a:nth-child(3n+1) { background:var(--yellow); }
.social-grid a:hover { background:var(--red); color:var(--white); }
.social-grid strong { font:2.2rem Bangers; }
.social-grid span { font-size:.65rem; font-weight:900; letter-spacing:.1em; }
footer { background:var(--ink); color:var(--white); text-align:center; padding:65px 20px; }
.footer-brand { font-size:5rem; line-height:.8; }
footer p { font-size:.65rem; letter-spacing:.2em; font-weight:900; }
footer a { font-weight:800; color:var(--yellow); }
@media (max-width: 900px) {
  nav { display:none; position:absolute; top:100%; left:0; right:0; background:var(--white); border-bottom:var(--border); padding:20px 5vw; flex-direction:column; }
  nav.open { display:flex; }
  .menu-toggle { display:block; }
  .latest-grid,.host-grid { grid-template-columns:1fr; }
  .episode-grid { grid-template-columns:1fr 1fr; }
  .social-grid { grid-template-columns:1fr 1fr; }
  .hero { min-height:72vh; padding:70px 7vw; }
  .burst-one { right:-70px; top:20%; }
}
@media (max-width: 560px) {
  .episode-grid,.social-grid { grid-template-columns:1fr; }
  .section { padding:65px 5vw; }
  h1 { font-size:4.8rem; }
  .hero-caption { display:none; }
  .latest-copy h3 { font-size:2.8rem; }
}