/* Lumen Painting — the areas pages (/areas and /areas/<slug>), linked only from them.
   The maps (the all-Ontario map and its Southern Ontario close-up, the Toronto and GTA map, the hero maps and the small
   locators) are inline SVG drawn by tools/areas_map3d.py; their colours are set in the SVG. This file sets the map box
   and its tabs, the names on the maps, the hover/focus lift, and the district, region and town lists. */

/* ---------- hub: one box with two maps (tabs). On wide screens the map's height follows the window's, so the whole
   box fits under the menu bar, and its key stands in a column beside it; on smaller screens the key is underneath. */
.m3d-sec { background: var(--primer); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.m3d-sec .sec-lead { max-width: 46em; }
.loc-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.mapbox { margin-top: 26px; border: 2px solid var(--ink); border-radius: var(--r); background: var(--primer); overflow: hidden; }
/* the tabs: the open one joins the map under it (no rule between them) and carries a signal-orange top edge */
.map-tabs { display: flex; background: var(--paper); }
.map-tabs button { flex: 1 1 0; min-height: 52px; padding: 10px 16px; border: 0; border-bottom: 2px solid var(--ink); background: transparent; color: var(--denim);
  font: 700 16px/1.2 var(--font); cursor: pointer; transition: background .15s, color .15s; }
.map-tabs button + button { border-left: 2px solid var(--ink); }
.map-tabs button:hover { background: var(--paper-2); color: var(--ink); }
.map-tabs button[aria-selected="true"] { background: var(--primer); color: var(--ink); font-weight: 800; border-bottom-color: transparent; box-shadow: inset 0 4px 0 var(--signal); }
.map-tabs button:focus-visible { outline: 3px solid var(--signal); outline-offset: -6px; }
.map-panel:focus-visible { outline: 3px solid var(--signal); outline-offset: -3px; }
.map-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; padding: 14px 20px 16px; border-top: 2px solid var(--ink); background: var(--primer); }
.map-foot-t { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--denim); }

/* the region key with the Ontario map: each region's small map (in its colour on the map) and name, a link to its list */
.om-key { list-style: none; display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 0 28px; margin: 0; padding: 0; }
.om-key a { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none; }
.rk-ic { display: block; width: 40px; height: 30px; flex: none; }
.rk-ic path { vector-effect: non-scaling-stroke; }
.om-key a:hover span, .om-key a.on span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ---------- the all-Ontario map (and its close-up of Southern Ontario, below 1100 px). Names carry their font size
   (set by areas_map3d.py for the room they were given); the letter-spacing here matches what it was measured with. */
.om-maps { position: relative; }
.om3d { display: block; width: 100%; height: auto; }
.om-in { display: none; border-top: 2px solid var(--ink); }
.om3d text { font-family: var(--font); pointer-events: none; text-anchor: middle; dominant-baseline: central; }
.om3d .ta-s { text-anchor: start; }
.om3d .ta-e { text-anchor: end; }
.om3d .lc { font-weight: 650; fill: var(--ink); paint-order: stroke; stroke: var(--primer); stroke-width: .26em; stroke-linejoin: round; }
.om3d .lc-h { font-weight: 850; letter-spacing: .06em; }
.om3d .lt { font-weight: 500; fill: var(--denim); paint-order: stroke; stroke: var(--primer); stroke-width: .24em; stroke-linejoin: round; }
.om3d .rn { font-weight: 800; letter-spacing: .1em; fill: var(--ink); fill-opacity: .8; paint-order: stroke; stroke: var(--primer); stroke-opacity: .55;
  stroke-width: .22em; stroke-linejoin: round; }
