:root { color-scheme: light; }
* { box-sizing: border-box; }
html { font-family: Tahoma, Arial, sans-serif; background:#E6E6FA; }
body { margin:0; background:#E6E6FA; color:#000; }
.header { border-bottom:1px solid #000; color:#fff; background:#E3E2CB; padding:clamp(12px,2.5vw,24px); font-size:clamp(1.35rem,3vw,1.9rem); line-height:1.2; }
.header .counter { display:inline-block; border:1px solid #000; color:#000; background:#DED9A4; padding:5px; font-size:.7rem; vertical-align:middle; margin-left:.35rem; }
.nav { display:flex; flex-wrap:wrap; gap:2px; padding:0 2px; }
.nav.bottom { justify-content:flex-end; align-items:flex-end; margin-top:18px; }
.btn, .disabled { min-width:112px; border:1px solid #000; text-align:center; background:#E3E2CB; padding:7px 10px; font-size:.72rem; text-decoration:none; }
.nav.top .btn, .nav.top .disabled { border-top:0; }
.nav.bottom .btn, .nav.bottom .disabled { border-bottom:0; }
.btn { color:#000; }
.btn:hover, .btn:focus-visible { background:#DED9A4; text-decoration:underline; outline:2px solid #000; outline-offset:1px; }
.disabled { color:#9d996f; cursor:default; }
.gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,280px)); justify-content:center; gap:12px; padding:18px 12px 26px; }
.thumb { display:block; width:100%; aspect-ratio:1/1.1; padding:5px; border:1px solid transparent; color:#000; text-align:center; text-decoration:none; }
.thumb:hover, .thumb:focus-visible { border-color:#D6D4B2; text-decoration:underline; outline:none; }
.thumb img { display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; }
.photo-wrap { padding:24px 12px 30px; display:flex; justify-content:center; }
.photo-frame { background:#fff; border:1px solid #000; padding:11px; max-width:min(94vw,900px); }
.photo-frame img { display:block; max-width:100%; height:auto; margin:auto; }
.footer { border-top:1px solid #000; border-bottom:1px solid #000; background:#E3E2CB; padding:10px; text-align:center; }
.footer a { font-weight:bold; font-size:clamp(.95rem,2vw,1.15rem); color:#151515; text-decoration:none; }
.footer a:hover, .footer a:focus-visible { text-decoration:underline; }
.skip { position:absolute; left:-9999px; top:auto; }
.skip:focus { left:8px; top:8px; z-index:10; background:#fff; color:#000; padding:8px; border:2px solid #000; }
@media (max-width:520px) {
  .header { font-size:1.2rem; }
  .nav { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; padding:0 2px; }
  .nav.bottom { grid-template-columns:repeat(3,1fr); }
  .btn,.disabled { min-width:0; width:100%; padding:8px 4px; }
  .gallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:12px 8px 20px; }
  .thumb { aspect-ratio:auto; padding:3px; }
  .photo-wrap { padding:16px 8px 22px; }
  .photo-frame { padding:6px; }
}