/* =====================================================================
   The Blum Museum of Art & Machinery — dashofblum's museum skin.

   Loaded after site.css and hub.css, only on museum pages (museum.php,
   museum-work.php, exhibition.php and the /galleries lobby). It borrows the
   hub's tokens — Plex Mono, the rust accent, the dot-grid paper — and adds
   a building: a directory board, walls with a little gallery light, frames
   that suit each medium, and labels set like equipment tags.

   Rules this file keeps:
   1. Never put aspect-ratio on an <img>. Proportions come from the width/
      height attributes; an author aspect-ratio outranks that hint and every
      photograph would snap to shape on load. --ar is for boxes around them.
   2. Rooms change a handful of tokens on .museum[data-room], nothing else,
      so eight rooms stay one design system.
   3. Motion is a fade between rooms and a small lift on hover. Both go under
      prefers-reduced-motion.
   4. Text on every wall colour stays at 4.5:1 or better. The room accent is
      used for rules and marks; words use --label-ink / --label-muted.
   ===================================================================== */

/* ---- Tokens ----------------------------------------------------------- */
.museum,
.museum-lobby,
.artwork-page,
.exhibition-page {
  --wall:          #1a181d;
  --wall-rail:     color-mix(in srgb, var(--ink) 9%, transparent);
  --room-light:    rgb(255 240 214 / .055);
  --room-accent:   var(--accent);
  --room-ink:      var(--accent-ink);   /* accent-coloured words: 7:1+ on every wall */
  --label-ink:     var(--ink);
  --label-muted:   var(--muted);
  --panel-bg:      #121115;
  --mat:           #e9e3d6;
  --moulding:      #0b0a0c;
  --wall-h:        clamp(8rem, 2.6rem + 6.8vw, 14.5rem);
}

.museum[data-room="darkroom"] {
  --wall: #140b0c; --room-accent: #c9503f; --room-ink: #ff9a86; --room-light: rgb(255 90 60 / .07);
  --label-muted: #c4aaa4; --panel-bg: #100708; --mat: #ddd3c6;
}
.museum[data-room="machine-room"] {
  --wall: #13171a; --room-accent: #5f9fb4; --room-ink: #8fd0e4; --room-light: rgb(190 225 255 / .05);
  --label-muted: #a3aeb4; --panel-bg: #0e1113;
}
.museum[data-room="arcade"] {
  --wall: #14101c; --room-accent: #9270f0; --room-ink: #c3adff; --room-light: rgb(170 120 255 / .08);
  --label-muted: #b2a8c4; --panel-bg: #0f0c15;
}
.museum[data-room="screening-room"] {
  --wall: #0d0c0f; --room-accent: #c9a45a; --room-ink: #e9c985; --room-light: rgb(255 228 170 / .04);
  --panel-bg: #09080b;
}
.museum[data-room="lehigh-valley-wing"] {
  --wall: #1b1411; --room-accent: #c0653a; --room-ink: #f0a071; --room-light: rgb(255 196 150 / .06);
  --label-muted: #bba99b; --panel-bg: #130e0c; --mat: #ede4d3;
}
.museum[data-room="studio"] {
  --wall: #18181a; --room-accent: #c9b54c; --room-ink: #e6d27a; --room-light: rgb(255 250 220 / .04);
  --panel-bg: #121214;
}
.museum[data-room="vault"] {
  --wall: #131418; --room-accent: #8494aa; --room-ink: #b7c4d6; --room-light: rgb(210 225 255 / .035);
  --label-muted: #a8adb6; --panel-bg: #0e0f12;
}
.museum[data-room="sub-basement"] {
  --wall: #0e0f0b; --room-accent: #8b9a55; --room-ink: #c4d18d; --room-light: rgb(230 255 170 / .03);
  --label-muted: #a9ad9a; --panel-bg: #0a0b08;
}

/* Safelight: the darkroom's red lamp. Walls and labels go red; the works
   themselves are never tinted — it changes the room, not the art. */
.museum[data-room="darkroom"][data-safelight="on"] {
  --wall: #0b0405; --room-accent: #e0341f; --room-ink: #ffb4a2; --room-light: rgb(255 40 20 / .16);
  --label-ink: #ffd6cc; --label-muted: #ffb4a2; --panel-bg: #120506; --mat: #6a2d27; --moulding: #030101;
}
.museum[data-room="darkroom"][data-safelight="on"] .museum-stage { color: var(--label-ink); }

/* The hub's own typed "darkroom" mode (hub.js) reaches in here too, the way
   it does on every other hub page: mats go red and photographs develop. */
