/* ============================================================
   gallery.css: "The Collection"
   A light, editorial exhibition catalogue, built on the AAANOW
   house palette (sage / paper / cream ground, ink type, clay
   accent, Fraunces display). The works are hung on a calm warm
   wall and given room to be read. No dark "exhibition room",
   no perspective floor: a real gallery is quiet.
   ============================================================ */

:root {
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* house palette (matches the rest of the site) */
  --ink:       #1f2a2f;
  --ink-soft:  rgba(31,42,47,0.78);
  --ink-mute:  rgba(31,42,47,0.58);
  --ink-faint: rgba(31,42,47,0.5);
  --hair:      rgba(31,42,47,0.14);
  --hair-soft: rgba(31,42,47,0.08);
  --clay:      #b5562e;
  --gold:      #e8b773;

  /* ground */
  --sage:     #e2e9db;
  --lavender: #dfe0e6;
  --cream:    #f6f1dd;
  --paper:    #f2efe4;
  --plate:    #f3eeda;

  /* frame */
  --frame-dark: #211c15;
  --frame-mid:  #2c2519;
  --frame-edge: #15110b;
  --mat:        #faf7ee;

  --maxw: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(ellipse 70% 55% at 92% 0%, var(--lavender) 0%, transparent 60%),
    radial-gradient(ellipse 80% 50% at 8% 100%, var(--cream) 0%, transparent 55%),
    linear-gradient(180deg, var(--sage) 0%, var(--paper) 40%, var(--paper) 60%, var(--cream) 100%);
  background-attachment: fixed;
}
img { display: block; max-width: 100%; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(22px, 5vw, 64px); }

/* shared label / eyebrow */
.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--clay);
}

/* ============================================================
   FOYER: the entrance hall: marquee work + title wall
   ============================================================ */
