/* Forecast Swiss — the Forecast Network design system, Swiss cut
 *
 * The same system Forecast Arctic wears, readable as one network with it:
 * Overpass / Overpass Mono (Helvetica first where the reader has it — on a Swiss
 * site that is the point rather than an affectation), the guide-sign panel with
 * its keyline, the chip in the shield slot, the exit row, the dashed rule
 * headings, the card grid, the timeline, a dark figure inset for imagery,
 * EB Garamond Italic as the atlas voice, and a dark theme that follows the
 * system or the ☀/☾ toggle.
 *
 * What changes is the light, and here it is the country's own:
 *   - The panel is the flag's red with the flag's white, which is how
 *     Switzerland signs itself everywhere from the railway to the post bus.
 *     The red is spent on the panel and on what is switched on, nowhere else.
 *   - The working accent — Arctic's aurora green — is Enzian blue, the gentian
 *     of the Alpine meadow: the rules, the links, the timeline, the live badge.
 *   - The exits are the yellow Wanderweg arrows of the Swiss hiking network,
 *     and the shield slot carries the model chip (METEOSWISS · ICON-CH1 · 1 KM).
 *   - The mark is the signpost, the paper is snow under an overcast, and the
 *     panel's one ornament is alpenglow rather than an aurora.
 *   - The hero map is a Swiss relief, in Imhof's colours — see tools/hero_relief.py.
 */

:root {
  --paper: #efeeeb;
  --paper2: #e2e0db;
  --card: #ffffff;
  --ink: #15171a;
  --ink2: #42474e;
  --mut: #787d84;
  --line: #cfccc6;
  --line2: #e7e5e0;

  /* The flag — the panel and whatever is switched on. */
  --sign: #d52b1e;
  --sign-dk: #a71d14;
  --sign-tx: #ffffff;
  --sign-sub: #ffdcd6;

  /* Enzian blue — every working accent. */
  --accent: #2456a4;
  --accent-dk: #173d7a;
  --accent-sub: #d3e1fb;

  /* The Wanderweg yellow, the lake and the snow. */
  --wander: #ffd100;
  --wander-ink: #1a1a1a;
  --lake: #4d8ec0;
  --snow: #f7f8fa;
  --amber: #f2ac14;

  --figure: #0b1016;
  --figure-line: #263241;
  --figure-tx: #e6ecf1;
  --figure-mut: #93a2b0;

  --shadow: 0 6px 22px rgba(20, 20, 30, .09);
  --shadow-hi: 0 10px 26px rgba(20, 20, 30, .15);

  /* names the shared explorer modules and older markup still ask for */
  --motorway: var(--accent);
  --motorway-dk: var(--accent-dk);
  --motorway-sub: var(--accent-sub);
  --blue: var(--accent);
  --blue-sub: var(--accent-sub);
  --navy: var(--accent-dk);
  --swiss: var(--sign);

  --font: 'Neue Haas Grotesk', 'Helvetica Neue', Helvetica, 'Overpass', Arial, sans-serif;
  --mono-font: 'Overpass Mono', ui-monospace, monospace;
  --atlas-font: 'EB Garamond', Garamond, Georgia, serif;
  --maxw: 1100px;

  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper); color: var(--ink); font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; }
code { font-family: var(--mono-font); font-size: .92em; background: var(--line2); padding: 1px 4px; border-radius: 3px; }

.mono { font-family: var(--mono-font); font-variant-numeric: tabular-nums; }
.atlas { font-family: var(--atlas-font); font-style: italic; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 18px; }
.wrap-wide { max-width: 1560px; margin: 0 auto; padding: 0 18px; }
/* The `hidden` attribute is a promise the HTML makes, and a layout rule as ordinary
   as `.toolbar .group > div { display: flex }` outranks it on specificity and quietly
   breaks it. Restore it once, globally. */
[hidden] { display: none !important; }
.dim { color: var(--ink2); }
.faint { color: var(--mut); }
.prose p { font-size: 14.5px; font-weight: 600; line-height: 1.6; color: var(--ink2); margin: 0 0 12px; }
.prose p:last-child { margin-bottom: 0; }
.prose a, a.inl { color: var(--accent); font-weight: 800; }

