/* Landscape touch tablets only; desktop and phone rules keep their existing layout. */
@media (orientation:landscape) and (min-width:1024px) and (max-width:1366px) and (min-height:600px) and (max-height:1024px) and (pointer:coarse) {
  #experience {
    --section-title-inset: 88px;
    --exp-card-gap: 28px;
    --exp-track-padding: 20px;
    --exp-card-height: clamp(268px, calc(100dvh - 340px), 440px);
    --exp-card-width: min(calc(var(--exp-card-height) / 1.72), calc((100cqw - 2 * var(--content-edge) - 2 * var(--exp-track-padding) - 3 * var(--exp-card-gap)) / 4));
    min-height: 100dvh;
    padding-top: 88px;
    padding-bottom: 28px;
    scroll-margin-top: 0;
  }

  #experience .experience-title {
    margin: 0 var(--content-edge) 28px;
    font-size: clamp(60px, 8.6dvh, 72px);
    line-height: 1;
  }

  #experience .experience-viewport {
    margin-top: 0;
    scroll-padding-inline: var(--content-edge);
  }

  #experience .experience-track { padding-top: 18px; padding-bottom: 28px; }
  #experience .experience-rail { top: 18px; }
  #experience .experience-track > .experience-item { height: calc(var(--exp-card-height) + var(--exp-wire) * .36); }
  #experience .experience-track .experience-card { top: calc(var(--exp-wire) * .36); }
  #experience .experience-track .experience-wire { height: calc(var(--exp-wire) * .36); }

  /* Apply the same geometry to the landing clone used by the return animation. */
  #experience :is(.experience-track, .experience-return-proxy) .experience-face {
    padding: clamp(14px, 2.4dvh, 20px);
    border-radius: 24px;
  }
  #experience :is(.experience-track, .experience-return-proxy) .experience-front {
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    gap: clamp(9px, 1.45dvh, 12px);
  }
  #experience :is(.experience-track, .experience-return-proxy) .experience-front .experience-logo {
    justify-self: center;
    width: 76%;
    max-width: 160px;
    height: 100%;
    aspect-ratio: auto;
    padding: 0;
  }
  #experience :is(.experience-track, .experience-return-proxy) :is(.experience-topline, .experience-back-heading) {
    font-size: clamp(9px, 1.3dvh, 11px);
    gap: 6px;
    letter-spacing: .04em;
  }
  #experience :is(.experience-track, .experience-return-proxy) .experience-identity { padding-top: 0; gap: 6px; }
  #experience :is(.experience-track, .experience-return-proxy) .experience-position { font-size: clamp(16px, 2.5dvh, 21px); }
  #experience :is(.experience-track, .experience-return-proxy) .experience-department { font-size: clamp(11px, 1.7dvh, 14px); }
  #experience :is(.experience-track, .experience-return-proxy) .experience-period { font-size: clamp(10px, 1.45dvh, 12px); letter-spacing: 0; }
  #experience :is(.experience-track, .experience-return-proxy) .experience-cta { min-height: 44px; padding-top: 10px; font-size: 11px; }
  #experience :is(.experience-track, .experience-return-proxy) .experience-arrow { width: 28px; height: 28px; }
  #experience .experience-footer { justify-content: center; }

  /* The two detail faces share a bounded surface, with scrolling in the copy only. */
  #experience-viewer {
    padding: max(24px, env(safe-area-inset-top, 0px)) max(var(--content-edge), env(safe-area-inset-right, 0px)) max(28px, env(safe-area-inset-bottom, 0px)) max(var(--content-edge), env(safe-area-inset-left, 0px));
    overflow: hidden;
  }
  #experience-viewer .experience-viewer-surface {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: min(1080px, 100%);
    height: min(690px, 100%);
    min-height: 0;
    margin-block: auto;
  }
  #experience-viewer .experience-detail-toolbar { flex: none; height: 44px; margin: 0; }
  #experience-viewer .experience-item.is-expanded { flex: 1; min-height: 0; }
  #experience-viewer .experience-item.is-expanded :is(.experience-pendulum, .experience-card, .experience-tilt) { height: 100%; min-height: 0; }
  #experience-viewer .experience-item.is-expanded .experience-flipper {
    grid-template-columns: minmax(260px, .44fr) minmax(0, 1fr);
    gap: 28px;
    height: 100%;
    min-height: 0;
    align-items: stretch;
  }
  #experience-viewer .experience-item.is-expanded .experience-face {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 24px;
    overflow: hidden;
    border-radius: 28px;
  }
  #experience-viewer .experience-item.is-expanded .experience-front { grid-template-rows: auto minmax(0, 1fr) auto; gap: 20px; }
  #experience-viewer .experience-item.is-expanded .experience-front .experience-logo {
    align-self: center;
    justify-self: center;
    width: 88%;
    max-width: 240px;
    height: auto;
    aspect-ratio: auto;
    padding: 0;
    gap: 14px;
  }
  #experience-viewer .experience-item.is-expanded .experience-front .experience-position { font-size: clamp(24px, 3.5dvh, 29px); line-height: 1.3; }
  #experience-viewer .experience-item.is-expanded .experience-front .experience-department { margin-top: 8px; font-size: 16px; }
  #experience-viewer .experience-item.is-expanded .experience-front .experience-employer { margin-top: 18px; font-size: 14px; }
  #experience-viewer .experience-item.is-expanded .experience-front .experience-category { margin-top: 4px; font-size: 13px; }
  #experience-viewer .experience-item.is-expanded .experience-front .experience-period { margin-top: 12px; font-size: 12px; }
  #experience-viewer .experience-item.is-expanded .experience-back { gap: 20px; }
  #experience-viewer .experience-item.is-expanded .experience-details {
    display: block;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #555 transparent;
    font-size: 15px;
    line-height: 1.75;
  }
  #experience-viewer .experience-item.is-expanded .experience-details dt { margin-bottom: 12px; font-size: 16px; }
  #experience-viewer .experience-item.is-expanded .experience-details > div + div { margin-top: 20px; padding-top: 20px; }
  #experience-viewer .experience-item.is-expanded .experience-detail-copy li { grid-template-columns: 8.5em minmax(0, 1fr); column-gap: 14px; }
  #experience-viewer .experience-item.is-expanded .experience-detail-copy li + li { margin-top: 12px; }
}