@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

/* ==========================================================================
   Bhutan coverage map — self-contained embed
   All rules are namespaced under .bcm so nothing leaks into the host page.
   Palette, type and spacing are controlled by the variables below.
   ========================================================================== */

.bcm {
    --bcm-c-edu: #E08A26;
    --bcm-c-res: #1B54B0;
    --bcm-c-water: #2F3A3F;
    --bcm-c-live: #4FB863;
    --bcm-c-rest: #33502F;
    --bcm-c-clim: #D7342B;
    --bcm-c-youth: #BE55CE;

    --bcm-paper: #F1F4F0;
    --bcm-card: #FFFFFF;
    --bcm-land: #FCFDFB;
    --bcm-land-hi: #E6EEE7;
    --bcm-land-off: #E4E9E3;
    --bcm-line: #97AF9F;
    --bcm-line-soft: #C7D3C8;
    --bcm-ink: #12211A;
    --bcm-pine: #1E4735;
    --bcm-moss: #6E8578;
    --bcm-gold: #A9791F;
    --bcm-radius: 14px;

    container-type: inline-size;
    box-sizing: border-box;
    display: block;
    margin: 0;
    background: var(--bcm-paper);
    border-radius: var(--bcm-radius);
    color: var(--bcm-ink);
    font-family: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.bcm *, .bcm *::before, .bcm *::after { box-sizing: border-box; }

.bcm__inner {
    padding: clamp(20px, 3.2cqi, 40px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 290px);
    gap: clamp(22px, 3.4cqi, 48px);
    align-items: start;
}

.bcm__panel { order: 2; min-width: 0; }
.bcm__figure { order: 1; min-width: 0; }

/* ---------- panel ---------- */

.bcm__eyebrow {
    margin: 0 0 14px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bcm-moss);
}

.bcm__stat {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: .04em;
    font-family: Fraunces, "Iowan Old Style", Georgia, serif;
    font-weight: 600;
    font-size: clamp(58px, 13cqi, 104px);
    line-height: .84;
    letter-spacing: -.035em;
    color: var(--bcm-pine);
    font-variant-numeric: lining-nums;
}

.bcm__stat sup {
    font-size: .34em;
    font-weight: 400;
    color: var(--bcm-gold);
    letter-spacing: 0;
}

.bcm__rule {
    height: 2px;
    margin: 18px 0 16px;
    background: linear-gradient(to right, var(--bcm-gold) 0 var(--bcm-pct, 34%), var(--bcm-line-soft) var(--bcm-pct, 34%) 100%);
}

.bcm__lede {
    margin: 0 0 22px;
    font-size: 15px;
    color: #33443B;
    color: color-mix(in srgb, var(--bcm-ink) 84%, transparent);
    text-wrap: pretty;
}

.bcm__lede strong { font-weight: 600; color: var(--bcm-ink); }

/* ---------- legend / filter ---------- */

.bcm__legend { display: grid; gap: 1px; }

.bcm__row {
    display: grid;
    grid-template-columns: 14px 1fr auto;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-left: 2px solid transparent;
    border-radius: 6px;
    background: transparent;
    font: inherit;
    font-size: 13.5px;
    color: var(--bcm-ink);
    text-align: left;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.bcm__row:hover { background: rgba(30, 71, 53, .07); }
.bcm__row:focus-visible { outline: 2px solid var(--bcm-gold); outline-offset: 2px; }

.bcm__row[aria-pressed="true"] {
    background: rgba(30, 71, 53, .1);
    border-left-color: var(--bcm-gold);
    font-weight: 600;
}

.bcm__swatch {
    display: inline-block;
    flex: none;
    width: 13px; height: 13px;
    border-radius: 50%;
    background: var(--bcm-line);
}

.bcm__swatch--all {
    background: transparent;
    border: 1.5px dashed var(--bcm-moss);
}

  .bcm__swatch--edu { background: var(--bcm-c-edu); }
  .bcm__swatch--res { background: var(--bcm-c-res); }
  .bcm__swatch--water { background: var(--bcm-c-water); }
  .bcm__swatch--live { background: var(--bcm-c-live); }
  .bcm__swatch--rest { background: var(--bcm-c-rest); }
  .bcm__swatch--clim { background: var(--bcm-c-clim); }
  .bcm__swatch--youth { background: var(--bcm-c-youth); }

.bcm__count {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--bcm-moss);
}

.bcm__row[aria-pressed="true"] .bcm__count { color: var(--bcm-gold); }

.bcm__hint {
    margin: 12px 0 0 12px;
    font-size: 11.5px;
    color: var(--bcm-moss);
}

/* ---------- figure ---------- */

.bcm__figure { margin: 0; }

.bcm__map {
    background: var(--bcm-card);
    border: 1px solid var(--bcm-line-soft);
    border-radius: calc(var(--bcm-radius) - 4px);
    padding: clamp(8px, 1.6cqi, 18px);
}

.bcm__svg { display: block; width: 100%; height: auto; overflow: visible; }

.bcm__cap {
    margin: 14px 2px 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--bcm-moss);
    text-wrap: pretty;
}

.bcm__cap b { font-weight: 600; color: #46564D; }

/* ---------- map internals ---------- */

.bcm .d {
    fill: var(--bcm-land);
    stroke: var(--bcm-line);
    stroke-width: 1.1;
    stroke-linejoin: round;
    transition: fill .3s ease, opacity .3s ease;
}

.bcm .d.is-off { fill: var(--bcm-land-off); stroke: var(--bcm-line-soft); }
.bcm .d.is-on:hover { fill: var(--bcm-land-hi); }
.bcm .d.is-dim { fill: var(--bcm-land-off); stroke: var(--bcm-line-soft); }

.bcm .lbl {
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 7.5px;
    font-weight: 500;
    letter-spacing: .03em;
    text-anchor: middle;
    fill: var(--bcm-pine);
    pointer-events: none;
    transition: opacity .3s ease;
}

.bcm .lbl--off { fill: var(--bcm-moss); opacity: .7; }
.bcm .lbl.is-dim { opacity: .35; }

.bcm .dot {
    stroke: var(--bcm-card);
    stroke-width: 1.6;
    transition: opacity .3s ease;
}

.bcm .dot.is-mute { opacity: .1; }

  .bcm .dot--edu { fill: var(--bcm-c-edu); }
  .bcm .dot--res { fill: var(--bcm-c-res); }
  .bcm .dot--water { fill: var(--bcm-c-water); }
  .bcm .dot--live { fill: var(--bcm-c-live); }
  .bcm .dot--rest { fill: var(--bcm-c-rest); }
  .bcm .dot--clim { fill: var(--bcm-c-clim); }
  .bcm .dot--youth { fill: var(--bcm-c-youth); }

/* ---------- motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  .bcm .d { animation: bcm-fade .55s ease both; animation-delay: calc(var(--i, 0) * 22ms); }
  .bcm .lbl { animation: bcm-fade .5s ease both; animation-delay: 420ms; }
  .bcm .dot {
      transform-box: fill-box;
      transform-origin: center;
      animation: bcm-pop .45s cubic-bezier(.2, .8, .3, 1.35) both;
      animation-delay: calc(380ms + var(--i, 0) * 26ms);
  }
  @keyframes bcm-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes bcm-pop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
}

/* ---------- responsive (container-based, so it adapts to its column) ---------- */

@container (max-width: 780px) {
  .bcm__inner { grid-template-columns: minmax(0, 1fr); }
  .bcm__hint { margin-left: 0; }
}

@container (max-width: 780px) and (min-width: 461px) {
  .bcm__legend { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1px 10px; }
}

@container (max-width: 460px) {
  .bcm__legend { grid-template-columns: minmax(0, 1fr); }
  .bcm .lbl { font-size: 8.5px; letter-spacing: .03em; }
  .bcm__cap { font-size: 11.5px; }
}

@supports not (container-type: inline-size) {
  @media (max-width: 780px) {
    .bcm__inner { grid-template-columns: minmax(0, 1fr); }
    .bcm__legend { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  }
}

/* ---------- optional dark variant: <section class="bcm" data-theme="night"> ---------- */

.bcm[data-theme="night"] {
    --bcm-paper: #0E1714;
    --bcm-card: #131F1A;
    --bcm-land: #1B2A23;
    --bcm-land-hi: #24382D;
    --bcm-land-off: #16211C;
    --bcm-line: #3E5B4C;
    --bcm-line-soft: #2A3D34;
    --bcm-ink: #EAF1EA;
    --bcm-pine: #DDE8DD;
    --bcm-moss: #8AA294;
    --bcm-gold: #D9A94A;
}