:root { --paper: #fff; --ink: #111; }
* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button { font: inherit; color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: -5px; }
.top { position: absolute; top: 12px; left: 12px; z-index: 2; }
.home { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 12px; color: var(--paper); font-size: 16px; text-decoration: underline; text-underline-offset: 4px; text-shadow: 0 1px 4px #000; }
.home:hover { text-decoration-thickness: 2px; }
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
figure { margin: 0; min-width: 0; }
.photo { display: block; aspect-ratio: 1; overflow: hidden; background: var(--ink); }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .2s; }
.photo:hover img { opacity: .85; }
dialog { position: fixed; max-width: none; max-height: none; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: #111; color: #fff; }
dialog::backdrop { background: #111; }
dialog[open] { display: grid; place-items: center; }
#viewer-image { width: 100%; height: 100%; object-fit: contain; min-height: 0; }
dialog button { position: absolute; z-index: 1; background: #111; color: #fff; border: 0; padding: 12px 16px; cursor: pointer; min-width: 48px; min-height: 48px; font-size: 24px; }
dialog button:hover { background: #333; }
#close { top: 12px; right: 12px; }
#previous { left: 12px; top: calc(50% - 24px); }
#next { right: 12px; top: calc(50% - 24px); }
@media (max-width: 800px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .top { top: 4px; left: 4px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }