/* The Museum — foyer, elevator, floors, galleries and bays.
   docs/design-language.md, "The museum". Materials follow the New Online
   Experience style guide (walnut, charcoal stone, brushed brass, 2700K light);
   type and text colours are the site's own. */

:root {
  --black:      #0E0C09;
  --deep:       #1A1610;
  --parchment:  #F2EBD9;
  --cream:      #EDE3CC;
  --gold:       #C9A84C;
  --gold-dim:   #8A6F2E;
  --gold-label: #A88A3C;
  --muted:      #A89478;
  --rule:       #3D2B1A;
  --walnut:     #2C241E;
  --walnut-hi:  #4A3828;
  --stone:      #1C2024;
  --brass:      #B08D57;
  --brass-hi:   #E2C98F;
  --hdr:        3.5rem;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  background: #0A0907;
  color: var(--parchment);
  font-family: 'Cormorant Garamond', Georgia, serif;
  min-height: 100vh;
  overflow-x: hidden;
}
button { font: inherit; color: inherit; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ── Header: the brand, where you are, the Index ─────── */
.mhead {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--hdr);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0 clamp(1rem, 3vw, 2rem);
  background: linear-gradient(to bottom, rgba(14,12,9,0.96), rgba(14,12,9,0.88));
  border-bottom: 1px solid var(--rule);
  backdrop-filter: blur(6px);
}
.mhead-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex: none;
  text-decoration: none;
  font-family: 'Cinzel', serif;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-label);
}
.mhead-mark {
  width: 1.9rem; height: 1.9rem; display: block;
  background-color: var(--gold);
  -webkit-mask: url(/assets/images/lic-mark.svg) center / contain no-repeat;
          mask: url(/assets/images/lic-mark.svg) center / contain no-repeat;
}
.mhead-trail {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow: hidden;
  white-space: nowrap;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  color: var(--muted);
}
.mhead-trail a { color: var(--muted); text-decoration: none; }
.mhead-trail a:hover { color: var(--gold); }
.mhead-trail .sep { color: var(--rule); }
.mhead-trail a, .mhead-trail .sep { flex: none; }
.mhead-trail [aria-current] { min-width: 0; color: var(--parchment); overflow: hidden; text-overflow: ellipsis; }
/* A phone has room for where you are and the step before it, no more. */
@media (max-width: 520px) {
  .mhead-trail > :not(:nth-last-child(-n+3)) { display: none; }
}
.mhead-tools { display: flex; align-items: center; gap: 0.5rem; flex: none; }
.mhead-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 40px;
  padding: 0 0.9rem;
  background: none;
  border: 1px solid var(--rule);
  color: var(--muted);
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.mhead-btn:hover { border-color: var(--gold-dim); color: var(--gold); }
#open-index { border-color: var(--gold-dim); color: var(--gold-label); }

/* ── Scenes ─────────────────────────────────────────── */
.scene-host { display: block; outline: none; }
.scene { animation: scene-in 0.55s ease both; }
.scene--up { animation-name: scene-up; }
@keyframes scene-in { from { opacity: 0; transform: scale(1.025); } to { opacity: 1; transform: none; } }
@keyframes scene-up { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: none; } }

/* A room photographed at 1376×768. The stage keeps that ratio so the
   hotspots, placed in percent of the picture, stay on what they point at. */
.stage {
  position: relative;
  width: min(100%, calc((100svh - var(--hdr)) * 1376 / 768));
  aspect-ratio: 1376 / 768;
  margin: 0 auto;
  overflow: hidden;
  background: #0A0907;
}
.stage-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.stage::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 120px rgba(0,0,0,0.55);
}

/* A place in the room you can go to. Quiet until pointed at; its plaque
   names it. */
.hotspot {
  position: absolute;
  z-index: 2;
  display: block;
  border: 1px solid transparent;
  border-radius: 3px;
  background: none;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.25s, background 0.25s;
}
.hotspot:hover, .hotspot:focus-visible {
  border-color: rgba(226, 201, 143, 0.55);
  background: rgba(226, 201, 143, 0.06);
}
.hotspot-label {
  position: absolute;
  left: 50%;
  bottom: 0.75rem;
  transform: translateX(-50%);
  padding: 0.35rem 0.8rem;
  background: rgba(14, 12, 9, 0.85);
  border: 1px solid var(--brass);
  font-family: 'Cinzel', serif;
  font-size: clamp(0.62rem, 0.9vw, 0.78rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-hi);
  white-space: nowrap;
  opacity: 0.85;
  transition: opacity 0.25s;
}
.hotspot:hover .hotspot-label, .hotspot:focus-visible .hotspot-label { opacity: 1; }
.hotspot--label-top .hotspot-label { bottom: auto; top: 0.75rem; }

/* The plaque in the corner of a room: where you are. */
.plaque {
  position: absolute;
  z-index: 3;
  left: 2.2%;
  top: 4%;
  max-width: min(26rem, 40%);
  padding: 0.9rem 1.1rem 1rem;
  background: linear-gradient(to bottom, rgba(14,12,9,0.88), rgba(14,12,9,0.78));
  border: 1px solid rgba(176, 141, 87, 0.55);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.plaque--right { left: auto; right: 2.2%; }
.plaque-eyebrow {
  font-family: 'Cinzel', serif;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-label);
  margin-bottom: 0.35rem;
}
.plaque-title {
  font-family: 'Cinzel', serif;
  font-weight: 400;
  font-size: clamp(1rem, 1.7vw, 1.35rem);
  letter-spacing: 0.06em;
  color: var(--parchment);
  line-height: 1.25;
}
.plaque-line {
  margin-top: 0.45rem;
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: clamp(0.9rem, 1.15vw, 1.02rem);
  line-height: 1.4;
  color: var(--cream);
}

/* Wayfinding under a room: the same places as the hotspots, as plain
   controls, for keyboards, screen readers and small screens. */
.wayfinding {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 1.25rem 1rem;
  background: linear-gradient(to bottom, #12100C, #0A0907);
  border-top: 1px solid var(--rule);
}
.way {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0 1.1rem;
  background: linear-gradient(to bottom, #2A2219, #1E1913);
  border: 1px solid var(--walnut-hi);
  color: var(--brass-hi);
  font-family: 'Cinzel', serif;
  font-size: 0.74rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.way:hover { border-color: var(--brass); color: var(--parchment); }
.way-note { font-family: 'Cormorant Garamond', serif; font-style: italic; letter-spacing: 0; text-transform: none; font-size: 0.92rem; color: var(--muted); }

/* The real coin laid over a doorway's painted medallion. */
.medallion {
  position: absolute;
  z-index: 2;
  border-radius: 50%;
  overflow: hidden;
  background: #050403;
  box-shadow: 0 0 0 2px rgba(176,141,87,0.7), 0 0 26px 6px rgba(255, 220, 160, 0.28);
  pointer-events: none;
}
.medallion img, .portal-coin img, .pocket img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transform: scale(var(--pocket-s, 1.22)) translate(var(--pocket-x, 0%), var(--pocket-y, 0%));
}

/* ── The promenade: a floor's gallery doorways ──────── */
.section {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.35)),
    repeating-linear-gradient(90deg, #241C15 0 2px, #2A2118 2px 140px, #231B14 140px 142px, #2C231A 142px 280px);
  border-top: 1px solid #3A2C1F;
}
.section--stone {
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255,230,190,0.06), rgba(0,0,0,0) 70%),
    linear-gradient(to bottom, #1C2024, #15181B);
}
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.75rem clamp(1rem, 3vw, 2rem) 0.75rem;
}
.section-label {
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.section-note { font-style: italic; color: var(--muted); font-size: 1rem; }

.stroll { position: relative; max-width: 1400px; margin: 0 auto; }
.track {
  display: flex;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  padding: 1rem clamp(1rem, 3vw, 2rem) 2.25rem;
  scrollbar-width: none;
}
.track::-webkit-scrollbar { display: none; }
.track > * { scroll-snap-align: center; flex: none; }
/* Edge chevrons: walking past without the wheel. */
.chev {
  position: absolute;
  top: 50%;
  z-index: 4;
  width: 2.75rem;
  height: 4.5rem;
  transform: translateY(-50%);
  background: rgba(14,12,9,0.72);
  border: 1px solid var(--walnut-hi);
  color: var(--brass-hi);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.2s, border-color 0.2s;
}
.chev:hover { border-color: var(--brass); }
.chev--l { left: 0.4rem; }
.chev--r { right: 0.4rem; }
.chev[disabled] { opacity: 0; pointer-events: none; }

/* From the lobby picture down to the hall: the way to walk the floor. */
.hall-cue {
  position: absolute;
  z-index: 3;
  right: 2.2%;
  bottom: 4%;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 1.1rem;
  background: rgba(14,12,9,0.85);
  border: 1px solid var(--brass);
  font-family: 'Cinzel', serif;
  font-size: clamp(0.66rem, 0.95vw, 0.8rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-hi);
  text-decoration: none;
  animation: cue 1.6s ease-in-out 1s 2;
}
.hall-cue:hover { color: var(--parchment); border-color: var(--brass-hi); }
@keyframes cue { 50% { transform: translateY(4px); box-shadow: 0 0 18px rgba(255,214,150,0.35); } }
/* The first door of the hall is the one already seen in the picture. */
/* Every door keeps the same line; the note sits in the space above it. */
.portal { padding-top: 1.9rem; }
.portal-here {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--gold-label);
  text-align: center;
  white-space: nowrap;
}

/* A gallery doorway: walnut architrave, the numeral in the lintel, the arc's
   coin above, the argument beside, the dark of the room beyond. */
.portal {
  position: relative;
  width: clamp(15rem, 24vw, 19rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.portal-coin {
  flex: none;
  width: 6.2rem;
  height: 6.2rem;
  border-radius: 50%;
  overflow: hidden;
  background: #050403;
  margin: 0.4rem auto auto;        /* top of the opening; the text keeps the foot */
  position: relative;
  z-index: 2;
  box-shadow: 0 0 0 2px rgba(176,141,87,0.75), 0 0 34px 8px rgba(255, 220, 160, 0.22);
}
.portal-coin--mark { position: relative; }
.portal-coin--mark::after {        /* no coin photographed yet: the mark holds the place */
  content: '';
  position: absolute;
  inset: 20%;
  background-color: var(--gold-dim);
  -webkit-mask: url(/assets/images/lic-mark.svg) center / contain no-repeat;
          mask: url(/assets/images/lic-mark.svg) center / contain no-repeat;
}
.portal-frame {
  width: 100%;
  padding: 0.65rem 0.65rem 0;
  background: linear-gradient(to right, #241B13, #3B2C1F 12%, #2E2318 50%, #3B2C1F 88%, #241B13);
  border: 1px solid #4E3B29;
  box-shadow: 0 18px 40px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,230,190,0.12);
}
.portal-lintel {
  display: block;
  padding: 0.55rem 0.4rem 0.65rem;
  margin-bottom: 0.55rem;
  background: linear-gradient(to bottom, #2B2117, #1E1710);
  border: 1px solid #4E3B29;
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  letter-spacing: 0.24em;
  color: var(--brass-hi);
  text-align: center;
}
/* The lintel names the arc; a smaller line above says what the room is. */
.lintel-kind {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.32em;
  color: var(--gold-label);
  margin-bottom: 0.15rem;
}
/* Each lobby picture has "Gallery …" painted by its first doorway. A walnut
   plate engraved with the arc's name covers it, as the real coin covers the
   painted medallion. Placed in percent of the picture, per floor
   (museum.json, floor.stage.lintel); --lintel-fs scales the lettering. */
.lintel-cover {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, #3A2A1C, #2A1E14 55%, #22180F);
  box-shadow: inset 0 1px 0 rgba(255,230,190,0.12), 0 1px 2px rgba(0,0,0,0.6);
  font-family: 'Cinzel', serif;
  font-size: calc(var(--lintel-fs, 1) * clamp(0.55rem, 1.25vw, 1.15rem));
  letter-spacing: 0.18em;
  white-space: nowrap;
  color: #C9A86A;
  text-shadow: 0 1px 0 rgba(0,0,0,0.7), 0 0 8px rgba(255,214,150,0.25);
  pointer-events: none;
}
.portal-opening {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0;
  height: 19rem;
  padding: 1rem;
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(255,220,160,0.10), rgba(0,0,0,0) 70%),
    linear-gradient(to bottom, #0B0A08, #15120D);
  border: 1px solid #120F0B;
  text-align: center;
  transition: background 0.35s;
}
.portal-opening--bg { overflow: hidden; }
.portal-bg {                       /* the Thread room's backdrop, seen through its doorway */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7) contrast(0.92);
  opacity: 0.88;
  transition: transform 0.6s ease, filter 0.4s;
}
.portal-opening--bg::after {       /* keeps the claim legible at the foot */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(10,9,7,0) 35%, rgba(10,9,7,0.88) 100%);
}
.portal-opening--bg > :not(.portal-bg) { position: relative; z-index: 2; }
.portal:hover .portal-bg, .portal:focus-visible .portal-bg { transform: scale(1.03); filter: brightness(0.8) contrast(0.92); }
.portal:hover .portal-opening, .portal:focus-visible .portal-opening {
  background:
    radial-gradient(ellipse 80% 70% at 50% 100%, rgba(255,220,160,0.2), rgba(0,0,0,0) 72%),
    linear-gradient(to bottom, #0F0D0A, #1C1711);
}
.portal-title {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--parchment);
  margin-bottom: 0.4rem;
  text-wrap: balance;
}
.portal-argument {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.98rem;
  line-height: 1.35;
  color: var(--cream);
  opacity: 0.85;
  margin-bottom: 0.7rem;
  text-wrap: balance;
}
.portal-meta {
  font-family: 'Cinzel', serif;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-label);
}

/* ── A gallery: the back wall, then its bays ─────────── */
.alcove {
  position: relative;
  width: clamp(16rem, 26vw, 21rem);
  height: clamp(22rem, 52vh, 30rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.1rem;
  overflow: hidden;
  background: #17140F;
  border-left: 10px solid #2E2318;
  border-right: 10px solid #2E2318;
  box-shadow: inset 0 0 60px rgba(0,0,0,0.7), 0 20px 40px rgba(0,0,0,0.45);
  text-decoration: none;
  color: inherit;
}
.alcove::before {          /* the bay's own downlight */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 45% at 50% 0%, rgba(255,230,190,0.16), rgba(0,0,0,0) 70%),
              linear-gradient(to bottom, rgba(10,9,7,0) 35%, rgba(10,9,7,0.88) 100%);
}
.alcove-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7) contrast(0.92);
  opacity: 0.88;
  transition: transform 0.6s ease, filter 0.4s;
}
.alcove:hover .alcove-bg { transform: scale(1.03); filter: brightness(0.8) contrast(0.92); }
.alcove-body { position: relative; z-index: 2; }
.alcove-kind {
  font-family: 'Cinzel', serif;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-label);
  margin-bottom: 0.35rem;
}
.alcove-title {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 1.22rem;
  line-height: 1.25;
  color: var(--parchment);
  margin-bottom: 0.7rem;
  text-wrap: balance;
}
.alcove-case {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.6rem;
  background: linear-gradient(to bottom, rgba(255,244,214,0.45), rgba(255,244,214,0) 10px), rgba(18,16,12,0.9);
  border: 1px solid rgba(242,235,217,0.22);
  margin-bottom: 0.7rem;
  min-height: 3.1rem;
  align-items: center;
}
.alcove-status {
  font-family: 'Cinzel', serif;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.alcove--open .alcove-status { color: var(--brass-hi); }
.alcove--planned .alcove-title { color: var(--cream); opacity: 0.85; }
.alcove-prep { font-style: italic; color: var(--muted); font-size: 0.98rem; }
.alcove--plain { background: radial-gradient(ellipse 80% 60% at 50% 20%, #2A241C, #15120E); }

.pocket {
  display: block;
  flex: none;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  overflow: hidden;
  background: #050403;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.8), 0 0 0 1px var(--rule);
}

/* The bay index: every bay of the gallery, one step away. */
.pills {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  justify-content: safe center;
  gap: 0.4rem;
  overflow-x: auto;
  padding: 0.7rem clamp(1rem, 3vw, 2rem);
  background: linear-gradient(to bottom, rgba(26,22,16,0.94), rgba(14,12,9,0.98));
  border-top: 1px solid #5A4630;
  scrollbar-width: none;
}
.pills::-webkit-scrollbar { display: none; }
.pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 38px;
  padding: 0 0.85rem;
  background: linear-gradient(to bottom, #3A2E1F, #261E15);
  border: 1px solid #6A5233;
  border-radius: 19px;
  color: var(--brass-hi);
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.98rem;
  text-decoration: none;
  white-space: nowrap;
}
.pill:hover { border-color: var(--brass-hi); }
.pill[aria-current] { background: linear-gradient(to bottom, #6B5124, #4A3818); color: var(--parchment); }
.pill-dot { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--brass); }
.pill--open .pill-dot { background: var(--brass-hi); border-color: var(--brass-hi); }

/* ── A bay: the exhibit ensemble ─────────────────────── */
.bay {
  position: relative;
  min-height: calc(100svh - var(--hdr));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.bay > .pills { margin-top: auto; }
.bay-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.62) contrast(0.92);
  opacity: 0.85;
}
.bay-bg--plain { background: radial-gradient(ellipse 70% 50% at 50% 10%, #2A241C, #0E0C09 75%); }
.bay-bg--slate { background: url(/assets/images/museum/rotunda/slate.webp) center top / 900px auto repeat #1A1714; filter: none; }
.bay--rotunda::before { background: radial-gradient(ellipse 70% 60% at 50% 30%, rgba(10,9,7,0), rgba(10,9,7,0.7) 100%); }
/* A Thread room stacks its sheets, so it runs far taller than a bay. Its
   backdrop keeps a bay's size, one screen high, and fades into the dark
   floor below; otherwise object-fit: cover blows the wall up to fill the
   whole column and the room reads at a different scale from its neighbours. */
.bay--thread .bay-bg {
  bottom: auto;
  height: calc(100svh - var(--hdr));
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
          mask-image: linear-gradient(to bottom, #000 70%, transparent);
}
.bay::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 60% 55% at 50% 40%, rgba(10,9,7,0.15), rgba(10,9,7,0.75) 100%),
    linear-gradient(to bottom, rgba(10,9,7,0.2), rgba(10,9,7,0.6));
  pointer-events: none;
}
.bay-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 1rem clamp(1rem, 3vw, 2rem) 2rem;
}
.bay-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-bottom: 1rem;
}
.bay-back { margin-right: auto; }
.bay-heading { flex: 1 1 18rem; min-width: 0; }
.bay-kind {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-label);
}
.bay-title {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  color: var(--parchment);
  line-height: 1.2;
}
.bay-step { display: flex; gap: 0.4rem; }
.bay-step a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem;
  background: rgba(14,12,9,0.7); border: 1px solid var(--walnut-hi);
  color: var(--brass-hi); text-decoration: none; font-size: 1.2rem;
}
.bay-step a[aria-disabled="true"] { opacity: 0.3; pointer-events: none; }

.ensemble {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(17rem, 26vw, 25rem);
  grid-template-areas: "films films" "panel cubby" "coins coins";
  column-gap: clamp(1rem, 2.5vw, 2rem);
  row-gap: 1rem;
  align-items: end;
}
.ensemble--drawn { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main"; }
.ensemble-main { grid-area: main; display: flex; flex-direction: column; align-items: center; gap: 1rem; min-width: 0; }
/* Wide, the board stands beside the panel on one floor line, at the right,
   as an object stands beside its label; the films above, the case below
   (Bryan, 22 October 2026). The main column's parts join the bay's grid. */
@media (min-width: 1281px) {
  .ensemble:not(.ensemble--drawn) > .ensemble-main { display: contents; }
  .ensemble:not(.ensemble--drawn) .zone-films { grid-area: films; justify-self: center; }
  .ensemble:not(.ensemble--drawn) .zone-display { grid-area: panel; justify-self: center; }
  .ensemble:not(.ensemble--drawn) .zone-coins { grid-area: coins; justify-self: center; }
}

/* 1. The monitor, docked above the panel: the films, as a strip. */
.monitor {
  width: min(100%, 52rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.5rem 0.6rem;
  background: linear-gradient(to bottom, #1B1611, #120F0B);
  border: 1px solid #4E3B29;
  box-shadow: inset 0 1px 0 rgba(255,230,190,0.08), 0 10px 30px rgba(0,0,0,0.5);
}
.monitor-label {
  font-family: 'Cinzel', serif;
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-label);
}
/* The films, centred while they fit, scrolling sideways when they don't. */
.monitor-strip {
  display: flex;
  justify-content: safe center;
  gap: 0.6rem;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  padding-bottom: 0.35rem;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-dim) transparent;
}
.monitor-strip > * { scroll-snap-align: center; }
.film-card {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 15rem;
  max-width: 20rem;
  padding: 0.3rem 0.7rem 0.3rem 0.3rem;
  background: #0B0A08;
  border: 1px solid #2E2318;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s;
}
.film-card:hover { border-color: var(--brass); }
.film-thumb { position: relative; flex: none; width: 6.4rem; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.film-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.film-thumb::after {
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-40%, -50%);
  border-style: solid; border-width: 0.38rem 0 0.38rem 0.62rem;
  border-color: transparent transparent transparent var(--brass-hi);
}
.film-name { font-size: 1rem; line-height: 1.2; color: var(--cream); }
.film-kind { display: block; font-family: 'Cinzel', serif; font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 0.15rem; }
.monitor-idle { padding: 0.2rem 0.8rem 0.3rem; font-style: italic; color: var(--muted); text-align: center; }

/* ── A gallery's argument, read between the wall and the bays ── */
.argument {
  background:
    radial-gradient(ellipse 60% 70% at 50% 0%, rgba(255,230,190,0.07), rgba(0,0,0,0) 70%),
    linear-gradient(to bottom, #1C2024, #16191C);
  border-top: 1px solid #3A2C1F;
}
.argument-inner {
  max-width: 44rem;
  margin: 0 auto;
  padding: 2.75rem clamp(1rem, 4vw, 2rem) 2.5rem;
  text-align: center;
}
.argument .section-label { margin-bottom: 1.1rem; }
.argument-inscription {
  font-family: 'IM Fell English', serif;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.4;
  color: var(--parchment);
  text-wrap: balance;
  margin-bottom: 1.4rem;
}
.argument-inscription span {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass-hi);
  margin-bottom: 0.5rem;
}
.argument-thesis, .argument-more p {
  font-size: 1.15rem;
  line-height: 1.75;
  color: var(--cream);
  text-align: left;
  margin-bottom: 1.1rem;
}
.argument-more { text-align: left; }
.argument-more summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-family: 'Cinzel', serif;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-label);
}
.argument-more summary::-webkit-details-marker { display: none; }
.argument-more summary::after { content: '+'; font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; letter-spacing: 0; }
.argument-more[open] summary::after { content: '\2212'; }
.argument-more summary:hover { color: var(--gold); }
.argument-more[open] summary { margin-bottom: 0.8rem; }
.argument-note { font-style: italic; color: var(--muted); margin-bottom: 1rem; }
.argument-link a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: 'Cinzel', serif; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-label); text-decoration: none;
}
.argument-link a:hover { color: var(--gold); }

/* 2. The interactive panel, the heart of the bay. */
.panel-case {
  width: min(100%, calc(72vh - 2rem), 46rem);
  padding: clamp(0.5rem, 1.4vw, 1rem);
  background: linear-gradient(to bottom, #2B2117, #1B150F);
  border: 1px solid #4E3B29;
  box-shadow: 0 25px 60px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,230,190,0.1);
}
.panel-case iframe { display: block; width: 100%; height: 0; border: 0; }
/* Wide enough, the panel sets each coin's text beside the board (its own
   two columns start at 760px), so the case widens to let it: the board then
   stands at about 57% of the case, which 125vh keeps within the screen. */
@media (min-width: 860px) {
  .panel-case { width: min(100%, 72rem, 125vh); }
}
.panel-wait { height: 14rem; display: flex; align-items: center; justify-content: center; font-style: italic; color: var(--muted); }
.prep {
  width: min(100%, 40rem);
  padding: 2.25rem 2rem;
  text-align: center;
  background: linear-gradient(to bottom, rgba(14,12,9,0.88), rgba(14,12,9,0.78));
  border: 1px solid rgba(176,141,87,0.55);
}
.prep-eyebrow { font-family: 'Cinzel', serif; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-label); margin-bottom: 0.8rem; }
.prep-title { font-family: 'IM Fell English', serif; font-style: italic; font-weight: 400; font-size: 1.5rem; color: var(--parchment); margin-bottom: 0.7rem; }
.prep-line { color: var(--cream); font-size: 1.08rem; line-height: 1.55; }
.prep a { color: var(--gold); }

/* 3. The vitrine: the display's coins under glass. */
.vitrine {
  width: min(100%, 52rem);
  padding: 1rem 1rem 1.2rem;
  background:
    linear-gradient(to bottom, rgba(255,244,214,0.55), rgba(255,244,214,0) 12px),
    linear-gradient(135deg, rgba(242,235,217,0.06), rgba(242,235,217,0) 45%),
    #12100C;
  border: 1px solid rgba(242,235,217,0.22);
  border-bottom: 10px solid #2A2017;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.6), 0 20px 40px rgba(0,0,0,0.5);
}
.vitrine-label { text-align: center; font-family: 'Cinzel', serif; font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-label); margin-bottom: 0.9rem; }
.vitrine-list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 1.4rem; }
.vcoin {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  width: 7.5rem; padding: 0; background: none; border: 0; cursor: pointer;
}
.vcoin .pocket { width: 4.6rem; height: 4.6rem; transition: box-shadow 0.2s; }
.vcoin:hover .pocket { box-shadow: inset 0 2px 6px rgba(0,0,0,0.8), 0 0 0 1px var(--brass-hi); }
.vcoin-name { font-size: 0.95rem; line-height: 1.2; color: var(--cream); text-wrap: balance; }
.vitrine-empty { text-align: center; font-style: italic; color: var(--muted); }

/* 4. The cubby: the physical board, in a felt-lined niche. Built displays
   only; a drawn display never has one (style guide, 3.4).

   The digital panel and the photograph look alike at a glance, so the cubby
   says "object" with everything a photograph of a thing in a room has and a
   rendering doesn't: a recess with depth, one warm light source you can see,
   the beam it throws, a stand the board leans on, shadows cast by both, the
   sheen of a face under glass, and an engraved plate. Geometry is in percent
   of the niche (100 wide by 112 tall), so it scales as one picture. */
