/* ============================================================
Veterans Village Program — replica skin (matches original krpano UI)
Reuses the original brand assets: fonts, mainset sprite, thumbnails,
intro graphic, logo. Tokens measured from the live original.
============================================================ */
/* ---------- fonts (the original's own font files) ---------- */
@font-face{font-family:'Oswald';font-weight:300;src:url('../asset/fonts/Oswald-Light.ttf')}
@font-face{font-family:'Oswald';font-weight:400;src:url('../asset/fonts/Oswald-Regular.ttf')}
@font-face{font-family:'Oswald';font-weight:500;src:url('../asset/fonts/Oswald-Medium.ttf')}
@font-face{font-family:'Oswald';font-weight:600;src:url('../asset/fonts/Oswald-SemiBold.ttf')}
@font-face{font-family:'Oswald';font-weight:700;src:url('../asset/fonts/Oswald-Bold.ttf')}
@font-face{font-family:'Cuprum';font-weight:400;src:url('../asset/fonts/Cuprum-Regular.ttf')}
@font-face{font-family:'Cuprum';font-weight:500;src:url('../asset/fonts/Cuprum-Medium.ttf')}
@font-face{font-family:'Cuprum';font-weight:600;src:url('../asset/fonts/Cuprum-SemiBold.ttf')}
@font-face{font-family:'Icons';src:url('../asset/fonts/Icons.woff2') format('woff2'),url('../asset/fonts/Icons.woff') format('woff')}
:root{
--red:#F13E4B;
--red8:rgba(241,62,75,.85);
--ink:#091B27;
--ink9:rgba(9,27,39,.9);
--ink8:rgba(9,27,39,.8);
--bar:55px;
--bottom:48px;
--strip:76px;
--help-rest:0px; /* how-to card rests flush in the corner, over the strip and bottom bar */
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#000;color:#fff;font-family:'Cuprum',sans-serif}
.ico{font-family:'Icons';font-style:normal;font-weight:400;line-height:1;display:inline-block}
.hidden{display:none!important}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
#pano{position:absolute;inset:0;background:#111}
/* scene crossfade overlay (freeze-frame of the previous scene, fades out) */
#xfade{position:absolute;inset:0;z-index:25;opacity:0;pointer-events:none}
#xfade img,#xfade canvas{width:100%;height:100%;object-fit:cover;display:block}
/* ============================================================ TOP BAR */
#topbar{position:absolute;top:0;left:0;right:0;height:var(--bar);z-index:30;
background:rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;box-shadow:0 1px 6px rgba(0,0,0,.15)}
#topTitle{text-align:center;line-height:1.1;color:var(--ink)}
#topTitle .t{font-family:'Oswald';font-weight:500;font-size:17px;letter-spacing:1px;text-transform:uppercase;display:block}
#topTitle .s{font-family:'Oswald';font-weight:500;font-size:15px;display:block}
#helpBtn{position:absolute;top:0;right:0;width:51px;height:var(--bar);background:var(--red8);
display:flex;align-items:center;justify-content:center;color:#fff;font-size:26px;transition:background .2s}
#helpBtn:hover{background:var(--red)}
#topLeft{position:absolute;left:8px;top:0;height:var(--bar);display:flex;align-items:center;gap:4px}
.topicon{width:38px;height:38px;border:0;background:transparent;border-radius:6px;cursor:pointer;
display:flex;align-items:center;justify-content:center;color:var(--ink);opacity:.7;transition:opacity .15s,background .15s}
.topicon:hover{opacity:1;background:rgba(9,27,39,.08)}
.topicon svg{width:20px;height:20px;fill:currentColor}
#toast{position:absolute;top:68px;left:50%;transform:translateX(-50%);z-index:70;
background:rgba(9,27,39,.92);color:#fff;font-family:'Cuprum';font-size:15px;padding:9px 18px;border-radius:6px;
box-shadow:0 4px 16px rgba(0,0,0,.4);opacity:1;transition:opacity .4s}
#toast.fade{opacity:0}
/* ============================================================ RENOVATION TOGGLE */
#renoToggle{position:absolute;top:64px;left:50%;transform:translateX(-50%);z-index:30;display:flex;gap:2px}
#renoToggle button{width:100px;height:50px;border-radius:5px;background:var(--ink);color:#fff;
font-family:'Oswald';text-transform:uppercase;letter-spacing:1px;line-height:1.05;
display:flex;flex-direction:column;align-items:center;justify-content:center;transition:background .2s,transform .1s}
#renoToggle button .l1{font-size:16px}
#renoToggle button .l2{font-size:13px}
#renoToggle button.active{background:var(--red)}
#renoToggle button:active{transform:scale(.96)}
/* ============================================================ FLOOR TABS */
#floorTabs{position:absolute;left:0;top:50%;transform:translateY(-50%);z-index:30;display:flex;flex-direction:column;gap:2px}
#floorTabs button{width:84px;height:50px;border-radius:0 5px 5px 0;background:var(--ink);color:#fff;
font-family:'Oswald';font-size:16px;letter-spacing:1px;text-align:center;padding-left:6px;transition:background .2s}
#floorTabs button.active{background:var(--red)}
/* ============================================================ HOTSPOTS */
.hotspot{position:absolute;transform:translate(-50%,-50%);z-index:10;cursor:pointer}
.hs-mark{display:flex;flex-direction:column;align-items:center;transform-origin:center bottom;
transition:transform .28s cubic-bezier(.34,1.45,.5,1)}
.hs-mark .arr{width:24px;height:24px;margin-bottom:-2px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.hs-mark .arr svg{width:100%;height:100%;fill:#fff}
.type-view .arr svg{fill:none;stroke:#fff;stroke-width:2} /* thin stroked walk arrow */
.hs-mark .ring{width:36px;height:36px;border-radius:50%;border:2px solid #fff;background:rgba(255,255,255,.12);
box-shadow:0 1px 6px rgba(0,0,0,.5);transition:transform .18s,background .18s;animation:hpulse 1.8s infinite;
display:flex;align-items:center;justify-content:center}
.hs-mark .ring svg{width:18px;height:18px;fill:#fff}
.hs-mark .ring .hicon{width:22px;height:22px;object-fit:contain;display:block}
.hs-mark .ring.info{background:var(--ink8);font-family:'Oswald';font-weight:600;font-size:18px;color:#fff}
.hotspot:hover .ring{background:rgba(241,62,75,.6)}
.hotspot.looked .hs-mark{transform:scale(1.13)} /* subtle lock-on when centred */
.hotspot:hover .hs-mark{transform:scale(1.18)} /* hover wins on tie */
@keyframes hpulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.5)}70%{box-shadow:0 0 0 17px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
/* location title — hidden by default, animates in on hover (matches the original) */
.hs-label{position:absolute;left:50%;bottom:100%;margin-bottom:8px;transform:translate(-50%,6px);
background:var(--ink8);color:#fff;font-family:'Cuprum';font-size:15px;letter-spacing:.3px;white-space:nowrap;
padding:5px 12px;border-radius:4px;opacity:0;pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,.45);
transition:opacity .3s ease,transform .3s ease}
.hs-label::after{content:'';position:absolute;left:50%;top:100%;transform:translateX(-50%);
border:5px solid transparent;border-top-color:var(--ink8)}
.hotspot:hover .hs-label,.hotspot.looked .hs-label{opacity:1;transform:translate(-50%,0)}
/* ---- CALLOUT hotspot: circle, leader line draws out, then name animates in ---- */
.hs-mark.co{position:relative;width:0;height:0;transform:none!important} /* anchor at the dot, no lock-on scale */
.co-dot{position:absolute;left:-11px;top:-11px;width:22px;height:22px;border-radius:50%;border:2px solid #fff;
background:rgba(241,62,75,.7);box-shadow:0 1px 6px rgba(0,0,0,.55);transition:transform .18s,background .18s;
animation:hpulse 1.8s infinite}
.hotspot:hover .co-dot{transform:scale(1.18);background:var(--red)}
.co-line{position:absolute;left:-1.5px;bottom:11px;width:3px;height:0;background:#fff;border-radius:2px;
box-shadow:0 0 4px rgba(0,0,0,.45);transition:height .32s ease .22s} /* out: retracts after name leaves */
.co-name{position:absolute;left:0;bottom:61px;transform:translate(-50%,8px);white-space:nowrap;
background:var(--ink8);color:#fff;font-family:'Cuprum';font-size:15px;letter-spacing:.3px;padding:5px 13px;border-radius:4px;
opacity:0;pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,.5);transition:opacity .25s ease,transform .25s ease}
.co-name::after{content:'';position:absolute;left:50%;top:100%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--ink8)}
/* on look-at / hover: line draws first, then the name fades+rises in */
.hotspot:hover .co-line,.hotspot.looked .co-line{height:48px;transition:height .32s ease}
.hotspot:hover .co-name,.hotspot.looked .co-name{opacity:1;transform:translate(-50%,0);transition:opacity .25s ease .34s,transform .25s ease .34s}
/* white box, black text (v2 + v3) */
.co2 .co-name,.co3 .co-name{background:#fff;color:var(--ink)}
.co2 .co-name::after,.co3 .co-name::after{border-top-color:#fff}
/* v3 — hollow white circle, red pulse */
@keyframes hpulse-red{0%{box-shadow:0 0 0 0 rgba(241,62,75,.6)}70%{box-shadow:0 0 0 17px rgba(241,62,75,0)}100%{box-shadow:0 0 0 0 rgba(241,62,75,0)}}
.co3 .co-dot{background:transparent;animation:hpulse-red 1.8s infinite}
.hotspot:hover .co3 .co-dot{background:transparent}
/* ============================================================ THUMBNAIL STRIP */
#strip{position:absolute;left:0;right:0;bottom:var(--bottom);height:var(--strip);z-index:25;
display:flex;align-items:center}
#stripScroll{flex:1;height:100%;overflow:hidden;position:relative}
#stripTrack{display:flex;gap:6px;height:100%;align-items:center;padding:0 4px;
transition:transform .35s ease;will-change:transform}
.thumb{position:relative;width:140px;height:70px;flex:none;cursor:pointer;background-size:cover;background-position:center;
outline:3px solid rgba(255,255,255,.3);outline-offset:0;transition:outline-color .2s}
.thumb:hover{outline-color:rgba(255,255,255,.7)}
.thumb.current{outline-color:var(--red)}
.thumb .lbl{position:absolute;left:0;right:0;bottom:0;height:21px;background:rgba(0,0,0,.45);
color:#fff;font-family:'Cuprum';font-size:11px;line-height:21px;text-align:center;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px}
.thumb .eye{position:absolute;top:4px;left:50%;transform:translateX(-50%);color:#fff;font-size:16px;
display:none;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.thumb.current .eye{display:block}
.stripArrow{width:44px;height:100%;flex:none;background:var(--ink9);color:#fff;display:flex;
align-items:center;justify-content:center;cursor:pointer;opacity:.85;transition:opacity .2s,background .2s}
.stripArrow:hover{opacity:1;background:var(--red)}
.stripArrow svg{width:18px;height:18px;fill:#fff}
/* ============================================================ BOTTOM BAR */
#bottombar{position:absolute;left:0;right:0;bottom:0;height:var(--bottom);z-index:30;
background:var(--ink9);display:flex;align-items:center}
#infoBtn{width:51px;height:100%;background:var(--red);display:flex;align-items:center;justify-content:center;flex:none}
.sprite{background-image:url('../main/graphics/mainset.png');background-repeat:no-repeat}
#infoBtn svg{width:26px;height:26px;fill:#fff}
#sceneLabel{padding:0 14px;line-height:1.05}
#sceneLabel .f{font-family:'Cuprum';font-weight:500;font-size:18px}
#sceneLabel .n{font-family:'Cuprum';font-size:14px;opacity:.85}
#navControls{flex:1;display:flex;align-items:center;justify-content:center;gap:16px}
#navControls .ctl{width:32px;height:32px;background-size:128px 128px;opacity:.85;transition:opacity .15s,transform .1s}
#navControls .ctl:hover{opacity:1}
#navControls .ctl:active{transform:scale(.9)}
.c-zin{background-position:0 -32px}
.c-zout{background-position:-32px -32px}
.c-up{background-position:-64px 0}
.c-down{background-position:-96px 0}
.c-left{background-position:0 0}
.c-right{background-position:-32px 0}
#donateBtn{height:30px;margin-right:8px;padding:0 18px;background:var(--red);color:#fff;border-radius:2px;text-decoration:none;
font-family:'Oswald';font-size:12px;letter-spacing:1px;text-transform:uppercase;display:flex;align-items:center;flex:none}
#donateBtn:hover{filter:brightness(1.08)}
/* ============================================================ HELP OVERLAY */
/* The card is parked in the lower-right corner and slides up into view the way
the original tour presented it; closing sends it back down off screen, so the
scrim has to hold until the slide finishes rather than cutting out under it. */
#help{position:absolute;inset:0;z-index:55;background:rgba(9,27,39,.55);
opacity:0;pointer-events:none;transition:opacity .5s ease}
#help.show{opacity:1;pointer-events:auto}
.help-card{position:absolute;right:0;bottom:var(--help-rest);
background:#fff;color:var(--ink);width:440px;max-width:92vw;overflow:auto;
max-height:calc(100% - var(--help-rest) - var(--bar) - 12px);
border-radius:8px 0 0 0;padding:22px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.5);
/* the graphic slices fill the card, so a translucent background would not show:
fading the whole element is what actually lets the panorama through */
opacity:.92;
transform:translateY(calc(100% + var(--help-rest)));
transition:transform .5s cubic-bezier(.22,.61,.36,1)}
#help.show .help-card{transform:translateY(0)}
.help-card img{display:block;width:100%;height:auto;border-radius:4px}
.help-card h3{font-family:'Oswald';font-weight:600;font-size:26px;letter-spacing:1px;text-transform:uppercase;margin:0 0 4px;color:var(--ink)}
.help-card .sub{font-family:'Cuprum';font-size:16px;color:#555;margin-bottom:18px}
.help-mini{display:flex;gap:6px;justify-content:center;margin:0 0 22px}
.help-mini span{font-family:'Oswald';font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#fff;
padding:8px 14px;border-radius:5px;line-height:1.1}
.help-mini .a{background:var(--red)}.help-mini .b{background:var(--ink)}
.help-row{display:flex;justify-content:center;gap:46px;margin-bottom:22px}
.help-row .col .ic{font-size:30px;color:var(--ink)}
.help-row .col .cap{font-family:'Oswald';font-size:12px;letter-spacing:1px;text-transform:uppercase;margin-top:6px;color:#555}
.help-row .col .cap b{display:block;color:var(--ink);font-size:13px}
.help-foot{font-family:'Cuprum';font-size:15px;color:#444;border-top:1px solid #eee;padding-top:16px}
/* the graphic slices are positioned and come later in the DOM, so without a
stacking order of its own the close button is painted over and unclickable */
.help-card .x{position:absolute;top:10px;right:10px;z-index:3;width:30px;height:30px;
display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;
color:#5b6b77;background:rgba(255,255,255,.9);border-radius:50%;
box-shadow:0 1px 4px rgba(9,27,39,.18)}
.help-card .x:hover{color:var(--ink);background:#fff}
.help-card .x:hover{color:var(--ink)}
/* ============================================================ INFO MODAL */
#modal{position:absolute;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:rgba(9,27,39,.6)}
.modal-card{background:#fff;color:var(--ink);max-width:520px;width:90%;max-height:82vh;overflow-y:auto;
border-radius:6px;padding:30px 32px;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.55)}
.modal-card .x{position:absolute;top:12px;right:16px;font-size:26px;color:#999;line-height:1;z-index:3}
.modal-card .x:hover{color:var(--ink)}
/* info / about popups: foundation lockup, then a centred title over justified copy */
#modalBody h4,#modalBody h3,#descBody h4{font-family:'Oswald';font-size:22px;margin:4px 0 14px;color:var(--ink);
text-align:center;letter-spacing:.3px}
#modalBody img[src$="logo.png"],#descBody img[src$="logo.png"]{display:block;max-width:78%;width:400px;margin:0 auto 16px}
#modalBody p,#descBody p{font-family:'Cuprum';font-size:16px;line-height:1.55;margin:0 0 12px;white-space:pre-wrap}
#modalBody p,#descBody p{text-align:justify}
#modalBody img{max-width:170px;height:auto;margin-bottom:6px}
/* the About card leads with the foundation lockup, so it gets the full width */
#modalBody .about img{margin-bottom:18px}
#modalBody .about p:nth-of-type(2),#modalBody .about p:last-of-type{text-align:left}
#modalBody .about a[href^="tel:"]{font-size:1.15em}
#modalBody .about small{color:#6b7a85;font-size:13.5px}
#modalBody a{color:var(--red)}
/* ---------- auto scene-description popup ---------- */
#descPopup{position:absolute;inset:0;z-index:58;display:flex;align-items:center;justify-content:center;
background:rgba(9,27,39,.45);opacity:0;pointer-events:none;transition:opacity .45s ease}
#descPopup.show{opacity:1;pointer-events:auto}
/* ============================================================ SPLASH */
#splash{position:absolute;inset:0;z-index:100;overflow:hidden;transition:opacity .7s}
#splash.fade{opacity:0;pointer-events:none}
.slides{position:absolute;inset:0}
.slides .slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;
transition:opacity 1.4s ease;animation:none}
.slides .slide.on{opacity:1}
#splash .tint{position:absolute;inset:0;background:rgba(12,35,63,.45)}
.splash-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.splash-center img{width:340px;max-width:74vw;height:auto;filter:drop-shadow(0 4px 18px rgba(0,0,0,.4))}
.splash-center .start{margin-top:26px;background:var(--red8);color:#fff;font-family:'Oswald';font-size:13px;
letter-spacing:2px;text-transform:uppercase;padding:12px 26px;border-radius:2px;transition:background .2s,transform .15s}
.splash-center .start:hover{background:var(--red);transform:translateY(-1px)}
.dots{position:absolute;left:0;right:0;bottom:26px;display:flex;gap:9px;justify-content:center}
.dots i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer;transition:background .2s}
.dots i.on{background:#fff}
/* ---------- loader ---------- */
#loader{position:absolute;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.3);pointer-events:none}
.spin{width:46px;height:46px;border:4px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* ---------- responsive ---------- */
@media(max-width:640px){
#topTitle .t{font-size:14px}#topTitle .s{font-size:12px}
#renoToggle button{width:84px;height:44px}#renoToggle button .l1{font-size:13px}#renoToggle button .l2{font-size:11px}
#floorTabs button{width:64px;height:44px;font-size:13px}
#sceneLabel .f{font-size:15px}#sceneLabel .n{font-size:12px}
#donateBtn{padding:0 12px;font-size:11px}
.thumb{width:110px;height:58px}
/* The strip keeps its desktop height while the thumbnails shrink, so 9px of
panorama shows between them and the bar and the two read as separate
pieces. Size it to the thumbnails — 3px of slack each side so the current
one's outline is not clipped — and carry the bar's colour up behind it. */
#strip{height:64px;background:var(--ink9)}
/* A phone has no room for controls a finger already does better: pinch zooms,
drag looks around. Dropping them also stops the bar overflowing and clipping
DONATE, and leaves the title bar clear the way the original tour has it. */
#navControls{display:none}
#topLeft{display:none}
#floorTabs{display:none}
#sceneLabel{flex:1;min-width:0}
#sceneLabel .f,#sceneLabel .n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
/* the markup separates the two lines with a
; once they are blocks that
becomes a third, empty line — the gap under the floor name */
#sceneLabel br{display:none}
/* swipe the strip instead of tapping arrows, so the arrows can go. Native
scrolling has to replace the transform the arrows drive, or the thumbnails
past the first few become unreachable. */
.stripArrow{display:none}
#stripScroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
#stripScroll::-webkit-scrollbar{display:none}
#stripTrack{transform:none !important}
}
/* ---------- how-to-use card ----------
The original graphic is kept whole and shown as two slices: everything above
its hotspot row (y 0-560 of 758x788) and its closing line (y 715-788). The
band between them is filled with the tour's real hotspots, rendered through
the same markMarkup the panorama uses, so they can never fall out of date.
The negative top resolves against the wrapper height set by aspect-ratio,
which makes it width * y / 758 — the exact offset, at any card size. */
.help-card .splash{position:relative;overflow:hidden;width:100%}
.help-card .splash img{position:absolute;left:0;width:100%;height:auto;border-radius:0}
.help-card .splash.top{aspect-ratio:758/560}
.help-card .splash.top img{top:0}
.help-card .splash.bot{aspect-ratio:758/73}
.help-card .splash.bot img{top:calc(-100% * 715 / 73)}
/* the markers are white, so they need the dark ground they sit on in the tour */
.help-spots{display:flex;gap:8px;justify-content:space-around;align-items:flex-end;
background:var(--ink);border-radius:6px;padding:52px 8px 12px;margin:6px 0}
.help-spots figure{margin:0;flex:1;display:flex;flex-direction:column;align-items:center;gap:9px}
.help-spots .hotspot{position:static;transform:none;height:44px;display:flex;align-items:flex-end;justify-content:center}
.help-spots figcaption{font-family:'Cuprum';font-size:12.5px;color:#fff;opacity:.85;text-align:center;line-height:1.2}
.help-spots .hs-mark.co{margin-bottom:11px}
.help-spots .co-line{height:32px}
.help-spots .co-name{opacity:1;transform:translate(-50%,0);bottom:45px}
/* ---------- flat images pasted onto surfaces in the panorama ---------- */
/* Inert: an overlay is decoration, never a click target, so it can sit across a
hotspot without swallowing it. */
.pano-overlay{pointer-events:none}
.pano-overlay img{display:block;width:100%;height:100%;-webkit-user-drag:none}
/* The overlay layer must stay a plain positioned box — a transform, an opacity
or a z-index here would make it a stacking context and isolate the blending
from the panorama, which is the whole point of putting it beside the canvas. */
#pano > .pano-overlays{position:absolute;inset:0;pointer-events:none}
#pano > .pano-overlays > .pano-overlay{position:absolute;left:0;top:0;transform-origin:50% 50%}
/* ---------- hotspots on a phone ----------
The markers are sized for a 1400px-wide stage; on a 375px screen the same
ring covers a tenth of the view. Scale the whole family down together —
ring, arrow, leader line and title — so the proportions stay right. */
@media(max-width:640px){
.hs-mark .ring{width:28px;height:28px;border-width:1.5px}
.hs-mark .ring svg{width:14px;height:14px}
.hs-mark .ring .hicon{width:17px;height:17px}
.hs-mark .ring.info{font-size:14px}
.hs-mark .arr{width:18px;height:18px}
.hs-label{font-size:12.5px;padding:3px 9px;margin-bottom:6px;max-width:46vw;
overflow:hidden;text-overflow:ellipsis}
.co-dot{width:17px;height:17px;left:-8.5px;top:-8.5px;border-width:1.5px}
.co-line{bottom:8.5px;width:2px;left:-1px}
.hotspot:hover .co-line,.hotspot.looked .co-line{height:34px}
.co-name{bottom:45px;font-size:12.5px;padding:3px 10px;max-width:46vw;
overflow:hidden;text-overflow:ellipsis}
/* the lock-on nudge reads as a jump at this size */
.hotspot.looked .hs-mark{transform:scale(1.08)}
@keyframes hpulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.5)}70%{box-shadow:0 0 0 12px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
}
/* ---------- nudge toward a hotspot that is out of frame ---------- */
/* The navy read as a shadow against a bright exterior. Brand red is the tour's
call-to-action colour and holds against sky, brick or a dark hallway alike. */
.edge-hint{position:absolute;top:50%;transform:translateY(-50%);z-index:31;display:flex;align-items:center;gap:8px;
background:var(--red);color:#fff;font-family:'Oswald';font-weight:500;font-size:14px;
letter-spacing:.6px;text-transform:uppercase;
padding:10px 15px;box-shadow:0 3px 16px rgba(0,0,0,.55);cursor:pointer;
animation:edgeIn .35s ease both}
.edge-hint.right{right:0;border-radius:5px 0 0 5px;flex-direction:row-reverse}
.edge-hint.left{left:0;border-radius:0 5px 5px 0}
.edge-hint .eh-ico{width:20px;height:20px;flex:none;display:flex}
.edge-hint .eh-ico svg{width:100%;height:100%;fill:#fff}
.edge-hint .eh-name{white-space:nowrap;max-width:34vw;overflow:hidden;text-overflow:ellipsis}
.edge-hint:hover{background:var(--ink)}
/* a small drift toward the edge it points at — motion reads as "over here" far
better than a static badge does */
@keyframes edgeIn{from{opacity:0}to{opacity:1}}
.edge-hint.right .eh-ico{animation:nudgeR 1.6s ease-in-out infinite}
.edge-hint.left .eh-ico{animation:nudgeL 1.6s ease-in-out infinite}
@keyframes nudgeR{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@keyframes nudgeL{0%,100%{transform:translateX(0)}50%{transform:translateX(-4px)}}
@media(max-width:640px){
.edge-hint{font-size:12.5px;padding:7px 11px;gap:6px}
.edge-hint .eh-ico{width:17px;height:17px}
}
/* ---------- image gallery lightbox ---------- */
#lightbox{position:absolute;inset:0;z-index:60;background:rgba(9,27,39,.92);
display:flex;align-items:center;justify-content:center;gap:10px}
#lightbox figure{margin:0;max-width:86%;max-height:86%;display:flex;flex-direction:column;align-items:center;gap:10px}
#lbImg{max-width:100%;max-height:78vh;object-fit:contain;border-radius:4px;box-shadow:0 10px 40px rgba(0,0,0,.55)}
#lbCap{font-family:'Cuprum';font-size:15px;color:#fff;opacity:.9;text-align:center}
#lbCount{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
font-family:'Oswald';font-size:13px;letter-spacing:1px;color:#fff;opacity:.75}
#lightbox .x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;
display:flex;align-items:center;justify-content:center;font-size:24px;line-height:1;
color:#fff;background:rgba(255,255,255,.14)}
#lightbox .x:hover{background:var(--red)}
.lb-nav{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.14);flex:none;position:relative}
.lb-nav:hover{background:var(--red)}
/* chevrons drawn from borders — no icon font needed at this size */
.lb-nav::before{content:'';position:absolute;top:50%;left:50%;width:11px;height:11px;
border-top:2px solid #fff;border-right:2px solid #fff}
.lb-nav.next::before{transform:translate(-65%,-50%) rotate(45deg)}
.lb-nav.prev::before{transform:translate(-35%,-50%) rotate(-135deg)}
/* the photo marker: same ring as an info dot, picture instead of the "i" */
.hs-mark .ring.gal svg{width:17px;height:17px;fill:#fff}
@media(max-width:640px){
#lightbox{gap:4px}
#lightbox figure{max-width:94%}
#lbImg{max-height:66vh}
.lb-nav{width:34px;height:34px}
.lb-nav::before{width:9px;height:9px}
#lbCap{font-size:13px}
}
/* ---------- info popup with pictures beside the text ---------- */
.io-split{display:flex;gap:20px;align-items:flex-start;text-align:left}
.io-split .io-pic{flex:1 1 52%;min-width:0;position:relative}
.io-split .io-pic img{display:block;width:100%;height:auto;border-radius:4px}
.io-split .io-pic .lb-nav{position:absolute;top:50%;transform:translateY(-50%);
width:34px;height:34px;background:rgba(9,27,39,.55)}
.io-split .io-pic .lb-nav.prev{left:8px}
.io-split .io-pic .lb-nav.next{right:8px}
.io-split .io-pic .lb-nav::before{width:9px;height:9px}
.io-count{position:absolute;right:8px;bottom:8px;background:rgba(9,27,39,.6);color:#fff;
font-family:'Oswald';font-size:11px;letter-spacing:1px;padding:2px 7px;border-radius:3px}
.io-split .io-text{flex:1 1 48%;min-width:0}
/* The popup's own rules are id-scoped (#modalBody h4 …), so matching them needs
the id here too — a class selector alone loses and the column stays centred. */
#modalBody .io-split .io-text h4,#modalBody .io-split .io-text h3{text-align:left}
#modalBody .io-split .io-text img[src$="logo.png"]{margin:0 0 12px;width:auto;max-width:190px}
#modal .modal-card:has(.io-split){max-width:820px;width:min(820px,92vw)}
@media(max-width:760px){
.io-split{flex-direction:column;gap:14px}
.io-split .io-pic,.io-split .io-text{flex:1 1 auto;width:100%}
#modalBody .io-split .io-text h4{text-align:center}
}