.photography-page {
  max-width: 1480px;
  padding-inline: clamp(1rem, 4vw, 4rem);
}

.photography-page > header { margin-bottom: 3.5rem; }
.photography-empty { color: var(--text-muted); padding-block: 3rem; border-top: 1px solid var(--border); }

.photo-grid { display: flex; flex-wrap: wrap; gap: 4px; }
.photo-tile {
  display: block;
  flex: var(--ratio) 1 calc(var(--ratio) * 240px);
  min-width: 0;
  overflow: hidden;
  background: var(--code-bg);
  cursor: zoom-in;
}
.photo-tile img { width: 100%; height: 100%; object-fit: cover; margin: 0; }
.photo-grid.is-laid-out .photo-tile { flex: none; }
.photo-tile:hover { opacity: 0.92; }
.photo-tile:focus-visible { outline: 3px solid var(--link); outline-offset: -3px; }

html.photo-viewer-open { overflow: hidden; }
.photo-viewer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  color: #fff;
  background: #111;
  overscroll-behavior: contain;
}
.photo-viewer::backdrop { background: #111; }
.photo-viewer[open] { display: grid; grid-template-columns: 72px minmax(0, 1fr) 72px; grid-template-rows: 64px minmax(0, 1fr) 48px; }
.photo-viewer__toolbar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 8px 16px 8px 24px; }
.photo-viewer__counter { font-size: 0.875rem; color: #ccc; font-variant-numeric: tabular-nums; }
.photo-viewer button { display: grid; place-items: center; width: 44px; height: 44px; padding: 10px; border: 0; border-radius: 50%; color: #eee; background: transparent; cursor: pointer; align-self: center; justify-self: center; }
.photo-viewer button:hover { background: #333; }
.photo-viewer button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.photo-viewer button:disabled { opacity: 0.25; cursor: default; }
.photo-viewer button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.photo-viewer__figure { grid-column: 2; grid-row: 2; min-height: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.photo-viewer__image { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; margin: 0; user-select: none; }
.photo-viewer__caption { flex: none; max-width: 70ch; max-height: 20vh; overflow: auto; margin: 0; color: #ccc; text-align: center; }
.photo-viewer__caption:empty { display: none; }
.photo-viewer__previous { grid-column: 1; grid-row: 2; }
.photo-viewer__next { grid-column: 3; grid-row: 2; }
.photo-viewer__status { grid-column: 1 / -1; grid-row: 3; margin: 0; align-self: center; text-align: center; color: #bbb; font-size: 0.8125rem; }

@media (max-width: 600px) {
  .photography-page > header { margin-bottom: 2.5rem; }
  .photography-page .nav-links { gap: 0.875rem; font-size: 0.9375rem; }
  .photo-viewer[open] { grid-template-columns: 1fr 1fr; grid-template-rows: 64px minmax(0, 1fr) 56px 32px; padding-bottom: env(safe-area-inset-bottom); }
  .photo-viewer__figure { grid-column: 1 / -1; padding-inline: 8px; }
  .photo-viewer__previous { grid-column: 1; grid-row: 3; }
  .photo-viewer__next { grid-column: 2; grid-row: 3; }
  .photo-viewer__status { grid-row: 4; }
}