/* North by North West — site.css
   Generated by concatenating the source partials in this order (one render-blocking request):
   fonts.css base.css layout.css components.css rooms.css viewer.css responsive.css
   Regenerate after editing a partial:
   cat css/fonts.css css/base.css css/layout.css css/components.css css/rooms.css css/viewer.css css/responsive.css > css/site.css
   (The header comment above is optional.) */

/* ---- fonts.css ---- */
/* Self-hosted variable fonts from Google Fonts (SIL Open Font License 1.1). Latin subset. */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300 400;font-display:swap;src:url('../assets/fonts/newsreader-roman-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:300 400;font-display:swap;src:url('../assets/fonts/newsreader-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 500;font-display:swap;src:url('../assets/fonts/hanken-grotesk-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---- base.css ---- */
/* ==========================================================================
   North by North West — base: tokens, reset, typography primitives
   ========================================================================== */
:root {
  /* Materials */
  --paper: #F2EEE6;        /* Room I, entrance */
  --paper-2: #E4DFD5;      /* image placeholder on paper */
  --stone: #DDD6C9;        /* Room II */
  --stone-2: #D3CCBE;      /* image placeholder on stone */
  --ink: #22211E;
  --muted: #6B665D;        /* 5.0:1 on paper */
  --muted-stone: #57534B;  /* 5.2:1 on stone */
  --rule: #D8D1C4;
  --rule-stone: #C4BBAB;
  --earth: #7A5E45;        /* Room I accent — small labels only */
  --mineral: #445B5A;      /* Room II accent — small labels only */
  --moss: #5E6A4E;         /* entrance / info accent */
  --night: #171614;        /* viewer */
  --night-ink: #EDE8DF;
  --night-muted: #ABA599;

  /* Type */
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Space & motion */
  --pad: clamp(20px, 4.5vw, 64px);
  --nav: 56px;
  --max: 1400px;
  --ease: cubic-bezier(.65, 0, .25, 1);
  --ease-out: cubic-bezier(.2, .6, .2, 1);
  --svh: 1vh;
}
@supports (height: 1svh) { :root { --svh: 1svh; } }

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
  scrollbar-gutter: stable;
  background: var(--paper);
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .6s ease;
}
html[data-view="pip"] body { background: var(--stone); }
img, picture, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--moss); }
::selection { background: #DAD3C4; }
h1, h2, h3, p, blockquote, dl, dd, figure { margin: 0; }
[hidden] { display: none !important; }
[tabindex="-1"]:focus { outline: none; }

:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -100px; z-index: 200;
  padding: 12px 16px; background: var(--ink); color: var(--paper);
}
.skip:focus { top: 12px; color: var(--paper); }

/* Typography primitives */
.label {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.label--accent { color: var(--moss); }
.display {
  font-family: var(--serif);
  font-weight: 300;
  line-height: .92;
  letter-spacing: -.03em;
  font-variation-settings: 'opsz' 72;
  text-wrap: balance;
}
.display span { display: inline-block; }
.display--xl { font-size: clamp(40px, 4.6vw, 84px); line-height: .95; letter-spacing: -.025em; }
.display--room { font-size: clamp(48px, 6.6vw, 120px); line-height: .9; }
.display--room-xl { font-size: clamp(52px, 10vw, 184px); line-height: .88; letter-spacing: -.035em; }
.display--bridge { font-size: clamp(40px, 5.6vw, 96px); letter-spacing: -.025em; }
.display--drawer { font-size: clamp(36px, 5vw, 52px); line-height: 1; letter-spacing: -.02em; }

.btn-text {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 0 4px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink);
}
.btn-text__x { font-size: 20px; letter-spacing: 0; line-height: 1; }
.btn-text--light { color: var(--night-ink); }
.btn-text--light:focus-visible { outline-color: var(--night-ink); }
.textlink {
  font: inherit; color: var(--ink); background: none; border: 0; padding: 0;
  border-bottom: 1px solid var(--rule-stone); cursor: zoom-in; text-align: left;
}
.textlink em { font-family: var(--serif); font-size: 14.5px; }

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

