/* ═══════════════════════════════════════════════════════════════════════
   GoZaanstad — theme tokens, shared by every page.

   These lived only in index.html, so choosing a theme on the homepage and
   then opening Places or Routes dropped you back into a hardcoded navy that
   matched nothing. Every page now loads this file, so one choice holds
   across the whole site.

   Each theme defines the SAME set of names. A page uses the names, never a
   raw colour, which is what stops one block drifting away from another.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* One type system for every page: Playfair for display, Inter for reading,
     Space Grotesk for labels. Pages read these names rather than naming fonts. */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-label: 'Space Grotesk', system-ui, sans-serif;
}

html[data-theme="dark"] {
  --panel:   #0b120b;
  /* One grade for every photograph, so ten pictures sourced from ten
     places read as one set instead of ten stock photos. Same three
     names in every theme, so a toggle regrades them all at once. */
  --photo-filter: saturate(.55) contrast(1.06) brightness(.88);
  --photo-tint:   #2B5329;
  --photo-tint-a: .36;
  --panel-2: #121c12;
  --theme-accent-2:  #A7643C;
  --theme-hero-1:    #0d1f0d;
  --theme-hero-2:    #1a3d18;
  --theme-hero-3:    #2B5329;
  --theme-hero-glow: rgba(74,127,171,0.35);
  --theme-accent:    #C8963C;
  --theme-cta-from:  #2B5329;
  --theme-cta-to:    #C8963C;
  /* The name and the slogan are always green: Zaans groen by day, lifted at night. */
  --brand-green:     #7EC880;
  --surface-0: #0B131D;
  --surface-1: #101B28;
  --hero-plate: rgba(7,16,31,.48);
  --card-tint: rgba(20,40,70,.45);
  --card-sat: .8;
  --card-con: 1.05;

  /* The same scene by night: same drawing, these values. */
  --sc-sky-top: #06101F;
  --sc-sky-mid: #112741;
  --sc-sky-bot: #2A4359;
  --sc-horizon-glow: rgba(240,170,90,.28);
  --sc-far: #1A2A2C;
  --sc-mill-body: #1B2A22;
  --sc-mill-edge: #0E1913;
  --sc-mill-cap: #2B221B;
  --sc-sail: #C8CCC8;
  --sc-wood: #291F16;
  --sc-house: #173A24;
  --sc-house-trim: #B8C2B6;
  --sc-water-top: #17304A;
  --sc-water-bot: #0A1726;
  --sc-mist: rgba(180,200,225,.22);
  --sc-orb: #e9eef5;  --sc-orb-a: .85;  --sc-stars: .7;   --sc-rays: 0;   --sc-orb-craters: .16;   /* a moon over the Zaan */
  --sc-window-glow: rgba(255,190,110,.9);
  --sc-reed: #2D3A22;
  --sc-bird: #c9d3dd;
  --sc-cloud: rgba(190,206,228,.36);
  --sc-barge: #13161B;

  /* Chrome: the bar, its text, its rules. Derived from the theme so a new
     theme never needs its own navigation styling. */
  --nav-surface:     rgba(9, 18, 9, 0.82);
  --nav-ink:         #f2efe6;
  --nav-ink-dim:     rgba(242, 239, 230, 0.86);
  --nav-rule:        rgba(242, 239, 230, 0.12);
  --nav-rule-strong: rgba(200, 150, 60, 0.55);
  --nav-hover:       rgba(242, 239, 230, 0.08);
  --nav-shadow:      rgba(4, 10, 4, 0.42);
}