.foyer {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-top: clamp(96px, 13vh, 150px);
  padding-bottom: clamp(48px, 8vh, 96px);
  overflow: hidden;
  /* the studio backdrop: a warm, lit wall, darker toward the lower-left
     where the text sits, so the entrance reads nothing like the bright rooms */
  background-color: #2b2014;
  /* the corner darkening is baked into the photo itself: a CSS gradient
     layered here rendered with visible banding (stepped rectangles around
     the lit wall), so the overlay now lives in the image where the paper
     grain dithers it smooth. */
  background-image: url(assets/gallery-backdrop.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* entrance: a single title block, anchored to the lower-left of the wall */
/* override the centered .wrap: the entrance text hugs the lower-left corner */
.foyer__inner {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  max-width: none;
  margin: 0;
  padding: 0 clamp(28px, 5vw, 72px);
}
.title-col {
  max-width: 760px;
  margin: 0;
  text-align: left;
}
.title-col .eyebrow {
  display: block;
  margin-bottom: clamp(14px, 2.2vh, 22px);
  color: #d6ad6e;
  letter-spacing: 0.3em;
}
.foyer-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 340;
  font-optical-sizing: auto;
  font-size: clamp(46px, 7vw, 100px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: #f4ead4;
  white-space: nowrap;
}
.foyer-sub {
  margin: clamp(14px, 2vh, 22px) 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: rgba(244,234,212,0.74);
}
/* Exhibition title on the entrance wall */
.foyer-sub.foyer-show {
  font-style: normal;
  font-family: var(--sans);
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(13px, 1.5vw, 19px);
  letter-spacing: 0.32em;
  color: #d89b12;
}

.enter {
  margin-top: clamp(26px, 3.6vh, 40px);
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 8px 8px 8px 30px;
  border-radius: 999px;
  border: 1px solid rgba(244,234,212,0.34);
  background: rgba(244,234,212,0.05);
  color: #f4ead4;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .35s ease, background .35s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
.enter:hover {
  transform: translateY(-2px);
  border-color: rgba(244,234,212,0.6);
  background: rgba(244,234,212,0.1);
}
.enter__arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(244,234,212,0.34);
  display: grid;
  place-items: center;
  transition: border-color .35s ease;
}
.enter:hover .enter__arrow { border-color: rgba(244,234,212,0.6); }
.enter svg { width: 16px; height: 16px; transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.enter:hover svg { transform: translateX(3px); }

/* ---- the featured work, hung on the right of the entrance wall.
        A different work is shown on each load (see inline script). The
        frame reuses the house museum frame and sizes to the work's
        proportions, so nothing is cropped. ---- */
.featured {
  position: absolute;
  top: 21%;
  right: clamp(40px, 7vw, 120px);
  width: clamp(320px, 37vw, 560px);
  margin: 0;
  z-index: 2;
  /* The featured work is hung, not interactive: no hover states can ever
     reach it, so it can never shift, flash or re-light under the cursor. */
  pointer-events: none;
}
/* The ornate gilt moulding is deep, so the work reads small inside it:
   when that frame is drawn, the whole piece hangs about 15% larger and
   the moulding scales up with it. */
.featured.frame-ornate {
  width: clamp(368px, 42.5vw, 644px);
  top: 17%;
}
.featured.frame-ornate .art__frame {
  border-width: clamp(39px, 6vw, 71px);
}
/* On the dark entrance wall the cast shadow runs deeper; same analytic
   gradient underlay, never an outer box-shadow (see .art__frame note). */
.featured .art__frame::before {
  background: radial-gradient(ellipse 58% 56% at 50% 53%,
    rgba(0,0,0,0.48) 0%,
    rgba(0,0,0,0.48) 30%,
    rgba(0,0,0,0.22) 58%,
    rgba(0,0,0,0) 80%);
}
@media (max-width: 900px) {
  .featured {
    top: 8%;
    right: 50%;
    transform: translateX(50%);
    width: min(72vw, 380px);
  }
  .featured.frame-ornate {
    top: 8%;
    width: min(80vw, 430px);
  }
}

/* right: the marquee work, hung on the wall */
.marquee {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.marquee .art { width: min(100%, 560px); }
.marquee .placard { margin-left: 2px; }

/* ============================================================
   FRAME: one refined museum frame, used everywhere
   ============================================================ */
.art {
  position: relative;
  cursor: zoom-in;
}
/* The works are focusable (they open the lightbox from the keyboard), but a
   mouse click must never draw a focus ring around a painting: it reads as a
   stray border. The ring is reserved for keyboard focus. */
.art:focus { outline: none; }
.art:focus-visible { outline: 2px solid var(--clay); outline-offset: 6px; }
.art__frame {
  position: relative;
  padding: clamp(11px, 1.1vw, 17px);
  border-radius: 2px;
  background:
    linear-gradient(135deg, #3a3022 0%, var(--frame-mid) 26%, var(--frame-dark) 52%, #342b1d 74%, var(--frame-edge) 100%);
  /* Bevel highlights only. Inset shadows never paint outside the frame, so
     they cannot leave a mark on the wall. Large blurred OUTER box-shadows are
     banned around the works: the browser rasterizes a big shadow blur into a
     downsampled texture clipped to the shadow's bounding rectangle, and on a
     textured or wide-gamut wall that clip edge shows as a faint rectangle
     around the frame (and re-rasterizing on hover reads as a brightness
     flash). The wall shadow is the analytic gradient underlay below instead. */
  box-shadow:
    inset 0 0 0 1px rgba(255,236,196,0.10),
    inset 2px 2px 3px rgba(255,236,196,0.14),
    inset -2px -2px 4px rgba(0,0,0,0.55);
}
/* The shadow every frame casts on the wall: a plain radial gradient on an
   underlay tucked behind the frame. It is ordinary paint (no blur filter, no
   shadow rasterization, no clip rectangle) and every stop reaches exactly
   zero alpha well inside the pseudo's bounds, so there is no edge to see. */
.art__frame::before {
  content: "";
  position: absolute;
  inset: -4% -6% -12% -6%;
  z-index: -1;
  background: radial-gradient(ellipse 58% 56% at 50% 53%,
    rgba(26,20,10,0.30) 0%,
    rgba(26,20,10,0.30) 30%,
    rgba(26,20,10,0.13) 58%,
    rgba(26,20,10,0) 80%);
}
/* Hovering a work never moves or re-lights the frame: a hung painting is
   still. (A hover lift here caused an edge-of-frame jitter loop: the frame
   rose out from under the cursor, hover ended, it dropped back, hover began
   again.) The only hover affordance is the Enlarge pill fading in. */
/* the museum mat */
.art__mat {
  position: relative;
  padding: clamp(16px, 2vw, 38px);
  background: var(--mat);
  box-shadow:
    inset 0 0 0 1px rgba(31,25,10,0.06),
    inset 0 1px 3px rgba(31,25,10,0.08);
}
.art--slim .art__mat { padding: clamp(10px, 1vw, 16px); }
/* fine keyline around the image */
.art__img {
  width: 100%;
  height: auto;
  box-shadow: 0 0 0 1px rgba(31,25,10,0.10);
}
/* a soft "under glass" sheen, very restrained. Plain alpha paint: a blend
   mode here forces the sheen (and the work under it) into a separate
   compositing group, which can re-render the image a touch brighter than
   the page around it. */
.art__frame::after {
  content: "";
  position: absolute;
  inset: clamp(11px, 1.1vw, 17px);
  pointer-events: none;
  background: linear-gradient(116deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 16%, rgba(255,255,255,0) 70%, rgba(255,255,255,0.06) 100%);
  opacity: 0.7;
}
/* the shadow pooled where the work meets the wall/floor in the foyer.
   No blur filter: a filter promotes the pseudo to its own rasterization
   region, whose bounds can show as a faint rectangle. The gradient is
   already soft. */
.marquee::after {
  content: "";
  position: absolute;
  left: 6%; right: 6%; bottom: -22px;
  height: 26px;
  background: radial-gradient(60% 100% at 50% 0%, rgba(31,25,10,0.20), transparent 70%);
  z-index: -1;
}

/* hover affordance: "enlarge" tag */
.art__zoom {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(20,18,14,0.8);
  color: #f6f1dd;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  /* Opacity fade only. A backdrop-filter or scale transition here forced the
     browser to re-composite the artwork behind the pill the moment the
     cursor entered the frame: the work appeared to flash brighter and shift
     a hair. The pill simply fades; nothing behind it is touched. */
  transition: opacity .35s ease;
}
.art:hover .art__zoom { opacity: 1; }
.art__zoom svg { width: 13px; height: 13px; }
@media (hover: none) { .art__zoom { display: none; } }

/* ============================================================
   PLACARD: the wall label beside / beneath a work
   ============================================================ */
.placard {
  margin-top: clamp(16px, 2vh, 22px);
  max-width: 360px;
}
.placard__no {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.placard__title {
  margin-top: 5px;
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(18px, 1.7vw, 22px);
  letter-spacing: -0.01em;
  line-height: 1.18;
  color: var(--ink);
}
.placard__meta {
  margin-top: 7px;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--clay);
}
.placard__meta .dot { color: var(--ink-faint); margin: 0 7px; }
.placard__note {
  margin-top: 11px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* ============================================================
   ROOMS
   ============================================================ */
.room { padding: clamp(54px, 9vh, 118px) 0; }
.room--tight { padding-top: clamp(20px, 4vh, 48px); }

.room__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
  align-items: end;
  gap: clamp(20px, 5vw, 80px);
  padding-bottom: clamp(26px, 4vh, 44px);
  border-bottom: 1px solid var(--hair);
}
.room__num {
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--clay);
  font-weight: 600;
}
.room__name {
  margin: 12px 0 0;
  font-family: var(--serif);
  font-weight: 360;
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.room__intro {
  font-size: clamp(14.5px, 1.15vw, 16px);
  line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: pretty;
  padding-bottom: 6px;
}

/* a catalogue block: framed work + catalogue entry, alternating */
.work {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  align-items: center;
  gap: clamp(30px, 5vw, 84px);
  margin-top: clamp(46px, 7vh, 92px);
}
.work--flip .work__art { order: 2; }
.work--flip .work__entry { order: 1; }
.work__art { display: flex; justify-content: center; }
.work__art .art { width: 100%; }

.entry__no {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--clay);
  font-variant-numeric: tabular-nums;
}
.entry__rule { height: 1px; background: var(--hair); margin: 16px 0 18px; }
.entry__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 380;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.entry__meta {
  margin-top: 12px;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-faint);
}
.entry__meta .dot { margin: 0 8px; opacity: 0.7; }
.entry__note {
  margin-top: 18px;
  font-size: clamp(15px, 1.2vw, 16.5px);
  line-height: 1.66;
  color: var(--ink-soft);
  text-wrap: pretty;
  max-width: 38ch;
}

/* a "series" grid: several pieces hung as a set (Room I) */
.series {
  margin-top: clamp(40px, 6vh, 72px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(34px, 5vw, 72px) clamp(34px, 5vw, 64px);
}
.series .art__mat { padding: clamp(14px, 1.6vw, 28px); }

/* the closing statement that ends a room */
.coda {
  margin-top: clamp(48px, 7vh, 86px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(18px, 3vw, 36px);
  align-items: start;
  max-width: 880px;
}
.coda__quote {
  font-family: var(--serif);
  font-size: 78px;
  line-height: 0.7;
  color: var(--ink-faint);
  font-weight: 300;
}
.coda__body {
  margin: 0;
  font-family: var(--serif);
  font-weight: 350;
  font-style: italic;
  font-size: clamp(20px, 2.3vw, 28px);
  line-height: 1.34;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: pretty;
}

/* two instruments side by side (Room III) */
.duet {
  margin-top: clamp(40px, 6vh, 72px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(34px, 5vw, 64px);
  align-items: start;
}

/* people room: big mosaic + portrait (Room IV) */
.people {
  margin-top: clamp(40px, 6vh, 72px);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(34px, 5vw, 72px);
  align-items: start;
}
.people__portrait { position: sticky; top: 120px; }
.art--portrait .art__img { box-shadow: 0 0 0 1px rgba(31,25,10,0.10); }

/* ============================================================
   COLOPHON: the closing plate
   ============================================================ */
.colophon {
  margin: clamp(40px, 7vh, 90px) 0 clamp(60px, 9vh, 110px);
}
.colophon__inner {
  border-top: 1px solid var(--hair);
  padding-top: clamp(30px, 5vh, 52px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 5vw, 60px);
  align-items: end;
}
.colophon__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 360;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 18ch;
  text-wrap: balance;
}
.colophon__sub {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 46ch;
}
.colophon__links { display: flex; gap: 12px; flex-wrap: wrap; }
.col-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: rgba(255,255,255,0.4);
  color: var(--ink);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.col-link:hover { border-color: var(--ink); transform: translateY(-1px); }
.col-link--solid { background: var(--ink); color: #f6f1dd; border-color: var(--ink); }
.col-link svg { width: 15px; height: 15px; }

/* ============================================================
   REVEAL (gated by .js-anim + reduced-motion)
   ============================================================ */
/* Entrance is additive: content is visible by default, so it can never be
   trapped hidden if the animation cannot run (background tab, throttled
   timeline, or JS disabled). The fade-in only plays while the page is shown. */
.js-anim [data-reveal].in { animation: galleryReveal .85s cubic-bezier(.2,.8,.2,1) both; }
@keyframes galleryReveal {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js-anim [data-reveal].in { animation: none; }
}

/* ============================================================
   LIGHTBOX: dim the hall, focus one work
   ============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 5vh, 64px);
  background: radial-gradient(120% 100% at 50% 30%, rgba(28,24,16,0.92), rgba(14,11,7,0.96));
  opacity: 0;
  transition: opacity .4s ease;
}
.lightbox.open { display: flex; opacity: 1; }
.lightbox__stage {
  position: relative;
  max-width: min(1040px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(.975);
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.lightbox.open .lightbox__stage { transform: scale(1); }
.lightbox__frame {
  padding: clamp(10px, 1vw, 16px);
  background: linear-gradient(135deg, #3a3022 0%, var(--frame-mid) 28%, var(--frame-dark) 54%, var(--frame-edge) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,236,196,0.10);
}
.lightbox__frame .matte { padding: clamp(12px, 1.4vw, 26px); background: var(--mat); }
.lightbox__frame img {
  display: block;
  max-width: 100%;
  max-height: 60vh;
  width: auto; height: auto;
  box-shadow: 0 0 0 1px rgba(31,25,10,0.1);
}
.lightbox__caption { margin-top: 26px; text-align: center; max-width: 600px; padding: 0 16px; }
.lightbox__title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 3vw, 30px);
  color: #f6f1dd;
  margin: 0;
}
.lightbox__meta {
  margin-top: 11px;
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600;
  color: var(--gold);
}
.lightbox__meta .dot { opacity: 0.5; margin: 0 8px; color: rgba(246,241,221,0.5); }
.lightbox__context {
  margin-top: 16px;
  font-size: clamp(14px, 1.3vw, 15.5px);
  line-height: 1.62;
  color: rgba(246,241,221,0.78);
}
.lb-btn {
  position: absolute;
  display: inline-flex; align-items: center; justify-content: center;
  width: 50px; height: 50px;
  border-radius: 999px;
  border: 1px solid rgba(246,241,221,0.32);
  background: rgba(20,16,10,0.5);
  color: rgba(246,241,221,0.9);
  cursor: pointer;
  z-index: 5;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.lb-btn:hover { background: rgba(40,32,20,0.85); border-color: var(--gold); transform: scale(1.06); }
.lb-btn svg { width: 21px; height: 21px; }
.lb-close { top: clamp(14px, 3vh, 26px); right: clamp(14px, 3vw, 26px); width: 44px; height: 44px; }
.lb-prev { left: clamp(8px, 3vw, 34px); top: 50%; transform: translateY(-50%); }
.lb-next { right: clamp(8px, 3vw, 34px); top: 50%; transform: translateY(-50%); }
.lb-prev:hover, .lb-next:hover { transform: translateY(-50%) scale(1.06); }
.lb-count {
  position: absolute;
  bottom: clamp(14px, 3vh, 24px); left: 50%; transform: translateX(-50%);
  font-size: 11px; letter-spacing: 0.3em; font-weight: 600;
  color: rgba(246,241,221,0.42);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .title-col { max-width: 620px; }
  .room__head { grid-template-columns: 1fr; gap: 20px; }
  .work, .work--flip {
    grid-template-columns: 1fr;
    gap: clamp(20px, 4vh, 34px);
  }
  .work--flip .work__art { order: 1; }
  .work--flip .work__entry { order: 2; }
  .entry__note { max-width: 56ch; }
  .people { grid-template-columns: 1fr; }
  .people__portrait { position: static; max-width: 320px; }
  .colophon__inner { grid-template-columns: 1fr; align-items: start; gap: 26px; }
}
@media (max-width: 620px) {
  body { background-attachment: scroll; }
  .foyer { padding-top: 104px; }
  .series, .duet { grid-template-columns: 1fr; }
  .coda { grid-template-columns: 1fr; gap: 4px; }
  .coda__quote { font-size: 54px; }
  .lb-btn { width: 44px; height: 44px; }
  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }
}

/* ============================================================
   COLLECTION AS LINKED VIEWS
   The gallery is no longer one long scroll: the entrance is the
   front page, and each room is reached on its own. Only the
   active view is in flow; the rest are removed.
   ============================================================ */
.view[hidden] { display: none; }
.collection[hidden] { display: none; }
/* a quiet header zone so the room rail clears the floating site nav */
.collection { padding-top: 84px; }
.collection .room { padding-top: clamp(38px, 6vh, 74px); }

/* ---- the rail: room navigation where it says
        AAANOW · The Collection ---- */
.railnav {
  position: sticky;
  top: 84px;
  z-index: 900;
  background: linear-gradient(180deg, rgba(242,239,228,0.92), rgba(242,239,228,0.74));
  backdrop-filter: blur(12px) saturate(1.05);
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
  border-bottom: 1px solid var(--hair);
}
.railnav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 60px;
  padding-top: 6px;
  padding-bottom: 6px;
}
.railnav__brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--clay);
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
}
.railnav__home { display: inline-flex; }
.railnav__home svg { width: 15px; height: 15px; opacity: 0.7; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.railnav__brand:hover .railnav__home svg { transform: translateX(-3px); }

.railnav__rooms {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.8vw, 24px);
  min-width: 0;
  flex: 0 1 auto;
}
.railnav__rooms a {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  text-decoration: none;
  color: var(--ink-mute);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(14px, 1.1vw, 16px);
  letter-spacing: -0.01em;
  white-space: nowrap;
  position: relative;
  padding-bottom: 3px;
  transition: color .2s ease;
}
.railnav__rooms a .rn {
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--ink-faint);
  transition: color .2s ease;
}
.railnav__rooms a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--clay);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s ease;
}
.railnav__rooms a:hover { color: var(--ink); }
.railnav__rooms a:hover::after { transform: scaleX(1); }
.railnav__rooms a.is-current { color: var(--clay); }
.railnav__rooms a.is-current .rn { color: var(--clay); }
.railnav__rooms a.is-current::after { transform: scaleX(1); }

