/* exhibition.css — the exhibition's two faces, in the approved prototype languages (the NORM):
   the DOOR = gallery/door.html (near-black facade, glowing windows, the quiet ask);
   the GALLERY = gallery/room.html (museum hang: one work per viewport, image untouched,
   text in the dark margin). Laws in SPEC: EX-DOOR, EX-HANG, INV-1/25/27/29/30/31. */

:root{ --ex-tms:1050ms; }              /* the door→gallery crossing, from config (INV-28) */

body{ min-height:100vh; overflow-x:hidden; background:rgb(var(--ground,12,11,10));
  transition:background 1.1s var(--ease); }

/* JS-on: the crawlable static index never paints (FOUC guard, INV-25); the live face owns the page */
html.js #ex-static{ display:none; }
body.ex-live #ex-static{ display:none; }
body.ex-live .ex-head{ display:none; }           /* the door/hang carry their own marks */
body:not(.ex-live) .ex-stage{ display:none; }
html.ex-walk{ scroll-snap-type:y mandatory; scroll-behavior:smooth; }

/* ================= THE DOOR (door.html verbatim language) ================= */
#ex-door{ position:fixed; inset:0; z-index:100; display:flex; flex-direction:column;
  align-items:center; justify-content:center; background:var(--bg-deeper,#0a0908); }
#ex-door[hidden]{ display:none; }
.exd-wm{ position:absolute; top:7vh; left:0; right:0; text-align:center; font-weight:200;
  letter-spacing:.44em; font-size:clamp(15px,2vw,20px); color:var(--muted); text-indent:.44em; }
.exd-ask{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--faint); margin-bottom:5vh; opacity:0; animation:exd-fade 2s var(--ease) .6s forwards; }
@keyframes exd-fade{ to{opacity:1} }
.exd-facade{ display:flex; gap:clamp(14px,3vw,42px); flex-wrap:wrap; justify-content:center;
  align-items:center; max-width:1200px; padding:0 5vw; }
.exd-window{ position:relative; cursor:pointer; border:none; background:none; padding:0;
  opacity:0; transform:translateY(16px) scale(.97); animation:exd-rise 1.4s var(--ease) forwards; }
.exd-window:nth-child(1){animation-delay:.7s}.exd-window:nth-child(2){animation-delay:.85s}
.exd-window:nth-child(3){animation-delay:1s}.exd-window:nth-child(4){animation-delay:1.15s}
.exd-window:nth-child(5){animation-delay:1.3s}
@keyframes exd-rise{ to{opacity:1; transform:none} }
.exd-window img{ display:block; width:clamp(120px,15vw,190px); height:clamp(120px,15vw,190px);
  object-fit:cover; border-radius:2px; filter:brightness(.62) saturate(.9);
  transition:filter .6s var(--ease), transform .6s var(--ease);
  box-shadow:0 0 0 1px rgba(255,255,255,.06); }
.exd-window::after{ content:""; position:absolute; inset:-18%; border-radius:50%; z-index:-1;
  background:radial-gradient(circle,var(--glow) 0%,transparent 68%);
  opacity:.35; filter:blur(14px); transition:opacity .6s var(--ease); }
.exd-window:hover img, .exd-window:focus-visible img{
  filter:brightness(1) saturate(1.02); transform:translateY(-8px) scale(1.03); }
.exd-window:hover::after{ opacity:.85; }
.exd-silent{ position:absolute; bottom:6vh; left:0; right:0; text-align:center; font-family:var(--mono);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint-2);
  background:none; border:none; cursor:pointer;
  opacity:0; animation:exd-fade 2s var(--ease) 1.6s forwards; }
.exd-silent:hover{ color:var(--muted); }
#ex-door.leaving .exd-facade, #ex-door.leaving .exd-wm, #ex-door.leaving .exd-ask,
#ex-door.leaving .exd-silent{ opacity:0; transition:opacity var(--ex-tms) var(--ease); }

