/* ==========================================================================
   EXHIBIT APPARATUS — the museum's furniture inside the exhibition rooms.

   Loaded on the nine exhibit routes, before each room's own sheet. Tier 1:
   Aesthetary's voice — Fragment Mono on paper — identical in kind on every
   room, whatever the room does to the rest of the canvas. Nothing here may
   be restyled by a room sheet except the spacing hooks noted below.
   ========================================================================== */

/* ---- the exhibit bar ---------------------------------------------------- */
.ex-bar {
  background: var(--paper);
  color: var(--ink);
  border-block: 1px solid var(--rule);
  padding: 0.75rem clamp(1rem, 4vw, 2.5rem);
  display: flex;
  gap: 1.25rem;
  align-items: baseline;
  font: 400 0.75rem/1.6 var(--mono);
}
.ex-bar__kicker { color: var(--ink-3); letter-spacing: 0.08em; white-space: nowrap; }
.ex-bar__body { flex: 1 1 auto; max-width: 72ch; }
.ex-bar__line { margin: 0; color: var(--ink-2); }
.ex-bar__line b { color: var(--ink); font-weight: 400; }
.ex-bar__liberty { margin: 0.35rem 0 0; color: var(--ink-2); }
.ex-bar__gallery { margin: 0; white-space: nowrap; }
.ex-bar__gallery a { color: var(--ink-2); }
@media (max-width: 48rem) {
  .ex-bar { flex-wrap: wrap; gap: 0.35rem 1.25rem; }
}

/* ---- the standing panel ------------------------------------------------- */
.ex-standing {
  background: var(--paper);
  color: var(--ink);
  border-block-start: 1px solid var(--rule);
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 4vw, 2.5rem) clamp(2rem, 5vw, 3rem);
  font: 400 0.78rem/1.65 var(--mono);
}
.ex-standing__h {
  font: 400 0.75rem/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--ink-3);
  margin: 0 0 1rem;
}
.ex-standing__cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2rem; max-width: 68rem; }
.ex-standing__depth { margin: 0 0 0.75rem; color: var(--ink); }
.ex-standing__depth b { font-weight: 400; }
.ex-standing__absent { margin: 0; color: var(--ink-2); }
.ex-standing__data { margin: 0 0 0.75rem; }
.ex-standing__data a { color: var(--ink); }
.ex-standing__key { margin: 0; color: var(--ink-3); }
@media (max-width: 48rem) {
  .ex-standing__cols { grid-template-columns: 1fr; gap: 1rem; }
}

/* The ours mark, shared with the shell's convention. Defined here so a room
   sheet cannot accidentally repaint the epistemics. */
.ex-bar .ours, .ex-standing .ours, .ex-prov .ours {
  color: var(--brand);
}

/* ---- disclosures -------------------------------------------------------- */
.ex-more { margin: 0.75rem 0 0; }
.ex-more-in { position: absolute; opacity: 0; pointer-events: none; }
.ex-more-mark {
  display: inline-flex; align-items: center; gap: 0.5em;
  font: 400 0.75rem/1.4 var(--mono);
  color: var(--ink-2);
  cursor: pointer;
  border: 1px solid var(--rule-firm);
  padding: 0.25rem 0.75rem;
  background: var(--paper);
  color-scheme: light;
}
.ex-more-mark span[aria-hidden]::before { content: "+"; }
.ex-more-in:checked + .ex-more-mark span[aria-hidden]::before { content: "\2212"; }
.ex-more-in:focus-visible + .ex-more-mark { outline: 2px solid var(--brand); outline-offset: 2px; }
.ex-more__body { display: none; }
.ex-more-in:checked ~ .ex-more__body {
  display: block;
  margin-top: 0.75rem;
  padding: 0.9rem 1rem;
  background: var(--paper);
  color: var(--ink-2);
  border: 1px solid var(--rule);
  font: 400 0.78rem/1.65 var(--mono);
}
.ex-more__body p { margin: 0 0 0.75rem; }
.ex-more__body p:last-child { margin-bottom: 0; }

/* ---- provenance markers ------------------------------------------------- */
.ex-prov-toggle { position: absolute; opacity: 0; pointer-events: none; }
.ex-prov-bar {
  margin: 0;
  padding: 0.45rem clamp(1rem, 4vw, 2.5rem);
  background: var(--paper);
  border-block-end: 1px solid var(--rule);
  font: 400 0.75rem/1.5 var(--mono);
  color: var(--ink-3);
  display: flex; gap: 1rem; align-items: baseline;
}
.ex-prov-bar label {
  cursor: pointer;
  border: 1px solid var(--rule-firm);
  padding: 0.15rem 0.55rem;
  color: var(--ink);
  white-space: nowrap;
}
.ex-prov-bar label::before { content: "\25CB\2002"; }
.ex-prov-toggle:checked ~ .ex-prov-bar label::before { content: "\25CF\2002"; }
.ex-prov-toggle:focus-visible ~ .ex-prov-bar label { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 48rem) { .ex-prov-bar__note { display: none; } }

