/* Gallery film strip: all 34 photos side by side at full screen height. The strip holds the screen
   while the page scrolls and slides sideways, so each wide photo is revealed from one side to the
   other before the next one follows. Tapping a photo opens the full-screen viewer.
   The plain six-photo grid and button come back only if the script does not run. */

.reel{display:none}
.reel-live .reel{display:block}
.reel-live #grid,.reel-live #more{display:none}


.reel-stage{position:relative;height:100vh;height:100svh;overflow:hidden;background:#080808;
  /* Break out of the section's side padding so the strip runs edge to edge (set here, not on the
     pinned element, because pinning resets that element's margins). */
  width:100vw;margin-left:calc(var(--pad) * -1)}
/* Photos are stacked; each is sized to cover the screen at its natural 3:2 shape (so on a phone it is
   much wider than the screen) and slides from its first half to its second before fading out. */
.reel-track{position:absolute;inset:0}
.reel-shot{position:absolute;top:0;left:0;margin:0;padding:0;border:0;background:none;cursor:zoom-in;
  width:max(100%,calc(100svh * 1.5));aspect-ratio:3/2;opacity:0;will-change:transform,opacity}
.reel-shot:first-child{opacity:1}
.reel-shot img{display:block;width:100%;height:100%;object-fit:cover}

/* One caption area for the photo currently on screen. */
.reel-caption{position:absolute;z-index:1;left:0;right:0;bottom:0;margin:0;
  padding:90px var(--pad) calc(max(22px,env(safe-area-inset-bottom)) + 30px);
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.66));color:#fff;pointer-events:none;overflow:hidden}
.reel-caption-inner{display:block;max-width:min(560px,calc(100vw - 2 * var(--pad)));will-change:transform}
.reel-caption strong{display:block;margin-bottom:6px;font:400 clamp(30px,4.4vw,54px)/1 CompassDisplay,serif;letter-spacing:-.03em}
.reel-caption span{display:block;font-size:clamp(13px,1.3vw,16px);line-height:1.45;color:rgba(255,255,255,.88)}

.reel-hud{position:absolute;z-index:2;left:var(--pad);right:var(--pad);top:calc(max(20px,env(safe-area-inset-top)) + 76px);
  display:flex;justify-content:space-between;color:#fff;pointer-events:none;
  font:700 10px/1 CompassSans,Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.reel-count{font-variant-numeric:tabular-nums}
.reel-of{opacity:.6}
.reel-progress{position:absolute;z-index:2;left:var(--pad);right:var(--pad);bottom:max(18px,env(safe-area-inset-bottom));height:1px;background:rgba(255,255,255,.3)}
.reel-progress i{position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}

@media(max-width:600px){
  .reel-hud{top:calc(max(20px,env(safe-area-inset-top)) + 62px);font-size:9px}
  .reel-caption{padding-top:70px}
}
/* Stacked photos would all catch taps; the stage handles the tap for whichever photo is showing. */
.reel-shot{pointer-events:none}
.reel-stage{cursor:zoom-in}

/* Swipe version: arrows (computers), a one-time hint, and no page-scroll takeover. */
.reel-stage{user-select:none;-webkit-user-select:none;outline:none}
.reel-stage:focus-visible{box-shadow:inset 0 0 0 2px #fff}
.reel-nav{position:absolute;z-index:3;right:var(--pad);bottom:calc(max(18px,env(safe-area-inset-bottom)) + 26px);display:flex;gap:10px}
.reel-arrow{width:52px;height:52px;border:1px solid rgba(255,255,255,.85);background:rgba(0,0,0,.35);color:#fff;
  font:300 30px/1 Arial,sans-serif;cursor:pointer;transition:background .2s ease,opacity .2s ease}
.reel-arrow:hover{background:rgba(0,0,0,.6)}
.reel-arrow:disabled{opacity:.3;cursor:default}
.reel-hint{position:absolute;z-index:3;left:50%;top:50%;margin:0;padding:12px 18px;transform:translate(-50%,-50%);
  background:rgba(0,0,0,.45);color:#fff;pointer-events:none;
  font:700 10px/1 CompassSans,Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase}
.reel-hint span{display:inline-block;margin-left:6px;font-size:14px;animation:reelNudge 1.4s ease-in-out infinite}
@keyframes reelNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(-6px)}}
@media(pointer:fine){.reel-hint span{animation-name:reelNudgeRight}}
@keyframes reelNudgeRight{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
@media(max-width:600px){
  .reel-nav{display:none}
}
@media(prefers-reduced-motion:reduce){.reel-hint span{animation:none}}
/* Keep the photos' own layering (used for the cross-fade) inside the track, beneath the caption. */
.reel-track{z-index:0;isolation:isolate}

/* Slideshow: pause/play button. */
.reel-hint{display:none}
.reel-play{position:absolute;z-index:3;right:calc(var(--pad) + 124px);bottom:calc(max(18px,env(safe-area-inset-bottom)) + 26px);
  width:52px;height:52px;border:1px solid rgba(255,255,255,.85);background:rgba(0,0,0,.35);cursor:pointer;
  display:grid;place-items:center;transition:background .2s ease}
.reel-play:hover{background:rgba(0,0,0,.6)}
.reel-play-icon{display:block;width:14px;height:16px;border-left:4px solid #fff;border-right:4px solid #fff}
.reel-play.is-paused .reel-play-icon{width:0;height:0;border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff;margin-left:4px}
@media(max-width:600px){
  .reel-play{right:var(--pad);width:44px;height:44px}
  .reel-caption{padding-right:calc(var(--pad) + 58px)}
}