/* Architecture is the subject at a distance; controls explain the next action. */
.header {
  z-index: 12;
}
.brand-divider,
.brand-name,
.route,
.exhibition-stamp,
.location-mark,
.collection-foot {
  display: none !important;
}
.brand-signature {
  font-size: clamp(30px, 3.6vw, 48px);
}
.intro {
  left: 7%;
  top: 27%;
  max-width: 48%;
}
.intro h1 {
  font-size: clamp(60px, 7.5vw, 122px);
}
.intro .eyebrow {
  font-size: 10px;
  letter-spacing: 2px;
}
.intro-note {
  font-size: 11px;
  letter-spacing: 0.2px;
  margin-top: 25px;
}
.intro .enter-button {
  font-size: 13px;
  min-height: 50px;
}
.intro-shade {
  background: linear-gradient(
    90deg,
    #131910e8 0%,
    #131910a6 32%,
    #13191025 67%,
    transparent
  );
  opacity: var(--intro-opacity, 1);
}
.scene-vignette {
  background: radial-gradient(
    ellipse at 50% 45%,
    transparent 36%,
    #080d0645 100%
  );
  pointer-events: none;
}
#canvas-host {
  transition: opacity 0.2s;
}
.static-room {
  background: #252f25;
}
.arrival-fallback {
  position: absolute;
  inset: 10% -5% 0 35%;
  perspective: 900px;
  transform: rotateY(-6deg);
}
.facade-left,
.facade-right {
  position: absolute;
  top: 15%;
  height: 63%;
  background: linear-gradient(100deg, #4a4e40, #303a2d);
  box-shadow: inset 0 0 60px #1118;
}
.facade-left {
  left: 0;
  width: 36%;
}
.facade-right {
  right: 0;
  width: 36%;
}
.facade-lintel {
  position: absolute;
  left: 0;
  right: 0;
  top: 15%;
  height: 15%;
  background: #515342;
  box-shadow: 0 12px 20px #0004;
}
.entry-glow {
  position: absolute;
  left: 36%;
  right: 36%;
  top: 30%;
  height: 48%;
  border: 4px solid #262b20;
  background: linear-gradient(120deg, #a0956d44, #474a3433, #11170d);
  box-shadow: 0 0 45px #a8945c12;
}
.entry-path {
  position: absolute;
  left: 12%;
  right: 8%;
  top: 78%;
  height: 22%;
  background: linear-gradient(#4b4c3b, #292e22);
  clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
}
.static-room:after,
.static-bench,
.static-frame,
.static-label,
.room-line {
  display: none;
}
.scene-caption {
  left: 5%;
  bottom: 13%;
  padding: 0;
  max-width: 360px;
  background: none;
  backdrop-filter: none;
  border: 0;
  box-shadow: none;
  text-shadow: 0 2px 12px #0009;
}
.scene-caption .eyebrow {
  font-size: 10px;
  letter-spacing: 1px;
  color: #b6bba5;
}
.scene-caption h2 {
  font-size: clamp(22px, 2.2vw, 31px);
  line-height: 1.25;
  margin: 8px 0;
}
.scene-caption #frame-position {
  display: block;
  font-size: 11px;
  color: #bac0aa;
  margin: 6px 0;
}
.scene-caption button {
  font-size: 11px;
  min-height: 34px;
  padding: 3px 0 4px;
  gap: 16px;
}
.scene-caption:hover,
.scene-caption:focus-within {
  padding: 0;
}
.scene-caption #chapter-copy {
  display: none !important;
}
.stage-bottom {
  left: 5%;
  right: 5%;
  bottom: max(25px, env(safe-area-inset-bottom));
  font-size: 12px;
  letter-spacing: 0;
}
.scroll-cue {
  gap: 14px;
  color: #eee8d7;
  align-items: center;
}
.cue-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#scroll-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
  text-transform: none;
}
.cue-text small {
  font-size: 10px;
  color: #b0b7a0;
  line-height: 1.4;
  letter-spacing: 0;
}
.cue-text small:empty {
  display: none;
}
.scroll-mouse {
  width: 29px;
  height: 40px;
  border-color: #e0d4b299;
  border-radius: 18px;
}
.scroll-mouse:after {
  display: none;
}
.scroll-mouse:before {
  content: "↓";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 20px;
  color: #e1d6ba;
}
.counter {
  font-size: 12px;
  gap: 11px;
}
.counter-rule {
  width: 30px;
}
.map-button {
  opacity: 1;
  pointer-events: auto;
  right: 5%;
  bottom: 13%;
  font-size: 12px;
  min-height: 44px;
  gap: 10px;
  padding: 8px 0;
}
.map-button svg {
  width: 19px;
  height: 19px;
}
.at-arrival .scene-caption {
  opacity: 0;
  pointer-events: none;
}
.at-stairs .scene-caption #view-current {
  display: none;
}
.at-stairs .scene-caption {
  max-width: 300px;
}
.seat-spots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}
.seat-spot {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 13px;
  background: #20291ee6;
  border: 1px solid #bfb18c72;
  border-radius: 24px;
  color: #e0d6bd;
  font-size: 11px;
  box-shadow: 0 5px 25px #0003;
  white-space: nowrap;
  transition: background 0.2s;
}
.seat-spot > span:first-child {
  font-size: 19px;
  font-weight: 300;
}
.seat-spot:hover,
.seat-spot:focus-visible {
  background: #3f4933;
  border-color: #dbcb9b;
}
.seat-spot[hidden] {
  display: none;
}
.seated-bar {
  position: absolute;
  z-index: 8;
  bottom: max(30px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 35px;
  background: #1c251bee;
  border: 1px solid #a9b08c55;
  padding: 15px 19px 15px 22px;
  border-radius: 5px;
  box-shadow: 0 10px 35px #0005;
  max-width: 90vw;
}
.seated-bar[hidden] {
  display: none;
}
.seated-bar > span {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.seated-bar strong {
  font-size: 12px;
  color: #e0d7c2;
  font-weight: 400;
}
.seated-bar small {
  font-size: 11px;
  color: #b4bca3;
  white-space: nowrap;
}
.seated-bar button {
  display: flex;
  gap: 20px;
  align-items: center;
  white-space: nowrap;
  min-height: 44px;
  font-size: 12px;
  border-left: 1px solid #b6bd9f35;
  padding-left: 22px;
}
.is-seated #canvas-host canvas {
  touch-action: none;
  cursor: grab;
}
.is-seated .scene-caption,
.is-seated .stage-bottom,
.is-seated .map-button,
.art-inspecting .scene-caption,
.art-inspecting .stage-bottom,
.art-inspecting .map-button,
.art-inspecting .seat-spots {
  opacity: 0 !important;
  pointer-events: none !important;
}
.art-inspecting .header {
  opacity: 0;
  pointer-events: none;
}
.art-inspect {
  position: fixed;
  inset: 0;
  margin: 0;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: #e2dccd;
  overflow: hidden;
  pointer-events: none;
}
.art-inspect::backdrop {
  background: linear-gradient(90deg, transparent 45%, #11190c80 100%);
}
.inspect-back {
  position: absolute;
  top: 35px;
  left: 5%;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid #d7cfb64d;
  background: #172012de;
  color: #dfd8c3;
  font-size: 12px;
  pointer-events: auto;
  border-radius: 3px;
}
.inspect-info {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  width: min(320px, 28vw);
  padding: 25px 0;
  pointer-events: auto;
}
.inspect-info .eyebrow {
  font-size: 10px;
  color: #c6b99c;
  letter-spacing: 1.5px;
}
.inspect-info h2 {
  font: 400 clamp(27px, 3vw, 40px) / 1.2 var(--serif);
  letter-spacing: -0.5px;
  margin: 16px 0 20px;
}
#inspect-description {
  font-size: 13px;
  line-height: 1.9;
  color: #bec2ae;
}
#inspect-series {
  font-size: 11px;
  line-height: 1.7;
  color: #949e87;
  margin: 18px 0 20px;
}
#inspect-large {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;
  width: 100%;
  border-top: 1px solid #c1c5ad40;
  padding: 14px 0;
  min-height: 46px;
  font-size: 12px;
}
.tour-map {
  width: min(1120px, 94vw);
  max-height: 92dvh;
  padding: 30px 36px;
  background: #1c241c;
  border-color: #9eaa8250;
  overflow: auto;
}
.map-header {
  align-items: flex-start;
  padding-bottom: 24px;
}
.map-header .eyebrow {
  font-size: 9px;
  letter-spacing: 1.7px;
  color: #aeb69f;
}
.map-header h2 {
  font-size: 38px;
  margin: 10px 0 0;
  letter-spacing: -0.9px;
}
.floor-tabs {
  display: flex;
  gap: 8px;
  padding: 0 0 23px;
  border-bottom: 1px solid #a9b19124;
  margin-bottom: 23px;
}
.floor-tabs button {
  flex: 1;
  text-align: left;
  padding: 11px 14px;
  border: 1px solid transparent;
  border-radius: 3px;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: #9faa91;
}
.floor-tabs button span {
  font-size: 12px;
}
.floor-tabs button small {
  font-size: 10px;
  color: #838f76;
}
.floor-tabs button[aria-selected="true"] {
  background: #b8c39b0d;
  border-color: #bdc69f50;
  color: #e0d5ba;
}
.floor-tabs button[aria-selected="true"] small {
  color: #c1b79e;
}
.atlas-body {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 35px;
  align-items: start;
}
.atlas-preview {
  margin: 0;
  position: sticky;
  top: 0;
  min-width: 0;
}
.atlas-preview-heading p {
  font-size: 10px;
  color: #a7af94;
  margin: 0 0 7px;
}
.atlas-preview-heading h3 {
  font: 400 24px/1.3 var(--serif);
  margin: 0;
  color: #d9d1bc;
}
#room-plan {
  display: block;
  width: 100%;
  height: 285px;
  overflow: visible;
  margin: 12px 0 3px;
}
.atlas-wall {
  stroke: #939d83;
  stroke-width: 4;
  stroke-linecap: square;
}
.atlas-glass {
  stroke: #829a87;
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
}
.atlas-partition {
  stroke: #a2aa90;
  stroke-width: 5;
  stroke-linecap: square;
}
.atlas-art {
  stroke: #ddc79c;
  stroke-width: 3;
  stroke-linecap: round;
}
.atlas-garden {
  fill: #697e4c18;
  stroke: #778c5d70;
  stroke-width: 1;
}
.atlas-bench {
  fill: #8c7751;
  stroke: #b09b75;
  stroke-width: 0.8;
}
.atlas-camera {
  fill: #cdb98d;
}
.atlas-sight {
  stroke: #cdb98d;
  stroke-width: 1.2;
  stroke-dasharray: 3 3;
}
.atlas-legend {
  display: flex;
  gap: 18px;
  font-size: 9px;
  color: #aeb69e;
  margin: 0 0 16px;
}
.atlas-legend span:first-child {
  color: #d2bd91;
}
#plan-intent {
  font-size: 11px;
  line-height: 1.8;
  color: #a9b39b;
  border-top: 1px solid #b5bd9c24;
  padding-top: 14px;
  max-width: 430px;
}
.map-stops {
  max-height: 490px;
  overflow: auto;
  padding-right: 7px;
  gap: 0;
  scrollbar-color: #77836750 transparent;
  scrollbar-width: thin;
}
.atlas-room {
  display: grid;
  grid-template-columns: 22px 64px 1fr 15px;
  gap: 13px;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #a9b19124;
  text-align: left;
  min-height: 85px;
  width: 100%;
  color: #bdc6ad;
}
.atlas-number {
  font-size: 10px;
  color: #8d9a7d;
  font-variant-numeric: tabular-nums;
}
.atlas-room img {
  width: 64px;
  height: 46px;
  object-fit: cover;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.atlas-room > span:nth-last-child(2) {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.atlas-room strong {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: inherit;
}
.atlas-room small {
  font-size: 9px;
  line-height: 1.5;
  color: #8c9a7f;
}
.atlas-arrow {
  font-size: 14px;
  color: #91a07f;
  opacity: 0.4;
}
.atlas-room.active {
  color: #e5d4b0;
}
.atlas-room.previewed img,
.atlas-room:hover img {
  opacity: 1;
}
.atlas-room:hover,
.atlas-room:focus-visible {
  color: #e2d4b4;
}
.atlas-room.active .atlas-number {
  color: #d6bc89;
}
.closing {
  padding-top: 80px;
}
.closing h2 {
  font-size: clamp(28px, 4.5vw, 55px);
  line-height: 1.25;
  margin-bottom: 25px;
}
.closing-bottom {
  padding-bottom: 55px;
}
.closing-bottom p {
  font-size: 12px;
}
.closing footer {
  padding-top: 25px;
}
@media (max-width: 1000px) {
  .atlas-body {
    gap: 20px;
  }
  .tour-map {
    padding: 24px;
  }
  .atlas-room {
    grid-template-columns: 20px 50px 1fr 12px;
    gap: 9px;
  }
  .atlas-room img {
    width: 50px;
    height: 43px;
  }
  .inspect-info {
    width: 29vw;
    right: 4%;
  }
  .inspect-info h2 {
    font-size: 29px;
  }
}
@media (max-width: 700px) {
  .header {
    height: 74px;
    padding: 0 6%;
  }
  .brand-signature {
    font-size: 30px;
  }
  .nav-tabs {
    gap: 12px;
  }
  .nav-tabs button {
    font-size: 10px;
  }
  .intro {
    top: 21%;
    left: 7%;
    max-width: 86%;
  }
  .intro h1 {
    font-size: clamp(54px, 13.8vw, 78px);
    line-height: 1.12;
  }
  .intro .eyebrow {
    font-size: 8px;
    letter-spacing: 1.3px;
  }
  .intro-note {
    font-size: 10px !important;
    display: block !important;
    margin-top: 22px;
  }
  .intro .enter-button {
    font-size: 12px;
    gap: 22px;
  }
  .intro-shade {
    background: linear-gradient(100deg, #151d13c9, #151d1352 70%);
  }
  .arrival-fallback {
    inset: 27% -25% 4% 3%;
    opacity: 0.9;
  }
  .scene-caption {
    left: 6%;
    bottom: 21%;
    max-width: 77%;
    padding: 0;
  }
  .scene-caption h2 {
    font-size: 24px;
    margin: 6px 0;
  }
  .scene-caption .eyebrow {
    font-size: 9px;
  }
  .scene-caption #frame-position {
    font-size: 10px;
    margin: 5px 0;
  }
  .scene-caption button {
    font-size: 10px;
    min-height: 32px;
  }
  .stage-bottom {
    left: 6%;
    right: 6%;
    bottom: max(23px, env(safe-area-inset-bottom));
    font-size: 11px;
  }
  .scroll-cue {
    gap: 10px;
  }
  #scroll-label {
    font-size: 12px;
  }
  .cue-text small {
    font-size: 8px;
    max-width: 210px;
  }
  .scroll-mouse {
    width: 25px;
    height: 36px;
  }
  .scroll-mouse:before {
    font-size: 17px;
  }
  .counter {
    font-size: 11px;
    gap: 6px;
  }
  .counter-rule {
    width: 16px;
  }
  .map-button {
    bottom: 12.5%;
    right: 6%;
    font-size: 11px;
  }
  .map-button svg {
    width: 17px;
    height: 17px;
  }
  .seat-spot {
    font-size: 10px;
    padding: 6px 10px;
    min-height: 36px;
  }
  .seated-bar {
    gap: 16px;
    bottom: max(24px, env(safe-area-inset-bottom));
    padding: 12px 14px;
    width: 88vw;
    justify-content: space-between;
  }
  .seated-bar strong {
    font-size: 11px;
  }
  .seated-bar small {
    font-size: 9px;
    white-space: normal;
    max-width: 185px;
    line-height: 1.5;
  }
  .seated-bar button {
    font-size: 11px;
    gap: 8px;
    padding-left: 14px;
  }
  .art-inspect::backdrop {
    background: linear-gradient(transparent 42%, #11190cce 72%);
  }
  .inspect-back {
    top: 20px;
    left: 6%;
    font-size: 11px;
  }
  .inspect-info {
    right: 6%;
    left: 6%;
    top: auto;
    bottom: 4%;
    width: auto;
    transform: none;
    padding: 0;
  }
  .inspect-info .eyebrow {
    font-size: 9px;
  }
  .inspect-info h2 {
    font-size: 28px;
    margin: 10px 0 12px;
  }
  #inspect-description {
    font-size: 12px;
    line-height: 1.65;
  }
  #inspect-series {
    font-size: 10px;
    margin: 10px 0;
  }
  #inspect-large {
    font-size: 11px;
    padding: 9px 0;
    min-height: 42px;
  }
  .tour-map {
    padding: 18px;
    width: 94vw;
    max-height: 94dvh;
  }
  .map-header {
    position: sticky;
    top: -18px;
    background: #1c241c;
    z-index: 3;
    padding: 7px 0 18px;
  }
  .map-header .eyebrow {
    font-size: 7px;
  }
  .map-header h2 {
    font-size: 29px;
    margin: 8px 0 0;
  }
  .map-header .close-button {
    height: 42px;
    width: 42px;
    min-width: 42px;
  }
  .floor-tabs {
    gap: 3px;
    padding-bottom: 14px;
    margin-bottom: 16px;
  }
  .floor-tabs button {
    padding: 8px 7px;
    min-height: 53px;
  }
  .floor-tabs button span {
    font-size: 11px;
  }
  .floor-tabs button small {
    font-size: 8px;
  }
  .atlas-body {
    display: block;
  }
  .atlas-preview {
    position: static;
    padding-bottom: 16px;
    border-bottom: 1px solid #b4bf9a24;
  }
  .atlas-preview-heading h3 {
    font-size: 23px;
  }
  .atlas-preview-heading p {
    font-size: 9px;
  }
  #room-plan {
    height: 180px;
    margin: 3px 0;
  }
  .atlas-legend {
    font-size: 8px;
    margin-bottom: 10px;
  }
  #plan-intent {
    font-size: 10px;
    line-height: 1.65;
    padding-top: 10px;
  }
  .map-stops {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
  .atlas-room {
    grid-template-columns: 21px 54px 1fr 12px;
    min-height: 76px;
    padding: 12px 0;
    gap: 11px;
  }
  .atlas-room img {
    width: 54px;
    height: 42px;
  }
  .atlas-room strong {
    font-size: 12px;
  }
  .atlas-room small {
    font-size: 9px;
  }
  .atlas-room > span:nth-last-child(2) {
    gap: 5px;
  }
}
@media (max-height: 520px) and (orientation: landscape) {
  .header {
    height: 60px;
  }
  .scene-caption {
    bottom: 23%;
    max-width: 230px;
  }
  .scene-caption h2 {
    font-size: 21px;
  }
  .scene-caption .eyebrow {
    font-size: 8px;
  }
  .scene-caption #frame-position {
    font-size: 9px;
  }
  .scene-caption button {
    font-size: 9px;
    min-height: 28px;
  }
  .stage-bottom {
    bottom: 18px;
  }
  #scroll-label {
    font-size: 11px;
  }
  .cue-text small {
    font-size: 9px;
  }
  .map-button {
    bottom: 16%;
    font-size: 10px;
  }
  .intro {
    top: 23%;
    max-width: 50%;
  }
  .intro h1 {
    font-size: 48px;
  }
  .intro-note {
    font-size: 9px;
    margin-top: 10px;
  }
  .intro .enter-button {
    min-height: 42px;
    font-size: 11px;
  }
  .inspect-back {
    top: 15px;
    font-size: 10px;
    min-height: 36px;
  }
  .inspect-info {
    right: 4%;
    width: 29vw;
  }
  .inspect-info h2 {
    font-size: 25px;
    margin: 10px 0;
  }
  .inspect-info .eyebrow {
    font-size: 8px;
  }
  #inspect-description {
    font-size: 11px;
    line-height: 1.6;
  }
  #inspect-series {
    font-size: 9px;
    margin: 10px 0;
  }
  #inspect-large {
    font-size: 11px;
    padding: 9px 0;
  }
  .tour-map {
    max-height: 96dvh;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }
  .seat-spot,
  .intro-shade,
  #canvas-host {
    transition: none !important;
  }
}
.art-inspect::backdrop {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.art-inspect::backdrop {
  background: linear-gradient(
    90deg,
    transparent 58%,
    #11190ce6 78%,
    #11190cf5 100%
  );
}

.nearest-seat {
  position: absolute;
  right: 5%;
  bottom: 21%;
  z-index: 7;
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  color: #d8cbae;
  font-size: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #b9b58d45;
}
.nearest-seat > span:first-child {
  font-size: 19px;
}
.nearest-seat[hidden] {
  display: none;
}
.is-seated .nearest-seat,
.art-inspecting .nearest-seat {
  display: none;
}
@media (max-width: 700px) {
  .nearest-seat {
    left: 6%;
    right: auto;
    bottom: 12.5%;
    font-size: 11px;
    border: 0;
    min-height: 44px;
  }
  .nearest-seat > span:first-child {
    font-size: 17px;
  }
}

.art-inspecting .seated-bar {
  opacity: 0;
  pointer-events: none;
}

/* Antique gold, midnight blue and pale stone echo the architecture. */
:root { --paper:#141e2d; --ink:#f0e9dc; --muted:#beb7ab; --olive:#c0a773; --line:#eee4cf26; color-scheme:dark; }
body { background:#141e2d; }
.header { background:linear-gradient(180deg,#111b2af2,#111b2a88 65%,transparent); }
.intro-shade { background:linear-gradient(90deg,#101b2cf0,#101b2cb5 30%,#101b2c25 72%,transparent); }
.scene-vignette { background:linear-gradient(180deg,#101b2c18 0%,transparent 20%,transparent 64%,#0c14228c 100%); }
.scene-caption { text-shadow:0 1px 5px #07101b,0 3px 20px #07101ba8; }
.scene-caption .eyebrow,.scene-caption #frame-position,.cue-text small { color:#e1d8c8; }
.scroll-cue { background:#121d2edb; border:1px solid #c4ae7d66; border-radius:5px; padding:10px 15px 10px 12px; box-shadow:0 4px 24px #09111d24; }
#scroll-label { color:#fff5e1; }
.scroll-mouse { border-color:#d9bf88; }
.map-button { color:#f5ebd8; background:#142031db; border:1px solid #c4ae7d66; padding:10px 15px; border-radius:4px; }
#nearest-seat,.seat-hotspot { background:#142031eb; border-color:#c4ae7d99; color:#f3e7d0; }
.tour-map,.collection-panel,.seated-bar { background:#172335; }
.atlas-tab[aria-selected="true"] { background:#d9c392; color:#172335; }
.art-inspect-content { background:linear-gradient(90deg,transparent 46%,#101a2bdb 68%,#101a2bf7); }
.art-inspect-content p { color:#d3cbbe; }
.arrival-fallback { filter:none; }
.facade-left,.facade-right { background:linear-gradient(100deg,#dad4c7,#b3b5b1); border-top:9px double #f1e9d9; }
.facade-lintel { background:#e8dfcb; border-top:4px solid #b9a16f; }
.entry-glow { border:4px solid #b6a275; background:linear-gradient(120deg,#233347,#102032); }
.entry-path { background:linear-gradient(#d7d0c0,#9da8ae); }
@media(max-width:700px) {
  .intro-shade { background:linear-gradient(180deg,#111c2de8, #111c2d66 60%,#111c2d44); }
  .scroll-cue { padding:8px 10px;gap:9px; }
  .art-inspect-content { background:linear-gradient(180deg,transparent 28%,#101a2b99 46%,#101a2bf5 66%); }
}

.art-inspect::backdrop { background:linear-gradient(90deg,transparent 58%,#101a2be6 78%,#101a2bf5); }
.inspect-back,.seat-spot,.nearest-seat { background:#172438eb; border-color:#cfb57b66; }
#inspect-description { color:#d5cfc5; }
#inspect-series { color:#b9af9e; }
.floor-tabs button { color:#c5beaf; }
.floor-tabs button small { color:#a8a59d; }
.floor-tabs button[aria-selected="true"] { background:#c8ab6b16; border-color:#c8ab6b66; color:#f2e2bd; }
.floor-tabs button[aria-selected="true"] small { color:#d3c3a3; }
.map-header .eyebrow,.atlas-preview-heading p,.atlas-legend { color:#bcb8ac; }
.atlas-wall,.atlas-partition { stroke:#c6bfae; }
.atlas-glass { stroke:#93b5c6; }
.collection-dialog { background:#172335; }
@media(max-width:700px) { .art-inspect::backdrop { background:linear-gradient(180deg,transparent 42%,#101a2bce 72%); } }

.arrival-poster { position:absolute;inset:0;display:block; }
.arrival-poster img { width:100%;height:100%;object-fit:cover;object-position:center; }
.static-room { background:#1a2637; }
.scene-caption h2 { overflow:visible; }
.nearest-seat { padding:8px 12px;border-radius:3px; }

/* Personal wordmark: flowing display type, practical labels and controls. */
.brand-signature { font-size:clamp(29px,3.1vw,43px); line-height:1.15; }
.brand-signature > span { display:inline-block; }
.intro h1 { font-family:"Dancing Script",cursive; font-size:clamp(78px,9.3vw,144px); line-height:1.08; letter-spacing:-.025em; font-weight:400; padding:.08em 0 .16em; }
.intro h1 em { font-family:inherit; font-style:normal; }
.scene-caption h2,.collection-header h2,.map-header h2,.inspect-info h2,.closing h2 { font-family:"Dancing Script",cursive; font-weight:400; line-height:1.2; padding-bottom:.1em; }
.scene-caption h2 { font-size:clamp(32px,3.2vw,52px); }
.mode-button { font-size:10px; gap:8px; }
.mode-icon { width:26px;height:26px;display:grid;place-items:center;border:1px solid #c5b28e88;border-radius:50%;font-size:10px; }
.mode-button[aria-pressed="true"] .mode-icon { color:#172536;background:#d5c3a0;border-color:#d5c3a0; }
.mode-button:disabled { opacity:.4; }
.closing-bottom { justify-content:flex-end; }
@media(max-width:1000px) and (min-width:701px) {
 .header { gap:16px;padding-left:4%;padding-right:4%; }
 .header nav { gap:18px;margin-left:0; }
 .brand-signature { font-size:32px; }
 .mode-button { max-width:115px;white-space:normal;line-height:1.4; }
}
@media(max-width:700px) {
 .header { height:86px;gap:8px;padding-left:5%;padding-right:5%; }
 .brand-signature { font-size:27px;line-height:1.03; }
 .brand-signature > span { display:block; }
 .header nav { margin-left:auto; }
 .header-controls { gap:5px; }
 .mode-button { width:auto;min-width:47px;min-height:44px;flex-direction:column;gap:3px;padding:2px 0; }
 .mode-button #mode-label { display:block;font-size:8px;max-width:65px;white-space:normal;text-align:center;line-height:1.15; }
 .mode-icon { width:22px;height:22px;font-size:9px; }
 .intro h1 { font-size:clamp(67px,18vw,108px);line-height:1.1; }
 .scene-caption h2 { font-size:30px; }
}
@media(max-width:360px) { .brand-signature{font-size:24px;} .header{gap:5px;} .header-controls{gap:1px;} .nav-link{font-size:8px;} }
@media(max-width:700px) {
 /* A single room name stays below the prints; collection and counts live in their own controls. */
 .scene-caption { max-width:88%;bottom:21%; }
 .scene-caption .eyebrow,.scene-caption #frame-position,.scene-caption #view-current { display:none; }
 .scene-caption h2 { font-size:26px;line-height:1.15;margin:0;padding-bottom:.12em; }
}