/* A rotated phone has tablet-like width but very little vertical room. */
@media (min-width: 641px) and (max-width: 1000px) and (max-height: 600px) and (orientation: landscape) {
  html, body { overflow-x: clip; }
  html, body { scrollbar-width: none; -ms-overflow-style: none; }
  html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }
  header { position: sticky; top: 0; height: 44px; }

  .hero {
    position: sticky;
    top: 44px;
    height: calc(100svh - 44px);
    min-height: 0;
  }

  .hero .hero-image {
    transform: none;
    object-position: center top;
  }

  .hero h1 {
    top: 15px;
    left: 4%;
    font-size: 19px;
    font-weight: 400;
  }

  .hero .roles {
    left: 8%;
    bottom: 39px;
    font-size: 36px;
    line-height: 1.12;
  }


  .hero .scroll-cue { right: 4%; bottom: 18px; left: auto; }

  .work, .coffee {
    height: auto;
    min-height: 100svh;
    overflow: visible;
  }

  .work { position: relative; top: auto; padding-top: 32px; scroll-margin-top: 44px; }
  .work-intro .statement { width: 100%; max-width: 100%; }
  .work-intro h2 { margin-bottom: 22px; }
  .work-intro .statement { margin-bottom: 0; }
  .work .work-topline { margin-top: -8px; padding-bottom: 0; }
  .work .annotation { width: min(580px, 73vw); margin-left: 14%; }
  .work .studio-board {
    height: calc(797px + 22.7vw);
    margin-top: -12px;
    transition: height 1050ms cubic-bezier(.2,.8,.2,1);
  }
  .work.board-complete .studio-board { height: calc(587px + 22.7vw); }
  .work .tablet-frame { padding: 2px; border-radius: 11px; }
  .work .tablet-screen { border-radius: 8px; }
  .work.board-complete .tablet-object { width: 37%; }
  .work.board-complete .print,
  .work.board-complete .print[data-id="amenity"],
  .work.board-complete .print[data-id="elevated"],
  .work.board-complete .dealer-card { width: 29%; }
  .work .annotation-final { left: 7%; width: min(620px, 86%); margin-left: 0; }
  .work .simplify-line {
    width: 100%;
    margin: calc(-29px - .48em) 0 12px;
    gap: .12em;
    font-size: clamp(76px, 20svh, 86px);
  }
}

@media (min-width: 721px) and (max-width: 1000px) and (max-height: 600px) and (orientation: landscape) {
  .hero h1 { font-size: 17px; }
  .hero .roles { left: 26%; bottom: 45px; }
}

@media (prefers-reduced-motion: reduce) {
  .work .studio-board { transition: none; }
}