/* ==========================================================================
   Device refinements
   Loaded last on every page. Layout-only additions for tablets in portrait,
   phones in landscape and very large screens. Animation keyframes, timings
   and scripted motion are unchanged.
   ========================================================================== */

/* The rotated ticker is wider than the viewport; clip it instead of letting
   it add sideways scrolling. `clip` (unlike `hidden`) keeps position:sticky working. */
main {
  overflow-x: clip;
}

/* --------------------------------------------------------------------------
   Tablets in portrait (iPad, iPad Air, iPad Mini, Android tablets)
   The desktop hero leaves the ad cards on top of the headline here, so the
   cards move into a row above the headline and a row below the buttons.
   -------------------------------------------------------------------------- */
@media (min-width: 701px) and (max-width: 1100px) and (orientation: portrait) {
  .hero {
    height: auto;
    min-height: max(980px, 100svh);
    max-height: none;
  }

  .hero-copy {
    padding-top: clamp(270px, 33vw, 340px);
  }

  .soda {
    top: 118px;
    left: 4%;
    width: 25%;
    height: clamp(170px, 22vw, 230px);
  }

  .fashion {
    top: 110px;
    right: 4%;
    width: 25%;
    height: clamp(170px, 22vw, 230px);
  }

  .aura,
  .noir {
    bottom: 80px;
    width: 25%;
    height: clamp(150px, 19vw, 200px);
  }

  .aura {
    left: 7%;
  }

  .noir {
    right: 7%;
  }

  .hero-bottom {
    margin-top: 34px;
  }
}

/* --------------------------------------------------------------------------
   Phones in landscape and other short screens
   -------------------------------------------------------------------------- */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 701px) {
  html {
    scroll-padding-top: 70px;
  }

  .nav {
    height: 64px;
  }

  .nav .brand {
    width: 82px;
  }

  .nav-cta {
    padding: 10px 16px;
  }

  /* Hero: headline sized to the short viewport, cards pushed to the edges */
  .hero {
    height: auto;
    min-height: 0;
    max-height: none;
    padding-top: 64px;
    padding-bottom: 90px;
  }

  .hero-copy {
    padding-top: 44px;
  }

  .hero-copy .eyebrow {
    margin-bottom: 14px;
  }

  .hero h1 {
    font-size: 6.2vw;
  }

  .hero-bottom {
    margin-top: 22px;
    gap: 40px;
  }

  .soda {
    top: 92px;
    left: -2%;
    width: 16%;
    height: 135px;
  }

  .fashion {
    top: 86px;
    right: -2%;
    width: 16%;
    height: 135px;
  }

  .aura,
  .noir {
    bottom: 48px;
    width: 15%;
    height: 112px;
  }

  .aura {
    left: 2%;
  }

  .noir {
    right: 2%;
  }

  .float-ad > span {
    font-size: 5px;
    padding: 6px 8px;
  }

  .hero-foot {
    bottom: 18px;
  }

  .page-heading {
    padding-top: 110px;
    padding-bottom: 40px;
  }

  /* Home: pinned "selected work" slider has to fit in ~390px of height */
  .work-sticky {
    min-height: 0;
    padding-top: 76px;
  }

  .work .section-label {
    display: none;
  }

  .work-head {
    margin-bottom: 14px;
  }

  .work h2 {
    font-size: 4vw;
  }

  .project-button {
    height: 50svh;
    min-height: 0;
  }

  .project-overlay {
    font-size: 3.2vw;
    bottom: 16px;
  }

  .project-meta {
    margin-top: 8px;
  }

  .work-bottom {
    margin-top: 10px;
  }

  /* Short cards so each service fits on screen while it is pinned */
  .service-stack-visual {
    min-height: 300px;
  }

  .services-page .service-art {
    top: 80px;
    height: calc(100svh - 100px);
    min-height: 0;
  }

  dialog {
    padding: 34px 28px;
    max-height: 94svh;
  }

  dialog h2 {
    font-size: 32px;
    margin: 16px 0;
  }

  .mobile-menu {
    inset: 64px 0 0;
  }
}

/* --------------------------------------------------------------------------
   Large and ultra-wide screens (2K / 4K monitors)
   -------------------------------------------------------------------------- */
@media (min-width: 2200px) {
  :root {
    --pad: max(4.4vw, calc((100vw - 2400px) / 2));
  }

  .nav nav,
  .nav-cta,
  .section-label,
  .hero-bottom p,
  .text-link {
    font-size: 14px;
  }

  .pill {
    font-size: 14px;
  }
}