:root{color-scheme:dark;--background:#11100e;--gold:#d3b579}
*{box-sizing:border-box}
html{background:var(--background);scrollbar-color:#82704b var(--background)}
body{margin:0;background:var(--background);font-family:Tahoma,Arial,sans-serif}
button{font:inherit;-webkit-tap-highlight-color:transparent}
.gallery{max-width:1744px;margin-inline:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.photo-row{display:flex;align-items:flex-start;gap:10px}
.photo{display:block;position:relative;flex:var(--ratio) 1 0;min-width:0;appearance:none;border:0;border-radius:2px;background:#211f19;padding:0;overflow:hidden;cursor:zoom-in}
.photo img{display:block;width:100%;height:auto;aspect-ratio:var(--ratio);object-fit:contain}
.photo::after{content:"";position:absolute;inset:0;border:1px solid #c5a46521;pointer-events:none;transition:border-color .2s}
.photo:hover::after{border-color:var(--gold)}
button:focus-visible{outline:3px solid var(--gold);outline-offset:4px;z-index:2}
.viewer{position:fixed;inset:0;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(10,9,8,.98);color:#eee;overflow:hidden}
.viewer::backdrop{background:#090807}
.viewer[open]{display:grid;grid-template-rows:60px 1fr}
.viewer-bar{display:flex;align-items:center;justify-content:space-between;padding:8px max(14px,env(safe-area-inset-right));border-bottom:1px solid #d3b57922;z-index:2}
.counter{color:var(--gold);font-size:13px;letter-spacing:3px;font-variant-numeric:tabular-nums;padding-inline:8px}
.control{width:44px;height:44px;display:grid;place-items:center;background:#181610cc;color:#e5d6b8;border:1px solid #d3b57944;border-radius:50%;cursor:pointer;transition:background .15s}
.control:hover{background:#4a3c23}
.control svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.close{border-color:transparent;background:transparent}
.stage{display:flex;align-items:center;justify-content:center;min-height:0;padding:20px 76px max(24px,env(safe-area-inset-bottom));touch-action:pan-y pinch-zoom}
.large-photo{display:block;max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;user-select:none;-webkit-user-select:none}
.previous,.next{position:absolute;top:calc(50% + 20px);transform:translateY(-50%);z-index:2}
.previous{right:18px}.next{left:18px}
body.viewer-open{overflow:hidden}
@media(min-width:1744px){.gallery{padding-block:26px}}
@media(max-width:800px){.gallery{padding:8px;gap:8px}.photo-row{gap:8px}.photo-row:not(.opening):not(.portraits){flex-wrap:wrap}.photo-row:not(.opening):not(.portraits) .photo{flex:1 1 45%}.photo-row:not(.opening):not(.portraits) .photo:last-child:nth-child(odd){flex-basis:100%}}
@media(max-width:540px){.gallery{padding:5px;gap:5px}.photo-row{flex-direction:column;gap:5px}.photo-row .photo{width:100%;flex:none!important}.photo{border-radius:0}.stage{padding:10px 0 74px}.viewer[open]{grid-template-rows:56px 1fr}.previous,.next{top:auto;bottom:max(16px,env(safe-area-inset-bottom));transform:none}.previous{right:calc(50% - 64px)}.next{left:calc(50% - 64px)}.viewer-bar{padding-inline:10px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