/* ============================================================
   THE THRESHOLD: No. 01, the entrance work + room index
   ============================================================ */
.view--threshold { padding-top: clamp(34px, 6vh, 78px); padding-bottom: clamp(40px, 7vh, 90px); }
.threshold__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: clamp(36px, 5vw, 84px);
  align-items: center;
}
.threshold__art { position: relative; }
.threshold__art .art { width: 100%; }
.threshold__art::after {
  content: "";
  position: absolute;
  left: 7%; right: 7%; bottom: -20px;
  height: 24px;
  /* no blur filter here, ever (see .marquee::after) */
  background: radial-gradient(60% 100% at 50% 0%, rgba(31,25,10,0.18), transparent 70%);
  z-index: -1;
}
.threshold__intro .eyebrow { display: block; }
.threshold__title {
  margin: clamp(14px, 2vh, 20px) 0 0;
  font-family: var(--serif);
  font-weight: 360;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
}
.threshold__title + .entry__meta { margin-top: 14px; }
.threshold__note {
  margin: clamp(16px, 2.4vh, 22px) 0 0;
  max-width: 46ch;
  font-size: clamp(15px, 1.2vw, 16.5px);
  line-height: 1.64;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* ============================================================
   FOOTER: the four rooms, and the walk between them
   ============================================================ */
.gfoot {
  border-top: 1px solid var(--hair);
  margin-top: clamp(40px, 7vh, 90px);
  padding: clamp(28px, 5vh, 52px) 0 clamp(54px, 9vh, 104px);
}
.gfoot__inner { display: flex; flex-direction: column; gap: clamp(24px, 3.6vh, 38px); }
.gfoot__pager { display: flex; align-items: stretch; justify-content: space-between; gap: 16px; }
.gfoot__step {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: rgba(255,255,255,0.4);
  text-decoration: none;
  color: var(--ink);
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.gfoot__step:hover { border-color: var(--ink); transform: translateY(-1px); }
.gfoot__step--next { margin-left: auto; }
.gfoot__step svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--ink-mute); }
.gfoot__dir {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-faint);
  white-space: nowrap;
}
.gfoot__where {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--ink);
  white-space: nowrap;
}

