:root{font-family:Arial,Helvetica,sans-serif;color:#261914;background:#fff}*{box-sizing:border-box}body{margin:0}header{height:94px;padding:18px 32px;display:flex;align-items:center;justify-content:space-between;gap:18px;border-bottom:3px solid #a52714}h1{font-size:clamp(22px,3vw,32px);letter-spacing:-1px;margin:0;line-height:1.15}h1 span{color:#a52714}header p{font-size:14px;margin:6px 0 0;color:#645653}.instruction{font-size:16px;margin:0}main{position:relative;height:calc(100dvh - 94px);min-height:300px}#map{width:100%;height:100%;background:#dbe8ed}#status{position:absolute;z-index:1000;bottom:35px;left:50%;transform:translateX(-50%);padding:12px 18px;border-radius:8px;background:white;box-shadow:0 3px 15px #0002;font-size:14px;max-width:90%;text-align:center}#status[hidden]{display:none}.place-icon{background:none;border:none}.pin{display:grid;place-items:center;width:27px;height:27px;border:2px solid white;border-radius:50%;background:#a52714;color:white;box-shadow:0 1px 5px #0005;font-size:21px;line-height:1}.pin.origin{font-size:15px}.place-icon:focus-visible{outline:3px solid #191919;outline-offset:4px}.leaflet-popup-content-wrapper{border-radius:10px}.leaflet-popup-content{width:min(290px,65vw)!important;max-height:55dvh;overflow:auto;font-size:16px;line-height:1.5;margin:18px}.story h2{font-size:20px;margin:0 0 8px;line-height:1.2}.story p{white-space:pre-line;margin:10px 0}.story img{display:block;width:100%;height:auto;max-height:230px;object-fit:contain;border-radius:4px;margin:12px 0}.story+.story{border-top:1px solid #e5dedb;margin-top:18px;padding-top:18px}.story .type{font-size:14px;color:#a52714;margin-bottom:5px}.leaflet-touch .leaflet-bar a{width:44px;height:44px;line-height:44px}.leaflet-control-attribution{font-size:12px!important}@media(max-width:600px){header{height:100px;padding:14px 18px;display:block}header p{font-size:14px}.instruction{margin-top:7px;font-size:14px}main{height:calc(100dvh - 100px)}h1{font-size:25px}.leaflet-popup-content{max-height:50dvh}}

/* Let the explanation wrap while keeping the map in the remaining screen. */
body{height:100dvh;display:flex;flex-direction:column}header{height:auto;flex:0 0 auto;min-height:112px;padding:20px 32px;gap:32px}header>div{flex:0 1 auto}header .instruction{font-size:16px;line-height:1.5;max-width:540px;margin:0;color:#51423e}main{height:auto;flex:1;min-height:260px}header>div>p{font-size:14px}@media(max-width:700px){header{padding:16px 18px;display:block;min-height:0}header .instruction{font-size:14px;line-height:1.45;margin-top:12px;max-width:none}main{height:auto;min-height:220px}h1{font-size:25px}}
