/* ============================================================
   THE MUSEUM OF TWISHA — free admission, open late
   ============================================================ */

:root {
  --font-display: "Fraunces", "Georgia", serif;
  --font-body: "DM Sans", "Helvetica Neue", sans-serif;

  --ink: #221c15;
  --paper: #f6f1e7;
  --wall-lobby: #f3ede1;
  --wall-g1: #efe9db;
  --wall-g2: #6e3f39;      /* oxblood feature wall */
  --wall-trophy: #2e4237;  /* deep gallery green */
  --wall-studio: #ece6d8;
  --wall-shop: #f4eee2;
  --floor: #c9a678;
  --floor-dark: #a8875c;
  --brass: #a8874f;
  --gold: #c9a227;
  --velvet: #a33b3b;
  --accent: #e0705c;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--wall-lobby);
  overflow-x: hidden;
}

::selection { background: var(--velvet); color: var(--paper); }

button { font-family: inherit; color: inherit; }

/* ---------------- rooms ---------------- */

.room {
  position: relative;
  padding: 90px 6vw 0;
  /* every room stands on the same wood floor */
  padding-bottom: 130px;
}
.room::after { /* the floor */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 84px;
  background:
    linear-gradient(rgba(34,28,21,.16), rgba(34,28,21,0) 22%),
    repeating-linear-gradient(90deg, var(--floor) 0 140px, var(--floor-dark) 140px 143px);
}
.room::before { /* baseboard */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 84px;
  height: 12px;
  background: #ddd3bf;
  border-top: 2px solid rgba(34,28,21,.25);
  z-index: 1;
}

/* room signage */
.room-sign { max-width: 1200px; margin: 0 auto 44px; }
.rs-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .38em;
  color: var(--brass);
}
.rs-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(36px, 4.4vw, 58px);
  line-height: 1.02;
  margin: 6px 0 6px;
}
.rs-note {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  opacity: .66;
}
.room-sign-light { color: var(--paper); }
.room-sign-light .rs-kicker { color: var(--gold); }

/* ---------------- lobby ---------------- */

.lobby {
  background: var(--wall-lobby);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 46px;
}

.masthead { text-align: center; margin-top: 30px; }
.mh-est {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .42em;
  opacity: .55;
}
.mh-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(56px, 9.6vw, 128px);
  line-height: .96;
  margin: 18px 0 14px;
}
.mh-title em {
  font-style: italic;
  font-weight: 300;
  font-size: .55em;
  vertical-align: .12em;
  margin: 0 .06em;
}
.mh-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(15px, 1.8vw, 19px);
  opacity: .72;
}

.lobby-floor-items {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(24px, 5vw, 80px);
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}

/* ticket booth */
.booth {
  position: relative;
  width: 150px;
  height: 190px;
  background: var(--velvet);
  border: 4px solid var(--ink);
  border-radius: 12px 12px 6px 6px;
  cursor: pointer;
  transition: transform .2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 26px;
}
.booth:hover { transform: translateY(-5px) rotate(-.6deg); }
.booth-roof {
  position: absolute;
  top: -18px; left: -14px; right: -14px;
  height: 26px;
  background: repeating-linear-gradient(90deg, var(--paper) 0 22px, var(--velvet) 22px 44px);
  border: 4px solid var(--ink);
  border-radius: 10px;
}
.booth-window {
  width: 84px; height: 64px;
  background: #efe6d2;
  border: 4px solid var(--ink);
  border-radius: 8px;
  display: grid;
  place-items: center;
}
.booth-face { font-size: 30px; line-height: 1; }
.booth-sign {
  margin-top: 10px;
  color: var(--paper);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .22em;
  text-align: center;
}
.booth-sign em {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  letter-spacing: .04em;
  margin-top: 2px;
}
.booth-slot {
  position: absolute;
  bottom: 24px;
  width: 64px; height: 8px;
  background: var(--ink);
  border-radius: 4px;
}

