/* Where it happened · styles only this page uses, loaded after /shared/deep-dive.css. A plain page
   like Who's who: the big map, four close-ups, then every place in a list. The maps and the list are
   written by docs/build_hub.py; the map's colors and pins, the intro, the list's cards and the card
   that opens from a pin are in the shared stylesheet. */

/* header: no Contents button, so the Kitchen Table link shows on every width it fits */
.where-page .home-link{display:none}
@media (min-width:600px){.where-page .home-link{display:flex}}

.where-body{padding-block:4px 32px}
.map-fig{margin:0}
.map-fig .map{display:block;width:100%;height:auto;border:1px solid var(--line-2);border-radius:10px}

/* the big map: wider than the screen on a phone, so the names stay readable; it starts scrolled to
   the Northeast (the page's script) */
.map-scroll{overflow-x:auto;overscroll-behavior-x:contain;border-radius:10px;-webkit-overflow-scrolling:touch}
.map-scroll:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.map-main .map{min-width:1200px}
@media (min-width:1200px){.map-main .map{min-width:0}}
.map-off{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:12px;font:400 calc(15px*var(--ts,1))/1.5 var(--sans);color:var(--ink-2)}
.map-off .k{font:700 calc(12px*var(--ts,1))/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.map-off a{font-family:var(--mono);color:var(--ink)}
.map-off .s{font-size:calc(13px*var(--ts,1))}

/* the close-ups: one under another on a phone, two across from 900px */
.closeups{display:grid;gap:36px;margin-top:40px}
.map-h{margin:0 0 12px;font:400 calc(clamp(26px,3vw,34px)*(1 + (var(--ts,1) - 1)*0.7))/1.1 var(--display)}
@media (min-width:900px){.closeups{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px;row-gap:48px}}

.map-credit{margin-top:28px;max-width:70ch;font:400 calc(13px*var(--ts,1))/1.5 var(--sans);color:var(--ink-2)}
.where-body .hub-groups{margin-top:24px}

/* printing (the shared print styles do the rest): the big map fits the page, the close-ups two to a
   page, every place opens, and the jump links stay off the paper */
@media print{
  .where-jump{display:none!important}
  .map-scroll{overflow:visible}
  .map-main .map{min-width:0}
  .closeups{display:grid;grid-template-columns:1fr 1fr;gap:12pt}
  .map-fig{break-inside:avoid}
}