/* ==========================================================================
   Large-display layout — 1600px, 2K (2560) and 4K (3840) viewports.

   Loaded AFTER each page's stylesheet so these rules win.

   The approach: the rest of the site is already sized in rem, so raising the
   root font size scales type, spacing and container widths together instead
   of leaving a 1400px column marooned in the middle of a 4K screen.
   Container max-widths are therefore declared in rem here, not px.

   Note: a 3840px-wide *CSS* viewport means the OS is running at 100% scaling.
   Most 4K users run 150–200%, which reports ~1920–2560 CSS px and lands on the
   earlier tiers — which is why the steps get larger as they go up.
   ========================================================================== */

@media (min-width: 1600px) {
  :root { font-size: 17px; }
}

@media (min-width: 1920px) {
  :root { font-size: 18px; }
}

@media (min-width: 2560px) {
  :root { font-size: 21px; }
}

@media (min-width: 3840px) {
  :root { font-size: 26px; }
}

/* --------------------------------------------------------------------------
   Containers — in rem, so they widen with the root size above.
   90rem = 1530px @17px · 1890px @21px · 2340px @26px
   -------------------------------------------------------------------------- */
@media (min-width: 1600px) {
  .nav-container,
  .gallery-section {
    max-width: 90rem;
  }

  /* Reading columns stay narrow enough to scan — they grow with the type,
     not with the screen, so line length stays comfortable. */
  .hero-content,
  .contact-content {
    max-width: 50rem;
  }

  .about-hero-content {
    max-width: 56rem;
  }

  .work-header {
    max-width: 46rem;
  }

  .video-grid.portrait {
    max-width: 68rem;
  }
}

/* --------------------------------------------------------------------------
   Grids — fixed column counts on desktop so the rows never come out ragged.
   6 long-form videos → 2 rows of 3 · 4 Shorts → 1 row of 4 · 5 clients → 1 row
   -------------------------------------------------------------------------- */
@media (min-width: 1100px) {
  .video-grid.landscape {
    grid-template-columns: repeat(3, 1fr);
  }

  .video-grid.portrait {
    grid-template-columns: repeat(4, 1fr);
  }

  .client-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Hero — headline and portrait are vw-driven, so they need ceilings before
   they turn into billboards on a 4K panel.
   -------------------------------------------------------------------------- */
@media (min-width: 2560px) {
  .hero-title {
    font-size: clamp(3rem, 5vw, 7rem);
  }

  .hero-subtitle {
    font-size: clamp(1.4rem, 2.2vw, 2.4rem);
  }

  .hero-img {
    height: 58%;
    max-height: 62rem;
  }
}

/* --------------------------------------------------------------------------
   Spline zoom is driven by ASPECT RATIO, not resolution.

   Spline fits the scene inside its container, so at a given aspect ratio the
   crop is identical no matter how many pixels the screen has — 1920x1080,
   2560x1440 and 3840x2160 are all 16:9 and all need the same 1.35 from
   style.css. Only a wider-than-16:9 viewport leaves fresh gutters at the
   sides, because the scene then fits by height and falls short horizontally.
   -------------------------------------------------------------------------- */
@media (min-aspect-ratio: 16/9) and (max-aspect-ratio: 2/1) {
  .hero-3d-model {
    --spline-zoom: 1.45;
  }
}

/* 2:1 and wider — 2560x1080, 3440x1440 and similar ultrawides */
@media (min-aspect-ratio: 2/1) {
  .hero-3d-model {
    --spline-zoom: 1.95;
  }
}

/* Taller than 16:9 (a rotated panel, or a short browser window on a tall
   screen): the scene fits by width, so the sides are already covered. */
@media (max-aspect-ratio: 16/9) {
  .hero-3d-model {
    --spline-zoom: 1.35;
  }
}

/* --------------------------------------------------------------------------
   Ultra-wide (21:9 and wider) — the hero is a flex row, so on a short, very
   wide viewport the portrait crowds the text. Give the copy a firm ceiling.
   -------------------------------------------------------------------------- */
@media (min-aspect-ratio: 21/9) and (min-width: 2000px) {
  .hero-content {
    max-width: 44rem;
  }

  .hero-img {
    height: 66%;
  }
}

/* --------------------------------------------------------------------------
   `width: 100vw` on the fixed nav includes the scrollbar gutter, so the bar
   runs a scrollbar-width wider than the page. More visible the larger the
   screen. 100% is measured against the containing block instead.
   -------------------------------------------------------------------------- */
nav {
  width: 100%;
}