/* ============================================================
   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); }

/* single link back to the main website (the gallery carries no site menu) */
.backsite {
  position: fixed;
  top: clamp(18px, 3vh, 30px);
  right: clamp(22px, 5vw, 64px);
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 2px;
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(246, 241, 221, 0.82);
  text-decoration: none;
  transition: color 200ms ease;
}
.backsite:hover { color: #f6f1dd; }
.backsite__arrow svg { display: block; width: 15px; height: 15px; }
/* the entrance only: inside the rooms the rail carries the way back */
body:has(#collection:not([hidden])) .backsite { display: none; }

/* 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: #08211f;
  /* 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-teal.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;
}

/* a quiet holding note, not a call to action: bare text, no pill, no arrow */
.enter {
  position: relative;
  margin-top: clamp(22px, 3vh, 34px);
  display: inline-block;
  color: rgba(244,234,212,0.6);
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 400;
  text-decoration: none;
}
.enter:hover { transition: color .4s ease; }
.enter::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 1px;
  background: rgba(232,197,107,0.55);
  transition: width .45s cubic-bezier(.22,.61,.36,1);
}
.enter:hover { color: rgba(244,234,212,0.82); }
.enter:hover::after { width: 100%; }
.enter__arrow { display: none; }

/* ---- 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);
  }
}

/* ============================================================
   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);
}
/* 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;
}
@media (hover: none) { .art__zoom { display: none; } }

/* ============================================================
   ROOMS
   ============================================================ */
.room { padding: clamp(54px, 9vh, 118px) 0; }

.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__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;
}

/* ============================================================
   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); }

/* ---- 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__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;
}

/* 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::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;
}

/* ---- 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__name,
body[data-room="threshold"] .plate__title { color: #f7f2e0; }

/* ============================================================
   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; }
}


/* ============================================================
   EMPTY ROOMS: the collection is being curated. Each frame hangs
   empty (the wall shows through the rabbet, no new colour), and the
   room carries one text, set differently in each room.
   ============================================================ */
@font-face {
  font-family: "Funnel Display";
  src: url(assets/fonts/FunnelDisplay.woff2) format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Funnel Sans";
  src: url(assets/fonts/FunnelSans-Italic.woff2) format("woff2");
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}
.art--empty { cursor: default; }
.art--empty .art__canvas { aspect-ratio: 16 / 10; background: none; }

.roomtext { margin: 0; max-width: 46ch; text-wrap: pretty; }
/* I: Fraunces, set large and light */
.roomtext--1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(19px, 1.9vw, 26px);
  line-height: 1.42;
  letter-spacing: -0.005em;
}
/* II: Funnel Display, medium weight, tighter measure */
.roomtext--2 {
  font-family: "Funnel Display", var(--sans);
  font-weight: 400;
  font-size: clamp(17px, 1.55vw, 21px);
  line-height: 1.55;
  max-width: 40ch;
}
/* III: system sans, small and wide */
.roomtext--3 {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(13.5px, 1.1vw, 15px);
  line-height: 1.9;
  letter-spacing: 0.055em;
}
/* IV: Funnel Sans italic */
.roomtext--4 {
  font-family: "Funnel Sans", var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 1.75vw, 24px);
  line-height: 1.5;
}
/* V: Fraunces italic, small, narrow column */
.roomtext--5 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 350;
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.75;
  max-width: 34ch;
}
@media (max-width: 860px) { .roomtext { margin-left: auto; margin-right: auto; } }