/* ---- responsive ---- */
@media (max-width: 860px) {
  .threshold__grid { grid-template-columns: 1fr; gap: clamp(26px, 5vh, 44px); }
  .threshold__art { max-width: 520px; margin: 0 auto; }
  .threshold__art::after { display: none; }
}
@media (max-width: 760px) {
  .railnav__inner { min-height: 0; flex-direction: column; align-items: stretch; gap: 10px; padding-top: 12px; padding-bottom: 12px; }
  .railnav__rooms {
    gap: 18px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .railnav__rooms::-webkit-scrollbar { display: none; }
}
@media (max-width: 620px) {
  .gfoot__pager { flex-direction: column; }
  .gfoot__step { justify-content: center; }
  .gfoot__step--next { margin-left: 0; }
}

/* ============================================================
   ROOMS v2: five rooms, one picture at a time, a color each
   (this block intentionally overrides the earlier room layout)
   ============================================================ */
body { transition: background-color .6s ease, color .45s ease; }

/* per-room walls */
body[data-room="threshold"] {
  background-color: #382841;
  background-image: radial-gradient(ellipse 95% 60% at 50% -12%, #48344f 0%, transparent 58%);
  color: var(--paper);
}
body[data-room="sage"]     { background: linear-gradient(180deg, #e9efe3 0%, #dce5d5 100%); }
body[data-room="lavender"] { background: linear-gradient(180deg, #e7e8ed 0%, #d9dae2 100%); }
body[data-room="plate"]    { background: linear-gradient(180deg, #f6f1df 0%, #efe7d1 100%); }
body[data-room="clay"]     { background: linear-gradient(180deg, #f1e3d8 0%, #e9d5c6 100%); }
body[data-room="exit"]     { background: linear-gradient(180deg, #f5f0e1 0%, #efe7d5 100%); }

/* room shell */
.room { padding: clamp(28px, 5vh, 60px) 0 clamp(48px, 8vh, 90px); }
.room__inner { }

/* the room sign: number, name, a line of wall text, centered */
.room__head {
  display: block;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  border-bottom: 0;
  padding-bottom: clamp(20px, 3.4vh, 38px);
}
.room__num {
  display: block;
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--clay);
}
.room__name {
  margin: 10px 0 0;
  font-family: var(--serif);
  font-weight: 360;
  font-size: clamp(32px, 4.4vw, 54px);
  line-height: 1.03;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.room__intro {
  margin: clamp(12px, 2vh, 18px) auto 0;
  max-width: 560px;
  padding-bottom: 0;
  font-size: clamp(14.5px, 1.15vw, 16px);
  line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* the stage: one picture at a time, picture left, label right */
.stage { position: relative; margin-top: clamp(10px, 2.2vh, 22px); }
.plate { display: none; }
.plate.is-active {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(30px, 5vw, 80px);
  align-items: center;
}
.plate__art { position: relative; }
.plate__art .art { width: 100%; }
.plate__art .art--portrait { max-width: 360px; margin: 0 auto; }
.plate__art::after {
  content: "";
  position: absolute;
  left: 7%; right: 7%; bottom: -20px;
  height: 24px;
  /* no blur filter here, ever (see .marquee::after) */
  background: radial-gradient(60% 100% at 50% 0%, rgba(31,25,10,0.16), transparent 70%);
  z-index: -1;
}
.plate__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 360;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
}
.plate__meta {
  margin-top: 14px;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--clay);
}
.plate__meta .dot { color: var(--ink-faint); margin: 0 7px; }
.plate__note {
  margin: clamp(16px, 2.4vh, 22px) 0 0;
  max-width: 44ch;
  font-size: clamp(15px, 1.2vw, 16.5px);
  line-height: 1.64;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* in-room picture pager (only rendered when a room has >1 picture) */
.stage__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: clamp(26px, 4vh, 46px);
}
.stage__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: rgba(255,255,255,0.4);
  color: var(--ink);
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.stage__btn:hover { border-color: var(--ink); transform: translateY(-1px); }
.stage__btn svg { width: 20px; height: 20px; }
.stage__count {
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
  min-width: 86px;
  text-align: center;
}
.stage__slash { margin: 0 9px; color: var(--ink-faint); }

/* a room's closing wall quote (Room II) */
.room__coda {
  margin: clamp(34px, 5vh, 60px) auto 0;
  max-width: 760px;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 350;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: pretty;
}

/* the exit sign at the end of the last room */
.wayout {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 10px;
  margin: clamp(34px, 5vh, 58px) auto 0;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: rgba(255,255,255,0.4);
  color: var(--ink);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  transition: border-color .25s ease, transform .25s ease;
}
.wayout:hover { border-color: var(--ink); transform: translateY(-1px); }
.wayout svg { width: 15px; height: 15px; }

/* ---- dark aubergine: light type + a dark rail ---- */
body[data-room="threshold"] .railnav {
  background: linear-gradient(180deg, rgba(40,29,46,0.92), rgba(40,29,46,0.66));
  border-bottom-color: rgba(246,241,221,0.14);
}
body[data-room="threshold"] .railnav__brand { color: var(--gold); }
body[data-room="threshold"] .railnav__home svg { opacity: 0.8; }
body[data-room="threshold"] .railnav__rooms a { color: rgba(246,241,221,0.6); }
body[data-room="threshold"] .railnav__rooms a .rn { color: rgba(246,241,221,0.42); }
body[data-room="threshold"] .railnav__rooms a:hover { color: #f6f1dd; }
body[data-room="threshold"] .railnav__rooms a:hover::after,
body[data-room="threshold"] .railnav__rooms a.is-current::after { background: var(--gold); }
body[data-room="threshold"] .railnav__rooms a.is-current,
body[data-room="threshold"] .railnav__rooms a.is-current .rn { color: var(--gold); }
body[data-room="threshold"] .room__num,
body[data-room="threshold"] .plate__meta { color: var(--gold); }
body[data-room="threshold"] .plate__meta .dot { color: rgba(246,241,221,0.45); }
body[data-room="threshold"] .room__name,
body[data-room="threshold"] .plate__title { color: #f7f2e0; }
body[data-room="threshold"] .room__intro,
body[data-room="threshold"] .plate__note { color: rgba(246,241,221,0.74); }
body[data-room="threshold"] .stage__btn {
  color: #f6f1dd;
  border-color: rgba(246,241,221,0.3);
  background: rgba(246,241,221,0.06);
}
body[data-room="threshold"] .stage__btn:hover { border-color: var(--gold); background: rgba(246,241,221,0.12); }
body[data-room="threshold"] .stage__count { color: rgba(246,241,221,0.62); }
body[data-room="threshold"] .stage__slash { color: rgba(246,241,221,0.4); }

/* ============================================================
   THE WAY OUT: end of the exhibition (gift shop)
   ============================================================ */
.exit { padding: clamp(46px, 9vh, 120px) 0 clamp(60px, 10vh, 120px); }
.exit__inner { max-width: 780px; margin: 0 auto; text-align: center; }
.exit .eyebrow { display: block; }
.exit__title {
  margin: clamp(14px, 2vh, 22px) 0 0;
  font-family: var(--serif);
  font-weight: 360;
  font-size: clamp(42px, 6.4vw, 80px);
  line-height: 1.0;
  letter-spacing: -0.028em;
  color: var(--ink);
  text-wrap: balance;
}
.exit__sub {
  margin: clamp(18px, 2.6vh, 28px) auto 0;
  max-width: 560px;
  font-size: clamp(15.5px, 1.25vw, 17px);
  line-height: 1.62;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.shop { margin-top: clamp(36px, 5.5vh, 60px); }
.shop__label {
  display: block;
  text-align: center;
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-faint);
  margin-bottom: clamp(16px, 2.2vh, 22px);
}
.shop__items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.6vw, 18px);
  text-align: left;
}
.shop__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(18px, 2vw, 26px);
  border-radius: 14px;
  border: 1px solid var(--hair);
  background: rgba(255,255,255,0.42);
  text-decoration: none;
  color: var(--ink);
  transition: border-color .25s ease, transform .25s ease, background .25s ease;
}
.shop__item:hover { border-color: var(--ink); transform: translateY(-2px); background: rgba(255,255,255,0.6); }
.shop__name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.7vw, 21px);
  color: var(--ink);
  letter-spacing: -0.01em;
}
.shop__desc { font-size: 12.5px; letter-spacing: 0.02em; color: var(--ink-mute); }
.shop__item svg { width: 16px; height: 16px; color: var(--ink-faint); margin-top: 8px; transition: transform .3s ease, color .25s ease; }
.shop__item:hover svg { transform: translateX(4px); color: var(--clay); }
.exit__foot {
  margin: clamp(32px, 5vh, 56px) 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.exit__back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}
.exit__back svg { width: 16px; height: 16px; transition: transform .3s ease; }
.exit__back:hover svg { transform: translateX(-3px); }
.exit__aside {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-faint);
}

/* ============================================================
   GILT FRAMES: only the Monet-type paintings, only in the Gallery.
   A small set of real period frames, applied as 9-slice border-images
   so the works hang in varied gilded mouldings, like a real collection.
   System and people works keep the plain museum frame.
   ============================================================ */
.art--gilt .art__frame {
  background: none;
  padding: 0;
  border-radius: 0;
  border-style: solid;
  /* Until the moulding PNG arrives, the border must paint as nothing at
     all: without this the browser draws the fallback solid border in
     currentColor, a heavy outline around every frame on first load. */
  border-color: transparent;
  border-image-repeat: round;
  box-shadow: none;
  /* No filter here, ever. filter: drop-shadow() promotes the frame to its
     own rasterization region; on wide-gamut displays that region composites
     the wall a touch lighter than the page around it, drawing a faint
     rectangle around every gilt frame (and re-rasterizing on hover read as
     a brightness flash). The wall shadow is cast by the ::before underlay
     below instead, which paints in the normal flow. */
}
.art--gilt .art__frame::after { display: none; } /* drop the under-glass sheen */
/* The shadow the moulding casts on the wall comes from the shared
   .art__frame::before gradient underlay (and the deeper .featured variant on
   the entrance wall). No box-shadow version of it may return: the blurred
   shadow's clipped rasterization rectangle was visible as a faint border
   around every gilt frame on the entrance wall. */
.art--gilt .art__mat {
  position: relative;
  padding: 0;
  background: none;
  box-shadow: none;
}
.art--gilt .art__img { box-shadow: none; }
/* the canvas sits recessed in the rabbet */
.art--gilt .art__mat::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 16px rgba(0,0,0,0.32), inset 0 3px 7px rgba(0,0,0,0.4);
}

/* the individual frames, varied across the works */
.frame-ornate .art__frame {
  border-width: clamp(34px, 5.2vw, 62px);
  border-image-source: url(assets/frame-ornate.png?v=3);
  border-image-slice: 98 90 92 93;
}
.frame-band .art__frame {
  border-width: clamp(20px, 3vw, 40px);
  border-image-source: url(assets/frame-band.png?v=3);
  border-image-slice: 40 45 42 45;
}
.frame-corner .art__frame {
  border-width: clamp(30px, 4.6vw, 56px);
  border-image-source: url(assets/frame-corner.png?v=3);
  border-image-slice: 74 83 77 81;
}
.frame-bevel .art__frame {
  border-width: clamp(20px, 3vw, 40px);
  border-image-source: url(assets/frame-bevel.png?v=3);
  border-image-slice: 45 47 48 48;
  border-image-repeat: stretch;
}

/* ---- responsive (v2) ---- */
@media (max-width: 860px) {
  .plate.is-active { grid-template-columns: 1fr; gap: clamp(22px, 5vh, 40px); }
  .plate__art { max-width: 520px; margin: 0 auto; }
  .plate__art::after { display: none; }
  .plate__label { text-align: center; }
  .plate__note { margin-left: auto; margin-right: auto; }
  .shop__items { grid-template-columns: 1fr; }
}