.om3d .lk { font-weight: 700; letter-spacing: .1em; fill: #3A6798; }
.om3d .lnd { font-weight: 700; letter-spacing: .2em; fill: var(--denim); fill-opacity: .7; }
.om3d .dt { fill: var(--ink); stroke: var(--primer); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.om3d .dt-h { fill: var(--signal); }
.om3d .dt-t { fill: var(--denim); stroke-width: 1px; }
.om3d .ld { fill: none; stroke: var(--ink); stroke-width: 1.3px; vector-effect: non-scaling-stroke; }
.om3d .om-win { fill: none; stroke: var(--ink); stroke-width: 1.5px; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.om3d .om-tab path { fill: var(--ink); }
.om3d .om-tab text { fill: var(--primer); font-weight: 800; letter-spacing: .1em; text-anchor: start; }
.om3d .lay-c { display: none; }
.om-in .rn { letter-spacing: .08em; }
.om-in .lk { letter-spacing: .16em; }
/* links: a region lifts on hover and keyboard focus (and when the finder or the key picks it); a city's name turns ink */
.om3d a { outline: none; cursor: pointer; }
.om3d .hit { visibility: hidden; pointer-events: all; }
.om3d .hl { visibility: hidden; stroke: var(--ink); stroke-width: 2.5px; transition: transform .16s ease; }
.om3d .rg:hover .hl, .om3d .rg:focus-visible .hl, .om3d .rg.on .hl { visibility: visible; transform: translate(-1.5px, -5px); filter: url(#om-lift); }
.om3d .rg:focus-visible .hl { stroke: var(--signal); stroke-width: 3.5px; }
.om3d .ct:hover .lc, .om3d .ct:focus-visible .lc, .om3d .ct.on .lc { fill: var(--primer); stroke: var(--ink); stroke-width: .5em; }
.om3d .ct:focus-visible .lc { stroke: var(--signal-dk); }
.om3d .ct:hover .dt, .om3d .ct:focus-visible .dt, .om3d .ct.on .dt { fill: var(--signal); }

/* ---------- the Toronto and GTA map: the home page's drawing (tools/build.py AREAS_GTA_MAP). Its names are drawn at
   the size that suits each width, at least 10 px (they were placed with room for the largest); phones see a crop of it. */
.gm { overflow: hidden; overflow: clip; }
.gm .m3d { display: block; width: 100%; height: auto; }
.gm .m3d text { font-family: var(--font); pointer-events: none; text-anchor: middle; dominant-baseline: central; }
.gm .m3d .lb { font-size: 12.5px; font-weight: 800; letter-spacing: .05em; fill: var(--ink); paint-order: stroke; stroke: var(--primer); stroke-width: 3.6px; stroke-linejoin: round;
  transition: transform .16s ease; }
.gm .m3d .lb-g { font-size: 12.2px; }
.gm .m3d .lb-o { font-size: 12px; font-weight: 500; fill: var(--denim); paint-order: stroke; stroke: var(--primer); stroke-width: 3.2px; stroke-linejoin: round; }
.gm .m3d .lb-lake { font-size: 11.5px; font-weight: 700; letter-spacing: .55em; fill: #3A6798; }
.gm .m3d .nn circle { fill: var(--primer); stroke: var(--ink); stroke-width: 1.2; }
.gm .m3d .nn path { fill: var(--signal); stroke: var(--ink); stroke-width: .8; }
.gm .m3d .nn text { font-size: 11.5px; font-weight: 800; fill: var(--ink); }
.gm .m3d .ld { fill: none; stroke: var(--ink); stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
.gm .m3d .ld-d { fill: var(--ink); stroke: var(--primer); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.gm .m3d .rg { cursor: pointer; outline: none; }
.gm .m3d .hit { visibility: hidden; pointer-events: all; }
.gm .m3d .hl { visibility: hidden; stroke: var(--ink); stroke-width: 2px; stroke-linejoin: round; transition: transform .16s ease; }
.gm .m3d .rg:hover .hl, .gm .m3d .rg:focus-visible .hl, .gm .m3d .rg.on .hl { visibility: visible; transform: translate(-1.5px, -5px); filter: url(#m3d-lift); }
.gm .m3d .rg:focus-visible .hl { stroke-width: 3.2px; }
.gm .m3d .rg:hover .lb, .gm .m3d .rg:focus-visible .lb, .gm .m3d .rg.on .lb { fill: var(--primer); stroke: var(--ink); stroke-width: .42em; }
.gm .m3d .rg:hover .lb:not(.lb-c), .gm .m3d .rg:focus-visible .lb:not(.lb-c), .gm .m3d .rg.on .lb:not(.lb-c) { transform: translate(-1.5px, -5px); }
.gm .m3d [data-place].on > g { fill: #F6DCCF; stroke: var(--signal-dk); stroke-width: 2px; stroke-dasharray: none; stroke-opacity: 1; }
.gm .m3d text[data-place].on { fill: var(--signal-dk); font-weight: 800; }
.m3d-key { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; padding: 0; font-size: 15px; font-weight: 600; line-height: 1.3; }
.m3d-key li { display: flex; align-items: center; gap: 10px; }
.key-ic { display: block; width: 34px; height: 24px; flex: none; }

/* ---------- hub: Toronto districts */
.tdist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
/* a card: the name beside its small map, then the homes, the neighbourhoods and the link (stretched over the card) */
.td { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr auto; column-gap: 18px;
  padding: 22px 22px 22px 24px; background: var(--primer); border: 2px solid var(--ink); border-radius: var(--r);
  scroll-margin-top: 90px; transition: transform .15s ease, box-shadow .15s ease; }
.td .loc { grid-column: 2; grid-row: 1; width: 132px; height: auto; margin: 0 0 16px; }
.td h3 { grid-column: 1; grid-row: 1; align-self: center; margin: 0 0 16px; font-size: 25px; font-weight: 850; text-transform: uppercase; line-height: 1; }
.td-homes { grid-column: 1 / -1; margin: 0 0 10px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.5; }
.td-hoods { grid-column: 1 / -1; align-self: start; margin: 0 0 16px; font-size: 14.5px; line-height: 1.55; color: var(--denim); font-weight: 500; }
.td-go { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--signal-dk);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.td-go .ic { width: 18px; height: 18px; flex: none; transition: transform .15s ease; }
.td-go::after { content: ""; position: absolute; inset: 0; }
.td:hover, .td:focus-within { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--ink); }
.td:hover .td-go .ic { transform: translateX(3px); }
.td.hit { background: #FBE7DC; }

/* the small locator maps (shapes shared through <use>, see .loc-defs) */
.loc { display: block; }
.loc .loc-on { fill: var(--signal); stroke: var(--ink); stroke-width: 1.3px; stroke-linejoin: round; }
.loc-gta .loc-on { fill: var(--denim); stroke: var(--ink); stroke-width: .8px; }
.loc-on-r .loc-on { fill: var(--denim); stroke: var(--ink); stroke-width: 1px; }
.loc-on-gta .loc-on { stroke-width: 1px; }
.loc .loc-ring { fill: none; stroke: var(--signal); stroke-width: 3px; }

/* ---------- hub: GTA regions */
.gta-sec { background: var(--paper-2); scroll-margin-top: 70px; }
.gta-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; align-items: start; }
.gr { scroll-margin-top: 90px; }
.gr .loc-gta { width: 100%; max-width: 250px; height: auto; margin: 0 0 18px; border-radius: var(--r); }
.gr h3 { margin: 0; font-size: 22px; font-weight: 850; text-transform: uppercase; line-height: 1.05; }
.gr-sub { margin: 6px 0 16px; font-size: 14.5px; font-weight: 500; color: var(--denim); }
.gr-cities { list-style: none; margin: 0; padding: 14px 0 0; border-top: 2px solid var(--ink); display: grid; gap: 14px; }
.gr-cities li { scroll-margin-top: 140px; border-radius: 2px; transition: background .3s; }
.gr-cities a { display: inline-flex; align-items: center; gap: 7px; font-size: 20px; font-weight: 800; text-decoration: none; line-height: 1.2; }
.gr-cities a .ic { width: 18px; height: 18px; color: var(--signal); transition: transform .15s ease; }
.gr-cities a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.gr-cities a:hover .ic { transform: translateX(3px); }
.gr-cities li > span { display: block; margin-top: 2px; font-size: 14.5px; color: var(--denim); }
.gr-more { margin: 16px 0 0; font-size: 15px; line-height: 1.55; }
.gr-more span { border-radius: 2px; transition: background .3s, box-shadow .3s; }

/* ---------- hub: across Ontario, one card per region: its small map and name, then its places in short groups.
   On phones a card shows its name and a button; its places open from there (site.js; they are open without it). */
.orcs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.orc { padding: 22px 24px 24px; background: var(--primer); border: 2px solid var(--ink); border-radius: var(--r); scroll-margin-top: 90px;
  transition: background .3s, box-shadow .3s; }
.orc-hamilton-niagara, .orc-western-ontario { grid-column: 1 / -1; }
.orc-head { display: flex; align-items: center; gap: 18px; padding-bottom: 16px; border-bottom: 2px solid var(--ink); }
.orc-head .loc { width: 92px; height: auto; flex: none; }
.orc h3 { margin: 0; font-size: 24px; font-weight: 850; text-transform: uppercase; line-height: 1.05; }
.orc-head p { margin: 7px 0 0; font-size: 15px; line-height: 1.45; color: var(--denim); font-weight: 500; max-width: 40em; }
.orc-more { display: none; }
.orc-gs { columns: 2; column-gap: 28px; }
.orc-western-ontario .orc-gs { columns: 4; }
.orc-g { break-inside: avoid; padding-top: 16px; }
.orc-g h4 { margin: 0 0 6px; font-size: 12.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--denim); line-height: 1.3; }
.orc-g ul { list-style: none; margin: 0; padding: 0; }
.orc-hamilton-niagara .orc-gs { columns: 1; }
.orc-hamilton-niagara .orc-g ul { columns: 4; column-gap: 28px; }
.orc-g li { break-inside: avoid; padding: 4px 0 4px 14px; position: relative; font-size: 16px; font-weight: 600; line-height: 1.3; scroll-margin-top: 140px;
  border-radius: 2px; transition: background .3s, box-shadow .3s; }
.orc-g li::before { content: ""; position: absolute; left: 2px; top: .78em; width: 5px; height: 5px; border-radius: 50%; background: var(--denim); }
.orc-g li small { display: block; font-size: 13px; font-weight: 500; color: var(--denim); line-height: 1.35; }
[id^="city-"].hit { background: #F6DCCF; box-shadow: 0 0 0 4px #F6DCCF; }
.orc.hit, .gta-sec.hit .gta-cols { box-shadow: 0 0 0 4px #F6DCCF; }
.orc.hit { background: #FBF0EA; }

/* ---------- each area page: the map in the hero */
.area-hero .svc-hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); }
.area-map3d { margin: 0; border: 2px solid var(--ink); border-radius: var(--r); background: var(--primer); box-shadow: 8px 8px 0 var(--ink); overflow: hidden; }
.am3d { display: block; width: 100%; height: auto; }
.am3d text { font-family: var(--font); pointer-events: none; text-anchor: middle; dominant-baseline: central; }
.am3d .lb-n { font-size: 14px; font-weight: 600; fill: var(--ink); paint-order: stroke; stroke: var(--primer); stroke-width: 3.4px; stroke-linejoin: round; }
.am3d .lb-o { font-size: 13px; font-weight: 500; fill: var(--denim); paint-order: stroke; stroke: var(--primer); stroke-width: 3px; stroke-linejoin: round; }
.am3d .am-pin path { fill: var(--ink); }
.am3d .am-pin circle { fill: var(--signal); }
.am3d .am-pin text { font-size: 15px; font-weight: 800; letter-spacing: .05em; fill: var(--primer); text-anchor: start; }
.area-map3d figcaption { padding: 11px 18px 13px; border-top: 2px solid var(--ink); font-size: 14px; color: var(--denim); font-weight: 500; }
.area-map3d figcaption a { color: var(--ink); font-weight: 700; }

/* ---------- responsive */
/* wide screens: the map is as tall as the window allows (the box's top under the menu bar, room to spare below it),
   776 px wide at the least (its names stay >= 10 px); the key in a column beside it; the box no wider than the two */
@media (min-width: 1100px) {
  .mapbox { --kw: 264px; --mw: max(776px, calc((100vh - 190px) * 1.4815)); width: min(100%, calc(var(--mw) + var(--kw) + 4px)); }
  .map-panel:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) var(--kw); align-items: stretch; }
  .map-foot { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 10px; padding: 20px 16px 20px 20px; border-top: 0; border-left: 2px solid var(--ink); }
  .om-key { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .m3d-key { flex-direction: column; flex-wrap: nowrap; gap: 16px; padding-top: 4px; }
  .gm { align-self: start; }
}
@media (max-width: 1020px) {
  .tdist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gta-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 30px; }
  .area-hero .svc-hero-in { grid-template-columns: 1fr; }
  .area-map3d { max-width: 620px; }
}
/* below 1100 px the Ontario map shows its phone names and the close-up of the south (side by side from 780 px) */
@media (max-width: 1099px) {
  .om3d .lay-d, .om3d .ct-s { display: none; }
  .om3d .lay-c { display: inline; }
  .om3d .lay-c .rn { letter-spacing: .03em; }
  .om3d .lay-c .lk { letter-spacing: .02em; }
  .om-in { display: block; }
  .gm .m3d .lb { font-size: 12px; stroke-width: 3.5px; }
  .gm .m3d .lb-g { font-size: 11.7px; }
  .gm .m3d .lb-o { font-size: 11.5px; stroke-width: 3px; }
}
@media (min-width: 780px) and (max-width: 1099px) {
  .om-maps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .om-in { border-top: 0; border-left: 2px solid var(--ink); }
  #mapPanel-on .map-foot { display: block; }
  #mapPanel-on .map-foot-t { margin-bottom: 4px; }
  .om-key { grid-template-columns: repeat(3, auto); }
}
@media (min-width: 940px) and (max-width: 1099px) {
  .om-key { grid-template-columns: repeat(4, auto); }
}
@media (max-width: 999px) {
  .orcs { grid-template-columns: minmax(0, 1fr); }
  .orc-western-ontario .orc-gs { columns: 2; }
  .orc-hamilton-niagara .orc-g ul { columns: 3; }
}
/* small tablets: the province above its close-up, at most 560 px wide; names at least 10 px */
@media (max-width: 779px) {
  .om-maps { max-width: 560px; margin: 0 auto; }
  .om-key { grid-template-columns: repeat(3, auto); gap: 0 22px; }
  .map-foot { padding: 12px 16px 14px; }
}
@media (max-width: 759px) {
  .gm .m3d .lb { font-size: 14.5px; stroke-width: 4.2px; }
  .gm .m3d .lb-g { font-size: 14.4px; }
  .gm .m3d .lb-o { font-size: 14.3px; stroke-width: 3.8px; }
  .gm .m3d .lb-lake, .gm .m3d .nn text { font-size: 14.3px; }
}
@media (min-width: 600px) and (max-width: 779px) {
  .om-maps { border-left: 2px solid var(--ink); border-right: 2px solid var(--ink); }
}
/* phones: compact lists. A Toronto district is one row (its map, name, neighbourhoods and an arrow, the whole card a
   link), a GTA region's map stands beside its name, and a region of Ontario shows its name and a button (site.js) */
@media (max-width: 640px) {
  .tdist { grid-template-columns: 1fr; gap: 12px; }
  .td { grid-template-columns: 70px minmax(0, 1fr) 22px; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 14px 14px 14px 12px; }
  .td .loc { grid-column: 1; grid-row: 1 / span 2; width: 70px; margin: 0; }
  .td h3 { grid-column: 2; grid-row: 1; align-self: end; margin: 0; font-size: 18px; line-height: 1.1; }
  .td-homes { display: none; }
  .td-hoods { grid-column: 2; grid-row: 2; align-self: start; margin: 4px 0 0; font-size: 14px; line-height: 1.4; }
  .td-hoods > span:nth-of-type(n+5) { display: none; }      /* the first three neighbourhoods (after the hidden label) */
  .td-go { grid-column: 3; grid-row: 1 / span 2; align-self: center; justify-self: end; gap: 0; font-size: 0; }
  .td-go .ic { width: 22px; height: 22px; }
  .gta-cols { grid-template-columns: 1fr; gap: 26px; }
  .gr { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 14px; }
  .gr .loc-gta { grid-column: 1; grid-row: 1 / span 2; align-self: center; width: 104px; max-width: none; margin: 0; }
  .gr h3 { grid-column: 2; align-self: end; font-size: 21px; }
  .gr-sub { grid-column: 2; align-self: start; margin: 4px 0 0; font-size: 14px; }
  .gr-cities, .gr-more { grid-column: 1 / -1; }
  .gr-cities { margin-top: 12px; padding-top: 12px; gap: 10px; }
  .gr-more { margin-top: 12px; }
  .gr-cities a { font-size: 19px; }
  .gr-cities li > span { font-size: 14px; }
  .area-map3d { box-shadow: 5px 5px 0 var(--ink); }
  /* the hero map is drawn at 640 units and shown ~360px wide here: its names grow by 1.45 (MOBILE in areas_map3d.py) */
  .am3d .lb-n { font-size: 20.3px; stroke-width: 4.5px; }
  .am3d .lb-o { font-size: 18.9px; stroke-width: 4.5px; }
  .am3d .am-pin { transform: scale(1.45); }
  .orcs { gap: 12px; }
  .orc { padding: 14px 14px 14px 14px; }
  .orc-head { align-items: flex-start; gap: 14px; padding-bottom: 0; border-bottom: 0; }
  .orc-head .loc { width: 64px; margin-top: 2px; }
  .orc h3 { font-size: 20px; }
  .orc-head p { margin-top: 5px; font-size: 14.5px; line-height: 1.4; }
  .orc-more:not([hidden]) { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; margin: 12px 0 0;
    padding: 8px 12px 8px 14px; border: 2px solid var(--ink); border-radius: var(--r); background: var(--paper); color: var(--ink); font: 700 15.5px/1.2 var(--font);
    text-align: left; cursor: pointer; }
  .orc-more:hover { background: var(--ink); color: var(--primer); }
  .orc-more:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
  .orc-more .ic { width: 20px; height: 20px; flex: none; transition: transform .2s ease; }
  .orc-more[aria-expanded="true"] .ic { transform: rotate(180deg); }
  .orc-gs { margin-top: 14px; border-top: 2px solid var(--ink); }
  .orc.is-folded .orc-gs { display: none; }
  .orc-gs, .orc-western-ontario .orc-gs { columns: 1; }
  .orc-g ul, .orc-hamilton-niagara .orc-g ul { columns: 2; column-gap: 16px; }
  .orc-g li { font-size: 15.5px; }
}
/* phones: the map box runs edge to edge; the GTA map shows only the City of Toronto and the inner GTA (the
   --hm-w / --hm-x crop set by build.py), and the names outside that window (class "edge") are left to the lists */
@media (max-width: 599px) {
  .mapbox { margin-left: calc(-1 * var(--gut)); margin-right: calc(-1 * var(--gut)); border-left: 0; border-right: 0; border-radius: 0; }
  .map-tabs button { min-height: 50px; padding: 8px 10px; font-size: 15px; }
  .gm .m3d { width: var(--hm-w, 100%); max-width: none; margin-left: var(--hm-x, 0); }
  .gm .m3d .edge { display: none; }
  .gm .m3d .lb { font-size: 12px; stroke-width: 3.5px; }
  .gm .m3d .lb-g { font-size: 11.7px; }
  .gm .m3d .lb-o { font-size: 11.5px; stroke-width: 3px; }
  .gm .m3d .lb-lake, .gm .m3d .nn text { font-size: 11.5px; }
  .om-key { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; width: 100%; }
  .om-key a { font-size: 14px; gap: 8px; }
  .m3d-key { flex-direction: column; gap: 8px; width: 100%; font-size: 14.5px; }
}
@media (max-width: 440px) {
  .map-tabs button { padding: 8px 6px; font-size: 14.5px; }
  .gm .m3d .lb { font-size: 14.5px; stroke-width: 4.2px; }
  .gm .m3d .lb-g { font-size: 14px; }
  .gm .m3d .lb-o { font-size: 13.8px; stroke-width: 3.6px; }
  .gm .m3d .lb-lake, .gm .m3d .nn text { font-size: 13.8px; }
}