/* Warm, celebratory palette: serif headings on the public site */
body > main h1,
body > main h2,
body > main h3,
body > header h2,
.memorial-hero-name,
.slider-wrap header h2 {
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: 0.005em;
}

.memorial-hero-name {
  font-weight: 700;
}

.gallery-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

/* Memorial hero */
.memorial-hero {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 2fr;
  gap: 2.5rem;
  align-items: center;
  margin: 1rem -1rem 3rem;
  padding: 3rem 1.5rem;
  border-radius: 16px;
  background: linear-gradient(
    180deg,
    rgba(254, 215, 170, 0.18) 0%,
    rgba(254, 215, 170, 0.04) 100%
  );
}

@media (prefers-color-scheme: dark) {
  .memorial-hero {
    background: linear-gradient(
      180deg,
      rgba(180, 83, 9, 0.16) 0%,
      rgba(180, 83, 9, 0.04) 100%
    );
  }
}

@media (max-width: 720px) {
  .memorial-hero {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 1.5rem;
  }
}

.memorial-hero-photo {
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
  justify-self: center;
}

.memorial-hero-name {
  margin: 0 0 0.25rem;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
}

.memorial-hero-dates {
  margin: 0 0 1rem;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  opacity: 0.75;
}

.memorial-hero-tagline {
  margin: 0 0 1rem;
  font-size: 1.1rem;
  opacity: 0.85;
}

.memorial-hero-bio p {
  margin: 0 0 0.75rem;
  line-height: 1.6;
}

.memorial-speeches-button {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  background: var(--pico-primary, #f59e0b);
  color: var(--pico-primary-inverse, #fff);
  text-decoration: none;
  font-weight: 600;
  transition: filter 0.2s ease;
}

.memorial-speeches-button:hover {
  filter: brightness(1.05);
  text-decoration: none;
}

/* Splide slider on the home page */
.slider-wrap {
  margin: 2rem 0 3rem;
}

.splide__slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.splide__slide {
  opacity: 0.6;
}

.splide__slide.is-active {
  opacity: 1;
}

.splide__slide div {
  padding: calc(var(--pico-spacing) * 0.5) 0;
  color: var(--pico-muted-color);
  text-align: center;
}

.thumbnails {
  display: flex;
  margin: 1rem auto 0;
  padding: 0;
  justify-content: center;
  flex-wrap: wrap;
}

.thumbnail {
  width: 70px;
  height: 70px;
  overflow: hidden;
  list-style: none;
  margin: 0 0.2rem;
  cursor: pointer;
  opacity: 0.4;
  border-radius: 6px;
  transition: opacity 0.2s ease;
}

.thumbnail.is-active {
  opacity: 1;
}

.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Slideshow trigger button (gallery-controls) */
.slideshow-trigger {
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: inherit;
  padding: 0.25rem 0.5rem;
}

.slideshow-trigger:hover {
  text-decoration: underline;
}

/* Full-screen slideshow dialog */
.slideshow-dialog {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: none;
  background: rgba(0, 0, 0, 0.96);
  color: white;
}

.slideshow-dialog::backdrop {
  background: rgba(0, 0, 0, 0.96);
}

.slideshow-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  font-size: 1.4rem;
  cursor: pointer;
}

.slideshow-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

.slideshow-dialog .swiper {
  width: 100%;
  height: 100%;
}

.slideshow-dialog .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
}

.slideshow-dialog .swiper-slide img,
.slideshow-dialog .swiper-slide video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.slideshow-dialog .slide-caption {
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  max-width: 80%;
  padding: 0.6rem 1.2rem;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border-radius: 6px;
  font-size: 1rem;
  font-style: italic;
  text-align: center;
  white-space: pre-wrap;
}

/* PhotoSwipe lightbox caption (registered as a UI element in initPhotoSwipe.js) */
.pswp__caption {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  max-width: 80%;
  padding: 0.5rem 1rem;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border-radius: 6px;
  font-size: 0.95rem;
  font-style: italic;
  text-align: center;
  white-space: pre-wrap;
  pointer-events: none;
  z-index: 1100;
}

.slideshow-dialog .swiper-button-next,
.slideshow-dialog .swiper-button-prev {
  color: white;
}

.slideshow-dialog .swiper-pagination-bullet {
  background: white;
}

/* Guestbook (public) */
.guestbook-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.guestbook-entry {
  padding: 1rem 0;
  border-bottom: 1px solid var(--pico-muted-border-color);
}

.guestbook-entry:last-child {
  border-bottom: none;
}

