/* Mobile controls sit beneath the title while closed and retain bottom anchors while open. */
@media (max-width: 700px), (orientation: landscape) and (max-height: 500px) and (max-width: 1000px) {
  html:is(.page-window-page, .poems-window-page) body:is(.page-id-112, .page-id-114, .page-id-1212, .page-id-125, .book-detail-page, .page-id-143, .page-id-145) {
    --mobile-nav-bottom: calc(env(safe-area-inset-bottom, 0px) + 86px);
    --mobile-nav-height: calc(3.6 * clamp(13px, 3.7vw, 16px) + 6px);
    --mobile-panel-top: calc(env(safe-area-inset-top, 0px) + 12px);
    --mobile-panel-bottom: calc(var(--mobile-nav-bottom) + var(--mobile-nav-height) + 12px);
    --subpage-window-height: calc(100dvh - var(--mobile-panel-top) - var(--mobile-panel-bottom));
    --subpage-window-center: calc(var(--mobile-panel-top) + var(--subpage-window-height) / 2);
  }

  html body:is(.home, .page-id-1595) #header-page-title .home-reveal-menu,
  html body:is(.page-id-112, .page-id-114, .page-id-1212, .page-id-125, .book-detail-page, .page-id-143, .page-id-145) #access.subpage-centered-nav > div > ul {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px clamp(28px, 8.75vw, 34px) !important;
    width: min(100%, 340px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    font: 600 clamp(13px, 3.7vw, 16px)/1.8 Muli, Arial, sans-serif !important;
  }

  html body:is(.page-id-112, .page-id-114, .page-id-1212, .page-id-125, .book-detail-page, .page-id-143, .page-id-145) #access.subpage-centered-nav > div > ul > li {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  body:is(.home, .page-id-1595) #header-page-title .home-reveal-menu > a,
  #access.subpage-centered-nav > div {
    top: 0 !important;
  }

  html body:is(.page-id-112, .page-id-114, .page-id-1212, .page-id-125, .book-detail-page, .page-id-143, .page-id-145) #access.subpage-centered-nav,
  html body:is(.page-id-112, .page-id-114, .page-id-1212, .page-id-125, .book-detail-page, .page-id-143, .page-id-145).poems-window-open #access.subpage-centered-nav {
    top: var(--mobile-nav-top, calc(100dvh - 150px)) !important;
    bottom: auto !important;
    width: calc(100vw - 32px) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    transition: none !important;
  }

  /* Closed nav and Home follow the title; an open panel keeps the bottom stack. */
  html:is(.page-window-page, .poems-window-page) body:is(.page-id-112, .page-id-114, .page-id-1212, .page-id-125, .book-detail-page, .page-id-143, .page-id-145)
    #access.subpage-centered-nav {
    top: var(--mobile-nav-top) !important;
    bottom: auto !important;
  }

  html:is(.page-window-page, .poems-window-page) body:is(.page-id-112, .page-id-114, .page-id-1212, .page-id-125, .book-detail-page, .page-id-143, .page-id-145)
    .subpage-home-button {
    top: var(--subpage-home-top) !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    translate: -50% -50% !important;
    transform: none !important;
  }

  html:is(.page-window-page, .poems-window-page) body:is(.page-id-112, .page-id-114, .page-id-1212, .page-id-125, .book-detail-page, .page-id-143, .page-id-145).poems-window-open
    #access.subpage-centered-nav {
    top: auto !important;
    bottom: var(--mobile-nav-bottom) !important;
  }

  html:is(.page-window-page, .poems-window-page) body:is(.page-id-112, .page-id-114, .page-id-1212, .page-id-125, .book-detail-page, .page-id-143, .page-id-145).poems-window-open
    .subpage-home-button {
    top: auto !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 38px) !important;
    translate: -50% 0 !important;
  }

  html:is(.page-window-page, .poems-window-page) body:is(.page-id-112, .page-id-114, .page-id-1212, .page-id-125, .book-detail-page, .page-id-143, .page-id-145).poems-window-open
    > :is(.poems-refresh-content, #content) {
    top: var(--mobile-panel-top) !important;
    right: auto !important;
    bottom: var(--mobile-panel-bottom) !important;
    left: 50% !important;
    width: calc(100vw - max(24px, env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px))) !important;
    height: auto !important;
    max-height: none !important;
    transform: translateX(-50%) !important;
  }

  html body:is(.page-id-112, .page-id-114, .page-id-1212, .page-id-125, .book-detail-page, .page-id-143, .page-id-145).poems-window-open #access.subpage-centered-nav {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html:is(.page-window-page, .poems-window-page) body:is(.page-id-112, .page-id-114, .page-id-143, .page-id-145)
    :is(.poems-refresh-content, #content) h2:is(.poems-refresh-year-heading, .events-year-heading) {
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .page-window-scroll-fade {
    display: none !important;
  }

  .page-window-scrolled .mobile-content-fade {
    --mobile-content-fade-length: 28px;
    -webkit-mask-image: linear-gradient(to bottom,
      transparent var(--mobile-content-cutoff),
      #000 calc(var(--mobile-content-cutoff) + var(--mobile-content-fade-length)));
    mask-image: linear-gradient(to bottom,
      transparent var(--mobile-content-cutoff),
      #000 calc(var(--mobile-content-cutoff) + var(--mobile-content-fade-length)));
  }
}

@media (orientation: landscape) and (max-height: 500px) and (max-width: 1000px) {
  .page-window-scrolled .mobile-content-fade {
    --mobile-content-fade-length: 12px;
  }
}

@media (max-width: 700px) and (orientation: portrait) {
  html body:is(.home, .page-id-1595) #header-page-title #homepage-navigation.home-reveal-menu,
  html body:is(.page-id-112, .page-id-114, .page-id-1212, .page-id-125, .book-detail-page, .page-id-143, .page-id-145)
    #access.subpage-centered-nav > div > ul {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-content: center !important;
    left: auto !important;
    width: clamp(250px, 74vw, 318px) !important;
    max-width: calc(100vw - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    font: 600 clamp(13px, 3.7vw, 16px) / 1.8 Muli, sans-serif !important;
    row-gap: 3px !important;
    column-gap: clamp(12px, 4vw, 18px) !important;
  }

  html body:is(.home, .page-id-1595) #header-page-title #homepage-navigation.home-reveal-menu {
    margin-left: calc(-0.5 * clamp(250px, 74vw, 318px)) !important;
    margin-right: 0 !important;
  }

  html body:is(.home, .page-id-1595) #header-page-title .home-reveal-menu::after,
  html body #access.subpage-centered-nav > div > ul::after {
    content: "";
    order: 1;
    flex-basis: 100%;
    height: 0;
  }

  html body:is(.home, .page-id-1595) #header-page-title .home-reveal-menu > a:nth-child(n + 4),
  html body #access.subpage-centered-nav > div > ul > li:nth-child(n + 4) {
    order: 2 !important;
  }

  html:is(.page-window-page, .poems-window-page) body:is(.page-id-112, .page-id-114, .page-id-1212, .page-id-125, .book-detail-page, .page-id-143, .page-id-145)
    #access.subpage-centered-nav {
    left: 50% !important;
    translate: -50% 0 !important;
  }

  html:is(.page-window-page, .poems-window-page) body:is(.page-id-112, .page-id-114, .page-id-1212, .page-id-125, .book-detail-page, .page-id-143, .page-id-145)
    .subpage-home-button,
  html:is(.page-window-page, .poems-window-page) body:is(.page-id-112, .page-id-114, .page-id-1212, .page-id-125, .book-detail-page, .page-id-143, .page-id-145).poems-window-open
    .subpage-home-button {
    transition: top 420ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
  }

  html:is(.page-window-page, .poems-window-page) body:is(.page-id-112, .page-id-114, .page-id-1212, .page-id-125, .book-detail-page, .page-id-143, .page-id-145).poems-window-open
    .subpage-home-button {
    top: var(--subpage-home-top) !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    translate: -50% -50% !important;
  }
}

