/* Native navigation and scrolling remain in control of the browser. */
@view-transition { navigation: auto; }
html { scrollbar-gutter: stable; scroll-behavior: smooth; }
body { overflow-wrap: break-word; }
::view-transition-old(root) { animation: page-out 180ms ease-out both; }
::view-transition-new(root) { animation: page-in 260ms ease-out both; }
::view-transition-group(root) { animation-duration: 260ms; }
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
/* Keep image space reserved while photographs load. */
.project-photo > img { height: auto; }
.project-cover > img { aspect-ratio: auto; }
header nav a, .back-link, .photo-label a, .card-caption, .text-link {
  transition: color 180ms ease, border-color 180ms ease;
}
.project-card .card-image img { transition: transform 550ms cubic-bezier(.22,1,.36,1); }
.foil-button { transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease; }
html:has(dialog[open]) { overflow: hidden; }
dialog[open] { animation: gallery-in 180ms ease-out; }
dialog[open]::backdrop { animation: backdrop-in 180ms ease-out; }
@keyframes gallery-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes backdrop-in { from { background: #0000; } to { background: #000d; } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  ::view-transition-old(root), ::view-transition-new(root), ::view-transition-group(root) { animation: none !important; }
}
/* A stable gallery stage prevents the dialog jumping between image shapes. */
#large-photo { width: 100%; height: min(68svh, 760px); max-height: 68svh; object-fit: contain; }
#large-photo:not([src]) { visibility: hidden; }
#lightbox { overscroll-behavior: contain; }
.lightbox-toolbar { min-height: 58px; }
.lightbox-toolbar #caption { flex: 1; }
.lightbox-toolbar button { transition: border-color 180ms ease, background-color 180ms ease; }
.lightbox-toolbar button:hover { background: #d6bb7e14; border-color: var(--gold); }
#lightbox[aria-busy="true"] { cursor: progress; }
@media (max-width: 520px) { #large-photo { height: 58svh; max-height: 58svh; } }
@media (prefers-reduced-motion: reduce) { .lightbox-toolbar button { transition: none; } }
/* Contain the editorial image's small reveal movement inside its frame. */
.hero-photo, .about-photo, .approach-image, .service-image { overflow: clip; }