.experience { position: relative; min-height: 620px; height: calc(100svh - var(--header-height)); background: #111310; color: #f4eee2; overflow: hidden; isolation: isolate; }
.tour-stage { position: absolute; inset: 0; perspective: 1100px; perspective-origin: 50% 45%; overflow: hidden; background: radial-gradient(ellipse at 50% 30%,#30312a,#10120f 75%); outline-offset: -4px; }
.tour-camera { position: absolute; left: 50%; top: 46%; width: 0; height: 0; transform-origin: 0 0; transform-style: preserve-3d; will-change: transform; }
.tour-camera > * { position: absolute; transform-style: preserve-3d; backface-visibility: hidden; }
.tour-floor { width: 7000px; height: 5000px; left: -3500px; top: -2500px; transform: translate3d(0,450px,-1600px) rotateX(90deg); backface-visibility: visible; background: linear-gradient(#b49a6320 1px,transparent 1px),linear-gradient(90deg,#b49a6320 1px,transparent 1px),radial-gradient(ellipse,#34362d,#171b16 75%); background-size: 250px 250px,250px 250px,100% 100%; box-shadow: inset 0 0 500px #0008; }
.tour-ceiling { width: 7000px; height: 5000px; left: -3500px; top: -2500px; transform: translate3d(0,-950px,-1600px) rotateX(90deg); backface-visibility: visible; background: #10120f; }
.tour-sidewall { width: 5000px; height: 1400px; left: -2500px; top: -950px; background: linear-gradient(0deg,#22251e,#36392d 70%,#1a1d17); border-bottom: 5px solid #998258; }
.wall-left { transform: translate3d(-3500px,0,-1600px) rotateY(90deg); }
.wall-right { transform: translate3d(3500px,0,-1600px) rotateY(-90deg); }
.tour-endwall { width: 7000px; height: 1400px; left: -3500px; top: -950px; transform: translateZ(-4100px); background: #171a14; }
.tour-bay { left: -900px; top: -650px; width: 1800px; height: 1100px; transform: translate3d(var(--bay-x),0,-3500px); background: radial-gradient(ellipse at 50% 35%,#555647,#2b2e25 65%,#1c2019); border-bottom: 8px solid #b49a63; }
.tour-art { position: absolute; left: 260px; top: 175px; display: block; width: 1280px; height: 755px; transform: translateZ(20px); border: 15px solid #10120e; box-shadow: 0 20px 45px #0009,inset 0 0 0 1px #d8bb8277; outline-offset: 15px; }
.tour-art img { width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.art-open { position: absolute; right: 28px; bottom: 28px; padding: 16px 26px; background: #10100fe0; color: #f5e7ce; font-size: 24px; border: 1px solid #ddbe7e8a; }
.tour-art:hover { border-color: #b1975d; }
.bay-number { position: absolute; top: 52px; left: 260px; color: #cfba8d; font: 26px/1 Arial,sans-serif; letter-spacing: 7px; }
.bay-caption { position: absolute; left: 260px; top: 963px; right: 260px; display: flex; align-items: center; justify-content: space-between; gap: 25px; color: #e8e1cf; font: 42px/1.25 var(--serif); }
.bay-caption small { color: #bbb5a4; font: 19px/1.5 Arial,sans-serif; }
.bay-light { position: absolute; height: 6px; width: 1280px; left: 260px; top: 85px; background: #f4dba2; box-shadow: 0 0 65px 10px #f0d8a263; }
.tour-light { width: 1250px; height: 14px; left: -625px; top: -925px; background: #d0ba90; box-shadow: 0 0 80px 10px #f3dab942; transform: translateZ(-1300px); }
.light-one { transform: translate3d(-1950px,0,-1300px); }.light-three { transform: translate3d(1950px,0,-1300px); }
.tour-pillar { top: -950px; left: -65px; width: 130px; height: 1400px; background: linear-gradient(90deg,#161a14,#3a3d30,#24281e); border-left: 2px solid #b39a5c55; transform: translate3d(-975px,0,-3420px); box-shadow: 30px 0 50px #0007; }
.pillar-right { transform: translate3d(975px,0,-3420px); }
.tour-vignette { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient(90deg,#0a0c09e8 0,#0a0c09ba 32%,#0a0c0920 70%),linear-gradient(0deg,#0a0c09c0,transparent 35%); transition: background .5s; }
.tour-intro { position: relative; z-index: 2; width: min(620px,80%); margin-left: 6%; padding-top: clamp(60px,11vh,150px); padding-bottom: 80px; }
.tour-intro .eyebrow { color: #d8bb82; }
.tour-intro h1 { font: 400 clamp(58px,6.8vw,96px)/1.02 var(--serif); letter-spacing: -3px; margin: 24px 0; }
.tour-intro h1 em { color: #d8bb82; }
.tour-lead { font-size: 15px; line-height: 1.9; color: #c5c4b8; max-width: 440px; }
.tour-intro-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 30px; }
.tour-list-link { font-size: 13px; min-height: 44px; display: inline-flex; align-items: center; border-bottom: 1px solid #c8b58b66; }
.tour-start-hint { color: #a8ab9e; font-size: 11px; margin-top: 28px; letter-spacing: .3px; }
.tour-active { overflow: hidden; }
.tour-active .experience { position: fixed; left: 0; right: 0; top: var(--header-height); bottom: 0; z-index: 25; height: auto; min-height: 0; }
.experience.is-entered .tour-vignette { background: radial-gradient(ellipse at 50% 40%,transparent 35%,#0a0c0955 100%),linear-gradient(0deg,#0a0c09c9,transparent 35%); }
.experience:not(.is-entered) .tour-stage { pointer-events: none; }
.experience.is-entered .tour-stage { cursor: grab; touch-action: pinch-zoom; }
.experience.is-dragging .tour-stage { cursor: grabbing; }
.tour-ui { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.tour-ui button, .tour-ui a, .tour-help { pointer-events: auto; }
.tour-topbar { position: absolute; top: 20px; left: 4%; right: 4%; display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.tour-room-label { color: #d8c9a8; font-size: 10px; letter-spacing: 2px; }
.tour-topbar > div { display: flex; gap: 12px; }
.tour-topbar button { display: inline-flex; align-items: center; gap: 12px; background: #11150fdc; color: #eee7d9; padding: 8px 14px; border: 1px solid #a28b5855; font-size: 12px; }
.tour-topbar button:hover { border-color: #ddc18b; }
.tour-topbar button span:last-child:not([data-i]) { font-size: 22px; line-height: 1; }
.tour-help { position: absolute; top: 78px; right: 4%; width: min(420px,92%); background: #141812f5; padding: 26px; border: 1px solid #b39a5d7d; box-shadow: 0 10px 40px #0006; z-index: 6; }
.tour-help h2 { font-size: 26px; letter-spacing: 0; }
.tour-help p { font-size: 13px; color: #c3c6b7; margin-top: 18px; }
.tour-help button { margin-top: 15px; border-bottom: 1px solid #b39a5d; color: #e0c794; font-size: 13px; padding: 8px 0; }
.tour-bottom { position: absolute; bottom: 44px; left: 4%; right: 4%; display: grid; grid-template-columns: minmax(230px,1fr) auto minmax(160px,1fr); gap: 30px; align-items: end; }
.tour-current { padding: 19px 23px; background: #10140ee8; border-left: 2px solid #c6a86d; width: fit-content; min-width: 245px; max-width: 400px; }
.tour-current .eyebrow { font-size: 9px; letter-spacing: 1.5px; color: #c1ae83; }
.tour-current h2 { font-size: 30px; letter-spacing: -.5px; margin: 7px 0 8px; color: #f4ead4; }
.tour-project-open { min-height: 44px; font-size: 13px; border-bottom: 1px solid #b69c67; color: #d7c399; display: flex; justify-content: space-between; gap: 28px; padding: 8px 0; }
.tour-map { text-align: center; padding-bottom: 8px; }
.tour-map-label { display: block; color: #b9bcae; font-size: 9px; letter-spacing: 1.6px; margin-bottom: 12px; }
.tour-map > div { display: flex; gap: 9px; background: #10140ee8; padding: 8px; border: 1px solid #99855655; }
.tour-map button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 10px 15px; border: 1px solid #a18c5c55; min-width: 76px; min-height: 60px; color: #b9c0ad; font-size: 11px; }
.tour-map button > span:first-child { font-size: 9px; letter-spacing: 2px; opacity: .7; }
.tour-map [aria-pressed="true"] { color: #f2ddb3; border-color: #d3b67b; background: #8b724422; }
.tour-walk { justify-self: end; text-align: center; }
.walk-pad { display: grid; grid-template-columns: repeat(3,44px); gap: 5px; }
.walk-pad button { width: 44px; height: 44px; display: grid; place-items: center; background: #10140ee8; color: #e2cc9c; border: 1px solid #9c895b88; font-size: 23px; padding: 0; touch-action: none; user-select: none; -webkit-user-select: none; }
.walk-pad [data-walk="forward"] { grid-column: 2; }
.walk-pad [data-walk="left"] { grid-column: 1; }
.walk-pad button:active, .walk-pad button.is-held { background: #a78a4d55; border-color: #e6ca91; }
.tour-instructions { position: absolute; bottom: 14px; left: 4%; right: 4%; text-align: center; color: #b1b4a4; font-size: 9px; letter-spacing: 1.4px; pointer-events: none; }
.tour-active .header { z-index: 35; }
@media(max-width:1000px) {
  .tour-bottom { grid-template-columns: 1fr auto; gap: 22px; }
  .tour-walk { grid-column: 2; grid-row: 1; }
  .tour-map { grid-column: 1 / -1; justify-self: center; }
  .tour-current { grid-column: 1; grid-row: 1; }
  .tour-map > div { padding: 6px; }
  .tour-map button { min-height: 48px; padding: 7px 14px; }
  .tour-map-label { margin-bottom: 8px; }
}
@media(max-width:620px) {
  .experience { min-height: 620px; height: calc(100svh - var(--header-height)); }
  .tour-stage { perspective: 650px; perspective-origin: 50% 37%; }
  .tour-camera { top: 38%; }
  .tour-intro { width: 90%; margin-left: 5%; padding-top: 64px; padding-bottom: 100px; }
  .tour-intro h1 { font-size: clamp(53px,14vw,77px); letter-spacing: -2.4px; margin-block: 24px; }
  .tour-lead { font-size: 14px; max-width: 330px; }
  .tour-vignette { background: linear-gradient(90deg,#0a0c09dd,#0a0c0988),linear-gradient(0deg,#0a0c09e0,transparent 60%); }
  .tour-intro-actions { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 25px; }
  .tour-start-hint { margin-top: 20px; font-size: 10px; }
  .tour-topbar { top: 13px; left: 5%; right: 5%; gap: 10px; }
  .tour-room-label { display: none; }
  .tour-topbar > div { justify-content: space-between; width: 100%; gap: 10px; }
  .tour-topbar button { padding: 8px 12px; font-size: 11px; gap: 8px; }
  .tour-help { top: 66px; right: 5%; padding: 22px; }
  .tour-bottom { bottom: max(32px,env(safe-area-inset-bottom)); left: 5%; right: 5%; grid-template-columns: 1fr auto; gap: 12px; }
  .tour-current { grid-column: 1; grid-row: 1; min-width: 0; max-width: none; width: 100%; padding: 11px 14px; }
  .tour-current .eyebrow { font-size: 8px; letter-spacing: .8px; }
  .tour-current h2 { font-size: 24px; margin-block: 5px; }
  .tour-project-open { font-size: 12px; padding-block: 7px; gap: 8px; width: 100%; }
  .tour-walk { grid-column: 2; grid-row: 1; }
  .walk-pad { grid-template-columns: repeat(3,44px); gap: 4px; }
  .walk-pad button { width: 44px; height: 44px; }
  .tour-map { grid-column: 1 / -1; grid-row: 2; width: 100%; padding-bottom: 0; }
  .tour-map > div { justify-content: space-between; padding: 5px; }
  .tour-map button { flex: 1; min-height: 44px; min-width: 0; flex-direction: row; gap: 8px; padding: 7px; font-size: 10px; }
  .tour-map > .tour-map-label { display: none; }
  .tour-walk .tour-map-label { font-size: 8px; margin-bottom: 7px; }
  .tour-instructions { bottom: 8px; left: 4%; right: 4%; font-size: 8px; letter-spacing: .7px; }
}
@media(max-height:550px) and (min-width:621px) {
  .tour-intro { padding-top: 25px; }.tour-intro h1 { font-size: 54px; margin-block: 15px; }
  .tour-intro-actions { margin-top: 18px; }.tour-start-hint { display: none; }
  .tour-bottom { bottom: 30px; grid-template-columns: 1fr auto auto; align-items: end; }
  .tour-map { grid-row: 1; grid-column: 2; }.tour-walk { grid-column: 3; }
}
@media(prefers-reduced-motion:reduce) { .tour-vignette { transition: none; } }