@media (max-width: 700px) and (orientation: portrait) and (prefers-reduced-motion: reduce) {
  html:is(.page-window-page, .poems-window-page) body:is(.page-id-112, .page-id-114, .page-id-1212, .page-id-125, .book-detail-page, .page-id-143, .page-id-145)
    .subpage-home-button,
  html:is(.page-window-page, .poems-window-page) body:is(.page-id-112, .page-id-114, .page-id-1212, .page-id-125, .book-detail-page, .page-id-143, .page-id-145).poems-window-open
    .subpage-home-button {
    transition: none !important;
  }
}

/* Landscape reserves no blank navigation rows while the panel is open. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1000px) {
  html:is(.page-window-page, .poems-window-page) body:is(.page-id-112, .page-id-114, .page-id-1212, .page-id-125, .book-detail-page, .page-id-143, .page-id-145) {
    --mobile-panel-bottom: calc(
      env(safe-area-inset-bottom, 0px) + 38px + 32px + 6px
    );
  }

  html body:is(.home, .page-id-1595) #header-page-title .home-reveal-menu,
  html body:is(.page-id-112, .page-id-114, .page-id-1212, .page-id-125, .book-detail-page, .page-id-143, .page-id-145) #access.subpage-centered-nav > div > ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    width: min(566px, calc(100vw - 32px)) !important;
    max-width: 100% !important;
    gap: clamp(16px, 3vw, 28px) !important;
  }

  html body:is(.home, .page-id-1595) #header-page-title .home-reveal-menu {
    column-gap: clamp(8px, 2vw, 22px) !important;
  }

  html:is(.page-window-page, .poems-window-page) body:is(.page-id-112, .page-id-114, .page-id-1212, .page-id-125, .book-detail-page, .page-id-143, .page-id-145) {
    --mobile-nav-height: calc(1.8 * clamp(13px, 3.7vw, 16px));
  }

}

/* Paint the hero on the root canvas so it can continue behind iOS browser chrome. */
@media (max-width: 700px), (orientation: landscape) and (max-height: 500px) and (max-width: 1000px) {
  html:has(body.home),
  html:is(.page-window-page, .poems-window-page) {
    height: 100lvh !important;
    min-height: 100lvh !important;
    overflow: hidden !important;
  }

  html:has(body.home) {
    background-image:
      linear-gradient(
        180deg,
        rgba(17, 39, 48, 0.18) 0%,
        rgba(17, 65, 63, 0.12) 56%,
        rgba(17, 65, 63, 0.05) 100%
      ),
      url("/media/archive/1171.jpeg") !important;
    background-position: center center, center center !important;
    background-size: 100% 100%, cover !important;
    background-repeat: no-repeat, no-repeat !important;
  }

  body.home,
  html:is(.page-window-page, .poems-window-page) body {
    height: 100lvh !important;
    min-height: 100lvh !important;
    max-height: 100lvh !important;
  }

  body.page-id-112 {
    background-image:
      linear-gradient(
        180deg,
        rgba(8, 65, 92, 0.55) 0%,
        rgba(28, 17, 10, 0.55) 28%,
        rgba(28, 17, 10, 0.37) 62%,
        rgba(28, 17, 10, 0.16) 100%
      ),
      var(--archive-hero-photo) !important;
    background-position: center top, center top !important;
    background-size: 100% 100%, cover !important;
    background-repeat: no-repeat, no-repeat !important;
    background-attachment: fixed, fixed !important;
  }

  body.page-id-112 #content::before {
    display: none !important;
  }
}

