/* Phone composition: keep the camera readable at every point of the journey. */
@media (max-width: 760px) {
  html, body { overflow-x: clip; }
  .home-view, .camera-journey, .camera-sticky { height: 100svh; min-height: 0; }
  /* clip does not create an internal scroll container. With hidden, Safari
     and Chrome scrolled this full-screen stage by 316px when the film began. */
  .camera-sticky { overflow: clip; background: #050607; }
  .camera-visual {
    inset: auto;
    width: 100%;
    height: 100%;
    transform-origin: 50% 50%;
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 78%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 78%, transparent 100%);
  }
  .camera-visual img, .camera-visual video {
    object-fit: contain;
    object-position: center;
    background: #050607;
  }

  /* Retain the four familiar mobile destinations in one clean row. */
  .site-header {
    height: 102px;
    padding: 0 18px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .site-header .wordmark {
    height: 58px;
    min-width: 0;
    max-width: none;
    align-self: flex-start;
  }
  .site-header .wordmark .header-logo-home { width: 43px; max-height: 43px; }
  .site-header .wordmark .header-logo-section { width: 165px; max-height: 48px; }
  .main-nav {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    border: 0;
    background: transparent;
    backdrop-filter: none;
  }
  .main-nav .desktop-service, .main-nav .desktop-label { display: none; }
  .main-nav .mobile-label { display: inline; }
  .main-nav a { font-size: clamp(8px, 2.3vw, 10px); letter-spacing: .065em; }
  .main-nav a[aria-current=page]::after { bottom: -7px; height: 2px; }
  body.view-gallery .main-nav { background: transparent; }

  .journey-lettering {
    left: 18px;
    top: 119px;
    width: min(49vw, 190px);
    max-height: 56px;
    object-position: left top;
  }
  .journey-slogan {
    right: 18px;
    bottom: calc(79px + env(safe-area-inset-bottom));
    max-width: 160px;
    font-size: clamp(18px, 5vw, 23px);
    line-height: .9;
  }
  .camera-scroll-cue { bottom: calc(22px + env(safe-area-inset-bottom)); }
  .camera-scroll-cue span { font-size: 8px; letter-spacing: .15em; }
  .sound-toggle { right: 15px; bottom: calc(12px + env(safe-area-inset-bottom)); }

  /* Source is 16:9; its actual camera occupies the middle half. The wide
     image plane lets the entire device fit on a portrait screen. */
  .showcase { height: 100svh; min-height: 0; }
  /* Swap only at the completed rear frame. An opacity crossfade exposed
     both camera images at once on phones and left the opening lettering
     floating over the first project. */
  .showcase, body.is-in-showcase .showcase { transition: none; }
  body.is-in-showcase .journey-lettering,
  body.is-in-showcase .journey-slogan,
  body.is-in-showcase .camera-scroll-cue { visibility: hidden; opacity: 0; }
  .showcase-device {
    left: 50%;
    top: 47%;
    width: 170vw;
    height: auto;
    aspect-ratio: 1600 / 904;
    transform: translate(-50%, -50%);
    overflow: hidden;
  }
  .showcase-camera-body { width: 100%; height: 100%; object-fit: cover; }
  .showcase-screen { left: 31.55%; top: 37.55%; width: 29.15%; height: 32.55%; }
  .showcase-copy {
    inset: 62px 18px 0;
    display: block;
    width: auto;
    max-height: none;
    overflow: visible;
    pointer-events: none;
  }
  .showcase-copy .showcase-top,
  .showcase-copy .showcase-bottom { display: block; position: absolute; left: 0; right: 0; }
  .showcase-copy .showcase-top { top: clamp(48px, 7.5svh, 72px); }
  .showcase-copy .showcase-bottom { bottom: calc(169px + env(safe-area-inset-bottom)); }
  .showcase-copy .showcase-eyebrow { margin-bottom: 7px; font-size: 8px; }
  .showcase-copy h1, .showcase-copy h1.is-long {
    max-width: 100%;
    margin: 0;
    font-size: clamp(26px, 7vw, 32px);
    line-height: .93;
  }
  .showcase-copy h1.is-long { font-size: clamp(24px, 6.6vw, 30px); }
  .showcase-project { margin-bottom: 11px; font-size: 16px; }
  .showcase-actions { display: flex; flex-direction: row; align-items: center; }
  .showcase-actions button,.showcase-actions a { pointer-events: auto; }
  .showcase-actions .primary-action { min-width: 136px; padding: 10px 12px; font-size: 8px; }
  .showcase-actions .text-action { display: none; }
  .showcase-controls { left: 18px; right: 60px; bottom: calc(25px + env(safe-area-inset-bottom)); }
  .showcase-navigation { gap: 6px; }
  .showcase-navigation button { width: 30px; height: 30px; }
  .progress-track { width: 43px; }
  .replay-camera { font-size: 7px; letter-spacing: .1em; }
}

@media (max-width: 760px) and (max-height: 700px) {
  .showcase-device { top: 42%; width: 145vw; }
  .showcase-copy .showcase-top { top: 42px; }
  .showcase-copy .showcase-bottom { bottom: calc(147px + env(safe-area-inset-bottom)); }
  .showcase-copy h1, .showcase-copy h1.is-long { font-size: clamp(24px, 6.6vw, 28px); }
  .showcase-copy h1.is-long { font-size: clamp(22px, 6.2vw, 26px); }
  .showcase-project { font-size: 14px; margin-bottom: 8px; }
  .showcase-actions .primary-action { padding: 8px 10px; }
  .showcase-controls { bottom: calc(17px + env(safe-area-inset-bottom)); }
  .journey-slogan { bottom: calc(66px + env(safe-area-inset-bottom)); font-size: 17px; }
}