:root { --blue: #075697; --med-blue: #3671ac; --yellow: #ffd700; --gray: #dddddd; --white: #ffffff; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body, .leaflet-popup-content { font-family: "Open Sans", system-ui, sans-serif; }
q { font-family: "Nunito", system-ui, sans-serif; font-size: 1.0625em; }
h1, h2, h3 { margin: 0; font-size: 1em; font-weight: 600; }
p { margin: .5em 0; }
header { padding: 1em 2vw; background: var(--blue); color: var(--white); display: flex; align-items: center; font-size: min(2rem, 5vw); }
header h1 { margin: 0 2vw; padding: .5em 2vw; border-left: 2px solid var(--gray); flex-grow: 1; line-height: 1; }
header h1 small { font-size: .5em; font-weight: 300; }
header img { height: 2.5em; width: auto; }
main { padding: .5em 3vw; }
#map { height: 60vw; max-height: 400px; margin: 1em 0; border: 2px solid var(--med-blue); }
details { margin: 1em 0; padding: 0 3vw; border-left: 6px solid var(--med-blue); }
details:first-of-type { border-color: var(--yellow); }
summary { margin: 0; padding: .5em 0; font-size: min(1.5em, 5vw); }
summary h2 { display: inline; color: var(--blue); }
article { display: flex; flex-flow: row wrap; column-gap: 2vw; row-gap: 1vw; }
figure { margin: .5em 0; flex: 1 1 40vw; }
figure.full-width { flex: 1 0 100%; }
figure img, figure iframe { display: block; width: 100%; min-width: 280px; border: none; border-radius: 6px; }
figure iframe { height: auto; aspect-ratio: 4/3; }
figure.full-width iframe { height: 75vw; min-height: 240px; max-height: 540px; }
figure p:only-child { margin: 0; }
b { font-weight: 600; }
abbr { display: inline-block; text-decoration: none; }
var { font-style: normal; font-weight: normal; }
#controls { float: right; position: relative; top: .75em; left: -3vw; font-size: min(1.5em, 5vw); }
button { font: inherit; }
button[aria-expanded="false"]::after { content: "▶"; }
button[aria-expanded="true"]::after { content: "▼"; }
dialog { max-width: none; max-height: none; width: 100vw; height: 100vh; margin: 0; padding: 0; border: 0; outline: 0; overflow: hidden; background: transparent; }
dialog > img { display: block; width: 98vw; height: 98vh; object-fit: contain; margin: 1vh auto; }
dialog::backdrop { background: black; }
aside { padding: .5em; border-radius: 3px; background: var(--yellow); text-align: center; }
.avoid-wrap, b { display: inline-block; }