.photo-wall{display:flex;flex-wrap:wrap;align-items:flex-start;gap:clamp(2rem,5vw,3.5rem)clamp(1.5rem,4vw,3rem);padding:0;margin:0;list-style:none}.photo-wall li{flex:var(--ratio)1 calc(var(--ratio) * 220px);max-width:calc(var(--ratio) * 420px);margin:0}.photo-frame{display:block;padding:clamp(6px,1.2vw,10px);background:linear-gradient(135deg,var(--walnut-light),var(--walnut-dark));box-shadow:0 14px 26px oklch(8% .02 145/.5),inset 0 0 0 1px oklch(20% .03 50/.6);rotate:var(--hang);transition:rotate .4s var(--room-ease),translate .4s var(--room-ease)}.photo-frame:hover,.photo-frame:focus-visible{rotate:0;translate:0 -4px}.photo-frame:focus-visible{outline:2px solid var(--color-highlight);outline-offset:4px}.photo-mat{display:block;padding:9%;background:var(--linen);box-shadow:inset 0 1px 4px oklch(30% .03 60/.35)}.photo-mat img{width:100%;aspect-ratio:var(--ratio);object-fit:cover}.photo-caption{margin:.9rem 0 0;font-size:.85rem}.photo-caption span{opacity:.55;margin-left:.3em}.photo-detail{width:min(1100px,calc(100vw - 2rem));max-width:none;max-height:calc(100dvh - 2rem);margin:auto;padding:clamp(1rem,3vw,2rem);border:0;color:var(--color-text);background:var(--color-bg);box-shadow:0 30px 80px oklch(5% .02 145/.6)}.photo-detail::backdrop{background:oklch(10% .02 145/.82)}.photo-detail figure{display:grid;grid-template-columns:minmax(0,2.2fr)minmax(200px,1fr);gap:clamp(1rem,3vw,2rem);align-items:end;margin:0}.photo-detail-image{width:100%;max-height:calc(100dvh - 6rem);object-fit:contain;background:oklch(14% .02 145)}.photo-detail h2{margin:0 0 .25rem;font-size:1.6rem;font-weight:800;letter-spacing:-.02em;color:var(--color-highlight)}.photo-detail-meta{font-size:.9rem;opacity:.7}.photo-detail-note:empty,.photo-detail-meta:empty{display:none}.photo-detail-nav{display:flex;align-items:center;gap:.75rem;font-size:.85rem}.photo-detail-nav button,.photo-detail-close{min-width:40px;min-height:40px;border-radius:3px;cursor:pointer;color:var(--color-text)}.photo-detail-nav button:hover,.photo-detail-close:hover{color:var(--color-highlight)}.photo-detail-nav[hidden]{display:none}.photo-detail-close{position:absolute;top:.5rem;right:.5rem;display:grid;place-items:center}@media(max-width:720px){.photo-wall li{flex-basis:100%;max-width:none}.photo-detail figure{grid-template-columns:1fr}.photo-detail-image{max-height:65dvh}}@media(prefers-reduced-motion:reduce){.photo-frame{transition:none}}