#private-gallery { --service-strip: #a7654d; }
#food-gallery { --service-strip: #596047; }
#love-gallery { --service-strip: #5f7f8a; }
#lifestyle-gallery { --service-strip: #426f78; }
#events-gallery { --service-strip: #a66f52; }
#brand-gallery { --service-strip: #536c78; }
#landscape-gallery { --service-strip: #60745a; }

@media (max-width: 700px) {

  .gallery-modal:not(#presets-gallery) .modal-header {
    position: static;
    z-index: 20;
    top: 0;
    display: flex;
    width: calc(100% + 28px);
    height: auto;
    min-height: 154px;
    margin: 0 -14px 32px !important;
    padding: calc(env(safe-area-inset-top, 0px) + 18px) 22px 17px;
    align-items: center;
    justify-content: center;
    overflow: visible;
    border: 0;
    background: var(--service-strip, #755f4d) !important;
    color: #fffaf0 !important;
    text-align: center;
    backdrop-filter: none;
  }

  .gallery-modal:not(#presets-gallery) .modal-header > div {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
  }

  .gallery-modal:not(#presets-gallery) .modal-header h2 {
    order: 1;
    max-width: 10.5ch;
    margin: 0;
    color: #fffaf0 !important;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.7rem, 13vw, 3.65rem);
    font-weight: 400;
    line-height: .82;
    letter-spacing: -.065em;
    text-wrap: balance;
  }

  .gallery-modal:not(#presets-gallery) .modal-header .eyebrow {
    order: 2;
    margin: 15px 0 0;
    color: #fffaf0 !important;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .58rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .22em;
    text-transform: uppercase;
  }

  .gallery-modal .modal-close {
    position: fixed;
    z-index: 30;
    top: auto;
    right: 14px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    left: 14px;
    display: flex;
    width: auto;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border: 1px solid rgb(255 250 240 / 0.62);
    background: rgb(5 5 5 / 0.96);
    color: #fffaf0;
    transform: none;
    outline: none;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
  }

  .gallery-modal .modal-close:focus,
  .gallery-modal .modal-close:focus-visible {
    outline: none;
    box-shadow: none;
  }

  .gallery-modal .modal-shell {
    padding-top: 0;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 86px);
  }

  .image-lightbox .lightbox-close {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  }

  .image-lightbox .lightbox-nav {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  }

  .image-lightbox .lightbox-counter {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 72px);
  }

  /* Tapping a Services photograph turns the gallery into a vertical story. */
  .gallery-modal.mobile-reading-mode {
    --service-strip: #755f4d;
    background: #f4f0e8;
    scroll-behavior: smooth;
  }

  #private-gallery.mobile-reading-mode { --service-strip: #a7654d; }
  #food-gallery.mobile-reading-mode { --service-strip: #596047; }
  #love-gallery.mobile-reading-mode { --service-strip: #5f7f8a; }
  #lifestyle-gallery.mobile-reading-mode { --service-strip: #426f78; }
  #events-gallery.mobile-reading-mode { --service-strip: #a66f52; }
  #brand-gallery.mobile-reading-mode { --service-strip: #536c78; }
  #landscape-gallery.mobile-reading-mode { --service-strip: #60745a; }

  .gallery-modal.mobile-reading-mode .modal-shell {
    padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 86px);
  }

  .gallery-modal.mobile-reading-mode .modal-header {
    position: static;
    z-index: 20;
    top: 0;
    display: flex;
    width: 100%;
    height: auto;
    min-height: 72px;
    margin: 0 0 32px !important;
    padding: calc(env(safe-area-inset-top, 0px) + 13px) 18px 13px;
    align-items: flex-end;
    overflow: visible;
    background: var(--service-strip);
    color: #fffaf0;
    border: 0;
    backdrop-filter: none;
  }

  .gallery-modal.mobile-reading-mode .modal-header > div {
    display: block;
  }

  .gallery-modal.mobile-reading-mode .modal-header .eyebrow {
    margin: 0 0 4px;
    color: rgb(255 250 240 / .72);
    font-size: .56rem;
  }

  .gallery-modal.mobile-reading-mode .modal-header h2 {
    margin: 0;
    color: #fffaf0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.45rem, 7vw, 2rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.025em;
  }

  /* Echo the central Suso Garcia signature across every mobile Service gallery. */
  .gallery-modal.mobile-reading-mode .modal-header {
    min-height: 154px;
    padding: calc(env(safe-area-inset-top, 0px) + 18px) 22px 17px;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--service-strip) !important;
    color: #fffaf0 !important;
  }

  .gallery-modal.mobile-reading-mode .modal-header > div {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
  }

  .gallery-modal.mobile-reading-mode .modal-header h2 {
    order: 1;
    max-width: 10.5ch;
    font-size: clamp(2.7rem, 13vw, 3.65rem);
    line-height: .82;
    letter-spacing: -.065em;
    text-wrap: balance;
    color: #fffaf0 !important;
  }

  .gallery-modal.mobile-reading-mode .modal-header .eyebrow {
    order: 2;
    margin: 15px 0 0;
    color: #fffaf0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .58rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .22em;
    text-transform: uppercase;
  }

  .gallery-modal.mobile-reading-mode .modal-wall,
  .gallery-modal.mobile-reading-mode .modal-wall.masonry-ready {
    display: block;
    width: 100%;
    height: auto !important;
    visibility: visible;
  }

  .gallery-modal.mobile-reading-mode .modal-wall .gallery-item {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    margin: 0;
    padding: 0;
    transform: none !important;
    scroll-margin-top: 72px;
    background: #f4f0e8;
  }

  .gallery-modal.mobile-reading-mode .modal-wall .gallery-item + .gallery-item {
    margin-top: 10px;
  }

  .gallery-modal.mobile-reading-mode .gallery-item img {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    margin: 0;
    object-fit: contain;
    background: #f4f0e8;
    cursor: default;
  }
}

/* Desktop galleries use the same colored editorial opening as mobile. */
@media (min-width: 701px) {
  .gallery-modal:not(#presets-gallery) .modal-header {
    position: static;
    min-height: clamp(112px, 13vh, 150px);
    margin-bottom: clamp(24px, 3vw, 42px);
    padding: 20px clamp(42px, 6vw, 92px);
    border: 0;
    background: var(--service-strip, #755f4d) !important;
    color: #fffaf0 !important;
    backdrop-filter: none;
  }

  .gallery-modal:not(#presets-gallery) .modal-header > div {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .gallery-modal:not(#presets-gallery) .modal-header h2 {
    order: 1;
    max-width: calc(100vw - 240px);
    margin: 0;
    color: #fffaf0 !important;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 3.35vw, 4rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.05em;
    white-space: nowrap;
    text-wrap: nowrap;
  }

  .gallery-modal:not(#presets-gallery) .modal-header .eyebrow {
    order: 2;
    margin: 12px 0 0;
    color: #fffaf0 !important;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .62rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .24em;
    text-transform: uppercase;
  }

  .gallery-modal:not(#presets-gallery) .modal-close {
    position: fixed;
    z-index: 30;
    top: 20px;
    right: 24px;
    border-color: rgb(255 250 240 / .72);
    background: rgb(15 14 12 / .22);
    color: #fffaf0;
    backdrop-filter: blur(8px);
  }
}