.cubby {
  grid-area: cubby;
  padding: 14px 14px 12px;
  background:
    linear-gradient(to bottom, rgba(255,230,190,0.06), rgba(0,0,0,0) 30%),
    linear-gradient(90deg, #241B14, #34281D 15%, #2C221A 50%, #34281D 85%, #241B14);
  border: 1px solid #4E3B29;
  box-shadow:
    inset 0 1px 0 rgba(255,230,190,0.14),
    inset 0 0 0 4px #2A2017, inset 0 0 0 5px #5A4630,    /* the moulding round the opening */
    0 18px 40px rgba(0,0,0,0.55);
}
.cubby-niche {
  position: relative;
  aspect-ratio: 100 / 112;
  overflow: hidden;
  background: #15181B;
  box-shadow:
    inset 0 14px 22px -6px rgba(0,0,0,0.95),             /* the head of the recess */
    inset 0 -6px 14px -4px rgba(0,0,0,0.7),
    inset 10px 0 18px -8px rgba(0,0,0,0.9),
    inset -10px 0 18px -8px rgba(0,0,0,0.9);
}
.cubby-niche > * { position: absolute; }

/* The felt: back wall with a fine nap, lit where the beam lands. */
.niche-wall {
  inset: 0;
  background:
    radial-gradient(ellipse 48% 42% at 50% 34%, rgba(255,205,140,0.20), rgba(255,205,140,0) 72%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(to bottom, #1A1E22, #1F2428 60%, #191D20);
}
/* The return walls, seen in perspective: the niche has depth. */
.niche-side { top: 0; bottom: 0; width: 9%; }
.niche-side--l { left: 0;  background: linear-gradient(90deg, #0C0E10, #171B1E); clip-path: polygon(0 0, 100% 7%, 100% 88%, 0 100%); }
.niche-side--r { right: 0; background: linear-gradient(-90deg, #0C0E10, #171B1E); clip-path: polygon(0 7%, 100% 0, 100% 100%, 0 88%); }
/* The floor of the niche: felt on a shelf, catching the pool of light. */
.niche-floor {
  left: 0; right: 0; bottom: 0; height: 12.5%;
  background:
    radial-gradient(ellipse 45% 70% at 50% 25%, rgba(255,205,140,0.22), rgba(0,0,0,0) 75%),
    linear-gradient(to bottom, #262B30, #14171A);
  clip-path: polygon(9% 0, 91% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

/* The light source: a brass pin-spot in the head of the niche... */
.spot-can {
  z-index: 6;
  left: 50%; top: 0;
  width: 13%; height: 7%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #4A3818, #C9A86A 35%, #EBD6A2 48%, #A8854A 62%, #3A2C12);
  border-radius: 0 0 40% 40% / 0 0 60% 60%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.7);
}
.spot-can::after {                           /* the hot lens, seen from below */
  content: '';
  position: absolute;
  left: 22%; right: 22%; bottom: -12%;
  height: 34%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, #FFF6DC, #FFD58A 45%, rgba(255,200,120,0) 75%);
  filter: blur(0.4px);
}
/* ...and the beam it throws, widening as it falls. */
.spot-beam {
  z-index: 5;
  left: 0; right: 0; top: 4%; bottom: 10%;
  background: linear-gradient(to bottom, rgba(255,226,170,0.26), rgba(255,214,150,0.06) 40%, rgba(255,214,150,0.02) 70%, rgba(255,214,150,0.08));
  clip-path: polygon(45% 0, 55% 0, 96% 100%, 4% 100%);
  mix-blend-mode: screen;
  pointer-events: none;
  filter: blur(3px);
}

/* The easel: legs splayed behind the board, a back strut, a base plate. */
.easel-legs { z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; }
.easel-base {
  z-index: 2;
  left: 22%; right: 22%; bottom: 7.5%;
  height: 2.6%;
  border-radius: 1px;
  background: linear-gradient(to bottom, #6B5328, #3C2D14 60%, #241A0A);
  box-shadow: 0 3px 5px rgba(0,0,0,0.75);
}
.floor-shadow {
  z-index: 1;
  left: 14%; right: 14%; bottom: 4.5%;
  height: 5%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,0.75), rgba(0,0,0,0) 70%);
}
/* The board's own shadow on the felt behind it: light from above throws
   it down and a little back. */
.board-shadow {
  z-index: 1;
  left: 20%; width: 60%;
  top: 20%; height: 55%;
  background: rgba(0,0,0,0.7);
  filter: blur(9px);
  transform: skewX(-2deg);
}

/* The board, leaning back on the easel. */
.cubby-board {
  z-index: 3;
  left: 19%; width: 62%;
  top: 14.5%;
  aspect-ratio: 1;
  padding: 0;
  background: none;
  border: 0;
  cursor: zoom-in;
  perspective: 700px;
  transition: transform 0.35s ease;
}
.cubby-board:hover { transform: translateY(-1.5%); }
.board-tilt {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform: rotateX(7deg);
  transform-origin: 50% 100%;
  box-shadow: 0 6px 10px rgba(0,0,0,0.65), 0 1px 0 rgba(255,255,255,0.15);
}
.board-tilt::before {                        /* the board's lower edge: its thickness */
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -3%;
  height: 3%;
  background: linear-gradient(to bottom, #9C9A95, #55534F);
}
.board-tilt::after {                         /* light on the face: brighter at the top, a soft sheen */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(255,236,200,0.16), rgba(255,236,200,0) 45%, rgba(0,0,0,0.18)),
    linear-gradient(118deg, rgba(255,255,255,0) 38%, rgba(255,255,255,0.12) 47%, rgba(255,255,255,0) 56%);
  mix-blend-mode: screen;
  transition: background-position 0.6s ease;
  background-size: 100% 100%, 220% 100%;
  background-position: 0 0, 100% 0;
}
.cubby-board:hover .board-tilt::after { background-position: 0 0, 0 0; }
.cubby-board img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* The ledge the board stands on, its front face catching the light. */
.easel-ledge {
  z-index: 4;
  left: 15%; right: 15%;
  top: 70.2%;
  height: 3.6%;
  border-radius: 1px;
  background:
    linear-gradient(to bottom, #E4C98E 0, #B08D57 18%, #7A5E2C 55%, #4A3818 100%);
  box-shadow: 0 4px 6px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,244,214,0.5);
}
.easel-ledge::before {                       /* the lip that keeps the board from sliding */
  content: '';
  position: absolute;
  left: 0; right: 0; top: -38%;
  height: 40%;
  background: linear-gradient(to bottom, #8A6C36, #5A4420);
  border-radius: 1px 1px 0 0;
}
.cubby-note { font-style: italic; font-size: 0.9rem; color: var(--muted); margin-top: 0.2rem; }

/* The engraved plate on the moulding below the niche. */
.cubby-plate {
  display: block;
  width: 90%;
  margin: 10px auto 0;
  padding: 0.4rem 0.5rem 0.45rem;
  background: linear-gradient(to bottom, #C9AA6E, #9A7A42 55%, #7A5E2C);
  border-radius: 1px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,244,214,0.6), inset 0 -1px 0 rgba(0,0,0,0.3);
  font-family: 'Cinzel', serif;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.45;
  text-transform: uppercase;
  text-align: center;
  color: #221808;
  text-shadow: 0 1px 0 rgba(255,236,190,0.45);  /* engraved, not printed */
}
.cubby-plate > span { display: block; }
.plate-title {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  text-transform: none;
  line-height: 1.25;
  margin: 0.1rem 0 0.12rem;
}
.plate-meta { font-size: 0.56rem; letter-spacing: 0.1em; }

/* A board on its acrylic plinth, cut out of the black booth and stood in a
   generated empty niche lit from above as the photographs are (Bryan,
   22 October 2026). The board stands on a turntable
   on the shelf (75% down the picture), at the same inches to the niche for
   every display; the plate is riveted to the shelf's stone front. Sizes in
   the scene are in cqw, so everything scales as one picture. */
.cubby--plinth { padding: 0; background: none; border: 0; box-shadow: none; }
.niche-view {
  position: relative; overflow: hidden; background: #0C0B08;
  box-shadow: 0 18px 40px rgba(0,0,0,0.55);
}
.niche-scene {
  position: absolute; inset: 0;
  container-type: inline-size;
}
.niche-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.turntable { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.plinth-shadow {
  position: absolute; z-index: 2; left: 50%; bottom: 24.2%; height: 1.6%;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,0.85), rgba(0,0,0,0));
}
.cubby--plinth .cubby-board {
  position: absolute; z-index: 3; left: 50%; top: auto; bottom: 24.8%;
  aspect-ratio: auto; transform: translateX(-50%); perspective: none;
  transition: filter 0.3s ease;
}
.cubby--plinth .cubby-board:hover { transform: translateX(-50%); filter: brightness(1.06); }
.cubby--plinth .cubby-board img { position: relative; z-index: 2; display: block; width: 100%; height: auto; }
.board-edge {                                /* the frame's aluminium edge, seen at the quarter-turn */
  position: absolute; z-index: 1; left: 50%; top: 0.5%; height: 90%; width: 0; opacity: 0;
  /* the frame's real side face, lifted from an angled photograph: matte
     brushed aluminium, nearly as light as the front, a bright arris where
     it meets the front */
  background: url(/assets/images/museum/boards/frame-edge.webp) 0 0 / 100% 100%;
  box-shadow: inset 1px 0 0 rgba(255,246,226,0.55), inset -1px 0 0 rgba(255,246,226,0.55);
}
.board-edge--white {                         /* an old-type board: its frame is white plastic, not aluminium */
  background: linear-gradient(90deg, #D9CDB8, #F0E7D6 45%, #CDBFA8);
}
.plate--mounted {
  /* A dark plate on the pale marble of the shelf's front, its lettering
     cut and filled light (Bryan, 25 October 2026): it reads as a label,
     apart from the board and the panel above it, not a continuation of
     them. Centred on the marble face (77.8%–98.2% of the niche). */
  position: absolute; z-index: 3; left: 50%; top: 88%; width: 76%; margin: 0;
  transform: translate(-50%, -50%);
  padding: 1.6cqw 3cqw 1.7cqw;
  font-size: 3cqw; line-height: 1.35; letter-spacing: 0.1em;
  color: #E9DFC6;
  text-shadow: 0 -0.1cqw 0 rgba(0,0,0,0.6);
  background:
    linear-gradient(to bottom, rgba(255,240,210,0.10), rgba(255,240,210,0) 25%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.25)),
    repeating-linear-gradient(to bottom, rgba(255,255,255,0.025) 0 1px, rgba(0,0,0,0.05) 1px 2px, rgba(255,255,255,0) 2px 3px),
    linear-gradient(to bottom, #2B2621, #1C1916 55%, #151210);
  border-radius: 0.3cqw;
  box-shadow:
    0 0.45cqw 0.8cqw rgba(40,30,20,0.55),        /* standing just off the stone */
    0 0 0 0.22cqw #0D0B09,                        /* its cut edge */
    inset 0 0 0 0.35cqw rgba(176,141,87,0.35),    /* a fine brass fillet inside the edge */
    inset 0 0.2cqw 0 rgba(255,236,200,0.18);
}
.plate--mounted .plate-type { font-size: 2.7cqw; letter-spacing: 0.16em; color: #E9DFC6; }
.plate--mounted .plate-title { font-size: 4.3cqw; letter-spacing: 0.02em; color: #E9DFC6; margin: 0.3cqw 0; }
.plate--mounted .plate-meta { font-size: 2.6cqw; letter-spacing: 0.1em; color: #E9DFC6; }
.rivet {
  position: absolute; width: 1.3cqw; height: 1.3cqw; border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #E9D3A0, #9A7A42 45%, #3A2C15 100%);
  box-shadow: 0 0.15cqw 0.2cqw rgba(0,0,0,0.7);
}
.rivet.r1 { left: 1.1cqw; top: 1.1cqw; } .rivet.r2 { right: 1.1cqw; top: 1.1cqw; }
.rivet.r3 { left: 1.1cqw; bottom: 1.1cqw; } .rivet.r4 { right: 1.1cqw; bottom: 1.1cqw; }
.plinth-controls { text-align: center; }
.board-view--plinth .bv-ledge, .board-view--plinth .bv-board::after { display: none; }
.board-view--plinth .board-view-img {
  width: auto; height: min(calc(100vh - 10rem), 56rem); max-width: 84vw;
  aspect-ratio: auto; box-shadow: none; filter: drop-shadow(0 24px 30px rgba(0,0,0,0.7));
}

/* The board brought forward from the cubby: on its ledge, under the spot. */
.board-view {
  position: fixed; inset: 0; z-index: 75;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 1.5rem;
  background:
    radial-gradient(ellipse 34% 46% at 50% 42%, rgba(255,214,150,0.16), rgba(0,0,0,0) 72%),
    linear-gradient(to bottom, rgba(10,9,8,0.92), rgba(6,5,4,0.96));
  animation: fade 0.3s ease both;
}
.board-view[hidden] { display: none; }
.bv-stage { position: relative; display: flex; flex-direction: column; align-items: center; }
.bv-stage::before {                         /* the beam from above */
  content: '';
  position: absolute;
  left: -18%; right: -18%; top: -14vh; bottom: 0;
  background: linear-gradient(to bottom, rgba(255,226,170,0.16), rgba(255,214,150,0.03));
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  filter: blur(6px);
  pointer-events: none;
}
.bv-board { position: relative; }
.bv-board::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(255,236,200,0.10), rgba(255,236,200,0) 45%, rgba(0,0,0,0.14)),
    linear-gradient(118deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.08) 48%, rgba(255,255,255,0) 56%);
  mix-blend-mode: screen;
}
.board-view-img {
  display: block;
  width: min(84vw, calc(100vh - 10rem), 60rem);
  aspect-ratio: 1;
  object-fit: contain;
  box-shadow: 0 24px 50px rgba(0,0,0,0.75);
}
.bv-ledge {
  width: 112%;
  height: clamp(10px, 1.6vw, 18px);
  margin-top: -2px;
  border-radius: 2px;
  background: linear-gradient(to bottom, #E4C98E 0, #B08D57 18%, #7A5E2C 55%, #4A3818 100%);
  box-shadow: 0 10px 18px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,244,214,0.5);
}
.cubby-label { margin-top: 0.8rem; font-family: 'Cinzel', serif; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-label); }
.cubby-turn {
  margin-top: 0.6rem;
  min-height: 36px;
  padding: 0 0.8rem;
  background: none;
  border: 1px solid var(--walnut-hi);
  color: var(--brass-hi);
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}

/* Small screens: the bay as tabs, so nothing stacks past the fold. */
.bay-tabs { display: none; }

/* ── Elevator ───────────────────────────────────────── */
.elevator {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(6, 5, 4, 0.78);
  animation: fade 0.3s ease both;
}
.elevator[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.car {
  width: min(100%, 30rem);
  padding: 1.6rem 1.6rem 1.4rem;
  text-align: center;
  background:
    repeating-linear-gradient(45deg, rgba(226,201,143,0.06) 0 2px, transparent 2px 14px),
    repeating-linear-gradient(-45deg, rgba(226,201,143,0.06) 0 2px, transparent 2px 14px),
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255,214,150,0.18), rgba(0,0,0,0) 70%),
    linear-gradient(to bottom, #2E2417, #1A140D);
  border: 2px solid #8A6F3E;
  box-shadow: inset 0 0 0 6px #241B12, inset 0 0 0 7px #6B5124, 0 30px 80px rgba(0,0,0,0.7);
}
.car-eyebrow { font-family: 'Cinzel', serif; font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--brass-hi); margin-bottom: 0.9rem; }
.dial { width: min(100%, 17rem); display: block; margin: 0 auto 1.1rem; }
.dial text { font-family: 'Cinzel', serif; font-size: 13px; fill: #2A2010; }
.needle { transform-origin: 120px 126px; transition: transform 1.1s cubic-bezier(.45,.05,.3,1.2); }
.car-buttons { display: grid; gap: 0.5rem; margin-bottom: 1rem; }
.car-button {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  align-items: center;
  gap: 0.8rem;
  min-height: 3.1rem;
  padding: 0.35rem 0.8rem 0.35rem 0.4rem;
  background: rgba(14,12,9,0.55);
  border: 1px solid #5A4630;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.car-button:hover { border-color: var(--brass-hi); background: rgba(40,30,18,0.7); }
.car-button[aria-current] { border-color: var(--brass-hi); }
.car-knob {
  width: 2.3rem; height: 2.3rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #F3E1AE, #B08D57 55%, #6B5124);
  box-shadow: 0 2px 4px rgba(0,0,0,0.6), inset 0 -2px 3px rgba(0,0,0,0.3);
  font-family: 'Cinzel', serif; font-size: 0.85rem; color: #2A2010;
}
.car-button[aria-current] .car-knob { box-shadow: 0 0 12px 3px rgba(255,214,150,0.55), inset 0 -2px 3px rgba(0,0,0,0.3); }
.car-floor { display: block; font-family: 'Cinzel', serif; font-size: 0.82rem; letter-spacing: 0.08em; color: var(--parchment); }
.car-era { display: block; font-size: 0.92rem; color: var(--muted); }
.car-soon { font-style: italic; color: var(--gold-label); }
.car-close {
  min-height: 40px; padding: 0 1rem; background: none; border: 0;
  font-family: 'Cinzel', serif; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); cursor: pointer;
}
.car-close:hover { color: var(--gold); }

/* The doors close over the scene while the car travels, then part. */
.doors { position: fixed; inset: 0; z-index: 80; display: flex; pointer-events: auto; }
.doors[hidden] { display: none; }
.door {
  flex: 1;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.0) 0 18px, rgba(0,0,0,0.35) 18px 20px),
    repeating-linear-gradient(45deg, rgba(226,201,143,0.22) 0 2px, transparent 2px 22px),
    repeating-linear-gradient(-45deg, rgba(226,201,143,0.22) 0 2px, transparent 2px 22px),
    linear-gradient(to bottom, #6B5124, #3A2C14 60%, #2A1F0E);
  transition: transform 0.75s cubic-bezier(.6,0,.3,1);
}
.door--l { border-right: 2px solid #1A140A; transform: translateX(-101%); }
.door--r { border-left: 2px solid #E2C98F55; transform: translateX(101%); }
.doors.shut .door { transform: none; }
.shaft-indicator {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0.6rem 1.2rem;
  background: rgba(14,12,9,0.85);
  border: 1px solid var(--brass);
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass-hi);
  opacity: 0;
  transition: opacity 0.3s;
}
.doors.shut .shaft-indicator { opacity: 1; }
.doors-skip {
  position: absolute; right: 1rem; bottom: 1rem;
  min-height: 40px; padding: 0 1rem;
  background: rgba(14,12,9,0.8); border: 1px solid var(--walnut-hi);
  font-family: 'Cinzel', serif; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brass-hi); cursor: pointer;
}

/* ── Index drawer ───────────────────────────────────── */
.index-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  width: min(100%, 30rem);
  display: flex;
  flex-direction: column;
  background: linear-gradient(to bottom, #1C1712, #110E0A);
  border-left: 1px solid #5A4630;
  box-shadow: -30px 0 60px rgba(0,0,0,0.6);
  animation: drawer-in 0.3s ease both;
}
.index-drawer[hidden] { display: none; }
@keyframes drawer-in { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.index-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem 0.5rem; }
.index-title { font-family: 'Cinzel', serif; font-weight: 400; font-size: 1.1rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass-hi); }
.index-close { width: 2.6rem; height: 2.6rem; background: none; border: 1px solid var(--rule); color: var(--muted); font-size: 1.4rem; cursor: pointer; }
.index-tabs { display: flex; gap: 0.3rem; padding: 0.5rem 1.25rem 0.75rem; border-bottom: 1px solid var(--rule); }
.index-tabs button {
  min-height: 38px; padding: 0 0.9rem; background: none; border: 1px solid var(--rule);
  font-family: 'Cinzel', serif; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); cursor: pointer;
}
.index-tabs button[aria-selected="true"] { border-color: var(--brass); color: var(--brass-hi); }
.index-body { flex: 1; overflow-y: auto; padding: 1rem 1.25rem 2rem; }
.ix-floor { margin-bottom: 1.4rem; }
.ix-floor-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--rule); padding-bottom: 0.35rem; margin-bottom: 0.6rem; }
.ix-floor-title { font-family: 'Cinzel', serif; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--parchment); }
.ix-floor-title a { color: inherit; text-decoration: none; }
.ix-floor-era { font-size: 0.92rem; color: var(--muted); white-space: nowrap; }
.ix-gallery { margin: 0 0 0.75rem; }
.ix-gallery > a { font-family: 'IM Fell English', serif; font-style: italic; font-size: 1.08rem; color: var(--cream); text-decoration: none; }
.ix-gallery > a:hover { color: var(--gold); }
.ix-num { font-family: 'Cinzel', serif; font-style: normal; font-size: 0.75rem; letter-spacing: 0.1em; color: var(--gold-label); margin-right: 0.4rem; }
.ix-bays { list-style: none; margin: 0.3rem 0 0 1rem; }
.ix-bays li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.98rem; line-height: 1.6; }
.ix-bays a { color: var(--muted); text-decoration: none; }
.ix-bays a:hover { color: var(--gold); }
.ix-bays .open a { color: var(--parchment); }
.ix-dot { width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--gold-dim); flex: none; }
.open .ix-dot { background: var(--gold); border-color: var(--gold); }
.ix-closed { font-style: italic; color: var(--muted); font-size: 0.92rem; }
.ix-threads { list-style: none; }
.ix-threads li { padding: 0.55rem 0; border-bottom: 1px solid #2A2118; }
.ix-threads a { color: var(--parchment); text-decoration: none; font-family: 'IM Fell English', serif; font-style: italic; font-size: 1.08rem; }
.ix-threads span { display: block; color: var(--muted); font-size: 0.92rem; }
.ix-search { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.ix-search input {
  flex: 1; min-height: 44px; padding: 0 0.9rem;
  background: #0B0A08; border: 1px solid #5A4630; color: var(--parchment);
  font-family: 'Cormorant Garamond', serif; font-size: 1.1rem;
}
.ix-search button { min-height: 44px; padding: 0 1rem; background: #3A2E1F; border: 1px solid var(--brass); color: var(--brass-hi); font-family: 'Cinzel', serif; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; }
.ix-note { color: var(--muted); font-size: 1rem; line-height: 1.5; }

/* The Coin Cabinet: closed drawers by arc; each coin opens where it is shown. */
.cab-count { margin: -0.4rem 0 0.8rem; font-size: 0.92rem; }
.cab-drawer { border-bottom: 1px solid var(--rule); }
.cab-drawer-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 0.7rem 0.2rem; cursor: pointer; list-style: none;
}
.cab-drawer-head::-webkit-details-marker { display: none; }
.cab-drawer-name { font-family: 'Cinzel', serif; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-label); }
.cab-drawer-title { font-family: 'IM Fell English', serif; font-style: italic; letter-spacing: 0; text-transform: none; font-size: 1rem; color: var(--cream); }
.cab-drawer-count { flex: none; font-size: 0.9rem; color: var(--muted); }
.cab-drawer-count::after { content: ' \25B8'; color: var(--gold-dim); }
.cab-drawer[open] .cab-drawer-count::after { content: ' \25BE'; }
.cab-drawer-head:hover .cab-drawer-name { color: var(--gold); }
.cab-coins { list-style: none; padding-bottom: 0.4rem; }
.cab-coin { padding: 0.35rem 0; border-top: 1px solid #2A2118; }
.cab-main { display: flex; gap: 0.8rem; align-items: flex-start; padding: 0.3rem 0.3rem; text-decoration: none; border-radius: 2px; }
.cab-main:hover, .cab-main:focus-visible { background: rgba(201,168,76,0.08); }
.cab-main:hover .cab-name { color: var(--gold); }
.cab-img.pocket { width: 3.4rem; height: 3.4rem; margin-top: 0.1rem; }
.cab-img--none {
  display: block; flex: none; width: 3.4rem; height: 3.4rem; border-radius: 50%;
  border: 1px dashed rgba(176,141,87,0.35);
}
.cab-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.cab-name { font-family: 'IM Fell English', serif; font-style: italic; font-size: 1.08rem; color: var(--parchment); line-height: 1.25; }
.cab-meta { font-size: 0.92rem; color: var(--muted); line-height: 1.35; }
.cab-where { font-size: 0.92rem; color: var(--gold); }
.cab-where::after { content: ' \2192'; }
.cab-in { display: flex; flex-wrap: wrap; gap: 0.15rem 0.9rem; margin: 0 0 0.2rem 4.5rem; font-size: 0.9rem; }
.cab-also { color: var(--muted); font-style: italic; }
.cab-in a { color: var(--gold); text-decoration: none; }
.cab-in a:hover { text-decoration: underline; }
.cab-foot { margin-top: 0.4rem; font-size: 0.92rem; }
.cab-foot a { color: var(--gold); }

/* ── Film ───────────────────────────────────────────── */
.film {
  position: fixed; inset: 0; z-index: 75;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 1.5rem;
  background: rgba(6,5,4,0.86);
  animation: fade 0.3s ease both;
}
.film[hidden] { display: none; }
.film-frame { width: min(100%, 64rem, calc((100vh - 9rem) * 16 / 9)); aspect-ratio: 16 / 9; background: #000; border: 8px solid #1A1814; box-shadow: 0 30px 80px rgba(0,0,0,0.75); }
.film--tall .film-frame { width: auto; height: min(78vh, 46rem); aspect-ratio: 9 / 16; }
.film-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.film-bar { display: flex; align-items: center; gap: 1.5rem; margin-top: 0.9rem; }
.film-title { font-family: 'IM Fell English', serif; font-style: italic; font-size: 1.1rem; color: var(--parchment); }
.film-close { min-height: 40px; padding: 0 1rem; background: none; border: 1px solid var(--gold-dim); color: var(--gold); font-family: 'Cinzel', serif; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; }

/* A closed floor or a missing room: said plainly. */
.notice { max-width: 40rem; margin: 3rem auto; padding: 2rem; text-align: center; border: 1px solid var(--rule); background: rgba(14,12,9,0.7); }
.notice h1 { font-family: 'Cinzel', serif; font-weight: 400; font-size: 1.4rem; letter-spacing: 0.08em; margin-bottom: 0.8rem; }
.notice p { color: var(--cream); font-size: 1.1rem; line-height: 1.55; margin-bottom: 0.6rem; }
.notice a { color: var(--gold); }

/* ── Laptop and smaller ─────────────────────────────── */
/* Below 1280px the cubby moves under the panel, so the panel keeps the width
   it needs to set its coin text beside the board. */
@media (max-width: 1280px) {
  .ensemble { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "cubby"; }
  .cubby.cubby--plinth { display: block; width: min(100%, 26rem); }
  .cubby { position: static; display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; align-items: center; max-width: 34rem; margin: 0 auto; }
  .cubby { padding: 12px; }
}
@media (max-width: 767px) {
  :root { --hdr: 3.1rem; }
  .mhead { gap: 0.6rem; }
  .mhead-name, .mhead-leave-long { display: none; }
  .mhead-trail { font-size: 0.92rem; }
  /* the plaque becomes a strip along the picture's foot; the placement a
     scene gives it for wide screens is overridden here */
  .plaque {
    left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important;
    max-width: none; padding: 0.45rem 0.8rem 0.5rem;
    border-left: 0; border-right: 0; border-bottom: 0;
  }
  .plaque-eyebrow { font-size: 0.58rem; margin-bottom: 0.15rem; }
  .plaque-title { font-size: 0.95rem; }
  .plaque-line { display: none; }
  .hotspot-label { display: none; }
  .hall-cue { display: none; }       /* on a phone the hall is the very next thing */
  .bay-tabs {
    display: flex;
    gap: 0.3rem;
    overflow-x: auto;
    margin: 0 -1rem 1rem;
    padding: 0 1rem;
    scrollbar-width: none;
  }
  .bay-tabs button {
    flex: none; min-height: 40px; padding: 0 0.9rem;
    background: rgba(14,12,9,0.75); border: 1px solid var(--walnut-hi);
    font-family: 'Cinzel', serif; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--muted);
  }
  .bay-tabs button[aria-selected="true"] { border-color: var(--brass); color: var(--brass-hi); }
  .ensemble[data-tab] > .cubby, .ensemble[data-tab] .ensemble-main > * { display: none; }
  .ensemble[data-tab="display"] .ensemble-main > .zone-display,
  .ensemble[data-tab="films"] .ensemble-main > .zone-films,
  .ensemble[data-tab="coins"] .ensemble-main > .zone-coins { display: flex; }
  .ensemble[data-tab="display"] .ensemble-main > .panel-case.zone-display,
  .ensemble[data-tab="display"] .ensemble-main > .prep.zone-display { display: block; }   /* a note in preparation reads down, not across */
  .ensemble[data-tab="board"] > .cubby { display: grid; }
  .film-card { min-width: 13.5rem; }
  .cubby { grid-template-columns: 1fr; }
  .chev { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .scene, .elevator, .index-drawer, .film { animation: none; }
  .needle, .door, .alcove-bg, .portal-bg, .hotspot { transition: none; }
  .hall-cue { animation: none; }
  .track { scroll-behavior: auto; }
}

/* ── Threads: the wing, a Thread's room, the guide ───── */
.wing { min-height: calc(100svh - var(--hdr)); background: linear-gradient(to bottom, #1C2024, #121417); }
.wing-head { max-width: 46rem; margin: 0 auto; padding: 2.6rem clamp(1rem, 4vw, 2rem) 1.4rem; text-align: center; }
.wing-title {
  font-family: 'Cinzel', serif; font-weight: 400;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem); letter-spacing: 0.1em;
  color: var(--parchment); margin: 0.2rem 0 0.8rem;
}
.wing-line { font-family: 'IM Fell English', serif; font-style: italic; font-size: 1.12rem; line-height: 1.5; color: var(--cream); text-wrap: balance; }
.section--thread { background: linear-gradient(to bottom, #171A1D, #101214); border-top-color: #2A3036; }
.portal--planned { opacity: 0.55; }
.portal--planned:hover { opacity: 0.85; }
/* The wing's floor: a brass line inlaid beneath the doorways — the Thread. */
.track--inlay, .track--thread { position: relative; }
.track--inlay::after, .track--thread::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 1.1rem;
  height: 2px;
  background: linear-gradient(90deg, rgba(226,201,143,0), #B08D57 6%, #E2C98F 50%, #B08D57 94%, rgba(226,201,143,0));
  box-shadow: 0 0 10px rgba(255,214,150,0.35);
  pointer-events: none;
}
/* A bay holding one of the followed Thread's coins. */
.alcove--thread { box-shadow: inset 0 0 60px rgba(0,0,0,0.7), 0 20px 40px rgba(0,0,0,0.45), 0 0 0 2px #B08D57; }
.thread-stud {
  position: absolute; z-index: 3; top: 0.7rem; right: 0.7rem;
  padding: 0.2rem 0.55rem;
  background: linear-gradient(to bottom, #C9AA6E, #8A6C36);
  color: #221808; border-radius: 2px;
  font-family: 'Cinzel', serif; font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.vcoin--thread .pocket { box-shadow: inset 0 2px 6px rgba(0,0,0,0.8), 0 0 0 2px #B08D57; }
.vcoin--lit .pocket { box-shadow: inset 0 2px 6px rgba(0,0,0,0.8), 0 0 0 2px #E2C98F, 0 0 22px 6px rgba(255,214,150,0.45); }
.vcoin--lit .vcoin-name { color: var(--brass-hi); }
.vcoin-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.vcoin-where { font-size: 0.86rem; color: var(--gold); text-decoration: none; text-align: center; max-width: 9rem; }
.vcoin-where:hover { color: var(--brass-hi); }
.vcoin-where--here { color: var(--muted); font-style: italic; }

/* A Thread's room: its question, and the way to follow it. */
.thread-intro { width: min(100%, 46rem); text-align: center; }
.thread-question { font-family: 'IM Fell English', serif; font-style: italic; font-size: clamp(1.1rem, 1.8vw, 1.3rem); line-height: 1.45; color: var(--cream); text-wrap: balance; margin-bottom: 1rem; }
.thread-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.6rem 1.4rem; }
.thread-follow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  min-height: 46px; padding: 0 1.2rem;
  background: linear-gradient(to bottom, #6B5124, #4A3818);
  border: 1px solid #E2C98F; color: var(--parchment);
  font-family: 'Cinzel', serif; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer; box-shadow: 0 6px 16px rgba(0,0,0,0.5);
}
.thread-follow:hover { background: linear-gradient(to bottom, #7D5F2A, #573F1A); }
.thread-read { color: var(--gold-label); text-decoration: none; font-family: 'Cinzel', serif; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }
.thread-read:hover { color: var(--gold); }

/* The guide: docked at the foot of every room while a Thread is followed. */
.guide {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: flex; align-items: center; gap: 1rem;
  padding: 0.5rem clamp(0.75rem, 2.5vw, 1.5rem);
  background: linear-gradient(to bottom, rgba(42,32,20,0.97), rgba(20,15,10,0.98));
  border-top: 2px solid #B08D57;
  box-shadow: 0 -10px 30px rgba(0,0,0,0.5);
}
.guide[hidden] { display: none; }
.guide-head { flex: none; display: flex; flex-direction: column; }
.guide-eyebrow { font-family: 'Cinzel', serif; font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-label); }
.guide-name { font-family: 'IM Fell English', serif; font-style: italic; font-size: 1.05rem; color: var(--parchment); text-decoration: none; }
.guide-name:hover { color: var(--gold); }
.guide-stops {
  flex: 1; min-width: 0;
  list-style: none; display: flex; gap: 0.4rem; overflow-x: auto;
  scrollbar-width: none; position: relative;
}
.guide-stops::-webkit-scrollbar { display: none; }
.guide-stop {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.25rem 0.7rem 0.25rem 0.3rem;
  background: rgba(14,12,9,0.6); border: 1px solid #5A4630; border-radius: 22px;
  cursor: pointer; text-align: left; white-space: nowrap;
}
.guide-stop:hover { border-color: var(--brass-hi); }
.guide-stop[aria-current] { border-color: #E2C98F; background: rgba(107,81,36,0.55); }
.guide-stop .pocket { width: 2rem; height: 2rem; }
.guide-stop-text { display: flex; flex-direction: column; line-height: 1.15; }
.guide-stop-name { font-size: 0.95rem; color: var(--cream); }
.guide-stop-where { font-family: 'Cinzel', serif; font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-label); }
.guide-step { flex: none; display: flex; align-items: center; gap: 0.4rem; }
.guide-step button, .guide-close {
  width: 2.4rem; height: 2.4rem;
  background: rgba(14,12,9,0.6); border: 1px solid #6A5233; color: var(--brass-hi);
  font-size: 1.2rem; cursor: pointer;
}
.guide-step button[disabled] { opacity: 0.3; cursor: default; }
.guide-count { font-family: 'Cinzel', serif; font-size: 0.66rem; letter-spacing: 0.1em; color: var(--muted); white-space: nowrap; }
.guide-close { flex: none; font-size: 1.3rem; }
body.following { padding-bottom: 4.2rem; }
body.following .pills { bottom: 4.2rem; }
@media (max-width: 767px) {
  .guide { flex-wrap: wrap; gap: 0.4rem 0.6rem; }
  .guide-head { flex: 1; }
  .guide-stops { order: 3; flex-basis: 100%; }
  .guide-stop-where { display: none; }
  body.following { padding-bottom: 7.2rem; }
  body.following .pills { bottom: 7.2rem; }
}

/* ── The directory board, in the foyer ───────────────── */
/* A lobby letter board: grooved black felt in a brass-edged walnut frame,
   white letters. Every row is a gallery; pressing one rides straight there. */
.directory { max-width: 860px; margin: 2.2rem auto 3rem; padding: 0 1rem; scroll-margin-top: calc(var(--hdr) + 1rem); }
.directory:focus { outline: none; }
.dir-board {
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,0.028) 0 1px, transparent 1px 7px),
    #121110;
  border: 14px solid var(--walnut);
  box-shadow: inset 0 0 0 1px var(--brass), 0 0 0 1px var(--walnut-hi), inset 0 6px 18px rgba(0,0,0,0.7), 0 18px 40px rgba(0,0,0,0.55);
  border-radius: 3px;
  padding: 1.6rem 1.8rem 1.4rem;
}
.dir-head {
  font-family: 'Cinzel', serif; font-weight: 600; font-size: 1.05rem; letter-spacing: 0.42em;
  text-transform: uppercase; text-align: center; color: var(--brass-hi);
  padding-bottom: 0.9rem; margin-bottom: 1.1rem; border-bottom: 1px solid rgba(176,141,87,0.35);
}
.dir-floor { margin-bottom: 1.1rem; }
.dir-floor ul { list-style: none; }
.dir-floor-head, .dir-row {
  display: grid; grid-template-columns: 7.6rem 1fr auto auto; align-items: baseline; column-gap: 0.6rem;
  font-family: 'Cinzel', serif; text-transform: uppercase; letter-spacing: 0.09em;
}
.dir-floor-head { font-size: 0.78rem; font-weight: 600; color: var(--gold); padding: 0.25rem 0.5rem; }
.dir-floor-head .dir-era { grid-column: 2 / -1; font-family: 'Cormorant Garamond', serif; text-transform: none; letter-spacing: 0; font-weight: 400; font-style: italic; font-size: 0.95rem; color: var(--muted); }
.dir-row {
  font-size: 0.8rem; color: #EEE9DE; text-decoration: none;
  padding: 0.32rem 0.5rem; border-radius: 2px;
  text-shadow: 0 1px 0 rgba(0,0,0,0.8);
}
.dir-num { white-space: nowrap; }
.dir-row .dir-num { color: #C9C2B3; }
.dir-leader { border-bottom: 1px dotted rgba(238,233,222,0.28); transform: translateY(-0.25em); min-width: 1rem; }
.dir-note { color: #C9C2B3; font-size: 0.72rem; white-space: nowrap; }
.dir-title:empty::before { content: '\2026'; color: #6E685E; }
a.dir-row[data-ride]:hover, a.dir-row[data-ride]:focus-visible { background: rgba(201,168,76,0.12); color: var(--brass-hi); outline-offset: 0; }
a.dir-row[data-ride]:hover .dir-note::after, a.dir-row[data-ride]:focus-visible .dir-note::after { content: ' \2192'; }
.dir-floor--closed .dir-row { color: #8E887D; }
.dir-floor--closed .dir-row .dir-num, .dir-floor--closed .dir-note { color: #6E685E; }
.dir-floor--closed .dir-floor-head { color: var(--gold-dim); }
.dir-row--closed:hover .dir-title { text-decoration: underline; text-decoration-color: rgba(238,233,222,0.3); }
@media (max-width: 767px) {
  .directory { padding: 0 0.6rem; margin-top: 1.6rem; }
  .dir-board { border-width: 9px; padding: 1.1rem 0.7rem 0.9rem; }
  .dir-floor-head, .dir-row { grid-template-columns: 5.6rem 1fr; letter-spacing: 0.05em; }
  .dir-note { grid-column: 2; font-size: 0.66rem; padding-top: 0.1rem; }
  .dir-note:empty { display: none; }
  .dir-leader { display: none; }
  .dir-floor-head .dir-era { grid-column: 2 / -1; }
  .dir-row { font-size: 0.74rem; }
}

/* ── A case, on its own ──────────────────────────────── */
/* The Coin Cabinet's destination: the bay's case alone, one coin lit. */
.case-view {
  min-height: calc(100svh - var(--hdr));
  display: flex; flex-direction: column; align-items: center; gap: 1.4rem;
  padding: clamp(2rem, 6vh, 4rem) 1rem 3rem;
  background: radial-gradient(ellipse 70% 50% at 50% 30%, rgba(255,220,160,0.07), rgba(0,0,0,0) 70%), #0C0B08;
}
.case-head { text-align: center; }
.case-eyebrow { font-family: 'Cinzel', serif; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-label); margin-bottom: 0.4rem; }
.case-title { font-family: 'IM Fell English', serif; font-style: italic; font-weight: 400; font-size: clamp(1.6rem, 3.4vw, 2.3rem); color: var(--parchment); }
.case-vitrine { display: flex; flex-direction: column; }
.case-coin { width: min(100%, 38rem); text-align: center; }
.case-coin-name { font-family: 'IM Fell English', serif; font-style: italic; font-size: 1.35rem; color: var(--brass-hi); }
.case-coin-id { color: var(--muted); font-size: 1rem; margin-top: 0.2rem; }
.case-coin-role { color: var(--cream); font-size: 1.1rem; line-height: 1.5; margin-top: 0.6rem; }
.case-coin-open {
  margin-top: 0.9rem; background: none; border: 0; padding: 0.3rem 0;
  color: var(--gold); font-size: 1rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.case-view .wayfinding { margin-top: 0.4rem; background: none; border: 0; }
.case-view a.way { text-decoration: none; }

/* ── The objects: the gallery's real things, walked past ── */
/* Boards on their plinths in niches, every one at the same scale, with
   Bryan's photographs of the arc's places hung between them. */
.section--objects {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0) 18%, rgba(0,0,0,0) 82%, rgba(0,0,0,0.45)),
    linear-gradient(90deg, #21190F, #2C2117 20%, #271D14 50%, #2C2117 80%, #21190F);   /* walnut */
}
.track--objects { align-items: flex-end; }
.walk-niche { flex: none; width: clamp(16rem, 28vw, 23rem); scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; }
.walk-niche .cubby.cubby--plinth { display: block; width: 100%; }
.walk-study { margin-top: 0.4rem; font-size: 0.95rem; color: var(--gold); text-decoration: none; }
.walk-study:hover { text-decoration: underline; }
.walk-photo { flex: none; width: clamp(13rem, 22vw, 18rem); scroll-snap-align: center; margin: 0 0 5rem; }
.walk-photo-frame {
  display: block; padding: 0.9rem; background: #EDE6D6;              /* the mount */
  border: 0.55rem solid #1C140D;                                      /* the frame */
  box-shadow: 0 0 0 1px #4A3828, 0 14px 28px rgba(0,0,0,0.6);
}
.walk-photo-frame img { display: block; width: 100%; height: auto; }
.walk-photo figcaption { margin-top: 0.6rem; font-style: italic; font-size: 0.95rem; color: var(--cream); text-align: center; }
.bay-board-link { display: inline-block; margin-top: 0.3rem; font-size: 0.95rem; color: var(--gold); text-decoration: none; }
.bay-board-link:hover { text-decoration: underline; }
.track--objects > :first-child { margin-left: auto; }     /* centred when the walk is short, */
.track--objects > :last-child { margin-right: auto; }     /* still scrollable when it is long */

/* ── The Coin Cabinet, from the reading desk ────────── */
/* Seated at the desk, facing the cabinet: its drawers light when the
   numismatist goes to them, and the coins are laid on a velvet tray on the
   leather of the desk. */
.cab-wall { background: #1A120C; }
.stage--cabinet { width: min(100%, calc(64svh * 1376 / 768)); }
.cab-spots { position: absolute; inset: 0; z-index: 2; }
.cab-spot {
  position: absolute;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s, box-shadow 0.4s;
}
.cab-spot-tag {                    /* what the drawer's label plate reads */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0.1rem 0.45rem;
  white-space: nowrap;
  background: rgba(14,12,9,0.88);
  border: 1px solid rgba(176,141,87,0.7);
  font-family: 'Cinzel', serif;
  font-size: clamp(0.5rem, 0.8vw, 0.66rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass-hi);
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}
.cab-spot:hover, .cab-spot:focus-visible { border-color: rgba(226,201,143,0.75); background: rgba(255,214,150,0.08); }
.cab-spot:hover .cab-spot-tag, .cab-spot:focus-visible .cab-spot-tag,
.cab-spot--lit .cab-spot-tag { opacity: 1; }
.cab-spot--lit {
  border-color: rgba(226,201,143,0.85);
  background: rgba(255,214,150,0.13);
  box-shadow: 0 0 16px 3px rgba(255,200,120,0.5), inset 0 0 12px rgba(255,214,150,0.35);
  animation: drawer-lit 1.1s ease-out both;
}
.cab-spot--out { box-shadow: 0 0 22px 6px rgba(255,200,120,0.6), inset 0 0 14px rgba(255,214,150,0.45); }
@keyframes drawer-lit {
  0%   { box-shadow: 0 0 0 0 rgba(255,200,120,0), inset 0 0 0 rgba(255,214,150,0); }
  45%  { box-shadow: 0 0 28px 8px rgba(255,200,120,0.75), inset 0 0 18px rgba(255,214,150,0.55); }
  100% { box-shadow: 0 0 16px 3px rgba(255,200,120,0.5), inset 0 0 12px rgba(255,214,150,0.35); }
}

/* The desk: a walnut edge nearest you, a leather top under the lamp. */
.desk {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  padding: 1.6rem 1rem 2rem;
  background:
    radial-gradient(ellipse 60% 70% at 18% 0%, rgba(255,214,150,0.12), rgba(0,0,0,0) 70%),
    radial-gradient(ellipse 90% 100% at 50% 0%, #2A2219, #17130E 75%);
  border-top: 14px solid #3B2B1D;
  box-shadow: inset 0 1px 0 rgba(255,230,190,0.18), inset 0 14px 24px rgba(0,0,0,0.45), 0 -10px 30px rgba(0,0,0,0.5);
}
.desk::before {                    /* the edge's highlight */
  content: '';
  position: absolute;
  left: 0; right: 0; top: -14px;
  height: 3px;
  background: linear-gradient(to right, rgba(226,201,143,0), rgba(226,201,143,0.35), rgba(226,201,143,0));
}
.desk-head { text-align: center; max-width: 40rem; }
.desk-title {
  font-family: 'Cinzel', serif;
  font-weight: 400;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  letter-spacing: 0.06em;
  color: var(--parchment);
}
.desk-line {
  margin-top: 0.35rem;
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--cream);
}
.cab-ask {
  width: min(30rem, 100%);
  padding: 0.7rem 0.9rem 0.85rem;
  background: linear-gradient(to bottom, rgba(42,34,25,0.95), rgba(26,21,15,0.95));
  border: 1px solid var(--brass);
  box-shadow: 0 0 0 3px rgba(14,12,9,0.6), 0 10px 26px rgba(0,0,0,0.5);
}
.cab-ask-label {
  display: block;
  margin-bottom: 0.4rem;
  text-align: center;
  font-family: 'Cinzel', serif;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass-hi);
}
.cab-ask input {
  width: 100%;
  min-height: 46px;
  padding: 0 0.85rem;
  background: #0E0C09;
  border: 1px solid var(--walnut-hi);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.8);
  color: var(--parchment);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
}
.cab-ask input::placeholder { color: var(--muted); font-style: italic; }
.cab-ask input:focus { outline: none; border-color: var(--brass-hi); }
.desk-status {
  min-height: 1.5em;
  text-align: center;
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--cream);
}

/* The tray the coins are laid on. */
.cab-tray {
  width: min(100%, 62rem);
  padding: 1.2rem 1rem 1.4rem;
  background: radial-gradient(ellipse 90% 70% at 50% 0%, #5A1519, #34090D 62%, #1F0608);
  border: 1px solid #6B4A22;
  border-top: 5px solid #8A6A35;
  border-bottom: 9px solid #3A2A1D;
  border-radius: 3px;
  box-shadow: inset 0 0 44px rgba(0,0,0,0.7), 0 18px 34px rgba(0,0,0,0.6);
}
.cab-tray--shut { display: none; }
.cab-tray-note { margin-top: 1rem; text-align: center; font-family: 'IM Fell English', serif; font-style: italic; font-size: 1.05rem; color: var(--cream); }
.cab-pockets {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: 1.2rem 0.6rem;
  justify-items: center;
}
.cab-vcoin .pocket { width: 4.8rem; height: 4.8rem; box-shadow: inset 0 3px 8px rgba(0,0,0,0.85), 0 0 0 1px rgba(0,0,0,0.55), 0 1px 0 rgba(255,200,200,0.08); }
.cab-vcoin:hover .pocket { box-shadow: inset 0 3px 8px rgba(0,0,0,0.85), 0 0 0 1px var(--brass-hi); }
.cab-vcoin.vcoin--lit .pocket { box-shadow: inset 0 2px 6px rgba(0,0,0,0.8), 0 0 0 2px #E2C98F, 0 0 22px 6px rgba(255,214,150,0.45); }
.cab-vcoin.vcoin--lit .vcoin-name { color: var(--brass-hi); }
.cab-vcoin .vcoin-name { color: var(--parchment); }
.cab-vcoin-date { margin-top: -0.3rem; font-size: 0.85rem; color: #C9B08A; }
.cab-vcoin--arrive { animation: coin-laid 0.5s ease-out both; animation-delay: var(--d, 0ms); }
@keyframes coin-laid {
  from { opacity: 0; transform: translateY(-16px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}
.pocket--empty { position: relative; background: radial-gradient(circle, #1A0507, #050403); }
.pocket--empty::after {            /* not photographed yet: the mark holds the place */
  content: '';
  position: absolute;
  inset: 24%;
  background-color: var(--gold-dim);
  -webkit-mask: url(/assets/images/lic-mark.svg) center / contain no-repeat;
          mask: url(/assets/images/lic-mark.svg) center / contain no-repeat;
}

.cab-card { width: min(100%, 38rem); text-align: center; }
.cab-card-where { margin-top: 0.9rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem 1rem; font-size: 1rem; }
.cab-card-where span { width: 100%; color: var(--muted); font-style: italic; }
.cab-card-where a { color: var(--gold); text-decoration: none; }
.cab-card-where a:hover { text-decoration: underline; }

/* The drawer labels on the desk, for every drawer at once. */
.desk-pulls { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin-top: 0.4rem; max-width: 62rem; }
.desk-pulls-label { font-family: 'Cinzel', serif; font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-label); }
.cab-pulls { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem; }
.cab-pull {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0 0.85rem;
  background: linear-gradient(to bottom, #3B2B1D, #291E14);
  border: 1px solid #4A3828;
  box-shadow: inset 0 1px 0 rgba(255,230,190,0.08), 0 3px 8px rgba(0,0,0,0.45);
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.cab-pull::before {                /* the brass pull */
  content: '';
  width: 1.1rem;
  height: 0.32rem;
  border-radius: 2px;
  background: linear-gradient(to bottom, var(--brass-hi), #7A5E2E);
}
.cab-pull-label { font-family: 'Cinzel', serif; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-label); }
.cab-pull-count { font-size: 0.9rem; color: var(--muted); }
.cab-pull:hover { border-color: var(--brass); }
.cab-pull:hover .cab-pull-label { color: var(--gold); }
.cab-pull--out { border-color: var(--brass-hi); transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255,230,190,0.12), 0 0 18px rgba(255,214,150,0.18); }
.cab-pull--out .cab-pull-label { color: var(--brass-hi); }
.cabinet .wayfinding a.way { text-decoration: none; }

@media (max-width: 720px) {
  .stage--cabinet { width: 100%; }
  .cab-spot-tag { display: none; }       /* too small to read; the desk's labels serve */
  .desk { padding: 1.2rem 0.75rem 1.6rem; border-top-width: 10px; }
  .desk::before { top: -10px; }
  .desk-line { font-size: 0.98rem; }
  .cab-tray { padding: 1rem 0.6rem 1.2rem; }
  .cab-pockets { grid-template-columns: repeat(auto-fill, minmax(5.8rem, 1fr)); gap: 1rem 0.4rem; }
  .cab-vcoin { width: 5.8rem; }
  .cab-vcoin .pocket { width: 4.2rem; height: 4.2rem; }
  .cab-vcoin .vcoin-name { font-size: 0.9rem; }
  .cab-pulls { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; width: calc(100% + 1.5rem); margin: 0 -0.75rem; padding: 0.2rem 0.75rem 0.5rem; scrollbar-width: none; }
  .cab-pulls::-webkit-scrollbar { display: none; }
  .cab-pull { flex: none; }
  .desk-pulls { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .cab-pull, .cab-spot, .cab-spot-tag { transition: none; }
  .cab-spot--lit, .cab-vcoin--arrive { animation: none; }
}
@media (max-width: 767px) {
  .walk-niche { width: min(calc(100vw - 3rem), 23rem); }   /* as wide as the phone allows, so the plate reads */
}

/* ── The rotunda ──────────────────────────────────────────
   A gallery as a round room (Bryan, 28 October 2026). The room is built in
   a world of fixed pixels (1600 x 900, or 900 x 1240 on a phone) scaled to
   the stage, so a niche, a plate and a roundel keep their proportions at
   any width. museum.js, "The rotunda", places the bays round a ring and
   turns it; everything inside a bay is flat. */
.rotunda {
  position: relative;
  width: min(100%, calc((100svh - var(--hdr)) * 16 / 9));
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  overflow: hidden;
  background: #050403;
  touch-action: pan-y;
  contain: paint;              /* Safari lets the 3D room widen the page past its box */
  cursor: grab;
  user-select: none; -webkit-user-select: none;
  outline: none;
}
.rotunda:active { cursor: grabbing; }
.rotunda--tall { aspect-ratio: 900 / 1240; width: 100%; }
.rotunda:focus-visible { box-shadow: inset 0 0 0 2px var(--gold-dim); }
.rotunda::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  box-shadow: inset 0 0 160px rgba(0,0,0,0.75);
}
.rt-world { position: absolute; left: 50%; top: 50%; transform-origin: 50% 50%; perspective-origin: 50% 50%; }
.rt-cam, .rt-ring, .rt-slot { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.rt-ring, .rt-slot { left: 0; top: 0; }
.rt-bay { position: absolute; overflow: hidden;
  background: url(/assets/images/museum/rotunda/slate.webp) center top / 100% auto repeat-y #1A1714; }
.rt-bay::before {                         /* the cornice, and the dark toward the dome */
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 230px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0) 100%);
  border-top: 6px solid #5A4420;
}
.rt-pil { position: absolute; top: 0; bottom: 0; width: 34px;
  background: url(/assets/images/museum/rotunda/pilaster.webp) 0 0 / 100% 100%; }
.rt-pil--l { left: -17px; } .rt-pil--r { right: -17px; }
.rt-dado { position: absolute; left: 0; right: 0; bottom: 0; height: 110px;
  background: url(/assets/images/museum/rotunda/dado.webp) 0 0 / 100% 100%; }
.rt-shade { position: absolute; inset: 0; background: #000; pointer-events: none; opacity: 0.1; }

/* The niche: the cubby's niche at a third of its size, its plate as there. */
.rt-niche {
  position: absolute; left: 50%; bottom: 120px; width: 384px; height: 451px; margin-left: -192px;
  display: block; box-shadow: 0 0 0 3px #3A2C15, 0 0 0 5px #7A5E2C, 0 18px 40px rgba(0,0,0,0.6);
  transition: filter 0.3s ease;
}
.rt-niche:hover, .rt-niche:focus-visible { filter: brightness(1.18); outline: none; }
.rt-board, .rt-face, .rt-stand {
  position: absolute; left: 50%; bottom: 24.8%; transform: translateX(-50%);
  width: calc(var(--in) * var(--s, 1) * 112 / 1360 * 100%);
}
.rt-board { display: block; height: auto; }
.rt-face {
  aspect-ratio: var(--in) / 7; padding: 1.6%; bottom: 25.5%;
  background: linear-gradient(135deg, #DADDE0, #8E9398 45%, #C9CDD1 70%, #6F7378);
  box-shadow: 0 1.2cqw 1.6cqw rgba(0,0,0,0.6);
}
.rt-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rt-stand {                                  /* an empty acrylic block, a card leaning on it */
  aspect-ratio: var(--in) / 1.1; bottom: 24.8%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.16), rgba(255,255,255,0.05) 40%, rgba(255,255,255,0.1));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 0 rgba(255,255,255,0.25), inset 1px 0 0 rgba(255,255,255,0.3), inset -1px 0 0 rgba(255,255,255,0.3), 0 0.6cqw 1cqw rgba(0,0,0,0.5);
}
.rt-stand-card {
  position: absolute; left: 50%; bottom: 100%; width: 22cqw; padding: 1.6cqw 1cqw;
  transform: translateX(-50%) rotate(-4deg); transform-origin: 50% 100%;
  background: #E9DFC6; box-shadow: 0.4cqw 0.6cqw 1cqw rgba(0,0,0,0.55);
  font-family: 'Cinzel', serif; font-size: 2.5cqw; letter-spacing: 0.12em; text-transform: uppercase;
  color: #4A3A22; text-align: center; line-height: 1.3;
}
.rt-print {                                  /* a drawn display, framed and hung */
  position: absolute; left: 50%; top: 18%; width: 62%; transform: translateX(-50%);
  padding: 4%; background: #EFE6D2;
  box-shadow: 0 0 0 1.4cqw #2A1F14, 0 0 0 1.8cqw #8A6C36, 0 2cqw 3cqw rgba(0,0,0,0.6);
  text-align: center;
}
.rt-print img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.rt-print-kind { display: block; font-family: 'Cinzel', serif; font-size: 2.6cqw; letter-spacing: 0.2em; text-transform: uppercase; color: #6B5430; margin-top: 3%; }
.rt-print-title { display: block; font-family: 'IM Fell English', serif; font-style: italic; font-size: 4.2cqw; color: #2A1F14; line-height: 1.2; }

/* The frieze of photographs above the niches. */
.rt-photo {
  position: absolute; left: 50%; bottom: 610px; width: 320px; height: 210px; margin: 0 0 0 -160px;
  padding: 16px; background: linear-gradient(135deg, #3A2A1C, #1E150D);
  box-shadow: 0 0 0 2px #7A5E2C, 0 14px 30px rgba(0,0,0,0.65);
}
.rt-photo::before {                          /* its picture light */
  content: ''; position: absolute; left: -20%; right: -20%; top: -70px; height: 140px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,214,150,0.16), rgba(255,214,150,0));
}
.rt-photo-mat { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 14px; background: #E6DCC6; }
.rt-photo-mat:has(.rt-photo-none) { background: #2E2922; box-shadow: inset 0 0 40px rgba(0,0,0,0.6); }
.rt-photo-mat img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rt-photo-none {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center;
  border: 1px solid rgba(176,141,87,0.28);
  font-family: 'IM Fell English', serif; font-style: italic; font-size: 26px; line-height: 1.3; color: rgba(233,223,198,0.42);
}
.rt-photo figcaption { position: absolute; left: 0; right: 0; top: 100%; margin-top: 8px; text-align: center;
  font-family: 'IM Fell English', serif; font-style: italic; font-size: 20px; color: rgba(233,223,198,0.7); }
.rt-photo--big { bottom: 130px; width: 400px; height: 430px; margin-left: -200px; }

/* The arc's argument cut in a stone tablet, where a bay has no niche. */
.rt-tablet {
  position: absolute; left: 50%; bottom: 130px; width: 400px; height: 430px; margin-left: -200px;
  display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 40px 36px;
  background: linear-gradient(to bottom, #2A2620, #1B1814);
  box-shadow: 0 0 0 3px #3A2C15, 0 0 0 5px #7A5E2C, 0 18px 40px rgba(0,0,0,0.6);
  text-align: center; color: #D9C9A2;
}
.rt-tablet-head { font-family: 'Cinzel', serif; font-size: 30px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.rt-tablet-body { font-family: 'IM Fell English', serif; font-style: italic; font-size: 27px; line-height: 1.4; }

/* The band of legends, and the doorway. */
.rt-band {
  position: absolute; left: 0; right: 0; bottom: 846px; height: 42px; margin: 0;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  background: linear-gradient(to bottom, #15120E, #0E0C09);
  border-top: 2px solid #7A5E2C; border-bottom: 2px solid #7A5E2C;
  white-space: nowrap;
}
.rt-legend { font-family: 'Cinzel', serif; font-size: 23px; letter-spacing: 0.2em; color: #D8B868; }
.rt-reading { font-family: 'IM Fell English', serif; font-style: italic; font-size: 19px; color: rgba(233,223,198,0.6); }
.rt-door {
  position: absolute; left: 50%; bottom: 0; width: 320px; height: 700px; margin-left: -160px;
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  background: linear-gradient(to bottom, #0B0907, #020201);
  box-shadow: 0 0 0 6px #3A2C15, 0 0 0 10px #7A5E2C; text-decoration: none;
}
.rt-door-lintel { margin-top: -110px; font-family: 'Cinzel', serif; font-size: 34px; letter-spacing: 0.16em; color: var(--gold); text-align: center; line-height: 1.3; }
.rt-door-lintel em { display: block; font-family: 'IM Fell English', serif; font-size: 24px; letter-spacing: 0; color: rgba(233,223,198,0.75); }
.rt-door-way { margin-bottom: 40px; font-family: 'Cinzel', serif; font-size: 22px; letter-spacing: 0.2em; color: rgba(233,223,198,0.55); text-transform: uppercase; }

/* The roundels: the arc's claimants by name, a line of the claim beneath. */
.rt-roundel {
  position: absolute; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: radial-gradient(circle at 50% 40%, #1E3264, #0D1836 70%, #081028);
  box-shadow: 0 0 0 4px #9C7A42, 0 0 0 7px #3A2C15, 0 0 0 9px #7A5E2C, 0 10px 24px rgba(0,0,0,0.6);
}
.rt-roundel::before {                         /* the tesserae */
  content: ''; position: absolute; inset: 0; border-radius: 50%; opacity: 0.35;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.5) 0 1px, transparent 1px 7px), repeating-linear-gradient(90deg, rgba(0,0,0,0.5) 0 1px, transparent 1px 7px);
}
.rt-r-name { position: relative; font-family: 'Cinzel', serif; font-size: min(calc(var(--d) * 0.14), calc(var(--d) * 1.2 / var(--len))); line-height: 1.15; letter-spacing: 0.06em; color: #E6C877; padding: 0 12%; }
.rt-r-dates { position: relative; margin-top: 4px; font-family: 'Cinzel', serif; font-size: calc(var(--d) * 0.1); letter-spacing: 0.08em; color: #C9A84C; }
.rt-claim { position: absolute; margin: 0; text-align: center; font-family: 'IM Fell English', serif; font-style: italic; font-size: 17px; line-height: 1.2; color: rgba(233,223,198,0.6);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

/* Floor and dome: discs laid flat. */
.rt-disc { position: absolute; border-radius: 50%; }
.rt-floor {
  background: radial-gradient(closest-side, rgba(255,226,170,0.16), rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%),
              url(/assets/images/museum/rotunda/floor.webp) center / cover;
}
.rt-dome {
  background: radial-gradient(closest-side, rgba(0,0,0,0) 60%, rgba(0,0,0,0.6)),
              url(/assets/images/museum/rotunda/dome.webp) center / cover;
  box-shadow: 0 0 0 14px #2A1F0C;
}
.rt-dome svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rt-dome-band { fill: none; stroke: #B48C34; stroke-width: 36; opacity: 0.92; }
.rt-dome-text { font-family: 'Cinzel', serif; font-size: 22px; font-weight: 700; letter-spacing: 0.08em; fill: #2A1A06; dominant-baseline: central; }

/* The plinth under the oculus. */
.rt-center { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.rt-plinth { position: absolute; left: -120px; top: 190px; width: 240px; height: 190px; display: block; text-decoration: none; }
/* The display stands on the drum's top, drawn over it so that its plinth shows.
   The centre is nearer the eye than the niches, so it takes a smaller scale
   than their 31.62px to the inch, or it fills the stand and blocks the room. */
.rt-on { position: absolute; z-index: 1; left: 50%; bottom: 100%; width: 0; height: 0; }
.rt-on > * { --u: 19px; width: calc(var(--in) * var(--u)); bottom: 0; left: 0; }
.rt-on .rt-face, .rt-on .rt-stand { bottom: 0; }
.rt-on .rt-stand-card { display: none; }   /* the plinth's plate says it; a card here stood in front of the far niche */
.rt-drum {
  position: absolute; inset: 0; border-radius: 0 0 120px 120px / 0 0 22px 22px;
  background:
    linear-gradient(to right, rgba(0,0,0,0.75), rgba(0,0,0,0.05) 38%, rgba(255,230,190,0.08) 46%, rgba(0,0,0,0.25) 70%, rgba(0,0,0,0.8)),
    url(/assets/images/museum/rotunda/floor.webp) center / 340% auto;
}
.rt-drum-top { position: absolute; left: 0; right: 0; top: -22px; height: 44px; border-radius: 50%;
  background: radial-gradient(closest-side, #6A3A2C, #3E2219 85%, #22130D); box-shadow: inset 0 2px 0 rgba(255,220,190,0.15); }
.rt-drum-plate { top: 38%; width: 84%; container-type: normal; font-size: 11px; padding: 6px 10px 7px; }
.rt-drum-plate .plate-type { font-size: 10px; } .rt-drum-plate .plate-title { font-size: 16px; margin: 2px 0; } .rt-drum-plate .plate-meta { font-size: 9.5px; }
.rt-drum-plate .rivet { width: 5px; height: 5px; } .rt-drum-plate .rivet.r1, .rt-drum-plate .rivet.r3 { left: 4px; } .rt-drum-plate .rivet.r2, .rt-drum-plate .rivet.r4 { right: 4px; }
.rt-drum-plate .rivet.r1, .rt-drum-plate .rivet.r2 { top: 4px; } .rt-drum-plate .rivet.r3, .rt-drum-plate .rivet.r4 { bottom: 4px; }
.rt-plinth:hover .rt-on, .rt-plinth:focus-visible .rt-on { filter: brightness(1.15); }
.rt-shaft {
  position: absolute; left: -260px; width: 520px; top: -700px; height: 840px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(220,232,255,0.16), rgba(255,236,200,0.06) 75%, rgba(255,236,200,0));
  clip-path: polygon(38% 0, 62% 0, 82% 100%, 18% 100%);
}

/* What stays flat over the room. */
.rt-plaque { position: absolute; z-index: 4; left: 2.5%; bottom: 4%; max-width: 42%; pointer-events: none;
  padding: 0.6rem 0.9rem; background: rgba(10,8,6,0.62); border-left: 2px solid var(--gold-dim); }
.rt-plaque .plaque-eyebrow, .rt-plaque .plaque-title { margin: 0; }
.rt-turn {
  position: absolute; z-index: 4; top: 50%; transform: translateY(-50%);
  width: 3rem; height: 4.5rem; border: 0; background: rgba(10,8,6,0.45); color: var(--gold);
  font-size: 2.2rem; line-height: 1; cursor: pointer;
}
.rt-turn:hover, .rt-turn:focus-visible { background: rgba(10,8,6,0.75); }
/* No hover on a touch screen, so the arrow stands alone over the niches. */
@media (hover: none) {
  .rt-turn, .rt-turn:hover { background: none; text-shadow: 0 1px 6px #000; }
}
.rt-turn--l { left: 0; } .rt-turn--r { right: 0; }
.rt-facing { position: absolute; z-index: 4; right: 2.5%; bottom: 4%; margin: 0; max-width: 46%; text-align: right;
  font-family: 'IM Fell English', serif; font-style: italic; font-size: 1.05rem; }
.rt-facing a { color: var(--cream); text-decoration: none; padding: 0.4rem 0.8rem; background: rgba(10,8,6,0.62); display: inline-block; }
.rt-facing a:hover { color: var(--gold); }
.rotunda--tall .rt-plaque { left: 0; right: 0; bottom: auto; top: 0; max-width: none; border-left: 0; }
.rotunda--tall .rt-facing { left: 0; right: 0; max-width: none; text-align: center; bottom: 1rem; }

/* The room as a list, for reading and for phones. */
.rt-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.6rem; }
.rt-list a { display: block; height: 100%; padding: 0.75rem 0.9rem; background: rgba(255,255,255,0.03); border: 1px solid var(--rule); text-decoration: none; }
.rt-list a:hover { border-color: var(--gold-dim); }
.rt-li-kind { display: block; font-family: 'Cinzel', serif; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-label); }
.rt-li-title { display: block; margin: 0.2rem 0; font-family: 'IM Fell English', serif; font-size: 1.1rem; color: var(--cream); }
.rt-li-note { display: block; font-size: 0.85rem; font-style: italic; color: var(--muted); }

/* A map where a photograph is still to come: the coin map's tiles, warmed
   to an old print, the place pinned at the centre. */
.rt-photo-mat:has(.pl-map) { padding: 0; overflow: hidden; }
.pl-map { position: relative; display: block; overflow: hidden; background: #D9CFB8; }
.pl-map img { position: absolute; width: 256px; height: 256px; max-width: none; filter: sepia(0.7) saturate(0.75) brightness(0.97) contrast(1.05); }
.pl-pin { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #F0D9A0, #9A7A42 55%, #4A3612); box-shadow: 0 0 0 3px rgba(122,94,44,0.35), 0 2px 4px rgba(0,0,0,0.5); }
.pl-name { position: absolute; left: 50%; top: calc(50% + 12px); transform: translateX(-50%); white-space: nowrap;
  font-family: 'Cinzel', serif; font-size: 15px; letter-spacing: 0.1em; color: #3A2A12; text-shadow: 0 0 3px #E8DFC9, 0 0 6px #E8DFC9; }
.rt-photo--big .pl-name { font-size: 20px; }
.rt-credit { display: block; margin-top: 2px; font-style: normal; font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(233,223,198,0.45); }
.rt-photo--map .rt-photo-mat { display: flex; align-items: center; justify-content: center; }

/* A niche, close to: the wall of one bay, the niche filling it. */
.niche-room {
  min-height: calc(100svh - var(--hdr));
  background: url(/assets/images/museum/rotunda/slate.webp) center top / 900px auto repeat #1A1714;
  box-shadow: inset 0 0 220px rgba(0,0,0,0.75);
  display: flex; align-items: center; justify-content: center; padding: 2rem 1rem;
}
.nv-wall { display: flex; align-items: center; justify-content: center; gap: clamp(1.5rem, 4vw, 4rem); width: min(100%, 78rem); }
.nv-niche { width: min(92vw, calc((100svh - var(--hdr) - 8rem) * 1360 / 1596)); flex: none;
  box-shadow: 0 0 0 4px #3A2C15, 0 0 0 7px #7A5E2C, 0 30px 70px rgba(0,0,0,0.7); }
.nv-niche .cubby--plinth { margin: 0; }
.nv-niche .cubby-board { cursor: zoom-in; }
.nv-object { display: contents; }
.nv-object .rt-face, .nv-object .rt-board { cursor: zoom-in; transition: filter 0.3s ease; }
.nv-object:hover .rt-face, .nv-object:hover .rt-board { filter: brightness(1.08); }
.nv-niche .rt-print { display: block; text-decoration: none; }
.nv-side { flex: 1 1 22rem; max-width: 30rem; color: var(--cream); }
.nv-kind { margin: 0; font-family: 'Cinzel', serif; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-label); }
.nv-title { margin: 0.35rem 0 0.6rem; font-family: 'IM Fell English', serif; font-style: italic; font-weight: 400; font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.15; color: var(--parchment); }
.nv-what { margin: 0 0 1rem; font-size: 1.05rem; line-height: 1.5; color: var(--muted); }
.nv-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 1.8rem; }
.nv-actions .way { text-decoration: none; }
.nv-photo { position: relative; left: auto; bottom: auto; margin: 0; width: 100%; height: auto; aspect-ratio: 452 / 292; }
.nv-photo .rt-photo-mat { height: 100%; }
.nv-photo .pl-map { transform-origin: 0 0; }
.nv-photo figcaption { position: static; margin-top: 0.6rem; font-size: 1rem; }
@media (max-width: 860px) {
  .nv-wall { flex-direction: column; }
  .nv-niche { width: min(100%, 30rem); }
  .nv-side { max-width: 30rem; width: 100%; }
}

.rt-bay .rt-credit { display: none; }
.rt-bay .rt-photo figcaption { margin-top: 6px; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.rt-credit { text-decoration: none; } a.rt-credit:hover { color: var(--gold); }
.rt-photo-mat img { object-position: 50% 28%; }
.rt-hint {
  position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; pointer-events: none;
  padding: 0.6rem 1.1rem; background: rgba(10,8,6,0.72); border: 1px solid var(--gold-dim);
  font-family: 'Cinzel', serif; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream);
  white-space: nowrap; animation: rt-hint-in 0.8s 0.8s ease both; transition: opacity 0.6s ease;
}
.rt-hint--gone { opacity: 0; }
@keyframes rt-hint-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 520px) { .rt-hint { white-space: normal; text-align: center; width: 78%; } }

/* The page never scrolls sideways: in Safari a turned room would otherwise
   push the document wider than the screen. */
html:has(.rotunda), html:has(.rotunda) body { overflow-x: clip; }
/* A phone on its side: the room is a short letterbox, so the words shrink
   out of its way and the header gives it what height it can. */
@media (max-height: 500px) and (orientation: landscape) {
  .mhead-name { display: none; }
  .rt-plaque { padding: 0.25rem 0.5rem; max-width: 50%; left: 0; bottom: 0; }
  .rt-plaque .plaque-eyebrow { display: none; }
  .rt-plaque .plaque-title { font-size: 0.72rem; }
  .rt-facing { right: 0; bottom: 0; font-size: 0.8rem; }
  .rt-facing a { padding: 0.2rem 0.5rem; }
  .rt-turn { width: 2.2rem; height: 3rem; font-size: 1.7rem; }
  .rt-hint { display: none; }
}