/* ── utility bar ─────────────────────────────────────────── */
.util {
  background: #141619; color: #c9cdd2; border-bottom: 3px solid var(--sign);
  position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 8px rgba(0, 0, 0, .25);
}
.util .bar {
  max-width: 1560px; margin: 0 auto; padding: 0 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 34px; flex-wrap: wrap;
}
.util .brand { display: flex; align-items: center; gap: 8px; }
.util .brand img { width: 18px; height: 20px; display: block; }
.util .mono { font-size: 11px; letter-spacing: .06em; }
.util .lnks { display: flex; gap: 15px; flex-wrap: wrap; }
.util a { color: #eef0f2; font-weight: 700; font-size: 11px; letter-spacing: .06em; }
.util a:hover, .util a[aria-current="page"] { color: var(--sign-sub); text-decoration: none; }
.util a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--sign); }
.util .tt { background: none; border: 0; padding: 0; cursor: pointer; color: #eef0f2;
  font: 700 11px var(--font); letter-spacing: .06em; }
.util .tt:hover { color: var(--sign-sub); }
@media (max-width: 720px) { .util .mono .long { display: none; } }
@media (max-width: 560px) {
  .util .lnks { gap: 11px; }
  .util a.n-home, .util a.n-net { display: none; }
}

/* ── canton strip — the second tier, as Arctic's station strip ── */
.provbar { background: var(--sign-dk); color: var(--sign-sub); border-bottom: 1px solid rgba(0, 0, 0, .25); }
.provbar .bar {
  max-width: 1560px; margin: 0 auto; padding: 5px 18px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.provbar .lbl { font: 700 9px var(--mono-font); letter-spacing: .14em; color: rgba(255, 255, 255, .62); white-space: nowrap; }
.provbar .lnks { display: flex; gap: 3px; flex-wrap: wrap; }
.provbar a { font: 800 11px var(--font); color: #fff; padding: 2px 7px; border-radius: 3px; white-space: nowrap; }
.provbar a:hover { background: rgba(255, 255, 255, .18); text-decoration: none; }
.provbar a[aria-current="page"] { background: #fff; color: var(--sign-dk); }

/* ── guide-sign panel ───────────────────────────────────── */
.sign {
  background: var(--sign); border-radius: 10px; color: var(--sign-tx);
  padding: 26px 24px 24px; position: relative; overflow: hidden;
  box-shadow: inset 0 0 0 4px var(--sign), inset 0 0 0 6px rgba(255, 255, 255, .92), var(--shadow-hi);
}
/* alpenglow across the panel — the only ornament on the site: the last sun on
   the high snow, warm at the top right, and the cool of the valley below */
.sign::before {
  content: ""; position: absolute; inset: 6px; border-radius: 6px; pointer-events: none;
  background:
    radial-gradient(55% 50% at 82% -12%, rgba(255, 196, 150, .34), transparent 70%),
    radial-gradient(38% 34% at 98% 8%, rgba(255, 232, 190, .20), transparent 70%),
    radial-gradient(90% 45% at 26% -24%, rgba(255, 160, 140, .14), transparent 70%),
    radial-gradient(80% 55% at 8% 125%, rgba(70, 10, 20, .22), transparent 62%);
}
.sign > * { position: relative; }
.sign a { color: #fff; }
.signhead { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.signhead .mark {
  width: 74px; height: 74px; flex: none; display: grid; place-items: center;
  background: var(--sign-dk); border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .92), 0 0 0 6px rgba(255, 209, 0, .38), 0 4px 14px rgba(0, 0, 0, .25);
}
.signhead .mark img { width: 44px; height: 56px; display: block; }
.word { font-weight: 900; font-size: clamp(28px, 5.4vw, 52px); line-height: .92; letter-spacing: -.02em; margin: 0; }
.word .yl { color: var(--sign-sub); }
.tag { margin: 8px 0 0; font-weight: 700; font-size: clamp(13px, 2.2vw, 16px); color: var(--sign-sub); letter-spacing: .01em; }

/* Model chip: where a route shield would be, the model you are reading. */
.flag {
  background: #fff; color: #15171a; border-radius: 3px; flex: none;
  padding: 0 0 6px; text-align: center; line-height: 1; min-width: 92px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .2); overflow: hidden;
}
.flag .a { display: block; background: #15171a; color: #fff; font-size: 8.5px; font-weight: 800; letter-spacing: .18em; padding: 4px 8px 3px; }
.flag .b { display: block; font-size: 22px; font-weight: 900; letter-spacing: .02em; padding: 5px 10px 1px; color: var(--sign); }
.flag .c { display: block; font: 700 8.5px var(--mono-font); letter-spacing: .12em; color: #42474e; }

/* The exits are Wanderweg arrows: black on the hiking network's yellow, the
   point on the right, the way every Swiss trail sign points. */
.exits { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; align-items: center; }
.exits .lbl { font-size: 11px; font-weight: 800; letter-spacing: .16em; color: var(--sign-sub); }
.mm {
  background: var(--wander); color: var(--wander-ink); border: 0;
  padding: 7px 20px 7px 11px; font-family: inherit; font-weight: 800;
  font-size: 12px; letter-spacing: .03em; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .18);
}
.sign a.mm { color: var(--wander-ink); }
.mm b { font-weight: 900; margin-right: 4px; color: var(--sign-dk); }
.mm:hover { background: #fff; text-decoration: none; }

/* ── section rule ───────────────────────────────────────── */
section { padding: 26px 0 4px; }
.rule { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.rule .ln { height: 3px; flex: 1; background: repeating-linear-gradient(90deg, var(--accent) 0 18px, transparent 18px 34px); }
.rule h2 { margin: 0; color: var(--accent-dk); font-size: 15px; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; white-space: nowrap; }
.rule .sub { color: var(--mut); font-size: 11px; font-weight: 700; letter-spacing: .06em; }
@media (max-width: 560px) { .rule { flex-wrap: wrap; } .rule .ln { min-width: 40px; } .rule h2 { white-space: normal; line-height: 1.25; } }

/* ── cards and panels ───────────────────────────────────── */
.card-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  overflow: hidden; display: block; color: inherit; box-shadow: var(--shadow);
  transition: transform .14s, box-shadow .14s;
}
a.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hi); text-decoration: none; }
.card .chead {
  background: var(--sign); color: #fff; padding: 9px 14px; font-weight: 900; letter-spacing: .04em;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3);
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.card .chead.blue { background: var(--accent); }
.card .chead.ink { background: #2a2e34; }
.card .chead .k { font: 700 10px var(--mono-font); letter-spacing: .1em; color: var(--sign-sub); }
.card .chead.blue .k { color: var(--accent-sub); }
.card .chead.ink .k { color: #c9ced5; }
.card .cbody { padding: 14px; }
.card h3 { margin: 0 0 5px; font-size: 17px; font-weight: 900; letter-spacing: -.01em; }
.card p { margin: 0; color: var(--ink2); font-size: 13.5px; font-weight: 600; line-height: 1.5; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 16px; box-shadow: var(--shadow); }
/* a long-form page set in a panel (the Alpine method) */
.panel > h1 { margin: 2px 0 8px; font-size: clamp(20px, 3.2vw, 26px); font-weight: 900; letter-spacing: -.01em; }
.panel > h2 { margin: 24px 0 8px; color: var(--accent-dk); font-size: 14px; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; }
.panel > p { font-size: 14.5px; font-weight: 600; line-height: 1.6; color: var(--ink2); margin: 0 0 12px; }
.panel > p.lede { font-size: 16px; color: var(--ink); }
.panel > table { border-collapse: collapse; margin: 4px 0 14px; font-size: 13px; font-variant-numeric: tabular-nums; }
.panel > table th { text-align: left; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); padding: 6px 12px 6px 0; border-bottom: 2px solid var(--line); }
.panel > table td { padding: 6px 12px 6px 0; border-bottom: 1px solid var(--line2); font-weight: 700; }
.panel > pre { font: 600 12.5px/1.5 var(--mono-font); background: var(--paper); border: 1px solid var(--line2); border-radius: 5px; padding: 10px 12px; overflow-x: auto; }

/* ── controls ───────────────────────────────────────────── */
.btn {
  cursor: pointer; border: 1px solid var(--line); background: var(--card); color: var(--ink2);
  border-radius: 3px; font-family: var(--font); font-weight: 700; font-size: 11.5px;
  letter-spacing: .02em; padding: 7px 12px; line-height: 1.3;
}
.btn:hover { border-color: var(--accent); color: var(--ink); }
.btn.on, .btn[aria-pressed="true"] { background: var(--sign); color: #fff; border-color: var(--sign-dk); }
.btn:disabled { opacity: .45; cursor: default; }
.btn-go { background: var(--accent); color: #fff; border-color: var(--accent-dk); font-weight: 900; letter-spacing: .06em; }
.btn-go:hover { background: var(--sign); border-color: var(--sign-dk); color: #fff; }
select, input[type="text"], input[type="search"] {
  background: var(--card); border: 1px solid var(--line); color: var(--ink);
  border-radius: 3px; padding: 6px 9px; font-family: var(--font); font-weight: 700; font-size: 12px;
}
select:focus, input:focus, .btn:focus-visible, .seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
label, .lab { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
input[type="range"] { accent-color: var(--accent); }

/* Segmented control — the speed menu, and anything else that is one choice of a few */
.seg { display: flex; }
.seg button { font: 700 11px var(--mono-font); background: var(--card); color: var(--ink2);
  border: 1px solid var(--line); border-left-width: 0; padding: 5px 8px; cursor: pointer; }
.seg button:first-child { border-left-width: 1px; border-radius: 4px 0 0 4px; }
.seg button:last-child { border-radius: 0 4px 4px 0; }
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.seg button:disabled { cursor: not-allowed; }
/* A segment the active model or cycle cannot drive at all: greyed as a block rather
   than hidden, because a control that quietly vanishes reads as a bug. */
.seg.unavailable { opacity: .35; }
.seg.unavailable button { cursor: not-allowed; text-decoration: line-through; text-decoration-thickness: 1px; }

/* Unit toggle — a primary segmented control, so it is a touch larger and wears the panel red */
#units button { font: 800 12px var(--mono-font); padding: 6px 11px; }
#units button.on { background: var(--sign); border-color: var(--sign-dk); color: #fff; }

.badge { display: inline-block; padding: 3px 9px; border-radius: 3px; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.badge-live { background: var(--accent); color: #fff; }
.badge-soon { background: var(--line2); color: var(--mut); border: 1px solid var(--line); }
.badge-live::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #fff; margin-right: 5px; vertical-align: 1px; animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: .25; } }

/* Breadcrumbs and drill chips are anchors, not buttons, so places can be
   middle-clicked into a new tab. They still look exactly like the controls. */
a.crumb, a.chip { text-decoration: none; display: inline-block; }
a.crumb:hover, a.chip:hover { text-decoration: none; }
.crumb.on { color: var(--ink); text-decoration: underline;
            text-decoration-color: var(--sign); text-underline-offset: 3px;
            text-decoration-thickness: 2px; }

/* ── timeline ─────────────────────────────────────────────
   Transport, scrubber and a UTC tick strip, in one card under the map. The range is
   index-based, so every frame gets equal width and the thumb always lands on one. */
.timeline {
  display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  margin-top: 12px; background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 14px 9px; box-shadow: var(--shadow);
}
.tl-side { display: flex; flex-direction: column; gap: 5px; }
.tl-lab { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.tl-transport { display: flex; align-items: center; gap: 5px; }
.tl-track { flex: 1 1 340px; min-width: 240px; display: flex; flex-direction: column; }
.tl-track input[type="range"] { width: 100%; margin: 0; accent-color: var(--accent); }
/* Inset by half a thumb so the first and last ticks sit under the thumb's travel. */
.tl-ticks { position: relative; height: 23px; margin: 3px 9px 0; pointer-events: none; }
.tl-ticks .tk { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.tl-ticks .tk.at-start { transform: translateX(-2px); align-items: flex-start; }
.tl-ticks .tk.at-end { transform: translateX(calc(-100% + 2px)); align-items: flex-end; }
.tl-ticks .tk i { width: 1px; height: 5px; background: var(--line); display: block; }
.tl-ticks .tk span { font: 700 8.5px var(--mono-font); color: var(--mut); white-space: nowrap; line-height: 1; margin-top: 3px; letter-spacing: .02em; }
/* The tick that opens each forecast day carries the date and the accent. */
.tl-ticks .tk.day i { height: 9px; width: 2px; background: var(--accent); }
.tl-ticks .tk.day span { color: var(--ink2); font-weight: 800; }
/* Buffer fill, directly under the thing you drag; it fades once full. */
.tl-buffer { position: relative; height: 2px; margin: 2px 9px 0; border-radius: 2px; background: var(--line2); overflow: hidden; transition: opacity .4s ease .3s; }
.tl-buffer::before { content: ""; display: block; height: 100%; width: var(--pct, 0%); background: var(--accent); transition: width .15s linear; }
.tl-buffer.is-full { opacity: 0; }
/* The dashed tail is the part of the run deliberately not fetched; LOAD ALL fetches it. */
.tl-buffer.is-held::after {
  content: ""; position: absolute; right: 0; top: 0; height: 100%; width: var(--held, 0%);
  background: repeating-linear-gradient(90deg, var(--line) 0 3px, transparent 3px 6px);
}
.tl-ends { display: flex; justify-content: space-between; gap: 10px; font: 700 9.5px var(--mono-font); color: var(--mut); letter-spacing: .02em; }
.tl-count { font: 900 13px var(--mono-font); color: var(--ink); }
.tl-hint { margin-top: 7px; font-size: 11px; font-weight: 700; color: var(--mut); }
.tl-load { font-size: 10px; padding: 4px 8px; margin-top: 4px; letter-spacing: .06em; font-family: var(--mono-font); white-space: nowrap; }
.tl-load:hover { border-color: var(--sign); color: var(--sign); }

/* The wind overlay sits above the map and takes no pointer events. */
#wind-overlay { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
#wind-mode button { font: 700 10.5px var(--mono-font); padding: 5px 8px; }
#wind-mode button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Sub-controls of the wind mode, subordinate to it and hidden when it has nothing to change. */
.wind-opts { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; padding-left: 9px; border-left: 2px solid var(--line2); }
.wind-opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wind-opt label { font-size: 9px; letter-spacing: .09em; }
.wind-opt select { padding: 3px 5px; font-size: 11px; font-weight: 700; min-width: 92px; }

.stamp { font-family: var(--mono-font); font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--mut); }

/* ══ the hero plate ══════════════════════════════════════════
   A Swiss relief in a white-mounted frame, as a wall map is hung: the plate in
   LV95 with its kilometre grid labelled in the margin, the confederation lit and
   the neighbours washed back. Cantons and towns are the click targets; the town
   dots wear the ICON-CH1 temperature for the hour (hero.js). */
.herostage {
  position: relative; background: #fbfaf7; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-hi);
}
.herostage svg { display: block; width: 100%; height: auto; opacity: 0; transition: opacity .5s ease; }
.herostage svg.in { opacity: 1; }
#heroMap .plate { image-rendering: auto; }
#heroMap .abroad { fill: rgba(251, 250, 247, .42); fill-rule: evenodd; pointer-events: none; }
#heroMap .grid path { fill: none; stroke: rgba(40, 52, 70, .16); stroke-width: .6; pointer-events: none; }
#heroMap .gridlab text { font: 700 8.5px var(--mono-font); fill: #6b717a; letter-spacing: .04em; }
#heroMap .frame { fill: none; stroke: #2d3138; stroke-width: 1.1; pointer-events: none; }
#heroMap .riv path { fill: none; stroke: #5d97c4; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; opacity: .9; }
#heroMap .riv .r1 { stroke-width: 1.5; } #heroMap .riv .r2 { stroke-width: 1.05; } #heroMap .riv .r3 { stroke-width: .7; }
#heroMap .lake path { fill: #9cc4e2; stroke: #4f86b3; stroke-width: .55; pointer-events: none; }
#heroMap .neigh { fill: none; stroke: rgba(70, 60, 80, .55); stroke-width: 1; stroke-dasharray: 5 2 1.2 2; pointer-events: none; }
/* the frontier, as on a Swiss map: a wash band either side and a dark dash-dot */
#heroMap .front-band { fill: none; stroke: rgba(213, 43, 30, .30); stroke-width: 6; stroke-linejoin: round; pointer-events: none; }
#heroMap .front { fill: none; stroke: #6a1a26; stroke-width: 1.3; stroke-dasharray: 7 2.2 1.6 2.2; stroke-linejoin: round; pointer-events: none; }
#heroMap .cline { fill: none; stroke: rgba(110, 40, 90, .62); stroke-width: .8; stroke-dasharray: 3 1.8; pointer-events: none; }
#heroMap .prov path { fill: transparent; stroke: none; cursor: pointer; transition: fill .13s ease; }
#heroMap .prov a:hover path, #heroMap .prov a:focus path { fill: rgba(213, 43, 30, .16); outline: none; }
#heroMap .prov a:focus-visible path { stroke: var(--sign); stroke-width: 2; }
#heroMap .clabel text { font: 800 11px var(--mono-font); letter-spacing: .14em; fill: rgba(96, 30, 60, .62);
  paint-order: stroke; stroke: rgba(255, 255, 255, .55); stroke-width: 2.2; stroke-linejoin: round; pointer-events: none; }
#heroMap .names text { font-family: var(--atlas-font); font-style: italic; pointer-events: none;
  paint-order: stroke; stroke-linejoin: round; text-anchor: middle; }
#heroMap .names .range { font-size: 14px; font-weight: 500; fill: rgba(70, 56, 40, .72); stroke: rgba(255, 252, 240, .5); stroke-width: 2.2px; }
#heroMap .names .nation { font-style: normal; font-family: var(--font); font-size: 12.5px; font-weight: 800; letter-spacing: .34em; fill: rgba(60, 60, 66, .58); stroke: rgba(255, 255, 255, .55); stroke-width: 2.4px; }
#heroMap .lname text { font-family: var(--atlas-font); font-style: italic; font-weight: 500; fill: #245d8a;
  text-anchor: middle; paint-order: stroke; stroke: rgba(220, 236, 248, .8); stroke-width: 2.2px; pointer-events: none; }
#heroMap .lname .big { font-size: 14px; letter-spacing: .06em; } #heroMap .lname .mid { font-size: 12px; } #heroMap .lname .small { font-size: 10.5px; }
#heroMap .peak path { fill: #3a2c22; }
#heroMap .peak text { font: italic 500 11px var(--atlas-font); fill: #3a2c22; paint-order: stroke;
  stroke: rgba(255, 252, 244, .78); stroke-width: 2.4px; stroke-linejoin: round; pointer-events: none; }
#heroMap .peak text .h { font: 700 8.5px var(--mono-font); font-style: normal; fill: #6b5a48; }
#heroMap .city { cursor: pointer; }
#heroMap .city circle { fill: #1b1d21; stroke: #fff; stroke-width: 1.7; }
#heroMap .city.r1 circle { stroke-width: 2.1; }
#heroMap .city.live circle { stroke: #1b1d21; stroke-width: 1.3; }
#heroMap .city:hover circle, #heroMap .city:focus circle { stroke: var(--sign); stroke-width: 2.6; }
#heroMap .city text { font-family: var(--font); font-weight: 800; fill: #111316; paint-order: stroke;
  stroke: rgba(255, 255, 255, .9); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
#heroMap .city.r1 text { font-size: 15px; } #heroMap .city.r2 text { font-size: 13px; } #heroMap .city.r3 text { font-size: 11.5px; font-weight: 700; }
#heroMap .city.abroad text { fill: #4a4f57; font-weight: 700; }
#heroMap .city text .v { font-family: var(--mono-font); font-weight: 800; fill: var(--accent-dk); }
#heroMap .scale rect { stroke: #2d3138; stroke-width: .8; }
#heroMap .scale text { font: 700 8.5px var(--mono-font); fill: #2d3138; }
#heroMap .credit { font: 600 7.5px var(--font); fill: #7a7f86; }

.herohint {
  position: absolute; left: 12px; bottom: 12px; pointer-events: none; max-width: 320px;
  background: rgba(14, 16, 20, .9); color: var(--figure-tx); border: 1px solid var(--figure-line);
  border-radius: 6px; padding: 8px 11px; font-size: 12px; font-weight: 700; line-height: 1.4;
  opacity: 0; transition: opacity .15s;
}
.herohint.on { opacity: 1; }
.herohint b { font-size: 14px; color: #fff; }
.herohint .v { font-family: var(--mono-font); color: #ffd9a8; }
.herohint .k { font-family: var(--mono-font); font-size: 10.5px; color: var(--figure-mut); letter-spacing: .04em; }
.legendrow { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--ink2); align-items: center; }
.legendrow .sw { display: inline-block; width: 11px; height: 11px; border-radius: 50%; vertical-align: -1px; margin-right: 5px; border: 1.6px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.legendrow .ramp { display: inline-block; width: 160px; height: 9px; border-radius: 2px; vertical-align: -1px; margin: 0 6px; box-shadow: 0 0 0 1px var(--line); }
.legendrow .bar { display: inline-block; width: 18px; height: 4px; vertical-align: 2px; margin-right: 5px; }
@media (max-width: 620px) {
  #heroMap .city.r3 text, #heroMap .peak text, #heroMap .lname .small { display: none; }
  #heroMap .city.r2 text { font-size: 17px; }
  #heroMap .city.r1 text { font-size: 19px; }
}

/* ── the Wegweiser — Swiss trail signs, in kilometres ────
   Every Swiss trail junction carries a yellow post of arrows, each with a place
   and a walking time. These carry great-circle kilometres instead: from the
   middle of the country (Älggi-Alp, the official centre) to the towns the models
   are read for. */
.signpost { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.post { position: relative; padding: 14px 0 10px 26px; }
.post::before { content: ""; position: absolute; left: 12px; top: 0; bottom: 0; width: 8px; border-radius: 2px;
  background: linear-gradient(90deg, #b9bec5, #e3e6ea 45%, #a4aab2); box-shadow: 0 2px 4px rgba(0, 0, 0, .2); }
.post .top { position: relative; margin: 0 0 10px 6px; display: inline-block; background: #fff; color: var(--ink);
  border: 2px solid var(--wander-ink); padding: 3px 9px; font: 900 12px var(--font); letter-spacing: .1em; text-transform: uppercase; }
.post .top small { display: block; font: 700 9px var(--mono-font); letter-spacing: .08em; color: var(--mut); }
.arrow {
  position: relative; display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  margin: 0 0 7px; padding: 6px 22px 6px 12px; color: var(--wander-ink); font-weight: 900; font-size: 13px;
  background: var(--wander); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .15); max-width: 360px;
}
.arrow.l { padding: 6px 12px 6px 22px; clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%); margin-left: -8px; }
/* the mountain-trail sign is white-red-white; an Alpine destination wears it */
.arrow.alp { background: linear-gradient(180deg, #fff 0 28%, var(--sign) 28% 72%, #fff 72%); color: #fff; }
.arrow.alp .nm { text-shadow: 0 0 2px rgba(0, 0, 0, .35); }
.arrow .km { font: 800 12px var(--mono-font); white-space: nowrap; }
.arrow.alp .km { color: #fff; text-shadow: 0 0 2px rgba(0, 0, 0, .35); }
a.arrow:hover { text-decoration: none; filter: brightness(1.06); }

.why { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
       background: var(--card); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); }
.why div { padding: 15px 16px; border-left: 1px solid var(--line2); }
.why div:first-child { border-left: 0; }
.why h3 { margin: 0 0 5px; font-size: 13px; font-weight: 900; color: var(--accent-dk); text-transform: uppercase; letter-spacing: .06em; }
.why p { margin: 0; color: var(--ink2); font-size: 13px; font-weight: 600; line-height: 1.5; }

/* ── footer, skip link ──────────────────────────────────── */
.site-footer { border-top: 3px solid var(--sign); margin-top: 44px; padding: 18px 0 34px; color: var(--ink2); font-size: 12px; font-weight: 600; background: var(--paper2); line-height: 1.6; }
.site-footer a { color: var(--accent-dk); font-weight: 800; }
.site-footer .fam { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--sign); color: #fff; padding: 9px 14px; z-index: 200; font-weight: 800; }
.skip:focus { left: 0; }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ══ dark ═══════════════════════════════════════════════════
   An Alpine night: ink ground, the panel stays the flag, the accent brightens to
   gentian at dusk. The hero swaps to its nocturne plate through hero.js, which
   reads the same query (or the explicit theme set on <html data-theme>). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0d0f12; --paper2: #08090b; --card: #16191e; --ink: #eceef1; --ink2: #b3b9c1;
    --mut: #7f8792; --line: #2a2f37; --line2: #1e2228; --sign: #c8281c; --sign-dk: #8f1a12;
    --accent: #4a7fd0; --accent-dk: #8fb4f0; --accent-sub: #d3e1fb;
    --shadow: 0 6px 22px rgba(0, 0, 0, .35); --shadow-hi: 0 10px 26px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0d0f12; --paper2: #08090b; --card: #16191e; --ink: #eceef1; --ink2: #b3b9c1;
  --mut: #7f8792; --line: #2a2f37; --line2: #1e2228; --sign: #c8281c; --sign-dk: #8f1a12;
  --accent: #4a7fd0; --accent-dk: #8fb4f0; --accent-sub: #d3e1fb;
  --shadow: 0 6px 22px rgba(0, 0, 0, .35); --shadow-hi: 0 10px 26px rgba(0, 0, 0, .5);
  color-scheme: dark;
}
/* the hero in the dark: the nocturne plate, and inks that read on it */
:root[data-theme="dark"] .herostage { background: #0f1216; }
:root[data-theme="dark"] #heroMap .abroad { fill: rgba(8, 10, 13, .45); }
:root[data-theme="dark"] #heroMap .grid path { stroke: rgba(200, 215, 235, .12); }
:root[data-theme="dark"] #heroMap .gridlab text, :root[data-theme="dark"] #heroMap .credit { fill: #8a929c; }
:root[data-theme="dark"] #heroMap .frame, :root[data-theme="dark"] #heroMap .scale rect { stroke: #9aa3ad; }
:root[data-theme="dark"] #heroMap .scale text { fill: #c3cad2; }
:root[data-theme="dark"] #heroMap .lake path { fill: #15344f; stroke: #3d6f98; }
:root[data-theme="dark"] #heroMap .riv path { stroke: #3f78a6; }
:root[data-theme="dark"] #heroMap .front { stroke: #ff9a8e; }
:root[data-theme="dark"] #heroMap .cline { stroke: rgba(230, 170, 210, .5); }
:root[data-theme="dark"] #heroMap .clabel text { fill: rgba(240, 200, 222, .6); stroke: rgba(0, 0, 0, .5); }
:root[data-theme="dark"] #heroMap .names .range { fill: rgba(225, 214, 196, .62); stroke: rgba(0, 0, 0, .45); }
:root[data-theme="dark"] #heroMap .names .nation { fill: rgba(220, 224, 230, .5); stroke: rgba(0, 0, 0, .45); }
:root[data-theme="dark"] #heroMap .lname text { fill: #9ccbf0; stroke: rgba(6, 18, 30, .75); }
:root[data-theme="dark"] #heroMap .peak path { fill: #e8dccb; }
:root[data-theme="dark"] #heroMap .peak text { fill: #efe5d6; stroke: rgba(0, 0, 0, .6); }
:root[data-theme="dark"] #heroMap .peak text .h { fill: #b9ab98; }
:root[data-theme="dark"] #heroMap .city circle { fill: #f3f4f6; stroke: #111; }
:root[data-theme="dark"] #heroMap .city text { fill: #f5f6f8; stroke: rgba(0, 0, 0, .78); }
:root[data-theme="dark"] #heroMap .city.abroad text { fill: #c4c9d0; }
:root[data-theme="dark"] #heroMap .city text .v { fill: #ffd9a8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .herostage { background: #0f1216; }
  :root:not([data-theme="light"]) #heroMap .abroad { fill: rgba(8, 10, 13, .45); }
  :root:not([data-theme="light"]) #heroMap .grid path { stroke: rgba(200, 215, 235, .12); }
  :root:not([data-theme="light"]) #heroMap .gridlab text, :root:not([data-theme="light"]) #heroMap .credit { fill: #8a929c; }
  :root:not([data-theme="light"]) #heroMap .frame, :root:not([data-theme="light"]) #heroMap .scale rect { stroke: #9aa3ad; }
  :root:not([data-theme="light"]) #heroMap .scale text { fill: #c3cad2; }
  :root:not([data-theme="light"]) #heroMap .lake path { fill: #15344f; stroke: #3d6f98; }
  :root:not([data-theme="light"]) #heroMap .riv path { stroke: #3f78a6; }
  :root:not([data-theme="light"]) #heroMap .front { stroke: #ff9a8e; }
  :root:not([data-theme="light"]) #heroMap .cline { stroke: rgba(230, 170, 210, .5); }
  :root:not([data-theme="light"]) #heroMap .clabel text { fill: rgba(240, 200, 222, .6); stroke: rgba(0, 0, 0, .5); }
  :root:not([data-theme="light"]) #heroMap .names .range { fill: rgba(225, 214, 196, .62); stroke: rgba(0, 0, 0, .45); }
  :root:not([data-theme="light"]) #heroMap .names .nation { fill: rgba(220, 224, 230, .5); stroke: rgba(0, 0, 0, .45); }
  :root:not([data-theme="light"]) #heroMap .lname text { fill: #9ccbf0; stroke: rgba(6, 18, 30, .75); }
  :root:not([data-theme="light"]) #heroMap .peak path { fill: #e8dccb; }
  :root:not([data-theme="light"]) #heroMap .peak text { fill: #efe5d6; stroke: rgba(0, 0, 0, .6); }
  :root:not([data-theme="light"]) #heroMap .peak text .h { fill: #b9ab98; }
  :root:not([data-theme="light"]) #heroMap .city circle { fill: #f3f4f6; stroke: #111; }
  :root:not([data-theme="light"]) #heroMap .city text { fill: #f5f6f8; stroke: rgba(0, 0, 0, .78); }
  :root:not([data-theme="light"]) #heroMap .city.abroad text { fill: #c4c9d0; }
  :root:not([data-theme="light"]) #heroMap .city text .v { fill: #ffd9a8; }
}