/* twotowns.html: two maps, one frame. Each box carries the frame's own
   aspect (ASPECT in twotowns.js) so fitBounds fills it edge to edge with
   no padding. */
/* map.css styles #map; these boxes carry their own ids, so the chrome is
   repeated here alongside the frame's aspect */
#map1855, #map1875 { height: auto; aspect-ratio: 1.5;
       border: 1px solid #c9c0ae; background: #ece5d6;
       box-shadow: 0 1px 6px rgba(60,45,30,.18); }

/* the era headings are peers, not a hierarchy -- 1875 reads like 1855 */
h2.era { font-size: 1.9rem; margin: 2.6rem 0 1rem; border: 0; padding: 0; }

.ringlab { font: 10px/12px Georgia, serif; color: #6b5a45;
       text-align: center; white-space: nowrap; background: none;
       border: none; text-shadow: 0 0 3px #ece5d6, 0 0 3px #ece5d6; }
.tt-reset a { font-size: 15px; }

.maplegend .tt-dal   { background: rgba(47,93,122,.34); border-color: #1f4a63; }
.maplegend .tt-dal75 { background: rgba(47,93,122,.28); border-color: #1f4a63; }
.maplegend .tt-reu   { background: rgba(122,59,46,.34); border-color: #5f2a1e; }
.maplegend .tt-ghost { background: rgba(47,93,122,.14);
       border-color: #1f4a63; border-style: dashed; }
.maplegend .tt-hord  { background: rgba(168,135,26,.24);
       border-color: #8a6a12; border-style: dashed; }
.maplegend .tt-core  { background: rgba(122,59,46,.13); border-color: #7a3b2e; }
.maplegend .tt-res   { background: rgba(138,130,114,.07);
       border-color: #8a8272; border-style: dashed; }