/* Shelter Island: a quiet, full-width photographic filmstrip. */
:root {
    color-scheme: light;
    --gutter: clamp(1.25rem, 5vw, 5.5rem);
    --photo-height: clamp(19rem, 55vh, 38rem);
}
[hidden] { display: none !important; }
body { padding: 0; }
main { max-width: none; }
a:focus-visible, button:focus-visible, .filmstrip:focus-visible { outline: 2px solid var(--link); outline-offset: 5px; }
.page-header { padding: 3.5rem var(--gutter) 2rem; }
.gallery-toolbar { display: flex; gap: 1rem; align-items: center; justify-content: flex-end; padding: 0 var(--gutter) 1rem; }
.gallery-controls { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
#photo-counter { font-size: 0.75rem; font-variant-numeric: tabular-nums; margin-right: 1rem; color: var(--muted); }
.gallery-controls button { width: 2.75rem; height: 2.75rem; border: 1px solid var(--rule); border-radius: 50%; color: var(--ink); background: transparent; cursor: pointer; font-size: 1.25rem; transition: background 150ms; }
.gallery-controls button:hover:not(:disabled) { background: #e8e3d8; }
.gallery-controls button:disabled { opacity: 0.3; cursor: default; }
.filmstrip { display: flex; gap: 0.9rem; overflow-x: auto; padding: 0 var(--gutter) 1.25rem; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #b6ae9e transparent; }
/* End space lets the final photograph settle at the same left edge as the first. */
.filmstrip::after { content: ""; flex: 0 0 max(0px, calc(100% - var(--photo-height) * 0.75 - var(--gutter) * 2 - 0.9rem)); }
.photo { display: block; height: var(--photo-height); flex: 0 0 auto; scroll-snap-align: start; background: #e9e4da; }
.photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.collection-footer { margin: 2rem var(--gutter) 0; }
/* The poster stays still until the visitor opens the video and presses Play. */
.video-tile { position: relative; }
.play-badge { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1rem; border-radius: 2rem; background: #1c1c19e6; color: #fff; font-size: 1.1rem; }
.play-badge span { font-size: 0.85rem; }
body.video-open { overflow: hidden; }
.video-dialog { max-width: calc(100vw - 2rem); max-height: calc(100svh - 2rem); padding: 3.5rem 1rem 1rem; border: 0; background: #1c1c19; color: #fff; }
.video-dialog::backdrop { background: #1c1c19f7; }
.video-dialog video { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100svh - 10rem); margin: auto; background: #242723; }
#close-video { position: absolute; top: 0.5rem; right: 0.5rem; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; background: transparent; color: #fff; font-size: 2rem; cursor: pointer; }
.clip-download { margin: 0.85rem 0 0; text-align: center; font-size: 0.75rem; color: #dedbd2; }
footer { border-top: 1px solid var(--rule); padding: 1.5rem 0 3rem; font-size: 0.8rem; color: var(--muted); }
footer a { text-decoration: none; }
.pswp {
    --pswp-bg: #fff;
    --pswp-icon-color: #1a1a1a;
    --pswp-icon-color-secondary: #fff;
    --pswp-icon-stroke-color: #fff;
}
@media (max-width: 600px) {
    :root { --photo-height: 51svh; }
    .gallery-toolbar { align-items: flex-end; }
    #photo-counter { margin-right: 0.35rem; }
    .gallery-controls { gap: 0.35rem; }
    .gallery-controls button { width: 2.5rem; height: 2.5rem; }
    .filmstrip { gap: 0.6rem; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
}