*,*::before,*::after{box-sizing:border-box}
/* ID/class selectors below out-specify the UA rule, so state it once, loudly. */
[hidden]{display:none!important}

/* ---------- expired demo gate ---------- */
#gate{position:fixed;inset:0;z-index:99;display:grid;place-items:center;background:var(--bg);padding:24px}
.gate-card{max-width:420px;text-align:center}
.gate-card h1{font-size:1.5rem;margin-bottom:.5rem}
.gate-card p{color:var(--muted)}

/* ---------- viewer ---------- */
.t-stage{background:var(--mat)}
/* The photo is never scaled past its own pixels -- upscaling is what made it soft.
   The frame mats whatever is left over. */
.viewer{
  position:relative;width:100%;display:grid;place-items:center;
  padding:clamp(12px,2.4vw,34px);
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.05),transparent 60%),
    var(--mat);
  touch-action:manipulation}

.frame{
  /* Width is the smallest of: the space available, the photo's own pixels, and what
     the height cap allows at this aspect. Setting width alone would let the height cap
     break the ratio and pillarbox the photo inside its own frame. */
  --maxh:min(82vh,var(--nat-h,800px));
  position:relative;
  width:min(100%,var(--nat-w,1200px),calc(var(--maxh) * var(--ar-num,1.5)));
  aspect-ratio:var(--ar,3/2);
  margin:0 auto;border-radius:12px;overflow:hidden;
  background:#0a0d11;
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 1px 0 rgba(255,255,255,.10) inset,
             0 26px 64px -18px rgba(0,0,0,.85),
             0 4px 14px rgba(0,0,0,.45)}

.scene{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;                              /* never crop, never stretch */
  opacity:0;transition:opacity .5s ease;
  will-change:opacity}
.scene.is-on{opacity:1}
.scene.zooming{transition:opacity .5s ease,transform .55s cubic-bezier(.4,0,.2,1)}

.t-loading{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
  opacity:0;transition:opacity .2s}
