/* VII Creation - orientation parity
   Loaded last. Portrait phones remain the approved mobile baseline.
   RP135 promotes eligible touch devices in landscape to the existing desktop layout
   through orientation-viewport.js. The older vii-phone-landscape rules below remain
   dormant as rollback-safe compatibility code; RP135 no longer emits that class. */

/* Safari dynamic chrome: keep the approved Threshold artwork covering the complete
   visible portrait viewport as the browser bars expand/collapse. */
html.vii-phone-portrait body[data-view="threshold"] .threshold,
html.vii-phone-portrait body[data-view="threshold"] .threshold__content {
  min-height: 100dvh !important;
}
html.vii-phone-portrait body[data-view="threshold"] .threshold {
  height: auto !important;
}

html.vii-phone-landscape {
  --header-h: 4.85rem;
  --vii-phone-x: clamp(1.05rem, 3.6vw, 1.55rem);
  --rp-x: var(--vii-phone-x);
  --pad: var(--vii-phone-x);
  scroll-padding-top: calc(var(--header-h) + .75rem);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html.vii-phone-landscape body {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: max(100dvh, var(--vii-visual-vh, 100dvh)) !important;
  overflow-x: clip !important;
  overflow-y: auto !important;
  overscroll-behavior-x: none;
}
html.vii-phone-landscape body > main,
html.vii-phone-landscape main,
html.vii-phone-landscape .view,
html.vii-phone-landscape section,
html.vii-phone-landscape article,
html.vii-phone-landscape header,
html.vii-phone-landscape footer,
html.vii-phone-landscape nav,
html.vii-phone-landscape aside {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
html.vii-phone-landscape img,
html.vii-phone-landscape picture,
html.vii-phone-landscape video,
html.vii-phone-landscape canvas,
html.vii-phone-landscape svg { max-width: 100%; }

/* Header and context trail remain the approved phone scale in either orientation. */
html.vii-phone-landscape .house-nav {
  width: 100% !important;
  max-width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  padding-left: calc(var(--vii-phone-x) + var(--safe-l)) !important;
  padding-right: calc(var(--vii-phone-x) + var(--safe-r)) !important;
}
html.vii-phone-landscape .hall-trigger__mark {
  width: 2.65rem !important;
  height: 2.65rem !important;
}
html.vii-phone-landscape .house-action {
  max-width: 11rem !important;
  font-size: .48rem !important;
  line-height: 1.35 !important;
  letter-spacing: .14em !important;
}
html.vii-phone-landscape .location-trail {
  left: calc(var(--vii-phone-x) + var(--safe-l)) !important;
  right: calc(var(--vii-phone-x) + var(--safe-r)) !important;
  max-width: calc(100% - 2 * var(--vii-phone-x) - var(--safe-l) - var(--safe-r)) !important;
  min-width: 0 !important;
  gap: .42rem !important;
  overflow: hidden !important;
  font-size: .44rem !important;
  letter-spacing: .1em !important;
}
html.vii-phone-landscape .location-trail__segment {
  min-width: 0 !important;
}
html.vii-phone-landscape .location-trail__segment:last-child {
  flex: 1 1 auto !important;
  overflow: hidden !important;
}
html.vii-phone-landscape .location-trail__segment:last-child > :last-child {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Central Hall must fit the short viewport and remain internally scrollable. */
html.vii-phone-landscape .hall .hall__card,
html.vii-phone-landscape .hall--drawer .hall__card {
  left: calc(.65rem + var(--safe-l)) !important;
  right: calc(.65rem + var(--safe-r)) !important;
  top: calc(var(--header-h) + .25rem + var(--safe-t)) !important;
  bottom: calc(.45rem + var(--safe-b)) !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100dvh - var(--header-h) - .7rem - var(--safe-t) - var(--safe-b)) !important;
  padding: 1.3rem 1.25rem 1.5rem !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
html.vii-phone-landscape .nav-drawer__grid,
html.vii-phone-landscape .nav-drawer__section--current ul {
  grid-template-columns: 1fr !important;
}

/* Threshold: same mobile composition, but the short landscape viewport becomes a
   complete scrollable scene instead of clipping the CTA or exposing body navy below. */
html.vii-phone-landscape body[data-view="threshold"] .threshold {
  min-height: max(var(--vii-visual-vh, 100dvh), 30rem) !important;
  height: auto !important;
  padding-inline: var(--vii-phone-x) !important;
  overflow: hidden !important;
  place-items: center !important;
}
html.vii-phone-landscape body[data-view="threshold"] .threshold__content {
  width: min(100%, 24rem) !important;
  max-width: 24rem !important;
  min-height: max(var(--vii-visual-vh, 100dvh), 30rem) !important;
  margin-inline: auto !important;
  padding:
    calc(var(--header-h) + 1.4rem + var(--safe-t))
    var(--vii-phone-x)
    calc(4.7rem + var(--safe-b)) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  transform: none !important;
}
html.vii-phone-landscape body[data-view="threshold"] .threshold h1 {
  margin-top: .3rem !important;
  font-size: clamp(2.65rem, 7.2vw, 3.45rem) !important;
  line-height: .92 !important;
}
html.vii-phone-landscape body[data-view="threshold"] .threshold .ceremonial {
  margin-top: .8rem !important;
}
html.vii-phone-landscape body[data-view="threshold"] .threshold__intro {
  width: min(21rem, 100%) !important;
  max-width: 21rem !important;
  margin-top: .7rem !important;
  font-size: .92rem !important;
  line-height: 1.46 !important;
}
html.vii-phone-landscape body[data-view="threshold"] .threshold .text-action {
  min-height: 44px !important;
  margin-top: 1.2rem !important;
}
html.vii-phone-landscape body[data-view="threshold"] .location-mark {
  left: calc(var(--vii-phone-x) + var(--safe-l)) !important;
  right: auto !important;
  bottom: calc(.8rem + var(--safe-b)) !important;
}
html.vii-phone-landscape body[data-view="threshold"] .threshold::before,
html.vii-phone-landscape body[data-view="threshold"] .threshold::after,
html.vii-phone-landscape body[data-view="threshold"] .threshold__architecture,
html.vii-phone-landscape body[data-view="threshold"] .threshold__passage {
  height: 100% !important;
  min-height: 100% !important;
}

/* All regular room/world sections use mobile horizontal gutters in phone landscape. */
html.vii-phone-landscape :where(
  .sports-opening,.studio-opening,.studio-commission-opening,.deliverables-opening,
  .request-opening,.room__header,.community-arrival,.community-standard,
  .community-movement,.community-chapters,.community-memory,.community-ending,
  .studio-index,.studio-principle,.studio-proofline,.studio-packages,.studio-refinements,
  .studio-bespoke,.studio-process,.deliverable,.commission-approach,.proof,
  .commission-path,.request-layout,.studio-return,.room-return,.world-return,
  .commission-bag-page,.house-ledger__panel
) {
  padding-left: calc(var(--vii-phone-x) + var(--safe-l)) !important;
  padding-right: calc(var(--vii-phone-x) + var(--safe-r)) !important;
}

/* VII Sports: landscape phones must never fall into the 721-1180 tablet composition. */
html.vii-phone-landscape body[data-view="sports"] .sports-world {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}
html.vii-phone-landscape body[data-view="sports"] .sports-world .sports-opening {
  position: relative !important;
  inset: auto !important;
  height: auto !important;
  min-height: max(var(--vii-visual-vh, 100dvh), 30rem) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 1.4rem !important;
  padding:
    calc(var(--header-h) + 1.35rem + var(--safe-t))
    calc(var(--vii-phone-x) + var(--safe-r))
    calc(2.75rem + var(--safe-b))
    calc(var(--vii-phone-x) + var(--safe-l)) !important;
  overflow: visible !important;
}
html.vii-phone-landscape body[data-view="sports"] .sports-opening__copy {
  position: static !important;
  width: min(100%, 23rem) !important;
  max-width: 23rem !important;
  min-height: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}
html.vii-phone-landscape body[data-view="sports"] .sports-opening h1 {
  max-width: 10ch !important;
  font-size: clamp(2.65rem, 7vw, 3.45rem) !important;
  line-height: .96 !important;
}
html.vii-phone-landscape body[data-view="sports"] .sports-opening__statement {
  max-width: 29ch !important;
  font-size: .96rem !important;
  line-height: 1.5 !important;
}
html.vii-phone-landscape body[data-view="sports"] .sports-opening .text-action {
  margin-top: 1.25rem !important;
  opacity: 1 !important;
}
html.vii-phone-landscape body[data-view="sports"] .sports-world .chapter-index {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 1.6rem 0 0 !important;
  padding: 1.1rem 0 0 !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}
html.vii-phone-landscape body[data-view="sports"] .chapter-index ol {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}
html.vii-phone-landscape body[data-view="sports"] .chapter-index a {
  grid-template-columns: 2rem minmax(0,1fr) auto !important;
  gap: .8rem !important;
  min-height: 3.5rem !important;
}
html.vii-phone-landscape body[data-view="sports"] .chapter {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
}
html.vii-phone-landscape body[data-view="sports"] .chapter__stage,
html.vii-phone-landscape body[data-view="sports"] #chapter-I .chapter__stage {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  height: auto !important;
  min-height: max(var(--vii-visual-vh, 100dvh), 30rem) !important;
  max-height: none !important;
  padding:
    calc(var(--header-h) + 2.2rem + var(--safe-t))
    calc(var(--vii-phone-x) + var(--safe-r))
    calc(3rem + var(--safe-b))
    calc(var(--vii-phone-x) + 2.05rem + var(--safe-l)) !important;
  overflow: visible !important;
  contain: none !important;
  opacity: 1 !important;
  transform: none !important;
}
html.vii-phone-landscape body[data-view="sports"] .chapter__body {
  width: min(100%, 23rem) !important;
  max-width: 23rem !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}
html.vii-phone-landscape body[data-view="sports"] .chapter h2 {
  font-size: clamp(2.25rem, 6.4vw, 3rem) !important;
  line-height: 1.03 !important;
}
html.vii-phone-landscape body[data-view="sports"] .chapter__lead,
html.vii-phone-landscape body[data-view="sports"] .chapter__copy {
  max-width: 30ch !important;
}
html.vii-phone-landscape body[data-view="sports"] .chapter__plate,
html.vii-phone-landscape body[data-view="sports"] #chapter-I .chapter__plate,
html.vii-phone-landscape body[data-view="sports"] #chapter-III .chapter__plate {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: min(100%, 31rem) !important;
  min-height: 11rem !important;
  max-height: none !important;
  margin: 1.8rem 0 0 !important;
  opacity: 1 !important;
  transform: none !important;
}
html.vii-phone-landscape body[data-view="sports"] .chapter__landmark {
  position: static !important;
  width: auto !important;
  margin-bottom: 1rem !important;
  text-align: left !important;
  opacity: .58 !important;
}
html.vii-phone-landscape body[data-view="sports"] .corridor::before {
  left: calc(var(--vii-phone-x) + .88rem + var(--safe-l)) !important;
}

/* Other House worlds: keep the same one-column phone hierarchy after rotation. */
html.vii-phone-landscape :where(
  .studio-index,.studio-departments,.community-arrival__hero,.community-chapter,
  .memory-grid,.commission-approach,.proof,.studio-refinements,.deliverable,
  .studio-packages__header,.studio-bespoke,.studio-process header,.commission-path,
  .house-ledger__heading,.house-ledger__grid,.request-layout,.choice-grid,
  .choice-grid--compact,.choice-grid--packages,.form-grid--two
) {
  grid-template-columns: 1fr !important;
  grid-template-rows: auto !important;
}
html.vii-phone-landscape .studio-index { display: block !important; }
html.vii-phone-landscape .studio-departments { width: 100% !important; }
html.vii-phone-landscape .studio-department--open,
html.vii-phone-landscape .studio-department--reserved { grid-column: 1 !important; }
html.vii-phone-landscape .studio-department > a,
html.vii-phone-landscape .studio-department > div {
  grid-template-columns: 2.15rem minmax(0,1fr) !important;
  grid-template-rows: auto auto !important;
  min-height: 0 !important;
}
html.vii-phone-landscape .community-arrival__hero,
html.vii-phone-landscape .studio-opening,
html.vii-phone-landscape .studio-commission-opening,
html.vii-phone-landscape .request-opening,
html.vii-phone-landscape .room__header {
  min-height: max(var(--vii-visual-vh, 100dvh), 30rem) !important;
  height: auto !important;
  overflow: visible !important;
}
html.vii-phone-landscape .community-arrival__film,
html.vii-phone-landscape .community-chapter__frame,
html.vii-phone-landscape .community-film-stage,
html.vii-phone-landscape .community-standard__frame,
html.vii-phone-landscape .deliverable__media {
  min-height: 18rem !important;
  max-height: none !important;
}
html.vii-phone-landscape .request-progress {
  position: static !important;
  max-width: 100% !important;
  margin-bottom: 2rem !important;
}
html.vii-phone-landscape .request-controls,
html.vii-phone-landscape .commission-bag-page__actions,
html.vii-phone-landscape .request-thanks__actions,
html.vii-phone-landscape .studio-opening__actions,
html.vii-phone-landscape .studio-commission-opening__actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
}
html.vii-phone-landscape .house-ledger__base {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.25rem !important;
  text-align: left !important;
}