/* phone: the windows stack, nothing clipped; the silent entry stays in the first viewport */
@media (max-width:640px){
  .exd-facade{ gap:12px; }
  .exd-window img{ width:min(27vw,120px); height:min(27vw,120px); }
}

/* ================= THE GALLERY (room.html's museum hang) ================= */
.exh-frame{ height:100vh; scroll-snap-align:start; display:grid; place-items:center; position:relative; }
.exh-frame img.work{ max-height:82vh; max-width:88vw; width:auto; height:auto; border-radius:2px;
  box-shadow:0 30px 90px rgba(0,0,0,.55); opacity:0; transform:scale(.985);
  transition:opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.exh-frame.seen img.work{ opacity:1; transform:none; }

/* the quiet ↗ out to the work's own page — the walk's only navigation (CS-6) */
.ex-open{ position:absolute; right:26px; bottom:26px; z-index:3; width:32px; height:32px;
  border-radius:999px; display:grid; place-items:center; text-decoration:none; color:var(--ink);
  background:rgba(8,8,7,.55); border:1px solid var(--hair); font-size:14px; line-height:1;
  opacity:0; transition:opacity .3s var(--ease), background .3s; backdrop-filter:blur(6px); }
.exh-frame:hover .ex-open, .ex-open:focus{ opacity:1; }
.ex-open:hover{ background:var(--accent); color:#0c0b0a; border-color:var(--accent); }

/* caption zone — fixed, bottom-left, ALWAYS in the dark margin, never on the photo (INV-1/INV-27) */
.exh-capzone{ position:fixed; left:34px; bottom:30px; z-index:30; max-width:38vw; pointer-events:none;
  opacity:0; transform:translateY(8px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.exh-capzone.show{ opacity:1; transform:none; }
.exh-capzone .title{ font-family:var(--serif); font-weight:300; font-size:clamp(20px,2.4vw,34px);
  color:var(--ink); line-height:1.1; }
.exh-capzone .title.untitled{ color:var(--muted); font-style:italic; font-size:clamp(16px,1.8vw,22px); }
.exh-capzone .meta{ font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted-2); margin-top:8px; }
.exh-counter{ position:fixed; top:26px; left:34px; z-index:30; font-family:var(--mono); font-size:11px;
  letter-spacing:.2em; color:var(--muted-2); opacity:0; transition:opacity .5s; }
.exh-counter.show{ opacity:1; }
.exh-counter .now{ color:var(--ink); }
body.ex-door .exh-capzone, body.ex-door .exh-counter{ opacity:0; }

/* the closing screen — onward while the budget lasts, the door always (INV-29/30/31) */
.exh-fin{ height:100vh; scroll-snap-align:start; display:grid; place-content:center;
  text-align:center; gap:26px; }
.exh-fin .q{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--faint); }
.exh-fin .row{ display:flex; gap:18px; justify-content:center; }
.exh-fin button{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  cursor:pointer; background:transparent; border-radius:999px; padding:9px 18px; transition:all .3s; }
.exh-fin .more{ color:var(--accent); border:1px solid rgba(201,100,66,.42); }
.exh-fin .more:hover{ background:var(--accent); color:#0c0b0a; }
.exh-fin .back{ color:var(--muted-2); border:1px solid var(--hair); }
.exh-fin .back:hover{ color:var(--ink); border-color:var(--muted-2); }

/* phone — same law (one work per viewport); the caption lives in the bottom BAND, never on the
   image: the frame reserves the band by capping the work's height (prover H1) */
@media (max-width:640px){
  .exh-frame img.work{ max-height:70vh; max-width:92vw; }
  .exh-frame{ padding-bottom:14vh; }
  .exh-capzone{ left:16px; right:16px; bottom:14px; max-width:none; }
  .exh-capzone .title{ font-size:18px; }
  .ex-open{ opacity:1; right:16px; bottom:16px; }   /* no hover on touch — keep it visible */
}