* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: #fff; color: #111; font-family: Helvetica, Arial, sans-serif; }
header { position: fixed; top: 0; left: 0; z-index: 2; padding: 28px 32px; }
h1 { margin: 0; font-size: 18px; font-weight: 400; letter-spacing: -.03em; }
main { min-height: 100vh; display: grid; place-items: center; padding: 88px 24px 48px; }
nav { display: flex; flex-direction: column; align-items: center; gap: 18px; }
nav button, .viewer button { border: 0; background: transparent; font: inherit; cursor: pointer; }
nav button { padding: 4px 8px; color: #111; font-size: clamp(17px, 2vw, 24px); letter-spacing: -.03em; }
nav button:hover { opacity: .5; }
.viewer { position: fixed; inset: 0; z-index: 10; display: none; align-items: center; justify-content: center; background: #000; }
.viewer.open { display: flex; }
.viewer img { display: block; max-width: calc(100vw - 120px); max-height: calc(100vh - 80px); width: auto; height: auto; object-fit: contain; }
.viewer button, .count { position: absolute; z-index: 2; color: #fff; }
.close { top: 20px; right: 26px; font-size: 34px !important; font-weight: 200 !important; }
.previous, .next { top: 50%; transform: translateY(-50%); padding: 24px !important; font-size: 38px !important; }
.previous { left: 8px; }
.next { right: 8px; }
.count { bottom: 18px; left: 50%; transform: translateX(-50%); font-size: 12px; letter-spacing: .08em; }
@media (max-width: 640px) {
  header { padding: 20px; }
  .viewer img { max-width: 100vw; max-height: calc(100vh - 90px); }
  .previous, .next { padding: 15px !important; }
}