/* Shared look for the map pages: an old road-atlas plate. Cream paper, sepia ink,
   pastel political colours, pale water, brick-red highways. Serif for titles and
   prose (Libre Caslon), a condensed sans for labels and controls (Archivo Narrow).
   Pages link this first and keep only their own map-specific rules. */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@400;500;600&family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&display=swap');

:root {
	color-scheme: light;
	/* paper & ink */
	--paper: #f4ecd8;
	--paper-hi: #faf5e8;      /* panels, cards */
	--paper-lo: #ebe0c4;      /* hover, active controls */
	--ink: #2b2118;
	--muted: #6f604b;
	--faint: #a3927a;
	--rule: #8a7556;          /* strong lines, borders */
	--line: #d6c6a4;          /* hairlines, table rules */
	--accent: #9b2d20;        /* links, selection: brick red */
	--focus: #2b2118;

	/* geography */
	--water: #b9d7e3;
	--water-edge: #7fa9bb;
	--water-ink: #3d6b80;
	--land: #efe3c5;
	--land-edge: #b9a47e;
	--park: #d5e3bd;
	--park-edge: #8fa875;
	--highway: #c0392b;
	--highway-case: #faf5e8;
	--street: #6b5a46;

	/* political pastels, in the order neighbours should get them */
	--p1: #f2c6c2;  /* pink */
	--p2: #f3e3a1;  /* yellow */
	--p3: #cfe5c0;  /* mint */
	--p4: #d9cbe6;  /* lilac */
	--p5: #f6d2a8;  /* peach */
	--p6: #c9dfe8;  /* sky */
	--p7: #e3dcb0;  /* sand */

	--serif: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
	--sans: 'Archivo Narrow', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;

	/* old names some pages still use */
	--bg: var(--paper);
	--panel: var(--paper-hi);
	--text: var(--ink);
	--border: var(--rule);
}

* { box-sizing: border-box; }
html { background: var(--paper); }
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font: 15px/1.55 var(--serif);
	-webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1200px; margin: 0 auto; padding: 20px 16px 40px; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink); }

/* masthead: running head, page title, plate subtitle */
.atlas-head { border-bottom: 3px double var(--rule); padding-bottom: 10px; margin-bottom: 14px; }
.runhead {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px;
	font: 500 11px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.runhead a { color: var(--muted); text-decoration: none; }
.runhead a:hover, .runhead a.on { color: var(--accent); }
.runhead nav { display: flex; flex-wrap: wrap; gap: 4px 0; }
/* each region's maps, headed by the region in ink */
.runhead .grp { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 0 14px; }
.runhead .grp + .grp { border-left: 1px solid var(--line); }
.runhead .grp:last-child { padding-right: 0; }
.runhead .grp b { color: var(--ink); font-weight: 600; }
h1 {
	font: 400 30px/1.15 var(--serif); letter-spacing: .06em; text-transform: uppercase;
	margin: 10px 0 2px; color: var(--ink);
}
h1 a { color: inherit; text-decoration: none; }
h1 .of { font-style: italic; text-transform: none; letter-spacing: 0; color: var(--muted); font-size: 22px; }
h2 {
	font: 600 13px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase;
	color: var(--ink); margin: 26px 0 10px; border-bottom: 1px solid var(--line); padding-bottom: 4px;
}
.sub { color: var(--ink); margin: 0 0 16px; max-width: 780px; }
.nav { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 6px 0 2px; font: 500 13px var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.nav a { color: var(--muted); text-decoration: none; padding-bottom: 2px; }
.nav a.on { color: var(--accent); border-bottom: 2px solid var(--accent); }
.nav a:hover { color: var(--accent); }

/* panels are just ruled boxes on the paper */
.panel {
	background: var(--paper-hi); border: 1px solid var(--rule); border-radius: 0;
	box-shadow: none;
}

/* controls */
button, .btn {
	font: 500 13px/1.2 var(--sans); letter-spacing: .04em;
	background: var(--paper-hi); color: var(--ink); border: 1px solid var(--rule); border-radius: 2px;
	padding: 5px 12px; cursor: pointer;
}
button:hover, button:focus-visible { background: var(--paper-lo); color: var(--ink); }
button.on, .seg button.on { background: var(--ink); color: var(--paper-hi); border-color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input[type=text], input[type=search], select {
	font: 15px var(--serif); background: var(--paper-hi); color: var(--ink);
	border: 1px solid var(--rule); border-radius: 2px; padding: 4px 8px;
}
input[type=range], input[type=checkbox] { accent-color: var(--accent); }
label { font-family: var(--sans); }
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 2px; overflow: hidden; }
.seg button { border: 0; border-radius: 0; background: var(--paper-hi); color: var(--muted); }
.seg button + button { border-left: 1px solid var(--rule); }

/* the map itself: water, a single neatline */
.mapframe, .mapbox { border: 1px solid var(--rule); outline: 1px solid var(--line); outline-offset: 3px; background: var(--water); }

/* map labels */
.lbl, .map-label { font-family: var(--sans); fill: var(--ink); }
.water-label { font-family: var(--serif); font-style: italic; fill: var(--water-ink); letter-spacing: .08em; }

/* hover tooltips */
.atlas-tip, #tip, .ctip {
	background: var(--paper-hi); color: var(--ink); border: 1px solid var(--rule); border-radius: 0;
	box-shadow: 2px 2px 0 rgba(43,33,24,.18); font: 13px/1.35 var(--sans);
}

/* tables */
table { width: 100%; border-collapse: collapse; font: 13px/1.35 var(--sans); }
th {
	font-weight: 600; text-align: left; color: var(--ink); letter-spacing: .06em; text-transform: uppercase; font-size: 11px;
	border-bottom: 1.5px solid var(--rule); padding: 5px 8px; background: var(--paper-hi);
}
td { padding: 4px 8px; border-bottom: 1px solid var(--line); }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover, tbody tr.hl { background: var(--paper-lo); }

/* notes and sources */
.notes { color: var(--muted); font-size: 13px; line-height: 1.5; }
.notes li, .notes p { margin: 0 0 6px; }

/* compass (from mtlmap.js) */
.north { position: absolute; right: 52px; top: 8px; display: flex; flex-direction: column; align-items: center; gap: 1px; font: 500 10px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.north-ring { fill: var(--paper-hi); stroke: var(--rule); }
.north-head { fill: var(--accent); }
.north-tail { fill: var(--faint); }
.north-n { fill: var(--ink); font: 700 7px var(--serif); }

/* Mount Royal park & cemeteries (from mtlmap.js) */
.park { fill: url(#park-hatch); stroke: var(--park-edge); stroke-width: 1; vector-effect: non-scaling-stroke; }
.park-bg { fill: var(--park); }
.park-line { stroke: var(--park-edge); stroke-width: .5; }

@media (max-width: 600px) {
	.runhead nav { flex-direction: column; }
	.runhead .grp, .runhead .grp:last-child { padding: 0; }
	.runhead .grp + .grp { border-left: 0; }
	h1 { font-size: 23px; }
	h1 .of { font-size: 18px; }
	body { font-size: 14.5px; }
}