/* A single window, below the opening invitation. */
:root {
  --window-wood: #b5c9bf;
  --window-edge: #687f73;
  --window-shutter: #d6dfd0;
  --window-shape: 50% 50% 3px 3px / 34% 34% 3px 3px;
}

.photo-section { position: relative; min-height: 165svh; padding-block: 86px 105px; border-bottom: 1px solid var(--line); background: radial-gradient(ellipse at 50% 35%, var(--surface), transparent 65%); }
.photo-heading { text-align: center; margin-bottom: 55px; }
.photo-heading .eyebrow { color: var(--gold); margin-bottom: 12px; }
.photo-heading h2 { font-size: clamp(2.15rem, 4vw, 3rem); }
.photo-sticky { position: sticky; top: max(30px, calc((100svh - 650px) / 2)); padding-block: 10px 25px; }
.photo-portrait { margin: 0 auto; width: min(420px, 72%); text-align: center; }
.photo-perspective { padding-inline: 13px; }
.window-button { display: block; width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: var(--window-shape); background: var(--paper); color: var(--window-edge); cursor: pointer; touch-action: manipulation; -webkit-appearance: none; appearance: none; box-shadow: 0 24px 42px -18px #264f4c45; }
.window-scene { display: block; position: relative; width: 100%; aspect-ratio: 4 / 5; }
/* The photo is a normal clipped layer. Only its sibling shutters use 3D,
   so Safari never has to composite an image/canvas inside the 3D scene. */
.window-aperture { display: block; position: absolute; inset: 0; overflow: hidden; border-radius: var(--window-shape); background: var(--surface); box-shadow: inset 0 0 0 1px var(--window-edge); }
.window-aperture::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: #f7f3e90a; box-shadow: inset 0 0 12px #264f4c18; pointer-events: none; }
/* Keep the real photo beneath the transparent canvas, including on Safari. */
.window-aperture img { display: block; position: absolute; top: 0; left: -13%; width: 126%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 51%; }
.photo-projection { display: none; position: absolute; inset: 0; width: 100%; height: 100%; }
.has-projection .photo-projection { display: block; }
.window-shutters { display: block; position: absolute; inset: 0; z-index: 1; perspective: 900px; transform-style: preserve-3d; pointer-events: none; }
.window-leaf { position: absolute; top: 0; bottom: 0; width: 50%; border: 6px solid var(--window-wood); background: repeating-linear-gradient(90deg, transparent 0 24px, #264f4c06 24px 25px), linear-gradient(100deg, var(--window-shutter), var(--window-wood)); box-shadow: inset 0 0 0 1px #ffffff65, 0 3px 12px #264f4c15; transform: translateZ(5px); transition: transform 1.65s cubic-bezier(.18,.65,.2,1); pointer-events: none; }
.window-leaf-left { left: 0; border-radius: 100% 0 0 2px / 34% 0 0 2px; transform-origin: left center; }
.window-leaf-right { right: 0; border-radius: 0 100% 2px 0 / 0 34% 2px 0; transform-origin: right center; }
.window-panel { position: absolute; inset: 42% 12% 8%; border: 1px solid #687f733f; box-shadow: inset 0 0 0 4px #ffffff18; }
.window-initial { position: absolute; top: 45%; left: 0; right: 0; font: italic 2.1rem/1 var(--serif); color: var(--window-edge); opacity: .65; }
.window-handle { position: absolute; top: 64%; width: 3px; height: 22px; background: var(--gold); border-radius: 2px; }
.window-leaf-left .window-handle { right: 9px; }
.window-leaf-right .window-handle { left: 9px; }
.window-rim { position: absolute; inset: -1px; z-index: 2; border: 3px solid var(--window-edge); border-radius: var(--window-shape); pointer-events: none; box-shadow: inset 0 0 0 2px var(--window-wood), 0 5px 10px #264f4c25; }
.window-button[aria-expanded="true"] .window-leaf-left { transform: translateZ(5px) rotateY(-105deg); }
.window-button[aria-expanded="true"] .window-leaf-right { transform: translateZ(5px) rotateY(105deg); }
.photo-portrait figcaption { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.photo-caption { font: italic 1.125rem/1.5 var(--serif); color: var(--muted); }
.window-hint { font: .75rem/1.5 var(--sans); color: var(--gold); letter-spacing: .03em; }
.photo-scroll-cue { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 34px; color: var(--gold); }
.photo-scroll-cue span:first-child { font-size: .625rem; text-transform: uppercase; letter-spacing: .22em; }
.photo-scroll-cue span:last-child { font: 1.4rem/1 var(--serif); }


@media (max-width: 650px) {
  .photo-section { min-height: 150svh; padding-block: 62px 80px; }
  .photo-heading { margin-bottom: 34px; }
  .photo-sticky { top: max(30px, calc((100svh - 540px) / 2)); }
  .photo-portrait { width: min(350px, 88%); }
  .photo-perspective { padding-inline: 17px; }
  .window-button { padding: 8px; }
  .window-leaf { border-width: 4px; }
  .window-rim { border-width: 2px; }
  .window-initial { font-size: 1.6rem; }
  .photo-caption { font-size: 1rem; }
  .photo-scroll-cue { margin-top: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  .window-leaf { transition: none; }
  .photo-section { min-height: auto; }
  .photo-sticky { position: static; }
}