*{box-sizing:border-box}body{margin:0;background:#0d1b22;color:#f0eee5;font:15px system-ui,sans-serif}:is(button,:where(a[data-navigation-link])){font:inherit;color:inherit;cursor:pointer;background:#142831;border:1px solid #ffffff30;border-radius:8px;padding:12px 18px;min-height:44px}:is(button,:where(a[data-navigation-link])):hover{background:#29424b}:is(button,:where(a[data-navigation-link])):focus-visible{outline:2px solid #e2c58a;outline-offset:3px}:is(button,:where(a[data-navigation-link])):disabled{opacity:.4;cursor:wait}[hidden]{display:none!important}header{height:88px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 28px}.brand{font:19px Georgia}.brand i{display:block;font-size:29px}.heading{text-align:center}.heading span,small{font-size:10px;letter-spacing:1.8px;color:#a9bfc7}h1{font:26px Georgia;margin:7px 0 0}.badge{font-size:11px;color:#a9bfc7;border:1px solid #ffffff22;border-radius:20px;padding:7px 10px}#stage{height:calc(100dvh - 88px);position:relative;overflow:hidden}#pano,#giga{position:absolute;inset:0}#giga{background:#081219}.top-actions{position:absolute;top:18px;left:24px;display:flex;gap:10px}.bottom{position:absolute;bottom:0;left:0;right:0;padding:60px 22px 14px;background:linear-gradient(transparent,#07141bec);pointer-events:none}.bottom nav{display:flex;justify-content:center;gap:12px;pointer-events:auto}.zoom{display:flex;gap:1px}.zoom :is(button,:where(a[data-navigation-link])){border-radius:0}.zoom :is(button,:where(a[data-navigation-link])):first-child{border-radius:8px 0 0 8px}.zoom :is(button,:where(a[data-navigation-link])):last-child{border-radius:0 8px 8px 0}#arts{background:#dfc48c;color:#12222a;border-color:#dfc48c}#arts span{margin-left:12px;opacity:.65}.hint{text-align:center;font-size:11px;color:#c1d1d6;margin-bottom:0}.credit{font-size:10px;text-align:center;text-shadow:0 1px 3px black;margin:0 0 12px}aside{position:absolute;z-index:3;background:#10232cf5;box-shadow:0 12px 40px #0006;border:1px solid #ffffff25;border-radius:12px;padding:22px}#point-panel{top:74px;left:24px;width:280px}#points{display:grid;gap:8px}#points :is(button,:where(a[data-navigation-link])){text-align:left}h2{font:23px Georgia;margin:0 0 18px}:is(#art-panel,#story-panel){bottom:126px;left:50%;transform:translateX(-50%);width:min(780px,calc(100% - 40px));max-height:calc(100% - 150px);overflow:auto}.panel-heading{display:flex;justify-content:space-between;gap:20px;align-items:start}small{display:block;margin-bottom:8px}:is(#artworks,#story-grid){display:grid;grid-template-columns:repeat(3,1fr);gap:16px}:is(#artworks,#story-grid) :is(button,:where(a[data-navigation-link])){text-align:left;padding:0;overflow:hidden}:is(#artworks,#story-grid) img{width:100%;aspect-ratio:1.3;object-fit:cover;display:block}:is(#artworks,#story-grid) strong{display:block;font-weight:400;padding:12px;font-size:14px}#status{position:absolute;top:22px;left:50%;transform:translateX(-50%);padding:10px 18px;border-radius:20px;background:#10232cef;font-size:13px;z-index:4}#status.error{max-width:80%;border:1px solid #dfc48c;white-space:normal}.active{border-color:#dfc48c;color:#dfc48c}@media(max-width:600px){header{height:80px;padding:12px 16px}.badge{display:none}.heading{text-align:right}h1{font-size:20px}.heading span{font-size:9px}#stage{height:calc(100dvh - 80px)}.top-actions{left:12px;top:12px}.bottom{padding:50px 10px 10px}.bottom nav{gap:6px;flex-wrap:wrap}:is(button,:where(a[data-navigation-link])){padding:10px 12px;font-size:13px}.credit{font-size:9px}.hint{font-size:10px}:is(#art-panel,#story-panel){bottom:150px;padding:16px;max-height:calc(100% - 180px)}:is(#artworks,#story-grid){grid-template-columns:1fr}:is(#artworks,#story-grid) :is(button,:where(a[data-navigation-link])){display:grid;grid-template-columns:95px 1fr;align-items:center}:is(#artworks,#story-grid) img{height:80px}#point-panel{left:12px;top:66px}}
#point-panel{left:auto;right:24px;top:74px;width:min(350px,calc(100% - 30px));max-height:calc(100% - 185px);overflow:auto}#map{position:relative;margin:0 0 18px}#map-image{width:100%;display:block}#map .map-pin{position:absolute;transform:translate(-50%,-50%);border-radius:50%;width:32px;height:32px;min-height:32px;padding:0;border:1px solid #dfc48c;background:#19313c}#map .map-pin.active{background:#dfc48c;color:#10232c;box-shadow:0 0 0 5px #dfc48c40}:is(#art-panel,#story-panel){max-height:58%;width:min(960px,calc(100% - 40px))}:is(#artworks,#story-grid){grid-template-columns:repeat(4,1fr)}.art-spot{width:28px;height:28px;min-height:28px;padding:0;border-radius:50%;border:1px solid #f3d9a6;background:#132731d9;position:relative;box-shadow:0 0 0 4px #13273133}.spot-icon{font-size:19px;color:#f3d9a6}.spot-label{display:none;position:absolute;left:36px;top:0;padding:8px 12px;border-radius:5px;white-space:nowrap;background:#10232cf2;color:#eee;font-size:12px;pointer-events:none}.art-spot:hover,.art-spot:focus-visible{z-index:50;background:#dfc48c}.art-spot:hover .spot-label,.art-spot:focus-visible .spot-label{display:block}.hide-spots .art-spot{display:none}.transition-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:transparent;pointer-events:none;z-index:1}.top-actions,.bottom{z-index:2}.top-actions{right:24px}.top-actions #places{margin-left:auto}.bottom #previous,.bottom #next{width:44px;padding:8px}.bottom #arts{min-width:200px}#status{pointer-events:none}.credit{display:none}@media(max-width:600px){:is(#artworks,#story-grid){grid-template-columns:1fr 1fr;gap:10px}:is(#artworks,#story-grid) :is(button,:where(a[data-navigation-link])){display:block}:is(#artworks,#story-grid) img{height:90px}:is(#artworks,#story-grid) strong{font-size:12px;padding:10px}#point-panel{right:12px;top:65px;max-height:calc(100% - 205px)}.top-actions{right:12px;gap:6px}.top-actions :is(button,:where(a[data-navigation-link])){font-size:11px;padding:8px 10px}#hotspots{display:none}.bottom #arts{min-width:0}.bottom nav{gap:5px}.zoom{order:2}.bottom #full{order:3}.bottom #next{order:1}.bottom #previous{order:0}}
/* Compact viewer controls and the same map proportions as the released site. */
header{height:94px;padding:12px 24px}.header-tools{display:flex;align-items:center;gap:18px}.mini-trigger{position:relative;width:115px;height:60px;min-height:0;flex-shrink:0;border:1px solid #61717b;border-radius:5px;background:#112536;padding:0;margin-bottom:12px;overflow:visible}.mini-trigger img{width:100%;height:100%;object-fit:fill;border-radius:5px}.mini-trigger>span{position:absolute;left:0;right:0;bottom:-16px;font-size:10px;white-space:nowrap}.mini-trigger i{position:absolute;width:9px;height:9px;background:#f0ce83;border:2px solid white;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 3px #e1c79344}.header-tools #exit{border-radius:50%;width:40px;height:40px;min-height:40px;padding:0;font-size:24px}#stage{height:calc(100dvh - 94px)}#point-panel{top:12px;right:12px;width:min(280px,calc(100% - 24px));padding:10px;border:1px solid #8ba2aa66;border-radius:7px;background:#0b1d2bef;box-shadow:0 10px 30px #0005;max-height:calc(100% - 24px)}#point-panel h2{font:14px system-ui;margin:8px 2px 16px}#close-map{display:none}#map{margin:0 0 10px}#map .map-pin{width:25px;height:25px;min-height:25px;font-size:12px}#points{width:100%;display:block;background:#1b303c;border:1px solid #6c7d86;border-radius:4px;color:#fff;font:14px system-ui;padding:10px 8px;margin-bottom:9px}#level-buttons{display:flex;gap:5px}#level-buttons :is(button,:where(a[data-navigation-link])){flex:1;font-size:12px;min-height:48px;border-radius:4px;padding:7px 5px}#level-buttons :is(button,:where(a[data-navigation-link])).active{background:#dfc48c;color:#10232c}.bottom{padding:50px 16px 12px}.bottom nav{gap:7px;width:fit-content;max-width:100%;margin:auto;padding:5px;background:#0d202cdb;border:1px solid #ffffff20;border-radius:30px;backdrop-filter:blur(12px)}.bottom nav :is(button,:where(a[data-navigation-link])){min-height:36px;height:36px;border:0;border-radius:22px;font-size:12px;padding:6px 13px;background:transparent}.bottom #arts{min-width:0;background:#dfc48c}.bottom #previous,.bottom #next,.bottom #full{width:36px;padding:0}.bottom #full{font-size:22px}.zoom :is(button,:where(a[data-navigation-link])):first-child,.zoom :is(button,:where(a[data-navigation-link])):last-child{border-radius:18px}.hint{font-size:10px}.top-actions{left:18px;right:18px;top:12px;pointer-events:none}.top-actions :is(button,:where(a[data-navigation-link])){pointer-events:auto;min-height:36px;height:36px;font-size:12px;padding:7px 12px}.top-actions #hotspots{margin-left:auto;border-radius:50%;width:36px;padding:0;font-size:18px}.art-spot{width:24px;height:24px;min-height:24px;border:1px solid #fff9;background:#1529329c;box-shadow:0 1px 8px #0004;transition:opacity .3s,background .2s}.work-spot .spot-icon{display:block;width:10px;height:10px;border:1px solid #f1d49a;border-radius:2px;margin:auto}.pano-spot{width:32px;height:32px;min-height:32px;border-color:#dfc48c;background:#162c37c9}.pano-spot .spot-icon{font-size:21px}.art-spot.crowded{opacity:0;pointer-events:none}.hide-spots .art-spot{opacity:0!important;pointer-events:none!important}#pano.idle .art-spot:not(:focus-visible){opacity:0;pointer-events:none}.art-spot:focus-visible{opacity:1!important}.spot-label{top:-3px;left:30px}.art-spot:hover .spot-icon{color:#152932}:is(#art-panel,#story-panel){bottom:100px}.bottom #reset{white-space:nowrap}@media(max-width:600px){header{height:86px;padding:10px 12px}.brand{display:none}.heading{text-align:left}h1{font-size:18px}.header-tools{gap:10px}.mini-trigger{width:75px;height:42px}.mini-trigger>span{font-size:9px}.header-tools #exit{width:34px;height:34px;min-height:34px}#stage{height:calc(100dvh - 86px)}#point-panel{width:min(260px,75vw)}.bottom nav{gap:1px;flex-wrap:nowrap;width:100%;justify-content:space-between;padding:4px}.bottom nav :is(button,:where(a[data-navigation-link])){padding:5px 8px;font-size:11px}.bottom #previous,.bottom #next,.bottom #full{width:30px;min-width:30px}.bottom #arts span{display:none}.bottom #next,.bottom #previous,.bottom .zoom,.bottom #full{order:0}#hotspots{display:block}.top-actions{left:10px;right:10px}.hint{font-size:9px}.zoom{gap:0}:is(#art-panel,#story-panel){bottom:90px}}@media(prefers-reduced-motion:reduce){.art-spot{transition:none}}


/* Artwork drawer: aligned previews and a quiet, persistent heading. */
:is(#art-panel,#story-panel){padding:0;overflow:hidden;border-radius:14px;background:#10232cf7;backdrop-filter:blur(18px);box-shadow:0 16px 60px #0008;max-height:min(66%,600px)}
:is(#art-panel,#story-panel):not([hidden]){display:flex;flex-direction:column}
:is(#art-panel,#story-panel) .panel-heading{flex-shrink:0;align-items:center;padding:18px 22px 16px;border-bottom:1px solid #ffffff12}
:is(#art-panel,#story-panel) small{font-size:9px;letter-spacing:1.5px;margin-bottom:6px}
:is(#art-panel,#story-panel) h2{font-size:21px;margin:0;line-height:1.2}
#close-panel{width:34px;height:34px;min-height:34px;padding:0;border-radius:50%;flex-shrink:0;font-size:20px;background:transparent}
:is(#artworks,#story-grid){overflow:auto;min-height:0;padding:18px 22px 22px;gap:18px 14px;scrollbar-width:thin;scrollbar-color:#536871 transparent;overscroll-behavior:contain;align-items:stretch}
:is(#artworks,#story-grid) :is(button,:where(a[data-navigation-link])){display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;border:1px solid transparent;border-radius:8px;background:transparent;transition:background .18s,border-color .18s}
:is(#artworks,#story-grid) img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;flex-shrink:0;border-radius:6px; margin:0}
:is(#artworks,#story-grid) strong{font-size:12px;line-height:1.45;padding:10px 8px 12px;text-wrap:pretty}
:is(#artworks,#story-grid) :is(button,:where(a[data-navigation-link])):hover{background:#ffffff08;border-color:#ffffff25}
:is(#artworks,#story-grid) :is(button,:where(a[data-navigation-link]))[aria-current="true"]{background:#dfc48c12;border-color:#dfc48c}
:is(#artworks,#story-grid) :is(button,:where(a[data-navigation-link]))[aria-current="true"] strong{color:#efd49e}
@media(max-width:600px){:is(#art-panel,#story-panel){width:calc(100% - 20px);max-height:65%;border-radius:12px}:is(#art-panel,#story-panel) .panel-heading{padding:14px}:is(#art-panel,#story-panel) h2{font-size:18px}:is(#artworks,#story-grid){padding:14px;gap:12px 10px;grid-template-columns:repeat(2,minmax(0,1fr))}:is(#artworks,#story-grid) img{height:auto;aspect-ratio:4/3}:is(#artworks,#story-grid) strong{font-size:12px;padding:8px 5px 10px}}
@media(prefers-reduced-motion:reduce){:is(#artworks,#story-grid) :is(button,:where(a[data-navigation-link])){transition:none}}

#full svg{display:block;margin:auto;pointer-events:none}

.header-tools #exit{display:grid;place-items:center;line-height:1;flex-shrink:0}.header-tools #exit svg{display:block;pointer-events:none}

/* Preserve each complete thumbnail and caption inside the scrolling grid. */
:is(#artworks,#story-grid){grid-auto-rows:max-content;align-content:start;flex:1 1 auto}:is(#artworks,#story-grid) :is(button,:where(a[data-navigation-link])){min-height:0;height:auto;align-self:start}:is(#artworks,#story-grid) strong{flex:0 0 auto;min-height:3.9em;color:#f0eee5;white-space:normal;overflow:visible;font-size:13px;line-height:1.45}:is(#artworks,#story-grid) :is(button,:where(a[data-navigation-link]))[aria-current="true"] strong{color:#efd49e}@media(max-width:600px){:is(#artworks,#story-grid) strong{font-size:12px}}


#stories>span{margin-left:12px;opacity:.65}#story-grid .story-choice>span{display:block;padding:12px}#story-grid .story-choice strong{padding:0}#story-grid .story-choice small{font-size:10px}.bottom nav{gap:6px}.bottom nav #arts,.bottom nav #stories{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:38px;padding:8px 14px;border:1px solid #ffffff20;border-radius:24px;background:#ffffff08;color:#e3e9e9;font-size:13px;white-space:nowrap}.bottom nav #arts>span,.bottom nav #stories>span{margin:0;opacity:.65;font-size:12px;min-width:12px}.bottom nav #arts[aria-expanded=true],.bottom nav #stories[aria-expanded=true]{background:#dfc48c;border-color:#dfc48c;color:#12222a}.bottom nav #arts:hover,.bottom nav #stories:hover{background:#ffffff15}.bottom nav .zoom{margin:0 4px}@media(max-width:600px){.bottom nav{gap:3px;padding:5px}.bottom nav #arts,.bottom nav #stories{padding:8px 10px;gap:6px}.bottom nav .zoom{margin:0}}
/* Restrained shared viewer controls and collection sheets. */
.bottom nav{gap:2px;padding:5px 8px;border-color:#ffffff18;box-shadow:0 4px 18px #0002;background:#12232bea}.bottom nav #arts,.bottom nav #stories{border:0;background:transparent;padding:7px 11px;min-height:36px;gap:7px;border-radius:18px;font-size:12px}.bottom nav #arts>span,.bottom nav #stories>span{font-size:11px;opacity:.55}.bottom nav #arts[aria-expanded=true],.bottom nav #stories[aria-expanded=true]{background:#ffffff14;color:#f0eee5}.bottom nav .zoom{margin:0 3px}.bottom nav :is(button,:where(a[data-navigation-link])){font-size:12px}.bottom nav #previous,.bottom nav #next,.bottom nav #full{min-width:32px;padding:7px}.bottom .hint{font-size:10px;opacity:.7}
:is(#art-panel,#story-panel){padding:18px;width:min(700px,calc(100% - 32px));border:1px solid #ffffff18;border-radius:14px;background:#102129f5;box-shadow:0 12px 35px #0004;max-height:calc(100% - 130px)}:is(#art-panel,#story-panel) .panel-heading{gap:12px;margin-bottom:16px}:is(#art-panel,#story-panel) .panel-heading h2{font-size:21px;margin:0}:is(#art-panel,#story-panel) .panel-heading small{font-size:9px;letter-spacing:1.2px;margin-bottom:6px}:is(#art-panel,#story-panel) .panel-heading :is(button,:where(a[data-navigation-link])){border:0;background:transparent;padding:6px;min-width:36px;min-height:36px}:is(#artworks,#story-grid){gap:16px}:is(#artworks,#story-grid) :is(button,:where(a[data-navigation-link])){border:0;background:transparent;border-radius:6px}:is(#artworks,#story-grid) :is(button,:where(a[data-navigation-link])):hover{background:#ffffff08}:is(#artworks,#story-grid) strong{font:13px/1.4 system-ui,sans-serif;padding:10px 2px}:is(#artworks,#story-grid) img{border-radius:5px}#story-grid .story-choice>span{padding:10px 2px}#story-grid .story-choice small{font-size:9px;letter-spacing:.6px;margin-bottom:5px}@media(max-width:600px){.bottom nav #arts,.bottom nav #stories{padding:8px;min-height:44px}.bottom nav #previous,.bottom nav #next,.bottom nav #full{min-width:30px}.bottom nav .zoom{margin:0}:is(#art-panel,#story-panel){padding:14px}}
.bottom nav{display:flex;align-items:center;gap:12px}.viewer-content-controls,.viewer-view-controls{display:flex;align-items:center;gap:3px}.viewer-content-controls{padding-right:12px;border-right:1px solid #ffffff25}.bottom nav #arts,.bottom nav #stories{background:#ffffff0b}.bottom nav #hotspots{position:static;inset:auto;display:inline-flex;align-items:center;justify-content:center;width:34px;height:36px;min-height:36px;min-width:34px;padding:6px;border:0;background:transparent;box-shadow:none;font-size:17px}.bottom nav #hotspots[aria-pressed=false]{opacity:.45}.bottom nav #hotspots:hover{background:#ffffff12}@media(max-width:600px){.bottom nav{flex-wrap:wrap;gap:3px;border-radius:20px}.viewer-content-controls{justify-content:center;border:0;padding:0;width:100%}.viewer-view-controls{justify-content:center;width:100%}.bottom nav #hotspots{height:44px;min-height:44px}}
.transition-art-backdrop{position:absolute;inset:0;background:#081219;z-index:1;pointer-events:none;overflow:hidden}.transition-art-backdrop>.transition-art{background:transparent}

/* Related stories occupy a dedicated first row; remaining stories follow. */
#story-grid {display:flex;flex-direction:column;gap:24px}
#story-grid .story-group {flex:none;min-width:0}
#story-grid .story-group h3 {margin:0 0 12px;font:500 14px/1.4 system-ui,sans-serif;color:#bacbd1}
#story-grid .story-row {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
#story-grid .is-featured {padding-bottom:20px;border-bottom:1px solid #dfc48c40}
#story-grid .is-featured h3 {color:#dfc48c}
#story-grid .is-featured .story-choice {background:#dfc48c0d;border:1px solid #dfc48c80;padding:8px}
#story-grid .story-choice strong {padding:10px 3px;min-height:0}
/* Symmetric columns keep the title anchored to the viewport in both modes. */
header{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr);height:94px;gap:20px}
header .brand{grid-column:1;grid-row:1}
header .heading{grid-column:2;grid-row:1;min-width:0;text-align:center}
header .heading h1{font-size:clamp(20px,1.5vw,28px);line-height:1.2;overflow-wrap:anywhere;margin:7px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
header .header-tools{grid-column:3;grid-row:1;justify-self:end;gap:12px}
header #back{flex-shrink:0;min-height:44px;padding:10px 14px;border:1px solid #dfc48c;border-radius:24px;background:#dfc48c;color:#10232c;font-size:13px;white-space:nowrap}
header #back:hover{background:#eed7aa}
.header-tools #exit{display:flex;gap:7px;width:auto;height:44px;min-height:44px;padding:8px 10px;border-radius:8px;background:transparent;border-color:transparent;font-size:12px;white-space:nowrap;color:#b8c7cc}
.header-tools #exit:hover{background:#ffffff0d;color:#fff}
header .header-left{grid-column:1;grid-row:1;display:flex;align-items:center;gap:24px}
header .header-left .brand{flex-shrink:0}
@media(max-width:1280px){
 header{height:150px;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:60px 1fr;gap:8px 12px;padding:10px 16px}
 header .brand{display:block;font-size:15px}
 header .brand i{font-size:22px}
 header .header-tools{grid-column:2;grid-row:1;gap:8px}
 header .heading{grid-column:1/-1;grid-row:2;text-align:center;align-self:center}
 header .heading h1{font-size:20px;margin-top:5px}
 #stage{height:calc(100dvh - 150px)}
}
@media(max-width:600px){
 #story-grid .story-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 header{padding:8px 12px}
 header:has(#back:not([hidden])) .header-left .brand{display:none}
 header:has(#back:not([hidden])) .header-left{display:none}
 header:has(#back:not([hidden])) .header-tools{grid-column:1/-1;justify-self:stretch;justify-content:space-between}
 header #back{font-size:12px;padding:10px 12px}
 .header-tools #exit{font-size:11px;padding:8px 4px;gap:4px}
 header .heading h1{font-size:18px}
}

/* Compact viewer actions, with a distinct primary return action. */
header .header-tools #back,header .header-tools #exit{display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border-radius:50%;transition:background .16s,border-color .16s}
header .header-tools #exit{border:1px solid #a9bfc74d;background:#142831}
header .header-tools #exit:hover{border-color:#a9bfc7;background:#29424b}
header .header-tools svg{display:block;pointer-events:none}
@media(max-width:600px){
 header:has(#back:not([hidden])) .header-left,header:has(#back:not([hidden])) .header-left .brand{display:block}
 header:has(#back:not([hidden])) .header-tools{grid-column:2;justify-self:end;justify-content:flex-end}
 header .header-tools{gap:8px}
}
@media(prefers-reduced-motion:reduce){header .header-tools #back,header .header-tools #exit{transition:none}}

/* Give the map and navigation actions distinct breathing room. */
header .header-tools{gap:20px}
header .header-tools .mini-trigger{margin-right:16px}
header .header-tools #exit{margin-left:8px}
@media(max-width:600px){
 header .header-tools{gap:12px}
 header .header-tools .mini-trigger{margin-right:6px}
 header .header-tools #exit{margin-left:0}
}

/* Preserve minimum pointer targets even in the compact mobile toolbar. */
.bottom nav #minus,.bottom nav #plus{min-width:28px;min-height:36px}

/* One exit position: back in gigapixel, close in panorama. */
header .header-tools #back{background:#142831;color:#b8c7cc;border:1px solid #a9bfc74d;margin-left:8px}
header .header-tools #back:hover{background:#29424b;color:#fff;border-color:#a9bfc7}
@media(max-width:600px){header .header-tools #back{margin-left:0}}
#close-map{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:6px}
.viewer-view-controls{flex-wrap:wrap;justify-content:center}
header .heading h1{-webkit-line-clamp:unset;overflow:visible}
body{display:flex;flex-direction:column;min-height:100dvh}
header{height:auto;min-height:94px;flex-shrink:0}
#stage{flex:1;min-height:240px}
@media(max-width:1280px){header{min-height:150px;grid-template-rows:minmax(60px,auto) auto}}
/* Leave room for fractional transforms without falling below a 24px target. */
.art-spot{width:28px;height:28px;min-width:28px;min-height:28px}

#pano:focus-visible,#giga .openseadragon-canvas:focus-visible{outline:2px solid #e1c793;outline-offset:-3px}

/* Mobile: two intentional rows; navigation never strands a single :is(button,:where(a[data-navigation-link])). */
#status{top:50%;left:50%;transform:translate(-50%,-50%);width:max-content;max-width:calc(100% - 32px);text-align:center;line-height:1.5}
@media(max-width:600px){
 header{min-height:112px;padding:8px 12px;gap:6px;grid-template-rows:auto auto}
 header .heading h1{font-size:20px;margin-top:3px}
 header .mini-trigger{width:68px;height:36px}
 .bottom{padding:24px 8px max(8px,env(safe-area-inset-bottom))}
 .bottom nav{display:flex;flex-direction:column;gap:4px;padding:5px 6px;border-radius:16px;width:100%;max-width:420px}
 .viewer-content-controls{width:100%;gap:8px}
 .bottom nav .viewer-view-controls{display:grid;grid-template-columns:32px 28px minmax(72px,1fr) 28px 32px 32px 32px;gap:1px;width:100%;flex-wrap:nowrap}
 .bottom nav .zoom{display:contents}
 .bottom nav .viewer-view-controls :is(button,:where(a[data-navigation-link])){width:100%;min-width:0;height:44px;min-height:44px;padding:4px;font-size:12px}
 .bottom nav #hotspots{width:100%;min-width:0;height:44px}
 .bottom nav #full{font-size:20px}
 .bottom nav #previous{grid-column:1;grid-row:1}
 .bottom nav #minus{grid-column:2;grid-row:1}
 .bottom nav #reset{grid-column:3;grid-row:1;white-space:normal;line-height:1.15}
 .bottom nav #plus{grid-column:4;grid-row:1}
 .bottom nav #hotspots{grid-column:5;grid-row:1}
 .bottom nav #full{grid-column:6;grid-row:1}
 .bottom nav #next{grid-column:7;grid-row:1}
 .bottom .hint{display:none}
}
@media(max-width:600px){
 body{height:100dvh;min-height:0;overflow:hidden}
 #stage{height:auto;min-height:0}
 #giga{bottom:116px}
}
/* 44px touch controls without a third row, including at 320px. */
@media(max-width:600px){
 .bottom nav{display:grid;grid-template-columns:44px minmax(72px,1fr) repeat(3,44px);gap:2px}
 .bottom nav .viewer-content-controls{grid-column:2/5;grid-row:1;min-width:0;gap:2px}
 .bottom nav .viewer-view-controls{display:contents}
 .bottom nav #previous{grid-column:1;grid-row:1;min-width:44px}
 .bottom nav #next{grid-column:5;grid-row:1;min-width:44px}
 .bottom nav #minus{grid-column:1;grid-row:2;min-width:44px}
 .bottom nav #reset{grid-column:2;grid-row:2}
 .bottom nav #plus{grid-column:3;grid-row:2;min-width:44px}
 .bottom nav #hotspots{grid-column:4;grid-row:2;min-width:44px}
 .bottom nav #full{grid-column:5;grid-row:2;min-width:44px}
 .bottom nav .viewer-content-controls :is(button,:where(a[data-navigation-link])){min-width:44px;padding:8px 6px}
}
@media(max-width:600px){#giga{bottom:var(--giga-toolbar-space,116px)}.bottom nav .viewer-view-controls :is(button,:where(a[data-navigation-link])){height:auto;min-height:44px;overflow-wrap:anywhere}}
@media(pointer:coarse) and (min-width:601px){.bottom nav :is(button,:where(a[data-navigation-link])),.bottom nav #minus,.bottom nav #plus,.bottom nav #hotspots{min-width:44px;min-height:44px;height:auto}}
/* Mobile keeps the title and back/close action, without a miniature map. */
@media(max-width:600px){header .header-tools .mini-trigger{display:none}}
/* Keep the original desktop composition in narrower desktop preview windows. */
@media(min-width:701px){
 header{height:94px;min-height:94px;grid-template-columns:minmax(110px,1fr) minmax(0,2fr) minmax(170px,1fr);grid-template-rows:1fr;align-items:center;gap:16px;padding:12px 24px}
 header .header-left,header .brand{grid-column:1;grid-row:1}
 header .heading{grid-column:2;grid-row:1;align-self:center;text-align:center}
 header .heading h1{font-size:clamp(20px,1.5vw,28px);line-height:1.2;margin:7px 0 0}
 header .header-tools{grid-column:3;grid-row:1;align-self:center;justify-self:end;gap:12px}
 header .header-tools .mini-trigger{margin-right:0}
 #stage{height:calc(100dvh - 94px)}
}
@media(min-width:701px) and (max-width:900px){header{padding:12px 16px;gap:10px}header .mini-trigger{width:90px;height:48px}}
/* Navigation is provided by panorama links and wheel gestures. */
.bottom nav #previous,.bottom nav #next{display:none!important}
@media(max-width:600px){.bottom nav .viewer-view-controls{grid-template-columns:28px minmax(72px,1fr) 28px 32px 32px}}

/* View direction around the active point, without intercepting map interactions. */
.map-bearing{position:absolute;width:34px;height:34px;transform:translate(-50%,-50%) rotate(var(--bearing,0deg));pointer-events:none;z-index:2;border-radius:50%;background:conic-gradient(from calc(var(--aperture,90deg) / -2),#eddaa2dd 0deg,#eddaa2dd var(--aperture,90deg),transparent var(--aperture,90deg));mask:radial-gradient(circle,transparent 48%,#000 51%,#000 65%,transparent 69%);filter:drop-shadow(0 0 2px #e8ce8680)}
#map .map-bearing{width:58px;height:58px;z-index:3}
#mini-dot{z-index:4}
.map-bearing{width:42px;height:42px;background:none;mask:none;filter:none;z-index:5}
.map-bearing svg{display:block;width:100%;height:100%;overflow:visible}
.map-bearing path{fill:none;stroke:#ffe7a0;stroke-width:5;stroke-linecap:round;filter:drop-shadow(0 1px 2px #000)}
#map .map-bearing{width:64px;height:64px;z-index:5}

.map-bearing{width:30px;height:30px}.map-bearing path{stroke:#ddcc98;stroke-width:3;opacity:.8;filter:none}#map .map-bearing{width:48px;height:48px}
#story-reader{position:absolute;z-index:10;left:24px;bottom:120px;width:min(350px,calc(100% - 48px));padding:20px;background:#10232cf2;border:1px solid #ffffff25;border-radius:12px;box-shadow:0 8px 32px #0004}
#story-reader h2{font:22px Georgia;margin:0 0 10px}#story-reader p{font-size:14px;line-height:1.5}#story-reader div{display:flex;gap:8px}#story-reader :is(button,:where(a[data-navigation-link])){padding:8px 12px}

#ruler{padding:0 16px}#measure-layer{position:absolute;inset:0;z-index:5;cursor:crosshair;touch-action:none}#measure-layer svg{width:100%;height:100%;pointer-events:none}#measure-layer line{stroke:white;stroke-width:1.5;stroke-dasharray:4 3;filter:drop-shadow(0 1px 2px black)}#measure-layer circle{fill:#ddcc98;stroke:#172b35}#measure-layer output{position:absolute;background:#172b35ee;color:white;padding:7px 12px;border-radius:5px;font:14px system-ui;pointer-events:none}
#ruler{padding:0 16px}#measure-layer{position:absolute;inset:0;z-index:5;cursor:crosshair;touch-action:none}#measure-layer svg{width:100%;height:100%;pointer-events:none}#measure-layer line{stroke:white;stroke-width:1.5;stroke-dasharray:4 3;filter:drop-shadow(0 1px 2px black)}#measure-layer circle{fill:#ddcc98;stroke:#172b35}#measure-layer output{position:absolute;background:#172b35ee;color:white;padding:7px 12px;border-radius:5px;font:14px system-ui;pointer-events:none}
#measure-layer{z-index:1}.bottom nav #ruler{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:8px;position:relative}.bottom nav #ruler[aria-pressed=true]{color:#ddcc98;background:#ffffff14}.bottom nav #ruler:is(:hover,:focus-visible)::after{content:attr(aria-label);position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);white-space:nowrap;padding:7px 10px;border-radius:5px;background:#142831;color:#f0eee5;font:12px system-ui;pointer-events:none}@media(max-width:600px){.bottom nav #ruler{grid-column:4;grid-row:2}}

.pano-spot .spot-icon{display:flex;align-items:center;justify-content:center}.pano-spot{box-shadow:0 2px 10px #0003}.bottom nav #hotspots[aria-pressed=true]{color:#e4d1a3}.bottom nav #hotspots svg{display:block;flex-shrink:0}

#guide-invite{position:absolute;z-index:3;left:50%;bottom:calc(var(--giga-toolbar-space,100px) + 18px);transform:translateX(-50%);border-radius:24px;background:#152932ee;color:#f0eee5;padding:11px 20px;box-shadow:0 4px 20px #0003;transition:opacity .3s}#guide-invite.quiet{opacity:.65}#guide-invite:hover{opacity:1}#story-reader.guided-story{bottom:calc(var(--giga-toolbar-space,100px) + 18px);width:min(340px,calc(100% - 32px));left:16px;padding:22px;border-radius:14px}#story-reader.guided-story h2{padding-right:20px}#story-reader.guided-story p{line-height:1.6}#story-reader .guide-close{position:absolute;right:8px;top:6px;border:0;background:transparent;font-size:23px}#story-reader [data-next]{margin-left:auto;background:#e5e4d9;color:#142831}#story-reader small{padding-right:30px}
#story-reader.wheel-story{left:50%;transform:translateX(-50%);bottom:calc(var(--giga-toolbar-space,100px) + 16px);width:min(580px,calc(100% - 32px));padding:18px 32px 12px;border:0;border-radius:0;background:transparent;box-shadow:none;text-align:center;text-shadow:0 2px 5px #000,0 0 22px #000}#story-reader.wheel-story::before{content:"";position:absolute;inset:-12px -25px;z-index:-1;background:radial-gradient(ellipse,#081219b0,transparent 72%);pointer-events:none}#story-reader.wheel-story h2{font:25px Georgia;margin:0 0 8px}#story-reader.wheel-story p{font:14px/1.5 system-ui;margin:0 auto 10px;max-width:490px}#story-reader.wheel-story small{font:11px system-ui;letter-spacing:0;color:#eee;margin:8px 0 0;padding:0}#story-reader .guide-track{display:flex;justify-content:center;gap:6px}#story-reader .guide-track :is(button,:where(a[data-navigation-link])){min-height:24px;width:36px;padding:10px 0;background:transparent;border:0;border-radius:0;position:relative}#story-reader .guide-track :is(button,:where(a[data-navigation-link]))::after{content:"";display:block;height:2px;background:#ffffff60}#story-reader .guide-track :is(button,:where(a[data-navigation-link]))[aria-current="step"]::after{background:#edd8a6}#story-reader.wheel-story .guide-close{right:-3px;top:0;text-shadow:0 1px 4px #000}#story-reader.wheel-story.guide-paused .guide-copy{opacity:.55}#story-reader [data-resume]{margin-top:10px;border-radius:24px;font-size:12px}

.bottom nav #guide-invite{position:static;transform:none;box-shadow:none;opacity:1;padding:8px 12px;border:0;border-radius:22px;background:#ffffff0b;font:12px system-ui;white-space:nowrap}
#story-reader.wheel-story small{display:none}
#story-reader.wheel-story{padding:12px 24px;bottom:calc(var(--giga-toolbar-space,100px) + 12px)}
@media(max-width:600px){.bottom nav #guide-invite{grid-column:1/-1}}

#stories #story-nudge{position:absolute;bottom:calc(100% + 14px);left:0;width:230px;white-space:normal;padding:12px 15px;border:1px solid #e4d1a355;border-radius:10px;background:#142831f5;box-shadow:0 6px 24px #0004;color:#f0eee5;font:13px/1.45 system-ui;text-align:left;pointer-events:none}#stories #story-nudge::after{content:'';position:absolute;bottom:-5px;left:26px;width:8px;height:8px;background:#142831;transform:rotate(45deg);border-right:1px solid #e4d1a355;border-bottom:1px solid #e4d1a355}

#stories #story-nudge{font:12px/1.4 system-ui;width:210px;padding:9px 12px;border-radius:8px}
#stage:has(#story-panel:not([hidden])) #story-reader.wheel-story,
#stage:has(#art-panel:not([hidden])) #story-reader.wheel-story,
#stage:has(#point-panel:not([hidden])) #story-reader.wheel-story{visibility:hidden;pointer-events:none}
#stories[aria-expanded=true] #story-nudge{display:none}

.bottom nav #story-nudge{position:absolute;bottom:calc(100% + 12px);transform:translateX(-50%);width:auto;min-width:54px;min-height:36px;height:auto;white-space:nowrap;padding:8px 14px;border:1px solid #e4d1a366;border-radius:9px;background:#e4d1a3;color:#142831;box-shadow:0 4px 18px #0003;font:12px/1.4 system-ui;pointer-events:auto;z-index:4}
.bottom nav #story-nudge:hover{background:#f0e4c4}
.bottom nav #story-nudge::after{content:'';position:absolute;bottom:-4px;left:calc(50% - 4px);width:8px;height:8px;background:inherit;transform:rotate(45deg)}

.bottom nav #story-nudge{display:flex;align-items:center;gap:14px;width:260px;max-width:calc(100vw - 32px);white-space:normal;padding:11px 13px;background:#142831f5;color:#f0eee5;text-align:left;font:12px/1.4 system-ui}.bottom nav #story-nudge span{flex:1}.bottom nav #story-nudge strong{flex-shrink:0;padding:6px 10px;border-radius:6px;background:#e4d1a3;color:#142831;font-weight:500}.bottom nav #story-nudge:hover{background:#203740}.bottom nav #story-nudge:hover strong{background:#f0e4c4}

.bottom nav{position:relative}
@media(max-width:600px){
 .bottom nav .viewer-content-controls{grid-column:1/-1;justify-content:center}
 #story-reader.wheel-story{padding:12px 16px;bottom:calc(var(--giga-toolbar-space,116px) + 8px);background:#0b1922ed;text-shadow:none;max-height:none;overflow:visible}
 #story-reader.wheel-story::before{display:none}
 #story-reader.wheel-story h2{font-size:20px}
 #story-reader.wheel-story p{font-size:14px;line-height:1.5}
}
#story-reader .guide-copy{display:block}

#artworks{display:flex;flex-direction:column;gap:24px}#artworks .art-group{flex:none;min-width:0}#artworks h3{margin:0 0 12px;font:500 14px/1.4 system-ui;color:#bacbd1}#artworks .art-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}@media(max-width:600px){#artworks .art-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Mobile story toolbar: two content tabs above a stable playback row. */

/* Desktop stories keep both groups in normal flow, inside the toolbar. */


/* Story toolbar: one layout owner, no absolute positioning or reserved hidden space. */
.bottom nav.story-active{display:flex;align-items:center;gap:12px;width:max-content;max-width:calc(100vw - 32px)}
.bottom nav.story-active .viewer-view-controls{display:none!important}
.bottom nav.story-active .viewer-content-controls{border:0;padding:0;width:auto;flex:none}
.bottom nav.story-active #story-dock{position:static;display:flex;align-items:center;gap:8px;width:auto;min-height:44px;margin:0;padding:0 0 0 12px;border-left:1px solid #ffffff25;color:#e3e9e9}
#story-dock .story-position{font:12px system-ui;white-space:nowrap}
#story-dock .guide-track{display:flex;gap:0}
.bottom nav #story-dock .guide-track :is(button,:where(a[data-navigation-link])){width:32px;min-width:32px;min-height:44px;padding:10px 4px;border:0;border-radius:0;background:transparent}
#story-dock .guide-track :is(button,:where(a[data-navigation-link]))::after{content:"";display:block;height:2px;background:#ffffff50}
#story-dock .guide-track :is(button,:where(a[data-navigation-link]))[aria-current="step"]::after,#story-dock .guide-track :is(button,:where(a[data-navigation-link])).is-complete::after{background:#e4d1a3}
.bottom nav #story-dock .guide-close{display:flex;align-items:center;justify-content:center;flex:none;width:44px;min-width:44px;height:44px;padding:0;border:1px solid #526369;border-radius:50%;background:transparent}
#story-dock .guide-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;pointer-events:none}
.bottom nav #story-dock [data-resume]{min-height:44px;margin:0;padding:8px 14px;border:0;border-radius:8px;background:#ffffff0b;font-size:12px;white-space:nowrap}
#story-dock.story-paused .guide-track,#story-dock.story-paused .story-position{display:none}
@media(max-width:600px){
 .bottom nav.story-active{flex-direction:column;align-items:stretch;gap:0;padding:8px 12px;width:100%;min-height:116px}
 .bottom nav.story-active .viewer-content-controls{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:4px;padding-bottom:8px;border-bottom:1px solid #ffffff20}
 .bottom nav.story-active .viewer-content-controls :is(button,:where(a[data-navigation-link])){width:100%;min-height:44px;border-radius:8px;justify-content:center}
 .bottom nav.story-active #story-dock{display:grid;grid-template-columns:minmax(68px,1fr) auto 44px;gap:8px;width:100%;min-height:52px;padding:8px 0 0;border:0}
 #story-dock .story-position{grid-column:1;text-align:left}
 #story-dock .guide-track{grid-column:2}
 #story-dock .guide-close{grid-column:3;grid-row:1;justify-self:end}
 #story-dock [data-resume]{grid-column:1/3;grid-row:1;justify-self:start}
}

/* Keep the current location above neighbouring pins; interaction takes priority. */
#map .map-pin{z-index:6}
#map .map-pin.active{z-index:7}
#map .map-pin:focus-visible{z-index:8}
#map .map-pin:hover{z-index:9}

/* Orientation remains visible above all pins without intercepting clicks. */
#map .map-bearing{z-index:10;pointer-events:none}

a[data-navigation-link]{text-decoration:none}a.art-spot,a.map-pin{display:grid;place-items:center}
/* Anchor hotspots keep their symbol centered independently of text metrics. */
.art-spot>.spot-icon{position:absolute;left:50%;top:50%;margin:0;transform:translate(-50%,-50%);line-height:1}
.art-spot>.spot-icon svg{display:block}

.work-spot .spot-icon{width:16px;height:16px;border:0;border-radius:0;color:#f1d49a}