:root { --gallery-safe-top: env(safe-area-inset-top, 0px); --gallery-safe-bottom: env(safe-area-inset-bottom, 0px); }
/* Inauguration album: uses the landing page's existing tokens and fonts. */
.section-gallery { background: var(--obsidian); }
.gallery-heading { display: flex; justify-content: space-between; align-items: end; gap: var(--space-md); }
.gallery-heading .section-label { margin-bottom: var(--space-xs); }
.gallery-date { color: var(--mist); text-align: right; font-size: var(--text-sm); line-height: 1.7; }
.gallery-date span { display: block; color: var(--gold); }
.gallery-intro { color: var(--mist); margin-top: var(--space-sm); margin-bottom: var(--space-lg); }
.gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gallery-photo { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-sm); background: var(--charcoal); cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
.gallery-photo picture { display: block; height: 100%; }
.gallery-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 250ms var(--ease-out), opacity 150ms; }
.gallery-photo[data-preview] img { object-position: center 20%; }
.gallery-photo[aria-busy="true"] img { opacity: .5; }
.gallery-photo:active img { transform: scale(.98); }
.gallery-photo:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.gallery-toggle, .gallery-collapse { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; width: fit-content; max-width: 100%; margin: var(--space-lg) auto 0; padding: 12px 18px; color: var(--cream); font: inherit; font-size: var(--text-sm); background: none; border: 1px solid var(--stone); border-radius: var(--radius-sm); cursor: pointer; transition: border-color 150ms, background 150ms; list-style: none; text-align: center; touch-action: manipulation; }
.gallery-toggle::-webkit-details-marker { display: none; }
.gallery-toggle:focus-visible, .gallery-collapse:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.gallery-hide-label, .gallery-more[open] .gallery-show-label { display: none; }
.gallery-more[open] .gallery-hide-label { display: inline; }
.gallery-more[open] .gallery-toggle svg { transform: rotate(180deg); }
.gallery-grid-more { margin-top: var(--space-lg); }
.gallery-collapse[hidden] { display: none; }
@media (hover: hover) {
  .gallery-photo:hover img { transform: scale(1.025); }
  .gallery-toggle:hover, .gallery-collapse:hover { border-color: var(--gold); background: var(--charcoal); }
}
@media (min-width: 800px) {
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .gallery-photo { aspect-ratio: 4 / 3; }
}
@media (max-width: 599px) {
  .gallery-heading { display: block; }
  .gallery-date { display: flex; flex-wrap: wrap; gap: 6px 16px; text-align: left; margin-top: var(--space-sm); }
  .gallery-intro { max-width: 30ch; }
}
/* Specificity keeps custom viewer rules ahead of asynchronously loaded vendor CSS. */
html.gallery-is-open { overflow: hidden; overscroll-behavior: none; }
.xpace-viewer.pswp { --pswp-bg: #101210; --pswp-icon-color: #f5f5f5; --pswp-icon-color-secondary: #101210; --pswp-icon-stroke-color: #101210; --pswp-root-z-index: 3000; font-family: var(--font-sans); }
.xpace-viewer .pswp__top-bar { padding: env(safe-area-inset-top, 0px) max(8px, env(safe-area-inset-right, 0px)) 0 max(8px, env(safe-area-inset-left, 0px)); background: linear-gradient(rgb(16 18 16 / 90%), transparent); }
.xpace-viewer.pswp--touch .pswp__button--arrow { visibility: visible; }
.xpace-viewer .pswp__button { min-width: 48px; min-height: 48px; }
.xpace-viewer .pswp__button:focus-visible { outline: 2px solid var(--gold); outline-offset: -5px; }
.xpace-viewer .pswp__counter { font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: 14px; opacity: 1; }
.xpace-viewer .pswp__album-title { position: absolute; left: 50%; transform: translateX(-50%); align-self: center; margin: 0; color: var(--mist); font-size: 14px; white-space: nowrap; pointer-events: none; }
.xpace-viewer .pswp__album-help { position: absolute; bottom: max(18px, env(safe-area-inset-bottom, 0px)); left: 16px; right: 16px; text-align: center; color: var(--mist); font-size: 12px; pointer-events: none; transition: opacity 200ms; }
.xpace-viewer:not(.pswp--ui-visible) .pswp__album-help { opacity: 0; }
.xpace-viewer .pswp__error-msg a { color: var(--gold); text-decoration: underline; display: inline-block; padding: 12px; }
@media (pointer: coarse) {
  .xpace-viewer .pswp__button--arrow { top: auto; bottom: max(42px, env(safe-area-inset-bottom, 0px)); width: 48px; height: 48px; margin-top: 0; }
  .xpace-viewer .pswp__button--arrow .pswp__icn { top: 9px; margin-top: 0; width: 30px; height: 30px; }
  .xpace-viewer .pswp__button--arrow--prev { left: max(8px, env(safe-area-inset-left, 0px)); }
  .xpace-viewer .pswp__button--arrow--next { right: max(8px, env(safe-area-inset-right, 0px)); }
}
@media (max-width: 359px) { .xpace-viewer .pswp__album-title { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) {
  .gallery-photo img, .gallery-toggle, .gallery-collapse, .xpace-viewer .pswp__album-help { transition: none; }
}
