/* =========================================================
   TYING THE KNOT — book-locations site
   Celtic-knotwork + Akan-kente textile aesthetic
   ========================================================= */

:root {
  /* Kente / Celtic palette */
  --ink: #1c1410;
  --ink-soft: #3a2b22;
  --parchment: #f5ecd6;
  --parchment-dark: #e6d8b3;
  --kente-red: #b03a2e;       /* deep madder */
  --kente-red-deep: #7a2418;
  --kente-gold: #d4a017;      /* saffron gold thread */
  --kente-gold-deep: #a87a0a;
  --kente-green: #2e7a5a;     /* forest / kente green */
  --kente-green-deep: #1d5038;
  --kente-indigo: #2c3e6b;    /* woven warp indigo */
  --kente-indigo-deep: #1a2645;
  --kente-purple: #5b3a8e;    /* Skirrid mountain purple */
  --wool: #f9f3e3;

  /* Region colours */
  --region-hay: #b03a2e;
  --region-golden-valley: #d4a017;
  --region-black-mountains: #5b3a8e;
  --region-wider-marches: #2e7a5a;

  --shadow: 0 6px 20px rgba(28, 20, 16, 0.18);
  --shadow-soft: 0 2px 8px rgba(28, 20, 16, 0.10);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: Georgia, "Cormorant Garamond", "EB Garamond", serif;
  background: var(--parchment);
  color: var(--ink);
  line-height: 1.65;
  min-height: 100vh;
  /* faint woven cross-hatch texture */
  background-image:
    repeating-linear-gradient(0deg, rgba(122,36,24,0.025) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(122,36,24,0.025) 0 1px, transparent 1px 24px);
}

/* =========================================================
   TYPOGRAPHY
   ========================================================= */
h1, h2, h3, h4 {
  font-family: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--ink);
}
h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.1; }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); line-height: 1.2; margin-bottom: 1rem; }
h3 { font-size: 1.35rem; line-height: 1.3; margin-bottom: 0.6rem; color: var(--kente-red-deep); }
h4 { font-size: 1.1rem; margin-bottom: 0.4rem; color: var(--kente-indigo-deep); }
p  { margin-bottom: 1rem; }

a {
  color: var(--kente-red-deep);
  text-decoration: none;
  border-bottom: 1px dotted var(--kente-gold);
  transition: color 0.15s, border-color 0.15s;
}
a:hover { color: var(--kente-gold-deep); border-bottom-color: var(--kente-red); }

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  background:
    linear-gradient(180deg, var(--kente-indigo-deep), var(--kente-indigo));
  color: var(--wool);
  padding: 1.5rem 2rem 1.2rem;
  border-bottom: 4px solid var(--kente-gold);
  position: relative;
  overflow: hidden;
}
.site-header::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -4px; height: 8px;
  background: repeating-linear-gradient(90deg,
    var(--kente-red) 0 12px, var(--kente-gold) 12px 24px,
    var(--kente-green) 24px 36px, var(--kente-gold) 36px 48px);
  opacity: 0.85;
}
.site-header-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
}
.site-title {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  color: var(--wool);
}
.site-title .accent { color: var(--kente-gold); font-style: italic; }
.site-subtitle {
  color: rgba(249, 243, 227, 0.75);
  font-style: italic;
  font-size: 0.95rem;
}
.site-nav {
  background: var(--wool);
  border-bottom: 1px solid var(--parchment-dark);
  padding: 0.7rem 2rem;
  font-size: 0.92rem;
}
.site-nav-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; gap: 1.5rem; flex-wrap: wrap;
}
.site-nav a {
  color: var(--ink-soft);
  border-bottom: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { border-bottom-color: var(--kente-red); }
.site-nav a.active { border-bottom-color: var(--kente-gold); color: var(--kente-red-deep); }

/* =========================================================
   MAP PAGE LAYOUT
   ========================================================= */
.map-page {
  max-width: 1300px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 3rem;
}

.map-intro {
  background: var(--wool);
  border: 1px solid var(--parchment-dark);
  border-left: 5px solid var(--kente-gold);
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-soft);
}
.map-intro h1 { color: var(--kente-red-deep); margin-bottom: 0.4rem; }
.map-intro p { margin-bottom: 0.5rem; }

