/* Shared desktop page frame.
   The review banner and header keep their current full width. Everything below
   the header aligns to the same 1180px editorial canvas. */
@media (min-width: 1000px) {
  :root {
    --hpc-desktop-page-width: 1180px;
    --hpc-desktop-page-gutter: 48px;
    /* Large editorial photographs use the same calm, pulled-back scale. */
    --hpc-desktop-photo-width: 820px;
  }

  body {
    background: #ece8df;
  }

  /* Pages whose header sits outside main. */
  body.hpc-desktop-page-frame.hpc-desktop-page-frame > header ~ main,
  body.hpc-desktop-page-frame.hpc-desktop-page-frame > header ~ section:not(.review-release),
  body.hpc-desktop-page-frame.hpc-desktop-page-frame > header ~ footer {
    box-sizing: border-box !important;
    width: min(
      var(--hpc-desktop-page-width),
      calc(100% - (var(--hpc-desktop-page-gutter) * 2))
    ) !important;
    max-width: var(--hpc-desktop-page-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Home and Six Experiences keep the header inside main. */
  body.hpc-desktop-page-frame.hpc-desktop-page-frame > main > header ~ section,
  body.hpc-desktop-page-frame.hpc-desktop-page-frame > main > header ~ figure,
  body.hpc-desktop-page-frame.hpc-desktop-page-frame > main > header ~ div,
  body.hpc-desktop-page-frame.hpc-desktop-page-frame > main > header ~ footer {
    box-sizing: border-box !important;
    width: min(
      var(--hpc-desktop-page-width),
      calc(100% - (var(--hpc-desktop-page-gutter) * 2))
    ) !important;
    max-width: var(--hpc-desktop-page-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Prevent earlier full-viewport photo rules from escaping the shared frame. */
  .homeBespokeHero,
  .hero,
  .heroPicture,
  .peace-hero,
  .peace-hero-image,
  .story-hero,
  .opening,
  .japanese-culture-opening-photo-confirmed {
    max-width: 100% !important;
  }

  .homeBespokeHero {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.hpc-desktop-page-frame > header ~ main {
    overflow-x: clip;
  }

  /*
     Detail-page photographs only.  The image itself is not cropped or
     enlarged; its full aspect ratio is retained inside a narrower,
     centred PC frame.  Mobile and the HOME hero remain untouched.
  */
  body.hpc-desktop-page-frame[class*="experience-detail-page--"] .experience-location__photo,
  body.hpc-desktop-page-frame[class*="experience-detail-page--"] .peace-title-photo,
  body.hpc-desktop-page-frame[class*="experience-detail-page--"] .peace-story-photo,
  body.hpc-desktop-page-frame[class*="experience-detail-page--"] .hero-photo,
  body.hpc-desktop-page-frame[class*="experience-detail-page--"] .intro-photo,
  body.hpc-desktop-page-frame[class*="experience-detail-page--"] .japanese-culture-opening-photo-confirmed,
  body.hpc-desktop-page-frame[class*="experience-detail-page--"] .miyajima-moment__image {
    box-sizing: border-box !important;
    width: min(100%, var(--hpc-desktop-photo-width)) !important;
    max-width: var(--hpc-desktop-photo-width) !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible !important;
    background: transparent !important;
  }

  body.hpc-desktop-page-frame[class*="experience-detail-page--"] .experience-location__photo > img,
  body.hpc-desktop-page-frame[class*="experience-detail-page--"] .peace-title-photo > img,
  body.hpc-desktop-page-frame[class*="experience-detail-page--"] .peace-story-photo > img,
  body.hpc-desktop-page-frame[class*="experience-detail-page--"] .hero-photo > img,
  body.hpc-desktop-page-frame[class*="experience-detail-page--"] .intro-photo > img,
  body.hpc-desktop-page-frame[class*="experience-detail-page--"] .japanese-culture-opening-photo-confirmed > img,
  body.hpc-desktop-page-frame[class*="experience-detail-page--"] .miyajima-moment__image > img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  /* Keep the established header height, but center all PC header content. */
  body.hpc-desktop-page-frame.hpc-desktop-page-frame .hpc-unified-header .hpc-header-top,
  body.hpc-desktop-page-frame.hpc-desktop-page-frame header.header .headerTop,
  body.hpc-desktop-page-frame.hpc-desktop-page-frame .story-header .story-header__top {
    display: flex !important;
    align-items: center !important;
  }

  body.hpc-desktop-page-frame.hpc-desktop-page-frame .hpc-unified-header .hpc-header-brand,
  body.hpc-desktop-page-frame.hpc-desktop-page-frame .hpc-unified-header .hpc-header-language,
  body.hpc-desktop-page-frame.hpc-desktop-page-frame header.header .headerTop > *,
  body.hpc-desktop-page-frame.hpc-desktop-page-frame .story-header .story-header__top > * {
    align-self: center !important;
  }

  body.hpc-desktop-page-frame.hpc-desktop-page-frame .hpc-unified-header .hpc-header-menu,
  body.hpc-desktop-page-frame.hpc-desktop-page-frame header.header .siteMenu,
  body.hpc-desktop-page-frame.hpc-desktop-page-frame .story-header .story-nav {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  body.hpc-desktop-page-frame.hpc-desktop-page-frame .hpc-unified-header .hpc-header-menu nav,
  body.hpc-desktop-page-frame.hpc-desktop-page-frame header.header .siteMenu nav,
  body.hpc-desktop-page-frame.hpc-desktop-page-frame .story-header .story-nav__inner {
    box-sizing: border-box !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    font-size: 18px !important;
    line-height: 1 !important;
    letter-spacing: .12em !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  body.hpc-desktop-page-frame.hpc-desktop-page-frame .hpc-unified-header .hpc-header-menu nav > a,
  body.hpc-desktop-page-frame.hpc-desktop-page-frame header.header .siteMenu nav > a,
  body.hpc-desktop-page-frame.hpc-desktop-page-frame .story-header .story-nav__inner > a {
    box-sizing: border-box !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: inherit !important;
    line-height: 1 !important;
    transform: none !important;
  }
}

/* The mobile layout is intentionally unchanged. */
@media (max-width: 999px) {
  body {
    overflow-x: hidden;
  }
}