/* maps.css: the /maps page only. Tokens, top strip, labels, credits and foot come from longform.css.
   The maps sit on the light paper plate in both themes, as the history pages' maps do. */
:root {
  /* the plate the maps are printed on: fixed, because the maps keep their own paper in both themes */
  --map-paper: #efe9df;
  --map-ink: #2a241e;
  --map-stamp: #9e3526;
  --map-dim: 0;               /* dark mode lays a faint shade over the maps so the plate does not glare */
  --thumb: 26px;              /* the slider's cursor: the tick scale is inset by half of it each side */
  --map: min(100%, 1000px, 88svh);
}
@media (prefers-color-scheme: dark) {
  :root { --map-dim: .1; }
}

html:not(.js) .js-only { display: none !important; }

/* ---------- the page head and the two columns ---------- */
.atlas {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "map" "panel";
  margin: 22px 0 0;
}
.atlas__head { grid-area: head; margin: 0 0 20px; }
.atlas__head .label { margin-bottom: 10px; }
.atlas__title { margin: 0; font: 700 32px/1.08 var(--display); letter-spacing: .003em; text-wrap: balance; }
.atlas__intro { margin: 12px 0 0; max-width: 40ch; font-size: 17.5px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.atlas__map { grid-area: map; min-width: 0; }
.atlas__panel { grid-area: panel; min-width: 0; }

/* ---------- the plate: a neat line graduated in eighths (one per map tile), then the map ---------- */
.map {
  position: relative; width: var(--map); margin: 0 auto;
  padding: 9px; background: var(--paper-plate);
  border: 1px solid var(--ink); outline: 1px solid var(--rule); outline-offset: 4px;
}
.map::before {
  content: ""; position: absolute; inset: 3px; pointer-events: none;
  border: 1px solid var(--map-ink);
  background:
    repeating-linear-gradient(90deg, var(--map-ink) 0 12.5%, transparent 0 25%) 0 0 / 100% 5px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 12.5%, var(--map-ink) 0 25%) 0 100% / 100% 5px no-repeat,
    repeating-linear-gradient(180deg, transparent 0 12.5%, var(--map-ink) 0 25%) 0 0 / 5px 100% no-repeat,
    repeating-linear-gradient(180deg, var(--map-ink) 0 12.5%, transparent 0 25%) 100% 0 / 5px 100% no-repeat;
  opacity: .78;
}
.map__view {
  position: relative; aspect-ratio: 1; overflow: hidden;
  background: var(--map-paper); color: var(--map-ink);
  box-shadow: 0 0 0 1px var(--map-ink);
  touch-action: pan-y; cursor: zoom-in;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.map__view.is-zoomed { touch-action: none; cursor: grab; }
.map__view.is-panning { cursor: grabbing; }
.map__view:focus-visible { outline: 2px solid var(--stamp); outline-offset: 6px; }
.map__stage { position: absolute; inset: 0; transform-origin: 0 0; }
.map__stage > * { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the faint present-day plan under the maps: hairlines at any zoom */
.map__ghost { color: var(--map-ink); opacity: .34; }
.map__ghost path { vector-effect: non-scaling-stroke; stroke-width: .8px; }
.map__ghost .ghost__kerbs path { stroke-width: 1px; }
.map__layer { max-width: none; opacity: 0; visibility: hidden; -webkit-user-drag: none; }
.map__layer[hidden] { display: none; }
.map__layer.is-live { will-change: opacity; }
html:not(.js) .map__layer:first-of-type { opacity: 1; visibility: visible; }
.map__dim { background: rgb(0 0 0 / var(--map-dim)); z-index: 30; pointer-events: none; }
.map__marks { z-index: 40; overflow: visible; pointer-events: none; }

/* the bank: an outline in the stamp colour over a soft halo; dashed where the bank is not built yet */
.bank polygon { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.bank__halo { stroke: var(--map-paper); stroke-width: 6px; stroke-opacity: .85; }
.bank__line { stroke: var(--map-stamp); stroke-width: 2.25px; }
.bank--built .bank__line { fill: rgb(158 53 38 / .16); }
.bank--site .bank__line { stroke-dasharray: 5 4; stroke-width: 2px; }
.map.hide-bank .bank, .map.hide-bank .tag--bank { visibility: hidden; }

/* labels and pins: kept the same size on screen at any zoom, positioned by maps.js */
.map__tags { position: absolute; inset: 0; z-index: 50; pointer-events: none; }
.tag { position: absolute; left: 0; top: 0; will-change: transform; }
.tag--bank {
  display: flex; align-items: center; gap: 0;
  font: 650 10px/1 var(--display); letter-spacing: .13em; text-transform: uppercase; white-space: nowrap;
  color: var(--map-stamp);
}
.tag--bank::before { content: ""; width: 14px; border-top: 1.5px solid var(--map-stamp); }
.tag--bank span {
  padding: 5px 7px 4px; background: rgb(239 233 223 / .93);
  border: 1.5px solid var(--map-stamp); box-shadow: 0 1px 3px rgb(42 36 30 / .18);
}
.tag--bank.is-site span { border-style: dashed; }
.tag--bank.is-left { flex-direction: row-reverse; }
.tag--bank.is-below { flex-direction: column; align-items: flex-start; }
.tag--bank.is-below::before { width: 0; height: 9px; margin-left: calc(var(--lx, 50%) - .75px); border-top: 0; border-left: 1.5px solid var(--map-stamp); }
.pin {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  font: 700 11.5px/1 var(--display); font-variant-numeric: lining-nums;
  color: #fff; background: var(--map-stamp); box-shadow: 0 0 0 2px var(--map-paper), 0 1px 4px rgb(42 36 30 / .35);
}
.map__tags .pin { position: absolute; left: -11px; top: -11px; }

/* the magic lantern: the plate darkens round the edges and the lamp flickers while one map dissolves into the next */
.map__lamp {
  position: absolute; inset: 0; z-index: 60; pointer-events: none; opacity: 0;
  background:
    radial-gradient(circle at 50% 48%, rgb(255 214 150 / .16) 0, rgb(255 214 150 / 0) 46%),
    radial-gradient(circle at 50% 50%, rgb(40 24 10 / 0) 50%, rgb(40 24 10 / .34) 82%, rgb(24 14 6 / .6) 100%);
}

/* map furniture: zoom and the bank switch (top right), north point and scale (bottom left) */
.map__tools {
  position: absolute; top: 19px; right: 19px; z-index: 70;
  display: flex; flex-direction: column; gap: 8px;
}
.tool-group { display: flex; flex-direction: column; box-shadow: 0 1px 4px rgb(42 36 30 / .2); }
.tool {
  display: grid; place-items: center; width: 40px; height: 40px; margin: 0; padding: 0;
  background: rgb(239 233 223 / .94); color: var(--map-ink);
  border: 1px solid var(--map-ink); border-radius: 0;
  font: 500 22px/1 var(--display); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tool + .tool { border-top: 0; }
.tool:hover { background: #fff; }
.tool:disabled { color: rgb(42 36 30 / .3); cursor: default; background: rgb(239 233 223 / .94); }
.tool svg { width: 20px; height: 20px; }
.tool__level {
  display: grid; place-items: center; width: 40px; height: 22px;
  background: rgb(239 233 223 / .94); border: 1px solid var(--map-ink); border-top: 0;
  font: 650 10.5px/1 var(--display); letter-spacing: .06em; color: var(--map-ink); font-variant-numeric: lining-nums;
}
.tool-group .tool__level + .tool { border-top: 0; }
.tool--bank[aria-pressed="true"] { color: var(--map-stamp); }
.tool--bank[aria-pressed="false"] svg .fill { fill: none; }
.tool--bank[aria-pressed="false"] { color: rgb(42 36 30 / .55); }
/* bottom right: the scans as printed, or re-toned to one paper and one ink */
.map__tone {
  position: absolute; right: 19px; bottom: 19px; z-index: 70;
  display: flex; box-shadow: 0 1px 4px rgb(42 36 30 / .2);
}
.map__tone button {
  margin: 0; padding: 8px 10px 7px; min-height: 32px;
  background: rgb(239 233 223 / .94); color: var(--map-ink);
  border: 1px solid var(--map-ink); border-radius: 0;
  font: 650 9.5px/1 var(--display); letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.map__tone button + button { border-left: 0; }
.map__tone button:hover { background: #fff; }
.map__tone button[aria-pressed="true"],
.map__tone button[aria-pressed="true"]:hover { background: var(--map-ink); color: #efe9df; cursor: default; }
.map__tone button:focus-visible { outline: 2px solid var(--map-stamp); outline-offset: 2px; position: relative; z-index: 1; }
.map__furniture {
  position: absolute; left: 19px; bottom: 19px; z-index: 70; pointer-events: none;
  display: flex; align-items: flex-end; gap: 12px;
  padding: 6px 9px 5px; background: rgb(239 233 223 / .88); border: 1px solid rgb(42 36 30 / .5);
  color: var(--map-ink); font: 650 9.5px/1 var(--display); letter-spacing: .12em; text-transform: uppercase;
}
.north { display: grid; justify-items: center; gap: 1px; }
.north svg { width: 11px; height: 17px; }
.scalebar { display: grid; gap: 3px; }
.scalebar__bar {
  height: 5px; width: 60px; border: 1px solid var(--map-ink);
  background: repeating-linear-gradient(90deg, var(--map-ink) 0 25%, transparent 0 50%);
}
.scalebar__lbl { display: flex; justify-content: space-between; font-variant-numeric: lining-nums; letter-spacing: .06em; text-transform: none; }

/* ---------- the slider: an engraved time scale, with a tick for each map at its own year ---------- */
.scale {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "rule" "play";
  width: var(--map); margin: 18px auto 0; row-gap: 4px;
}
.rule { grid-area: rule; position: relative; height: calc(78px + (var(--rows, 1) - 1) * 18px); }
.rule__track { position: absolute; top: 0; height: 44px; left: calc(var(--thumb) / 2); right: calc(var(--thumb) / 2); pointer-events: none; }
/* graduations: one every ten years */
.rule__minor { position: absolute; left: 0; right: 0; top: 11px; height: 6px; }
.rule__minor i { position: absolute; top: 0; width: 1px; height: 6px; margin-left: -.5px; background: var(--ink); }
/* the bar, filled by alternate decades, as on a map's scale */
.rule__bar { position: absolute; left: 0; right: 0; top: 17px; height: 7px; border: 1px solid var(--ink); }
.rule__bar i { position: absolute; top: 0; bottom: 0; background: var(--ink); }
.rule__tick { position: absolute; top: 6px; width: 1.5px; height: 25px; margin-left: -.75px; background: var(--ink); }
.rule input {
  position: absolute; left: 0; top: 0; width: 100%; height: 44px; margin: 0; padding: 0;
  -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer;
  touch-action: pan-y;
}
.rule input:focus { outline: none; }
.rule input::-webkit-slider-runnable-track { height: 44px; background: transparent; border: 0; }
.rule input::-moz-range-track { height: 44px; background: transparent; border: 0; }
.rule input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: var(--thumb); height: 40px; margin-top: 2px;
  border: 1.5px solid var(--ink); border-radius: 3px;
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), var(--stamp) calc(50% - 1px) calc(50% + 1px), transparent 0) ,
    color-mix(in srgb, var(--paper) 62%, transparent);
  box-shadow: 0 2px 6px rgb(0 0 0 / .2);
  cursor: grab;
}
.rule input::-moz-range-thumb {
  width: var(--thumb); height: 40px; box-sizing: border-box;
  border: 1.5px solid var(--ink); border-radius: 3px;
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), var(--stamp) calc(50% - 1px) calc(50% + 1px), transparent 0),
    color-mix(in srgb, var(--paper) 62%, transparent);
  box-shadow: 0 2px 6px rgb(0 0 0 / .2);
  cursor: grab;
}
.rule input:active::-webkit-slider-thumb { cursor: grabbing; }
.rule input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--stamp); outline-offset: 2px; }
.rule input:focus-visible::-moz-range-thumb { outline: 2px solid var(--stamp); outline-offset: 2px; }
.rule__years { position: absolute; top: 44px; height: calc(34px + (var(--rows, 1) - 1) * 18px); left: calc(var(--thumb) / 2); right: calc(var(--thumb) / 2); margin: 0; padding: 0; list-style: none; }
/* each year is centred on its tick: a zero-width item, so nothing reaches past the page edge */
.rule__years li { position: absolute; top: calc(var(--row, 0) * 18px); width: 0; display: flex; justify-content: center; }
/* a year that had to drop a row hangs from its tick on a fine leader */
.rule__years li.is-dropped::before {
  content: ""; position: absolute; left: -.5px; bottom: 100%; width: 1px; height: calc(var(--row) * 18px + 2px);
  margin-bottom: -2px; background: var(--ink-3); pointer-events: none;
}
.rule__year {
  position: relative; display: flex; justify-content: center; align-items: flex-start;
  flex: none; min-width: 44px; height: 34px; margin: 0; padding: 2px 2px 0;
  background: none; border: 0; color: var(--ink-2); cursor: pointer;
  font: 600 12px/1.2 var(--display); letter-spacing: .04em; font-variant-numeric: lining-nums; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.rule__year:hover { color: var(--ink); }
.rule__year.is-current { color: var(--stamp); }
.rule__year > span { position: relative; display: inline-block; }
.rule__year.is-current > span::after {
  content: ""; position: absolute; left: 50%; top: 16px; width: 18px; margin-left: -9px; border-top: 2px solid var(--stamp);
}
/* the first and last years sit inside the rule's ends */
.rule__years li.is-first { justify-content: flex-start; }
.rule__years li.is-first .rule__year { justify-content: flex-start; padding-left: 0; margin-left: -4px; }
.rule__years li.is-last { justify-content: flex-end; }
.rule__years li.is-last .rule__year { justify-content: flex-end; padding-right: 0; margin-right: -4px; }
.rule__year.is-waiting { animation: year-wait 1s ease-in-out infinite; }
@keyframes year-wait { 50% { opacity: .35; } }

.play {
  grid-area: play; justify-self: start; display: inline-flex; align-items: center; gap: 9px;
  height: 44px; margin: 0; padding: 0 16px 0 12px;
  background: none; color: var(--ink); border: 1px solid var(--ink); border-radius: 22px; cursor: pointer;
  font: 650 11.5px/1 var(--display); letter-spacing: .18em; text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
}
.play:hover { background: var(--paper-2); }
.play svg { width: 18px; height: 18px; flex: none; }
.play .i-stop { display: none; }
.play[data-state="on"] { background: var(--ink); color: var(--paper); }
.play[data-state="on"] .i-play { display: none; }
.play[data-state="on"] .i-stop { display: block; }

/* ---------- the caption panel ---------- */
.panel { width: var(--map); max-width: 100%; margin: 26px auto 0; padding-top: 18px; border-top: 2px solid var(--ink); }
.panel__kicker { margin: 0 0 8px; font: 600 11px/1.3 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); font-variant-numeric: lining-nums; }
.panel__year {
  margin: 0; font: 700 58px/.95 var(--display); letter-spacing: -.01em; font-variant-numeric: lining-nums; color: var(--ink);
}
.panel__year .yr__pre { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 650; letter-spacing: .2em; text-transform: uppercase; color: var(--stamp); }
.panel__title { margin: 12px 0 0; font: 650 23px/1.2 var(--display); text-wrap: balance; }
.panel__note { margin: 10px 0 0; max-width: 46ch; font-size: 17px; line-height: 1.55; text-wrap: pretty; }
.panel__pins { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; font-size: 16px; line-height: 1.35; }
.panel__pins:empty { display: none; }
.panel__pins li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.panel__pins .pin { width: 20px; height: 20px; font-size: 11px; box-shadow: none; transform: translateY(-1px); }
.panel__credit { margin: 14px 0 0; font: 600 10px/1.5 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.panel__credit a { text-underline-offset: 2px; }

/* ---------- sources ---------- */
.sources { margin-top: 44px; padding-top: 34px; border-top: 2px solid var(--ink); }
.sources .credits { font-size: 15px; }
.sources .credits b { font-variant-numeric: lining-nums; }

/* ---------- phones: the play button sits under the rule ---------- */
@media (max-width: 559.98px) {
  .atlas { margin-top: 16px; }
  .atlas__title { font-size: 29px; }
  .atlas__intro { font-size: 16.5px; }
  .map { padding: 7px; outline-offset: 3px; }
  .map::before { inset: 2px; background-size: 100% 4px, 100% 4px, 4px 100%, 4px 100%; }
  .map__tools { top: 14px; right: 14px; gap: 6px; }
  .map__furniture { left: 14px; bottom: 14px; }
  .map__tone { right: 14px; bottom: 14px; }
  .map__tone button { padding: 7px 8px 6px; letter-spacing: .1em; }
  .panel__year { font-size: 50px; }
  .tag--bank { font-size: 9px; letter-spacing: .1em; }
  .tag--bank span { padding: 4px 5px 3px; }
}

/* ---------- wider screens: play beside the rule ---------- */
@media (min-width: 560px) {
  .scale { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "play rule"; column-gap: 18px; }
  .play { margin-top: 0; }
  .atlas__title { font-size: 40px; }
}

/* ---------- desktop: the plate on the left, as large as the window allows; title and caption beside it ---------- */
@media (min-width: 960px) {
  :root { --map: min(1000px, calc(100svh - 196px), calc(100vw - 2 * var(--gutter) - 360px)); }
  .atlas {
    grid-template-columns: var(--map) minmax(0, 1fr); grid-template-rows: auto 1fr;
    grid-template-areas: "map head" "map panel";
    column-gap: clamp(32px, 3.4vw, 56px); margin-top: 24px;
  }
  .map, .scale { margin-left: 0; margin-right: 0; }
  .atlas__head { margin: 0; padding-top: 6px; }
  .atlas__title { font-size: 42px; }
  .panel { width: auto; margin: 26px 0 0; }
  .panel__year { font-size: 72px; }
}
@media (min-width: 1280px) {
  .atlas__title { font-size: 46px; }
  .panel__year { font-size: 80px; }
}