.map-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 880px) {
  .map-grid { grid-template-columns: 1fr; }
}

.map-stage {
  background: var(--wool);
  border: 1px solid var(--parchment-dark);
  box-shadow: var(--shadow);
  padding: 0.8rem;
  position: relative;
}

.map-frame {
  width: 100%;
  height: auto;
  display: block;
  background: #e8dcb8;
  border: 1px solid var(--kente-indigo);
  cursor: grab;
  /* Prevent the browser from highlighting map text/elements as the user drags */
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
}
.map-frame:active {
  cursor: grabbing;
}
.map-stage,
.map-toolbar,
.fullscreen-toggle {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
/* Map labels / markers should never be selectable either — they live inside the SVG */
.map-frame text,
.map-frame .marker,
.map-frame .marker-ring,
.map-frame .marker-label {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: auto;
}

.legend {
  display: flex; flex-wrap: wrap; gap: 0.8rem;
  padding: 0.7rem 0.4rem 0;
  font-size: 0.85rem;
}
.legend-item {
  display: flex; align-items: center; gap: 0.4rem;
  color: var(--ink-soft);
}
.legend-swatch {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid var(--wool);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
}

.region-list {
  background: var(--wool);
  border: 1px solid var(--parchment-dark);
  box-shadow: var(--shadow-soft);
  padding: 1.2rem;
  max-height: 78vh;
  overflow-y: auto;
}

/* Detail panel: overlay that opens when you click any OSM feature */
.detail-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 380px;
  max-width: 92vw;
  background: var(--wool);
  border-left: 1px solid var(--parchment-dark);
  box-shadow: -4px 0 18px rgba(0,0,0,0.15);
  padding: 1.6rem 1.4rem 1.4rem;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.28s ease-out;
  z-index: 200;
}
.detail-panel[aria-hidden="false"] {
  transform: translateX(0);
}
.detail-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  background: var(--wool);
  border: 1px solid var(--parchment-dark);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-soft);
  font-family: Georgia, serif;
  padding: 0;
}
.detail-close:hover {
  background: var(--parchment);
  color: var(--ink);
}
.detail-content h2 {
  font-size: 1.45rem;
  color: var(--kente-red-deep);
  margin: 0 0 0.4rem 0;
  padding-right: 2rem;
  font-family: "Cormorant Garamond", Georgia, serif;
}
.detail-content .detail-kind {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: var(--parchment);
  border: 1px solid var(--parchment-dark);
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  color: var(--ink-soft);
  margin-bottom: 0.6rem;
  font-weight: 600;
}
.detail-content .detail-folklore-label {
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0.9rem 0 0.4rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px dotted var(--parchment-dark);
  font-weight: 600;
}
.detail-content .detail-folklore {
  background: rgba(154, 30, 30, 0.06);
  border-left: 3px solid rgba(154, 30, 30, 0.4);
  padding: 0.7rem 0.85rem;
  font-family: Georgia, serif;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #3a2418;
  margin-bottom: 0.4rem;
  border-radius: 2px;
}
.detail-content .detail-folklore strong {
  color: var(--kente-red-deep);
  font-weight: 700;
}
.detail-content .detail-section {
  margin: 1rem 0 0.8rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--parchment-dark);
}
.detail-content .detail-section h3 {
  font-size: 0.78rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
  font-weight: 600;
}
.detail-content .detail-section p {
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0.3rem 0;
  color: var(--ink);
}
.detail-content .detail-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 0.8rem;
  font-size: 0.88rem;
  margin: 0.5rem 0;
}
.detail-content .detail-grid dt {
  font-weight: 600;
  color: var(--ink-soft);
}
.detail-content .detail-grid dd {
  margin: 0;
  color: var(--ink);
}
.detail-content .detail-folklore {
  background: var(--parchment);
  border-left: 3px solid var(--kente-gold);
  padding: 0.7rem 0.9rem;
  margin: 0.8rem 0;
  font-size: 0.9rem;
  line-height: 1.55;
  font-style: italic;
  color: var(--ink);
}
.detail-content .detail-folklore strong {
  font-style: normal;
  color: var(--kente-red-deep);
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.3rem;
}
.detail-content .detail-link {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--kente-red-deep);
  text-decoration: underline;
}
.detail-content .detail-no-folklore {
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-style: italic;
}
.region-list h2 { color: var(--kente-red-deep); margin-bottom: 0.8rem; font-size: 1.4rem; }
.region-block { margin-bottom: 1.2rem; }
.region-block h3 {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.3rem;
  border-bottom: 2px solid;
  display: inline-block;
}
.region-block ul { list-style: none; padding: 0; }
.region-block li {
  padding: 0.4rem 0;
  border-bottom: 1px dotted var(--parchment-dark);
}
.region-block li:last-child { border-bottom: none; }
.region-block li a {
  display: flex; align-items: baseline; gap: 0.6rem;
  border-bottom: none;
}
.region-block li a::before {
  content: "";
  display: inline-block;
  width: 10px; height: 10px; border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid var(--wool);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
}
.region-block li a:hover { color: var(--kente-red-deep); }

/* =========================================================
   MAP MARKERS (SVG)
   ========================================================= */
.marker {
  cursor: pointer;
  transition: transform 0.15s ease;
  transform-origin: center;
  transform-box: fill-box;
}
.marker:hover { transform: scale(1.4); }
.marker.active { transform: scale(1.5); }
.marker-ring {
  fill: none;
  stroke-width: 1.5;
  opacity: 0.6;
}
.marker-label.marker-label-hidden { display: none; }
.marker:hover ~ .marker-label,
a:hover .marker-label { display: block !important; }

.marker-label {
  font-family: Georgia, serif;
  font-size: 11px;
  fill: var(--ink);
  pointer-events: none;
  paint-order: stroke fill;
  stroke: var(--wool);
  stroke-width: 4;
  stroke-linejoin: round;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Region colour classes on markers and headings */
.col-hay             { color: var(--region-hay); border-color: var(--region-hay) !important; }
.col-golden-valley   { color: var(--region-golden-valley); border-color: var(--region-golden-valley) !important; }
.col-black-mountains { color: var(--region-black-mountains); border-color: var(--region-black-mountains) !important; }
.col-wider-marches   { color: var(--region-wider-marches); border-color: var(--region-wider-marches) !important; }

.fill-hay             { fill: var(--region-hay); }
.fill-golden-valley   { fill: var(--region-golden-valley); }
.fill-black-mountains { fill: var(--region-black-mountains); }
.fill-wider-marches   { fill: var(--region-wider-marches); }

.sw-hay             { background: var(--region-hay); }
.sw-golden-valley   { background: var(--region-golden-valley); }
.sw-black-mountains { background: var(--region-black-mountains); }
.sw-wider-marches   { background: var(--region-wider-marches); }

/* =========================================================
   LOCATION PAGES
   ========================================================= */
.location-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
}

.location-hero {
  background: var(--wool);
  border: 1px solid var(--parchment-dark);
  border-left: 5px solid var(--kente-gold);
  padding: 1.6rem 1.8rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-soft);
  position: relative;
}
.location-hero .region-tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.6rem;
  border-radius: 3px;
  color: white;
  margin-bottom: 0.7rem;
}
.location-hero h1 {
  color: var(--kente-red-deep);
  margin-bottom: 0.5rem;
}
.location-hero .lede {
  font-size: 1.1rem;
  font-style: italic;
  color: var(--ink-soft);
}

.location-section {
  background: var(--wool);
  border: 1px solid var(--parchment-dark);
  padding: 1.4rem 1.6rem;
  margin-bottom: 1.4rem;
  box-shadow: var(--shadow-soft);
}
.location-section h2 {
  color: var(--kente-indigo-deep);
  font-size: 1.4rem;
  border-bottom: 2px dotted var(--kente-gold);
  padding-bottom: 0.4rem;
  margin-bottom: 0.9rem;
}
.location-section.novel h2 { color: var(--kente-purple); }
.location-section.sources h2 { color: var(--kente-green-deep); }

.location-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin-bottom: 1rem;
}
.location-meta dt {
  font-weight: 600;
  color: var(--ink);
  font-style: italic;
}

.back-link {
  display: inline-block;
  margin-bottom: 1.2rem;
  font-size: 0.9rem;
}

/* =========================================================
   DECORATIVE DIVIDERS
   ========================================================= */
.knot-divider {
  display: block;
  margin: 2rem auto;
  max-width: 320px;
  height: 28px;
}
.kente-divider {
  display: block;
  margin: 1.4rem 0;
  width: 100%;
  height: 14px;
  background:
    repeating-linear-gradient(90deg,
      var(--kente-red) 0 16px,
      var(--kente-gold) 16px 28px,
      var(--kente-green) 28px 44px,
      var(--kente-gold) 44px 56px,
      var(--kente-indigo) 56px 72px,
      var(--kente-gold) 72px 84px);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background: var(--kente-indigo-deep);
  color: var(--wool);
  padding: 1.5rem 2rem;
  text-align: center;
  font-size: 0.88rem;
  border-top: 4px solid var(--kente-gold);
  margin-top: 3rem;
}
.site-footer a { color: var(--kente-gold); }
.site-footer p { margin-bottom: 0.4rem; }
.site-footer .small { font-size: 0.8rem; opacity: 0.7; }

/* =========================================================
   PRINT
   ========================================================= */
@media print {
  .site-header, .site-nav, .site-footer, .back-link, .map-toolbar { display: none; }
  body { background: white; }
  .location-section { box-shadow: none; border: 1px solid #ccc; page-break-inside: avoid; }
}

/* =========================================================
   MAP TOOLBAR + ZOOM CONTROLS
   ========================================================= */
.map-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 0.5rem;
  padding: 0 0.2rem;
}
.zoom-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--wool);
  border: 1px solid var(--parchment-dark);
  border-radius: 4px;
  padding: 0.2rem 0.4rem;
  box-shadow: var(--shadow-soft);
}
.zoom-controls button {
  width: 30px;
  height: 30px;
  border: 1px solid var(--parchment-dark);
  background: var(--wool);
  color: var(--ink);
  font-family: Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  border-radius: 3px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  transition: background 0.12s, border-color 0.12s;
}
.zoom-controls button:hover {
  background: var(--kente-gold);
  border-color: var(--kente-gold-deep);
  color: white;
}
.zoom-controls button:active {
  background: var(--kente-gold-deep);
}
.zoom-controls button:focus-visible {
  outline: 2px solid var(--kente-indigo);
  outline-offset: 1px;
}
.zoom-display {
  font-family: Georgia, serif;
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-left: 0.3rem;
  min-width: 3rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.toolbar-divider {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: var(--parchment-dark);
  margin: 0 0.3rem 0 0.4rem;
  opacity: 0.7;
}

.fullscreen-toggle {
  font-size: 1.1rem !important;   /* override the .zoom-controls button 1.15rem */
  font-weight: 500 !important;
  /* Slightly wider than the +/- buttons so the ⛶ glyph fits cleanly */
  width: 34px !important;
  letter-spacing: 0;
}
.fullscreen-toggle.is-fullscreen {
  background: var(--kente-gold);
  border-color: var(--kente-gold-deep);
  color: white;
}

.layers-toggle {
  font-size: 1.05rem !important;
  font-weight: 500 !important;
  width: 34px !important;
  letter-spacing: 0;
  line-height: 1;
  padding: 0;
}
.layers-toggle.is-open {
  background: var(--kente-gold);
  border-color: var(--kente-gold-deep);
  color: white;
}

/* =========================================================
   OSM BASE LAYER STYLING
   ========================================================= */

/* =========================================================
   LAYER PANEL
   Dropdown anchored to the Layers button. Lives inside .map-stage
   so it inherits the fullscreen layout. Selection disabled so the
   panel can't be text-selected while panning the map nearby.
   ========================================================= */
.layers-panel {
  position: absolute;
  top: calc(0.6rem + 44px);     /* sits below the toolbar (toolbar height ~36-44px) */
  right: 0.6rem;
  width: 280px;
  max-width: calc(100% - 1.2rem);
  max-height: calc(100% - 60px);
  overflow-y: auto;
  background: var(--wool);
  border: 1px solid var(--parchment-dark);
  border-radius: 5px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.22);
  padding: 0.9rem 1rem 0.8rem;
  z-index: 60;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.layers-panel[hidden] {
  display: none !important;
}
.layers-panel-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--parchment-dark);
}
.layers-panel-header h3 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: 1.05rem;
  color: var(--kente-indigo-deep);
  flex: 1 1 auto;
}
.layers-reset,
.layers-close {
  background: transparent;
  border: 1px solid var(--parchment-dark);
  border-radius: 3px;
  font-family: Georgia, serif;
  font-size: 0.82rem;
  color: var(--ink);
  padding: 0.18rem 0.5rem;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  line-height: 1.1;
}
.layers-reset:hover,
.layers-close:hover {
  background: var(--kente-gold);
  border-color: var(--kente-gold-deep);
  color: white;
}
.layers-close {
  width: 26px;
  padding: 0.18rem 0;
  font-size: 1.05rem;
  line-height: 1;
}
.layers-section {
  margin-bottom: 0.7rem;
}
.layers-section:last-of-type {
  margin-bottom: 0.4rem;
}
.layers-section-title {
  margin: 0 0 0.35rem;
  font-family: Georgia, serif;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
}
.layers-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.layer-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.28rem 0.3rem;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.1s;
}
.layer-item:hover {
  background: rgba(212, 160, 23, 0.12);
}
.layer-item input[type="checkbox"] {
  /* Custom switch styling */
  appearance: none;
  -webkit-appearance: none;
  width: 28px;
  height: 16px;
  border-radius: 9px;
  background: var(--parchment-dark);
  position: relative;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background 0.18s;
  margin: 0;
  padding: 0;
  border: 1px solid var(--parchment-dark);
}
.layer-item input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--wool);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  transition: transform 0.18s;
}
.layer-item input[type="checkbox"]:checked {
  background: var(--kente-gold);
  border-color: var(--kente-gold-deep);
}
.layer-item input[type="checkbox"]:checked::after {
  transform: translateX(12px);
}
.layer-item input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--kente-indigo);
  outline-offset: 2px;
}
.layer-swatch {
  display: inline-block;
  width: 18px;
  height: 12px;
  border-radius: 2px;
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
}
.layer-label {
  font-family: Georgia, serif;
  font-size: 0.92rem;
  color: var(--ink);
  flex: 1 1 auto;
}
.layer-count {
  font-family: Georgia, serif;
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.layers-hint {
  margin: 0.6rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--parchment-dark);
  font-family: Georgia, serif;
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.45;
}

/* On narrow viewports the panel takes more of the width */
@media (max-width: 600px) {
  .layers-panel {
    width: calc(100% - 1.2rem);
  }
}

/* In fullscreen the panel just inherits — no special layout needed because
   .map-stage is already position: fixed; inset: 0 in fullscreen mode. */

/* =========================================================
   FULLSCREEN MAP MODE
   Triggered by adding `body.fs-map` via the Fullscreen button.
   Hides everything outside the map stage and lets the map
   fill the viewport. Press Esc or click the button again to
   exit. Selection stays disabled on the map at all times.
   ========================================================= */
body.fs-map {
  overflow: hidden;            /* no page-scroll behind the map */
}
body.fs-map .site-header,
body.fs-map .site-nav,
body.fs-map .site-footer,
body.fs-map .map-intro,
body.fs-map #about,
body.fs-map .back-link,
body.fs-map .region-list,       /* sidebar hidden in fullscreen for more map room */
body.fs-map .legend,
body.fs-map .kente-divider {
  display: none !important;
}
body.fs-map .map-grid {
  display: block;             /* override the grid so we can size the stage freely */
  margin: 0;
  height: 100vh;
  width: 100vw;
  padding: 0;
}
body.fs-map .map-stage {
  /* Fill the viewport with no padding chrome */
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  padding: 0.6rem;
  border: none;
  box-shadow: none;
  background: var(--wool);
  z-index: 50;
  display: flex;
  flex-direction: column;
}
body.fs-map .map-toolbar {
  flex: 0 0 auto;
  margin: 0 0 0.4rem 0;
  padding: 0 0.3rem;
}
body.fs-map .map-frame {
  /* Take the rest of the viewport — preserves aspect ratio at 1100x760 (≈1.447:1) */
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  align-self: stretch;
  /* ViewBox is 1100x760, aspect ≈1.447:1 — let preserveAspectRatio default
     (xMidYMid meet) centre & letterbox whichever dimension runs out first. */
  display: block;
}
/* On wide viewports (e.g. >1.45:1 aspect) the map letterboxes left/right.
   Cap the width so it never overflows beyond its native aspect. */
body.fs-map .map-stage::after { content: ""; flex: 0 0 0; }
.osm-forest {
  fill: #b8d0a0;
  fill-opacity: 0.55;
  stroke: #6a8a50;
  stroke-width: 0.6;
  stroke-opacity: 0.6;
}
.osm-forest:hover {
  fill: #a8c890;
  fill-opacity: 0.75;
}

.osm-river {
  fill: none;
  stroke: #2e7eb5;
  stroke-width: 2.8;
  stroke-opacity: 0.95;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.osm-river-label {
  font-family: Georgia, serif;
  font-size: 10px;
  font-style: italic;
  font-weight: 600;
  fill: #1a4f7a;
  paint-order: stroke fill;
  stroke: rgba(232, 220, 184, 0.9);
  stroke-width: 3.5;
  stroke-linejoin: round;
  pointer-events: none;
  user-select: none;
}
.osm-stream {
  fill: none;
  stroke: #5fa8d4;
  stroke-width: 1.2;
  stroke-opacity: 0.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.osm-road {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.osm-road-trunk    { stroke: #c87a2d; stroke-width: 2.4; opacity: 0.9; }
.osm-road-primary  { stroke: #c87a2d; stroke-width: 1.7; opacity: 0.8; }
.osm-road-secondary{ stroke: #c87a2d; stroke-width: 1.2; opacity: 0.65; }
.osm-road:hover    { opacity: 1; stroke-width: 3; }

.osm-road-label {
  font-family: Georgia, serif;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  fill: #5a3214;
  paint-order: stroke fill;
  stroke: rgba(232, 220, 184, 0.92);
  stroke-width: 2.8;
  stroke-linejoin: round;
  pointer-events: none;
  user-select: none;
}
.osm-road-label-trunk   { fill: #4a2810; font-size: 9.5px; stroke-width: 3.2; }
.osm-road-label-primary { fill: #5a3214; font-size: 8.5px; stroke-width: 2.8; }

/* Terrain: mountain polygons + peak markers (derived from OSM natural=peak) */
.osm-mountain {
  fill: #8a7a60;
  fill-opacity: 0.45;
  stroke: #4a3a26;
  stroke-width: 1;
  stroke-opacity: 0.7;
  stroke-linejoin: round;
  pointer-events: none;
}
.osm-mountain-beacons       { fill: #7a6a50; fill-opacity: 0.4; }
.osm-mountain-black_mountains { fill: #8a7050; fill-opacity: 0.5; }
.osm-mountain:hover         { fill-opacity: 0.65; stroke-width: 1.5; }

.osm-mountain-label {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  fill: #3a2b22;
  pointer-events: none;
  user-select: none;
  paint-order: stroke fill;
  stroke: rgba(232, 220, 184, 0.85);
  stroke-width: 4;
  stroke-linejoin: round;
}
.osm-mountain-label-beacons       { font-size: 14px; }
.osm-mountain-label-black_mountains { font-size: 16px; }

.osm-peak-tri {
  fill: #4a3520;
  stroke: #2a1d10;
  stroke-width: 0.5;
}
.osm-peak-major {
  fill: #2a1d10;
}

.osm-peak-label {
  font-family: Georgia, serif;
  font-size: 8.5px;
  font-weight: 600;
  font-style: italic;
  fill: #2a1d10;
  paint-order: stroke fill;
  stroke: rgba(232, 220, 184, 0.9);
  stroke-width: 2.5;
  stroke-linejoin: round;
  pointer-events: none;
  user-select: none;
}

/* Hide labels by default; reveal on hover of the parent group */
.label-hidden { display: none; }
g.osm-peak:hover > .osm-peak-label,
g.osm-place:hover > .osm-place-label,
g.osm-tree:hover > .osm-tree-label,
g.osm-spring:hover > .osm-spring-label {
  display: block !important;
}
g.osm-peak:hover .osm-peak-tri { fill: #c04020; }
g.osm-place:hover .osm-place-dot { fill: #c04020; stroke: #6a1d10; }

/* Ancient Tree Inventory: small stylised tree icons, mostly silent on the map */
.osm-tree-trunk {
  stroke: #4a3520;
  stroke-width: 0.8;
  stroke-linecap: round;
}
.osm-tree-canopy {
  fill: #4a6a32;
  fill-opacity: 0.7;
  stroke: #2a3e1a;
  stroke-width: 0.4;
}
.osm-tree-ancient .osm-tree-canopy {
  fill: #3a5a25;
  fill-opacity: 0.85;
  stroke: #1a2a0a;
  stroke-width: 0.6;
}
.osm-tree-named .osm-tree-canopy {
  fill: #6a4a20;
  fill-opacity: 0.85;
  stroke: #3a2510;
}
.osm-tree:hover .osm-tree-canopy { fill: #c04020; fill-opacity: 1; }
.osm-tree:hover .osm-tree-trunk { stroke: #6a1d10; }

.osm-tree-label {
  font-family: Georgia, serif;
  font-size: 7.5px;
  font-weight: 600;
  font-style: italic;
  fill: #2a3e1a;
  paint-order: stroke fill;
  stroke: rgba(232, 220, 184, 0.9);
  stroke-width: 2.5;
  stroke-linejoin: round;
  pointer-events: none;
  user-select: none;
}

/* Springs & wells (OSM natural=spring + amenity=drinking_water) */
.osm-spring-dot {
  fill: #5fa8d4;
  fill-opacity: 0.7;
  stroke: #2e6e95;
  stroke-width: 0.5;
}
.osm-spring-named .osm-spring-dot {
  fill: #4a90c0;
  fill-opacity: 0.95;
  stroke: #1a5070;
  stroke-width: 0.7;
}
.osm-spring:hover .osm-spring-dot { fill: #c04020; fill-opacity: 1; stroke: #6a1d10; }

.osm-spring-label {
  font-family: Georgia, serif;
  font-size: 7.5px;
  font-weight: 600;
  font-style: italic;
  fill: #1a5070;
  paint-order: stroke fill;
  stroke: rgba(232, 220, 184, 0.9);
  stroke-width: 2.5;
  stroke-linejoin: round;
  pointer-events: none;
  user-select: none;
}

/* Historic sites */
.osm-historic text {
  font-family: Georgia, serif;
  font-size: 13px;
  font-weight: 700;
  paint-order: stroke fill;
  stroke: var(--wool);
  stroke-width: 3.5;
  stroke-linejoin: round;
  cursor: help;
}
.osm-historic:hover text {
  stroke-width: 5;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3));
}
.osm-historic-castle text        { fill: #6a2418; }
.osm-historic-priory text        { fill: #5b3a8e; }
.osm-historic-ruins text         { fill: #5a4a32; }
.osm-historic-monument text      { fill: #7a5a08; }
.osm-historic-archaeological text{ fill: #2e7a5a; }

/* Places (towns, villages) */
.osm-place-dot {
  fill: #3a2b22;
  stroke: var(--wool);
  stroke-width: 1;
}
.osm-place-label {
  font-family: Georgia, serif;
  font-size: 10px;
  fill: #3a2b22;
  paint-order: stroke fill;
  stroke: var(--wool);
  stroke-width: 3;
  stroke-linejoin: round;
  pointer-events: none;
}
.osm-place-label-town {
  font-size: 11px;
  font-weight: 600;
}