/* The map page (templates/map.html, static/map.js): docs/journey_design.md 2.1-2.4, 4.5, 8 ("Kartblad").
Loaded after app.css on the map page only. Phone first; the side panel layout from 45rem (tablet and desktop), the
product name in the bar from 67.5rem. Light only. No inline styles anywhere (CSP): map.js positions things through
the CSSOM (element.style) and sets --dock, the height of whatever covers the bottom of the map on a phone.
Serif: Kalmark Serif, our cut of Source Serif 4 (vendor/fonts, SIL OFL; kartblad.css says more), the fallback stack
until it has loaded (swap). */
@font-face { font-family: "Kalmark Serif"; font-style: normal; font-weight: 400; font-display: swap;
src: url("vendor/fonts/KalmarkSerif.woff2") format("woff2"); }
:root {
--bone: #EFEEEC; --plate: #FFFFFF; --plate-2: #F7F6F4;
--ink: #1F2225; --ink-2: #4A5057; --ink-3: #5E646B;
--rule: #D8D4CC; --rule-2: #8C877F;
--amber: #F5B301; --amber-wash: #FBF4DA; --error: #B3261E;
--hx-1: #E0CAD3; --hx-2: #C2A0AE; --hx-3: #A4778A; --hx-4: #824E65; --hx-5: #602542; /* map.js reads these */
--serif: "Kalmark Serif", Charter, "Sitka Text", Cambria, Georgia, serif;
/* the fallback at display sizes: Windows' Sitka in its heading and display optical sizes, which "Sitka Text"
(made for 12-16 px) sets loose and heavy at 24-56 px */
--serif-display: "Kalmark Serif", Charter, "Sitka Heading", "Sitka Text", Cambria, Georgia, serif; /* 24-44 px */
--sans: "Helvetica Neue", "Segoe UI", Helvetica, system-ui, -apple-system, Roboto, Arial, sans-serif;
--e1: 0 1px 0 rgba(31, 34, 37, .04), 0 14px 36px -10px rgba(31, 34, 37, .22);
--sheet: 0 -10px 30px -12px rgba(31, 34, 37, .3);
--ease: cubic-bezier(.2, .7, .2, 1);
color-scheme: light;
}
html:has(body.page-map) { height: 100%; }
body.page-map {
height: 100%; margin: 0; overflow: hidden; background: var(--bone); color: var(--ink);
font: 400 16px/1.5 var(--sans); font-kerning: normal;
}
.page-map main { max-width: none; margin: 0; padding: 0; }
.page-map a { color: inherit; text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: .2em;
text-decoration-skip-ink: none; } /* one continuous amber rule, not a dash per word */
.page-map :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 5px var(--amber); }
.page-map .skip { background: var(--ink); color: var(--bone); z-index: 40; }
/* the reset weighs one class (:where adds nothing), so a class rule further down sets its own margins (.q-h) */
.page-map :where(h1, h2, p) { margin: 0; }
.ic { display: block; flex: none; }
/* --- the map itself */
.mapapp { position: fixed; inset: 0; }
.map { position: absolute; inset: 0; background: var(--bone); } /* the basemap's ground (web/basemap.py) */
.map:focus-within .maplibregl-canvas:focus-visible { outline: none; box-shadow: none; }
.crosshair { display: none; position: fixed; z-index: 5; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px;
pointer-events: none; }
.crosshair::before, .crosshair::after { content: ""; position: absolute; background: var(--ink); box-shadow: 0 0 0 2px var(--plate); }
.crosshair::before { left: 13px; top: 0; width: 2px; height: 28px; }
.crosshair::after { top: 13px; left: 0; height: 2px; width: 28px; }
.map:focus-within ~ .crosshair { display: block; }
.map-note {
position: fixed; z-index: 25; top: 72px; left: 50%; transform: translateX(-50%); width: max-content;
max-width: calc(100% - 24px); padding: 8px 12px; background: var(--ink); color: var(--bone); font-size: 13px; line-height: 1.35;
}
.map-note a { color: inherit; }
/* hover tooltip (deck.gl sets its own inline defaults through the CSSOM; these win) */
.hx-tip { z-index: 9 !important; background: var(--ink) !important; color: var(--bone) !important; font: 400 13px/1.3 var(--sans) !important;
padding: 6px 10px !important; border-radius: 0 !important; max-width: 18rem; }
/* --- the top bar (phone: floating controls over the map) */
.mbar { position: fixed; z-index: 20; top: 12px; left: 12px; right: 12px; display: flex; align-items: center; gap: 8px;
pointer-events: none; }
.mbar > * { pointer-events: auto; }
.mbar-logo { height: 44px; padding: 0 12px; margin-right: auto; display: flex; align-items: center;
background: var(--bone); border: 1px solid var(--rule); }
.mbar-logo img { display: block; height: 17px; width: auto; }
.mbar-prod, .mbar-nav { display: none; }
.mbtn { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; background: var(--plate); color: var(--ink);
border: 1px solid var(--rule-2); border-radius: 2px; box-shadow: var(--e1); cursor: pointer; }
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-sheet { position: absolute; right: 0; top: 52px; width: min(18rem, calc(100vw - 24px)); display: grid;
background: var(--plate); border: 1px solid var(--rule); border-top: 2px solid var(--ink); box-shadow: var(--e1); }
.menu-sheet a { min-height: 48px; padding: 12px 16px; display: flex; align-items: center; text-decoration: none;
font-size: 16px; }
.menu-sheet a + a { border-top: 1px solid var(--rule); }
/* browse: the logo gives way to the search field */
.page-map:not(.is-first) .mbar { left: auto; }
.page-map:not(.is-first) .mbar-logo { display: none; }
.page-map:not(.is-first) .mbtn { height: 48px; min-width: 48px; }
.page-map:not(.is-first) .mbar .mbtn { width: 48px; }
/* --- the country chooser (owner 2026-09-30): the hero's two countries, raised on the map as well (map.js) */
.choose { display: grid; gap: 8px; }
.choose-lead { margin: 0; font: 600 13px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.choose-c { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 16px;
background: var(--plate); border: 1px solid var(--rule-2); border-left: 4px solid var(--hx-3); border-radius: 2px;
font: 500 18px/1 var(--sans); color: var(--ink); text-decoration: none;
transition: border-color 200ms var(--ease), background-color 200ms var(--ease); }
.choose-c::after { content: "\2192"; color: var(--ink-2); }
.choose-c.on, .choose-c:hover { border-left-color: var(--hx-5); background: var(--plate-2); }
/* a short screen (a phone on its side): the question on one line and the countries two or more to a row, so all
five fit (one to a row, the sheet ran over the logo and the question, and the card hid three under a scroll) */
@media (max-height: 30rem) {
.is-chooser .hero-t { font-size: 24px; line-height: 28px; }
.choose { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.choose-lead { grid-column: 1 / -1; }
.choose-c { min-height: 44px; padding: 0 12px; font-size: 16px; }
}
.is-chooser .search, .is-chooser .legend-mini, .is-chooser .lgd, .is-chooser .zoom,
.is-chooser .crosshair { display: none !important; }
/* Iceland's box on the chooser (map.js inset): its name, a marker under the box's lower left corner */
.box-name { font: 600 12px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2);
pointer-events: none; }
/* the chosen country in the bar: a link back to the chooser */
.mbar-land { height: 44px; padding: 0 12px; display: flex; align-items: center; gap: 8px; background: var(--plate);
border: 1px solid var(--rule-2); border-radius: 2px; box-shadow: var(--e1); font: 600 14px/1 var(--sans); color: var(--ink);
text-decoration: none; }
.mbar-land::before { content: ""; width: 8px; height: 8px; background: var(--hx-4); transform: rotate(45deg); }
.mbar > .mbar-land { display: none; } /* phones: in the menu (browsing, the bar holds the search) */
/* the language link (templates/_lang.html), twice in the markup and shown once at any width: the bar's on a phone's
first screen (a chip like the country link, where a visitor who cannot read the page lands) and from 45rem (after
the nav); the menu's while browsing on a phone, where the bar holds the search */
.mbar-lang { height: 44px; min-width: 44px; padding: 0 12px; display: flex; align-items: center; justify-content: center;
background: var(--plate); border: 1px solid var(--rule-2); border-radius: 2px; box-shadow: var(--e1);
font: 600 14px/1 var(--sans); color: var(--ink); text-decoration: none; }
.page-map:not(.is-first) .mbar > .mbar-lang, .menu-sheet > .menu-lang { display: none; }
.page-map:not(.is-first) .menu-sheet > .menu-lang { display: flex; }
/* --- side content: phone = separate floating pieces; from 45rem = one panel */
.side { display: contents; }
.sheet-like, .hero, .spot-sec {
position: fixed; left: 0; right: 0; bottom: 0; background: var(--plate); border-radius: 12px 12px 0 0; box-shadow: var(--sheet);
}
.hero { z-index: 10; display: grid; gap: 12px; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); }
.hero-t { font: 400 28px/32px var(--serif-display); letter-spacing: -.015em; text-wrap: balance; }
.hero-nojs { font-size: 15px; color: var(--ink-2); }
.page-map:not(.is-first) .hero {
/* right: the menu (48) + the bar's 12 px + a 6 px gap */
top: 12px; bottom: auto; left: 12px; right: 66px; padding: 0; background: none; box-shadow: none; border-radius: 0; display: block;
}
.page-map:not(.is-first) .hero > :not(.search) { display: none; }
.search { position: relative; }
.search-field { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; background: var(--plate);
border: 1px solid var(--rule-2); border-radius: 2px; color: var(--ink-2); }
.search-field input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ink);
font: 400 16px/1 var(--sans); -webkit-appearance: none; appearance: none; }
.search-field input:focus-visible { outline: none; box-shadow: none; }
/* no native clear button: Chrome draws a blue "x" (the product's only blue) that pushes the typed text out of sight */
.search-field input::-webkit-search-cancel-button, .search-field input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.search-field input::placeholder { color: var(--ink-3); opacity: 1; }
.page-map:not(.is-first) .search-field { box-shadow: var(--e1); }
/* the brand's focus ring (2 px ink, square, amber outside it), also over the browse layout's elevation shadow */
.page-map .search-field:focus-within, .page-map:not(.is-first) .search-field:focus-within {
border-radius: 0; outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 5px var(--amber); }
.search-status { margin-top: 4px; padding: 2px 6px; font-size: 13px; color: var(--ink-2); background: var(--plate); width: fit-content; }
.search-status:empty { display: none; }
/* the hits: under the field and over the map, as tall as the screen has room for (map.js showResults) */
.search-results { position: absolute; z-index: 30; left: 0; right: 0; top: 52px; margin: 0; padding: 4px 0; list-style: none;
overflow-y: auto; background: var(--plate); border: 1px solid var(--rule); border-top: 2px solid var(--ink);
box-shadow: var(--e1); }
.is-first .search-results { top: auto; bottom: 52px; } /* the phone's first screen: the field is at the bottom */
.search-results button { display: block; width: 100%; min-height: 44px; padding: 10px 14px; text-align: left; font: inherit;
font-size: 15px; color: var(--ink); background: none; border: 0; cursor: pointer; }
.search-results button:hover, .search-results button:focus-visible { background: var(--plate-2); }
.search-results small { display: block; font-size: 13px; line-height: 18px; color: var(--ink-3); } /* a hit's kind */
/* another of our countries' address (map.js abroadItem): what it looks like, then its hit there, a link to its map */
.search-abroad { border-bottom: 1px solid var(--rule); }
.search-abroad p { padding: 10px 14px 0; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.search-abroad a { display: block; min-height: 44px; padding: 4px 14px 10px; font-size: 15px; color: var(--ink);
text-decoration: none; }
.search-abroad a:hover, .search-abroad a:focus-visible { background: var(--plate-2); }
/* the spot card (phone: a bottom card) */
.spot-sec { z-index: 12; max-height: 70dvh; overflow: auto; padding: 8px 16px calc(18px + env(safe-area-inset-bottom)); }
.spot-sec::before, .q::before { content: ""; display: block; width: 36px; height: 4px; border-radius: 2px;
background: var(--rule); margin: 0 auto 12px; }
.spot-sec.busy .spot { opacity: .6; transition: opacity 160ms; }
.spot { display: grid; gap: 12px; }
.spot-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.spot-name { min-width: 0; }
.spot-place { font: 400 22px/1.15 var(--serif); letter-spacing: -.01em; overflow-wrap: anywhere; }
.spot-place:focus, .spot-place:focus-visible { outline: none; box-shadow: none; }
.spot-town { font-size: 14px; color: var(--ink-2); margin-top: 2px; }
.spot-msg { font-size: 15px; color: var(--ink-2); }
.band-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 10px 0;
border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.pips { display: block; height: 16px; width: auto; flex: none; }
.band-w { font: 400 18px/1.2 var(--serif); }
.band-of { flex-basis: 100%; font-size: 14px; color: var(--ink-2); font-variant-numeric: lining-nums tabular-nums; }
.spot-rent { font-size: 14px; color: var(--ink-2); margin: 8px 0 0; } /* the local rent class (a word) */
.x { width: 44px; height: 44px; margin: -10px -12px 0 0; display: grid; place-items: center; flex: none; padding: 0;
color: var(--ink-2); background: none; border: 0; cursor: pointer; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px;
border-radius: 2px; border: 1px solid var(--ink); background: var(--plate); color: var(--ink); font: 600 16px/1 var(--sans);
text-decoration: none; cursor: pointer; white-space: nowrap; }
.page-map .btn-p { background: var(--ink); color: var(--bone); }
.btn-p .sq { width: 8px; height: 8px; background: var(--amber); flex: none; }
.btn-q { border-color: transparent; background: transparent; padding: 0 10px; font-weight: 500; }
.btn-b { width: 100%; }
/* legend: compact line on phones (browse), the card on wide screens or behind "?" */
.sws { display: inline-flex; gap: 1px; flex: none; }
.sws .sw { display: block; width: 14px; height: 10px; }
.sw-1 { background: var(--hx-1); } .sw-2 { background: var(--hx-2); } .sw-3 { background: var(--hx-3); }
.sw-4 { background: var(--hx-4); } .sw-5 { background: var(--hx-5); }
.legend-mini { position: fixed; z-index: 8; left: 12px; bottom: calc(var(--dock, 16px) + 12px); display: flex; align-items: center;
gap: 8px; padding: 0 0 0 10px; background: var(--plate); border: 1px solid var(--rule); font-size: 12px;
color: var(--ink-2); }
.is-first .legend-mini { display: none; }
.qbtn { position: relative; width: 24px; height: 24px; margin: 9px 9px 9px 2px; padding: 0; border: 1px solid var(--rule-2);
border-radius: 50%; background: var(--plate); color: var(--ink-2); font: 600 12px/1 var(--sans); cursor: pointer; }
.qbtn::before { content: ""; position: absolute; inset: -10px; }
.lgd { display: none; gap: 8px; padding: 12px 16px; background: var(--plate); border: 1px solid var(--rule);
font-size: 13px; line-height: 1.35; color: var(--ink-2); }
.lgd.open { display: grid; position: fixed; z-index: 13; left: 12px; right: 12px; bottom: calc(var(--dock, 16px) + 64px);
box-shadow: var(--e1); }
.legend-t { font-weight: 600; color: var(--ink); }
/* the Country / Local switch (map.js): only with JS, as the map itself; a 44 px hit area over its 32 px buttons */
.scope { display: none; }
.js .scope { display: inline-flex; flex: none; border: 1px solid var(--rule-2); border-radius: 2px; background: var(--plate); }
.scope button { position: relative; min-height: 30px; padding: 0 10px; border: 0; border-radius: 0; background: none;
font: 600 12px/1 var(--sans); color: var(--ink-2); cursor: pointer; }
.scope button::before { content: ""; position: absolute; inset: -7px 0; }
.scope button[aria-pressed="true"] { background: var(--ink); color: var(--bone); }
.legend-mini .scope { margin-left: -4px; }
/* narrow phones: the switch leaves no room for "weaker ... stronger" beside the attribution's "i"; the ramp and
"?" stay (the full legend names the bands) */
@media (max-width: 24.99rem) { .js .legend-mini > span:not(.sws) { display: none; } }
.lgd .scope { justify-self: start; }
.scope-hint { font-size: 12px; color: var(--ink-3); margin: 0; }
.legend-l { list-style: none; padding: 0; margin: 0; display: grid; gap: 3px; }
.legend-l li { display: flex; align-items: center; gap: 8px; }
.legend-l .sw { display: block; width: 22px; height: 12px; flex: none; }
.legend-res { border-top: 1px solid var(--rule); padding-top: 8px; font-size: 12px; font-variant-numeric: lining-nums tabular-nums; }
.zoom { display: none; }
.attr { position: fixed; z-index: 4; right: 0; bottom: 0; margin: 0; padding: 2px 8px; font-size: 12px; color: var(--ink-2);
background: var(--plate); }
/* MapLibre's compact attribution: above whatever covers the bottom, with a 44 px target */
.page-map .maplibregl-ctrl-bottom-right { bottom: var(--dock, 0px); z-index: 7; }
.page-map .maplibregl-ctrl-attrib { font: 400 12px/1.4 var(--sans); color: var(--ink-2); }
.page-map .maplibregl-ctrl-attrib-button::after { content: ""; position: absolute; inset: -10px; } /* 44 px target */
/* --- the questions: a native