body { background: var(--paper); }
.photo-hero { min-height: 78svh; padding: var(--page); background: var(--blue); color: var(--paper); border-bottom: 24px solid var(--orange); display: grid; grid-template-columns: repeat(12,1fr); grid-template-rows: auto 1fr auto; gap: var(--gutter); }
.photo-kicker { grid-column: 1 / 5; font: 700 .7rem/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.photo-home { grid-column: 9 / 13; justify-self: end; color: inherit; font: 700 .7rem/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; min-height: 44px; display: inline-flex; align-items: flex-start; }
.photo-hero h1 { grid-column: 1 / 13; align-self: center; margin: 0; font-size: clamp(4.4rem, 16vw, 15rem); line-height: .74; letter-spacing: -.09em; text-transform: uppercase; }
.photo-deck { grid-column: 6 / 12; margin: 0; font-size: clamp(1rem,1.6vw,1.35rem); line-height: 1.45; }
.photo-sequence { width: min(100%,var(--maxw)); margin: 0 auto; padding: clamp(72px,9vw,144px) var(--page); display: grid; grid-template-columns: repeat(12,1fr); gap: clamp(56px,8vw,128px) var(--gutter); }
.photo { margin: 0; cursor: zoom-in; }
.photo img { display: block; width: 100%; height: auto; max-height: 82svh; object-fit: contain; background: var(--ink); }
.photo figcaption { margin-top: 10px; font: 700 .64rem/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.photo:nth-child(6n+1) { grid-column: 1 / 9; }
.photo:nth-child(6n+2) { grid-column: 9 / 13; align-self: end; }
.photo:nth-child(6n+3) { grid-column: 3 / 8; }
.photo:nth-child(6n+4) { grid-column: 8 / 13; }
.photo:nth-child(6n+5) { grid-column: 1 / 6; }
.photo:nth-child(6n) { grid-column: 6 / 13; }
.photo-end { padding: clamp(72px,10vw,144px) var(--page); background: var(--orange); color: var(--ink); display: grid; grid-template-columns: repeat(12,1fr); gap: var(--gutter); }
.photo-end p { grid-column: 1 / 8; margin: 0; font-size: clamp(2.5rem,6vw,6rem); line-height: .88; letter-spacing: -.06em; text-transform: uppercase; font-weight: 900; }
.photo-end a { grid-column: 9 / 13; align-self: end; color: inherit; font: 800 .72rem/1.2 var(--font-mono); min-height: 44px; display: inline-flex; align-items: center; }
.viewer { position: fixed; inset: 0; z-index: 1000; display: none; grid-template-columns: 64px 1fr 64px; align-items: center; background: rgba(16,16,15,.97); color: var(--paper); }
.viewer.active { display: grid; }
.viewer img { width: 100%; height: 88svh; object-fit: contain; }
.viewer button { width: 48px; height: 48px; margin: auto; border: 1px solid currentColor; background: transparent; color: inherit; font-size: 1.2rem; cursor: pointer; }
.viewer-close { position: absolute; top: 16px; right: 16px; }
@media (max-width:767px) {
  .photo-hero { min-height: 680px; border-bottom-width: 16px; }
  .photo-kicker { grid-column: 1 / 8; }
  .photo-home { grid-column: 8 / 13; }
  .photo-hero h1 { font-size: clamp(4rem,22vw,7rem); }
  .photo-deck { grid-column: 2 / 13; }
  .photo-sequence { display: block; }
  .photo { margin-bottom: 56px; }
  .photo img { max-height: none; }
  .photo-end { display: block; }
  .photo-end a { margin-top: 48px; }
  .viewer { grid-template-columns: 52px 1fr 52px; }
  .viewer img { height: 78svh; }
  .viewer button { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion:reduce) { .viewer, .viewer * { transition: none !important; animation: none !important; } }