:root, html[data-theme="light"] {
  --panel:   #f6f4ee;   /* paper: the one surface the whole Light theme sits on */
  /* One grade for every photograph, so ten pictures sourced from ten
     places read as one set instead of ten stock photos. Same three
     names in every theme, so a toggle regrades them all at once. */
  --photo-filter: saturate(.62) contrast(1.03) brightness(1);
  --photo-tint:   #2B5329;
  --photo-tint-a: .24;
  --panel-2: #f2efe6;
  --theme-accent-2:  #8a3c1f;
  --theme-hero-1:    #c8e6f0;
  --theme-hero-2:    #a8d8b0;
  --theme-hero-3:    #7ec880;
  --theme-hero-glow: rgba(255,215,0,0.55);
  --theme-accent:    #b35f00;   /* darkened from #e07b00 to clear 4.5:1 on paper */
  --theme-cta-from:  #2B5329;
  --theme-cta-to:    #4A7FAB;
  --brand-green:     #2B5329;
  --surface-0: #FBF9F4;
  --surface-1: #F1EDE3;
  --hero-plate: rgba(251,249,244,.62);
  --card-tint: rgba(120,90,50,.28);
  --card-sat: .9;
  --card-con: 1.02;

  /* The windmill scene by day. Every fill in the drawing reads one of these. */
  --sc-sky-top: #8FB9E2;
  --sc-sky-mid: #CBE1F1;
  --sc-sky-bot: #F2E9D3;
  --sc-horizon-glow: rgba(255,214,150,.55);
  --sc-far: #8DA487;
  --sc-mill-body: #3E5A3B;
  --sc-mill-edge: #2A4128;
  --sc-mill-cap: #6A4A2F;
  --sc-sail: #6d6657;   /* the sky is paper now, so the lattice reads as weathered wood, not white on white */
  --sc-wood: #593E27;
  --sc-house: #2E6B3D;
  --sc-house-trim: #F8F5EC;
  --sc-water-top: #7FA8C6;
  --sc-water-bot: #3D6A8A;
  --sc-mist: rgba(255,255,255,.45);
  --sc-orb: #f2c14e;  --sc-orb-a: .8;   --sc-stars: 0;    --sc-rays: .3;  --sc-orb-craters: 0;     /* a sun on paper */
  --sc-window-glow: rgba(255,200,120,0);
  --sc-reed: #778E48;
  --sc-bird: #2A392B;
  --sc-cloud: rgba(255,255,255,.88);
  --sc-barge: #383C42;

  /* The one theme on paper rather than ink. Same names, inverted values. */
  --nav-surface:     rgba(252, 251, 247, 0.88);
  --nav-ink:         #16210f;
  --nav-ink-dim:     rgba(22, 33, 15, 0.86);
  --nav-rule:        rgba(22, 33, 15, 0.14);
  --nav-rule-strong: rgba(179, 95, 0, 0.65);
  --nav-hover:       rgba(22, 33, 15, 0.06);
  --nav-shadow:      rgba(30, 40, 25, 0.10);
}

/* ═══════════════════════════════════════════════════════════════════════
   THE BAR

   An editorial masthead rather than a floating pill: a quiet surface, a
   hairline rule beneath it, a serif wordmark, and links in small-caps
   letterspacing. The page you are on is marked with a rule under the word —
   the way a printed index marks a section — instead of a filled pill, which
   is the thing that makes every template look the same.
   ═══════════════════════════════════════════════════════════════════════ */

.gz-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  background: var(--nav-surface);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--nav-rule);
  transition: border-color .3s ease;
}
/* A second, finer rule in the accent — the detail that reads as printed. */
.gz-nav::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, var(--nav-rule-strong) 22%, var(--nav-rule-strong) 78%, transparent);
  opacity: .5;
}

.gz-nav-inner {
  width: min(100% - 40px, 1340px);
  margin: 0 auto;
  height: 58px;
  display: flex;
  align-items: center;
  gap: 18px;
}

/* ── wordmark ─────────────────────────────────────────────────────────── */
.gz-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--nav-ink);
  flex-shrink: 0;
}
.gz-brand-orb { width: 30px; height: 30px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.gz-brand-orb img { width: 100%; height: 100%; display: block; border-radius: 8px; }
.gz-brand-txt {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.gz-brand-txt em { font-style: normal; color: var(--brand-green); }
/* Pages with their own small brand link, outside the shared bar. */
.brand em, .brand span em, .nav-logo em { font-style: normal; color: var(--brand-green); }

/* ── links ────────────────────────────────────────────────────────────── */
.gz-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 8px;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;   /* the links give way; the controls on the right never do */
}
.gz-navlink {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 38px;               /* generous target without a boxy pill */
  padding: 0 12px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--nav-ink-dim);
  text-decoration: none;
  white-space: nowrap;
  border-radius: 8px;
  transition: color .2s ease, background-color .2s ease;
}
.gz-navlink:hover { color: var(--nav-ink); background: var(--nav-hover); }
.gz-navlink:focus-visible {
  outline: 2px solid var(--theme-accent);
  outline-offset: 2px;
}

/* The current page, marked like a printed index rather than a filled chip. */
.gz-navlink[aria-current="page"] { color: var(--nav-ink); font-weight: 600; }
.gz-navlink[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: 8px;
  height: 2px;
  background: var(--theme-accent);
  border-radius: 2px;
}

/* ── right-hand controls ──────────────────────────────────────────────── */
.gz-nav-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.gz-lang {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  border: 1px solid var(--nav-rule);
  border-radius: 100px;
  overflow: hidden;
}
.gz-lang button {
  min-width: 38px; height: 30px;
  border: 0; background: transparent;
  color: var(--nav-ink-dim);
  font: 700 .68rem/1 'Space Grotesk', system-ui, sans-serif;
  letter-spacing: .1em;
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}
.gz-lang button:hover { color: var(--nav-ink); background: var(--nav-hover); }
.gz-lang button[aria-pressed="true"] { color: var(--theme-accent); background: var(--nav-hover); }
.gz-lang button:focus-visible { outline: 2px solid var(--theme-accent); outline-offset: -2px; }