/* ---- layout.css ---- */
/* ==========================================================================
   Layout: navigation, views, entrance split, intro, footer
   ========================================================================== */

/* Views — without JS everything is shown in sequence (crawlable, usable) */
.js .view { display: none; }
.js[data-view="entrance"] .view--entrance,
.js[data-view="rebecca"] .room--rebecca,
.js[data-view="pip"] .room--pip { display: block; }

/* Navigation ------------------------------------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 70;
  height: var(--nav);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 var(--pad);
  background: rgba(242, 238, 230, .88);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background-color .6s ease;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
}
html[data-view="pip"] .nav { background: rgba(221, 214, 201, .9); }
.js[data-view="entrance"] .nav { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav__brand {
  display: flex; gap: 0 .5em; padding: 10px 0; line-height: 1.25; white-space: nowrap;
  color: var(--ink);
  transition: opacity .6s ease, visibility .6s;
}
.nav__brand:hover { color: var(--ink); }
/* The small exhibition mark is not shown at the entrance — the central title carries it */
.js[data-view="entrance"] .nav__brand { opacity: 0; visibility: hidden; }
.nav__links { display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); margin-left: auto; }
.nav__link {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 2px 0 0; background: none; border: 0; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: border-color .6s ease;
}
.nav__link:hover { color: var(--ink); border-bottom-color: var(--rule-stone); }
.nav__link[aria-current="page"],
.nav__link[aria-expanded="true"] { border-bottom-color: var(--ink); }

/* Entrance: two worlds --------------------------------------------------- */
.split {
  position: relative;
  display: flex;
  height: 100vh; height: calc(100 * var(--svh));
  min-height: 560px;
}
.split__title {
  position: absolute; inset: 0 0 auto; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: calc(var(--nav) + clamp(18px, 4vh, 44px)) 20px 8px;
  text-align: center;
  pointer-events: none;
}
.split__title h1 { animation: nnw-rise 1.4s var(--ease-out) both; }
.split__title .label { color: var(--muted-stone); animation: nnw-fade 1.2s ease .5s both; }

.door {
  position: relative; min-width: 0;
  flex: 1 1 0;
  display: flex; flex-direction: column;
  padding: calc(var(--nav) + clamp(120px, 19vh, 190px)) clamp(24px, 3.5vw, 56px) clamp(24px, 4vh, 44px);
  color: var(--ink);
  transition: flex-grow 1.1s var(--ease);
}
.door:hover { color: var(--ink); }
.door:focus-visible { outline-offset: -10px; }
.door--r { background: var(--paper); animation: nnw-seam-l 1.5s var(--ease) .15s both; }
.door--p { background: var(--stone); animation: nnw-seam-r 1.5s var(--ease) .15s both; }
.door__art {
  flex: 1 1 0; min-height: 0;
  display: flex; align-items: center; justify-content: center;
}
.door__art picture { display: contents; }
.door__art img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  background: var(--paper-2);
  transition: transform 1.4s var(--ease-out);
}
.door--p .door__art img { width: 100%; background: var(--stone-2); }
.door__foot {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 14px 24px; margin-top: clamp(20px, 3vh, 32px);
  transition: opacity .8s ease;
}
.door__text { display: flex; flex-direction: column; gap: 8px; }
.door__text .label { color: var(--muted-stone); }
.door__name {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(32px, 3.4vw, 60px); line-height: .95; letter-spacing: -.02em;
}
.door__sub { font-size: 12.5px; color: var(--muted-stone); }
.door__sub em { font-family: var(--serif); font-size: 14.5px; }
.door__enter {
  display: inline-flex; align-items: center; gap: 12px; padding: 10px 0;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
}
.door__line { display: block; width: 32px; height: 1px; background: currentColor; transition: width .9s var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  .split:has(.door--r:hover) .door--r, .split:has(.door--p:hover) .door--p { flex-grow: 1.22; }
  .split:has(.door--r:hover) .door--p, .split:has(.door--p:hover) .door--r { flex-grow: .78; }
  .split:has(.door--r:hover) .door--r img, .split:has(.door--p:hover) .door--p img { transform: scale(1.025); }
  .split:has(.door--r:hover) .door--p img, .split:has(.door--p:hover) .door--r img { transform: scale(.975); }
  .split:has(.door--r:hover) .door--p .door__foot, .split:has(.door--p:hover) .door--r .door__foot { opacity: .45; }
  .door:hover .door__line { width: 72px; }
}
.door:focus-visible .door__line { width: 72px; }

