:root { --ink: #f1ece2; --muted: #b9b09f; --gold: #d6bd83; --line: rgba(241,236,226,.14); --serif: "Cormorant Garamond", Georgia, serif; --sans: Inter, system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--ink); font: 15px/1.5 var(--sans); background: radial-gradient(ellipse at top, #2a2119 0%, #120e0b 55%, #0c0907 100%); }
main { max-width: 1080px; margin: 0 auto; padding: 28px 20px 60px; }
a { color: var(--gold); }
.back { font-size: 13px; text-decoration: none; }
header { text-align: center; margin: 18px 0 30px; }
.eyebrow { margin: 0; font: 600 11px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
h1 { margin: 10px 0 4px; font: 500 clamp(48px, 10vw, 84px)/1 var(--serif); letter-spacing: .08em; text-transform: uppercase; color: #efe6d2; }
.sub { margin: 0; color: var(--muted); font: italic 500 20px var(--serif); }
.honour { display: grid; place-items: center; margin: 10px 0 44px; }
figure { margin: 0; display: grid; justify-items: center; gap: 14px; }
.frame { padding: 26px; background: #f3efe6; border: 14px solid #c9a24e; outline: 2px solid #8f6a2c; box-shadow: 0 0 60px rgba(255,184,103,.35), 0 18px 50px rgba(0,0,0,.6); }
.frame img { display: block; width: min(320px, 62vw); height: auto; }
figcaption { display: grid; justify-items: center; padding: 10px 22px; background: #f1ece1; color: #25221d; border-radius: 3px; }
figcaption em { font: italic 600 22px var(--serif); }
figcaption span { font: 600 11px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #7a6a4d; }
figcaption small { color: #8a8378; font-size: 11px; }
h2 { font: 500 30px var(--serif); text-align: center; margin: 0 0 18px; }
.doors { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.door { display: grid; justify-items: center; gap: 4px; padding: 18px 10px 14px; text-decoration: none; color: var(--ink); background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border: 1px solid var(--line); border-radius: 90px 90px 10px 10px; transition: border-color .15s, transform .15s; }
.door:hover { border-color: var(--gold); transform: translateY(-2px); }
.door img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 2px solid #c9a24e; background: #221b15; }
.door .n { font: 600 18px var(--serif); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.door .c { font-size: 12px; color: var(--muted); }
.empty { text-align: center; color: var(--muted); grid-column: 1 / -1; }
footer { margin-top: 40px; text-align: center; font-size: 13px; color: var(--muted); }
/* find a museum */
.find { display: flex; align-items: center; gap: 12px; max-width: 520px; margin: 0 auto 22px; }
.find input { flex: 1; min-width: 0; font: 500 16px var(--sans); color: var(--ink); background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 999px; padding: 11px 18px; outline: none; }
.find input::placeholder { color: var(--muted); font-style: italic; }
.find input:focus { border-color: var(--gold); background: rgba(255,255,255,.08); }
.find .count { flex: none; font-size: 12px; color: var(--muted); }
.door[hidden] { display: none; }