.t-loading.is-on{opacity:1}
.t-loading span{width:34px;height:34px;border-radius:50%;
  border:3px solid rgba(255,255,255,.25);border-top-color:#fff;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- navigation hotspots ---------- */
.spots{position:absolute;inset:0}
.hs{
  position:absolute;transform:translate(-50%,-50%);
  min-width:var(--tap);min-height:var(--tap);
  display:flex;flex-direction:column;align-items:center;gap:6px;justify-content:center;
  border:0;background:none;padding:0;cursor:pointer;
  opacity:0;transition:opacity .45s ease .1s}
.hs.is-on{opacity:1}
.hs-ring{
  width:38px;height:38px;border-radius:50%;position:relative;
  background:rgba(10,14,20,.42);backdrop-filter:blur(3px);
  border:2px solid rgba(255,255,255,.9);
  display:grid;place-items:center;transition:transform .18s ease,background .18s ease}
.hs-ring svg{width:18px;height:18px;fill:#fff}
.hs-ring::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:2px solid rgba(255,255,255,.55);animation:ping 2.6s ease-out infinite}
@keyframes ping{0%{transform:scale(.75);opacity:.9}70%{transform:scale(1.6);opacity:0}100%{opacity:0}}
.hs:hover .hs-ring,.hs:focus-visible .hs-ring{transform:scale(1.14);background:var(--accent)}
.hs:hover .hs-ring svg,.hs:focus-visible .hs-ring svg{fill:var(--on-accent,#111)}
.hs-tag{
  font-size:.75rem;white-space:nowrap;padding:3px 10px;border-radius:999px;
  background:rgba(8,11,15,.72);color:#fff;letter-spacing:.01em}
@media (prefers-reduced-motion:reduce){
  .hs-ring::after{animation:none}
  .scene,.scene.zooming{transition:opacity .2s ease}
}

/* ---------- chrome over the scene ---------- */
.topbar{
  position:absolute;top:0;left:0;right:0;z-index:4;display:flex;align-items:center;gap:10px;
  padding:14px 14px 40px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.55),rgba(0,0,0,0))}
.here{
  margin:0;font-family:var(--serif);font-size:1.05rem;color:#fff;
  text-shadow:0 1px 12px rgba(0,0,0,.6);flex:1}
.t-pill{
  pointer-events:auto;min-height:38px;padding:0 15px;border:1px solid rgba(255,255,255,.28);
  border-radius:999px;background:rgba(8,11,15,.55);backdrop-filter:blur(6px);
  color:#fff;font-size:.82rem;cursor:pointer}
.t-pill:hover{background:rgba(8,11,15,.8)}
.back{position:absolute;left:14px;bottom:14px;z-index:5}

/* ---------- tour map ---------- */
.map{position:absolute;right:14px;bottom:14px;z-index:5;display:flex;
  flex-direction:column;align-items:flex-end;gap:8px}
.map-body{
  width:min(300px,calc(100vw - 80px));max-height:60vh;overflow:auto;
  padding:12px;border-radius:12px;
  background:rgba(8,11,15,.82);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14)}
.map-floor+.map-floor{margin-top:12px}
.map-floor h3{margin:0 0 6px;font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);font-weight:600;font-family:var(--font)}
.map-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:4px}
.map-room{
  border:0;border-radius:6px;padding:6px 4px;font-size:.62rem;line-height:1.15;
  background:rgba(255,255,255,.10);color:#dfe5ec;cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.map-room:hover{background:rgba(255,255,255,.2)}
.map-room[aria-current="true"]{background:var(--accent);color:var(--on-accent,#111);font-weight:600}
.map-note{margin:10px 0 0;font-size:.6rem;color:var(--muted);line-height:1.35}

/* ---------- room menu ---------- */
.t-menu{
  display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  padding:14px;background:var(--surface);border-top:1px solid var(--line)}
.t-menu button{
  display:flex;align-items:center;gap:9px;min-height:var(--tap);padding:6px 10px;
  border:1px solid var(--line);border-radius:10px;background:var(--surface-2);
  color:var(--text);font-size:.82rem;cursor:pointer;text-align:left}
.t-menu button[aria-current="true"]{border-color:var(--accent);color:var(--accent)}
.t-menu img{width:46px;height:31px;object-fit:cover;border-radius:5px;flex:0 0 auto}

/* ---------- facts ---------- */
.t-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);
  padding:0 22px;border-radius:999px;background:var(--accent);color:var(--on-accent,#111);
  text-decoration:none;font-weight:600;margin-top:16px}
.t-btn-lg{width:100%;max-width:340px}
.t-facts{max-width:var(--maxw);margin:0 auto;padding:30px 16px 6px}
.t-facts h1{font-size:1.7rem}
.loc{color:var(--muted);margin:.25rem 0 0}
.facts-list{list-style:none;display:grid;gap:10px;padding:0;margin:20px 0 0;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.facts-list li{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.facts-list b{display:block;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);font-weight:600}
.facts-list span{font-size:1.05rem}

/* ---------- gallery ---------- */
.gallery{max-width:var(--maxw);margin:0 auto;padding:30px 16px 40px}
.gallery h2{font-size:1.25rem;margin-bottom:14px}
.grid{display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
.grid button{padding:0;border:0;background:none;cursor:pointer;border-radius:8px;overflow:hidden}
/* height:auto or the img width/height attributes win over aspect-ratio */
.grid img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--surface-2)}

.lightbox{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.94);display:grid;place-items:center}
.lightbox img{max-width:94vw;max-height:86vh;object-fit:contain}
.lb-btn{position:absolute;border:0;background:rgba(255,255,255,.1);color:#fff;
  width:var(--tap);height:var(--tap);border-radius:50%;font-size:1.6rem;line-height:1;cursor:pointer}
.lb-close{top:14px;right:14px}
.lb-prev{left:12px;top:50%;transform:translateY(-50%)}
.lb-next{right:12px;top:50%;transform:translateY(-50%)}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line);padding:24px 16px 40px;text-align:center;color:var(--muted)}
.t-logo{max-height:46px;margin:0 auto 10px;width:auto}
.footer p{margin:0;font-size:.85rem}