/* Exhibition introduction ------------------------------------------------ */
.intro { padding: clamp(72px, 13vh, 150px) var(--pad) clamp(64px, 10vh, 120px); }
.intro__inner { max-width: var(--max); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 20px clamp(32px, 6vw, 120px); }
.intro__label { flex: 1 1 160px; padding-top: .8em; }
.intro__body { flex: 4 1 480px; display: flex; flex-direction: column; gap: clamp(40px, 7vh, 72px); }
.lede {
  max-width: 31em;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(22px, 2.3vw, 36px); line-height: 1.36; letter-spacing: -.005em;
  text-wrap: pretty;
}
.intro__rooms { display: flex; flex-wrap: wrap; gap: 12px clamp(32px, 5vw, 72px); border-top: 1px solid var(--rule); padding-top: 20px; }
.roomlink { display: inline-flex; align-items: baseline; gap: 14px; min-height: 44px; padding: 8px 0; }
.roomlink__no { font-size: 11px; letter-spacing: .18em; color: var(--muted-stone); }
.roomlink__name { font-family: var(--serif); font-size: 24px; }

/* Footer ----------------------------------------------------------------- */
.footer { padding: 0 var(--pad) 32px; background: var(--paper); }
html[data-view="rebecca"] .footer { background: var(--stone); }
.footer__inner {
  max-width: var(--max); margin: 0 auto;
  border-top: 1px solid var(--rule); padding-top: 20px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 40px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; line-height: 1.7; color: var(--muted-stone);
}
html[data-view="rebecca"] .footer__inner { border-top-color: var(--rule-stone); }
.footer__brand { color: var(--ink); }
.footer a { color: var(--muted-stone); }

