/* Cartographer: niagaraseo.com's own identity. Loaded after site.css, only on this site.
   Paper ground, navy ink (#123456 is the brand anchor, used as the text colour), one rust
   accent, Cormorant Garamond for display and Inter for text. Everything here is external
   CSS because the site's CSP forbids inline styles.

   Contrast (computed, WCAG relative luminance):
     ink #123456 on paper #F4F0E6       11.2:1     deep #0B2238 on paper 14.2:1
     rust #B23A18 on paper              5.3:1      paper on rust          5.3:1
     muted #4A5A6A on paper             6.2:1      paper on deep         14.2:1
   The page is light only: color-scheme is pinned so an OS dark mode cannot half-apply the
   shared dark tokens to a design that was drawn for paper. */

/* ── fonts: self-hosted, metric-matched fallbacks so the swap does not move the layout ── */
@font-face { font-family: "Cormorant Garamond"; src: url("/fonts/cormorant-garamond-variable.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Fallback"; src: local("Georgia"), local("Times New Roman"); size-adjust: 83.7%; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 88.7%; }

/* ── tokens ── */
:root[data-vertical="cartographer"] {
  color-scheme: light;
  --paper: #F4F0E6;
  --paper-2: #EAE4D6;
  --paper-raised: #FBF9F3;
  --ink: #123456;
  --deep: #0B2238;
  --ink-muted: #4A5A6A;
  --line: rgba(18, 52, 86, 0.28);
  --rust: #B23A18;
  --rust-deep: #8F2D12;
  --accent: var(--rust);
  --accent-deep: var(--rust-deep);
  --gold-hairline: var(--rust);
  --link: #123456;
  --link-strong: #0B2238;
  --water: #D5E1E8;
  --band: #C2D3DE;
  --font-body: "Inter", "Inter Fallback", system-ui, sans-serif;
  --font-display: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  --gutter: clamp(16px, 4vw, 48px);
  --wrap-max: 1200px;
  --measure: 34rem;
  --max-width: 34rem;
}

[data-vertical="cartographer"] body {
  background-color: var(--paper);
  background-image: none;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
[data-vertical="cartographer"] a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
[data-vertical="cartographer"] a:hover { color: var(--rust); }
[data-vertical="cartographer"] a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 2px; }

.skip-link { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--ink); color: var(--paper) !important; padding: 12px 16px; border-radius: 2px; text-decoration: none; }
.skip-link:focus { top: 8px; }

/* ── header ── */
[data-vertical="cartographer"] header.site-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--paper); color: var(--ink);
  padding: 0; border-bottom: 1px solid var(--line);
}
[data-vertical="cartographer"] header.site-header .wrap {
  width: min(100% - 2 * var(--gutter), var(--wrap-max)); max-width: none; margin: 0 auto; padding-inline: 0;
  min-height: 72px; display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 8px 32px;
}
[data-vertical="cartographer"] header.site-header a.brand {
  color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: 1.75rem; line-height: 1;
  letter-spacing: -0.01em; text-decoration: none;
}
.site-header .brand small {
  display: block; margin-top: 4px; font: 500 0.6875rem/1.2 var(--font-body);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted);
}
[data-vertical="cartographer"] nav.site-nav { display: flex; gap: 32px; margin-left: auto; background: none; border: 0; padding: 0; font: 500 0.9375rem var(--font-body); }
nav.site-nav a { color: var(--ink); text-decoration: none; padding: 12px 0; border-bottom: 2px solid transparent; }
nav.site-nav a:hover, nav.site-nav a[aria-current="page"] { border-bottom-color: var(--rust); color: var(--ink); }
[data-vertical="cartographer"] header.site-header a.phone {
  color: var(--ink); font: 600 0.9375rem var(--font-body); white-space: nowrap;
  border: 2px solid var(--ink); border-radius: 2px; padding: 10px 18px; background: none;
}
[data-vertical="cartographer"] header.site-header a.phone:hover { background: var(--ink); color: var(--paper); }

