:root{color-scheme:light;--paper:#f4f0e7;--ink:#423834;--muted:#77776e;--line:#c4c5ba}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,sans-serif}main{max-width:1920px;margin:auto}.stage{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--paper)}#map{display:block;width:100%;height:100%;touch-action:none;cursor:grab}#map.dragging{cursor:grabbing}#basemap,#geographic-labels,#scale-bar,#fixed-artwork{pointer-events:none}#fixed-artwork text,#geographic-labels text{user-select:none}.heritage-point{stroke:var(--paper);stroke-width:.5;transition:fill .38s ease,stroke .15s;outline:none;cursor:pointer}.heritage-point.hovered{stroke:var(--ink);stroke-width:1.4}.heritage-point.selected{stroke:#181c1b;stroke-width:1.8}.heritage-point.related{stroke:#423834;stroke-width:1}button,input,select,a{-webkit-tap-highlight-color:transparent}button{font:inherit;background:transparent;border:1px solid var(--line);border-radius:2px;color:var(--ink);cursor:pointer;padding:6px 12px}button:hover{background:#e8e2d7}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid #914c45;outline-offset:3px}button:disabled{opacity:.4}.view-tools{position:absolute;left:2.7%;top:17.8%;display:flex;align-items:center;gap:12px;color:var(--muted);font-size:clamp(10px,.75vw,14px);pointer-events:none}.view-tools button{pointer-events:auto;background:var(--paper)}.timeline{position:absolute;left:30%;bottom:6.5%;width:39%;font-size:clamp(10px,.85vw,15px);color:var(--ink)}.timeline-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:.83em;letter-spacing:.07em}.timeline output{font-family:Georgia,serif;font-size:1.7em;letter-spacing:0;white-space:nowrap}.timeline-controls{display:flex;gap:12px;align-items:center;margin-top:8px}.timeline button{min-width:63px;padding:6px 8px}.timeline input{width:100%;height:30px;margin:0;accent-color:#914c45;cursor:ew-resize}.timeline-ticks{position:relative;height:16px;margin-left:75px;font-size:.78em;color:var(--muted)}.timeline-ticks span{position:absolute;transform:translateX(-50%);white-space:nowrap}.timeline-ticks span:first-child{transform:none}.timeline-ticks span:last-child{transform:translateX(-100%)}.timeline p{font-size:.77em;line-height:1.45;margin:7px 0 0;color:var(--muted)}.tooltip,.details{position:absolute;z-index:4;background:rgba(250,247,240,.98);border:1px solid #c8c2b6;color:var(--ink);font-size:13px;line-height:1.45;box-shadow:0 3px 16px #42383412}.tooltip{pointer-events:none;max-width:290px;padding:11px 13px}.tooltip strong{font:18px Georgia,serif;display:block;margin-bottom:7px}.tooltip p{margin:3px 0}.tooltip .tip-note{margin-top:8px;color:var(--muted);font-size:11px}.details{width:min(355px,calc(100% - 24px));max-height:min(67vh,640px);overflow:auto;padding:16px;border-color:#75665b}.details .close{position:absolute;right:8px;top:6px;border:0;font-size:23px;padding:0 7px}.details .eyebrow{font-size:10px;color:var(--muted);letter-spacing:.08em;margin:0 22px 9px 0}.details h2{font:23px/1.16 Georgia,serif;margin:0 15px 12px 0}.details p{margin:8px 0}.details .component-name{font-size:12px;color:var(--muted)}.details dl{margin:12px 0}.details dt{font-size:10px;font-weight:bold;color:var(--muted);text-transform:uppercase;margin-top:12px;letter-spacing:.04em}.details dd{margin:3px 0;overflow-wrap:anywhere}.details a{color:#783f37;text-underline-offset:3px}.details select{font:12px Arial,sans-serif;max-width:100%;width:100%;padding:8px 4px;background:var(--paper);border:1px solid var(--line);color:var(--ink)}.details label{display:block;margin:12px 0 5px;font-size:11px;color:var(--muted)}.details .status{font-size:11px;color:#864f39}.mobile-hint{display:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}
@media(max-width:700px){.stage{overflow:visible;margin-bottom:160px}.view-tools{top:18%;font-size:10px}.view-tools span{display:none}.view-tools button{padding:4px 8px;font-size:10px}.timeline{left:5%;bottom:auto;top:calc(100% + 12px);width:90%;font-size:14px}.timeline p{font-size:11px}.timeline button{height:38px}.timeline input{height:40px}.timeline-ticks{height:18px}.timeline-heading{font-size:11px}.timeline-ticks .extra-tick{display:none}.mobile-hint{display:block;margin:0 18px 24px;font-size:12px;color:var(--muted);line-height:1.5}.details{position:fixed;left:12px!important;right:12px;top:auto!important;bottom:12px;max-height:58vh;width:auto;font-size:13px}.tooltip{display:none}.timeline output{font-size:22px}}
@media(prefers-reduced-motion:reduce){.heritage-point{transition:none}}
.details{max-height:min(64vh,580px)}
@media(max-width:700px){.details{max-height:58vh}}

/* Fit the existing artwork and controls to one viewport, without shrinking the UI. */
html,body{height:100%;overflow:hidden}
main{height:100vh;height:100dvh}
.stage{height:100%;aspect-ratio:auto}
.view-tools{font-size:clamp(12px,.75vw,14px);flex-direction:row;align-items:center;gap:12px;white-space:nowrap}
.view-tools span{display:inline}
.view-tools button,.timeline button{min-height:32px}
.timeline{font-size:clamp(13px,.85vw,15px)}
@media(max-width:700px){
  .stage{overflow:hidden;margin-bottom:0}
  .timeline{top:auto;bottom:72px;font-size:14px}
  .mobile-hint{position:fixed;left:18px;right:18px;bottom:12px;margin:0}
}