/* Zdjęcia: serie jako wiersze. Bieżące zdjęcie na środku, sąsiednie i sąsiednie serie przygaszone na krawędziach. */
body.photos { overflow: hidden; height: 100%; }
html:has(body.photos) { height: 100%; overflow: hidden; }
.photos .hd { position: relative; z-index: 5; }
.stage { position: fixed; left: 0; right: 0; bottom: 0; top: var(--top, 64px); overflow: hidden; touch-action: none; outline: none; user-select: none; -webkit-user-select: none; }
.srow { position: absolute; left: 0; top: 0; will-change: transform; transition: transform .7s cubic-bezier(.2, .75, .15, 1); }
.ph { position: absolute; top: 0; left: 0; background-repeat: no-repeat; background-color: #e4e4df; opacity: .07; filter: grayscale(1) contrast(.8); transition: opacity .55s ease, filter .55s ease, transform .7s cubic-bezier(.2, .75, .15, 1); cursor: pointer; }
.ph img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s ease; }
.ph img.ld { opacity: 1; }
.ph.near { opacity: .14; }
.ph.cur { opacity: 1; filter: none; cursor: default; }
.ph:not(.cur):hover { opacity: .3; }
.pos { position: fixed; z-index: 6; right: max(var(--pad), var(--gr)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); color: var(--ink-2); }
.arr { position: fixed; z-index: 6; font: inherit; font-size: 1.15rem; line-height: 1; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); cursor: pointer; opacity: 0; transition: opacity .25s ease; display: grid; place-items: center; }
.stage-wrap:hover .arr, .arr:focus-visible { opacity: 1; }
.arr:hover { border-color: var(--ink); }
.arr:disabled { opacity: 0 !important; pointer-events: none; }
.arr.l { left: max(var(--pad), var(--gl)); top: calc(50% + var(--top, 64px) / 2); transform: translateY(-50%); }
.arr.r { right: max(var(--pad), var(--gr)); top: calc(50% + var(--top, 64px) / 2); transform: translateY(-50%); }
.arr.u { left: 50%; top: calc(var(--top, 64px) + 10px); transform: translateX(-50%); }
.arr.d { left: 50%; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); }
@media (hover: none) { .arr { display: none; } }
@media (prefers-reduced-motion: reduce) { .srow, .ph { transition: opacity .2s ease; } }