html.hub-darkroom body.site .museum { --mat: #6b2f2a; --room-light: rgb(255 50 30 / .12); }
html.hub-darkroom body.site :is(.museum-work__frame, .museum-cat__media, .museum-row__thumb, .artwork-figure__frame, .museum-recon__slot, .museum-lobby__works) img {
  filter: sepia(1) hue-rotate(-42deg) saturate(3.2) brightness(.72);
}

/* ---- The shell --------------------------------------------------------- */
/* museum.js shows and hides controls with the hidden attribute, and several of
   them set their own display, which would otherwise win. */
.museum [hidden], .museum-notice [hidden] { display: none !important; }

/* hub.css restates .btn's text colour as `body.site .btn`, which outranks
   site.css's `.btn--ghost` and leaves ghost buttons dark-on-dark. Put the ghost
   colour back on the pages that load this file. */
body.site .btn--ghost { color: var(--ink); }

.museum-shell { padding-block: clamp(1.25rem, 3vw, 2.25rem) clamp(3rem, 7vw, 5rem); }
.container.museum {
  max-width: 1560px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "mast" "dir" "stage";
  gap: 1.1rem;
}
@media (min-width: 1200px) {
  .container.museum {
    grid-template-columns: 13.5rem minmax(0, 1fr);
    grid-template-areas: "mast mast" "dir stage";
    column-gap: clamp(1.5rem, 2vw, 2.5rem);
    row-gap: 1.4rem;
  }
}

/* Masthead: the institution's letterhead. */
.museum-masthead {
  grid-area: mast;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .15rem .7rem;
  padding-bottom: .9rem;
  border-bottom: 3px double var(--line);
}
.museum-masthead p { margin: 0; }
.museum-masthead__crumb { font-family: var(--font-mono); font-size: .85rem; color: var(--muted); }
.museum-masthead__crumb a:hover { color: var(--accent-ink); }
.museum-masthead__name {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(1.05rem, .92rem + .6vw, 1.45rem);
  letter-spacing: -.015em;
  line-height: 1.2;
}
.museum-masthead__name a:hover { color: var(--accent-ink); }
.museum-masthead__sub {
  flex-basis: 100%;
  font-family: var(--font-type);
  font-size: clamp(.92rem, .88rem + .2vw, 1.02rem);
  color: var(--muted);
}

/* ---- The directory ----------------------------------------------------- */
/* A lobby directory board: numbered rows on dark felt, the current room lit. */
.museum-dir { grid-area: dir; min-width: 0; font-family: var(--font-mono); }
.museum-dir__head {
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .55rem;
}
.museum-dir ol, .museum-dir ul { list-style: none; padding: 0; margin: 0; }
.museum-dir__rooms {
  background: #0f0e11;
  border: 1px solid var(--line);
}
.museum-dir__rooms a {
  display: grid;
  grid-template-columns: 2.1rem 1fr auto;
  column-gap: .5rem;
  align-items: baseline;
  padding: .62rem .75rem .62rem .6rem;
  border-left: 3px solid transparent;
  color: var(--ink);
  transition: background var(--speed), border-color var(--speed);
}
.museum-dir__rooms li + li a { border-top: 1px dotted var(--line); }
.museum-dir__rooms a:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.museum-dir__rooms a[aria-current] {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border-left-color: var(--accent);
}
.museum-dir__num { font-size: .78rem; color: var(--accent-ink); letter-spacing: .04em; }
.museum-dir__name { font-size: .92rem; font-weight: 500; line-height: 1.3; }
.museum-dir__count { font-size: .74rem; color: var(--muted); }
.museum-dir__short {
  grid-column: 2 / 4;
  font-family: var(--font-sans);
  font-size: .8rem;
  line-height: 1.4;
  color: var(--muted);
  margin-top: .15rem;
}
.museum-dir__more { margin-top: .9rem; display: grid; gap: .1rem; }
.museum-dir__more a {
  display: flex;
  justify-content: space-between;
  gap: .6rem;
  padding: .45rem .1rem;
  font-size: .9rem;
  border-bottom: 1px solid var(--line);
}
.museum-dir__more a:hover { color: var(--accent-ink); }
.museum-dir__more a[aria-current] { color: var(--accent-ink); }
.museum-dir__more a[aria-current]::before { content: "▸ "; }
.museum-dir__hint { font-size: .74rem; color: var(--muted); }

/* Staff-only doors (easter eggs). Deliberately plain: a door sign. */
.museum-dir__staff { margin-top: .9rem; display: grid; gap: .45rem; }
.museum-door {
  width: 100%;
  display: grid;
  text-align: left;
  gap: .05rem;
  padding: .45rem .6rem;
  font: inherit;
  color: var(--muted);
  background: transparent;
  border: 1px dashed color-mix(in srgb, var(--muted) 55%, transparent);
  cursor: pointer;
}
.museum-door:hover { color: var(--ink); border-color: var(--muted); }
.museum-door__label { font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; }
.museum-door__meta { font-size: .74rem; }

/* The floor plan. */
.museum-plan { display: block; width: 100%; height: auto; margin-top: 1.1rem; overflow: visible; }
.museum-plan__outline { fill: none; stroke: color-mix(in srgb, var(--ink) 22%, transparent); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.museum-plan__room {
  fill: color-mix(in srgb, var(--ink) 4%, transparent);
  stroke: color-mix(in srgb, var(--ink) 45%, transparent);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
  transition: fill var(--speed);
}
.museum-plan a:hover .museum-plan__room { fill: color-mix(in srgb, var(--accent) 16%, transparent); }
.museum-plan__room.is-current { fill: color-mix(in srgb, var(--accent) 30%, transparent); stroke: var(--accent-ink); stroke-width: 2px; }
.museum-plan__room.is-below { stroke-dasharray: 4 3; }
.museum-plan__num { font-family: var(--font-mono); font-size: 4.2px; fill: var(--muted); pointer-events: none; }
.museum-plan__entrance { fill: none; stroke: var(--accent-ink); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.museum-plan__door { cursor: pointer; }
.museum-plan__door rect { fill: var(--paper); stroke: var(--muted); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.museum-plan__door circle { fill: var(--muted); }
.museum-plan__door:hover rect { stroke: var(--accent-ink); }

/* Below 1200px the board becomes a strip of every room, scrolling sideways. */
@media (max-width: 1199px) {
  .museum-dir__head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .museum-dir__rooms {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);
    padding-right: 2rem;
  }
  .museum-dir__rooms li { flex: 0 0 auto; scroll-snap-align: start; }
  .museum-dir__rooms li + li a { border-top: 0; border-left-color: transparent; }
  .museum-dir__rooms li + li { border-left: 1px dotted var(--line); }
  .museum-dir__rooms a {
    grid-template-columns: auto auto;
    column-gap: .45rem;
    min-height: 44px;
    padding: .55rem .8rem;
    border-left: 0;
    border-bottom: 3px solid transparent;
  }
  .museum-dir__rooms a[aria-current] { border-bottom-color: var(--accent); }
  .museum-dir__count, .museum-dir__short { display: none; }
  .museum-dir__more { grid-template-columns: repeat(3, auto); justify-content: start; gap: 0 1.4rem; margin-top: .6rem; }
  .museum-dir__more a { border-bottom: 0; padding: .35rem 0; min-height: 44px; align-items: center; }
  .museum-dir__hint { display: none; }
  .museum-dir__staff { grid-template-columns: repeat(auto-fit, minmax(12rem, max-content)); margin-top: .35rem; }
  .museum-plan { display: none; }
}

/* ---- The stage --------------------------------------------------------- */
.museum-stage {
  grid-area: stage;
  min-width: 0;
  position: relative;
  padding: clamp(1rem, 2vw, 2rem);
  background-color: var(--wall);
  /* The one gradient here does a job: a gallery light washing the top of the wall. */
  background-image: radial-gradient(120% 24rem at 50% 0, var(--room-light), transparent 70%);
  border: 1px solid var(--line);
  box-shadow: inset 0 3px 0 var(--wall-rail);
  transition: background-color .5s var(--ease), opacity .2s var(--ease);
}
.museum-stage.is-leaving { opacity: 0; transition-duration: .12s; }
.museum-stage.is-entering { opacity: 0; transition: none; }
.museum[data-room="studio"] .museum-stage {
  background-image:
      radial-gradient(120% 24rem at 50% 0, var(--room-light), transparent 70%),
      radial-gradient(circle, color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1.5px);
  background-size: auto, 16px 16px;
}
.museum.is-dimmed { --room-light: transparent; }
.museum.is-dimmed .museum-work__frame { filter: brightness(.45); transition: filter 1.2s var(--ease); }

.museum-stage__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.6rem, 3vw, 2.4rem); align-items: start; }
@media (min-width: 820px) {
  .museum-stage__body { grid-template-columns: minmax(0, 1fr) 16.5rem; }
}
@media (min-width: 1600px) {
  .container.museum { grid-template-columns: 15rem minmax(0, 1fr); }
  .museum-stage__body { grid-template-columns: minmax(0, 1fr) 19rem; }
}
.museum-stage__body.museum-stage__body--full { grid-template-columns: minmax(0, 1fr); }

/* Room header: the placard at the door. */
.museum-room { margin-bottom: clamp(1.5rem, 3.5vw, 2.6rem); max-width: 70ch; }
.museum-room p { margin: 0; }
.museum-room__num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--room-ink);
  border: 1px solid color-mix(in srgb, var(--room-accent) 70%, transparent);
  padding: .2em .6em;
}
.museum-room__name {
  margin-top: .6rem;
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.9rem);
  color: var(--label-ink);
  outline: none;
}
.museum-room__desc { margin-top: .6rem; color: var(--label-muted); font-size: 1.02rem; max-width: 62ch; }
.museum-room__tools { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1rem; margin-top: 1.1rem; }
.museum-room__feature {
  margin-top: .9rem !important;
  font-size: .9rem;
  color: var(--label-muted);
  padding-left: .75rem;
  border-left: 2px solid var(--room-accent);
}
.museum-room__feature a { color: var(--room-ink); text-decoration: underline; text-underline-offset: 3px; }
.museum-room__feature-link { margin-left: .4rem; }

