/* 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; }
}
/* Lakechart: kingstonseo.com's identity. This file is APPENDED to cartographer.css when the site is
   built (see lakechart.install_assets), so it only overrides what differs: limestone ground, harbour
   green accent (the variable is still called --rust because the shared rules use that name), Lora for
   display, a chart instead of a river map.

   Contrast (computed, WCAG relative luminance):
     ink #123456 on paper #ECE9E1     10.5:1     deep #0B2238 on paper 13.3:1
     green #1B6B58 on paper             5.3:1     paper on green         5.3:1
     muted #4B5A66 on paper             5.9:1     mint #B7E3D0 on deep  11.5:1
*/

@font-face { font-family: "Lora"; src: url("/fonts/lora-variable.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora Fallback"; src: local("Georgia"), local("Times New Roman"); size-adjust: 91.5%; }

:root[data-vertical="cartographer"] {
  --paper: #ECE9E1;
  --paper-2: #E0DCD0;
  --paper-raised: #F5F3EC;
  --ink-muted: #4B5A66;
  --rust: #1B6B58;
  --rust-deep: #17594A;
  --water: #D3E2E6;
  --band: #BFD3DA;
  --land: #E3DFD3;
  --font-display: "Lora", "Lora Fallback", Georgia, serif;
}

/* headline: Lora runs wider than Cormorant, so it is set a little smaller */
[data-vertical="cartographer"] h1 { font-weight: 600; letter-spacing: -0.02em; line-height: 1.06; font-size: clamp(2.125rem, 1rem + 4vw, 4.125rem); }
[data-vertical="cartographer"] h2 { font-weight: 600; letter-spacing: -0.015em; line-height: 1.12; }
[data-vertical="cartographer"] header.site-header a.brand { font-weight: 600; font-size: 1.625rem; }
.ledger .price-callout .tier-price { font-weight: 600; letter-spacing: -0.025em; }
.cta-band .cta-lead { font-weight: 600; letter-spacing: -0.015em; }
.faq dt { font-weight: 600; font-size: 1.25rem; }

/* shared rules with a hard-coded warm tint: swap for a mint that reads on the dark ledger and footer */
.ledger .price-callout .tier-label { color: #B7E3D0; }
.ledger a:hover, [data-vertical="cartographer"] footer.site-footer a:hover { color: #B7E3D0; }
.hero-map-cap { background: rgba(236, 233, 225, 0.92); }
.skip-link { background: var(--ink); }

/* the chart: land is a limestone shape on paler water, with depth bands outside every shore */
.carto .land { fill: var(--land); fill-rule: evenodd; stroke: none; }
.carto use.band { fill: none; }
.carto use.coast { fill: none; stroke: var(--ink); stroke-width: 1.4; fill-rule: evenodd; }
.carto .isle { font: italic 500 11px var(--font-body); fill: var(--ink-muted); paint-order: stroke; stroke: var(--land); stroke-width: 3px; stroke-linejoin: round; }
.carto .lake { font: 600 11px var(--font-body); letter-spacing: 0.34em; fill: var(--ink-muted); }
.carto .rose circle { fill: none; stroke: var(--ink); stroke-width: 1; opacity: 0.55; }
.carto .rose-n { fill: var(--ink); }
.carto .rose text { font: 600 10px var(--font-body); fill: var(--ink); }
.carto .scale path { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.carto .scale text { font: 600 10px var(--font-body); fill: var(--ink); }
.carto .minor { paint-order: stroke; stroke: var(--water); stroke-width: 3px; stroke-linejoin: round; }
/* Gananoque is a pointer at the chart's edge, not a dot */
.carto .pointer .lbl { fill: var(--ink); }
.carto .pointer.is-here .lbl { fill: var(--rust); }
.carto .pointer .hb { fill: var(--ink-muted); }
.carto .pointer:hover .lbl, .carto .pointer:focus-visible .lbl { fill: var(--rust); text-decoration: underline; }
.carto .hb { text-transform: none; letter-spacing: 0.02em; font-size: 10.5px; }

@media (max-width: 860px) {
  .hero-map .carto { width: 150%; max-width: none; margin-left: -50%; margin-top: 0; }
  .carto .isle { font-size: 13px; }
  .carto .lake { font-size: 12px; }
  .carto .rose text, .carto .scale text { font-size: 12px; }
  .carto .minor { font-size: 12px; }
  .carto .hb { font-size: 12px; }
}

/* per-page phone crops (generated by lakechart.crop_css) */
@media (max-width: 860px) {
  .hero-map.map-kingston .carto { margin-left: -50.0%; margin-top: -12.5%; }
  .hero-map.map-amherstview .carto { margin-left: -36.9%; margin-top: -16.5%; }
  .hero-map.map-napanee .carto { margin-left: 0.0%; margin-top: -7.1%; }
  .hero-map.map-gananoque .carto { margin-left: -50.0%; margin-top: 0.0%; }
  .hero-map.map-home .carto { margin-left: -50.0%; margin-top: -12.5%; }
}