/* wayfinding */
.wayfinding {
  border: 3px solid var(--ink);
  background: var(--paper);
  padding: 22px 30px 24px;
  box-shadow: 8px 8px 0 rgba(34,28,21,.14);
  min-width: 300px;
}
.wf-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .34em;
  text-align: center;
  margin-bottom: 12px;
  opacity: .6;
}
.wayfinding a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 22px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .14em;
  padding: 7px 2px;
  border-bottom: 2px dotted rgba(34,28,21,.25);
  transition: transform .15s, color .15s;
}
.wayfinding a:last-child { border-bottom: none; }
.wayfinding a span {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: .02em;
  opacity: .65;
}
.wayfinding a:hover { transform: translateX(5px); color: var(--velvet); }

/* dedication plaque */
.dedication {
  max-width: 330px;
  background: linear-gradient(160deg, #cbb17e, #b3925c 55%, #cbb17e);
  border: 3px solid #7d6335;
  border-radius: 6px;
  padding: 20px 24px;
  text-align: center;
  color: #3a2d16;
  box-shadow: inset 0 0 0 5px rgba(255,244,214,.35), 6px 8px 14px rgba(34,28,21,.25);
}
.ded-head { font-size: 10.5px; font-weight: 700; letter-spacing: .3em; margin-bottom: 8px; }
.ded-body {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.35;
  margin-bottom: 8px;
}
.ded-body em { font-weight: 500; }
.ded-fine { font-size: 11px; line-height: 1.5; opacity: .8; }

/* ---------------- pieces & frames ---------------- */

.wall {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(26px, 4vw, 64px);
  flex-wrap: wrap;
  max-width: 1360px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.piece {
  position: relative;
  cursor: pointer;
  outline: none;
  text-align: center;
  transition: transform .25s;
  padding-top: 26px; /* room for the wire */
}
.piece:hover, .piece:focus-visible { transform: translateY(-6px); }
.piece:focus-visible .frame { outline: 3px solid var(--velvet); outline-offset: 4px; }

/* hanging wire: two thin lines from a nail down to the frame corners */
.wire {
  position: absolute;
  top: 2px; left: 50%;
  width: 6px; height: 6px;
  margin-left: -3px;
  background: var(--ink);
  border-radius: 50%; /* the nail */
  pointer-events: none;
}
.wire::before, .wire::after {
  content: "";
  position: absolute;
  top: 2px; left: 1.5px;
  width: 2.5px; height: 36px;
  background: rgba(34,28,21,.45);
  transform-origin: top center;
}
.wire::before { transform: rotate(56deg); }
.wire::after { transform: rotate(-56deg); }

/* spotlight cone above each piece */
.piece::before {
  content: "";
  position: absolute;
  top: -60px; left: 50%;
  transform: translateX(-50%);
  width: 130%;
  height: 130px;
  background: linear-gradient(rgba(255,244,204,.5), rgba(255,244,204,0));
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  opacity: 0;
  transition: opacity 1s;
  pointer-events: none;
}
.room.lit .piece::before { opacity: 1; }

.frame {
  background: #fff;
  padding: 14px;
  border: 5px solid var(--ink);
  box-shadow: 0 14px 26px rgba(34,28,21,.22);
  width: clamp(190px, 16vw, 240px);
}
.frame svg { display: block; width: 100%; height: auto; border: 1px solid rgba(34,28,21,.18); }

.frame-gold {
  border: 10px solid transparent;
  border-image: linear-gradient(140deg, #e9c96a, #9a7226 30%, #f2dd8f 55%, #8a6520 80%, #e9c96a) 1;
  padding: 10px;
  background: #f5edd8;
}

.art-mono { font-family: var(--font-body); font-weight: 700; font-size: 13px; letter-spacing: .06em; }
.art-mono2 { font-family: var(--font-body); font-weight: 700; font-size: 13px; letter-spacing: .22em; fill: #8b8172; }
.art-serif { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 30px; fill: #8b8172; }
.art-coin { font-family: var(--font-display); font-weight: 700; font-size: 13px; fill: #2b1f17; }
.art-coin.sm { font-size: 11px; }
.medal-num { font-family: var(--font-display); font-weight: 900; font-size: 14px; fill: #3d3425; }

/* brass plaques */
.plaque {
  display: inline-block;
  margin-top: 16px;
  background: linear-gradient(160deg, #cbb17e, #b3925c 55%, #cbb17e);
  border: 2px solid #7d6335;
  border-radius: 4px;
  padding: 8px 18px 9px;
  color: #3a2d16;
  text-align: center;
  box-shadow: inset 0 0 0 3px rgba(255,244,214,.35);
}
.plaque strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.15;
}
.plaque em {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 12.5px;
  opacity: .85;
  margin-top: 2px;
}
.plaque span {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-top: 4px;
  opacity: .75;
}

/* ---------------- gallery I : the draggable room ---------------- */

.gallery1 { background: var(--wall-g1); padding-left: 0; padding-right: 0; }
.gallery1 .room-sign { padding: 0 6vw; max-width: none; }

.gallery-viewport {
  overflow: hidden;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  position: relative;
  z-index: 2;
}
.gallery-viewport.grabbing { cursor: grabbing; }
/* soft room edges */
.gallery-viewport::before, .gallery-viewport::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 70px;
  z-index: 3;
  pointer-events: none;
}
.gallery-viewport::before { left: 0; background: linear-gradient(90deg, var(--wall-g1), transparent); }
.gallery-viewport::after { right: 0; background: linear-gradient(-90deg, var(--wall-g1), transparent); }

.gallery-track {
  display: flex;
  align-items: flex-end;
  gap: clamp(60px, 7vw, 120px);
  width: max-content;
  padding: 30px 12vw 10px;
  will-change: transform;
}
.gallery-track .piece { flex: 0 0 auto; }
.gallery-track img, .gallery-track svg { -webkit-user-drag: none; }

.drag-hint {
  text-align: center;
  margin-top: 26px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 15.5px;
  opacity: .6;
  transition: opacity .6s;
  position: relative;
  z-index: 2;
}
.drag-hint.off { opacity: 0; }

/* bench */
.bench {
  position: relative;
  flex: 0 0 auto;
  width: 170px;
  height: 64px;
  margin-bottom: 4px;
}
.bench-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 16px;
  background: #b56a4f;
  border: 3.5px solid var(--ink);
  border-radius: 8px;
}
.bench-leg {
  position: absolute;
  top: 14px;
  width: 12px; height: 50px;
  background: #9c583f;
  border: 3.5px solid var(--ink);
  border-radius: 0 0 4px 4px;
}
.bl-1 { left: 18px; }
.bl-2 { right: 18px; }

/* plant */
.plant {
  flex: 0 0 auto;
  width: 92px;
  height: auto;
  margin-bottom: 2px;
}

/* security camera */
.seccam {
  position: absolute;
  top: 26px; right: 4vw;
  width: 110px;
  z-index: 3;
}
.seccam line, .seccam rect { stroke: var(--ink); stroke-width: 4; fill: #4c463c; }
.cam-lens { fill: #1c1813; stroke: var(--ink); stroke-width: 3; }
.cam-led { fill: #e04f3f; animation: blinkled 1.6s steps(1) infinite; }
@keyframes blinkled { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .15; } }
.cam-head { transform-origin: 42px 34px; transition: transform .3s ease-out; }

/* velvet rope */
.rope {
  position: absolute;
  left: 50%;
  bottom: -66px;
  transform: translateX(-50%);
  width: 118%;
  height: 84px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 3;
}
.rope-post {
  position: absolute;
  bottom: 0;
  width: 10px; height: 62px;
  background: linear-gradient(#d8c26a, #8a6520);
  border: 2.5px solid var(--ink);
  border-radius: 4px;
}
.rope-post::before {
  content: "";
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  width: 18px; height: 18px;
  background: radial-gradient(circle at 35% 30%, #f2dd8f, #9a7226);
  border: 2.5px solid var(--ink);
  border-radius: 50%;
}
.post-l { left: 0; }
.post-r { right: 0; }
.rope-swag {
  position: absolute;
  left: 8px; right: 8px;
  top: 8px;
  height: 40px;
  border: none;
  border-bottom: 9px solid var(--velvet);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  filter: drop-shadow(0 2px 0 rgba(34,28,21,.5));
}
.rope-tag {
  position: absolute;
  left: 50%; top: 34px;
  transform: translateX(-50%) rotate(-2deg);
  background: var(--paper);
  border: 2px solid var(--ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
  padding: 3px 8px;
  border-radius: 3px;
}
.rope:hover .rope-swag { animation: ropesway 1s ease-in-out; }
@keyframes ropesway {
  0%, 100% { transform: none; }
  30% { transform: translateY(4px) scaleY(1.06); }
  60% { transform: translateY(-2px); }
}
.roped { margin-bottom: 60px; }

/* ---------------- gallery II ---------------- */

.gallery2 { background: linear-gradient(var(--wall-g2), #5d332e); }
.gallery2 .rs-kicker { color: #e9c96a; }
.gallery2 .room-sign { color: var(--paper); }
.gallery2::before { background: #4a2823; }

/* all four period pieces on one line */
.wall-classic { flex-wrap: nowrap; align-items: flex-end; }
.wall-classic .frame { width: clamp(150px, 15.2vw, 224px); }
.wall-classic .plaque { max-width: clamp(160px, 16vw, 240px); padding: 8px 12px 9px; }
@media (max-width: 980px) {
  .wall-classic {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 16px;
    scrollbar-width: thin;
  }
}

.plaque-dark { box-shadow: inset 0 0 0 3px rgba(255,244,214,.35), 0 6px 14px rgba(0,0,0,.35); }

/* ---------------- trophy hall ---------------- */

.trophies { background: linear-gradient(var(--wall-trophy), #24352c); }
.trophies::before { background: #223128; }

.pedestal-row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(18px, 3vw, 46px);
  flex-wrap: wrap;
  max-width: 1360px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.pedestal {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 40px;
  transition: transform .25s;
}
.pedestal:hover { transform: translateY(-4px); }
.pedestal:focus-visible { outline: 3px solid var(--gold); outline-offset: 6px; border-radius: 8px; }

.trophy { width: 92px; height: auto; position: relative; z-index: 1; }

.dome {
  position: absolute;
  top: 26px;
  width: 124px;
  height: 118px;
  background: linear-gradient(155deg, rgba(255,255,255,.22), rgba(255,255,255,.04) 45%, rgba(255,255,255,.12));
  border: 2.5px solid rgba(255,255,255,.55);
  border-bottom: none;
  border-radius: 60px 60px 8px 8px;
  z-index: 2;
  transition: transform .55s cubic-bezier(.3,1.3,.5,1), opacity .55s;
}
.dome::after { /* knob */
  content: "";
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(255,255,255,.6);
  border: 2px solid rgba(255,255,255,.7);
}
.pedestal.lifted .dome { transform: translateY(-92px) rotate(4deg); opacity: .55; }
.pedestal.lifted .trophy { animation: trophyshine .7s ease-out; }
@keyframes trophyshine {
  0% { filter: brightness(1); transform: none; }
  40% { filter: brightness(1.5) drop-shadow(0 0 18px rgba(245,217,92,.8)); transform: translateY(-6px); }
  100% { filter: brightness(1); transform: none; }
}

.ped-base {
  margin-top: 14px;
  width: 158px;
  background: linear-gradient(#e9e2d1, #cfc4ab);
  border: 3px solid var(--ink);
  border-radius: 4px;
  padding: 12px 10px 44px;
  text-align: center;
  position: relative;
}
.ped-base::after { /* pedestal column */
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: -0px;
  height: 30px;
  background: linear-gradient(#d8cfb9, #b7ab8f);
  border-top: 3px solid var(--ink);
}
.ped-base strong {
  display: block;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.2;
}
.ped-base em {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 12px;
  margin-top: 3px;
  opacity: .8;
}

/* ---------------- the studio ---------------- */

.studio { background: var(--wall-studio); }

.studio-bench {
  display: flex;
  justify-content: center;
  gap: clamp(26px, 4vw, 70px);
  flex-wrap: wrap;
  max-width: 1360px;
  margin: 0 auto 40px;
  position: relative;
  z-index: 2;
}
.supply-group { min-width: 260px; max-width: 420px; }
.sg-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .3em;
  margin-bottom: 14px;
  opacity: .75;
}
.sg-label em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: none;
  font-size: 13px;
}

/* paint tubes */
.tubes { display: flex; flex-wrap: wrap; gap: 12px; }
.tube {
  position: relative;
  border: 3px solid var(--ink);
  border-radius: 8px 8px 5px 5px;
  background: linear-gradient(var(--tubec) 0 62%, #efe9dc 62%);
  width: 64px;
  height: 96px;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  transition: transform .15s;
}
.tube::before { /* cap */
  content: "";
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  width: 22px; height: 14px;
  background: var(--ink);
  border-radius: 4px 4px 0 0;
}
.tube { cursor: default; }
.tube:hover { transform: translateY(-5px) rotate(-2deg); }

/* brushes */
.brushes { display: flex; flex-wrap: wrap; gap: 10px; }
.brush {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 3px solid var(--ink);
  border-radius: 30px;
  background: var(--paper);
  padding: 7px 14px 7px 9px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  transition: transform .15s;
  cursor: default;
}
.brush::before {
  content: "";
  width: 18px; height: 10px;
  background: var(--brushc, var(--accent));
  border: 2px solid var(--ink);
  border-radius: 6px 2px 2px 6px;
}
.brush:hover { transform: rotate(-3deg) translateY(-3px); }

/* tool chips */
.toolchips { display: flex; flex-wrap: wrap; gap: 10px; }
.toolchip {
  border: 3px dashed rgba(34,28,21,.55);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  background: rgba(255,255,255,.5);
  transition: transform .15s;
  cursor: default;
}
.toolchip:hover { transform: translateY(-3px); border-style: solid; }

/* ---------------- gift shop ---------------- */

.giftshop { background: var(--wall-shop); }

.exit-sign {
  display: inline-block;
  background: #2e4237;
  color: #d9ffe6;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .3em;
  padding: 9px 18px;
  border-radius: 6px;
  box-shadow: 0 4px 0 rgba(34,28,21,.3);
  margin-bottom: 34px;
}

.shop-shelf {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: clamp(16px, 2.6vw, 34px);
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.postcard-item {
  width: 218px;
  background: var(--paper);
  border: 4px solid var(--ink);
  border-radius: 10px;
  padding: 22px 18px 18px;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  cursor: pointer;
  position: relative;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 8px 8px 0 rgba(34,28,21,.14);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.postcard-item:hover { transform: translateY(-8px) rotate(-1.2deg); box-shadow: 10px 14px 0 rgba(34,28,21,.16); }
.postcard-item:nth-child(even):hover { transform: translateY(-8px) rotate(1.2deg); }

.pc-art {
  width: 74px; height: 74px;
  border: 3.5px solid var(--ink);
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 8px;
}
.pc-art-mail { background: #f0b7c8; }
.pc-art-li   { background: #9fd7ff; font-family: var(--font-display); }
.pc-art-gh   { background: #d8caa8; font-size: 24px; }
.pc-art-book { background: #cdeee2; }

.postcard-item strong { font-size: 13.5px; letter-spacing: .18em; }
.postcard-item em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 13.5px;
  opacity: .7;
}
.pc-price {
  position: absolute;
  top: -12px; right: -10px;
  background: var(--accent);
  color: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 50%;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  transform: rotate(8deg);
}

.colophon {
  text-align: center;
  margin-top: 80px;
  position: relative;
  z-index: 2;
}
.colophon p { font-size: 12px; font-weight: 700; letter-spacing: .2em; opacity: .7; }
.colo-fine {
  font-family: var(--font-display) !important;
  font-style: italic;
  font-weight: 500 !important;
  letter-spacing: .04em !important;
  text-transform: none;
  margin-top: 8px;
  opacity: .55 !important;
}

/* ---------------- kiosk buttons ---------------- */

.kiosk {
  position: fixed;
  right: 20px; bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 70;
}
.kiosk-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 3px solid var(--ink);
  background: var(--paper);
  border-radius: 30px;
  padding: 8px 14px 8px 10px;
  cursor: pointer;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .08em;
  box-shadow: 4px 4px 0 rgba(34,28,21,.2);
  transition: transform .15s;
}
.kiosk-btn:hover { transform: translateY(-3px); }
.kiosk-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.kiosk-icon { font-size: 16px; }

/* admission ticket */
.ticket {
  position: fixed;
  left: 18px; bottom: 18px;
  z-index: 70;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 8px;
  padding: 12px 18px;
  transform: rotate(-4deg);
  box-shadow: 6px 6px 0 rgba(34,28,21,.2);
  animation: ticketin .6s cubic-bezier(.2,1.3,.4,1) both;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-align: center;
}
.ticket em {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .02em;
  margin-top: 3px;
}
.ticket::before, .ticket::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 14px; height: 14px;
  background: var(--wall-lobby);
  border: 3px solid var(--ink);
  border-radius: 50%;
  transform: translateY(-50%);
}
.ticket::before { left: -10px; }
.ticket::after { right: -10px; }
@keyframes ticketin {
  from { transform: translateY(120px) rotate(-14deg); opacity: 0; }
  to   { transform: rotate(-4deg); opacity: 1; }
}

/* ---------------- after hours (flashlight) ---------------- */

.torch-layer {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  transition: opacity .8s;
  background: radial-gradient(
    circle 230px at var(--mx, 50%) var(--my, 40%),
    rgba(6,4,2,0) 0%,
    rgba(6,4,2,.55) 62%,
    rgba(6,4,2,.965) 100%
  );
}
body.afterhours .torch-layer { opacity: 1; }
body.afterhours { cursor: crosshair; }

/* ---------------- alarm ---------------- */

.alarm-layer {
  position: fixed;
  inset: 0;
  z-index: 65;
  pointer-events: none;
  display: grid;
  place-items: center;
  opacity: 0;
}
body.alarmed .alarm-layer { animation: alarmflash .55s steps(2) 4; }
@keyframes alarmflash {
  0%, 100% { opacity: 0; background: rgba(224,79,63,0); }
  50% { opacity: 1; background: rgba(224,79,63,.28); }
}
.alarm-text {
  background: var(--ink);
  color: #ffe9e5;
  font-weight: 700;
  letter-spacing: .18em;
  font-size: clamp(12px, 2vw, 17px);
  padding: 14px 26px;
  border-radius: 8px;
  transform: rotate(-1.5deg);
}
body.alarmed .gallery1 { animation: roomshake .5s ease-in-out 2; }
@keyframes roomshake {
  0%, 100% { transform: none; }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* ---------------- wall label overlay ---------------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(26,20,14,.6);
  display: grid;
  place-items: center;
  padding: 24px;
}
.overlay[hidden] { display: none; }

.wall-label {
  position: relative;
  width: min(560px, 94vw);
  max-height: 86vh;
  overflow-y: auto;
  background: var(--paper);
  color: var(--ink);
  border: 3px solid var(--ink);
  padding: 44px 48px 40px;
  box-shadow: 16px 16px 0 rgba(10,8,5,.4);
  animation: labelin .35s cubic-bezier(.2,1.2,.4,1);
}
@keyframes labelin {
  from { transform: translateY(30px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.wl-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 3px solid var(--ink);
  background: var(--paper);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s, background .2s;
}
.wl-close:hover { transform: rotate(90deg); background: var(--accent); }

.wl-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .34em;
  color: var(--brass);
  margin-bottom: 10px;
}
.wl-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(30px, 4.4vw, 42px);
  line-height: 1.04;
  margin-bottom: 6px;
}
.wl-medium {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 15.5px;
  opacity: .75;
}
.wl-period {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  margin: 6px 0 18px;
  opacity: .55;
}
.wl-body p {
  font-size: 14.5px;
  line-height: 1.65;
  margin-bottom: 12px;
}
.wl-links { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.wl-links a {
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .14em;
  text-decoration: none;
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 30px;
  padding: 9px 18px;
  transition: transform .15s, background .2s;
}
.wl-links a:hover { transform: translateY(-3px); background: var(--gold); }

/* ---------------- reveal ---------------- */

.room-sign, .wall, .gallery-viewport, .pedestal-row, .studio-bench, .shop-shelf, .lobby-floor-items {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s ease, transform .9s ease;
}
.room.lit .room-sign, .room.lit .wall, .room.lit .gallery-viewport, .room.lit .pedestal-row,
.room.lit .studio-bench, .room.lit .shop-shelf, .room.lit .lobby-floor-items {
  opacity: 1;
  transform: none;
}
.masthead { opacity: 0; transition: opacity 1.2s ease .1s; }
.room.lit .masthead { opacity: 1; }

/* ---------------- responsive ---------------- */

@media (max-width: 760px) {
  .room { padding-left: 5vw; padding-right: 5vw; }
  .seccam { width: 84px; }
  .wall-label { padding: 34px 26px 30px; }
  .lobby-floor-items { gap: 30px; }
}

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