:root {
  --paper: #f6f3ec;
  --ink: #20201d;
  --muted: #6f6b63;
  --line: #d8d2c7;
  --pink: #e8b8b5;
  --sage: #b8c4ae;
  --yellow: #e7cf91;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
  --hand: "Caveat", cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.5;
  overflow-x: hidden;
}
body::before {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  opacity: .14;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
button, a { color: inherit; }
button { font: inherit; }
a { text-decoration: none; }

.intro {
  position: relative;
  min-height: 100svh;
  padding: 32px 5.5vw 48px;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--line);
}
.intro__topline, .footer, .lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.museum-mark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.museum-mark__dot {
  width: 7px;
  height: 7px;
  display: inline-block;
  background: var(--pink);
  border: 1px solid var(--ink);
  border-radius: 50%;
}
.intro__edition, .footer { color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.intro__content { margin: auto 0 13vh 16.666vw; }
.eyebrow, .section-kicker {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
h1, h2 { margin: 0; font-family: var(--serif); font-weight: 400; line-height: .82; letter-spacing: 0; }
h1 { font-size: clamp(72px, 11.5vw, 178px); }
h1 em, h2 em { color: var(--muted); font-style: italic; }
.intro__dek { margin: 34px 0 0 20.5%; color: var(--muted); font-family: var(--serif); font-size: 21px; }
.scroll-cue {
  position: absolute;
  right: 5.5vw;
  bottom: 42px;
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}
.scroll-cue svg { width: 18px; height: 30px; }
.intro__corner-note { position: absolute; right: 5.5vw; bottom: 42px; color: var(--muted); font-family: var(--hand); font-size: 17px; transform: translateX(-40px) rotate(-8deg); }

main { max-width: 1440px; margin: 0 auto; }
.gallery-intro {
  min-height: 56vh;
  padding: 15vh 8.333vw 10vh;
  display: grid;
  grid-template-columns: 2fr 4fr 1fr;
  align-items: end;
  column-gap: 8.333vw;
}
.gallery-intro__copy { margin: 0; font-family: var(--serif); font-size: clamp(32px, 4vw, 58px); line-height: .9; }
.gallery-intro__rule { width: 100%; height: 1px; margin-bottom: 7px; background: var(--line); }
.gallery-intro__count { margin: 0; font-family: var(--serif); font-size: 36px; line-height: 1; }
.gallery-intro__count span { display: block; margin-top: 7px; color: var(--muted); font-family: var(--sans); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }

.exhibit { position: relative; min-height: 80vh; }\n.reveal-target { opacity: 0; transform: translateY(14px); transition: opacity 700ms ease, transform 700ms cubic-bezier(.2,.75,.2,1); }\n.reveal-target.is-visible { opacity: 1; transform: translateY(0); }
.exhibit__number { position: absolute; top: 0; left: 8.333vw; color: var(--muted); font-family: var(--serif); font-size: 20px; }
.exhibit__caption { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; }
.caption-rule { width: 44px; height: 1px; display: inline-block; background: var(--line); }
.artwork { position: absolute; display: block; padding: 0; border: 0; background: transparent; cursor: zoom-in; text-align: left; }
.artwork img:not(.mascot) { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(.2,.75,.2,1), filter 600ms ease; }
.artwork::after { position: absolute; inset: 0; z-index: 2; content: ""; border: 1px solid rgba(32,32,29,.15); pointer-events: none; transition: inset 500ms cubic-bezier(.2,.75,.2,1); }
.artwork:hover img:not(.mascot) { transform: scale(1.012); filter: saturate(1.04); }
.artwork:hover::after { inset: -7px; }
.artwork--portrait { width: 30vw; max-width: 410px; aspect-ratio: 3 / 4; }
.artwork--square { width: min(34vw, 430px); aspect-ratio: 1; }
.artwork--small { width: min(25vw, 310px); aspect-ratio: 1; }
.artwork--framed { padding: 17px; background: #ddd7cc; box-shadow: 12px 16px 0 rgba(113,104,88,.1); }
.artwork--framed::after { inset: 17px; border-color: rgba(32,32,29,.22); }
.frame-edge { position: absolute; inset: 7px; z-index: 0; border: 1px solid rgba(32,32,29,.22); }
.artwork__print-mark { position: absolute; right: 23px; bottom: 7px; z-index: 3; color: rgba(32,32,29,.6); font-size: 7px; letter-spacing: .1em; }
.artwork--paper { padding: 15px 15px 35px; background: #eeece5; box-shadow: 13px 16px 0 rgba(113,104,88,.08); transform: rotate(2deg); }
.artwork--paper::after { inset: 15px 15px 35px; }
.artwork--pinned { padding: 12px; background: #ece6da; transform: rotate(-3deg); }
.artwork--pinned::after { inset: 12px; }
.pin-pin, .pin { position: absolute; z-index: 4; width: 13px; height: 13px; background: var(--pink); border: 1px solid var(--ink); border-radius: 50%; box-shadow: 1px 2px 0 rgba(32,32,29,.14); }
.pin-pin { top: 5px; left: 50%; transform: translateX(-50%); }
.artwork--gallery-frame { padding: 26px; background: var(--yellow); box-shadow: 16px 19px 0 rgba(113,104,88,.08); }
.gallery-frame { position: absolute; pointer-events: none; }
.gallery-frame--outer { inset: 7px; border: 1px solid rgba(32,32,29,.32); }
.gallery-frame--inner { inset: 26px; z-index: 2; border: 1px solid rgba(32,32,29,.2); }
.artwork--float { padding: 9px; background: #e4e9df; transform: rotate(4deg); box-shadow: 8px 15px 0 rgba(113,104,88,.08); }
.artwork--float::after { inset: 9px; }
.tape { position: absolute; z-index: 3; width: 70px; height: 17px; background: rgba(231,207,145,.74); }
.tape--top { top: -9px; left: 50%; transform: translateX(-50%) rotate(-5deg); }
.artwork--final { padding: 14px; background: #e9e6dc; box-shadow: 13px 17px 0 rgba(113,104,88,.1); transform: rotate(-1deg); }
.artwork--final::after { inset: 14px; }
.final-paper { position: absolute; inset: -13px 13px 13px -13px; z-index: 0; background: #ede9df; transform: rotate(3deg); }

.mascot { position: absolute; z-index: 5; width: auto !important; height: auto !important; object-fit: contain !important; pointer-events: none; filter: drop-shadow(2px 3px 0 rgba(32,32,29,.13)); image-rendering: pixelated; transition: transform 500ms cubic-bezier(.2,.75,.2,1); }
.artwork:hover .mascot { transform: translateY(-4px); }
.mascot--sitting { width: 92px !important; right: -41px; bottom: -16px; }
.mascot--holding { width: 105px !important; left: -52px; top: 35%; transform: rotate(-3deg); }
.mascot--peeking { width: 93px !important; right: -40px; top: -11px; }
.mascot--sleeping { width: 148px !important; left: 5%; bottom: -25px; animation: breathe 4.5s ease-in-out infinite; }
.mascot--painting { width: 112px !important; right: -88px; bottom: -5px; }
.mascot--pointing { width: 100px !important; left: -85px; top: 20%; }
@keyframes breathe { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(1px) scaleY(.985); } }

.exhibit--one { min-height: 89vh; }
.exhibit--one .artwork { left: 29.5%; top: 8vh; }
.exhibit--one .exhibit__caption { position: absolute; top: 17vh; left: 73%; }
.note--one { position: absolute; top: 64vh; left: 19%; margin: 0; color: var(--muted); font-family: var(--hand); font-size: 19px; transform: rotate(-7deg); }
.note--one::before { display: block; width: 35px; height: 16px; margin-bottom: 3px; content: ""; border-top: 1px solid var(--line); transform: rotate(14deg); }
.exhibit--two { min-height: 78vh; }
.exhibit--two .artwork { left: 18%; top: 12vh; }
.exhibit--two .exhibit__caption { position: absolute; left: 52%; top: 60vh; }
.exhibit--three { min-height: 70vh; }
.exhibit--three .artwork { left: 57%; top: 5vh; width: min(27vw, 340px); }
.exhibit--three .exhibit__number { left: 48%; }
.note--three { position: absolute; left: 18%; top: 39vh; margin: 0; font-family: var(--hand); font-size: 19px; line-height: 1.05; transform: rotate(5deg); }
.note--three span { color: var(--muted); font-size: 16px; }
.pin { left: 65%; top: 9vh; background: var(--sage); }
.exhibit--four { min-height: 104vh; }
.exhibit--four .artwork { left: 28%; top: 11vh; width: min(44vw, 560px); }
.exhibit__side-note { position: absolute; top: 25vh; right: 12%; margin: 0; color: var(--muted); font-size: 9px; letter-spacing: .15em; line-height: 1.8; text-transform: uppercase; }
.exhibit--four .exhibit__caption--large { position: absolute; left: 70%; bottom: 20vh; font-family: var(--serif); font-size: 31px; line-height: .8; }
.exhibit--four .exhibit__caption--large em { color: var(--muted); font-style: italic; }
.exhibit--five { min-height: 71vh; }
.exhibit--five .artwork { left: 23%; top: 11vh; }
.exhibit--five .exhibit__caption--vertical { position: absolute; top: 25vh; left: 56%; writing-mode: vertical-rl; }
.mini-brush { position: absolute; left: 58%; top: 45vh; width: 92px; height: 1px; background: var(--ink); transform: rotate(-38deg); }
.mini-brush::after { position: absolute; right: -1px; top: -3px; width: 7px; height: 7px; content: ""; background: var(--pink); border-radius: 50%; }
.exhibit--six { min-height: 101vh; }
.exhibit--six .artwork { left: 40%; top: 13vh; width: min(36vw, 460px); }
.exhibit__final-label { position: absolute; top: 17vh; left: 73%; display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; }
.note--six { position: absolute; left: 23%; top: 56vh; margin: 0; color: var(--muted); font-family: var(--hand); font-size: 20px; transform: rotate(-5deg); }

.final-message { position: relative; min-height: 86vh; padding: 18vh 16.666vw 13vh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; border-top: 1px solid var(--line); overflow: hidden; }
.final-message__line { position: absolute; top: 11vh; left: 8.333vw; width: 83.333vw; height: 1px; background: var(--line); }
.final-message h2 { font-size: clamp(82px, 12vw, 174px); }
.final-message__copy { margin: 50px 0 0 17%; color: var(--muted); font-family: var(--serif); font-size: 21px; line-height: 1.05; }
.final-message__mascot { position: relative; align-self: end; justify-self: center; width: 220px; text-align: center; }
.final-message__mascot img { width: 175px; display: block; margin: 0 auto; filter: drop-shadow(2px 3px 0 rgba(32,32,29,.13)); }
.final-message__tiny-note { display: inline-block; margin-top: -3px; padding: 7px 12px; background: var(--yellow); font-family: var(--hand); font-size: 18px; transform: rotate(-5deg); }
.footer { min-height: 88px; padding: 0 5.5vw; border-top: 1px solid var(--line); }
.footer a { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); transition: color 250ms ease; }
.footer a:hover { color: var(--ink); }
.footer-arrow { width: 12px; height: 12px; }

.lightbox { width: 100%; height: 100%; max-width: none; max-height: none; padding: 32px 5.5vw; border: 0; background: rgba(246,243,236,.98); color: var(--ink); }
.lightbox::backdrop { background: rgba(32,32,29,.32); }
.lightbox__bar { position: relative; z-index: 1; }
.icon-button { position: relative; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); background: transparent; cursor: pointer; }
.close-mark, .close-mark::after { position: absolute; display: block; width: 15px; height: 1px; background: currentColor; }
.close-mark { top: 16px; left: 9px; transform: rotate(45deg); }
.close-mark::after { content: ""; transform: rotate(90deg); }
.lightbox__content { height: calc(100% - 70px); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lightbox__content .section-kicker { margin-bottom: 18px; }
.lightbox__image { display: block; width: auto; max-width: min(75vw, 700px); height: min(72vh, 700px); object-fit: contain; }
.lightbox__controls { width: min(75vw, 700px); margin-top: 22px; display: flex; align-items: center; justify-content: space-between; }
.text-button { display: inline-flex; align-items: center; gap: 8px; padding: 5px 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.text-button svg { width: 18px; height: 10px; }
.text-button:hover { color: var(--muted); }
.lightbox__hint { color: var(--muted); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }

@media (max-width: 720px) {
  .intro { min-height: 92svh; padding: 22px 7vw 32px; }
  .intro__edition { display: none; }
  .intro__content { margin: auto 0 18vh 7vw; }
  .eyebrow { max-width: 150px; margin-bottom: 28px; line-height: 1.3; }
  h1 { font-size: clamp(62px, 19vw, 118px); }
  .intro__dek { margin: 30px 0 0 24%; font-size: 18px; }
  .scroll-cue { right: 7vw; bottom: 29px; }
  .intro__corner-note { right: 7vw; bottom: 31px; transform: translateX(-30px) rotate(-8deg); }
  .gallery-intro { min-height: 47vh; padding: 15vh 7vw 10vh; display: block; }
  .gallery-intro__copy { margin-top: 54px; font-size: 44px; }
  .gallery-intro__rule { width: 52%; margin: 39px 0 0 auto; }
  .gallery-intro__count { margin-top: 16px; text-align: right; }
  .exhibit { min-height: 86vh; }\n  .reveal-target { transform: translateY(8px); }
  .exhibit__number { left: 7vw; }
  .exhibit__caption, .exhibit__final-label { font-size: 8px; }
  .artwork--portrait { width: 72vw; max-width: none; }
  .artwork--square { width: 72vw; }
  .artwork--small { width: 57vw; }
  .mascot--sitting { width: 73px !important; right: -30px; bottom: -13px; }
  .mascot--holding { width: 79px !important; left: -39px; }
  .mascot--peeking { width: 73px !important; right: -30px; top: -9px; }
  .mascot--sleeping { width: 107px !important; left: 5%; bottom: -19px; }
  .mascot--painting { width: 84px !important; right: -64px; bottom: -4px; }
  .mascot--pointing { width: 76px !important; left: -62px; }
  .exhibit--one { min-height: 99vh; }
  .exhibit--one .artwork { left: 14%; top: 10vh; }
  .exhibit--one .exhibit__caption { top: 71vh; left: 16%; }
  .note--one { top: 78vh; left: 53%; font-size: 17px; }
  .exhibit--two { min-height: 88vh; }
  .exhibit--two .artwork { left: 17%; top: 11vh; }
  .exhibit--two .exhibit__caption { left: 18%; top: 77vh; }
  .exhibit--three { min-height: 88vh; }
  .exhibit--three .artwork { left: 18%; top: 13vh; width: 64vw; }
  .exhibit--three .exhibit__number { left: 7vw; }
  .note--three { left: 52%; top: 65vh; font-size: 17px; }
  .pin { left: 48%; top: 9vh; }
  .exhibit--four { min-height: 98vh; }
  .exhibit--four .artwork { left: 9%; top: 13vh; width: 82vw; }
  .exhibit__side-note { top: 5vh; right: 9%; }
  .exhibit--four .exhibit__caption--large { left: 61%; bottom: 10vh; font-size: 27px; }
  .exhibit--five { min-height: 88vh; }
  .exhibit--five .artwork { left: 15%; top: 13vh; }
  .exhibit--five .exhibit__caption--vertical { top: 25vh; left: 79%; }
  .mini-brush { left: 48%; top: 60vh; }
  .exhibit--six { min-height: 99vh; }
  .exhibit--six .artwork { left: 14%; top: 14vh; width: 72vw; }
  .exhibit__final-label { top: 8vh; left: 57%; }
  .note--six { left: 51%; top: 73vh; font-size: 18px; }
  .final-message { min-height: 94vh; padding: 17vh 14vw 11vh; display: block; }
  .final-message__line { top: 10vh; left: 7vw; width: 86vw; }
  .final-message h2 { font-size: 92px; }
  .final-message__copy { margin: 42px 0 0 8%; font-size: 19px; }
  .final-message__mascot { width: 190px; margin: 68px auto 0; }
  .footer { min-height: 100px; padding: 0 7vw; font-size: 8px; }
  .footer > span:first-child { display: none; }
  .lightbox { padding: 22px 7vw; }
  .lightbox__content { height: calc(100% - 55px); }
  .lightbox__image { width: 86vw; max-width: 86vw; height: auto; max-height: 68vh; }
  .lightbox__controls { width: 86vw; }
  .lightbox__hint { display: none; }
}

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