@media (max-width:1200px){
  :root{
    --container-w:80%;
  }

  .hero h1,
  .hero p{
    max-width:60%;
  }

  .episode-card{
    grid-template-columns:380px 1fr;
  }

  .about-wrap{
    grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);
  }

  .series-wrap{
    grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);
  }

  #footer .footer-top{
    padding:20px 10%;
    background-size:auto 160%;
  }

  #footer .footer-bottom{
    padding:15px 10%;
  }
}

@media (max-width:1024px){
  :root{
    --container-w:88%;
  }

  .container,
  .hero-content,
  .section-inner,
  .doc-container{
    width:88%;
  }

  .hero{
    min-height:440px;
    background-position:center;
    background-size:120%;
  }

  .hero h1,
  .hero p{
    max-width:70%;
  }

  .episode-card{
    grid-template-columns:1fr;
    gap:20px;
  }

  .episode-card .thumb{
    max-width:520px;
    margin:0 auto;
  }

  .about-wrap{
    grid-template-columns:1fr;
    text-align:center;
  }

  .about-actions{
    justify-content:center;
  }

  .series-wrap{
    grid-template-columns:1fr;
    text-align:left;
  }

  .series-content{
    text-align:left;
  }

  #footer .footer-top{
    flex-wrap:wrap;
    justify-content:center;
  }

  #footer .footer-column{
    flex:1 1 45%;
    margin-bottom:20px;
    text-align:center;
  }

  #footer .footer-column ul{
    display:flex;
    flex-direction:column;
    align-items:center;
  }

  #footer .footer-bottom{
    flex-direction:column;
    gap:10px;
    text-align:center;
  }

  #footer .footer-links{
    justify-content:center;
  }

  .doc-container{
    grid-template-columns:1fr;
    gap:22px;
  }

  .doc-header{
    grid-column:auto;
    text-align:left;
  }

  .doc-toc{
    position:relative;
    top:auto;
    width:100%;
    margin-top:4px;
    order:2;
  }

  .doc-body{
    grid-column:auto;
    order:3;
  }
}

@media (max-width:880px){
  .hero{
    justify-content:center;
    text-align:center;
  }

  .hero-content{
    align-items:center;
    text-align:center;
  }

  .hero h1,
  .hero p{
    max-width:100%;
  }

  .hero-buttons{
    justify-content:center;
  }

  .header-buttons{
    gap:10px;
    flex-wrap:wrap;
    justify-content:center;
  }

  .section.recent-episode,
  .section.about,
  .section.series,
  .section.cta{
    padding:60px 0;
  }
}

@media (max-width:768px){
  body{
    font-size:15px;
  }

  :root{
    --container-w:90%;
  }

  .container{
    width:90%;
    padding:0 12px;
    flex-direction:column;
    gap:10px;
  }

  .hero{
    padding:40px 0;
    min-height:420px;
  }

  .hero-content{
    width:92%;
    padding:0 10px;
  }

  .hero h1{
    font-size:clamp(1.5rem,1.1rem + 2vw,2.1rem);
  }

  .hero p{
    font-size:1.05em;
  }

  .hero-buttons{
    gap:10px;
  }

  .hero-button,
  .minor-hero-button{
    padding:11px 20px;
    font-size:1.02em;
  }

  .header-buttons{
    gap:8px;
  }

  #header-button{
    padding:8px 16px;
  }

  .dropdown-menu{
    min-width:180px;
    left:0;
    right:auto;
  }

  .episode-desc{
    font-size:.98em;
  }

  .cta-wrap{
    width:90%;
    grid-template-columns:1fr;
    text-align:center;
  }

  .section.cta .cta-actions{
    justify-content:center;
  }

  .doc{
    padding:40px 0;
  }

  .doc-container{
    width:90%;
    gap:18px;
  }

  .doc-section{
    margin:22px 0;
  }

  .doc-section h2{
    font-size:1.15rem;
  }
}

@media (max-width:640px){
  :root{
    --container-w:92%;
  }

  .hero{
    background-size:140%;
  }

  .episode-card{
    gap:18px;
  }

  .episode-card .thumb .badge{
    font-size:18px;
    padding:4px 8px;
  }

  .series-card{
    padding:16px;
  }

  #footer .footer-top{
    padding:20px 6% 28px;
    background-size:auto 130%;
  }

  #footer .footer-column{
    flex:1 1 100%;
  }

  #footer .footer-links a{
    font-size:15px!important;
  }

  #footer .footer-column ul li a{
    font-size:16px!important;
  }

  .doc-toc{
    padding:12px;
  }

  .doc-toc h2{
    font-size:1.1rem;
  }

  .doc-toc ol{
    font-size:.94rem;
  }
}

@media (max-width:480px){
  body{
    font-size:14px;
  }

  .header-spacer{
    height:56px;
  }

  .header-buttons a,
  #header-button,
  .hero-button,
  .minor-hero-button{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  .hero{
    padding:28px 0;
    min-height:360px;
    background-size:160%;
  }

  .hero-content{
    width:95%;
    gap:14px;
    padding:0 8px;
  }

  .hero h1{
    font-size:clamp(1.3rem,1rem + 1.8vw,1.8rem);
  }

  .hero p{
    font-size:1.02em;
  }

  .hero-button,
  .minor-hero-button{
    width:100%;
    max-width:260px;
    font-size:.96em;
  }

  .section.recent-episode,
  .section.about,
  .section.series,
  .section.cta{
    padding:52px 0;
  }

  .episode-card .thumb{
    max-width:100%;
  }

  .series-logo{
    width:160px;
    margin:0 auto 10px;
  }

  .series-card-inner{
    flex-direction:column;
    align-items:flex-start;
    text-align:left;
  }

  .series-actions{
    justify-content:flex-start;
  }

  .section.cta h2{
    font-size:1.4rem;
  }

  .section.cta p{
    font-size:1.02em;
  }

  .cta-wrap{
    width:92%;
  }

  #footer .footer-column h4{
    font-size:18px;
  }

  #footer .footer-bottom{
    font-size:12px;
  }

  #footer #footer-logo{
    height:18px;
  }

  .doc-container{
    width:92%;
  }

  .doc-header h1{
    font-size:clamp(1.55rem,1.2rem + 2vw,2rem);
  }

  .doc-meta{
    font-size:.9rem;
  }

  .doc-section p,
  .doc-section ul{
    font-size:.96rem;
  }
}

@media (max-width:380px){
  .hero{
    padding:24px 0;
  }

  .hero h1{
    font-size:1.25rem;
  }

  .hero p{
    font-size:.98em;
  }

  .hero-button,
  .minor-hero-button{
    max-width:230px;
  }

  .episode-actions,
  .about-actions,
  .series-actions,
  .section.cta .cta-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .series-title{
    font-size:1.05rem;
  }

  #footer .footer-links{
    justify-content:center;
  }
}

@media (max-width:320px){
  .hero h1{
    font-size:1.05rem;
  }

  .hero-button,
  .minor-hero-button{
    width:95%;
    max-width:220px;
    font-size:.9em;
    padding:8px 14px;
  }

  .header-buttons{
    flex-direction:column;
    align-items:stretch;
  }

  .dropdown-menu{
    min-width:160px;
  }

  .doc-header h1{
    font-size:1.3rem;
  }

  .doc-toc{
    padding:10px;
  }

  .doc-section{
    margin:18px 0;
  }
}