/* ---------- Map page hero ---------- */
.map-page-hero{
  padding: 56px 0 40px;
  border-bottom: 1px solid var(--line);
}
.map-page-hero h1{
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(32px, 4.4vw, 48px);
  letter-spacing: -0.015em;
  margin-bottom: 16px;
  max-width: 16ch;
}
.map-page-hero .hero-intro{
  font-size: 16px;
  color: var(--ink-soft);
  max-width: 60ch;
}

/* ---------- Layout ---------- */
.map-section{ padding: 48px 0 64px; border-bottom: 1px solid var(--line); }
.map-layout{
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;
  align-items: start;
}

/* ---------- Legend ---------- */
.legend{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 18px;
}
.legend-item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.swatch{
  width: 10px; height: 10px;
  display: inline-block;
  border-radius: 2px;
}
.swatch.producer{ background: var(--madder); }
.swatch.origin{ background: var(--indigo); }
.swatch.emerging{ background: var(--grass); }
.swatch.hub{ background: var(--ink-soft); }

/* ---------- Map ---------- */
.map-status{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--ink-soft);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
#world-map{
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  background: var(--fiber);
  display: block;
  overflow: visible;
}
#world-map .country{
  fill: var(--fiber-deep);
  stroke: var(--fiber);
  stroke-width: 0.5;
  transition: fill 0.15s ease;
}
#world-map .country.focus{ cursor: pointer; }
#world-map .country.focus.producer{ fill: var(--madder); }
#world-map .country.focus.origin{ fill: var(--indigo); }
#world-map .country.focus.emerging{ fill: var(--grass); }
#world-map .country.focus.hub{ fill: var(--ink-soft); }
#world-map .country.focus:hover,
#world-map .country.focus.active{ opacity: 0.8; }
#world-map .country:focus-visible{
  outline: 2px solid var(--indigo-deep);
  outline-offset: 1px;
}

/* ---------- On-map country name labels (pin + leader line + flag) ---------- */
/* Pure SVG overlay drawn inside the existing viewBox — this never resizes
   the SVG or its container, so it cannot affect surrounding page layout. */
.map-labels{ pointer-events: none; }
.map-label-line{
  stroke-width: 1.25;
}
.map-label-line.hover{ stroke: var(--ink); opacity: 0.55; }
.map-label-line.active{ stroke: var(--indigo-deep); opacity: 0.85; }
.map-label-pin{
  stroke-width: 1.5;
}
.map-label-pin.hover{ fill: var(--fiber); stroke: var(--ink); }
.map-label-pin.active{ fill: var(--indigo-deep); stroke: var(--fiber); }
.map-label-bg{
  stroke-width: 1;
}
.map-label-bg.hover{
  fill: var(--fiber);
  stroke: var(--ink);
  opacity: 0.95;
}
.map-label-bg.active{
  fill: var(--indigo-deep);
  stroke: var(--indigo-deep);
}
.map-label-text{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.01em;
}
.map-label-text.hover{ fill: var(--ink); }
.map-label-text.active{ fill: var(--fiber); font-weight: 600; }

/* ---------- Region list — "Where it's grown", accessible alt to map clicks ---------- */
.region-list-head{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 32px;
  margin-bottom: 4px;
}
.region-list-head h2{
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.region-list-head .num{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--ink-soft);
}
.region-rows{
  display: flex;
  flex-direction: column;
}
.region-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 12px 4px;
  border: none;
  border-bottom: 1px solid var(--line);
  background: none;
  font-family: 'Archivo', sans-serif;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s ease;
}
.region-rows .region-row:first-child{ border-top: 1px solid var(--line); }
.region-row:hover{ background: var(--fiber-deep); }
.region-row.active{ background: var(--fiber-deep); }
.region-row.active .row-name{ font-weight: 600; color: var(--indigo-deep); }
.region-row:focus-visible{ outline: 2px solid var(--indigo); outline-offset: -2px; }
.row-name{ flex-shrink: 0; }
.mini-bar{
  display: flex;
  gap: 2px;
  width: 80px;
  flex-shrink: 0;
}
.mini-bar .seg{
  flex: 1;
  height: 6px;
  background: var(--fiber-deep);
}

/* ---------- Info panel ---------- */
.info-panel{
  border: 1px solid var(--line);
  padding: 28px;
  min-height: 280px;
  position: sticky;
  top: 24px;
}
.info-panel .idx{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--madder);
}
.info-content h2{
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 22px;
  margin-top: 10px;
  margin-bottom: 12px;
}
.info-content p{
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.info-default-note{
  font-size: 13px;
  color: var(--indigo-deep);
  background: var(--fiber-deep);
  border-left: 3px solid var(--indigo);
  padding: 10px 12px;
  margin-bottom: 14px;
  line-height: 1.5;
}
.volume-block{ margin-top: 22px; }
.volume-label{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.volume-bar{
  display: flex;
  gap: 3px;
  margin-top: 8px;
}
.volume-bar .seg{
  flex: 1;
  height: 8px;
  background: var(--fiber-deep);
}
.volume-note{
  font-family: 'Archivo', sans-serif;
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 8px;
  line-height: 1.5;
}

.tag-row{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.tag{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 5px 9px;
  background: var(--fiber-deep);
  color: var(--ink-soft);
}

@media (max-width: 900px){
  .map-layout{ grid-template-columns: 1fr; }
  .info-panel{ position: static; }
}