@keyframes nnw-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes nnw-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nnw-seam-l { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes nnw-seam-r { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---- components.css ---- */
/* ==========================================================================
   Components: artwork figure, captions, groups, strips, walls, reveal
   ========================================================================== */

/* Artwork ---------------------------------------------------------------- */
.work { min-width: 0; }
.work picture { display: block; }
.work__open {
  display: block; width: 100%;
  padding: 0; margin: 0; border: 0; background: none;
  cursor: zoom-in; overflow: hidden;
}
.work__open:focus-visible { outline-offset: 6px; }
.work__open img {
  display: block; width: 100%; height: auto;
  background: var(--paper-2);
  transition: transform 1.6s var(--ease-out);
}
.room--pip .work__open img { background: var(--stone-2); }
@media (hover: hover) and (pointer: fine) {
  .work__open:hover img { transform: scale(1.012); }
}

/* Caption ---------------------------------------------------------------- */
.cap {
  display: flex; gap: 14px; align-items: baseline;
  margin-top: 14px;
  font-size: 12.5px; line-height: 1.5; color: var(--muted);
}
.room--pip .cap { color: var(--muted-stone); }
.cap__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cap__title { font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.3; color: var(--ink); }

/* Flow & groups ---------------------------------------------------------- */
.flow {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(72px, 12vh, 140px) var(--pad) clamp(64px, 10vh, 120px);
  display: flex; flex-direction: column; gap: clamp(64px, 11vh, 128px);
}
.flow--pip { gap: clamp(72px, 13vh, 150px); padding-bottom: clamp(72px, 12vh, 140px); }
.flow--close { padding-top: clamp(72px, 12vh, 140px); padding-bottom: clamp(72px, 12vh, 140px); }

.group { display: flex; flex-wrap: wrap; gap: clamp(32px, 4vw, 72px); }
.group--end { align-items: flex-end; }
.group > .work { flex: var(--grow, var(--ar)) 1 0; min-width: 260px; }
.group--right { width: 100%; max-width: 1240px; margin-left: auto; gap: clamp(32px, 5vw, 96px); }
.work--drop { margin-bottom: max(0px, calc(8vw - 40px)); }
.group > .work--small { flex: 0 1 280px; min-width: 200px; max-width: 300px; }

.strip {
  width: 100%; max-width: 1180px; margin: 0 auto; padding: 10px;
  display: flex; gap: clamp(20px, 3vw, 48px);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.strip::-webkit-scrollbar { display: none; }
.strip > .work { flex: 1 0 clamp(220px, 24vw, 360px); scroll-snap-align: start; }

.work--capped { width: min(100%, calc(80 * var(--svh) * var(--ar))); margin: 0 auto; }
.work--side {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center;
  gap: 14px clamp(24px, 3vw, 48px);
}
.work--side .depth { flex: 0 1 auto; width: min(100%, 860px); }
.work--side .cap { flex: 0 1 220px; margin-top: 0; }
.depth { will-change: transform; }

/* Horizontal wall --------------------------------------------------------
   Default (mobile, reduced motion, no JS): a native, swipeable row.
   .is-pinned (desktop + GSAP): the stage is pinned and the track is scrubbed. */
.wall { position: relative; }
.wall__stage {
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(20px, 3.5vh, 36px);
  padding: 24px 0;
}
.wall.is-pinned .wall__stage {
  height: 100vh; height: calc(100 * var(--svh));
  padding: calc(var(--nav) + 2vh) 0 2vh;
  overflow: hidden;
}
.wall__head {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 0 var(--pad);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.room--pip .wall__head { color: var(--muted-stone); }
.wall__progress { display: inline-flex; align-items: center; gap: 14px; }
.wall__bar { display: block; width: clamp(60px, 10vw, 140px); height: 1px; background: var(--rule); overflow: hidden; }
.room--pip .wall__bar { background: var(--rule-stone); }
.wall__bar > span { display: block; height: 100%; background: var(--earth); transform-origin: left; transform: scaleX(0); }
.room--pip .wall__bar > span { background: var(--mineral); }
.wall__scroller {
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.wall__scroller::-webkit-scrollbar { display: none; }
.wall__scroller:focus-visible { outline-offset: -2px; }
.wall.is-pinned .wall__scroller { overflow: visible; scroll-snap-type: none; }
.wall__track {
  display: flex; align-items: flex-end;
  gap: clamp(36px, 5vw, 96px);
  width: max-content;
  padding: 10px var(--pad);
}
.wall--wide .wall__track { gap: clamp(48px, 8vw, 160px); padding-inline: clamp(20px, 8vw, 160px); }
.wall.is-pinned .wall__track { will-change: transform; }
.work--wall {
  flex: 0 0 auto; display: flex; flex-direction: column; scroll-snap-align: center;
  /* --h = share of viewport height; derived from each work's physical size */
  --wall-h: clamp(150px, calc(var(--h) * var(--svh)), calc(var(--h) * 11.5px));
}
.work--wall .work__open { width: auto; }
.work--wall img {
  height: var(--wall-h);
  width: auto; max-width: none;
  aspect-ratio: var(--ar);
}
.work--wall .cap { width: 0; min-width: 100%; }

/* Space reserved before js/render.js fills a slot (prevents layout shift).
   --ar is written on every slot in index.html. */
.work:empty { aspect-ratio: var(--ar); }
.work--wall:empty { height: var(--wall-h); }

/* Reveal (applied by JS only to elements below the fold) ----------------- */
.rv .work__open { clip-path: inset(100% 0 0 0); transition: clip-path 1.5s var(--ease) calc(var(--i, 0) * 140ms); }
.rv .cap { opacity: 0; transform: translateY(8px); transition: opacity 1s ease, transform 1.2s var(--ease-out); transition-delay: calc(500ms + var(--i, 0) * 140ms); }
.rv.rv--in .work__open { clip-path: inset(0 0 0 0); }
.rv.rv--in .cap { opacity: 1; transform: none; }
.rv-text { opacity: 0; transform: translateY(22px); transition: opacity 1.3s ease, transform 1.5s var(--ease-out); }
.rv-text.rv--in { opacity: 1; transform: none; }

/* ---- rooms.css ---- */
/* ==========================================================================
   Rooms: Room I (paper, earth) and Room II (stone, mineral), bridges, curtain
   ========================================================================== */
.room--rebecca { background: var(--paper); }
.room--pip { background: var(--stone); }

/* Room I introduction — wall text beside the first work */
.room__intro--r {
  max-width: 1528px; margin: 0 auto;
  min-height: 100vh; min-height: calc(100 * var(--svh));
  padding: calc(var(--nav) + clamp(24px, 5vh, 56px)) var(--pad) clamp(40px, 7vh, 80px);
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 36px clamp(32px, 5vw, 96px);
}
.room__wall-text { flex: 1 1 340px; display: flex; flex-direction: column; gap: clamp(20px, 3.5vh, 36px); }
.room__wall-text > .label:first-child { color: var(--earth); }
.work--lead { flex: 0 1 auto; width: min(100%, calc(66 * var(--svh) * var(--ar))); }

/* Room II introduction — larger title, spatial */
.room__intro--p {
  max-width: 1528px; margin: 0 auto;
  padding: calc(var(--nav) + clamp(28px, 7vh, 80px)) var(--pad) clamp(28px, 5vh, 56px);
  display: flex; flex-direction: column; gap: clamp(24px, 4vh, 44px);
}
.room__row { display: flex; justify-content: space-between; gap: 16px; }
.room__row.label { color: var(--muted-stone); }
.room__row.label span:first-child { color: var(--mineral); }
.room__row--text { flex-wrap: wrap; align-items: flex-end; gap: 28px clamp(32px, 6vw, 120px); }
.room__row--text > * { flex: 1 1 320px; }

.epigraph {
  max-width: 22em;
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(20px, 1.7vw, 26px); line-height: 1.35;
}
.room--pip .epigraph { max-width: 24em; font-size: clamp(20px, 1.8vw, 28px); }
.facts {
  max-width: 34em;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 20px;
  font-size: 12.5px; line-height: 1.5; color: var(--muted);
}
.room--pip .facts { color: var(--muted-stone); }

/* Bridges between rooms */
.bridge--to-pip { background: var(--stone); }
.bridge--to-rebecca { background: var(--paper); }
.bridge__inner {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(56px, 10vh, 110px) var(--pad);
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 40px;
  color: var(--ink);
}
.bridge__inner:hover { color: var(--ink); }
.bridge__text { display: flex; flex-direction: column; gap: 14px; color: var(--ink); }
.bridge--to-pip .label { color: var(--mineral); }
.bridge--to-rebecca .label { color: var(--earth); }
.bridge__cta {
  display: inline-flex; align-items: center; gap: 14px; min-height: 44px;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink);
}
.bridge__inner .display { transition: transform 1.1s var(--ease-out); }
@media (hover: hover) { a.bridge__inner:hover .display, a.bridge__text:hover .display { transform: translateX(10px); } }

/* Room transition curtain */
.curtain {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper);
  visibility: hidden; opacity: 0;
  pointer-events: none;
}
.curtain.is-active { pointer-events: auto; }
.curtain__text { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 0 20px; text-align: center; }
.curtain__text .label { color: var(--muted-stone); }
.curtain__name {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(44px, 7vw, 120px); line-height: .95; letter-spacing: -.03em;
}

/* ---- viewer.css ---- */
/* ==========================================================================
   Artwork viewer + Information drawer
   ========================================================================== */
.viewer {
  position: fixed; inset: 0; z-index: 100;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--night); color: var(--night-ink);
  opacity: 0; transition: opacity .5s ease;
  touch-action: pan-y;
}
.viewer.is-open { opacity: 1; }
.viewer__bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px clamp(16px, 3vw, 40px) 6px clamp(16px, 6vw, 120px);
}
.viewer__count { font-size: 11px; letter-spacing: .18em; font-variant-numeric: tabular-nums; color: var(--night-muted); }
.viewer__stage {
  min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 clamp(12px, 6vw, 120px);
}
.viewer__stage picture { display: contents; }
.viewer__stage img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain;
  opacity: 0; transform: scale(.985);
  transition: opacity .6s ease, transform 1s var(--ease-out);
}
.viewer__stage img.is-loaded { opacity: 1; transform: none; }
.viewer__foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
  gap: 12px 32px;
  padding: 16px clamp(16px, 6vw, 120px) max(18px, env(safe-area-inset-bottom));
}
.viewer__cap { display: flex; flex-direction: column; gap: 4px; min-width: 0; transition: opacity .5s ease .1s; }
.viewer.is-loading .viewer__cap { opacity: 0; }
.viewer__artist { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--night-muted); }
.viewer__title { font-family: var(--serif); font-style: italic; font-size: clamp(19px, 1.8vw, 24px); line-height: 1.25; }
.viewer__meta { font-size: 13px; color: var(--night-muted); }
.viewer__meta:empty { display: none; }
.viewer__nav { display: flex; gap: 28px; }

