/* Gallery 1j: filmstrip viewer. */
.gallery { position: relative; background: var(--charcoal); color: var(--bone); overflow: hidden; }
.gallery__head {
  position: absolute; z-index: 2; left: 0; right: 0; top: 64px;
  pointer-events: none;
}
.gallery__head .section-head { gap: 14px; max-width: calc(420px + 2 * var(--gutter)); margin-left: 0; } /* left, aligned with the caption (1j) */
.gallery__head h2 { color: var(--bone); font-size: 48px; }
.gallery__head h2 em { color: var(--gold); font-weight: 500; }
.gallery__head .eyebrow { color: var(--gold); }

.gal__viewer { display: block; }
.gal__viewer:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.gal__frame {
  position: relative; height: 600px; overflow: hidden; background: var(--charcoal);
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.gal__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.gal__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(26, 20, 19, .75) 0%, transparent 45%), linear-gradient(0deg, rgba(26, 20, 19, .55) 0%, transparent 35%);
}
.gal__meta {
  position: absolute; left: var(--gutter); right: 160px; bottom: 40px;
  display: flex; align-items: baseline; gap: 16px;
}
.gal__no { font: 600 40px/1 var(--font-serif); color: var(--gold); }
.gal__cap { font: italic 500 22px/1.2 var(--font-serif); color: var(--bone); }
.gal__nav { position: absolute; right: var(--gutter); bottom: 40px; display: flex; gap: 8px; }
.gal__btn {
  width: 48px; height: 48px; border-radius: 50%; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 20px/1 var(--font-sans); cursor: pointer;
  transition: background-color .18s ease, transform .14s ease;
}
.gal__btn--prev { border: 1.5px solid var(--gold); background: rgba(26, 20, 19, .4); color: var(--gold); }
.gal__btn--next { border: 0; background: var(--gold); color: var(--maroon); }
.gal__btn--prev:hover { background: rgba(224, 165, 63, .22); }
.gal__btn--next:hover { background: var(--gold-deep); }
.gal__btn:active { transform: scale(.94); }
.gal__btn:focus-visible { outline: 3px solid var(--bone); outline-offset: 3px; }

.gal__strip {
  display: flex; gap: 4px; padding: 4px; background: var(--maroon);
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin;
}
.gal__thumb {
  flex: 1 0 72px; height: 76px; padding: 0; border: 0; border-radius: 3px; overflow: hidden;
  background: var(--maroon-soft); cursor: pointer; opacity: .55;
  transition: opacity .18s ease;
}
.gal__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal__thumb:hover { opacity: .85; }
.gal__thumb[aria-current="true"] { opacity: 1; outline: 2px solid var(--gold); outline-offset: -2px; }
.gal__thumb:focus-visible { outline: 3px solid var(--bone); outline-offset: -3px; opacity: 1; }

@media (max-width: 760px) {
  .gallery__head { position: static; padding: 56px 0 28px; pointer-events: auto; }
  .gallery__head .section-head { max-width: none; }
  .gallery__head h2 { font-size: clamp(32px, 9vw, 40px); }
  .gal__frame { height: min(65vw, 600px); min-height: 260px; }
  .gal__scrim { background: linear-gradient(0deg, rgba(26, 20, 19, .8) 0%, transparent 55%); }
  .gal__meta { left: 16px; right: 16px; bottom: 68px; gap: 12px; }
  .gal__no { font-size: 30px; }
  .gal__cap { font-size: 17px; }
  .gal__nav { left: 16px; right: 16px; bottom: 12px; justify-content: space-between; }
  .gal__btn { width: 44px; height: 44px; }
  .gal__thumb { flex: 0 0 72px; width: 72px; height: 72px; }
}