/* ── page frame: a three-column grid so full-bleed bands and the reading column share edges ── */
[data-vertical="cartographer"] main {
  max-width: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, var(--wrap-max)) minmax(var(--gutter), 1fr);
}
main > * { grid-column: 2; }
main > :not(.hero):not(.ledger):not(.cta-band) { max-width: var(--measure); }
main > .hero, main > .ledger, main > .cta-band { grid-column: 1 / -1; max-width: none; }
main > .card-grid, main > .table-wrap, main > figure, main > .area-cards { max-width: 100%; }

/* ── hero ── */
.hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, var(--wrap-max)) minmax(var(--gutter), 1fr);
  padding: clamp(40px, 7vw, 96px) 0 clamp(40px, 6vw, 88px);
  border-bottom: 1px solid var(--line);
}
.hero-inner { grid-column: 2; position: relative; z-index: 1; max-width: var(--measure); }
.hero.has-map { min-height: min(78vh, 760px); min-height: min(78svh, 760px); }
.hero h1 .num { color: var(--rust); font-variant-numeric: lining-nums; }
.hero.has-map .hero-inner { max-width: min(46vw, 640px); }
.kicker {
  font: 600 0.75rem/1.3 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--rust); font-variant: normal; margin: 0 0 24px;
}
[data-vertical="cartographer"] h1 {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.015em;
  font-size: clamp(2.5rem, 1.2rem + 5.4vw, 5.5rem); line-height: 0.98; margin: 0 0 32px; text-wrap: balance; color: var(--ink);
}
[data-vertical="cartographer"] .dek {
  font-family: var(--font-body); font-style: normal; font-weight: 400; color: var(--deep);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.5; max-width: 32rem; margin: 0 0 40px;
}
.hero.has-map .dek { margin-bottom: 40px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 24px; }
.hero-who { display: flex; align-items: center; gap: 16px; }
.hero-who img { display: block; width: 72px; height: 72px; object-fit: cover; border: 1px solid var(--ink); padding: 3px; background: var(--paper); border-radius: 2px; }
.hero-who p { margin: 0; font-size: 0.9375rem; line-height: 1.45; color: var(--ink-muted); }
.hero-who strong { color: var(--ink); font-weight: 600; }