/* Gallery view / Catalog view: a two-position switch, always on screen. */
.museum-views { display: inline-flex; border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent); margin: 0; }
.museum-views__opt {
  font-family: var(--font-mono);
  font-size: .85rem;
  padding: .5rem .85rem;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  color: var(--label-ink);
}
.museum-views__opt + .museum-views__opt { border-left: 1px solid color-mix(in srgb, var(--ink) 35%, transparent); }
.museum-views__opt:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.museum-views__opt[aria-current] { background: var(--ink); color: var(--paper); }

.museum-safelight {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 40px;
  padding: .45rem .85rem;
  font-family: var(--font-mono);
  font-size: .85rem;
  color: var(--label-ink);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--room-accent) 70%, transparent);
  cursor: pointer;
}
.museum-safelight__lamp { width: .7rem; height: .7rem; border-radius: 50%; background: #4a1a14; box-shadow: inset 0 0 0 1px #000; }
.museum-safelight[aria-pressed="true"] .museum-safelight__lamp { background: #ff3b24; box-shadow: 0 0 .6rem #ff3b24; }
.museum-safelight[aria-pressed="true"] { background: rgb(255 40 20 / .12); }

/* ---- The wall ---------------------------------------------------------- */
.museum-wall { min-width: 0; }
.museum-wall__section + .museum-wall__section { margin-top: clamp(2.8rem, 6vw, 4.5rem); }
.museum-wall__label {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
  font-family: var(--font-type);
  font-weight: 400;
  font-size: 1.02rem;
  letter-spacing: 0;
  color: var(--label-muted);
}
.museum-wall__label::after { content: ""; flex: 1; height: 1px; background: var(--wall-rail); }
.museum-wall__label:has(+ .museum-wall__note) { margin-bottom: .45rem; }
.museum-wall__note { margin: 0 0 clamp(1.6rem, 3vw, 2.4rem); max-width: 62ch; font-size: .92rem; color: var(--label-muted); }

/* A salon hang on a shared centre line. Each frame's width is the wall
   height, times the size step the curator chose, times the work's own
   aspect ratio — so every work keeps its true shape and big stays big. */
.museum-hang {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 3.4vw, 3.2rem) clamp(1.4rem, 2.4vw, 2.6rem);
}
.museum-hang__item {
  --size: .9;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  width: min-content;
  min-width: min(11.5rem, 100%);
  max-width: 100%;
}
.museum-hang__item--xl { --size: 1.75; }
.museum-hang__item--l  { --size: 1.3; }
.museum-hang__item--m  { --size: 1; }
.museum-hang__item--s  { --size: .78; }
.museum-hang__item--top { align-self: flex-start; }
.museum-hang__item--bottom { align-self: flex-end; }

.museum-work { display: flex; flex-direction: column; align-items: center; gap: .95rem; }
.museum-work__link { display: block; position: relative; max-width: 100%; }
.museum-work__link:focus-visible { outline: 2px solid var(--room-ink); outline-offset: 7px; border-radius: 1px; }
.museum-work__frame {
  --pad: 0px;
  position: relative;
  display: block;
  box-sizing: border-box;
  width: calc(var(--wall-h) * var(--size) * var(--ar) + 2 * var(--pad));
  max-width: 100%;
  padding: var(--pad);
  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.museum-work__frame img { display: block; width: 100%; height: auto; background: var(--c, #2a282e); }
@media (hover: hover) {
  .museum-work__link:hover .museum-work__frame { transform: translateY(-3px); }
}

/* Prints: moulding, a warm mat, a shadow on the wall. */
.museum-work--mat .museum-work__frame {
  --pad: calc(var(--wall-h) * var(--size) * .075);
  background: var(--mat);
  border: 3px solid var(--moulding);
  box-shadow: 0 1.4rem 1.6rem -1.1rem rgb(0 0 0 / .8), 0 0 0 1px rgb(255 255 255 / .04);
}
.museum-work--mat .museum-work__frame img { box-shadow: 0 0 0 1px rgb(0 0 0 / .18), inset 0 0 0 1px #000; }

/* Ambrotypes: a velvet case, a brass mat line, a little glass. */
.museum-work--plate .museum-work__frame {
  --pad: calc(var(--wall-h) * var(--size) * .085);
  background: #0a0908;
  border: 1px solid #3c3122;
  border-radius: 3px;
  box-shadow: 0 1.2rem 1.4rem -1rem rgb(0 0 0 / .85);
}
.museum-work--plate .museum-work__frame::before {
  content: "";
  position: absolute;
  inset: calc(var(--pad) * .45);
  border: 1px solid #a8844c;
  border-radius: 40% / 8%;
  pointer-events: none;
}
.museum-work--plate .museum-work__frame::after {
  content: "";
  position: absolute;
  inset: var(--pad);
  background: linear-gradient(125deg, rgb(255 255 255 / .07), transparent 38%);
  pointer-events: none;
}

/* Objects and hardware: no frame, just the thing and its shadow. */
.museum-work--float .museum-work__frame { filter: drop-shadow(0 1rem .9rem rgb(0 0 0 / .6)); }

/* Games: a cabinet with a marquee. */
.museum-work--cabinet .museum-work__link { display: flex; flex-direction: column; }
.museum-work--cabinet .museum-work__marquee {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: .35rem .6rem .25rem;
  font-family: var(--font-terminal);
  font-size: 1.25rem;
  line-height: 1.05;
  text-align: center;
  color: var(--room-ink);
  background: #060509;
  border: 2px solid #2b2536;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  text-shadow: 0 0 .5rem color-mix(in srgb, var(--room-accent) 80%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.museum-work--cabinet .museum-work__frame {
  --pad: calc(var(--wall-h) * var(--size) * .06);
  background: #0d0b12;
  border: 2px solid #2b2536;
  border-radius: 0 0 4px 4px;
  box-shadow: inset 0 0 1.2rem rgb(0 0 0 / .8), 0 1.3rem 1.5rem -1.1rem rgb(0 0 0 / .85);
}
.museum-work--cabinet .museum-work__frame img { border-radius: 6px; }

/* Screens: a bezel. */
.museum-work--bezel .museum-work__frame {
  --pad: calc(var(--wall-h) * var(--size) * .07);
  background: #111013;
  border-radius: 1.1rem;
  box-shadow: inset 0 0 0 2px #2a282e, 0 1.2rem 1.4rem -1rem rgb(0 0 0 / .8);
}
.museum-work--bezel .museum-work__frame img { border-radius: .5rem; }

/* Work in progress: pinned up with tape, not framed. */
.museum-work--pinned .museum-work__frame { transform: rotate(-1deg); }
.museum-work--pinned .museum-work__frame::before,
.museum-work--pinned .museum-work__frame::after {
  content: "";
  position: absolute;
  top: -.55rem;
  width: 3.4rem;
  height: 1.1rem;
  background: rgb(236 222 170 / .72);
  box-shadow: 0 1px 2px rgb(0 0 0 / .3);
}
.museum-work--pinned .museum-work__frame::before { left: -.8rem; transform: rotate(-24deg); }
.museum-work--pinned .museum-work__frame::after { right: -.8rem; transform: rotate(21deg); }

/* A work with no image: an index card with its title typed on. */
.museum-work--placard .museum-work__frame { width: calc(var(--wall-h) * var(--size) * .8); min-width: 10rem; }
.museum-work__placard {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .6rem;
  aspect-ratio: 4 / 5;
  padding: 1rem;
  text-align: center;
  font-family: var(--font-type);
  font-size: 1.05rem;
  line-height: 1.3;
  color: #24211b;
  background: #e8e1cf;
  box-shadow: 0 1rem 1.2rem -.9rem rgb(0 0 0 / .7);
}
.museum-work__placard small { font-family: var(--font-mono); font-size: .74rem; color: #4b463b; }

/* The label beside each work. */
.museum-label {
  align-self: stretch;
  font-family: var(--font-mono);
  font-size: .82rem;
  line-height: 1.45;
  color: var(--label-muted);
  padding-left: .7rem;
  border-left: 2px solid color-mix(in srgb, var(--room-accent) 35%, transparent);
  transition: border-color var(--speed);
}
.museum-label p { margin: 0; }
.museum-label__title { font-size: .92rem; font-weight: 600; color: var(--label-ink); line-height: 1.3; }
.museum-label__year { font-weight: 400; }
.museum-label__meta + .museum-label__meta { margin-top: .05rem; }
.museum-label__id { margin-top: .25rem !important; font-size: .76rem; letter-spacing: .04em; }
.museum-label__tag {
  display: inline-block;
  margin-top: .35rem !important;
  padding: .12em .5em;
  font-family: var(--font-type);
  font-size: .82rem;
  color: #1d1807;
  background: #e5d488;
  transform: rotate(-1.2deg);
}
.museum-label__tag--note { background: #d5dde6; color: #121821; margin: 0 0 .45rem !important; }
.museum-work.is-selected .museum-label { border-left-color: var(--room-accent); }
.museum-work.is-selected .museum-label__title { color: var(--room-ink); }
@media (hover: hover) and (pointer: fine) {
  .museum.is-live .museum-work.is-selected .museum-label::after {
    content: "Selected · click again for the full record";
    display: block;
    margin-top: .4rem;
    font-size: .76rem;
    color: var(--label-muted);
  }
}

/* Phones: a vertical exhibition, sizes kept, smaller works stepping aside. */
@media (max-width: 819px) {
  .museum { --wall-h: 13rem; }
  .museum-hang { flex-direction: column; align-items: stretch; gap: 3rem; }
  .museum-hang__item { width: 100%; min-width: 0; align-items: center; }
  .museum-hang__item--m { width: 88%; }
  .museum-hang__item--s { width: 72%; }
  .museum-hang__item--m:nth-child(odd), .museum-hang__item--s:nth-child(odd) { align-self: flex-start; }
  .museum-hang__item--m:nth-child(even), .museum-hang__item--s:nth-child(even) { align-self: flex-end; }
  .museum-work { width: 100%; }
  .museum-work__link { width: 100%; display: flex; flex-direction: column; align-items: center; }
  .museum-work__frame { width: 100%; max-width: calc(64svh * var(--ar) + 2 * var(--pad)); }
  .museum-work--placard .museum-work__frame { width: 70%; }
  .museum-label { max-width: 34rem; }
}

/* ---- The information panel -------------------------------------------- */
.museum-panel {
  min-width: 0;
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-top: 3px solid var(--room-accent);
  padding: 1rem 1.15rem 1.25rem;
  font-size: .93rem;
  color: var(--label-ink);
}
@media (min-width: 820px) {
  .museum-panel {
    position: sticky;
    top: calc(68px + 1rem);
    max-height: calc(100dvh - 68px - 2rem);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}
/* On a phone museum.js moves the panel under the work you picked. */
.museum-hang__panel-slot { width: 100%; list-style: none; }
.museum-panel__head {
  margin: 0 0 .6rem;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--label-muted);
}
.museum-info p, .museum-info dl, .museum-info h2, .museum-info h3, .museum-info h4, .museum-info ul { margin: 0; }
.museum-info__kicker { font-family: var(--font-mono); font-size: .78rem; color: var(--room-ink); letter-spacing: .03em; }
.museum-info__title { margin-top: .25rem !important; font-size: 1.4rem; line-height: 1.2; color: var(--label-ink); }
.museum-info__rows { margin-top: .85rem !important; border-top: 1px solid var(--line); }
.museum-info__rows > div {
  display: grid;
  grid-template-columns: 5.4rem minmax(0, 1fr);
  gap: .7rem;
  padding: .42rem 0;
  border-bottom: 1px dotted var(--line);
}
.museum-info__rows dt { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--label-muted); padding-top: .12rem; }
.museum-info__rows dd { margin: 0; overflow-wrap: break-word; hyphens: auto; }
.museum-info__desc { margin-top: .9rem; color: var(--label-ink); line-height: 1.55; }
.museum-info__desc > * + * { margin-top: .6em; }
.museum-info__section { margin-top: 1.1rem; }
.museum-info__h {
  font-family: var(--font-mono);
  font-size: .76rem !important;
  font-weight: 500 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
  color: var(--label-muted);
  margin-bottom: .45rem !important;
}
.museum-info__history { list-style: none; padding: 0; }
.museum-info__history li { padding: .3rem 0; line-height: 1.35; }
.museum-info__history a { color: var(--label-ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--room-accent) 60%, transparent); text-underline-offset: 3px; }
.museum-info__history a:hover { color: var(--room-ink); }
.museum-info__history span { display: block; font-size: .82rem; color: var(--label-muted); }
.museum-info__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; margin-top: 1.2rem; }
.museum-info__actions .btn { padding: .55rem 1rem; font-size: .88rem; }
.museum-info__record { color: var(--room-ink); }
.museum-behind { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px dashed var(--line); }

/* Supporting material: notes, photos, links. */
.museum-support + .museum-support { margin-top: 1rem; }
.museum-support__h { font-family: var(--font-type); font-weight: 400 !important; font-size: .95rem; color: var(--label-ink); margin-bottom: .35rem !important; }
.museum-support__label { font-family: var(--font-mono); font-size: .8rem; color: var(--label-muted); }
.museum-support__note p { line-height: 1.55; }
.museum-support__note + .museum-support__note { margin-top: .6rem; }
.museum-support__photos { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .3rem; }
.museum-support__photos img { height: 4.6rem; width: auto; background: var(--c, #2a282e); }
.museum-support__caption { margin-top: .3rem !important; font-size: .82rem; color: var(--label-muted); }
.museum-support__links { list-style: none; padding: 0; }
.museum-support__links li { padding: .35rem 0; border-bottom: 1px dotted var(--line); line-height: 1.35; }
.museum-support__links a { color: var(--label-ink); }
.museum-support__links a:hover { color: var(--room-ink); }
.museum-support__links span { display: block; font-size: .8rem; color: var(--label-muted); }

/* ---- Annex: things shown elsewhere ------------------------------------- */
.museum-annex { margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.museum-annex__head { font-family: var(--font-type); font-weight: 400; font-size: 1.05rem; letter-spacing: 0; color: var(--label-muted); margin-bottom: 1rem; }
.museum-annex__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.museum-annex__card {
  display: grid;
  gap: .25rem;
  height: 100%;
  padding: .9rem 1rem;
  background: color-mix(in srgb, var(--panel-bg) 85%, transparent);
  border: 1px solid var(--line);
  border-left: 3px solid var(--room-accent);
  transition: border-color var(--speed), background var(--speed);
}
.museum-annex__card:hover { border-color: var(--room-accent); }
.museum-annex__kicker { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--room-ink); }
.museum-annex__label { color: var(--label-ink); line-height: 1.35; }
.museum-annex__meta { font-size: .84rem; color: var(--label-muted); }

.museum-empty-room {
  justify-self: start;
  display: inline-block;
  padding: 1rem 1.3rem;
  font-family: var(--font-type);
  font-size: 1.1rem;
  color: #231f17;
  background: repeating-linear-gradient(-45deg, #e6d9a6 0 14px, #d9c98b 14px 28px);
  border: 2px solid #1d1a12;
}

/* ---- Catalog View ------------------------------------------------------ */
.museum-filters {
  display: grid;
  gap: 1rem;
  padding: 1rem 1.1rem 1.1rem;
  background: var(--panel-bg);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
}
.museum-filters label, .museum-filters legend { display: block; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; }
.museum-filters input[type="search"],
.museum-filters select {
  width: 100%;
  min-height: 42px;
  padding: .5rem .65rem;
  font: inherit;
  font-size: .92rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--ink) 28%, transparent);
  border-radius: 2px;
}
.museum-filters input[type="search"] { font-size: 1.05rem; }
.museum-filters input:focus-visible, .museum-filters select:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
.museum-filters__grid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr)); }
.museum-filters__foot { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; }
.museum-filters__layout { border: 0; padding: 0; margin: 0; display: flex; align-items: center; gap: .9rem; }
.museum-filters__layout legend { float: left; margin: 0 .3rem 0 0; }
.museum-filters__layout label { display: inline-flex; align-items: center; gap: .35rem; margin: 0; font-size: .88rem; letter-spacing: 0; text-transform: none; color: var(--ink); min-height: 40px; }
.museum-filters__layout input { accent-color: var(--accent); }
.museum-filters__clear { font-size: .88rem; color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.museum-filters .btn { padding: .5rem 1.1rem; }
.museum-cat__count { margin: 1.1rem 0 1.2rem; font-family: var(--font-mono); font-size: .88rem; color: var(--muted); }

.museum-cat { list-style: none; margin: 0; padding: 0; }
/* Grid: justified rows. Each item grows by its aspect ratio, so rows come out
   level and every work keeps its shape; the spacer keeps a short last row
   from stretching. */
.museum-cat--grid { display: flex; flex-wrap: wrap; gap: 1.8rem 1.2rem; }
.museum-cat--grid::after { content: ""; flex-grow: 9999; }
.museum-cat--grid .museum-cat__item { flex: calc(var(--ar) * 100) 1 calc(var(--ar) * 10rem); max-width: calc(var(--ar) * 20rem); min-width: 0; }
.museum-cat__link { display: block; }
.museum-cat__media { display: block; background: var(--c, #25232a); }
.museum-cat__media img { display: block; width: 100%; height: auto; transition: opacity var(--speed); }
.museum-cat__link:hover .museum-cat__media img { opacity: .85; }
.museum-cat__media--none {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
  font-family: var(--font-type);
  font-size: .85rem;
  color: #3a352b;
  background: #e8e1cf;
}
.museum-cat__text { display: grid; gap: .1rem; margin-top: .55rem; font-family: var(--font-mono); }
.museum-cat__title { font-size: .92rem; font-weight: 600; line-height: 1.3; }
.museum-cat__link:hover .museum-cat__title { color: var(--accent-ink); }
.museum-cat__meta { font-size: .8rem; color: var(--muted); line-height: 1.35; }
.museum-cat__id { font-size: .76rem; color: var(--muted); }
.museum-cat__text .museum-label__tag { justify-self: start; }

/* List: one row per work, thumbnail at its true shape. */
.museum-cat--list { border-top: 1px solid var(--line); }
.museum-cat--list .museum-cat__link {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: .6rem 0;
  border-bottom: 1px solid var(--line);
}
.museum-cat--list .museum-cat__media { display: flex; justify-content: center; align-items: center; height: 4rem; background: none; }
.museum-cat--list .museum-cat__media img { width: auto; height: auto; max-width: 100%; max-height: 4rem; }
.museum-cat--list .museum-cat__media--none { aspect-ratio: auto; width: 3.2rem; font-size: 0; }
.museum-cat--list .museum-cat__text { margin-top: 0; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) {
  .museum-cat--list .museum-cat__text { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.3fr) 8.5rem; column-gap: 1rem; align-items: baseline; }
  .museum-cat--list .museum-label__tag { grid-column: 1; }
}
.museum-cat__empty { margin-top: 1rem; font-family: var(--font-type); font-size: 1.05rem; color: var(--muted); }
.museum-cat__empty a { color: var(--accent-ink); text-decoration: underline; }

/* ---- The Vault: flat-file drawers ------------------------------------- */
.museum-drawer { border: 1px solid #34323b; background: #16161b; }
.museum-drawer + .museum-drawer { margin-top: .8rem; }
.museum-drawer__front {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: .75rem 1rem;
  list-style: none;
  cursor: pointer;
  background: #24232a;
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / .35), inset 0 1px 0 rgb(255 255 255 / .05);
}
.museum-drawer__front::-webkit-details-marker { display: none; }
.museum-drawer__front:hover { background: #2a2930; }
.museum-drawer__handle {
  width: 2.8rem;
  height: .5rem;
  border-radius: 99px;
  background: linear-gradient(#9a98a1, #54525a);
  box-shadow: 0 2px 2px rgb(0 0 0 / .5);
}
.museum-drawer__card {
  justify-self: start;
  display: grid;
  padding: .3rem .7rem .35rem;
  background: #e8e1d0;
  color: #1c1a16;
  border: 1px solid #b8ae96;
}
.museum-drawer__kicker { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: #4a4439; }
.museum-drawer__label { font-family: var(--font-type); font-size: 1.05rem; line-height: 1.25; }
.museum-drawer__count { font-family: var(--font-mono); font-size: .82rem; color: #b9bcc6; }
.museum-drawer__count::after { content: "  ▾"; white-space: pre; }
.museum-drawer:not([open]) .museum-drawer__count::after { content: "  ▸"; }
.museum-drawer__more { margin: .7rem 1rem 0; font-size: .88rem; }
.museum-drawer__list { list-style: none; margin: 0; padding: .4rem 1rem .8rem; }
.museum-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  grid-template-areas: "thumb title" "thumb meta" "thumb where";
  column-gap: 1rem;
  align-items: center;
  padding: .55rem 0;
  border-bottom: 1px dotted #34323b;
  font-family: var(--font-mono);
}
.museum-row:hover .museum-row__title { color: var(--accent-ink); }
.museum-row__thumb { grid-area: thumb; display: flex; align-items: center; justify-content: center; height: 3.6rem; }
.museum-row__thumb img { width: auto; height: auto; max-width: 100%; max-height: 3.6rem; }
.museum-row__id { display: none; }
.museum-row__title { grid-area: title; font-size: .92rem; font-weight: 600; line-height: 1.3; }
.museum-row__meta { grid-area: meta; font-size: .8rem; color: var(--muted); }
.museum-row__where { grid-area: where; font-size: .78rem; color: var(--muted); }
.museum-row__where.is-stored { color: #c9cfdb; }
.museum-row__where.is-stored::before { content: "▣ "; }
@media (min-width: 900px) {
  .museum-row {
    grid-template-columns: 4.5rem 8.5rem minmax(0, 1.2fr) minmax(0, 1.2fr) 11rem;
    grid-template-areas: "thumb id title meta where";
  }
  .museum-row__id { display: block; grid-area: id; font-size: .78rem; color: var(--muted); }
}

/* ---- Tours ------------------------------------------------------------- */
.museum-tours { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); }
.museum-tour-card { padding: 1rem 1.1rem 1.1rem; background: var(--panel-bg); border: 1px solid var(--line); border-top: 3px solid var(--accent); }
.museum-tour-card p, .museum-tour-card h2 { margin: 0; }
.museum-tour-card__title { font-size: 1.25rem; }
.museum-tour-card__title a:hover { color: var(--accent-ink); }
.museum-tour-card__title a::after { content: " →"; color: var(--accent-ink); }
.museum-tour-card__summary { margin-top: .5rem !important; color: var(--muted); }
.museum-tour-card__meta { margin-top: .45rem !important; font-family: var(--font-mono); font-size: .82rem; color: var(--muted); }
.museum-tour-card__route { list-style: none; padding: 0; margin: .8rem 0 0; display: flex; flex-wrap: wrap; align-items: flex-end; gap: .35rem; counter-reset: stop; }
.museum-tour-card__route li { display: flex; }
.museum-tour-card__route img { height: 2.8rem; width: auto; background: var(--c, #2a282e); }
.museum-tours-later { margin-top: 2rem; font-family: var(--font-mono); }
.museum-tours-later__head { font-size: .78rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem; }
.museum-tours-later ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.museum-tours-later li { padding: .35rem .7rem; border: 1px dashed var(--line); color: var(--muted); font-size: .9rem; }

/* The tour bar stays in reach while you look. */
.museum-tourbar {
  position: sticky;
  top: calc(68px + .6rem);
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .35rem 1.4rem;
  margin: calc(-1 * clamp(.2rem, 1vw, .8rem)) 0 clamp(1.4rem, 3vw, 2rem);
  padding: .8rem 1rem;
  font-size: .92rem;
  background: color-mix(in srgb, #09080b 94%, transparent);
  border: 1px solid var(--line);
  border-left: 4px solid var(--room-accent);
  box-shadow: 0 .8rem 1.5rem -1rem rgb(0 0 0 / .9);
}
.museum-tourbar p { margin: 0; }
.museum-tourbar__title { font-family: var(--font-mono); font-weight: 600; color: var(--ink); }
.museum-tourbar__kicker { font-weight: 400; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--room-ink); margin-right: .4rem; }
.museum-tourbar__pos { font-family: var(--font-mono); font-size: .84rem; color: var(--muted); }
.museum-tourbar__work { font-weight: 600; color: var(--ink); }
.museum-tourbar__note { color: var(--muted); line-height: 1.45; }
.museum-tourbar__nav { display: flex; flex-wrap: wrap; gap: .45rem; }
.museum-tourbar__btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 40px;
  padding: .35rem .75rem;
  font-family: var(--font-mono);
  font-size: .84rem;
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
}
.museum-tourbar__btn:hover { border-color: var(--ink); }
.museum-tourbar__btn--next { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.museum-tourbar__btn--next:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.museum-tourbar__btn.is-disabled { opacity: .45; }
.museum-tourbar__btn--exit { margin-left: auto; }
@media (min-width: 1000px) {
  .museum-tourbar { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto; align-items: center; }
  .museum-tourbar__title, .museum-tourbar__pos { grid-column: 1; }
  .museum-tourbar__stop { grid-column: 2; grid-row: 1 / 3; }
  .museum-tourbar__nav { grid-column: 3; grid-row: 1 / 3; }
  .museum-tourbar__btn--exit { margin-left: 0; }
}
@media (max-width: 819px) {
  .museum-tourbar { top: 68px; }
  .museum-tourbar__note { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .museum-tourbar__btn { padding: .3rem .6rem; }
}

/* ---- Easter eggs -------------------------------------------------------- */
.museum-notice {
  position: relative;
  margin: .5rem 0 0;
  padding: .75rem 2.6rem .8rem .85rem;
  font-family: var(--font-mono);
  font-size: .86rem;
  line-height: 1.5;
  color: var(--ink);
  background: #0b0a0d;
  border: 1px dashed color-mix(in srgb, var(--ink) 45%, transparent);
}
.museum-notice p { margin: 0; }
.museum-notice p + p { margin-top: .35rem; }
.museum-notice p:first-child { letter-spacing: .06em; }
.museum-notice a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.museum-notice__close {
  position: absolute;
  top: .3rem;
  right: .3rem;
  width: 2.1rem;
  height: 2.1rem;
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--muted);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.museum-notice__close:hover { color: var(--ink); }
.museum-notice--float {
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: 1rem;
  width: min(30rem, calc(100vw - 2rem));
  transform: translateX(-50%);
  box-shadow: 0 1rem 2rem rgb(0 0 0 / .6);
}
.museum-placards { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.museum-placard {
  padding: 1rem 1.1rem;
  font-family: var(--font-type);
  font-size: 1rem;
  line-height: 1.45;
  color: #25231c;
  background: #ddd6c2;
  box-shadow: 0 .8rem 1rem -.7rem rgb(0 0 0 / .8);
}
.museum-placard:nth-child(odd) { transform: rotate(-.6deg); }
.museum-placard:nth-child(even) { transform: rotate(.5deg); }

/* ---- The /galleries lobby --------------------------------------------- */
.museum-lobby__intro { margin-top: 1rem; max-width: 60ch; color: var(--muted); }
.museum-lobby__rooms {
  list-style: none;
  padding: 0;
  margin: clamp(2rem, 4vw, 2.8rem) 0 0;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.museum-lobby__rooms li { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.museum-lobby__rooms a { display: grid; gap: .15rem; height: 100%; padding: .9rem 1rem 1rem; font-family: var(--font-mono); transition: background var(--speed); }
.museum-lobby__rooms a:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.museum-lobby__num { font-size: .78rem; color: var(--accent-ink); }
.museum-lobby__name { font-weight: 600; }
.museum-lobby__short { font-family: var(--font-sans); font-size: .86rem; color: var(--muted); line-height: 1.4; }
.museum-lobby__works { list-style: none; padding: 0; margin: clamp(2rem, 4vw, 3rem) 0 0; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; }
.museum-lobby__works li { flex: calc(var(--ar) * 100) 1 calc(var(--ar) * 7rem); max-width: calc(var(--ar) * 15rem); }
.museum-lobby__works a { display: block; background: var(--c, #25232a); }
.museum-lobby__works img { display: block; width: 100%; height: auto; }
.museum-lobby__works a:hover img { opacity: .85; }

/* ---- The permanent artwork page -------------------------------------- */
.artwork-page .page-hero { padding-bottom: clamp(1.2rem, 3vw, 2rem); }
.artwork-back { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; margin-bottom: 1.2rem; }
.artwork-page .page-hero h1 { max-width: 24ch; }
.artwork-page__meta { margin-top: .8rem; font-family: var(--font-mono); font-size: .95rem; color: var(--muted); }
.artwork-page__play { margin-top: 1.4rem; }
.artwork-figure { display: flex; justify-content: center; margin: 0; }
.artwork-figure__frame {
  --pad: clamp(.9rem, 3vw, 2.4rem);
  display: block;
  box-sizing: border-box;
  width: min(100%, calc(78svh * var(--ar) + 2 * var(--pad)), calc(1040px + 2 * var(--pad)));
  padding: var(--pad);
  position: relative;
}
.artwork-figure__frame a { display: block; cursor: zoom-in; }
.artwork-figure__frame img { display: block; width: 100%; height: auto; background: var(--c, #2a282e); }
.artwork-figure--mat .artwork-figure__frame { background: var(--mat); border: 4px solid var(--moulding); box-shadow: 0 2rem 2.5rem -1.6rem rgb(0 0 0 / .85); }
.artwork-figure--plate .artwork-figure__frame { background: #0a0908; border: 1px solid #3c3122; border-radius: 4px; box-shadow: 0 2rem 2.5rem -1.6rem rgb(0 0 0 / .85); }
.artwork-figure--plate .artwork-figure__frame::before { content: ""; position: absolute; inset: calc(var(--pad) * .45); border: 1px solid #a8844c; border-radius: 40% / 8%; pointer-events: none; }
.artwork-figure--cabinet .artwork-figure__frame { background: #0d0b12; border: 2px solid #2b2536; border-radius: 12px; }
.artwork-figure--float .artwork-figure__frame, .artwork-figure--pinned .artwork-figure__frame { --pad: 0px; filter: drop-shadow(0 1.4rem 1.2rem rgb(0 0 0 / .6)); }
.artwork-figure--bezel .artwork-figure__frame { background: #111013; border-radius: 1.4rem; box-shadow: inset 0 0 0 2px #2a282e; }
.artwork-figure__none {
  display: flex; align-items: center; justify-content: center;
  width: min(100%, 22rem); aspect-ratio: 4 / 5; padding: 1.5rem; text-align: center;
  font-family: var(--font-type); font-size: 1.2rem; color: #24211b; background: #e8e1cf;
}
.artwork-page__body { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.artwork-page__body > * { min-width: 0; }
@media (min-width: 980px) {
  .artwork-page__body { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); align-items: start; }
}
.artwork-page .wall-label { max-width: none; }
.artwork-section + .artwork-section { margin-top: clamp(2rem, 4vw, 2.8rem); }
.artwork-section__h { font-family: var(--font-mono); font-size: .8rem !important; font-weight: 500 !important; letter-spacing: .16em !important; text-transform: uppercase; color: var(--muted); margin-bottom: .9rem; }
.artwork-page .museum-support__photos img { height: 7rem; }
.artwork-page .museum-support__h { color: var(--ink); }
.artwork-page .museum-support__links a { color: var(--ink); }
.artwork-page .museum-info__history a { color: var(--ink); }
.artwork-page .museum-info__history span { color: var(--muted); }
.artwork-related { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 1.2rem; }
.artwork-related li { flex: calc(var(--ar) * 100) 1 calc(var(--ar) * 8rem); max-width: calc(var(--ar) * 16rem); }
.artwork-related a { display: block; font-family: var(--font-mono); font-size: .86rem; }
.artwork-related img { display: block; width: 100%; height: auto; background: var(--c, #25232a); margin-bottom: .45rem; }
.artwork-related a:hover { color: var(--accent-ink); }
.artwork-pager { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); padding-top: 1.2rem; font-family: var(--font-mono); }
.artwork-pager a { display: grid; gap: .15rem; }
.artwork-pager a:hover strong { color: var(--accent-ink); }
.artwork-pager span { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.artwork-pager strong { font-weight: 600; }
.artwork-pager__next { text-align: right; grid-column: 2; }

/* ---- Exhibition pages ------------------------------------------------- */
.exhibition-page__meta { margin-top: .8rem; font-family: var(--font-mono); color: var(--muted); }
.exhibition-page .prose { color: var(--ink); }
/* The reconstruction: bays along a wall, each A over B, scrolling sideways. */
.museum-recon {
  overflow-x: auto;
  padding: 2rem 1.4rem 1.2rem;
  background-color: var(--wall);
  background-image: radial-gradient(120% 18rem at 50% 0, var(--room-light), transparent 70%);
  border: 1px solid var(--line);
  scrollbar-width: thin;
}
.museum-recon:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
.museum-recon__wall { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; gap: 1.6rem; width: max-content; }
.museum-recon__bay { display: grid; grid-template-rows: 1fr 1fr auto; gap: .9rem; height: 26rem; }
.museum-recon__bay--single { grid-template-rows: 2fr auto; }
.museum-recon__slot { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 0; }
.museum-recon__slot a { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; min-height: 0; }
.museum-recon__slot img { width: auto; height: auto; max-height: calc(100% - 1.5rem); max-width: 20rem; min-height: 0; padding: .45rem; background: var(--mat); border: 2px solid var(--moulding); box-sizing: border-box; box-shadow: 0 .8rem 1rem -.7rem rgb(0 0 0 / .8); }
.museum-recon__slot a:hover img { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
.museum-recon__pos { font-family: var(--font-mono); font-size: .76rem; color: var(--muted); margin-top: .3rem; }
.museum-recon__bay-label { text-align: center; font-family: var(--font-mono); font-size: .8rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: .35rem; }
@media (max-width: 819px) {
  .museum-recon { overflow-x: visible; padding: 1.2rem 1rem; }
  .museum-recon__wall { width: auto; flex-direction: column; gap: 1.6rem; }
  .museum-recon__bay, .museum-recon__bay--single { height: auto; grid-template-rows: none; grid-template-columns: 1fr 1fr; align-items: end; }
  .museum-recon__bay--single { grid-template-columns: 1fr; }
  .museum-recon__bay-label { grid-column: 1 / -1; }
  .museum-recon__slot img { height: auto; width: 100%; max-width: 100%; }
}
.museum-checklist { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: .9rem; }
.museum-checklist li { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 1rem; padding: .5rem 0; border-bottom: 1px dotted var(--line); }
.museum-checklist a:hover { color: var(--accent-ink); }
.museum-checklist span { color: var(--muted); }
.museum-checklist small { display: block; font-size: .8rem; color: var(--muted); }
.exhibition-page__press-meta { display: block; margin-top: .15rem; font-size: .84rem; color: var(--muted); }

/* ---- The hub home page (index.php): the museum at the top of "Lately" ---- */
.museum-home {
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.4rem);
  align-items: center;
  margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
  padding: clamp(1.1rem, 2.6vw, 2rem);
  background: color-mix(in srgb, var(--paper) 72%, transparent);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
}
@media (min-width: 900px) { .museum-home { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); } }
.museum-home p, .museum-home h2 { margin: 0; }
.museum-home__kicker { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); }
.museum-home__name { margin-top: .45rem !important; font-size: clamp(1.45rem, 1.1rem + 1.3vw, 2.1rem); line-height: 1.15; }
.museum-home__name a:hover { color: var(--accent-ink); }
.museum-home__sub { margin-top: .6rem !important; font-family: var(--font-type); color: var(--muted); max-width: 46ch; }
.museum-home .btn-row { margin-top: 1.2rem; }
.museum-home .museum-lobby__works { margin: 0; align-items: center; gap: .7rem; }
/* Smaller than the lobby's strip, so five works sit in one row beside the text. */
.museum-home .museum-lobby__works li { flex-basis: calc(var(--ar) * 5.5rem); max-width: calc(var(--ar) * 8rem); }

/* ---- The study collection ---------------------------------------------- */
/* Objects Matthew keeps rather than makes: the Archive's computers, cameras
   and trains (data/museum.php). Their labels hang off a dashed rule instead of
   a solid one, and say "Study collection" in words too. A computer with no
   photograph hangs as its own start-up screen, the lines its Archive page
   boots with, amber on black inside the bezel frame. The screens are static;
   only the selected machine's cursor blinks. */
.museum-work--study .museum-label { border-left-style: dashed; }
.museum-work__boot,
.museum-cat__boot {
  display: flex;
  flex-direction: column;
  gap: .05em;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: .65em .8em;
  overflow: hidden;
  font-family: var(--font-terminal);
  font-size: clamp(.95rem, calc(var(--wall-h) * var(--size, 1) * .085), 1.15rem);
  line-height: 1.15;
  text-align: left;
  color: #ffb54a;
  background: radial-gradient(120% 90% at 50% 40%, #1b1307, #060403 75%);
  border-radius: .5rem;
  text-shadow: 0 0 .45em rgb(255 160 40 / .45);
}
.museum-work__boot > span,
.museum-cat__boot > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.museum-work__boot-ready::after,
.museum-cat__boot-ready::after { content: "_"; margin-left: .15em; }
.museum.is-live .museum-work.is-selected .museum-work__boot-ready::after { animation: museum-cursor 1.1s steps(1) infinite; }
@keyframes museum-cursor { 50% { opacity: 0; } }
.museum-cat__media--boot { display: block; background: #060403; }
.museum-cat__boot { font-size: .86rem; border-radius: 0; }
.museum-cat--list .museum-cat__media--boot { width: 5.3rem; height: 4rem; }
/* Too small for boot text in the list, so the thumbnail is just the prompt. */
.museum-cat--list .museum-cat__boot { justify-content: center; font-size: .9rem; padding: .3em .5em; }
.museum-cat--list .museum-cat__boot > span:not(.museum-cat__boot-ready) { display: none; }
.museum-info__notes { margin-top: .7rem !important; font-size: .88rem; line-height: 1.5; color: var(--label-muted); }

/* ---- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .museum.is-live .museum-work.is-selected .museum-work__boot-ready::after { animation: none; }
  .museum-stage, .museum-stage.is-leaving { transition: none; }
  .museum-work__frame, .museum-label, .museum-plan__room { transition: none; }
  .museum-work__link:hover .museum-work__frame { transform: none; }
  .museum.is-dimmed .museum-work__frame { transition: none; }
}

/* ---- Print: the wall becomes a checklist ------------------------------ */
@media print {
  .museum-dir, .museum-room__tools, .museum-tourbar__nav, .museum-panel, .museum-notice, .museum-filters, .museum-annex { display: none !important; }
  .container.museum { display: block; max-width: none; }
  .museum-stage { background: #fff !important; color: #000; border: 0; box-shadow: none; padding: 0; }
  .museum-hang { display: block; }
  .museum-hang__item { width: auto !important; display: grid; grid-template-columns: 7rem 1fr; align-items: start; break-inside: avoid; margin-bottom: 1rem; }
  .museum-work { flex-direction: row; align-items: flex-start; gap: 1rem; }
  .museum-work__frame { width: 6rem !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; transform: none !important; filter: none !important; }
  .museum-label { color: #000; border-left-color: #000; }
  .museum-label__title { color: #000; }
}