.guestbook-entry header {
  margin-bottom: 0.5rem;
}

/* Guestbook (admin) */
.admin-guestbook-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.admin-guestbook-entry {
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid var(--pico-muted-border-color);
  background: var(--pico-card-background-color);
}

.admin-guestbook-entry.is-pending {
  border-left: 4px solid var(--pico-primary);
}

.admin-guestbook-entry.is-approved {
  border-left: 4px solid #4ade80;
}

.admin-guestbook-badge {
  display: inline-block;
  margin-left: 0.75rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--pico-muted-border-color);
  vertical-align: middle;
}

.admin-guestbook-entry.is-approved .admin-guestbook-badge {
  background: rgba(74, 222, 128, 0.18);
  color: #166534;
}

.admin-guestbook-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* Gallery grid styles */
.galleries-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
  box-sizing: border-box;
}

.gallery-card {
  border-radius: 12px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.gallery-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 28px rgba(180, 83, 9, 0.18);
}

.gallery-card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.gallery-content {
  padding: 1.5rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background-color: var(--pico-card-background-color);
}

.gallery-name {
  margin: 0 0 0.75rem 0;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
}

.breadcrumbs {
  top: -3rem;
  position: relative;
  display: block;
  padding-left: 1rem;
}

.bi {
  padding-right: 5px;
}

/* Gallery view styles */
.back-link {
  display: inline-block;
  margin: 1rem;
  text-decoration: none;
  color: #333;
  font-weight: 500;
}

.back-link:hover {
  text-decoration: underline;
}

.gallery-info {
  margin: 1rem 0 2.5rem;
}

.gallery-title {
  margin-bottom: 0;
}

.gallery-tags {
  margin-left: 0.5rem;
}

.gallery-description {
  margin: 1rem 0;
}

/* new mansory css   */

#mansory-wraper {
  margin: 0 auto;
  box-sizing: border-box;
}

#masonry-container {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}
.masonry-item {
  position: relative; /* IMPORTANT FOR LAZY LOADING XDD */
  /* Pre-layout: items would stack at full-container-width and one giant
     grey-shimmer column. Hide them entirely (out of flow, no reserved
     space) until masonry.js positions each item and adds .after-layout.
     A <noscript> override in the page restores display:block for the
     JS-disabled case so the gallery still works. */
  display: none;
}

.masonry-item.after-layout {
  position: absolute;
  display: block;
}

.masonry-item-content {
  position: relative;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
}
.masonry-item a {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 0px;
  display: block;
  margin-bottom: 100%; /* aspect-ratio reservation — only visible post-layout
                          since .masonry-item is display:none until masonry.js
                          adds .after-layout */
}

.masonry-item.after-layout div a {
  margin-bottom: 0;
}

.masonry-item a:has(img.loaded),
.masonry-item a:has(video.loaded) {
  height: 100%;
}

.masonry-item img {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  display: block;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.masonry-item img.loaded {
  opacity: 1;
}

/* Legacy video fallback (no poster yet). Force-fill the aspect-ratio
   container set by masonry.js — auto-height would let the video element
   render at its natural size before layout finishes, causing a flash. */
.masonry-item .masonry-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  display: block;
  background: #000;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.masonry-item .masonry-video.loaded {
  opacity: 1;
}


/* Video items in the masonry grid open in the lightbox like images do, so
   the inline <video> shows the first frame as a poster (no controls) and a
   play-icon overlay tells the user to click. The whole tile is the link. */
.masonry-video-link {
  position: relative;
  display: block;
  border-bottom: 0;
}

.masonry-video-play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Don't paint the play icon until masonry has positioned the item and the
   poster has loaded — otherwise the giant pre-layout masonry-item shows
   one huge play icon per video before the columns collapse to grid size. */
.masonry-item.after-layout .masonry-video-link:has(img.loaded)
  .masonry-video-play-overlay,
.masonry-item.after-layout .masonry-video-link:has(video.loaded)
  .masonry-video-play-overlay {
  opacity: 1;
}

/* In-lightbox video container — fills the slide, centers the <video>,
   and lets the native player UI handle controls. */
.pswp__video-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.pswp__video-wrap video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
}

/* Discussion badge on the public masonry thumbnails — unified indicator
   for "this photo has a caption and/or comments". Same chat-bubble icon,
   same slot, with an optional count when there are comments. The badge
   is hidden by default and revealed via the data-attributes set during
   server-render (caption) or JS hydration (comments). */
.masonry-item .discussion-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: 13px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  display: none;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  line-height: 1;
  pointer-events: none;
  z-index: 2;
}

