/* Formal website only. The historical prototype rail is not a desktop menu. */
.phone-stage.formal-stage {
  --canvas-width: 1280px;
  width: 100%;
  max-width: var(--canvas-width);
  margin-inline: auto;
  min-height: 100svh;
}
.formal-stage .view { min-height: 100svh; }
.formal-stage :is(.topbar,.page-head,.section,.details,.tabs) {
  padding-left: max(18px,env(safe-area-inset-left));
  padding-right: max(18px,env(safe-area-inset-right));
}
.formal-stage .bottom-nav {
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, var(--canvas-width));
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
}
.formal-stage .sticky-action {
  left: 50%;
  width: min(620px, calc(100vw - 36px));
  bottom: calc(70px + env(safe-area-inset-bottom));
}
body:has(.formal-stage) .toast { left: 50%; max-width: calc(100vw - 32px); }
body:has(.formal-stage) :is(.modal-backdrop,.referral-modal,.reservation-modal,.city-directory-modal,.video-unlock-modal) {
  inset: 0;
  width: auto;
  transform: none;
  justify-content: center;
}
body:has(.formal-stage) :is(.sheet,.referral-sheet,.reservation-sheet,.city-directory-sheet,.video-unlock-sheet) {
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.formal-stage :is(.summary-row,.menu-item,.ledger-row) { gap: 12px; }
.formal-stage :is(.summary-row,.menu-item,.ledger-row) > * { min-width: 0; overflow-wrap: anywhere; }
.formal-stage :is(.field,.search-pill) { min-width: 0; max-width: 100%; }

/* Unfolded phones and portrait tablets share the same content-driven layout. */
@media (min-width:600px) {
  .formal-stage :is(.section,.details,.topbar,.page-head,.tabs) {
    padding-left: max(28px,env(safe-area-inset-left));
    padding-right: max(28px,env(safe-area-inset-right));
  }
  .formal-stage .masonry { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px 18px; }
  .formal-stage .masonry .card .card-photo { height: auto; aspect-ratio: 3 / 4; min-height: 0; }
  .formal-stage .card h3 { font-size: 15px; }
  .formal-stage .section-title h2 { font-size: 22px; }
  .formal-stage :is(.details p,.hero p,.cover-info p,.menu-item,.summary-row) { font-size: 14px; }
  .formal-stage :is(.meta,.price) { font-size: 12px; }
  .formal-stage .hero { height: clamp(430px,60svh,620px); }
  .formal-stage .cover { height: clamp(460px,65svh,680px); }
  .formal-stage :is(.hero .hero-content,.cover-info) { left: 28px; right: 28px; }
  .formal-stage :is(.hero h1,.cover-info h1) { font-size: clamp(32px,4vw,48px); }
  .formal-stage .preview-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
  .formal-stage .preview { height: auto; aspect-ratio: 3 / 4; }
  .formal-stage .tiers { grid-template-columns: repeat(2,minmax(0,1fr)); padding-inline: 28px; gap: 18px; align-items: stretch; }
  .formal-stage .tier { height: auto; min-width: 0; padding: 20px; }
  .formal-stage .tier .tier-name { font-size: 18px; }
  .formal-stage .tier .tier-sub { font-size: 13px; line-height: 1.6; }
  .formal-stage .tier .tier-price { font-size: 18px; }
  .formal-stage :is(.package-grid,.wallet-package-grid) { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .formal-stage .login { width: min(100%,560px); margin-inline: auto; padding-inline: 28px; }
  .formal-stage :is(.profile-editor,.account-info) { max-width: 640px; margin-inline: auto; }
  .formal-stage .video-channel-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px 18px; }
  .formal-stage .video-detail { width: min(100%,820px); max-width: 820px; margin-inline: auto; }
  body:has(.formal-stage) :is(.modal-backdrop,.referral-modal,.reservation-modal,.city-directory-modal,.video-unlock-modal) { align-items: center; padding: 20px; }
  body:has(.formal-stage) :is(.sheet,.referral-sheet,.reservation-sheet,.city-directory-sheet,.video-unlock-sheet) { width: min(560px,100%); border-radius: 18px; }
  .formal-stage :is(.primary,.secondary,.menu-item,.lang-option) { min-height: 44px; }
  /* Finance/account screens stay readable rather than spanning a desktop. */
  .formal-stage:is([data-responsive-page="membershipPurchase"],[data-responsive-page="payment"],[data-responsive-page="topup"],[data-responsive-page="ledger"],[data-responsive-page="account"],[data-responsive-page="settings"],[data-responsive-page="accountInfo"],[data-responsive-page="profile"],[data-responsive-page="language"],[data-responsive-page="downloadConfirm"],[data-responsive-page="insufficient"]) > .view > :not(.topbar,.page-head,.bottom-nav,.sticky-action) {
    max-width: min(760px,calc(100% - 56px));
    margin-inline: auto;
  }
  .formal-stage .full-image.viewer-shell { max-width: 960px; margin-inline: auto; }
  .formal-stage .viewer-slide { background-size: contain !important; background-position: center !important; }
}
@media (min-width:1024px) {
  /* Portrait photography must not become an enlarged, cropped face on PC. */
  .formal-stage :is(.hero,.cover) {
    background-size: cover,contain !important;
    background-position: center,100% 50% !important;
    background-repeat: no-repeat;
    background-color: #101111;
  }
  .formal-stage :is(.section,.details,.topbar,.page-head,.tabs) {
    padding-left: max(40px,env(safe-area-inset-left));
    padding-right: max(40px,env(safe-area-inset-right));
  }
  .formal-stage :is(.masonry,.video-channel-grid) { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 28px 22px; }
  .formal-stage .tiers { grid-template-columns: repeat(3,minmax(0,1fr)); padding-inline: 40px; }
  .formal-stage .preview-grid { grid-template-columns: repeat(6,minmax(0,1fr)); }
  .formal-stage .bottom-nav { grid-template-columns: repeat(5,minmax(0,144px)); justify-content: center; }
  .formal-stage .nav-item { font-size: 12px; }
  .formal-stage .nav-item:hover { background: rgba(232,188,105,.08); }
  .formal-stage .hero .hero-content { left: 40px; right: 40px; }
}
/* Short landscape screens: no inaccessible modal actions or oversized header. */
@media (max-height:500px) and (orientation:landscape) {
  .formal-stage .hero { height: 340px; }
  body:has(.formal-stage) :is(.sheet,.referral-sheet,.reservation-sheet,.city-directory-sheet,.video-unlock-sheet) { max-height: calc(100dvh - 16px); }
  .formal-stage .viewer-top { top: max(8px,env(safe-area-inset-top)); }
  .formal-stage .viewer-bottom { bottom: max(8px,env(safe-area-inset-bottom)); }
}