/* Short landscape phones need a compact scene system instead of the tablet/desktop choreography. */
@media (orientation: landscape) and (max-height: 540px) and (max-width: 980px) {
  .site-nav {
    min-height: 54px;
    padding-inline: max(18px, env(safe-area-inset-left)) max(18px, env(safe-area-inset-right));
  }

  .site-nav.is-open .site-nav__links {
    gap: 8px;
    padding: 58px max(24px, env(safe-area-inset-right)) 18px max(24px, env(safe-area-inset-left));
  }

  .site-nav.is-open .site-nav__track > a {
    font-size: clamp(26px, 8svh, 36px);
    line-height: 1;
  }

  .site-nav.is-open .site-nav__resume {
    margin-top: 8px;
  }

  html.hero-handoff-enabled .hero {
    height: 390svh;
  }

  html.hero-handoff-enabled .approach {
    height: 730svh;
    margin-top: -390svh;
  }

  html.hero-handoff-enabled .hero__glass {
    width: 55vw;
    padding: 54px 28px 18px max(24px, env(safe-area-inset-left));
    align-items: center;
  }

  html.hero-handoff-enabled .hero__copy {
    width: 100%;
    max-width: 430px;
  }

  html.hero-handoff-enabled .hero .eyebrow {
    margin-bottom: 9px;
    font-size: 8px;
  }

  html.hero-handoff-enabled .hero__identity {
    --hero-title-size: clamp(32px, 10svh, 46px);
    --hero-title-lines-height: 1.72;
    gap: 10px;
    margin-top: 8px;
  }

  html.hero-handoff-enabled .hero h1 {
    font-size: var(--hero-title-size);
    line-height: .88;
  }

  html.hero-handoff-enabled .hero__lead {
    max-width: 38ch;
    margin-top: 12px;
    font-size: 11px;
    line-height: 1.38;
  }

  html.hero-handoff-enabled .hero__actions {
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-top: 12px;
    display: flex;
  }

  html.hero-handoff-enabled .hero__actions .text-link {
    min-height: 28px;
    padding-block: 6px;
    font-size: 8px;
  }

  html.hero-handoff-enabled .hero__actions .text-link--quiet {
    margin-left: 0;
  }

  html.hero-handoff-enabled .hero__character,
  html.hero-handoff-enabled .hero__glass-character {
    right: -6vw;
    bottom: -14svh;
    width: 68vw;
    height: 116%;
    object-position: right bottom;
    transform: translate3d(0, 0, 0);
  }

  html.hero-handoff-enabled .approach__sticky {
    --approach-card-bottom: 18px;
    --approach-card-height: min(72svh, 280px);
    --approach-card-start-height: min(62svh, 240px);
  }

  html.hero-handoff-enabled .approach__title {
    top: 54px;
    right: 2vw;
    bottom: auto;
    width: 48vw;
    padding-inline: 2vw;
  }

  html.hero-handoff-enabled .approach__title .eyebrow {
    margin-bottom: 8px;
    font-size: 8px;
  }

  html.hero-handoff-enabled .approach__title h2 {
    font-size: clamp(27px, 8svh, 36px);
    line-height: .94;
  }

  html.hero-handoff-enabled .approach-card {
    width: 42vw;
    min-height: var(--approach-card-height);
    bottom: var(--approach-card-bottom);
    left: 4vw;
    padding: 18px;
    transform: translate3d(calc(var(--distance) * 48vw), calc(var(--card-lift) * .45px), 0) scale(var(--card-scale));
  }

  html.hero-handoff-enabled .approach-card > p {
    margin-bottom: 12px;
    font-size: 8px;
  }

  html.hero-handoff-enabled .approach-card > div {
    font-size: 11px;
    line-height: 1.42;
  }

  html.hero-handoff-enabled .approach-card-number {
    display: none;
  }

  .work-intro {
    align-items: center;
    padding: 58px max(28px, env(safe-area-inset-right)) 18px max(28px, env(safe-area-inset-left));
  }

  .work-intro .eyebrow,
  .project-scene__copy .eyebrow {
    margin-bottom: 10px;
    font-size: 8px;
  }

  .work-intro h2 {
    max-width: 16ch;
    margin-inline: auto;
    font-size: clamp(31px, 9.4svh, 43px);
    line-height: .93;
  }

  .work-intro > div > p:last-child {
    max-width: 58ch;
    margin-top: 14px;
    font-size: 10px;
    line-height: 1.45;
  }

  .work__stage-index {
    right: max(18px, env(safe-area-inset-right));
    bottom: 10px;
    left: max(18px, env(safe-area-inset-left));
  }

  .project-scene {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: 24px;
    padding: 56px max(24px, env(safe-area-inset-right)) 18px max(24px, env(safe-area-inset-left));
    translate: 0 10px;
  }

  .project-scene__feature {
    min-width: 0;
    max-height: calc(100svh - 76px);
  }

  .project-scene__feature > img,
  .project-scene__feature object {
    max-height: calc(100svh - 82px);
  }

  .project-scene__copy {
    width: 100%;
    max-height: calc(100svh - 70px);
  }

  .project-scene__copy h2 {
    font-size: clamp(27px, 8.6svh, 38px);
    line-height: .94;
  }

  .project-scene__copy > p:not(.eyebrow) {
    margin-top: 12px;
    font-size: 10px;
    line-height: 1.38;
  }

  .project-scene__thumbs {
    gap: 6px;
    margin: 12px 0;
  }

  .project-scene__thumbs a {
    width: clamp(38px, 5.3vw, 50px);
    border-radius: 7px;
  }

  .project-scene__copy .button,
  .explorations__panel .button {
    border-radius: 10px;
    padding: 13px 22px;
    font-size: 8px;
  }

  .explorations {
    height: 150svh;
    min-height: 150svh;
  }

  .explorations__sticky {
    height: 100svh;
    min-height: 0;
    padding: 56px max(22px, env(safe-area-inset-right)) 16px max(22px, env(safe-area-inset-left));
    overflow: hidden;
  }

  .explorations__panel {
    min-height: calc(100svh - 72px);
    border-radius: 20px;
    padding: 16px 24px;
  }

  .explorations__panel .eyebrow {
    margin-bottom: 8px;
    font-size: 8px;
  }

  .explorations__panel h2 {
    font-size: clamp(28px, 8.6svh, 38px);
    line-height: .94;
  }

  .explorations__panel > p:not(.eyebrow) {
    max-width: 64ch;
    margin-top: 9px;
    font-size: 9.5px;
    line-height: 1.4;
  }

  .explorations__cards {
    gap: 7px;
    margin: 10px auto;
  }

  .explorations__cards a {
    width: clamp(40px, 5.7vw, 54px);
    border-radius: 7px;
  }

  .contact {
    min-height: 100svh;
    padding: 68px max(22px, env(safe-area-inset-right)) 24px max(22px, env(safe-area-inset-left));
  }

  .contact__header .eyebrow {
    margin-bottom: 10px;
    font-size: 8px;
  }

  .contact__header h2 {
    font-size: clamp(30px, 9svh, 42px);
    line-height: .94;
  }

  .contact-dashboard {
    margin-top: 24px;
  }

  .contact-dashboard__identity,
  .contact-dashboard__form {
    padding: 22px;
  }
}