.phone-swipe-hint { display: none; }

@media (max-width: 600px) and (orientation: portrait) and (pointer: coarse) {
  :root {
    --deck-y: clamp(316px, 58.5svh, 550px);
    --card-height: min(84vw, 48svh);
    --phone-counter-y: calc(var(--deck-y) - var(--card-height) * .55 - 22px);
  }

  .experience-hero { min-height: 540px; --card-stack-spread: .63; }
  .hero-heading h1 { margin-top: clamp(28px, 4.8svh, 42px); }

  .carousel-control {
    top: calc(var(--deck-y) + var(--card-height) * .5 + 38px);
    left: calc(50% + 72px);
    width: 48px;
    height: 48px;
    padding: 12px;
  }
  .carousel-control--previous { left: calc(50% - 72px); }

}

@media (orientation: landscape) and (max-height: 480px) and (pointer: coarse) {
  :root {
    --deck-y: max(202px, 59svh);
    --card-height: min(37svh, 195px);
    --phone-counter-y: calc(var(--deck-y) - var(--card-height) * .5 - 22px);
  }
  .experience-hero { min-height: 350px; }
  .hero-heading { top: 14px; }
  .wordmark { width: 88px; height: 28px; }
  .hero-heading h1 { margin-top: 12px; font-size: clamp(30px, 9svh, 43px); }
}

@media (max-width: 600px) and (orientation: portrait) and (pointer: coarse),
       (orientation: landscape) and (max-height: 480px) and (pointer: coarse) {
  /* Retain the alternative action for assistive technology and keyboard focus. */
  .carousel-control:not(:focus-visible) {
    clip-path: inset(50%);
    pointer-events: none;
  }
  .position-counter {
    top: var(--phone-counter-y);
    font-size: 12px;
    transform: translateY(-50%);
    pointer-events: none;
  }
  .phone-swipe-hint {
    --hint-inset: max(10px, calc(50% - var(--card-width) * .96 - 20px));
    position: absolute;
    z-index: 1;
    display: block;
    top: calc(var(--deck-y) - 10px);
    width: 20px;
    height: 20px;
    opacity: 0;
    color: var(--ink, #080808);
    pointer-events: none;
  }
  .phone-swipe-hint--leftward { left: var(--hint-inset); }
  .phone-swipe-hint--rightward { right: var(--hint-inset); }
  .phone-swipe-hint svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .phone-swipe-hint--leftward svg { transform: scaleX(-1); }
}

@media (max-width: 600px) and (pointer: coarse), (hover: none) and (pointer: coarse) {
  .deck { touch-action: pan-y pinch-zoom; }
  .downward-chevron {
    display: grid;
    place-items: center;
    left: calc(50% - 22px);
    bottom: 12px;
    width: 44px;
    height: 44px;
  }
  .downward-chevron svg { width: 26px; height: 26px; }
}

/* See scroll-host.js. */
html.inner-scroll { height: 100%; overflow: hidden; overscroll-behavior: none; }
html.inner-scroll body { height: 100%; height: 100dvh; overflow: hidden auto; overscroll-behavior: none; }
@media (prefers-reduced-motion: no-preference) {
  html.inner-scroll body { scroll-behavior: smooth; }
}

:root[data-phone-dark] .return-launcher[data-enhanced='true'] :is(
  .return-title, .return-direct, .return-shortcut-instruction
) {
  display: none;
}