/* The province page's own parts (#4346, #4353): hero map and chips, companies, funders and schools, jobs and news, the other provinces.
   The page sets --mw and --mh on its .hero: its map's viewBox width and height. */
.sub{color:var(--muted);margin-top:8px;max-width:52ch}
.more{display:inline-block;margin-top:24px;font-weight:600}

/* Screen 1: the province. The outline runs as the field, the words sit on columns 1-5 */
.hero.screen.first{position:relative;overflow:hidden;background:var(--bg);--hmax:640px;min-height:680px;border-bottom:2px solid var(--line)}
.map{position:absolute;inset:0}
/* the map box is half the page, and at most --hmax tall, so a tall province still leaves the caption and the divider on the first screen */
.map>.land{position:absolute;left:46%;top:4%;width:min(50%,calc(var(--hmax)*var(--mw)/var(--mh)));aspect-ratio:var(--mw)/var(--mh);container-type:inline-size}
.land svg{display:block;width:100%;height:100%;--map-dot:#fff;--map-ground:var(--ink);--map-line:var(--ink)}
/* Tap targets: one .hit per dot, 22 px across or less where a neighbour is nearer (--h, in cqw: half the way to the nearest dot), so no two overlap */
/* City chips come from maps/chips.ts: --r is the dot's radius in cqw of the .land box, so the chip's edge sits 3 px off its own dot at any width; per layout a side (--ws, --ms, --ps: 1 right of the dot, -1 left) and a nudge (--wy...), and hw/hm/hp when a layout has no room */
.land .hit{position:absolute;width:min(22px,calc(var(--h)*2cqw));aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);cursor:pointer}
.land .chip{text-decoration:none;cursor:pointer;--s:var(--ws);--v:var(--wv);--y:var(--wy);--off:calc(var(--r)*1cqw + 3px);position:absolute;transform:translate(calc(var(--s)*var(--off) + (var(--s) - 1)*50%),calc(var(--v)*var(--off) + (var(--v) - 1)*50% + var(--y)));background:var(--ink);color:#fff;font:600 var(--f-chip)/1 system-ui,sans-serif;padding:4px 6px;white-space:nowrap}
/* the chip is a tap target at least 24 px tall: the invisible strip adds what its padding lacks (chips.ts keeps two such strips from overlapping) */
.land .chip::after{content:"";position:absolute;left:0;right:0;top:50%;height:24px;transform:translateY(-50%)}
@media (min-width:1101px){.land .chip.hw{display:none}}
.hero .calm{position:relative;z-index:1;align-self:center}
.hero h1{font-size:var(--f-hero);line-height:1;letter-spacing:-.02em;margin-bottom:24px}
.hero p.lede{max-width:38ch;margin-bottom:28px}
.hero .acts{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
.jobsl{font-weight:600}
.focal{font-size:var(--f-small);background:#fff;padding:8px 12px;position:absolute;left:calc(var(--gutter) - 12px);bottom:24px;max-width:380px;z-index:1}

/* Screen 2: companies */
.here{grid-column:1/-1;display:flex;justify-content:space-between;align-items:flex-end;gap:12px 40px;flex-wrap:wrap;border-top:var(--rh-w) solid var(--line);padding-top:12px}
.here h2{font-size:var(--f-h2);line-height:1.25;font-weight:var(--w-head);text-transform:var(--head-case)}
.cities{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:var(--f-text);justify-content:flex-end}
.cities a{color:var(--ink);text-decoration:none;font-weight:600}
.cities a span{color:var(--muted);font-weight:400;margin-left:4px}
.co{grid-column:span 3;align-self:start}
.co .pic{aspect-ratio:4/3;background:var(--fill);margin-bottom:14px}
.co .pic img{display:block;width:100%;height:100%;object-fit:cover}
.co h3{font-size:var(--f-title);line-height:1.2}
.co p{font-size:var(--f-text);margin-top:4px}
.co .where{color:var(--muted)}
.co .marks{display:flex;gap:6px;margin-top:12px}
.co .marks .sym{width:16px;height:16px}
.co .reach{font-size:var(--f-text);margin-top:10px}
/* A short list (one or two companies) is made wide on purpose: picture left, words right, and a note beside the one, or under the two, that says the list is complete */
.few .co{grid-column:span 6;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--col-gap);align-content:start}
.few .co .pic{grid-column:1;grid-row:1/span 6;margin-bottom:0}
.few .co>:not(.pic){grid-column:2}
.few .co:not(:has(.pic))>*{grid-column:1/-1}
/* Cards in a row share rows (subgrid), one row for each part: picture, title, text, where, marks, reach. A text-only card has no picture, so its title still takes row 2, and a row with no picture has an empty row 1 of no height. The screen's own row gap would show between the shared rows, so on a screen of cards it is moved into the cards' bottom padding and the bottom margin of the line of mark names above them. */
.screen:has(.co){row-gap:0}
.screen:not(.few) .co{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:0;padding-bottom:var(--row-gap)}
.screen:not(.few) .co>*{align-self:start}
.screen:not(.few) .co>.pic{grid-row:1}
.screen:not(.few) .co>h3{grid-row:2}
.screen:not(.few) .co>p:not(.where):not(.reach){grid-row:3}
.screen:not(.few) .co>.where{grid-row:4}
.screen:not(.few) .co>.marks{grid-row:5}
.screen:not(.few) .co>.reach{grid-row:6}
@media (max-width:760px){
  .screen>.order{margin-bottom:28px}
  .screen:not(.few) .co{padding-bottom:28px}
}
.gap{grid-column:span 6;align-self:start;border-top:var(--rh-w) solid var(--line);padding-top:12px}
.gap p{font-size:var(--f-text);margin-top:4px}
.gap.wide{grid-column:1/-1;margin-top:var(--row-gap)}
.gap a{display:inline-block;margin-top:12px;font-weight:600}
.nolist{margin-top:32px;color:var(--muted);max-width:52ch}
/* The shared key (p.key, from site.css) and the order of the six marks sit between the heading and the first card */
:is(.screen,.build)>.key,:is(.screen,.build)>.order{grid-column:1/-1;margin:0}
:is(.screen,.build)>.key{margin-top:20px}
:is(.screen,.build)>.order{font-size:var(--f-small);color:var(--muted);margin:10px 0 var(--row-gap)}
.cosay{grid-column:1/-1;font-size:var(--f-small);color:var(--muted);margin-top:4px}

/* Screen 3: who funds, who trains */
.funds{grid-column:1/7;align-self:start}
.trains{grid-column:7/13;align-self:start}
.list{list-style:none;display:grid;row-gap:28px;margin-top:32px}
.list h3{font-size:var(--f-body);line-height:1.2}
.list p{margin-top:4px}
.list .src{display:block;margin-top:4px;font-size:var(--f-small);color:var(--muted)}

/* Screen 4: jobs and news */
.jobs{grid-column:1/8;align-self:start}
.news{grid-column:9/13;align-self:start}
.rows{list-style:none;display:grid;row-gap:24px;margin-top:32px}
.jobs .rows li{display:grid;grid-template-columns:minmax(0,1fr) 230px 110px;column-gap:20px;align-items:baseline}
.jobs .rows li small{display:block;color:var(--muted);font-size:var(--f-text);font-weight:400}
.news .rows li{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:16px}
.rows .k{color:var(--muted);font-size:var(--f-text)}
.news .rows .k+div small{display:block;color:var(--muted);font-size:var(--f-text)}

/* Screen 5: the other provinces */
.others{grid-column:1/5;align-self:start}
.provs{grid-column:5/13;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--col-gap);row-gap:14px;align-self:start;padding-top:14px}
.provs li{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:var(--rule)}
.provs li span{color:var(--muted)}
.provs li.cur{font-weight:700}
.provs li.cur span{color:var(--ink)}

@media (max-width:1100px){
  .co{grid-column:span 6}
  .few .co,.gap{grid-column:1/-1}
  .few .co+.co,.few .gap{margin-top:var(--row-gap)}
  .jobs{grid-column:1/-1}
  .news{grid-column:1/-1;margin-top:48px}
  .funds,.trains{grid-column:1/-1}
  .trains{margin-top:48px}
  .cities{justify-content:flex-start}
  .others{grid-column:1/-1}
  .provs{grid-column:1/-1}
}
@media (min-width:761px) and (max-width:1100px){
  .hero.screen.first{min-height:max(520px,calc(min(50vw*var(--mh)/var(--mw),var(--hmax)) + 140px))}
  .land .chip{--s:var(--ms);--v:var(--mv);--y:var(--my)}
  .land .chip.hm{display:none}
}
@media (max-width:760px){
  .few .co+.co,.few .gap,.gap.wide{margin-top:28px}
  .hero{display:flex;flex-direction:column;padding:0}
  .hero .calm{order:1;align-self:stretch;padding:32px var(--gutter)}
  .map{order:2;position:relative;height:300px}
  /* the map is 96% of the 300 px box tall, or the page width less the gutters wide where the province is wider than tall (PEI) */
  .map>.land{left:50%;transform:translateX(-50%);top:2%;width:min(calc(100% - 2*var(--gutter)),calc(288px*var(--mw)/var(--mh)));height:auto}
  .focal{position:static;order:3;padding:0 var(--gutter) 16px;max-width:none}
  .land .chip{--s:var(--ps);--v:var(--pv);--y:var(--py);font-size:var(--f-chip-sm);padding:3px 5px}
  .land .chip.hp{display:none}
  .co,.few .co,.gap{grid-column:1/-1}
  .few .co{display:block}
  .few .co .pic{margin-bottom:14px}
  .jobs .rows li{grid-template-columns:1fr;row-gap:2px}
  .provs{grid-template-columns:1fr 1fr}
}

/* Small pages (#4403): a page with one or two companies carries class "few" on its hero, companies and jobs sections (set by hand: there is no page generator).
   The page drops the city filter, sets the add-a-company note as one line under the last card, links each company twice at most,
   fits the hero to its map, and keeps a job's title, place and date together in a measure of about 60ch. */
.few nav.cities{display:none}
.few .here{align-items:flex-start}
.few .gap{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 20px;border-top:0;padding-top:0;margin-top:20px}
.few .gap p,.few .gap a{margin:0}
@media (min-width:1101px){
  .hero.few.screen.first{min-height:min(680px,calc(min(50vw*var(--mh)/var(--mw),var(--hmax)) + 140px))}
}
.few .jobs .rows{max-width:60ch}
@media (max-width:760px){
  .hero.few .map{height:calc(min((100vw - 2*var(--gutter))*var(--mh)/var(--mw),288px) + 12px)}
}
/* Small pages, three columns (#4403): the one or two companies, the funders and the schools share one section. Below 1101 px the build block dissolves and the three stack in their old order. */
.trio .build{display:contents}
.trio .funds,.trio .trains{margin-top:var(--row-gap)}
@media (min-width:1101px){
  .trio .build{display:block;grid-column:1/5}
  .trio .funds{grid-column:5/9;margin-top:0}
  .trio .trains{grid-column:9/13;margin-top:0}
  .trio .here{margin-bottom:0}
  .trio .co{display:block}
  .trio .co .pic{margin-bottom:14px}
  .trio .co+.co{margin-top:var(--row-gap)}
  .trio .gap{margin-top:20px}
}