/* ── the map ── */
.hero-map {
  position: absolute; z-index: 0; bottom: 0; right: 0; width: min(52vw, 900px);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%), linear-gradient(to bottom, transparent 0, #000 5%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 5%), linear-gradient(to bottom, transparent 0, #000 5%);
  mask-composite: intersect;
}
.carto { display: block; width: 100%; height: auto; }
.carto .fill { fill: var(--water); }
.carto .band { fill: none; stroke: var(--band); stroke-linejoin: round; }
.carto .b3 { stroke-width: 34; opacity: 0.35; } .carto .b2 { stroke-width: 22; opacity: 0.55; } .carto .b1 { stroke-width: 11; opacity: 0.8; }
.carto .depth path { fill: none; stroke: var(--ink); stroke-width: 1; opacity: 0.16; }
.carto .coast { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.carto .rivedge { fill: none; stroke: var(--ink); stroke-width: 16.5; }
.carto .riverwide { fill: none; stroke: var(--water); stroke-width: 15; }
.carto .canal { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 1 5; stroke-linecap: round; }
.carto .border { fill: none; stroke: var(--rust); stroke-width: 1.6; stroke-dasharray: 7 5; }
.carto .reveal { stroke-dasharray: 1500; stroke-dashoffset: 0; }
.carto .nation { font: 600 13px var(--font-body); letter-spacing: 0.42em; fill: var(--ink); opacity: 0.22; }
.carto .lake { font: 600 10px var(--font-body); letter-spacing: 0.32em; fill: var(--ink-muted); }
.carto .bridge path { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.carto .bridge text, .carto .minor { font: 500 11px var(--font-body); fill: var(--ink-muted); }
.carto .hit { fill: transparent; }
.carto .city .dot { fill: var(--ink); stroke: var(--paper); stroke-width: 2; }
.carto .city .lbl { font: 600 13px var(--font-body); fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.carto .city { cursor: pointer; }
.carto .city:hover .dot, .carto .city:focus-visible .dot { fill: var(--rust); }
.carto .city:hover .lbl, .carto .city:focus-visible .lbl { fill: var(--rust); text-decoration: underline; }
.carto .city:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.carto .is-here .dot { fill: var(--rust); }
.carto .is-here .lbl { font: 700 14px var(--font-body); fill: var(--rust); }
.carto .ring { fill: none; stroke: var(--rust); stroke-width: 1.5; opacity: 0.55; }
/* home base: when it is not the page's subject it turns ink and square-cornered, so the map has ONE rust "you" */
.carto .home:not(.is-here) .dot { fill: var(--ink); }
.carto .home:not(.is-here) .ring { stroke: var(--ink); stroke-dasharray: 3 3; opacity: 0.7; }
.carto .home:not(.is-here) .lbl { font: 700 14px var(--font-body); fill: var(--ink); }
.carto .hb { font: 600 9.5px var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; fill: var(--ink-muted); paint-order: stroke; stroke: var(--paper); stroke-width: 3px; }
.hero-map-cap { position: absolute; right: var(--gutter); bottom: 12px; margin: 0; font: 500 0.6875rem var(--font-body); letter-spacing: 0.06em; color: var(--ink-muted); }
@media (prefers-reduced-motion: no-preference) {
  .carto .reveal { stroke-dashoffset: 1500; animation: carto-draw 2.4s 0.3s ease-out forwards; }
  @keyframes carto-draw { to { stroke-dashoffset: 0; } }
}

/* ── buttons ── */
[data-vertical="cartographer"] .cta-btn {
  display: inline-flex; align-items: center; min-height: 56px; padding: 0 28px;
  font: 600 1.0625rem var(--font-body); text-decoration: none; border-radius: 2px; border: 2px solid var(--ink);
}
[data-vertical="cartographer"] .cta-btn-primary { background: var(--rust); border-color: var(--rust); color: var(--paper); box-shadow: none; }
[data-vertical="cartographer"] .cta-btn-primary:hover, [data-vertical="cartographer"] .cta-btn-primary:focus { background: var(--rust-deep); border-color: var(--rust-deep); color: var(--paper); box-shadow: none; }
[data-vertical="cartographer"] .cta-btn-secondary { background: var(--paper); color: var(--ink); padding: 0 28px; }
[data-vertical="cartographer"] .cta-btn-secondary:hover, [data-vertical="cartographer"] .cta-btn-secondary:focus { background: var(--ink); color: var(--paper); }

/* ── prose ── */
[data-vertical="cartographer"] h2 {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); line-height: 1.08;
  letter-spacing: -0.01em; margin: 64px 0 16px; padding-top: 0; border-top: 0; color: var(--ink);
}
main > h2:first-of-type { margin-top: 64px; }
[data-vertical="cartographer"] h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.15; margin: 32px 0 8px; }
[data-vertical="cartographer"] main p { margin: 0 0 1.1em; }
[data-vertical="cartographer"] main ul li::marker { color: var(--rust); }
[data-vertical="cartographer"] main > .hero + * { margin-top: clamp(40px, 6vw, 72px); }
[data-vertical="cartographer"] .faq dt { font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; line-height: 1.2; margin: 28px 0 6px; color: var(--ink); }
.faq dd { margin: 0 0 8px; padding-left: 0; }
[data-vertical="cartographer"] blockquote { border-left: 3px solid var(--rust); margin: 32px 0; padding: 4px 0 4px 24px; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.3; }

/* ── the ledger (homepage price tiers, restyled; the markup and copy are the generator's) ── */
.ledger {
  background: var(--deep); color: var(--paper);
  display: grid; grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, var(--wrap-max)) minmax(var(--gutter), 1fr);
  padding: clamp(56px, 8vw, 96px) 0; margin-top: 0;
}
main > .hero + .ledger { margin-top: 0; }
.ledger > * { grid-column: 2; max-width: none; }
.ledger h2 { color: var(--paper); margin: 0 0 16px; font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem); line-height: 1; max-width: 16ch; }
.ledger > p { max-width: 38rem; color: #E4E9EE; margin: 0 0 20px; }
.ledger a { color: var(--paper); }
.ledger a:hover { color: #F0B9A5; }
.ledger .price-callout {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "label list" "price list";
  column-gap: 48px; align-content: start;
  background: none; border: 0; border-top: 1px solid rgba(244, 240, 230, 0.35); border-radius: 0; box-shadow: none;
  padding: 32px 0; margin: 0;
}
.ledger .price-callout:last-of-type { border-bottom: 1px solid rgba(244, 240, 230, 0.35); }
.ledger .price-callout.tier-better { border-bottom: 0; }
.ledger .price-callout .tier-label { grid-area: label; font: 600 0.75rem/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: #F0B9A5; margin: 0 0 12px; }
.ledger .price-callout .tier-price { font-variant-numeric: lining-nums; grid-area: price; font: 600 clamp(3.25rem, 2rem + 5vw, 6rem)/0.9 var(--font-display); letter-spacing: -0.02em; color: var(--paper); margin: 0; }
.ledger .price-callout ul { grid-area: list; margin: 0; padding: 0; list-style: none; }
.ledger .price-callout ul li { position: relative; padding: 0 0 0 20px; margin: 0 0 10px; font-size: 1.0625rem; line-height: 1.5; color: #EDEFF2; }
.ledger .price-callout ul li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 10px; height: 2px; background: var(--rust); border: 0; }
.ledger .own-band {
  background: none; border: 0; border-top: 2px solid var(--rust); border-radius: 0; box-shadow: none;
  padding: 24px 0 0; margin: 48px 0 0; color: var(--paper); max-width: 44rem;
}
.ledger .own-band p { color: #EDEFF2; }
.ledger .own-band .own-mark { display: none; }

/* ── ruled lists instead of cards: areas hub, guides hub ── */
[data-vertical="cartographer"] .area-card {
  background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 28px 0; margin: 0;
}
[data-vertical="cartographer"] main > .area-cards { max-width: none; }
.area-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 64px); margin-top: 8px; border-bottom: 1px solid var(--line); }
@media (max-width: 1100px) { .area-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
[data-vertical="cartographer"] .area-card h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin: 0 0 8px; line-height: 1.1; }
[data-vertical="cartographer"] .area-card { position: relative; }
.area-card h2 a { text-decoration: none; }
.area-card h2 a::after { content: ""; position: absolute; inset: 0; }
.area-card h2 a:hover { text-decoration: underline; text-decoration-color: var(--rust); }
.area-card p { color: var(--ink-muted); max-width: 36rem; }

/* ── tables, figures, callouts: token-driven components, tuned to the paper look ── */
[data-vertical="cartographer"] .table-wrap { background: var(--paper-raised); border: 1px solid var(--line); border-radius: 2px; }
[data-vertical="cartographer"] .table-wrap thead th { font-family: var(--font-body); border-bottom: 2px solid var(--rust); }
[data-vertical="cartographer"] .note, [data-vertical="cartographer"] .guide-cta-inline { background: var(--paper-2); border-radius: 2px; }

/* ── the closing call to action, then the footer ── */
[data-vertical="cartographer"] .cta-band {
  margin: clamp(56px, 8vw, 96px) 0 0; padding: clamp(48px, 7vw, 80px) 0; border-top: 0; background: var(--paper-2);
  display: grid; grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, var(--wrap-max)) minmax(var(--gutter), 1fr); width: auto;
}
main > .ledger + .cta-band { margin-top: 0; }
.cta-band-inner { grid-column: 2; max-width: none; }
[data-vertical="cartographer"] .cta-band .cta-lead { font: 600 clamp(2rem, 1.2rem + 3vw, 3.25rem)/1.02 var(--font-display); margin: 0 0 24px; color: var(--ink); letter-spacing: -0.01em; }
[data-vertical="cartographer"] .cta-band .cta-note { color: var(--ink-muted); margin-top: 16px; }
[data-vertical="cartographer"] .cta-buttons { gap: 16px; }
[data-vertical="cartographer"] footer.site-footer { background: var(--deep); color: #E4E9EE; border: 0; padding: 40px 0 48px; }
[data-vertical="cartographer"] footer.site-footer .wrap { width: min(100% - 2 * var(--gutter), var(--wrap-max)); max-width: none; margin: 0 auto; padding: 0; font: 400 0.9375rem/1.6 var(--font-body); color: #E4E9EE; }
[data-vertical="cartographer"] footer.site-footer a { color: var(--paper); }
[data-vertical="cartographer"] footer.site-footer a:hover { color: #F0B9A5; }
[data-vertical="cartographer"] footer.site-footer .disclosure { color: #C5CFD9; margin-top: 8px; }

/* ── mobile call/email bar: appears once the page's own buttons scroll away ── */
.cta-bar { display: none; }
.cta-bar.is-hidden { transform: translateY(100%); visibility: hidden; transition: transform 0.25s ease, visibility 0s 0.25s; }

@media (max-width: 860px) {
  [data-vertical="cartographer"] header.site-header { position: static; }
  [data-vertical="cartographer"] header.site-header .wrap { min-height: 0; padding-top: 14px; padding-bottom: 6px; justify-content: space-between; gap: 4px 16px; }
  [data-vertical="cartographer"] nav.site-nav { order: 3; flex: 1 1 100%; margin: 0; gap: 8px; overflow-x: auto; }
  nav.site-nav a { min-width: 44px; min-height: 44px; padding: 12px 8px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
  [data-vertical="cartographer"] header.site-header a.phone { order: 2; padding: 8px 14px; min-height: 44px; display: inline-flex; align-items: center; }
  .hero { padding: 0 0 32px; display: flex; flex-direction: column; }
  .hero-inner, .hero.has-map .hero-inner { max-width: none; padding: 32px var(--gutter) 0; order: 2; }
  .hero.has-map { min-height: 0; }
  .hero-map { position: relative; order: 1; width: 100%; overflow: hidden; aspect-ratio: 1.55; -webkit-mask-image: none; mask-image: none; }
  .hero-map .carto { width: 125%; max-width: none; margin-left: -25%; margin-top: -34%; }
  .hero-map-cap { left: var(--gutter); right: auto; top: 5px; bottom: auto; font-size: 0.625rem; }
  .hero-map-cap { display: block; }
  .kicker { display: none; }
  .hero-actions .cta-btn { flex: 1 1 100%; justify-content: center; }
  .carto .city .lbl { font-size: 16px; } .carto .home .lbl { font-size: 17px; }
  .carto .bridge text, .carto .minor { font-size: 13px; } .carto .lake { font-size: 12px; }
  .carto .city.c-wainfleet:not(.is-here), .carto .city.c-st-catharines:not(.is-here) { display: none; }
  .carto .hb { font-size: 12px; }
  .hero-map-cap .capx { display: none; }
  .area-cards { grid-template-columns: 1fr; }
  .ledger .price-callout { grid-template-columns: 1fr; grid-template-areas: "label" "price" "list"; }
  .ledger .price-callout .tier-price { margin-bottom: 20px; }
  .cta-bar { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--ink); padding-bottom: env(safe-area-inset-bottom); transition: transform 0.25s ease; }
  .cta-bar a { display: flex; align-items: center; justify-content: center; min-height: 56px; color: var(--paper); font: 600 1rem var(--font-body); text-decoration: none; }
  .cta-bar a:first-child { background: var(--rust); }
  [data-vertical="cartographer"] body { padding-bottom: 64px; }
}
@media (forced-colors: active) {
  .carto .fill, .carto .riverwide { fill: Canvas; stroke: CanvasText; }
  .cta-btn { border: 2px solid ButtonText; }
}
@media print {
  .cta-bar, .hero-map, .skip-link { display: none !important; }
  [data-vertical="cartographer"] header.site-header { position: static; }
  .ledger, [data-vertical="cartographer"] footer.site-footer { background: none; color: #000; }
}

/* about-page portrait caption: sentence case (small-caps mangled the proper noun), left aligned,
   and the name and town are kept whole with non-breaking spaces in the copy */
[data-vertical="cartographer"] .about-figure figcaption { font-variant: normal; letter-spacing: normal; text-align: left; hyphens: none; }

/* real photography: a "field note", a photo framed like a print with a one-line caption.
   Author it in a page's markdown as a raw HTML block:
   <figure class="field-note"><img src="/images/peace-bridge.webp" alt="..." width="1200" height="800" loading="lazy"><figcaption>Peace Bridge, from the Fort Erie side</figcaption></figure> */
[data-vertical="cartographer"] figure.field-note { margin: 40px 0; max-width: 100%; }
.field-note img { display: block; width: 100%; height: auto; border: 1px solid var(--ink); padding: 5px; background: var(--paper); border-radius: 2px; }
.field-note figcaption { margin-top: 10px; font: 600 0.75rem/1.4 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }

/* "you are here": the current town gets the same ring home base has, in rust; the caption reads over water */
.carto .is-here .ring { stroke: var(--rust); opacity: 0.8; }
.hero-map-cap { text-shadow: 0 0 3px var(--paper), 0 0 3px var(--paper), 0 0 6px var(--paper); }
.hero-map-cap { text-shadow: none; background: rgba(244, 240, 230, 0.92); padding: 1px 6px; border-radius: 2px; }

/* ── the map's language in the body prose, at low volume ───────────────────────────────────
   Each section heading gets a dotted "canal" leader that ends in a town dot, the same marks the
   hero map is drawn with, so a reader who has scrolled past the hero can still tell who made
   this. Direct children of main only: hub cards, the ledger and the FAQ keep their own headings. */
[data-vertical="cartographer"] main > h2::before {
  content: ""; display: block; height: 9px; margin-bottom: 16px;
  background:
    radial-gradient(circle at 4.5px 4.5px, var(--rust) 4px, transparent 4.6px) 0 0 / 9px 9px no-repeat,
    repeating-linear-gradient(90deg, rgba(18, 52, 86, 0.55) 0 2px, transparent 2px 8px) 16px 4px / calc(100% - 16px) 1px no-repeat;
}
@media (forced-colors: active) { [data-vertical="cartographer"] main > h2::before { display: none; } }

/* one small drawing where the copy is genuinely spatial (two listings, one shop), same pen as the map */
[data-vertical="cartographer"] figure.carto-fig { margin: 40px 0; max-width: 100%; }
.carto-fig svg { display: block; width: 100%; height: auto; }
.carto-fig .cf-line { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 1 5; stroke-linecap: round; }
.carto-fig .cf-dot { fill: var(--ink); }
.carto-fig .cf-ring { fill: none; stroke: var(--rust); stroke-width: 1.5; opacity: 0.8; }
.carto-fig .cf-here { fill: var(--rust); }
.carto-fig .cf-lbl { font: 600 13px var(--font-body); fill: var(--ink); }
.carto-fig .cf-strong { fill: var(--rust); font-weight: 700; }
.carto-fig figcaption { margin-top: 10px; font: 500 0.8125rem/1.45 var(--font-body); color: var(--ink-muted); }
@media (max-width: 860px) { .carto-fig .cf-lbl { font-size: 21px; } }

/* the map caption lives beside the map (not inside it) so it can never sit on a label:
   over the water at the bottom right on desktop, in normal flow directly under the strip on phones */
.hero-map-cap { z-index: 1; }
@media (max-width: 860px) {
  .hero-map-cap { position: static; order: 1; margin: 0; padding: 6px var(--gutter) 0; background: none; font-size: 0.6875rem; text-align: left; }
}

/* per-town phone crops (generated by cartographer.crop_css) */
@media (max-width: 860px) {
  .hero-map.map-fort-erie .carto { margin-left: -25.0%; margin-top: -51.1%; }
  .hero-map.map-buffalo-ny .carto { margin-left: -25.0%; margin-top: -51.1%; }
  .hero-map.map-niagara-falls .carto { margin-left: -23.0%; margin-top: -10.5%; }
  .hero-map.map-niagara-falls-ny .carto { margin-left: -25.0%; margin-top: -9.0%; }
  .hero-map.map-welland .carto { margin-left: 0.0%; margin-top: -35.6%; }
  .hero-map.map-port-colborne .carto { margin-left: 0.0%; margin-top: -51.1%; }
  .hero-map.map-wainfleet .carto { margin-left: 0.0%; margin-top: -51.1%; }
  .hero-map.map-st-catharines .carto { margin-left: 0.0%; margin-top: 0.0%; }
}