* { box-sizing: border-box; }
body { margin: 0; color: #1c2937; background: #f6f8fa; font: 15px/1.5 system-ui, sans-serif; }
main { display: grid; grid-template-columns: minmax(290px, 340px) 1fr; min-height: 100dvh; }
aside { padding: 28px; border-right: 1px solid #d7dfe7; }
.eyebrow { margin: 0; letter-spacing: .13em; font-size: .73rem; font-weight: 750; }
h1 { margin: 0; font-size: 3rem; line-height: 1.15; }
.subtitle { margin-top: 6px; color: #4a5c6e; }
#status { padding: 10px 12px; border-radius: 6px; background: #f9edd2; }
label { display: block; margin-top: 10px; font-weight: 700; }
select { width: 100%; margin-top: 5px; padding: 8px; font: inherit; }
section { border-top: 1px solid #d7dfe7; margin-top: 20px; padding-top: 8px; }
h2 { font-size: 1.05rem; margin-bottom: 4px; }
section p { margin: 5px 0 10px; }
ul { list-style: none; padding: 0; margin: 8px 0; }
li { margin: 5px 0; }
.swatch { display: inline-block; width: 13px; height: 13px; border-radius: 3px; margin-right: 8px; }
footer { margin-top: 22px; font-size: .82rem; }
a { color: #285482; }
#map { min-height: 520px; }
@media (width > 740px) {
  main { height: 100dvh; grid-template-rows: minmax(0, 1fr); }
  aside { overflow-y: auto; overscroll-behavior-y: contain; }
  #map { min-height: 0; }
}
@media (max-width: 740px) {
  main { display: flex; flex-direction: column; }
  #map { order: -1; min-height: 46dvh; }
  aside { border-right: 0; padding: 20px; }
}