/* Legal pages do not inherit the House responsive bundle, so keep their content
   inside the landscape safe area without altering their typography or legal copy. */
html.vii-phone-landscape body:not([data-view]) {
  min-width: 0 !important;
  overflow-x: clip !important;
}
html.vii-phone-landscape body:not([data-view]) :where(main, header, footer, section, article, form) {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (prefers-reduced-motion: reduce) {
  html.vii-phone-landscape * {
    scroll-behavior: auto !important;
  }
}


/* Threshold full-bleed on phones: when Safari expands/collapses chrome in portrait
   or landscape, any exposed safe-area/background around the scene should still show
   the Threshold artwork rather than a plain midnight navy strip. */
html.vii-phone-portrait,
html.vii-phone-landscape {
  background-color: #06071a !important;
}
html.vii-phone-portrait body[data-view="threshold"],
html.vii-phone-landscape body[data-view="threshold"] {
  min-height: max(100dvh, var(--vii-visual-vh, 100dvh)) !important;
  background-color: #06071a !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-image:
    linear-gradient(rgba(6, 7, 26, 0.47), rgba(6, 7, 26, 0.47)),
    image-set(
      url("/img/VII-threshold-hall.webp") type("image/webp"),
      url("/img/VII-threshold-hall.png") type("image/png")
    ) !important;
}
html.vii-phone-portrait body[data-view="threshold"] .threshold,
html.vii-phone-landscape body[data-view="threshold"] .threshold {
  min-height: max(100dvh, var(--vii-visual-vh, 100dvh)) !important;
  background: transparent !important;
}


/* iOS Safari Threshold canvas.
   This is static from first paint and does not wait for JS device classification.
   It gives Safari's under-page / soft-chrome areas the Threshold artwork rather
   than a flat page color wherever WebKit exposes the document behind its UI. */
html.vii-threshold-root {
  min-height: 100%;
  min-height: 100lvh;
  background-color: #070d18 !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-image:
    linear-gradient(rgba(6, 7, 26, 0.47), rgba(6, 7, 26, 0.47)),
    image-set(
      url("/img/VII-threshold-hall.webp") type("image/webp"),
      url("/img/VII-threshold-hall.png") type("image/png")
    ) !important;
}
html.vii-threshold-root body[data-view="threshold"] {
  min-height: 100%;
  min-height: 100lvh !important;
  background: transparent !important;
}
html.vii-threshold-root body[data-view="threshold"] .threshold {
  min-height: max(100dvh, 100lvh, var(--vii-visual-vh, 100dvh)) !important;
}

/* On actual phones keep the same full-bleed canvas after Safari chrome changes
   the visual viewport height during scroll, rotation, or toolbar collapse. */
html.vii-threshold-root.vii-phone-portrait,
html.vii-threshold-root.vii-phone-landscape {
  background-position: center center !important;
  background-size: cover !important;
}

/* RP135 - landscape touch devices use the real desktop composition.
   The viewport bootstrap places eligible phones/tablets at 1200 CSS px, above VII's
   1180 px desktop threshold, so existing desktop rules become the source of truth. */
html.vii-touch-landscape-desktop {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}
html.vii-touch-landscape-desktop body {
  min-width: 0 !important;
  overflow-x: hidden !important;
}
html.vii-touch-landscape-desktop body[data-view="threshold"] {
  background-color: #06071a !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-image:
    linear-gradient(rgba(6, 7, 26, 0.47), rgba(6, 7, 26, 0.47)),
    image-set(
      url("/img/VII-threshold-hall.webp") type("image/webp"),
      url("/img/VII-threshold-hall.png") type("image/png")
    ) !important;
}