.masonry-item .discussion-badge[data-has-caption="1"],
.masonry-item .discussion-badge[data-has-comments="1"] {
  display: inline-flex;
}

.masonry-item .discussion-badge svg {
  display: block;
}

.masonry-item .discussion-count {
  font-size: 0.75em;
  line-height: 1;
}

.masonry-item .caption-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.6rem 0.8rem 0.7rem;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.45) 70%,
    transparent 100%
  );
  color: #fff;
  font-size: 0.85rem;
  font-style: italic;
  white-space: pre-wrap;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  opacity: 0;
  transform: translateY(15%);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  z-index: 1;
}

.masonry-item:hover .caption-overlay,
.masonry-item:focus-within .caption-overlay {
  opacity: 1;
  transform: translateY(0);
}
.placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    110deg,
    var(--pico-muted-border-color, #ececec) 30%,
    var(--pico-form-element-background-color, #f5f5f5) 50%,
    var(--pico-muted-border-color, #ececec) 60%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
}
@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* =====================================================================
 * Per-photo comment system
 * =====================================================================
 *
 * Comments live inside each Swiper slide, below the photo + caption.
 * The slide becomes vertically scrollable so swiping moves between photos
 * while normal touch/wheel scrolling reveals the discussion.
 */

.slide-with-comments {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.slide-with-comments .slide-media {
  flex: 0 0 auto;
  max-height: 75vh;
  display: grid;
  place-items: center;
}

.slide-with-comments .slide-media img,
.slide-with-comments .slide-media video {
  max-width: 100%;
  max-height: 75vh;
  width: auto;
  height: auto;
}

.slide-with-comments .slide-caption {
  position: static;
  transform: none;
  left: auto;
  max-width: none;
  padding: 0.5rem 1rem 0.25rem;
  font-style: italic;
  text-align: center;
}

.slide-with-comments .comments-thread {
  flex: 1 0 auto;
  padding: 0.75rem 1rem 1.5rem;
  max-width: 60ch;
  width: 100%;
  margin: 0 auto;
  color: #f5f5f5;
}

.comments-heading {
  font-size: 1rem;
  margin: 0.5rem 0 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding-bottom: 0.25rem;
}

ol.comments {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.comment {
  padding: 0.5rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.comment:first-child {
  border-top: none;
}

.comment-author {
  font-weight: 600;
}

.comment-meta {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.85em;
  margin-bottom: 0.25rem;
}

.comment-body {
  margin: 0.25rem 0 0.5rem;
}

.comment.comment-pending-mine {
  background: rgba(255, 200, 0, 0.08);
  border-left: 3px solid #f6b73c;
  padding-left: 0.6rem;
}

/* Add-comment trigger — a <details><summary> styled like a button. The
 * native disclosure widget is keyboard- and screen-reader-accessible by
 * default, so we just dress the summary up as a button.
 *
 * Marker suppression needs three rules to cover everyone: list-style for
 * Firefox/modern, ::marker for spec-compliant rendering, and the legacy
 * ::-webkit-details-marker for older WebKit. Without all three, the
 * native triangle/chevron leaks in and overlaps our label. */
.comment-form-disclosure {
  margin-top: 0.5rem;
}
.comment-form-disclosure > summary.comment-form-trigger {
  display: inline-block;
  cursor: pointer;
  list-style: none;
  padding: 0.5rem 1.1rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.95em;
  font-weight: 500;
  user-select: none;
}
.comment-form-disclosure > summary.comment-form-trigger::-webkit-details-marker {
  display: none;
}
.comment-form-disclosure > summary.comment-form-trigger::marker {
  content: "";
}
/* Pico draws the disclosure chevron as `details summary::after` with a
 * background-image SVG, which ignores all the standard marker rules above.
 * Suppress it explicitly for our trigger so the label has the full button
 * width to itself. */
.comment-form-disclosure > summary.comment-form-trigger::after {
  display: none;
  content: none;
}
/* Pico paints summary text with --pico-primary on :focus and :focus-visible
 * (and a near-pumpkin shade by default via --pico-accordion-close-summary-color).
 * Cover every pseudo-state explicitly so the trigger never reverts to pumpkin
 * after a click — clicking sets focus, mouse-leave doesn't blur. */
.comment-form-disclosure > summary.comment-form-trigger:hover,
.comment-form-disclosure > summary.comment-form-trigger:focus,
.comment-form-disclosure > summary.comment-form-trigger:focus-visible,
.comment-form-disclosure > summary.comment-form-trigger:active {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
  outline: none;
}
.comment-form-disclosure[open] > summary.comment-form-trigger {
  margin-bottom: 0.5rem;
}
.comment-form-disclosure .comment-form-body {
  padding-top: 0.25rem;
}

.comment-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.5rem;
}

.comment-form textarea {
  width: 100%;
}

/* Pico's defaults paint <label>, helper text, submit button, etc. with the
 * page-level pumpkin theme — fine on the light page background, wrong inside
 * our dark comment thread. Override on .comments-thread descendants only so
 * the rest of the site is unaffected. */
.comments-thread label,
.comments-thread .text-muted,
.comments-thread .text-muted small,
.comments-thread small {
  color: rgba(255, 255, 255, 0.85);
}

.comments-thread input[type="text"],
.comments-thread input[type="email"],
.comments-thread textarea {
  background: rgba(255, 255, 255, 0.06);
  color: #f5f5f5;
  border-color: rgba(255, 255, 255, 0.25);
}

.comments-thread input[type="text"]::placeholder,
.comments-thread input[type="email"]::placeholder,
.comments-thread textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.comments-thread input[type="text"]:focus,
.comments-thread input[type="email"]:focus,
.comments-thread textarea:focus {
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 0 0.125rem rgba(255, 255, 255, 0.15);
}

/* Submit button — neutral white-on-translucent rather than Pico's primary
 * pumpkin background so the form doesn't suddenly burst into orange. */
.comments-thread .comment-form button[type="submit"] {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  align-self: flex-start;
}

.comments-thread .comment-form button[type="submit"]:hover,
.comments-thread .comment-form button[type="submit"]:focus-visible {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.6);
}

.comment-form-error {
  color: #ff6b6b;
  font-size: 0.9em;
}

.comment-status-success {
  color: #b6efb6;
  padding: 0.25rem 0.5rem;
  margin: 0.25rem 0 0.5rem;
  border-left: 3px solid #4ec672;
}

/* Honeypot — visually hidden, accessible to bots that fill every input. */
.honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

/* Banner shown after an unauth comment submission. Auto-refreshes via
 * HTMX visibilitychange trigger; clicking "I've clicked the link" triggers
 * the same /auth/claim fetch manually. */
.claim-banner {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 200, 0, 0.1);
  border: 1px solid rgba(246, 183, 60, 0.5);
  border-radius: 6px;
}

.claim-banner p {
  margin: 0 0 0.5rem;
}

.claim-banner button {
  margin-top: 0.25rem;
}

.claim-error {
  background: rgba(255, 100, 100, 0.1);
  border-color: rgba(255, 100, 100, 0.5);
}

/* Layout-header auth snippet — placeholder gets replaced by /api/me/badge
 * response. Brief flash of "…" is intentional (cache-friendly hydration). */
.nav-auth .auth-snippet {
  font-size: 0.9em;
}

.nav-auth .auth-snippet a,
.nav-auth .auth-snippet .auth-logout-btn {
  color: var(--pico-color);
}

/* =====================================================================
 * PhotoSwipe lightbox: comments bottom drawer
 * =====================================================================
 *
 * Toggled by the chat-bubble button in PhotoSwipe's top bar. The drawer
 * slides up from the bottom of the lightbox and overlaps the bottom half
 * of the photo — the photo can still be panned/zoomed via touch/scroll
 * if the user wants to see what's behind the drawer.
 *
 * Default state: pointer-events: none + translated off-screen, so it's
 * fully invisible/inert when closed. When `.pswp--comments-open` is on
 * the lightbox root, transform clears and pointer events re-enable.
 */

.pswp__comments-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: min(60vh, 600px);
  background: rgba(0, 0, 0, 0.92);
  color: #f5f5f5;
  padding: 1rem 1rem 1.5rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateY(100%);
  transition: transform 0.25s ease;
  z-index: 1700;
  pointer-events: none;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.pswp--comments-open .pswp__comments-panel {
  transform: translateY(0);
  pointer-events: auto;
}

/* Reuse the same .comment / .comment-form styling defined for the slideshow
 * thread — the nested .comments-thread inside the panel inherits cleanly
 * because those rules are already class-scoped, not container-scoped. We
 * override max-width since the drawer already constrains horizontal space. */
.pswp__comments-panel .comments-thread {
  padding: 0;
  max-width: 60ch;
  margin: 0 auto;
  width: 100%;
}

/* When the drawer is open on small viewports, push the PhotoSwipe caption
 * up out of its way so the two don't visually collide. */
.pswp--comments-open .pswp__caption {
  bottom: min(60vh, 600px);
}