:root {
  --paper: #f4f1e8;
  --paper-deep: #e9e4d8;
  --ink: #171714;
  --blue: #253f98;
  --muted: #77746b;
  --line: rgba(23, 23, 20, .18);
  --shadow: 0 25px 55px rgba(30, 27, 20, .18), 0 2px 6px rgba(30, 27, 20, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Manrope, Arial, sans-serif; font-size: 16px; overflow-x: hidden; }
button, a { color: inherit; }
button { font: inherit; }
a { text-decoration: none; }
img { display: block; max-width: 100%; }

.site-header { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; height: 70px; padding: 0 4vw; background: rgba(244, 241, 232, .88); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.brand { font-size: .78rem; font-weight: 600; letter-spacing: .14em; }
.desktop-nav { display: flex; gap: 2rem; font-size: .82rem; }
.desktop-nav a { transition: color .2s; }
.desktop-nav a:hover { color: var(--blue); }
.menu-button { display: none; border: 0; background: none; padding: 10px 0; font-size: .8rem; }
.mobile-menu { position: fixed; inset: 70px 0 auto; z-index: 29; padding: 1rem 5vw 2rem; background: var(--paper); border-bottom: 1px solid var(--line); }
.mobile-menu a { display: block; padding: .85rem 0; font-family: Prata, serif; font-size: 1.5rem; }

.hero { padding: 22px 4vw 24px; background: #eeebe2; }
.eyebrow { margin: 0 0 2rem; text-transform: uppercase; letter-spacing: .14em; font-size: .68rem; font-weight: 600; }
.hero .eyebrow { margin-bottom: 10px; font-size: .75rem; }
.hero h1, h2 { font-family: Prata, Georgia, serif; font-weight: 400; }
.hero h1 { margin: 0; font-size: clamp(1.8rem, 3.2vw, 3rem); line-height: 1.2; letter-spacing: -.04em; }
em { color: var(--blue); font-style: italic; }
.exposition { padding: 0 0 5rem; background: #eeebe2; scroll-margin-top: 70px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.exposition-hint { margin: 0; padding: 16px 4vw 28px; color: var(--muted); font-size: .875rem; line-height: 1.5; }
.section-heading { padding: 0 4vw 3.5rem; display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 3rem; }
.section-heading .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.section-heading h2 { margin: 0; font-size: clamp(2.8rem, 5.5vw, 6rem); line-height: .95; letter-spacing: -.04em; }
.hint { justify-self: end; max-width: 30rem; margin: 0; color: var(--muted); line-height: 1.65; }

.museum-stage { position: relative; width: 100%; --room-height: clamp(340px, calc(100svh - 210px), 620px); height: var(--room-height); margin: 0 auto; background: #f2f1ed url('/assets/gallery-room.webp') center bottom / cover no-repeat; overflow: hidden; }
.gallery-viewport { position: absolute; inset: 0 0 21%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #9c9990 transparent; cursor: grab; -webkit-overflow-scrolling: touch; }
.gallery-viewport.is-dragging, .is-dragging .artwork { cursor: grabbing; }
.gallery-viewport:focus-visible { outline: 2px solid var(--blue); outline-offset: -3px; }
.track { display: flex; align-items: center; gap: clamp(48px, 7vw, 110px); width: max-content; min-width: 100%; height: 100%; padding: 65px max(6vw, 24px) 32px; }
.room-label { position: absolute; left: 4%; top: 18px; margin: 0; font-size: .75rem; line-height: 1.6; letter-spacing: .09em; pointer-events: none; }
.room-label small { color: var(--muted); font-size: .75rem; }
.artwork { border: 0; padding: 0; background: transparent; cursor: zoom-in; flex: 0 0 auto; position: relative; user-select: none; -webkit-user-select: none; }
.artwork.featured { width: clamp(230px, 24vw, 350px); }
.artwork.featured:nth-child(even) { width: clamp(250px, 27vw, 390px); }
.artwork img { width: 100%; max-height: min(370px, calc(var(--room-height) * .79 - 100px)); object-fit: contain; box-shadow: 5px 10px 16px rgba(30,27,20,.22), 1px 2px 3px rgba(30,27,20,.2); -webkit-user-drag: none; }
.artwork:focus-visible { outline: 2px solid var(--blue); outline-offset: 8px; }
.art-dialog[open] .dialog-image-wrap img { animation: reveal-art .28s ease-out; }
@keyframes reveal-art { from { opacity: .4; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }

.all-works-heading { display: flex; justify-content: space-between; align-items: baseline; margin: 0 4vw; padding: 1rem 0; border-top: 1px solid var(--line); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; }
.all-works-heading span { color: var(--blue); }
.gallery-wall { width: min(1320px, 92vw); margin: 2rem auto 0; display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(2rem, 5vw, 6rem) clamp(1.5rem, 4vw, 5rem); align-items: center; padding: 4rem 2vw 8rem; }
.gallery-card { grid-column: span 4; border: 0; background: none; padding: 0; cursor: zoom-in; text-align: left; }
.gallery-card:nth-child(5n+2), .gallery-card:nth-child(5n+4) { grid-column: span 3; }
.gallery-card:nth-child(5n+3) { grid-column: span 5; }
.gallery-card img { width: 100%; max-height: 430px; object-fit: contain; box-shadow: var(--shadow); transition: transform .35s ease; }
.gallery-card:hover img { transform: translateY(-7px); }
.gallery-card span { display: block; margin-top: 1rem; font-size: .72rem; color: var(--muted); }

.manifesto { min-height: 85vh; padding: 10rem 4vw; display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: 2rem 6vw; }
.manifesto .eyebrow { grid-column: 1 / -1; }
.manifesto h2 { margin: 0; font-size: clamp(3.4rem, 7vw, 8rem); line-height: .95; letter-spacing: -.055em; }
.manifesto-copy { max-width: 34rem; align-self: end; font-size: clamp(1rem, 1.4vw, 1.25rem); line-height: 1.75; }
.manifesto-copy p:first-child { font-family: Prata, serif; font-size: 1.35em; }

.archive-section { padding: 9rem 0; background: #20201d; color: #f3f0e7; }
.archive-heading .hint { color: #aaa79e; }
.archive-grid { width: min(1320px, 92vw); margin: 1rem auto 0; columns: 4 240px; column-gap: 1.4rem; }
.archive-card { display: block; width: 100%; break-inside: avoid; margin: 0 0 1.4rem; border: 0; padding: 0; background: none; cursor: zoom-in; color: inherit; text-align: left; }
.archive-card img { width: 100%; filter: saturate(.82); transition: filter .25s, opacity .25s; }
.archive-card:hover img { filter: saturate(1); opacity: .9; }
.archive-card span { display: block; padding: .65rem 0 1rem; font-size: .68rem; color: #aaa79e; border-bottom: 1px solid rgba(255,255,255,.12); }


footer { padding: 8rem 4vw 2rem; color: #f2efe6; background: var(--blue); }
footer h2 { margin: 0 0 5rem; font-size: clamp(4rem, 9vw, 10rem); line-height: .95; letter-spacing: -.05em; }
.contact-button { width: 100%; display: flex; justify-content: space-between; padding: 1.3rem 0; border: 0; border-top: 1px solid rgba(255,255,255,.55); border-bottom: 1px solid rgba(255,255,255,.55); color: white; background: none; cursor: pointer; text-align: left; font-size: clamp(1.25rem, 2vw, 2rem); }
.contact-list { margin-top: 3.5rem; border-top: 1px solid rgba(255,255,255,.28); }
.contact-list a { display: grid; grid-template-columns: minmax(7rem, .35fr) 1fr; gap: 1rem; align-items: baseline; padding: 1.15rem 0; border-bottom: 1px solid rgba(255,255,255,.28); }
.contact-list span { font-size: .67rem; text-transform: uppercase; letter-spacing: .11em; opacity: .68; }
.contact-list strong { font-weight: 400; font-size: clamp(1rem, 1.6vw, 1.35rem); overflow-wrap: anywhere; }
.contact-list a:hover strong { text-decoration: underline; text-underline-offset: .25em; }
.footer-row { display: flex; justify-content: space-between; padding-top: 7rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; opacity: .72; }

.art-dialog { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(244,241,232,.98); color: var(--ink); }
.art-dialog::backdrop { background: rgba(12,12,10,.78); backdrop-filter: blur(8px); }
.dialog-close { position: fixed; top: 1.1rem; right: 1.4rem; z-index: 3; border: 0; background: none; padding: .7rem; cursor: pointer; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.dialog-layout { min-height: 100%; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr); }
.dialog-image-wrap { min-height: 100dvh; display: grid; place-items: center; padding: 4vh 5vw; background: #e9e5da; }
.dialog-image-wrap img { max-width: 100%; max-height: 90dvh; object-fit: contain; box-shadow: var(--shadow); }
.dialog-info { display: flex; flex-direction: column; justify-content: center; padding: 7vw 5vw; }
.dialog-kicker { margin: 0 0 2.3rem; color: var(--blue); font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; }
.dialog-info > p:not(.dialog-kicker):not(.dialog-price) { margin: .25rem 0; color: var(--muted); }
.dialog-price { margin: 2rem 0 0; font-family: Prata, serif; font-size: 1.65rem; }
.buy-button { display: flex; justify-content: space-between; margin-top: 2rem; padding: 1rem 0; border: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: none; cursor: pointer; text-align: left; }
.buy-button[hidden] { display: none; }
.toast { position: fixed; z-index: 60; left: 50%; bottom: 2rem; transform: translate(-50%, 130%); padding: .9rem 1.2rem; color: #fff; background: var(--ink); font-size: .78rem; opacity: 0; transition: transform .25s, opacity .25s; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }

@media (max-width: 760px) {
  .site-header { height: 62px; padding: 0 5vw; }
  .desktop-nav { display: none; }
  .menu-button { display: block; }
  .mobile-menu { top: 62px; }
  .hero { padding: 16px 5vw 18px; }
  .hero .eyebrow { font-size: .75rem; line-height: 1.5; margin-bottom: 8px; letter-spacing: .08em; }
  .hero h1 { font-size: clamp(1.65rem, 6.7vw, 2.5rem); line-height: 1.2; }
  .exposition { scroll-margin-top: 62px; }
  .exposition-hint { padding: 14px 5vw 24px; }
  .section-heading { padding: 0 5vw 2rem; display: block; }
  .section-heading h2 { font-size: 3rem; }
  .section-heading .eyebrow { margin-bottom: 1.5rem; }
  .hint { margin-top: 1.25rem; font-size: .84rem; }
  .museum-stage { --room-height: clamp(340px, calc(100svh - 205px), 540px); background-size: 100% 100%; }
  .track { gap: 44px; padding: 60px 12vw 25px; }
  .artwork.featured, .artwork.featured:nth-child(even) { width: 68vw; max-width: 320px; }
  .artwork img { max-height: min(300px, calc(var(--room-height) * .79 - 85px)); }
  .room-label { left: 5%; }
  .all-works-heading { margin: 0 5vw; }
  .gallery-wall { width: 100%; grid-template-columns: repeat(6, 1fr); gap: 4rem 1.3rem; padding: 3rem 5vw 6rem; }
  .gallery-card, .gallery-card:nth-child(5n+2), .gallery-card:nth-child(5n+3), .gallery-card:nth-child(5n+4) { grid-column: span 3; }
  .gallery-card:nth-child(3n+2) { grid-column: 2 / span 4; }
  .manifesto { min-height: auto; padding: 8rem 5vw; display: block; }
  .manifesto h2 { font-size: 3.5rem; }
  .manifesto-copy { margin-top: 4rem; }
  .archive-section { padding: 7rem 0; }
  .archive-grid { width: 90vw; columns: 2 130px; column-gap: .8rem; }
  .archive-card { margin-bottom: .8rem; }
  footer { padding: 7rem 5vw 2rem; }
  footer h2 { font-size: 4.4rem; }
  .contact-list a { grid-template-columns: 1fr; gap: .45rem; }
  .footer-row { gap: 1rem; padding-top: 5rem; }
  .dialog-layout { display: flex; flex-direction: column; min-height: 100dvh; }
  .dialog-image-wrap { min-height: 61dvh; padding: 3.4rem 1.5rem 1.5rem; }
  .dialog-image-wrap img { max-height: 52dvh; }
  .dialog-info { padding: 2rem 5vw 3rem; }
  .dialog-kicker { margin-bottom: 1.2rem; }
  .dialog-price { margin-top: 1rem; }
  .buy-button { margin-top: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}