/* Mobile/tablet refinements (<=900px only; desktop layout unchanged) */
@media (max-width: 900px) {
  /* Compact header: smaller logo, nav in one row with 44px tap targets */
  .site-header { gap: 6px !important; padding: 14px 12px 6px !important; }
  .site-header .logo, .site-header .logo img { height: 104px !important; }
  .main-nav { gap: 4px 6px !important; flex-wrap: wrap; justify-content: center; }
  .main-nav a { font-size: 15px !important; padding: 12px 8px; line-height: 20px; display: inline-block; }

  /* Film filters */
  .filter-btn { min-height: 44px; padding: 10px 12px; font-size: 14px; }
  .film-filters { gap: 8px; }
  .lb-meta { font-size: 14px; }
  .lb-roles { font-size: 14px; color: #888; }

  /* FILM page: Letterboxd-style poster grid, 4 per row, no sideways scroller */
  .film-row { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 7px !important;
    overflow: visible !important; padding: 0 0 18px !important; margin-bottom: 4px; scrollbar-width: none; }
  .film-row::-webkit-scrollbar { display: none; height: 0; }
  .film-row .lb-item { flex: none; min-width: 0; width: auto; }
  .film-row .lb-poster { border-radius: 4px; }
  .film-row .lb-meta { margin-top: 5px; font-size: 11px; line-height: 1.25; }
  .film-row .lb-title { font-size: 11px; overflow-wrap: anywhere; }
  .film-row .lb-year { font-size: 10px; }
  .film-row .lb-roles { display: none; }

  /* MUSIC page: album tiles 3 per row, wrapping (no sideways scroll) */
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px 8px !important; justify-items: stretch; overflow: visible; }
  .grid .grid-item { max-width: none; width: auto; min-width: 0; }
  .grid .grid-item .caption { margin-top: 5px; font-size: 11px; line-height: 1.25; overflow-wrap: anywhere; }

  /* Multiple YouTube embeds: 2 per row (odd last one spans full width); single embeds untouched */
  .videos { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px 8px !important; }
  .videos > .video:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .videos > .video { display: flex; flex-direction: column; min-width: 0; }
  .video h3, .yt-title { font-size: 12px !important; margin: 0 0 6px !important; line-height: 1.25; flex: 1 1 auto; }
  .page-content .section > div:has(> div > div > :is(iframe, .yt-facade)) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px !important; margin-top: 8px !important; }
  .page-content .section > div:has(> div > div > :is(iframe, .yt-facade)):has(> div:only-child) { grid-template-columns: 1fr; }
  .page-content .section > div:has(> div > div > :is(iframe, .yt-facade)) > div { flex: none !important; max-width: none !important; min-width: 0; }
  .page-content .section > div:has(> div > div > :is(iframe, .yt-facade)) > div:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* ART page: justified rows, NEVER cropped. Each tile grows in proportion to its real aspect ratio (--ar, set
     per item from the image file), so every row shares one height and fills the width exactly (~2-3 per row on phones). */
  .art-grid { display: flex !important; flex-wrap: wrap; column-count: auto !important; gap: 6px !important; }
  .art-grid::after { content: ""; flex: 999 1 0; }
  .art-grid .item { flex: var(--ar, 1) 1 calc(var(--ar, 1) * 28vw); margin: 0 !important; min-width: 0; break-inside: auto; }
  .art-grid .item img { width: 100% !important; height: auto !important; object-fit: contain !important; display: block; }

  /* VERMIN callout ("100% underground..."): body-text scale on phones */
  .hero-text .pitch { font-size: 17px !important; font-weight: 700 !important; line-height: 1.45 !important; padding: 6px 0 !important; margin: 14px 0 0 !important; max-width: 100%; }

  /* MUSIC: the narrower desktop pair (max-width:320px embeds = row 2) renders at ~50% of a normal 2-up tile, centered */
  .page-content .section > div:has(> div[style*="max-width:320px"]) { grid-template-columns: repeat(2, calc((100% - 8px) / 4)) !important; justify-content: center; }
  .page-content .section > div:has(> div[style*="max-width:320px"]) .yt-facade .yt-play { width: 22px; }
  .page-content .section > div:has(> div[style*="max-width:320px"]) .yt-title { font-size: 10px !important; margin-bottom: 4px !important; }
  .page-content .section > div:has(> div[style*="max-width:320px"]) .yt-facade .yt-play::before { font-size: 7px; }

  /* Album / splash pages: compact layout (cover not full-bleed, smaller buttons, thumbnail galleries) */
  .hero { gap: 18px !important; margin: 18px auto !important; justify-content: center; }
  .hero .poster { flex: 0 0 auto !important; width: 65%; max-width: 300px; margin: 0 auto; }
  .hero-text { flex: 1 1 100% !important; }
  .hero-text h1 { font-size: 30px !important; }
  .section { margin: 30px auto !important; }
  .links { gap: 6px !important; }
  .links a { min-height: 40px; padding: 8px 12px !important; font-size: 13px; letter-spacing: 0.3px; }
  .section .gallery { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; }
  .section .gallery a { flex: none !important; display: block !important; min-width: 0; max-width: none !important; }
  .section .gallery img, .section .gallery.thumbs.big img { width: 100% !important; height: auto !important; max-height: none !important; aspect-ratio: 1 / 1; object-fit: cover; }


  /* Landing page links + newsletter */
  .landing-links { gap: 6px; }
  .landing-links a { display: inline-block; padding: 8px 6px; }
  .newsletter-form label { font-size: 14px; }
  .newsletter-form input[type="email"] { width: 100%; min-height: 44px; font-size: 16px; }
  .newsletter-form button { min-height: 44px; font-size: 15px; }

  /* Contact */
  .contact-email { display: inline-block; padding: 6px 0; overflow-wrap: anywhere; }

  /* Footer */
  .site-footer, body > footer { font-size: 14px; }
  .social-footer { gap: 8px; }
  .social-footer a { padding: 4px; }

  /* Splash/album pages */
  .tracklist li { padding: 0 !important; align-items: center; }
  .tracklist .t a { display: block; padding: 12px 0; }
  .screening a { display: inline-block; padding: 10px 0; }
  .links a { min-height: 44px; display: inline-flex !important; align-items: center; }
  .gallery.thumbs a { max-width: 100%; }
  .gallery.thumbs img { max-width: 100%; }
  .section a:has(> img) { display: block; }
  iframe { max-width: 100%; }
}
@media (max-width: 500px) {
  .main-nav a { font-size: 14px !important; padding: 12px 6px; }
}