/* 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. */
#map1855, #map1875 { height: auto; aspect-ratio: 1.5;
       border: 1px solid var(--rule); background: var(--tint); }

/* the era headings are peers, not a hierarchy -- 1875 reads like 1855 */
h2.era { font-size: var(--t-xxl); margin: var(--s5) 0 var(--s3); }

.ringlab { font: 10px/12px var(--sans); color: var(--muted);
       text-align: center; white-space: nowrap; background: none;
       border: none; text-shadow: 0 0 3px var(--tint), 0 0 3px var(--tint); }
.tt-reset a { font-size: 15px; }

.maplegend .tt-dal   { background: color-mix(in srgb, var(--d-dallas) 34%, transparent); border-color: var(--d-dallas); }
.maplegend .tt-dal75 { background: color-mix(in srgb, var(--d-dallas) 28%, transparent); border-color: var(--d-dallas); }
.maplegend .tt-reu   { background: color-mix(in srgb, var(--d-colony) 34%, transparent); border-color: var(--d-colony-dark); }
.maplegend .tt-ghost { background: color-mix(in srgb, var(--d-dallas) 14%, transparent);
       border-color: var(--d-dallas); border-style: dashed; }
.maplegend .tt-hord  { background: color-mix(in srgb, var(--d-sold) 24%, transparent);
       border-color: var(--d-horde); border-style: dashed; }
.maplegend .tt-core  { background: color-mix(in srgb, var(--d-colony) 13%, transparent); border-color: var(--d-colony); }
.maplegend .tt-res   { background: color-mix(in srgb, var(--d-quiet) 07%, transparent);
       border-color: var(--d-quiet); border-style: dashed; }