/* Page-level styles for the 360 tour. The tour chrome itself reuses the classic
   tour's classes from ui.css, so it looks the same. */
:root {
  --graphite: #0c0e11;
  --bone: #ede7dc;
  --bone-60: rgba(237, 231, 220, 0.6);
  --bone-24: rgba(237, 231, 220, 0.24);
  --gold: #f2a93b;
  --display: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Consolas", monospace;
  --chrome-gap: clamp(14px, 2.2vw, 28px);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--graphite); color: var(--bone); font-family: var(--display); overflow: hidden; overscroll-behavior: none; }
/* Phones: without this the browser claims a swipe as a page gesture (scroll, back, pinch zoom)
   and cancels the pointer after a few pixels, so the panorama never turns. Pannellum handles
   one-finger look and two-finger zoom itself. */
#pano, #pano * { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#pano .mk { touch-action: none; } /* our handler turns the view; the browser must not cancel the tap */

.tour { position: fixed; inset: 0; }
#pano { position: absolute; inset: 0; background: var(--graphite); }
.pnlm-container { background: var(--graphite) !important; font-family: var(--display) !important; }
.pnlm-load-box { background: rgba(12, 14, 17, 0.6) !important; border-radius: 2px !important; font-family: var(--mono) !important; }
.pnlm-about-msg, .pnlm-hotspot-base.pnlm-tooltip span { display: none !important; }
._vignette_byz8k_63 { z-index: 1; }
/* Hint: bottom centre on wide screens; on tablets and phones it would collide with the
   caption and the floor-plan pill, so it moves to the top with touch wording. */
.hint-short { display: none; }
@media (max-width: 1100px), (pointer: coarse) {
  .tour ._hint_13a6m_59 { display: block; bottom: auto; top: calc(max(var(--chrome-gap), env(safe-area-inset-top)) + 6px); color: rgba(237, 231, 220, 0.55); }
  .hint-long { display: none; }
  .hint-short { display: inline; }
}
/* Space above and below the room band on tall screens: a blurred, darkened copy of the room
   (its portrait still) instead of black. Fades into the band over FADE px. */