/* Match the full-height image and its tint layer, even while iOS Safari's
   browser controls reduce the visible viewport. Keep the controls safe-area
   anchored; only the hero artwork uses the large viewport. */
@media (max-width: 700px), (orientation: landscape) and (max-height: 500px) and (max-width: 1000px) {
  html body:is(.home, .page-id-1595, .page-id-112, .page-id-114, .page-id-1212, .page-id-125, .book-detail-page, .page-id-143, .page-id-145)
    #masthead :is(#header-image-main, #header-image-main-inside) {
    height: 100lvh !important;
    min-height: 100lvh !important;
    max-height: 100lvh !important;
  }

  html body:is(.home, .page-id-1595, .page-id-112, .page-id-114, .page-id-1212, .page-id-125, .book-detail-page, .page-id-143, .page-id-145)
    #masthead #header-image-main .header-image {
    height: 100lvh !important;
    min-height: 100lvh !important;
    max-height: 100lvh !important;
  }

  html body:is(.home, .page-id-1595, .page-id-112, .page-id-114, .page-id-1212, .page-id-125, .book-detail-page, .page-id-143, .page-id-145)
    #masthead #header-overlay {
    height: 100lvh !important;
    min-height: 100lvh !important;
    max-height: 100lvh !important;
  }

  html body.page-id-112 #content::before {
    top: calc(0px - 100lvh) !important;
    height: 100lvh !important;
    min-height: 100lvh !important;
    max-height: 100lvh !important;
  }
}