.gz-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; padding: 0 16px;
  border-radius: 100px;
  font: 600 .84rem/1 'Space Grotesk', system-ui, sans-serif;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .2s cubic-bezier(.16,1,.3,1), filter .2s ease, background-color .2s ease;
}
.gz-btn-ghost { color: var(--nav-ink-dim); border-color: var(--nav-rule); background: transparent; }
.gz-btn-ghost:hover { color: var(--nav-ink); background: var(--nav-hover); }
.gz-btn-solid {
  color: #fff;
  background: linear-gradient(120deg, var(--theme-cta-from), var(--theme-cta-to));
}
[data-theme="light"] .gz-btn-solid { color: #fff; }
.gz-btn-solid:hover { transform: translateY(-1px); filter: brightness(1.06); }
.gz-btn:focus-visible { outline: 2px solid var(--theme-accent); outline-offset: 2px; }

/* ── narrow screens ───────────────────────────────────────────────────── */
.gz-nav-inner, .gz-nav-actions, .gz-nav-auth { flex-wrap: nowrap; }
.gz-nav-auth .btn, .gz-nav-auth .gz-btn { white-space: nowrap; }
@media (max-width: 1700px) {
  .gz-navlink { padding: 0 9px; font-size: .78rem; }
  .gz-navlink[data-secondary] { display: none; }   /* Stays, Newspaper, Passport: still in the drawer */
}
@media (max-width: 1400px) {
  .gz-nav-links { gap: 0; }
  .gz-navlink { padding: 0 8px; font-size: .76rem; }
  .gz-navlink[data-tertiary] { display: none; }
}
@media (max-width: 1100px) {
  .gz-navlink { padding: 0 6px; font-size: .74rem; }
  .gz-nav .gz-btn { padding: 0 12px; }    /* Plan a day, History */
}
@media (max-width: 860px) {
  /* Links move into the existing drawer rather than being crammed or cut. */
  .gz-nav-links { display: none; }
  .gz-nav-inner { height: 54px; width: min(100% - 28px, 1340px); }
}

@media (prefers-reduced-motion: reduce) {
  .gz-nav, .gz-navlink, .gz-btn, .gz-lang button { transition: none; }
  .gz-btn-solid:hover { transform: none; }
}

/* The four theme dots, in the bar on every page (theme.js marks the active one). */
.gz-nav .theme-bar { display: inline-flex; gap: 7px; align-items: center; padding: 0 4px; }
.gz-nav .t-classic { background: linear-gradient(135deg, #0b120b, #2B5329); }
.gz-nav .t-night   { background: linear-gradient(135deg, #020810, #223a8a); }
.gz-nav .t-golden  { background: linear-gradient(135deg, #1a0d00, #FFB830); }
.gz-nav .t-light   { background: linear-gradient(135deg, #ffffff, #a8d8b0); }
.gz-nav .theme-dot { width: 18px; height: 18px; border-radius: 50%; padding: 0; cursor: pointer; border: 2px solid var(--nav-rule-strong); box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); transition: transform .2s, box-shadow .2s; }
.gz-nav .theme-dot:hover { transform: scale(1.1); }
.gz-nav .theme-dot.active { transform: scale(1.15); box-shadow: 0 0 0 2px var(--nav-surface), 0 0 0 4px var(--theme-accent); }
.gz-nav .theme-dot:focus-visible { outline: 2px solid var(--theme-accent); outline-offset: 2px; }
.gz-nav-auth { display: inline-flex; gap: 8px; align-items: center; }
/* The menu button: hidden on desktop, the drawer's handle on a phone. */
.gz-nav .nav-hamburger { display: none; width: 40px; height: 40px; border: 1px solid var(--nav-rule); border-radius: 10px; background: transparent; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; padding: 0; }
.gz-nav .nav-hamburger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--nav-ink); }
@media (max-width: 860px) {
  .gz-nav .theme-bar, .gz-nav .gz-lang, .gz-nav .gz-nav-auth { display: none; } /* the drawer carries them */
  .gz-nav .nav-hamburger { display: inline-flex; }
}

/* Pages set their own top padding; this keeps content clear of the fixed bar. */
body.has-gz-nav { padding-top: 58px; }
@media (max-width: 860px) { body.has-gz-nav { padding-top: 54px; } }


/* ═══════════════════════════════════════════════════════════════════════
   THE OTHER NAMES

   Two naming conventions grew up in this codebase for the same bar. Rather
   than rewrite the markup on every page — a large diff with real risk and
   nothing visible to show for it — the stylesheet covers both. These rules
   are deliberately identical in effect to the .gz-* ones above.
   ═══════════════════════════════════════════════════════════════════════ */

.gz-nav .nav-inner {
  width: min(100% - 40px, 1340px);
  margin: 0 auto;
  height: 58px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.gz-nav .brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--nav-ink); flex-shrink: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.12rem; font-weight: 700; letter-spacing: -0.015em;
}
/* The wordmark's own span carries a page-level colour on some pages; name it
   here so the mark takes the theme like everything else in the bar. */
.gz-nav .brand-txt,
.gz-nav .brand span {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--nav-ink);
  white-space: nowrap;
}
.gz-nav .brand em,
.gz-nav .brand span em,
.gz-nav .brand-txt em { font-style: normal; color: var(--brand-green); }
.gz-nav .brand-orb { width: 30px; height: 30px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }

.gz-nav .nvl,
.gz-nav .nav-link {
  position: relative;
  display: inline-flex; align-items: center;
  height: 42px; padding: 0 12px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: .82rem; font-weight: 500; letter-spacing: .01em;
  color: var(--nav-ink-dim);
  text-decoration: none; white-space: nowrap;
  border-radius: 8px;
  background: transparent;
  transition: color .2s ease, background-color .2s ease;
}
.gz-nav .nvl:hover,
.gz-nav .nav-link:hover { color: var(--nav-ink); background: var(--nav-hover); }
.gz-nav .nvl:focus-visible,
.gz-nav .nav-link:focus-visible { outline: 2px solid var(--theme-accent); outline-offset: 2px; }

/* The page you are on, marked with a rule under the word rather than a
   filled chip — the same treatment as the .gz-navlink version. */
.gz-nav .nvl.active,
.gz-nav .nav-link.active,
.gz-nav .nvl[aria-current="page"],
.gz-nav .nav-link[aria-current="page"] {
  color: var(--nav-ink);
  font-weight: 600;
  background: transparent;
}
.gz-nav .nvl.active::after,
.gz-nav .nav-link.active::after,
.gz-nav .nvl[aria-current="page"]::after,
.gz-nav .nav-link[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: 8px;
  height: 2px; border-radius: 2px;
  background: var(--theme-accent);
}

.gz-nav .btn-nav {
  display: inline-flex; align-items: center; justify-content: center;
  height: 38px; padding: 0 18px;
  border-radius: 100px;
  font: 600 .84rem/1 'Space Grotesk', system-ui, sans-serif;
  text-decoration: none; cursor: pointer;
  border: 1px solid var(--nav-rule);
  color: var(--nav-ink-dim);
  background: transparent;
  transition: transform .2s cubic-bezier(.16,1,.3,1), filter .2s ease,
              background-color .2s ease, color .2s ease;
}
.gz-nav .btn-nav:hover { color: var(--nav-ink); background: var(--nav-hover); }
.gz-nav .btn-nav-outline { border-color: var(--nav-rule); }
.gz-nav .btn-nav-primary {
  border-color: transparent; color: #fff;
  background: linear-gradient(120deg, var(--theme-cta-from), var(--theme-cta-to));
}
.gz-nav .btn-nav-primary:hover { transform: translateY(-1px); filter: brightness(1.06); }
.gz-nav .btn-nav:focus-visible { outline: 2px solid var(--theme-accent); outline-offset: 2px; }

@media (max-width: 1080px) {
  .gz-nav .nvl, .gz-nav .nav-link { padding: 0 9px; font-size: .78rem; }
}
@media (max-width: 860px) {
  .gz-nav .nav-links, .gz-nav .nav-inner > .nav-links { display: none; }
  .gz-nav .nav-inner { height: 60px; width: min(100% - 28px, 1340px); }
}
@media (prefers-reduced-motion: reduce) {
  .gz-nav .nvl, .gz-nav .nav-link, .gz-nav .btn-nav { transition: none; }
  .gz-nav .btn-nav-primary:hover { transform: none; }
}


/* ── the remaining stragglers ──────────────────────────────────────────
   A survey of every class used inside a .gz-nav across all 27 pages turned
   up a third wordmark vocabulary (.gz-logo on Routes) plus a few container
   names. Covering them here keeps the bar identical everywhere without
   touching 27 files of markup. */

.gz-nav .gz-logo {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; flex-shrink: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.12rem; font-weight: 700; letter-spacing: -0.015em;
  color: var(--nav-ink);
  white-space: nowrap;
}
.gz-nav .gz-logo em { font-style: normal; color: var(--brand-green); }
.gz-nav .gz-logo-orb,
.gz-nav .brand-orb {
  width: 30px; height: 30px; border-radius: 8px; overflow: hidden; flex-shrink: 0;
}
.gz-nav .gz-logo-orb img,
.gz-nav .brand-orb img { width: 100%; height: 100%; display: block; border-radius: 8px; }

/* Link lists are sometimes a <ul>; strip the list chrome so it matches. */
.gz-nav .gz-navlinks,
.gz-nav .nav-links,
.gz-nav ul.gz-nav-links {
  display: flex; align-items: center; gap: 2px;
  list-style: none; margin: 0 0 0 8px; padding: 0;
}
.gz-nav .gz-navlinks li, .gz-nav .nav-links li { list-style: none; }

.gz-nav .nav-right,
.gz-nav .nav-user {
  margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}

/* Theme swatches and the language toggle live in the bar on some pages. */
.gz-nav .theme-btn {
  color: var(--nav-ink-dim); background: transparent;
  border: 1px solid var(--nav-rule); border-radius: 100px;
  cursor: pointer; transition: color .2s ease, background-color .2s ease;
}
.gz-nav .theme-btn:hover { color: var(--nav-ink); background: var(--nav-hover); }
.gz-nav .lang-toggle { display: inline-flex; align-items: center; gap: 4px; }

@media (prefers-reduced-motion: reduce) {
  .gz-nav .theme-btn { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   THE PAGE PALETTE

   Every page opens its <style> with the same local palette — --bg, --cyan,
   --violet, --gold, --txt, --grad-accent — and then builds its buttons,
   chips, cards and map pins on those names. That palette was a fixed navy
   and cyan, which is why choosing Golden used to repaint the bar and leave
   the rest of the page purple: the blocks below the fold were never asked.

   So rather than chase several hundred rules across 23 pages, the theme
   redefines those same names. The pages keep working exactly as written and
   the whole page turns with the theme, not just the chrome.

   `html[data-theme=...]` outranks the pages' own `:root`, so this wins on
   specificity rather than on load order — which matters, because some of
   those <style> blocks come after this file.
   ═══════════════════════════════════════════════════════════════════════ */

html[data-theme="dark"] {
  --bg: #060b06;  --bg2: #0e1710;
  --card-bg: rgba(242,239,230,.045); --surface: rgba(242,239,230,.045);
  --border: rgba(242,239,230,.10);
  --cyan: #C8963C;  --violet: #2B5329;  --gold: #C8963C;
  --txt: #f2efe6;  --text: #f2efe6;
  --txt2: rgba(242,239,230,.74); --txt3: rgba(242,239,230,.58);
  --muted: rgba(242,239,230,.58);
}



/* The one theme on paper. Ink and paper swap; the names do not. */
:root, html[data-theme="light"] {
  --bg: #f6f4ee;  --bg2: #eae6da;
  --card-bg: rgba(255,255,255,.86); --surface: rgba(255,255,255,.86);
  --border: rgba(22,33,15,.13);
  --cyan: #b35f00;  --violet: #2B5329;  --gold: #8a5200;
  --txt: #16210f;  --text: #16210f;
  --txt2: rgba(22,33,15,.76); --txt3: rgba(22,33,15,.62);
  --muted: rgba(22,33,15,.62);
}

/* The brand gradient the pages paint logos and primary buttons with. */
html[data-theme] {
  --grad-accent: linear-gradient(135deg, var(--theme-cta-from), var(--theme-cta-to));
  /* Fills derived from the ink. Pages used to write rgba(255,255,255,.05) for
     these, which is a faint wash on a dark theme and nothing at all on paper;
     mixed from --txt they flip with the theme instead of vanishing. */
  --wash:        color-mix(in srgb, var(--txt) 5%, transparent);
  --wash-hover:  color-mix(in srgb, var(--txt) 9%, transparent);
  --rule-strong: color-mix(in srgb, var(--txt) 18%, transparent);
}

/* The active navigation item was a filled cyan chip on every page — the
   single most template-looking detail in the bar. Replaced by the accent
   rule under the word, matching the treatment defined above. */
html[data-theme] .gz-nav .gz-navlink.active,
html[data-theme] .gz-nav .gz-navlink[aria-current="page"] {
  background: transparent;
  color: var(--nav-ink);
  font-weight: 600;
}

/* The wordmark: one ink colour with the second half in the accent, rather
   than a two-colour gradient that belongs to no theme. */
html[data-theme] .gz-nav .gz-logo,
html[data-theme] .gz-nav .gz-brand-txt,
html[data-theme] .gz-nav .brand-txt {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--nav-ink);
}


/* ── Semantic inks ────────────────────────────────────────────────────
   Success, warning, error and the route-type badges. On the three dark
   themes these keep the pale tints the pages already used, so nothing
   moves. On paper they invert to dark ink, which is the whole reason the
   Light theme used to show mint-on-white badges at 1.5:1. */

html[data-theme="dark"] {
  --green-ink:  #6ee7b7;
  --red-ink:    #f87171;
  --blue-ink:   #93c5fd;
  --violet-ink: #c4b5fd;
  --gold-ink:   #fcd34d;
}

:root, html[data-theme="light"] {
  --green-ink:  #0f6b46;
  --red-ink:    #a81f1f;
  --blue-ink:   #1a4fbd;
  --violet-ink: #5b2ea8;
  --gold-ink:   #7a4a00;
}


/* Route-type legend. The colour tells cycling from walking, on the card and on
   the map pin alike, so it survives a theme change — it just stops being a
   fixed value that only reads on a dark page. */
html[data-theme="dark"] {
  --route-bike:  #4fd8ff;
  --route-walk:  #4ade80;
  --route-water: #7cb2ff;
}
:root, html[data-theme="light"] {
  --route-bike:  #0a6b80;
  --route-walk:  #0f6b46;
  --route-water: #1a4fbd;
}




/* Category and type pills carry a hue that identifies the thing — a windmill
   is not a museum. Those hues are pale, tuned for a dark card, so the Light
   theme's near-white chip left them at roughly 2:1. Keeping the chip dark on
   paper preserves the hue and the reading at once. */
html[data-theme="light"] .cat-pill,
html[data-theme="light"] .card-type-badge,
html[data-theme="light"] .diff-badge,
html[data-theme="light"] .p-badge,
html[data-theme="light"] .ev-badge {
  background: rgba(22, 33, 15, .86);
  /* The chip is dark here, so the pale inks are the readable ones. */
  --green-ink:  #6ee7b7;
  --red-ink:    #f87171;
  --blue-ink:   #93c5fd;
  --violet-ink: #c4b5fd;
  --gold-ink:   #fcd34d;
  --route-bike: #4fd8ff;
  --route-walk: #4ade80;
  --route-water:#7cb2ff;
}


/* The "All" filter chip is the only active chip without a category colour of
   its own, so it was drawn as white text on a 3%-white background: fine over a
   dark bar, invisible over paper. It takes the theme's own call-to-action. */
html[data-theme] .chip.active:not([data-cat]),
html[data-theme] .chip.active[data-cat=""] {
  background: linear-gradient(135deg, var(--theme-cta-from), var(--theme-cta-to));
  border-color: transparent;
  color: #fff;
}

/* Gold and orange category chips are too light to carry white text; they take
   dark ink instead. The hue still identifies the category. */
html[data-theme] .chip[data-cat="culture"].active,
html[data-theme] .chip[data-cat="market"].active {
  color: #1d1405;
}


/* Generic buttons that happen to sit in the bar. `.btn-ghost` carried a
   near-black ink and `.btn-outline` the deep-green call-to-action colour —
   both fine on a page, both close to invisible on a dark masthead. In the bar
   they take the bar's own ink. */
html[data-theme] .gz-nav .btn-ghost,
html[data-theme] .gz-nav .btn.btn-ghost {
  color: var(--nav-ink-dim);
  background: transparent;
  border-color: transparent;
}
html[data-theme] .gz-nav .btn-ghost:hover,
html[data-theme] .gz-nav .btn.btn-ghost:hover {
  color: var(--nav-ink);
  background: var(--nav-hover);
}
html[data-theme] .gz-nav .btn-outline,
html[data-theme] .gz-nav .btn.btn-outline {
  color: var(--nav-ink);
  border-color: var(--nav-rule);
  background: transparent;
}
html[data-theme] .gz-nav .btn-outline:hover,
html[data-theme] .gz-nav .btn.btn-outline:hover {
  border-color: var(--nav-rule-strong);
  background: var(--nav-hover);
}


/* Crowded bars. The link row must not shrink below its own contents — nowrap
   links simply overflowed the box and ran over the buttons beside them. The
   right-hand cluster is what gives way, and on a narrow bar the link row is
   replaced by the existing hamburger. */
html[data-theme] .gz-nav .gz-nav-links,
html[data-theme] .gz-nav .nav-links,
html[data-theme] .gz-nav .gz-navlinks {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
html[data-theme] .gz-nav .gz-nav-actions,
html[data-theme] .gz-nav .nav-right,
html[data-theme] .gz-nav .nav-user {
  flex: 0 0 auto;
  min-width: max-content;
  justify-content: flex-end;
  overflow: hidden;
}




/* Admin and Rewards are flagged in the bar. The emphasis is the accent, so
   it adapts; a fixed amber was near 2:1 on the Light theme's paper bar. */
html[data-theme] .gz-nav .gz-navlink-flag { color: var(--theme-accent); }
html[data-theme] .gz-nav .gz-navlink-flag:hover { color: var(--nav-ink); }

/* The gold used on paper is a deep gold, so the tag sitting on it takes the
   pale ink rather than the dark ink the lighter golds need. */
html[data-theme="light"] .gallery-tag { color: #fdf2dc; }



/* Night maps: OpenStreetMap tiles turned dark in CSS. CARTO's dark tile
   set started watermarking keyless requests with "API KEY REQUIRED", and
   OSM has no dark raster of its own — inverting and rotating the hue back
   keeps water blue and roads legible on a dark ground, with no key and no
   third-party dependency. */
.gz-tiles-dark {
  filter: invert(1) hue-rotate(180deg) brightness(.91) contrast(.88) saturate(.66);
}

/* Day maps: the same OSM tiles, graded softer. The default OSM style is
   saturated and busy; easing saturation and contrast pulls it toward the
   designed look of a commercial basemap without needing one. */
.gz-tiles-soft {
  filter: saturate(.72) contrast(.92) brightness(1.03) sepia(.08);
}

/* stroke icons (gz-icons.js) — sized to surrounding text; lives here because
   theme.css is the one stylesheet every page loads (routes.html has no app.css) */
.gz-ic{width:1em;height:1em;vertical-align:-0.125em;display:inline-block;flex-shrink:0}

/* ── Menu: reachable by keyboard, and hittable with a thumb ─────────────────
   The navigation markup is repeated in every page file and comes in two
   shapes: .gz-nav on thirteen pages and .navbar on two. Both are named in
   every rule below, because scoping to one of them silently skipped the
   other — which is exactly what happened the first time.                     */

/* Getting to the content without tabbing the whole menu on every page.
   Off-screen until focused, which is the only moment it is any use. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 12px 20px;
  background: var(--bg1, #0f1623);
  color: var(--txt, #e2e8f0);
  border: 1px solid var(--border, rgba(255, 255, 255, .14));
  border-radius: 0 0 10px 0;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
  outline: 2px solid var(--cyan, #00d4ff);
  outline-offset: 2px;
}

/* The page you are on now says so. Previously every item looked and sounded
   identical, on the page and to a screen reader. */
.navbar a[aria-current="page"],
.gz-nav a[aria-current="page"] {
  color: var(--cyan, #00d4ff);
}
.navbar .nav-links a[aria-current="page"]::after,
.gz-nav a.nav-link[aria-current="page"]::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 3px;
  border-radius: 2px;
  background: currentColor;
}

/* Focus has to be visible to be useful, and only for keyboard users so a
   mouse click does not leave a ring behind. */
.navbar a:focus-visible,
.navbar button:focus-visible,
.gz-nav a:focus-visible,
.gz-nav button:focus-visible,
.skip-link:focus-visible {
  outline: 2px solid var(--cyan, #00d4ff);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Twelve of the fourteen menu items were under the 44px minimum. Raised only
   where the pointer is actually a finger, so the desktop layout is untouched. */
@media (pointer: coarse) {
  .navbar a, .navbar button,
  .gz-nav a, .gz-nav button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .navbar, .navbar *, .gz-nav, .gz-nav * { transition-duration: .01ms !important; }
}

/* Present for search engines and screen readers, not on screen. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* The one theme toggle: a moon by day, a sun by night. Until the themes
   two states are light and dark. */
.theme-toggle{display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid var(--border);border-radius:999px;background:var(--panel);color:var(--txt);cursor:pointer;transition:background .2s,transform .2s;flex-shrink:0}
.theme-toggle:hover{transform:translateY(-1px)}
.theme-toggle:focus-visible{outline:2px solid var(--theme-accent);outline-offset:2px}
.gz-nav .theme-toggle{width:36px;height:36px}
.theme-toggle .ico-sun{display:none}
html[data-theme="dark"] .theme-toggle .ico-sun{display:block}
html[data-theme="dark"] .theme-toggle .ico-moon{display:none}

/* Every card photograph through one treatment, so a row of unrelated photos
   shares a tonal range — and that range follows the theme. */
.card-img-wrap{position:relative;overflow:hidden;line-height:0}
.card-img-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 45%,var(--card-tint) 100%);mix-blend-mode:multiply}
.card-img,.card-img-wrap img{filter:saturate(var(--card-sat)) contrast(var(--card-con))}


/* ═════════════════════════════════════════════════
   The four tones. data-theme stays light or dark and carries every
   component rule; data-tone carries the palette. Classic is the dark set
   above. Night and Golden redefine the same names, so a page turns with the
   dot the visitor pressed rather than looking the same for three of them.
   ═════════════════════════════════════════════════ */
html[data-tone="night"] {
  --panel:   #070c16;
  --txt: #e7edf7;  --text: #e7edf7;
  --txt2: rgba(231,237,247,.76); --txt3: rgba(231,237,247,.6); --muted: rgba(231,237,247,.6);
  --border: rgba(231,237,247,.11);
  --theme-accent:    #9cc4ff;
  --theme-accent-2:  #6f92c9;
  --theme-cta-from:  #1f3f7a;
  --theme-cta-to:    #9cc4ff;
  --cyan: #9cc4ff;  --violet: #1f3f7a;  --gold: #d9b56a;
  --theme-hero-1:    #050b18;
  --theme-hero-2:    #0e2044;
  --theme-hero-3:    #1f3f7a;
  --theme-hero-glow: rgba(156,196,255,0.22);
  --photo-filter: saturate(.42) contrast(1.10) brightness(.68);
  --photo-tint:   #0d2847;
  --photo-tint-a: .46;
  --hero-plate: rgba(7,12,22,.5);
  --card-tint: rgba(20,40,80,.45);
  --sc-sky-top: #030814;
  --sc-sky-mid: #0b1a33;
  --sc-sky-bot: #1b3050;
  --sc-horizon-glow: rgba(156,196,255,.2);
  --sc-far: #141f2a;
  --sc-water-top: #0f2440;
  --sc-water-bot: #06101f;
  --sc-mist: rgba(160,190,230,.22);
  --sc-cloud: rgba(170,195,235,.32);
  --sc-bird: #d3dcea;
  --sc-orb: #eef3ff;  --sc-orb-a: .9;   --sc-stars: .9;   --sc-rays: 0;   --sc-orb-craters: .18;
  --nav-surface:     rgba(7, 12, 22, 0.84);
  --nav-ink:         #e7edf7;
  --nav-ink-dim:     rgba(231, 237, 247, 0.86);
  --nav-rule:        rgba(231, 237, 247, 0.12);
  --nav-rule-strong: rgba(156, 196, 255, 0.55);
  --nav-hover:       rgba(231, 237, 247, 0.08);
  --nav-shadow:      rgba(2, 6, 14, 0.5);
}

html[data-tone="golden"] {
  --panel:   #15100a;
  --txt: #f6ead6;  --text: #f6ead6;
  --txt2: rgba(246,234,214,.78); --txt3: rgba(246,234,214,.62); --muted: rgba(246,234,214,.62);
  --border: rgba(246,234,214,.13);
  --theme-accent:    #e2a94f;
  --theme-accent-2:  #b8672c;
  --theme-cta-from:  #7a3f00;
  --theme-cta-to:    #e2a94f;
  --cyan: #e2a94f;  --violet: #7a3f00;  --gold: #e2a94f;
  --brand-green:     #9ccf8a;
  --theme-hero-1:    #1a1006;
  --theme-hero-2:    #5a2e0a;
  --theme-hero-3:    #b8672c;
  --theme-hero-glow: rgba(226,169,79,0.3);
  --photo-filter: saturate(.50) contrast(1.06) brightness(.82);
  --photo-tint:   #6b3800;
  --photo-tint-a: .42;
  --hero-plate: rgba(21,16,10,.5);
  --card-tint: rgba(90,50,10,.4);
  --sc-sky-top: #2a1508;
  --sc-sky-mid: #8a3f16;
  --sc-sky-bot: #e6a15a;
  --sc-horizon-glow: rgba(255,190,100,.5);
  --sc-far: #2c2118;
  --sc-sail: #e9dcc7;
  --sc-water-top: #6a3a1c;
  --sc-water-bot: #20120a;
  --sc-mist: rgba(255,210,150,.22);
  --sc-cloud: rgba(255,214,160,.34);
  --sc-bird: #f1dcb8;
  --sc-orb: #ffb347;  --sc-orb-a: .85;  --sc-stars: .25;  --sc-rays: .22; --sc-orb-craters: 0;
  --nav-surface:     rgba(21, 16, 10, 0.86);
  --nav-ink:         #f6ead6;
  --nav-ink-dim:     rgba(246, 234, 214, 0.86);
  --nav-rule:        rgba(246, 234, 214, 0.14);
  --nav-rule-strong: rgba(226, 169, 79, 0.6);
  --nav-hover:       rgba(246, 234, 214, 0.08);
  --nav-shadow:      rgba(10, 6, 2, 0.5);
}

/* One surface. The page background and every block, card and panel sit on
   the theme's single colour; a hairline border, not a second fill, says
   where a block begins. Pages that named --bg, --bg2, --card-bg, --glass or
   the section surfaces all resolve to that one colour now. */
:root, html[data-theme], html[data-tone] {
  --bg:        var(--panel);
  --bg2:       var(--panel);
  --panel-2:   var(--panel);
  --card-bg:   var(--panel);
  --surface:   var(--panel);
  --surface-0: var(--panel);
  --surface-1: var(--panel);
  --glass:     var(--panel);
  --ink-fill:  var(--panel);
  --wash:      transparent;
  --sc-sky-top: var(--panel);
  --sc-sky-mid: var(--panel);
  --sc-sky-bot: var(--panel);
}