/* Photos: a grid, and a viewer you can step through with a click, a key, or a swipe. */

/* Moving between photo pages cross-fades, and a photo travels from the grid
   (or the homepage) into the viewer. Other pages don't opt in, so the rest of
   the site still navigates instantly. */
@view-transition {navigation:auto}
::view-transition-group(*) {animation-duration:380ms;animation-timing-function:cubic-bezier(.22,.68,.2,1)}
::view-transition-old(root),::view-transition-new(root) {animation-duration:200ms}

.photo-index,.photo-page {max-width:1120px;margin:0 auto;padding:38px 52px 44px;min-height:100svh}
.photo-page {display:flex;flex-direction:column}

.photo-index-head {margin:76px 0 34px}
.photo-index-head h1 {font-size:58px;line-height:1.1;font-weight:800;letter-spacing:-2.8px;margin:0 0 12px}
.photo-index-head p {font-size:13px;line-height:1.6;color:var(--secondary);margin:0}
.photo-grid {list-style:none;margin:0;padding:0;columns:3 280px;column-gap:24px}
.photo-grid li {break-inside:avoid;margin:0 0 24px}
.photo-grid:has(>li:only-child) {columns:auto;max-width:620px}
.photo-tile {position:relative;display:block;overflow:hidden;border-radius:10px;background:var(--button)}
.photo-tile img {display:block;width:100%;height:auto;transition:transform 600ms cubic-bezier(.2,.7,.2,1)}
.photo-tile-title {position:absolute;inset:auto 0 0;padding:44px 16px 14px;font-size:13px;font-weight:650;color:#fff;background:linear-gradient(#0000,#0009);opacity:0;transform:translateY(6px);transition:opacity 220ms,transform 220ms}
.photo-tile:hover img,.photo-tile:focus-visible img {transform:scale(1.035)}
.photo-tile:hover .photo-tile-title,.photo-tile:focus-visible .photo-tile-title {opacity:1;transform:none}

.photo-frame {flex:1;display:flex;flex-direction:column;justify-content:center;margin:34px 0 0}
.photo-stage {position:relative;align-self:center;aspect-ratio:var(--ratio);width:min(100%,calc(72svh * (var(--ratio))));max-width:1000px}
.photo-image {display:block;width:100%;height:100%;object-fit:cover;border-radius:10px;background:var(--button)}
.photo-step {position:absolute;top:0;bottom:0;width:50%;display:flex;align-items:center;-webkit-tap-highlight-color:transparent}
.photo-prev {left:0;justify-content:flex-start;cursor:w-resize}
.photo-next {right:0;justify-content:flex-end;cursor:e-resize}
.photo-step span {display:grid;place-items:center;width:46px;height:46px;margin:0 14px;border-radius:16px;background:#fdfcf9e6;box-shadow:0 6px 20px #0003;opacity:0;transform:scale(.92);transition:opacity 180ms,transform 180ms}
.photo-prev span img {transform:rotate(180deg)}
.photo-step:hover span,.photo-step:focus-visible span {opacity:1;transform:none}
.photo-step:active span {transform:scale(.94)}
.photo-step:focus-visible {outline:0}
.photo-step:focus-visible span {outline:2px solid var(--ink);outline-offset:3px}
.photo-frame figcaption {align-self:center;width:min(100%,620px);margin:26px 0 0;text-align:center}
.photo-frame h1 {font-size:22px;line-height:1.3;font-weight:800;letter-spacing:-.6px;margin:0 0 8px}
.photo-frame figcaption p {font-size:16px;line-height:1.7;color:var(--secondary);margin:0;text-wrap:pretty}
.photo-frame .photo-details {display:inline-flex;align-items:center;gap:9px;margin-top:16px;padding:7px 13px 7px 9px;border-radius:999px;background:var(--button);font-size:11px;line-height:1.4;font-weight:650;letter-spacing:.2px;font-variant-numeric:tabular-nums;color:var(--secondary)}
.photo-aperture {flex:none}
.photo-aperture circle {fill:var(--ink)}
.photo-aperture polygon {fill:var(--paper);transform-origin:10px 10px;transition:transform 500ms cubic-bezier(.2,.7,.2,1)}
.photo-details:hover .photo-aperture polygon {transform:rotate(60deg) scale(.82)}
.photo-pager {display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;margin:40px 0 0;font-size:13px;line-height:1.5}
.photo-pager a {display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;color:var(--secondary)}
.photo-pager a:hover {color:var(--ink)}
.photo-pager a:last-child {justify-self:end;text-align:right}
.photo-count {font-size:12px;font-variant-numeric:tabular-nums;color:var(--quiet)}

/* The latest photo on the homepage. */
.home-photo {margin:0}
.home-photo>a {display:block;overflow:hidden;border-radius:10px;background:var(--button)}
.home-photo .photo-image {border-radius:0;height:auto;transition:transform 700ms cubic-bezier(.2,.7,.2,1)}
.home-photo>a:hover .photo-image,.home-photo>a:focus-visible .photo-image {transform:scale(1.025)}
.home-photo figcaption {margin:14px 0 0;font-size:14px;line-height:1.7;color:var(--secondary);text-wrap:pretty}
.home-photo figcaption a {color:var(--ink);white-space:nowrap;margin-left:4px}

@media(max-width:600px) {
  .photo-index,.photo-page {padding:24px 24px 32px}
  .photo-index-head {margin:50px 0 26px}
  .photo-index-head h1 {font-size:46px;letter-spacing:-2px}
  .photo-grid {column-gap:16px}.photo-grid li {margin-bottom:16px}
  .photo-tile-title {opacity:1;transform:none}
  .photo-frame {margin-top:22px}
  .photo-stage {width:calc(100% + 24px);max-width:none;margin:0 -12px;align-self:stretch}
  /* On a phone you swipe; the page links below are the visible controls. */
  .photo-step span {display:none}
  .photo-frame h1 {font-size:20px}.photo-frame figcaption p {font-size:15px}
  .photo-pager {margin-top:30px;font-size:12px}
}
@media(prefers-reduced-motion:reduce) {
  @view-transition {navigation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*) {animation:none!important}
  .photo-tile img,.photo-tile-title,.photo-step span,.home-photo .photo-image,.photo-aperture polygon {transition:none}
}