/* Give the title, navigation rows, and Home control room in portrait. */
@media (max-width: 700px) and (orientation: portrait) {
  html:is(.page-window-page, .poems-window-page) body:is(.page-id-112, .page-id-114, .page-id-1212, .page-id-125, .book-detail-page, .page-id-143, .page-id-145) {
    --mobile-nav-bottom: calc(env(safe-area-inset-bottom, 0px) + 106px) !important;
    --mobile-panel-home-clearance: 56px;
    --mobile-panel-bottom: calc(
      env(safe-area-inset-bottom, 0px) + 38px + 32px + var(--mobile-panel-home-clearance)
    ) !important;
  }

  body:is(.page-id-112, .page-id-114, .page-id-1212, .page-id-125, .book-detail-page, .page-id-143, .page-id-145)
    #header-page-title .entry-title {
    translate: 0 -53.19px !important;
  }

  body:is(.page-id-1212, .page-id-125, .book-detail-page) #header-page-title .entry-title {
    translate: 0 -79.94px !important;
  }

  html:is(.page-window-page, .poems-window-page)
    body:is(.page-id-112, .page-id-114, .page-id-1212, .page-id-125, .book-detail-page, .page-id-143, .page-id-145):not(.poems-window-open)
    > :is(.poems-refresh-content, #content) {
    top: var(--mobile-panel-top) !important;
    right: auto !important;
    bottom: var(--mobile-panel-bottom) !important;
    left: 50% !important;
    width: calc(100vw - max(24px, env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px))) !important;
    height: auto !important;
    max-height: none !important;
    transform: translateX(-50%) scale(0.96) !important;
  }
}

@media (orientation: landscape) and (max-height: 500px) and (max-width: 1000px) {
  html body:is(.home, .page-id-1595, .page-id-112, .page-id-114, .page-id-1212, .page-id-125, .book-detail-page, .page-id-143, .page-id-145)
    #header-page-title .entry-title {
    position: absolute !important;
    top: calc(var(--mobile-nav-top, 50vh) / 2) !important;
    left: 50% !important;
    width: min(calc(100vw - 32px), 720px) !important;
    margin: 0 !important;
    translate: -50% -50% !important;
    text-align: center !important;
  }
}

/* On iPhone portrait, extend the painted hero through the top and bottom safe areas. */
@media (max-width: 700px) and (orientation: portrait) {
  html:has(body.home)::before,
  html:is(.page-window-page, .poems-window-page)::before {
    position: fixed;
    inset:
      calc(0px - env(safe-area-inset-top, 0px))
      0
      calc(0px - env(safe-area-inset-bottom, 0px));
    z-index: -1;
    background-image: inherit;
    background-position: inherit;
    background-size: inherit;
    background-repeat: inherit;
    background-attachment: scroll;
    pointer-events: none;
    content: "";
  }

  html body.home #header-page-title #homepage-navigation {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-content: center !important;
    row-gap: 3px !important;
    column-gap: clamp(0px, calc(4rem - 3em), 18px) !important;
    width: calc(100vw - 1rem) !important;
    max-width: none !important;
    margin-left: calc(0.5rem - 50vw) !important;
  }

  html body.home #header-page-title #homepage-navigation::after {
    flex: 0 0 100%;
    order: 1;
    height: 0;
    content: "";
  }

  html body.home #header-page-title #homepage-navigation > a:nth-child(n + 4) {
    order: 2;
  }
}