.ex-prov-wrap { position: relative; display: inline-block; }
.ex-prov-in { position: absolute; opacity: 0; pointer-events: none; }
.ex-prov-mark {
  display: inline-block;
  font: 400 0.75rem/1.2 var(--mono);
  border: 1px solid var(--rule-firm);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  color: var(--ink-2);
  background: var(--paper);
  cursor: pointer;
  vertical-align: 0.15em;
  white-space: nowrap;
  color-scheme: light;
}
.ex-prov-mark[data-backed="no"] { border-style: dashed; color: var(--ink-3); }
.ex-prov-in:focus-visible + .ex-prov-mark { outline: 2px solid var(--brand); outline-offset: 2px; }
.ex-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ex-prov {
  display: none;
  position: absolute;
  z-index: 30;
  inset-inline-start: 0;
  top: calc(100% + 0.4rem);
  width: min(26rem, 78vw);
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule-firm);
  box-shadow: 0 10px 28px rgba(11, 13, 18, 0.14);
  padding: 0.8rem 0.9rem;
  font: 400 0.75rem/1.6 var(--mono);
  text-align: left;
}
.ex-prov-in:checked ~ .ex-prov,
.ex-prov-toggle:checked ~ * .ex-prov { display: block; }
/* When the page-level toggle opens everything, the panels flow instead of
   floating — 40 stacked popovers would occlude the page they annotate. */
.ex-prov-toggle:checked ~ * .ex-prov { position: static; width: auto; box-shadow: none; margin-top: 0.4rem; }
.ex-prov__addr code { color: var(--brand); }
.ex-prov__row { display: block; margin-top: 0.35rem; color: var(--ink-2); }
.ex-prov__row b { color: var(--ink); font-weight: 400; }
.ex-prov__note { display: block; margin-top: 0.45rem; color: var(--ink-2); border-inline-start: 2px solid var(--rule-firm); padding-inline-start: 0.75rem; }

/* Rooms are long; keep the apparatus honest under reduced data too. */
@media print {
  .ex-prov { display: block; position: static; box-shadow: none; }
}

/* ---- ADRB note (production-run rooms) ---------------------------------- */
/* Standing-panel statement for rooms whose claims layer lives in the
   Art-Direction Research Brief. Museum voice; inherits the panel's font. */
.ex-adrb { margin: 0 0 0.75rem; }
.ex-adrb__row { margin: 0 0 0.5rem; color: var(--ink-2); }
.ex-adrb__row b { font-weight: 400; color: var(--ink); }
.ex-adrb__dep { border-inline-start: 2px solid var(--ink-3); padding-inline-start: 0.6rem; }

/* THE RECORD (one page per Aesthetic, 2026-09-26). Everything the Understand
   page held, set in the page around it: no family, no colour, no ground of
   its own. Sizes are em and every line is currentColor, so the Aesthetic's own
   type and palette carry it. Structure only. */
.ex-record {
  font: inherit; color: inherit; background: transparent;
  max-width: 72rem; margin: clamp(3rem, 8vw, 6rem) auto 0;
  padding: 0 clamp(1rem, 4vw, 2.5rem) clamp(2rem, 5vw, 4rem);
}
.ex-record__block {
  display: grid; grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr); gap: 0.75em 2.5em;
  padding-block: 1.6em; border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}
.ex-record__h { margin: 0; font: inherit; font-size: 1.15em; font-weight: 700; line-height: 1.25; letter-spacing: normal; text-transform: none; }
.ex-record__n { font-weight: 400; opacity: 0.6; margin-inline-start: 0.35em; }
.ex-record__body { max-width: 44em; }
.ex-record__body > p { margin: 0 0 0.8em; line-height: 1.55; }
.ex-record__body a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
.ex-record__facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.45em 1.5em; margin: 0; }
.ex-record__facts dt { opacity: 0.65; }
.ex-record__facts dd { margin: 0; }
.ex-record__area + .ex-record__area { margin-top: 1.4em; }
.ex-record__area h3 { margin: 0 0 0.5em; font: inherit; font-weight: 700; }
.ex-record__area ul, .ex-record__plain { list-style: none; margin: 0; padding: 0; }
.ex-record__area li, .ex-record__plain li { padding: 0.55em 0; border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent); line-height: 1.5; }
.ex-record__kind { display: block; font-size: 0.78em; opacity: 0.65; margin-bottom: 0.15em; }
.ex-record__plain .ex-record__kind { display: inline; margin: 0 0.4em; }
.ex-record__ev { font-size: 0.78em; opacity: 0.65; }
@media (max-width: 40rem) { .ex-record__block { grid-template-columns: 1fr; } }

/* ---- the image slot (render/image-slot.ts) -------------------------------
   A frame with its crop's aspect; the asset is placed so the crop rectangle
   fills it exactly. Rooms that use it name their column container `room`:
   desktop >= 1000px, tablet 640-999px, mobile < 640px. */
.ex-slot { position: relative; display: block; overflow: hidden; aspect-ratio: var(--ar-d); }
.ex-slot > img { position: absolute; display: block; max-width: none; height: auto; width: var(--w-d); left: var(--x-d); top: var(--y-d); }
@container room (min-width: 640px) and (max-width: 999px) {
  .ex-slot { aspect-ratio: var(--ar-t); }
  .ex-slot > img { width: var(--w-t); left: var(--x-t); top: var(--y-t); }
}
@container room (max-width: 639px) {
  .ex-slot { aspect-ratio: var(--ar-m); }
  .ex-slot > img { width: var(--w-m); left: var(--x-m); top: var(--y-m); }
}

/* Fidelity/QA (2026-09-29): a long value (a URL, a file path) wraps inside the facts list on a phone. */
.ex-record__facts dd, .ex-record__facts dt { min-width: 0; overflow-wrap: anywhere; }