@media (max-width: 768px){

  /* =========================
     0) Viewport + scroll lock
     ========================= */
  body.home{
    overflow: hidden;
    height: 100vh; /* fallback */
  }
  @supports (height: 100svh){
    body.home{ height: 100svh; } /* best for iPhone Safari UI overlap */
  }
  @supports (height: 100dvh){
    body.home{ height: 100dvh; } /* dynamic viewport when supported */
  }

  /* =========================
     1) Header: single row, no wrap
     ========================= */
  body.home header,
  header{
    padding: 6px 0;
  }

  header .nav-container{
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
  }

  header .logo a{
    font-size: 0.95rem;
    white-space: nowrap;
  }

  header nav{
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  header nav a{
    margin: 0 8px;
    font-size: 0.9rem;
    flex: 0 0 auto;
  }

  /* =========================
     2) Footer: fixed + safe area + single row
     ========================= */
  body.home footer{
    /* remove base footer spacing that can push things around */
    margin-top: 0;

    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    z-index: 3;
    padding-top: 6px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }

  footer .footer-inner{
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
  }

  footer .social-links{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  footer .social-btn img{
    width: 22px;
    height: 22px;
  }

  footer .footer-copy{
    font-size: 0.75rem;
    white-space: nowrap;
    flex: 0 0 auto;
  }

  /* =========================
     3) Main + carousel positioning (merge of your “good carousel” work)
     ========================= */

  /* Reserve space so content never sits under the fixed footer */
  body.home main{
    /* remove desktop margins that can push content down */
    margin: 0;

    /* you already like a tighter mobile padding */
    padding: 10px 12px;

    /* IMPORTANT: reserve for fixed footer + safe area */
    padding-bottom: calc(72px + env(safe-area-inset-bottom));

    overflow: hidden;

    /* stop vertical centering that makes the carousel feel too low */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  /* Kill desktop vertical margin that pushes stage down */
  body.home .carousel{
    margin: 0 auto;
    flex: 1 1 auto;
    min-height: 0;

    /* keep your centering horizontally, but don’t stretch weirdly */
    align-items: center;
    justify-content: center;
  }

  /* Make slides a consistent “stage” height on mobile.
     (Avoid 60vh and avoid 100% without a defined parent height.) */
  body.home .slide{
    /* stable stage height relative to visible viewport */
    height: 55svh;
    max-height: 55svh;

    /* if svh unsupported, fall back */
    height: 55vh;
    max-height: 55vh;

    /* ensure internal centering works */
    align-items: center;
    justify-content: center;

    overflow: hidden;
  }

  /* media boxes: consistent sizing inside the stage */
  body.home .slide > img,
  body.home .video-wrap{
    width: min(92vw, 720px);
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
  }

  body.home .slide > img{
    height: auto;
    object-fit: contain;
    display: block;
  }

  /* caption spacing tweak */
  body.home .caption{
    left: 10px;
    bottom: 10px;
    max-width: 92%;
  }
}

/* =========================
   Shader background safety reset
   =========================
   Keep the shader canvas full-screen on mobile. Do not scale or inset the
   canvas in CSS; the NO SIGNAL text size is handled inside no_signal.frag.
*/
@media (max-width: 768px){
  body.home #shaderCanvas{
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    min-width: 100vw;
    min-height: 100vh;
    transform: none;
    transform-origin: center center;
    pointer-events: none;
    z-index: 0;
  }

  @supports (height: 100dvh){
    body.home #shaderCanvas{
      height: 100dvh;
      min-height: 100dvh;
    }
  }

  /* Keep embedded media above the fixed footer without changing the design. */
  body.home .video-wrap{
    width: min(92vw, 720px);
    max-width: 100%;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 768px) and (orientation: landscape){
  /* Landscape phones have very little vertical space, so reduce footer height. */
  body.home footer{
    padding-top: 4px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
  }

  footer .footer-inner{
    gap: 6px;
  }

  footer .social-btn img{
    width: 18px;
    height: 18px;
  }

  footer .footer-copy{
    font-size: 0.65rem;
  }

  body.home main{
    padding-bottom: calc(50px + env(safe-area-inset-bottom));
  }

  body.home .slide{
    height: 68vh;
    max-height: 68vh;
  }

  body.home .slide.shader-peek{
    height: 72vh;
    max-height: 72vh;
  }

   body.home .caption{
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    max-width: 50%;
    bottom: 12px;
  }

  body.home .caption h2{
    font-size: 1rem;
    margin-bottom: 4px;
  }

  body.home .caption p{
    font-size: 0.8rem;
  }
}

/* =========================
   Landscape mobile carousel/footer clearance fix
   =========================
   Keeps the carousel above the fixed footer and makes the video smaller
   on short landscape phone viewports.
*/
@media (max-width: 768px) and (orientation: landscape){
  /* Use the actual visible viewport where supported, and remove extra vertical padding. */
  body.home{
    height: 100vh;
    min-height: 100vh;
  }

  @supports (height: 100dvh){
    body.home{
      height: 100dvh;
      min-height: 100dvh;
    }
  }

  body.home header{
    padding-top: 3px;
    padding-bottom: 3px;
  }

  header .logo a{
    font-size: 0.82rem;
  }

  header nav a{
    font-size: 0.78rem;
    margin: 0 6px;
  }

  body.home footer{
    padding-top: 2px;
    padding-bottom: calc(3px + env(safe-area-inset-bottom));
  }

  footer .footer-inner{
    gap: 5px;
  }

  footer .social-btn img{
    width: 16px;
    height: 16px;
  }

  footer .footer-copy{
    font-size: 0.58rem;
  }

  /* Reserve a smaller but explicit footer band and keep the stage high. */
  body.home main{
    padding-top: 2px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: calc(34px + env(safe-area-inset-bottom));
    justify-content: flex-start;
  }

  body.home .main-content{
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }

  body.home .carousel{
    flex: 1 1 auto;
    min-height: 0;
    margin-top: -6px;
    align-items: center;
    justify-content: flex-start;
  }

  /* Fit the slide into the usable space between header and footer. */
  body.home .slide{
    height: calc(100vh - 82px - env(safe-area-inset-bottom));
    max-height: calc(100vh - 82px - env(safe-area-inset-bottom));
    justify-content: center;
    align-items: center;
  }

  @supports (height: 100dvh){
    body.home .slide{
      height: calc(100dvh - 82px - env(safe-area-inset-bottom));
      max-height: calc(100dvh - 82px - env(safe-area-inset-bottom));
    }
  }

  body.home .slide.shader-peek{
    height: calc(100vh - 82px - env(safe-area-inset-bottom));
    max-height: calc(100vh - 82px - env(safe-area-inset-bottom));
  }

  @supports (height: 100dvh){
    body.home .slide.shader-peek{
      height: calc(100dvh - 82px - env(safe-area-inset-bottom));
      max-height: calc(100dvh - 82px - env(safe-area-inset-bottom));
    }
  }

  /* Smaller landscape video so it clears the footer on short phone screens. */
  body.home .video-wrap{
    width: min(76vw, 560px);
    max-width: 76vw;
    max-height: calc(100vh - 92px - env(safe-area-inset-bottom));
    aspect-ratio: 16 / 9;
  }

  @supports (height: 100dvh){
    body.home .video-wrap{
      max-height: calc(100dvh - 92px - env(safe-area-inset-bottom));
    }
  }
}

@media (max-width: 768px) and (orientation: portrait){

  body.home .caption{
    left: 50%;
    transform: translateX(-50%);
    bottom: 12px;

    max-width: 75%;
    padding: 6px 8px;

    text-align: center;
  }

  body.home .caption h2{
    font-size: 0.95rem;
    line-height: 1.1;
    margin-bottom: 2px;
  }

  body.home .caption p{
    font-size: 0.75rem;
    line-height: 1.1;
  }

}

/* =========================
   Mobile carousel viewport-centering override
   =========================
   Keep the slide content centered on the same fixed viewport axis as the
   carousel arrows. This intentionally overrides the earlier mobile
   flex-start carousel rules.
*/
body.home main{
  padding: 0;
  overflow: visible;
}

body.home .main-content{
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

body.home .carousel{
  width: 100vw;
  height: 100vh;
  margin: 0;
  flex: 0 0 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

body.home .slide,
body.home .slide.shader-peek,
body.home .slide.shader-peek.active{
  height: 100vh;
  max-height: 100vh;
  align-items: center;
  justify-content: center;
}

body.home .slide.active{
  display: flex;
}

@supports (height: 100dvh){
  body.home .main-content,
  body.home .carousel,
  body.home .slide,
  body.home .slide.shader-peek,
  body.home .slide.shader-peek.active{
    height: 100dvh;
    max-height: 100dvh;
  }
}

/* =========================
   Mobile caption-to-media spacing fix
   =========================
   Overrides the earlier bottom-anchored caption rules without changing the
   centered slide/arrow alignment.
*/
body.home .caption{
  bottom: auto;
  top: calc(50% + min(25.3125vw, 225px) + 8px);
  left: 50%;
  transform: translateX(-50%);
  max-width: 82vw;
  padding: 6px 8px;
  text-align: center;
}

body.home .caption h2,
body.home .caption p{
  margin-top: 0;
  margin-bottom: 0;
}

body.home .caption h2 + p{
  margin-top: 2px;
}

@media (max-width: 768px) and (orientation: landscape){
  body.home .caption{
    top: calc(50% + min(25.3125vw, 34vh) + 4px);
    padding: 4px 7px;
    max-width: 70vw;
  }

  body.home .caption h2{
    font-size: 0.85rem;
    line-height: 1.05;
  }

  body.home .caption p{
    font-size: 0.7rem;
    line-height: 1.05;
  }
}