.letterbox { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; --bar: 0px; --fade: 56px; }
.lb { position: absolute; left: 0; right: 0; overflow: hidden; height: calc(var(--bar) + var(--fade)); }
.lb[hidden] { display: none; }
.lb-top { top: 0; -webkit-mask-image: linear-gradient(#000 calc(100% - var(--fade)), transparent); mask-image: linear-gradient(#000 calc(100% - var(--fade)), transparent); }
.lb-bottom { bottom: 0; -webkit-mask-image: linear-gradient(transparent, #000 var(--fade)); mask-image: linear-gradient(transparent, #000 var(--fade)); }
.lb::before {
  content: ""; position: absolute; inset: -60px; background: var(--amb, none) center / cover no-repeat, var(--graphite);
  filter: blur(26px) saturate(1.15) brightness(0.58); transform: scale(1.08);
  transition: background-image 0.6s ease;
}
.lb-top::before { background-position: center top; }
.lb-bottom::before { background-position: center bottom; }
._hud_7xe8m_1, ._wrap_1cr42_1, ._hint_13a6m_59 { z-index: 3; }
._hud_7xe8m_1 h2 { margin-top: 10px; }

/* Markers. Pannellum places each hotspot at its anchor point; the ring centres on it
   and the label floats beside it (to the left for markers near the right edge). */
.hs-anchor { width: 0; height: 0; overflow: visible; }
.mk {
  --ivory: #fffaf0;
  --glass: rgba(14, 16, 19, 0.46);
  --edge: rgba(255, 250, 240, 0.22);
  /* the ring's centre sits on the target; the label hangs beside it */
  --ring: 38px;
  position: absolute; left: 0; top: 0; transform: translate(calc(var(--ring) / -2), -50%);
  display: flex; align-items: center; gap: 10px;
  padding: 0; border: 0; background: none; color: var(--ivory);
  font: 400 12px/1 var(--display); letter-spacing: 0.02em; white-space: nowrap;
  cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent;
}
.mk-flip { flex-direction: row-reverse; transform: translate(calc(-100% + var(--ring) / 2), -50%); }
.mk-ring {
  position: relative; flex: 0 0 auto; width: var(--ring); height: var(--ring); border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle, rgba(255, 250, 240, 0.16), rgba(255, 250, 240, 0.04) 70%);
  border: 1px solid rgba(255, 250, 240, 0.7);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28), inset 0 0 0 4px rgba(255, 250, 240, 0.06);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.25s ease, background 0.25s ease;
}
.mk-ring::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  border: 1px solid rgba(242, 169, 59, 0.75); opacity: 0;
  animation: mk-pulse 2.8s cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
}
.mk-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--ivory);
  box-shadow: 0 0 10px rgba(255, 250, 240, 0.9);
  transition: transform 0.3s ease, background 0.25s ease;
}
.mk-label {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 14px;
  border-radius: 999px; background: var(--glass); border: 1px solid var(--edge);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mk-label svg { width: 13px; height: 13px; stroke: #e4d5b8; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s ease, stroke 0.25s ease; }
.mk-flip .mk-label { padding: 0 14px 0 12px; flex-direction: row-reverse; }
/* Hover styles only where a pointer really hovers; on touch screens :hover sticks after a tap. */
@media (hover: hover) {
  .mk:hover .mk-ring { transform: scale(1.12); border-color: var(--gold); background: radial-gradient(circle, rgba(242, 169, 59, 0.28), rgba(242, 169, 59, 0.06) 70%); }
  .mk:hover .mk-dot { background: var(--gold); transform: scale(1.15); box-shadow: 0 0 12px rgba(242, 169, 59, 0.9); }
  .mk:hover .mk-label { background: rgba(14, 16, 19, 0.66); border-color: rgba(242, 169, 59, 0.6); transform: translateX(2px); }
  .mk-flip:hover .mk-label { transform: translateX(-2px); }
  .mk:hover .mk-label svg { stroke: var(--gold); transform: translate(2px, -2px); }
  .mk-back:hover .mk-label svg { transform: translateX(-2px); }
}
.mk:focus-visible .mk-ring { transform: scale(1.12); border-color: var(--gold); }
.mk:focus-visible .mk-dot { background: var(--gold); }
.mk:focus-visible .mk-label svg { stroke: var(--gold); }
.mk:focus-visible { outline: none; }
.mk:focus-visible .mk-label { box-shadow: 0 0 0 2px rgba(242, 169, 59, 0.55), 0 6px 22px rgba(0, 0, 0, 0.22); }
.mk:active .mk-ring { transform: scale(0.96); }
/* back markers: quieter, no pulse */
.mk-back { --ring: 30px; }
.mk-back .mk-ring { border-color: rgba(255, 250, 240, 0.45); }
.mk-back .mk-ring::after { display: none; }
.mk-back .mk-dot { width: 6px; height: 6px; box-shadow: none; opacity: 0.8; }
.mk-back .mk-label { height: 28px; font-size: 11px; color: rgba(255, 250, 240, 0.85); }
@keyframes mk-pulse {
  0% { transform: scale(1); opacity: 0.9; }
  70%, 100% { transform: scale(1.75); opacity: 0; }
}
@media (max-width: 640px) {
  .mk { font-size: 11px; gap: 8px; }
  .mk { --ring: 34px; }
  .mk-back { --ring: 28px; }
  .mk-label { height: 30px; padding: 0 10px 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-ring::after { animation: none; }
  .mk-ring, .mk-label, .mk-label svg, .mk-dot { transition: none; }
}

/* Floor plan toggle: same dark glass as the markers. */
._toggle_1cr42_9._surface_1rhws_2 { color: #fffaf0; font-size: 12px; font-weight: 400; letter-spacing: 0.02em; }
._toggle_1cr42_9._surface_1rhws_2::before {
  background: rgba(14, 16, 19, 0.5); border-color: rgba(255, 250, 240, 0.22);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22);
}
._toggle_1cr42_9._surface_1rhws_2:hover::before, ._toggle_1cr42_9._toggleActive_1cr42_16::before { background: rgba(14, 16, 19, 0.7); border-color: rgba(242, 169, 59, 0.6); }
._toggle_1cr42_9 > svg { color: #e4d5b8; }
._toggle_1cr42_9:hover > svg, ._toggle_1cr42_9._toggleActive_1cr42_16 > svg { color: var(--gold); }

.plan-svg-host svg { display: block; width: 100%; height: auto; }
.plan-svg-host ._entryDot_1cr42_112.off, .plan-svg-host ._entryAnnotation_1cr42_113.off { opacity: 0; }

/* intro */
.intro {
  position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: var(--chrome-gap);
  background: radial-gradient(ellipse at center, rgba(12, 14, 17, 0.5), rgba(12, 14, 17, 0.9));
  transition: opacity 0.8s ease, visibility 0.8s;
}
.intro.gone { opacity: 0; visibility: hidden; }
.intro-inner { max-width: 560px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.intro-eyebrow { font: 10px var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: #e4d5b8; }
.intro-title { margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: clamp(44px, 8vw, 84px); line-height: 1; letter-spacing: -0.035em; }
.intro-title em { font-style: italic; }
.intro-copy { margin: 0; color: var(--bone-60); font-weight: 300; line-height: 1.6; }
.intro-enter {
  margin-top: 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 14px;
  padding: 8px 8px 8px 26px; border-radius: 999px; font: 400 15px var(--display); letter-spacing: 0.02em;
  border: 1px solid rgba(255, 250, 240, 0.35); background: rgba(14, 16, 19, 0.45); color: #fffaf0;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 10px 34px rgba(0, 0, 0, 0.3);
  transition: border-color 0.25s ease, background 0.25s ease;
}
.intro-enter span {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gold); color: var(--graphite); font-size: 17px;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.intro-enter:hover { border-color: rgba(242, 169, 59, 0.7); background: rgba(14, 16, 19, 0.6); }
.intro-enter:hover span { transform: translate(2px, -2px) rotate(8deg); }
.intro-enter:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.intro-classic { font: 11px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-60); }

/* Load problems: a calm card with a way forward instead of Pannellum's raw error box. */
.pnlm-error-msg, .pnlm-load-box { display: none !important; }
.tour-status { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: var(--chrome-gap); background: rgba(12, 14, 17, 0.55); }
.tour-status[hidden] { display: none; }
.tour-status[data-kind="slow"] { background: transparent; place-items: end center; padding-bottom: calc(var(--chrome-gap) + 96px); pointer-events: none; }
.tour-status-card {
  max-width: 360px; padding: 18px 20px; border-radius: 14px; text-align: center; pointer-events: auto;
  background: rgba(14, 16, 19, 0.82); border: 1px solid rgba(255, 250, 240, 0.18); color: #fffaf0;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.ts-msg { display: none; margin: 0 0 14px; font: 300 14px/1.5 var(--display); }
.tour-status[data-kind="slow"] .ts-slow, .tour-status[data-kind="error"] .ts-error, .tour-status[data-kind="fatal"] .ts-fatal { display: block; }
.ts-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.ts-btn {
  display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  font: 400 13px var(--display); color: #fffaf0; text-decoration: none;
  background: rgba(255, 250, 240, 0.08); border: 1px solid rgba(255, 250, 240, 0.24);
}
.ts-primary { background: var(--gold); border-color: var(--gold); color: var(--graphite); }
.ts-reload { display: none; }
.tour-status[data-kind="fatal"] #tour-retry { display: none; }
.tour-status[data-kind="fatal"] .ts-reload { display: inline-flex; background: var(--gold); border-color: var(--gold); color: var(--graphite); }