* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; min-height: 100%; margin: 0; }
body { overflow: hidden; color: #fff; font-family: Arial, Helvetica, sans-serif; }

.photos-page {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: #6f8185 url("../images/photos/photos-background.png") center / cover no-repeat;
  animation: page-in 560ms ease both;
  transition: opacity 420ms ease;
}
html.page-leaving .photos-page { opacity: 0; }

.photos-home { position: absolute; z-index: 3; top: 1.6rem; left: 1.6rem; display: block; width: clamp(3rem, 5vw, 4.5rem); overflow: hidden; transition: opacity 180ms ease, transform 180ms ease; }
.photos-home img { display: block; width: 100%; height: auto; }
.photos-home:hover { opacity: .94; transform: scale(1.02); }
.photos-home:focus-visible, .gallery-arrow:focus-visible, .photo-trigger:focus-visible, .photo-card__close:focus-visible { outline: 1px solid rgba(255,255,255,.95); outline-offset: 4px; }

.photos-counter { position: absolute; z-index: 2; top: 19.3%; left: 50%; margin: 0; font-size: clamp(1.35rem, 2.15vw, 2.05rem); font-weight: 400; transform: translateX(-50%); }
.photo-stage { position: absolute; top: 29.6%; left: 50%; width: min(43%, 54rem); aspect-ratio: 16 / 9; transform: translateX(-50%); }
.photo-trigger { display:block; width:100%; height:100%; padding:0; border:0; background:transparent; cursor:pointer; transition:opacity 380ms ease; }
.photo-trigger:hover { opacity:.94; }
.photo-trigger img { display:block; width:100%; height:100%; object-fit:contain; }

.gallery-arrow { position:absolute; z-index:2; top:53.5%; padding:0; border:0; color:#fff; background:transparent; font:400 clamp(2rem,3.2vw,3rem)/1 Arial,Helvetica,sans-serif; cursor:pointer; transition:opacity 180ms ease,transform 180ms ease; }
.gallery-arrow:hover { opacity:.72; transform:scale(1.05); }
.gallery-arrow--previous { left:16.7%; }
.gallery-arrow--next { right:11.7%; }

.photo-card { position:absolute; z-index:5; top:50%; left:50%; width:min(23rem,76vw); padding:1.35rem 1.5rem; color:#747078; background:rgba(245,240,232,.95); box-shadow:0 1px 10px rgba(28,39,42,.13); transform:translate(-50%,-50%); animation:card-in 340ms ease both; }
.photo-card[hidden] { display:none; }
.photo-card dl { margin:0; }
.photo-card dl > div { display:grid; grid-template-columns:5.3rem 1fr; gap:.6rem; margin:.25rem 0; font-size:.78rem; line-height:1.45; }
.photo-card dt { color:#989199; font-weight:400; }
.photo-card dd { margin:0; }
.photo-card__context { display:block !important; margin-top:1rem !important; }
.photo-card__context dd { margin-top:.25rem; }
.photo-card__close { position:absolute; top:.38rem; right:.52rem; padding:0; border:0; color:inherit; background:transparent; font:1.35rem/1 Arial,sans-serif; cursor:pointer; }

@keyframes page-in { from { opacity:0; } to { opacity:1; } }
@keyframes card-in { from { opacity:0; } to { opacity:1; } }

@media (max-aspect-ratio:4 / 5) {
  .photos-home { top:1rem; left:1rem; width:3.5rem; }
  .photos-counter { top:22%; }
  .photo-stage { top:32%; width:78%; }
  .gallery-arrow { top:59%; }
  .gallery-arrow--previous { left:4%; }
  .gallery-arrow--next { right:4%; }
}
@media (prefers-reduced-motion:reduce) { .photos-page,.photos-home,.photo-trigger,.gallery-arrow,.photo-card { animation:none; transition:none; } }