/* Interaction/reservation only: approved desktop and portrait positions
   continue to come from their existing stylesheets. */
.brand-logo { aspect-ratio: 268 / 91; pointer-events: auto; }
.brand-logo img { display: block; width: 100%; height: auto; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.home-page, .menu-page { overflow-anchor: none; }
html.art-pending .home .brand-column,
html.art-pending .home-page .hamburger,
html.art-pending .approved-menu { visibility: hidden; }

/* Short landscape phones retain the mobile navigation/scroll axis. */
@media (orientation: landscape) and (max-height: 600px) and (max-width: 700px),
       (orientation: landscape) and (max-height: 600px) and (hover: none) and (pointer: coarse) {
  .home { min-height: 100svh; }
  .approved-menu { height: max(100svh, 530px); --menu-panel-top: -160px; }
  .about-page .brand-column { left: 20%; --logo-y: 22svh; }
  .about-content { margin-left: 48%; width: 45%; padding-top: 28px; }
  .about-mobile-portrait {
    top: 120px;
    right: calc(52% + 16px);
    width: min(18vw, 160px);
    height: auto;
    aspect-ratio: 1365 / 2048;
  }
  .about-mobile-portrait img { height: auto; object-fit: contain; }
  .contact-page .brand-column { left: 20%; --logo-y: 22svh; }
  .contact-content { margin-left: 38%; width: 56%; padding-top: 32px; }
  .boutique-content { margin-left: 38%; padding-top: max(32px, 18svh); }
  .lookbook { --focus-y: 42svh; --mobile-active-height: max(160px, min(72vw, 56svh)); }
  .look-item figcaption {
    width: min(560px, calc(100vw - 160px));
    font-size: 11px;
  }
  .look-item figcaption div { align-items: baseline; }
  .look-item figcaption dt { flex: 0 0 auto; }
  .look-item figcaption dd { min-width: 0; overflow-wrap: anywhere; }
  .lightbox { padding-top: 48px; padding-bottom: 18px; }
  .lightbox > img { max-height: calc(100svh - 100px); }
}