/* Breakpoint rules are isolated for predictable mobile maintenance. */
@media (max-width: 820px) {
  /* Desktop is a fixed-height, no-scroll single-screen shell (body/.frame/
     .content all set height + overflow:hidden so everything fits in one
     viewport). Below this width the stacked single-column content routinely
     exceeds phone viewport heights, and with no scroll enabled anywhere in
     that chain it was fully unreachable - not just visually cramped, but
     with scrollTop physically pinned to 0 even when forced. Swap the whole
     chain to natural document flow + scroll instead of trying to keep
     everything pinned to one screen. */
  body {
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .frame {
    height: auto;
    overflow: visible;
  }

  .content {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .wrap {
    width: min(1120px, 96vw);
    padding: 0.3rem;
  }

  .banner,
  .content {
    padding-left: 0.8rem;
    padding-right: 0.8rem;
  }

  .main-copy {
    max-width: none;
  }

  .banner-logo {
    width: min(100%, 240px);
  }

  .mascot {
    max-height: 30vh;
  }

  .marine {
    animation-duration: 19s;
  }
}

@media (max-width: 520px) {
  .frame {
    border-radius: 8px;
  }

  h1 {
    font-size: clamp(1.2rem, 8vw, 1.6rem);
  }

  .portal-link {
    padding: 0.78rem 0.78rem 0.78rem 0.86rem;
  }

  .portal-link::before {
    left: 0.56rem;
  }

  .floor-track {
    width: min(1240px, 97vw);
  }

  .content {
    padding-top: 0.75rem;
    padding-bottom: 0.85rem;
  }
}