* {box-sizing:border-box}
[hidden] {display:none!important}
body {margin:0;background:#f9f3ef;color:#302225;font:1rem/1.5 system-ui,sans-serif}
header {padding:2rem 1rem;text-align:center;background:#671019;color:white;border-bottom:3px solid #c5a471}
header a {color:#fff2df;letter-spacing:.16em;text-transform:uppercase;font-size:.85rem}
h1,h2 {font-family:Georgia,serif}
h1 {font-size:clamp(2rem,6vw,3.5rem);margin:.25em 0}
header p {margin:0}
main {max-width:1200px;margin:auto;padding:1rem}
nav {display:flex;gap:.6rem;flex-wrap:wrap}
nav a,button {padding:.6rem .85rem;border:1px solid #671019;border-radius:.45rem;color:#671019;background:white;font:inherit}
nav a {text-decoration:none}
nav a[aria-current] {background:#671019;color:white}
input {display:block;width:min(100%,24rem);padding:.6rem;border:1px solid #8d7175;border-radius:.4rem;font:inherit;margin-top:.25rem}
#grid {list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
#grid a {display:block;height:100%;overflow:hidden;border:1px solid #e7d6ca;border-radius:.65rem;background:white;color:#671019;text-align:center;text-decoration:none}
#grid img {display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:#fff}
#grid span {display:block;padding:.55rem .25rem;font-weight:600;overflow-wrap:anywhere}
dialog {width:min(94vw,780px);border:0;border-radius:.7rem;padding:1rem;text-align:center}
dialog::backdrop {background:#1a1014c9}
dialog form {text-align:right;margin-bottom:.5rem}
dialog img {display:block;margin:auto;max-width:100%;max-height:72vh;object-fit:contain}
@media(min-width:680px) {#grid {grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:960px) {#grid {grid-template-columns:repeat(4,minmax(0,1fr))}}