/* The final photo band and footer use the same positive and negative pixel edge. */
.closing-scene {
  --closing-step:clamp(24px,7.6923vw,112px);
  --closing-black:#080808;
  --closing-edge:polygon(0 calc(var(--closing-step) * 3),7.6923% calc(var(--closing-step) * 3),7.6923% calc(var(--closing-step) * 2),15.3846% calc(var(--closing-step) * 2),15.3846% var(--closing-step),23.0769% var(--closing-step),23.0769% 0,76.9231% 0,76.9231% var(--closing-step),84.6154% var(--closing-step),84.6154% calc(var(--closing-step) * 2),92.3077% calc(var(--closing-step) * 2),92.3077% calc(var(--closing-step) * 3),100% calc(var(--closing-step) * 3),100% 100%,0 100%);
  position:relative;
  isolation:isolate;
  background:var(--closing-black);
}
.closing-gallery {
  --closing-roof:polygon(7.6923% 0,92.3077% 0,92.3077% calc(var(--closing-step) + 1px),84.6154% calc(var(--closing-step) + 1px),84.6154% calc(var(--closing-step) * 2 + 1px),76.9231% calc(var(--closing-step) * 2 + 1px),76.9231% 100%,23.0769% 100%,23.0769% calc(var(--closing-step) * 2 + 1px),15.3846% calc(var(--closing-step) * 2 + 1px),15.3846% calc(var(--closing-step) + 1px),7.6923% calc(var(--closing-step) + 1px));
  position:relative;
  background:var(--closing-black);
  padding-top:calc(var(--closing-step) * 3 + 20px);
}
/* Draw the cap directly, without rotating zero-area outer roof segments.
   The central roof overlaps the preceding white surface by 1px, preventing a
   fractional-pixel seam while leaving the black outer columns untouched. */
.closing-gallery::before {
  content:'';
  position:absolute;
  top:-1px;
  left:0;
  width:100%;
  height:calc(var(--closing-step) * 3 + 1px);
  background:var(--paper);
  clip-path:var(--closing-roof);
  pointer-events:none;
}
.closing-scene .gallery {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  width:100%;
  gap:clamp(12px,1.2vw,24px);
  margin:0;
  padding:0 20px 12px;
  overflow:hidden;
  scroll-behavior:auto;
  scroll-snap-type:none;
  scrollbar-width:none;
  background:var(--closing-black);
  touch-action:pan-y pinch-zoom;
}
.closing-scene .gallery::-webkit-scrollbar { display:none; width:0; height:0; }
.closing-scene .gallery img:nth-child(n) { width:100%; max-width:none; margin:0; object-fit:cover; scroll-snap-align:none; }
/* Share the approved homepage size; auto widths retain each photo's ratio.
   Only short landscape viewports cap the image so its full height remains visible. */
.closing-scene .gallery img:nth-child(n) {
  height:clamp(368px,48vw,864px);
  height:min(clamp(368px,48vw,864px),calc(100svh - 32px));
}
.closing-scene .gallery img:last-child { grid-column:1 / -1; }
.closing-scene .gallery:focus-visible { outline:2px solid #8ff1e5; outline-offset:-3px; }
.closing-slot { height:calc(var(--closing-step) * 3 + 24px); margin-top:12px; position:relative; }
.closing-reveal { display:none; }
.closing-upper-lock { display:none; }
.closing-scene.is-pinned { height:calc(var(--closing-height) + var(--closing-horizontal) + var(--closing-travel)); }
.closing-scene.is-pinned .closing-gallery { position:sticky; top:var(--closing-top); }
.closing-scene.is-pinned .gallery { display:flex; flex-wrap:nowrap; }
.closing-scene.is-pinned .gallery img:nth-child(n) { flex:0 0 auto; width:auto; object-fit:contain; }
.closing-scene.is-pinned .closing-slot::before { content:''; position:absolute; inset:1px 2px 0; background:var(--paper); clip-path:var(--closing-edge); }
.closing-scene.is-pinned .closing-reveal { display:block; position:absolute; z-index:2; top:var(--closing-reveal-start); left:0; width:100%; height:var(--closing-reveal-height); background:var(--closing-black); clip-path:var(--closing-edge); pointer-events:none; }
.closing-scene.is-pinned .closing-upper-lock {
  display:block;
  position:absolute;
  z-index:1;
  top:-1px;
  left:0;
  width:100%;
  height:calc(var(--closing-step) * 3 + 1px);
  overflow:hidden;
  clip-path:var(--closing-roof);
  pointer-events:none;
}
.closing-upper-piece {
  position:absolute;
  inset:0;
  background:var(--closing-black);
  clip-path:var(--closing-roof);
  transform:translateY(-110%);
}
/* Once both pieces lock, remove the coincident white paint instead of leaving
   antialiased white/black edges stacked on the same fractional coordinates. */
.closing-scene.is-upper-locked .closing-gallery::before { visibility:hidden; }
.closing-scene + .ftr2 { position:relative; z-index:3; margin-top:-1px; }
.closing-wordmark { display:block; position:relative; width:min(280px,48%); height:auto; margin:clamp(20px,3vw,44px) auto 0; }
@media(prefers-reduced-motion:no-preference) {
  /* The decorative moving mark takes the visual place of the accessible footer logo. */
  .closing-scene.is-pinned + .ftr2 .ftr2__logo { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .closing-scene.is-pinned + .ftr2 .ftr2__masthead { justify-content:flex-end; }
}
@media(max-width:700px) {
  .closing-scene { --closing-step:min(7.6923vw,40px); }
  .closing-gallery { padding-top:calc(var(--closing-step) * 3 + 12px); }
  .closing-scene .gallery { padding-inline:12px; grid-template-columns:minmax(0,1fr); }
  .closing-scene .gallery img:nth-child(n) {
    height:clamp(352px,92.8vw,512px);
    height:min(clamp(352px,92.8vw,512px),calc(100svh - 32px));
  }
}
@media(prefers-reduced-motion:reduce) {
  .closing-scene.is-pinned { height:auto; }
  .closing-scene.is-pinned .closing-gallery { position:relative; top:auto; }
  .closing-scene.is-pinned .gallery { display:grid; }
  .closing-scene.is-pinned .gallery img:nth-child(n) { width:100%; object-fit:cover; }
  .closing-scene.is-pinned .closing-slot::before { display:none; }
  .closing-scene.is-pinned .closing-reveal { display:none; }
  .closing-scene.is-pinned .closing-upper-lock { display:none; }
  .closing-scene.is-upper-locked .closing-gallery::before { visibility:visible; }
}

/* 11 · Phones: the pinned band sits on paper, not black. The pieces that
   already slide in — the roof from above, the reveal from below — are black,
   so they read as black stepped shapes against white. */
@media(max-width:700px){
  .closing-scene, .closing-gallery, .closing-scene .gallery { background:var(--paper); }
  .closing-scene.is-pinned .closing-slot::before { display:none; }
  .closing-wordmark { filter:invert(1); }
}