/* ======================== RESPONSIVE ======================== */

@media (max-width: 820px) {
  /* Layout */
  .hero-choices { padding: 0.45rem 0 1.15rem; }
  .home-intro { padding: 0.85rem 0 0.55rem; }
  .home-intro h1, .home-intro h2 { font-size: clamp(1.55rem, 4vw, 1.95rem); }
  .situations { padding: 0.8rem 0 1.15rem; }
  .situations-greeting { font-size: 1.5rem; }
  .situations-helper { max-width: 40rem; font-size: 1rem; margin-bottom: 0.9rem; }
  .situation-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .situation { padding: 1.05rem; }
  .popular-featured { padding: 1.2rem 0.9rem; border-radius: 14px; }
  .homepage-youtube-link { font-size: 1rem; }
  .letter-inner { flex-direction: column; align-items: flex-start; }
  .letter-light { max-width: 100%; }
  .newsletter { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .newsletter-form { width: 100%; }
  .input-row { width: 100%; }
  .input-row input { flex: 1; min-width: 0; width: auto; }
  .newsletter-trust { text-align: left; }

  /* Hub page */
  .section-hero { grid-template-columns: 1fr; gap: 1rem; }
  .section-hero-icon { display: none; }

  /* Article pages */
  .article-layout { grid-template-columns: 1fr; gap: 0; }
  .article-sidebar { display: none; }
  .related-grid { grid-template-columns: 1fr 1fr; }
  .verdict-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  /* Hub page + homepage feature cards */
  .topic-grid { grid-template-columns: 1fr; }
  .featured-card { grid-template-columns: 1fr; gap: 0.8rem; }
  .featured-arrow { display: none; }
}

@media (max-width: 540px) {
  /* Base */
  .page { padding: 0 1rem; }
  body { }

  /* Masthead */
  .site-header-shell { position: static; }
  .masthead {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 0.5rem 0 0.35rem;
  }
  .masthead-brand { width: 100%; }
  .masthead-lockup { gap: 0.38rem; }
  .masthead-symbol { width: 28px; height: 20px; }
  .masthead-wordmark-img { width: min(100%, 156px); }
  .masthead-tagline { font-size: 0.95rem; }

  /* Nav */
  .nav-strip { gap: 0.12rem; font-size: 0.98rem; flex-wrap: wrap; justify-content: flex-start; width: 100%; }
  .nav-strip a { padding: 0.55rem 0.72rem; }
  .nav-strip .coming-badge { display: block; margin: 0.28rem 0 0; width: fit-content; }

  /* Hero + Situations (homepage) */
  .hero-choices { padding: 0.35rem 0 1rem; margin-bottom: 1rem; }
  .home-intro { padding: 0.7rem 0 0.55rem; }
  .home-intro h1, .home-intro h2 { font-size: 1.48rem; line-height: 1.28; }
  .situations { padding: 0.7rem 0 1rem; }
  .situations-greeting { font-size: 1.35rem; margin-bottom: 0.38rem; }
  .situations-helper { font-size: 1rem; margin-bottom: 0.9rem; line-height: 1.5; }
  .situation-grid { grid-template-columns: 1fr; gap: 0.7rem; }
  .situation { padding: 0.95rem; gap: 0.78rem; }
  .situation-icon { width: 42px; height: 42px; font-size: 1.15rem; }
  .situation h3 { font-size: 1.06rem; }
  .situation p { font-size: 1rem; line-height: 1.5; }

  /* Picks (homepage) */
  .popular { padding: 1.15rem 0; }
  .popular-featured { padding: 1rem 0.8rem; margin-bottom: 1.25rem; }
  .start-here-card { padding: 0.92rem 0.9rem; margin-bottom: 0.9rem; }
  .start-here-card h3 { font-size: 1.12rem; }
  .start-here-card p { font-size: 0.96rem; }
  .pick-list-label { margin-bottom: 0.35rem; }
  .section-header { margin-bottom: 0.7rem; }
  .pick { padding: 0.76rem 0; }
  .pick h3 { font-size: 1.04rem; line-height: 1.4; }
  .featured-guide { padding: 0.85rem 0 1.1rem; }
  .featured-card { padding: 0.95rem 0.95rem; }
  .featured-card h3 { font-size: 1.12rem; }
  .featured-card p { font-size: 0.96rem; }
  .homepage-video-card { padding: 1rem 0.95rem 0.95rem; }
  .homepage-video-title { font-size: 1.16rem; }
  .homepage-video-points { margin-bottom: 0.8rem; }
  .homepage-youtube-link { width: 100%; justify-content: flex-start; }
  .pick .meta { font-size: 0.96rem; line-height: 1.5; }
  .pick-format { margin-bottom: 0.25rem; }
  .priority-badge { display: inline-block; margin: 0.45rem 0 0; }

  /* Letter (homepage) */
  .letter { padding: 1rem 0 0.8rem; }
  .letter-light { padding: 1rem 1rem 0.9rem; }
  .letter-inner { gap: 0.8rem; }
  .letter-content { width: 100%; padding-left: 0.12rem; }
  .letter-photo { width: 54px; height: 54px; font-size: 1.15rem; }
  .letter-label { font-size: 0.8rem; }
  .letter p { font-size: 1rem; line-height: 1.55; }

  /* Newsletter */
  .newsletter { padding: 1.4rem 0; }
  .newsletter-card { padding: 1rem 0 0.95rem; }
  .newsletter-copy { margin-bottom: 0.8rem; }
  .newsletter-copy h2 { font-size: 1.22rem; }
  .newsletter-copy p { font-size: 0.98rem; }
  .newsletter-text h2 { font-size: 1.2rem; }
  .input-row { flex-direction: column; gap: 0.5rem; }
  .input-row button { width: 100%; padding: 0.8rem; font-size: 1.05rem; }
  .newsletter-trust { text-align: left; }

  /* Footer */
  footer { padding: 0.85rem 0 1.1rem; font-size: 0.88rem; }
  .footer-top-row { flex-wrap: wrap; align-items: flex-start; margin-bottom: 0.25rem; }
  .footer-links { gap: 0.05rem 0.15rem; flex-wrap: wrap; margin-left: 0; justify-content: flex-start; }
  .footer-links a { padding: 0.3rem 0.45rem; min-height: 30px; }
  .footer-links .coming-badge { display: block; margin: 0.28rem 0 0; width: fit-content; }

  /* Hub page */
  .section-hero h1, .section-hero h2 { font-size: 1.55rem; }

  /* Article pages */
  .article-title { font-size: 1.55rem; line-height: 1.25; }
  .article-deck { font-size: 1.05rem; line-height: 1.55; }
  .article-body h2 { font-size: 1.3rem; }
  .step-number { align-items: flex-start; }
  .step-number h2 { font-size: 1.25rem; line-height: 1.28; }
  .type-header { align-items: flex-start; }
  .type-header h2 { font-size: 1.25rem; line-height: 1.28; }
  .featured-meta { flex-wrap: wrap; row-gap: 0.35rem; }
  .guide-row { flex-direction: column; gap: 0.4rem; }
  .guide-format { margin-top: 0; }
  .related-grid { grid-template-columns: 1fr; }
  .compare-table { font-size: 0.88rem; }
  .compare-table th, .compare-table td { padding: 0.6rem 0.75rem; }
}

@media (max-width: 360px) {
  body { font-size: 1.15rem; }
  .masthead-symbol { width: 24px; height: 17px; }
  .masthead-wordmark-img { width: min(100%, 144px); }
  .page { padding: 0 0.75rem; }
  .article-title { font-size: 1.4rem; line-height: 1.25; }
  .article-deck { font-size: 1rem; line-height: 1.5; }
  .pick h3 { font-size: 1.02rem; line-height: 1.4; }
  .pick .meta { font-size: 0.96rem; }
  .compare-table { font-size: 0.82rem; }
}