/* Information drawer */
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(34, 33, 30, .28);
  opacity: 0; transition: opacity .6s ease;
}
.drawer-backdrop.is-open { opacity: 1; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 96;
  width: min(560px, 100vw);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--paper);
  padding: 0 clamp(24px, 5vw, 56px) 40px;
  display: flex; flex-direction: column; gap: 28px;
  transform: translateX(100%);
  transition: transform .8s var(--ease);
}
.drawer.is-open { transform: none; }
.drawer__bar {
  position: sticky; top: 0; z-index: 1;
  display: flex; justify-content: space-between; align-items: center;
  min-height: 64px; background: var(--paper);
  border-bottom: 1px solid var(--rule);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
}
.drawer__brand { color: var(--ink); }
.drawer__lede { font-family: var(--serif); font-weight: 300; font-size: 19px; line-height: 1.5; text-wrap: pretty; }
.drawer__list { display: flex; flex-direction: column; gap: 22px; }
.drawer__list > div {
  border-top: 1px solid var(--rule); padding-top: 14px;
  display: grid; grid-template-columns: minmax(110px, auto) minmax(0, 1fr); gap: 6px 20px;
}
.drawer__list dt { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding-top: 4px; }
.drawer__list dd { display: flex; flex-direction: column; font-family: var(--serif); font-size: 19px; line-height: 1.45; }
.drawer__note { font-family: var(--sans); font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.drawer__todo { font-style: italic; color: var(--muted); }

/* ---- responsive.css ---- */
/* ==========================================================================
   Responsive — tablet and mobile are composed, not shrunk
   ========================================================================== */

/* ≤ 1024: slightly tighter rooms */
@media (max-width: 1024px) {
  .room__intro--r { min-height: 0; }
  .work--lead { width: min(100%, calc(60 * var(--svh) * var(--ar))); }
}

/* ≤ 820: stacked entrance, native swipe walls, compact nav */
@media (max-width: 820px) {
  .nav { gap: 12px; }
  .nav__brand { flex-direction: column; gap: 0; font-size: 10px; letter-spacing: .14em; }
  .nav__links { gap: 20px; }

  .split { flex-direction: column; height: auto; min-height: 0; }
  .split__title {
    position: relative; inset: auto;
    padding: calc(var(--nav) + 28px) 20px 24px;
    background: var(--paper);
  }
  .door { flex: none; padding: 24px 20px 36px; }
  .door--r { animation: none; }
  .door--p { animation: none; padding-top: 40px; }
  .door__art { flex: none; }
  .door__art img { width: 100%; max-height: none; }
  .door__foot { margin-top: 18px; }
  .door__line { width: 48px; }

  .intro { padding-top: 64px; }

  .room__intro--r { padding-top: calc(var(--nav) + 28px); gap: 32px; }
  .work--lead { width: 100%; }
  .room__intro--p { padding-top: calc(var(--nav) + 32px); }

  .flow { gap: 64px; padding-top: 56px; padding-bottom: 64px; }
  .flow--pip { gap: 72px; }
  .group { gap: 48px; }
  .group > .work { min-width: 100%; }
  .group > .work--small { min-width: 0; flex: 0 1 auto; width: 68%; max-width: 300px; }
  .work--drop { margin-bottom: 0; }
  .group--right { gap: 48px; }
  .strip > .work { flex-basis: 64vw; }
  .work--side .cap { flex: 1 1 100%; }

  .wall__stage { padding: 16px 0 8px; gap: 18px; }
  /* Each work fits the screen; relative scale (--h, from physical size) is kept */
  .work--wall {
    --wall-h: min(
      calc(var(--h) * .82 * var(--svh)),
      calc(var(--h) * 1.45vw / var(--ar)),
      calc(86vw / var(--ar))
    );
  }
  .room__row.label { flex-wrap: wrap; gap: 4px 16px; }
  .wall--wide .wall__track { padding-inline: var(--pad); gap: 40px; }

  .bridge__inner { padding-top: 56px; padding-bottom: 56px; }
  .drawer__list > div { grid-template-columns: 1fr; }
}

/* ≤ 400: smallest phones */
@media (max-width: 400px) {
  .nav__links { gap: 16px; }
  .display--room-xl { font-size: 48px; }
  .viewer__nav { gap: 16px; width: 100%; justify-content: space-between; }
}

/* Short landscape screens: keep the split usable */
@media (min-width: 821px) and (max-height: 640px) {
  .door { padding-top: calc(var(--nav) + 104px); }
  .door__name { font-size: 32px; }
}

/* Portrait tablets (821–1024): the two worlds stack, as on phones, so neither
   artwork is stranded in a tall narrow column. Room walls stay pinned. */
@media (min-width: 821px) and (max-width: 1024px) and (orientation: portrait) {
  .split { flex-direction: column; height: auto; min-height: 0; }
  .split__title {
    position: relative; inset: auto;
    padding: calc(var(--nav) + 48px) var(--pad) 36px;
    background: var(--paper);
  }
  .door { flex: none; padding: 40px var(--pad) 56px; }
  .door--r, .door--p { animation: none; }
  .door__art { flex: none; }
  .door__art img { width: 100%; max-height: none; }
  .door__foot { margin-top: 24px; }
  /* pinned walls: keep each work within the screen width */
  .work--wall {
    --wall-h: min(
      clamp(150px, calc(var(--h) * var(--svh)), calc(var(--h) * 11.5px)),
      calc(var(--h) * 1.25vw / var(--ar)),
      calc(84vw / var(--ar))
    );
  }
}

/* Stacked entrance: the fixed nav needs its paper ground once content scrolls under it */
@media (max-width: 820px), (max-width: 1024px) and (orientation: portrait) {
  .js[data-view="entrance"] .nav {
    background: rgba(242, 238, 230, .88);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
}

/* Touch: comfortable targets without changing the visual layout */
@media (max-width: 820px), (pointer: coarse) {
  .nav__brand { min-height: 44px; justify-content: center; }
  .nav__link { padding-inline: 8px; margin-inline: -8px; }
  .footer a { display: inline-flex; align-items: center; min-height: 44px; }
  .textlink { display: inline-block; padding-block: 11px; }
  .roomlink { min-height: 48px; }
}