:root { color-scheme: light; font-family: Arial, Helvetica, sans-serif; background: #f7f7f5; color: #111; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid #111; outline-offset: 3px; }
.site-header { padding: 1.4rem clamp(1rem, 4vw, 3.5rem); border-bottom: 1px solid #d8d8d5; }
h1 { margin: 0; font-size: clamp(1rem, 1.4vw, 1.2rem); font-weight: 500; letter-spacing: .01em; }
h1 span { color: #5b5b58; font-weight: 400; }
main { padding: clamp(1rem, 3vw, 3.5rem); }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(.7rem, 1.5vw, 1.5rem); }
.artwork { min-width: 0; }
.artwork-button { display: block; width: 100%; padding: 0; border: 0; background: #e6e6e3; cursor: pointer; text-align: left; }
.artwork-button img { display: block; width: 100%; height: clamp(10rem, 15vw, 14rem); object-fit: cover; background: #e0e0dd; transition: opacity .16s ease; }
.artwork-button:hover img { opacity: .88; }
.artwork-caption { padding-top: .55rem; font-size: .78rem; line-height: 1.35; color: #4c4c49; }
.artwork-caption strong { display: block; color: #222; font-weight: 500; }
.artwork-caption span:empty, .artwork-caption strong:empty { display: none; }
.notice { color: #555; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.lightbox { width: 100%; max-width: none; height: 100%; max-height: none; padding: clamp(1rem, 3vw, 2rem); border: 0; background: rgba(13, 13, 13, .98); color: #f5f5f3; }
.lightbox::backdrop { background: rgba(0, 0, 0, .92); }
.lightbox[open] { display: grid; grid-template-columns: minmax(2.5rem, 8vw) minmax(0, 1fr) minmax(2.5rem, 8vw); grid-template-rows: 1fr; align-items: center; gap: .5rem; }
.lightbox button { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }
.lightbox-close { position: fixed; z-index: 2; top: 1.25rem; right: 1.25rem; padding: .6rem; }
.lightbox-figure { display: grid; place-items: center; min-width: 0; max-height: calc(100vh - 4rem); margin: 0; }
.lightbox-figure img { display: block; max-width: 100%; max-height: calc(100vh - 10rem); object-fit: contain; }
.lightbox figcaption { width: min(100%, 70rem); padding-top: .75rem; font-size: .8rem; line-height: 1.45; color: #c7c7c3; }
.lightbox figcaption h2, .lightbox figcaption p { margin: 0; }
.lightbox figcaption h2 { color: #fff; font-size: .9rem; font-weight: 500; }
.lightbox-number { float: right; color: #aaa; }
.lightbox-description:empty { display: none; }
@media (max-width: 560px) { .lightbox[open] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; } .lightbox-figure { grid-column: 1 / -1; grid-row: 1; } .lightbox-previous { grid-column: 1; grid-row: 2; text-align: left; } .lightbox-next { grid-column: 2; grid-row: 2; text-align: right; } .lightbox-figure img { max-height: calc(100vh - 11rem); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }