:root { color-scheme: dark; --paper: #f8f3ed; --muted: #bbb7cd; --background: #14132b; --accent: #7ce2e4; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--background); color: var(--paper); font-family: Georgia, 'Times New Roman', serif; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; }
.wrap { width: min(1440px, calc(100% - 80px)); margin-inline: auto; }
.gallery-nav { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-block: 28px; border-bottom: 1px solid #ffffff20; font: 14px/1.5 Arial, sans-serif; }
.gallery-nav .home-link { letter-spacing: .12em; text-transform: uppercase; }
.gallery-nav a:hover, footer a:hover { color: var(--accent); }
.gallery-heading { padding: 52px 0 38px; }
.eyebrow { color: var(--muted); margin: 0 0 16px; font: 13px/1.5 Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
h1 { font-size: clamp(2.5rem, 5vw, 5rem); line-height: 1.08; font-weight: 400; letter-spacing: -.045em; margin: 0; }
.art-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 24px; }
.artwork { min-width: 0; display: block; }
figure { margin: 0; }
.artwork img { display: block; width: 100%; height: auto; aspect-ratio: 3712 / 5248; object-fit: contain; transition: opacity .2s ease; }
.artwork:hover img { opacity: .87; }
figcaption { margin-top: 15px; font-size: 17px; letter-spacing: .025em; line-height: 1.4; }
footer { display: flex; justify-content: space-between; gap: 20px; margin-top: 72px !important; padding: 24px 0 32px; border-top: 1px solid #ffffff20; color: var(--muted); font: 14px/1.5 Arial, sans-serif; }
.viewer { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: #090912; color: var(--paper); overflow: hidden; overscroll-behavior: none; }
.viewer[open] { display: flex; flex-direction: column; }
.viewer::backdrop { background: #090912; }
.viewer-bar { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; gap: 12px; padding: max(12px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) 12px max(22px, env(safe-area-inset-left)); }
.viewer h2 { font-size: 18px; font-weight: 400; letter-spacing: .025em; margin: 0; overflow-wrap: anywhere; }
.close-viewer { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; min-height: 44px; padding: 6px 12px; border: 1px solid #ffffff40; border-radius: 999px; background: #ffffff08; color: var(--paper); cursor: pointer; font: 14px/1 Arial, sans-serif; }
.close-viewer span { font-size: 28px; font-weight: 300; }
.close-viewer:hover { background: #ffffff20; }
.viewer-stage { flex: 1 1 0; min-height: 0; display: flex; justify-content: center; align-items: center; padding: 0 18px; touch-action: pinch-zoom; }
.viewer-image { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-select: none; }
#viewer-hint { flex: 0 0 auto; margin: 0; padding: 14px 20px max(16px, env(safe-area-inset-bottom)); text-align: center; color: var(--muted); font: 13px/1.5 Arial, sans-serif; }
.image-error { position: absolute; inset: 45% 20px auto; text-align: center; font: 16px/1.5 Arial, sans-serif; background: #090912; padding: 20px; }
.retry-image { min-height: 44px; margin-left: 12px; padding: 8px 14px; border: 1px solid #ffffff60; border-radius: 8px; color: inherit; background: transparent; cursor: pointer; }
@media (min-width: 1500px) { .art-grid { gap: 48px 30px; } }
@media (max-width: 1000px) { .art-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wrap { width: calc(100% - 48px); } }
@media (max-width: 700px) { .art-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 14px; } .wrap { width: calc(100% - 32px); } .gallery-heading { padding: 34px 0 28px; } .gallery-nav { padding-block: 20px; } figcaption { font-size: 15px; margin-top: 10px; } .eyebrow { font-size: 12px; letter-spacing: .11em; } .viewer-stage { padding-inline: 0; } }
@media (max-width: 340px) { .art-grid { grid-template-columns: 1fr; } .gallery-nav { flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }