@media (max-width:900px){
  :root{
    --side-nav-width:0px;
  }

  body{
    padding-left:0;
    padding-top:0;
  }

  .site-header{
    position:relative;
    top:auto;
  }

  .side-nav{
    position:sticky;
    top:0;
    z-index:11;
    width:100%;
    height:auto;
    flex-direction:row;
    justify-content:center;
    border-right:none;
    border-bottom:1px solid var(--panel-border);
  }

  .side-nav ul{
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px 16px;
  }

  .header-banner{
    aspect-ratio:auto;
    overflow:visible;
  }

  .header-banner picture,
  .header-banner img{
    height:auto;
  }

  .header-banner img{
    object-fit:contain;
  }

  .wrap{
    align-items:flex-start;
  }

  .gallery-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (min-width:900px){
  .hero-wrap{
    gap:32px;
  }

  .gallery-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width:720px){
  .wrap{
    gap:10px 14px;
  }

  .hero{
    padding-top:52px;
  }

  .footer-content{
    flex-direction:column;
    align-items:center;
  }

  .theme-toggle{font-size:11px;}
}

@media (max-width:700px){
  .lightbox{
    padding:8px;
  }

  .lightbox-content{
    width:100%;
    max-width:100%;
    max-height:min(88vh, 88dvh);
    padding:0 34px;
  }

  .lightbox-media{
    max-height:min(80vh, 80dvh);
  }

  .lightbox-media img,
  .lightbox-media video{
    max-width:calc(100vw - 16px);
    max-height:min(calc(100vh - 110px), calc(100dvh - 110px));
  }

  .lightbox-prev{
    left:0;
  }

  .lightbox-next{
    right:0;
  }

  .lightbox-close{
    top:4px;
    right:4px;
    width:32px;
    height:32px;
  }

  .lightbox-nav{
    width:34px;
    height:34px;
  }
}

@media (max-width:560px){
  .gallery-grid{
    grid-template-columns:1fr;
  }
}

/* Below the sidebar breakpoint the footer links become a wrapping row with gaps instead of
   "·" separators (a separator would dangle at a line break); the theme toggle gets its own line. */
@media (max-width:900px){
  .footer-links{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    column-gap:24px;
  }
  .footer-links .footer-sep{
    display:none;
  }

  /* Touch targets of at least 44px height (WCAG 2.5.8 asks for 24px). Where rows sit close
     together the spacing grows instead of using negative margins, so hit areas never overlap. */
  .side-nav ul{
    gap:0 16px;
  }
  .side-nav a{
    padding:12px 8px;
    margin:0 -8px;
  }
  .footer-links a{
    display:inline-block;
    padding:15px 0;
  }
  .footer-links .theme-toggle{
    flex-basis:100%;
    min-height:44px;
    padding:0 16px;
    margin:0;
  }
  .footer-credit a{
    display:inline-block;
    padding:15px 4px;
    margin:-15px 0;
  }
  .hero-contact{
    gap:0 24px;
  }
  .hero-contact a{
    display:inline-flex;
    align-items:center;
    min-height:44px;
  }
}