/* Water Observatory — drought and water quality */
.drought-observatory{
  padding:clamp(76px,9vw,118px) 28px;
  overflow:hidden;
  background:
    radial-gradient(circle at 82% 8%,rgba(208,138,90,.13),transparent 31rem),
    radial-gradient(circle at 8% 76%,rgba(95,220,180,.09),transparent 30rem),
    linear-gradient(180deg,#06171d,#0a232a 52%,#071a21);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.drought-observatory .drought-wrap{max-width:1180px;margin:0 auto}
.drought-kicker{margin:0 0 16px;color:var(--copper);font:500 11px/1.4 'IBM Plex Mono',monospace;letter-spacing:.23em;text-transform:uppercase}
.drought-heading{max-width:920px;margin:0 0 18px;font-size:clamp(34px,5.1vw,64px);letter-spacing:-.024em}
.drought-heading em{color:var(--spring);font-weight:300}
.drought-intro{max-width:830px;margin:0 0 36px;color:#bdd5d4;font-size:clamp(17px,1.8vw,20px);line-height:1.6}
.drought-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch}
.drought-map-panel,.pollution-map-panel{display:flex;min-width:0;flex-direction:column;border:1px solid rgba(143,179,181,.22);border-radius:15px;background:rgba(5,19,24,.8);box-shadow:0 24px 70px rgba(0,0,0,.24);overflow:hidden}
.drought-panel-top{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding:19px 23px;border-bottom:1px solid var(--line)}
.drought-panel-label{display:block;color:var(--faint);font:500 10px/1.4 'IBM Plex Mono',monospace;letter-spacing:.18em;text-transform:uppercase}
.drought-panel-title{display:block;margin-top:4px;color:var(--ice);font:400 23px/1.2 'Fraunces',serif}
.drought-update-tag{display:inline-flex;flex:0 0 auto;align-items:center;gap:7px;margin-top:2px;color:#f6d4a7;font:500 10px/1.35 'IBM Plex Mono',monospace;letter-spacing:.09em;text-transform:uppercase}
.drought-update-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--copper);box-shadow:0 0 0 4px rgba(208,138,90,.12)}
.drought-map-frame{padding:17px;background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.06),transparent 70%)}
.drought-map-frame a{display:block;line-height:0}
.drought-map-frame img{display:block;width:100%;height:auto;object-fit:contain;background:#f8f7f1;border-radius:5px}
.drought-map-frame [hidden]{display:none!important}
.drought-map-frame span:not([hidden]){display:block;padding:38px 22px;border-radius:5px;background:#f8f7f1;color:#183138;font:500 14px/1.5 'IBM Plex Mono',monospace}
.drought-map-caption{margin:0;padding:0 23px 14px;color:var(--mist);font-size:13px;line-height:1.55}
.pollution-map-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;margin:0 23px 18px;padding:13px 15px;border:1px solid rgba(143,179,181,.18);border-radius:8px;color:var(--mist);font:400 10px/1.4 'IBM Plex Mono',monospace}
.pollution-map-legend span:not(.pollution-legend-title){display:flex;align-items:center;gap:7px}
.pollution-legend-title{grid-column:1/-1;margin-bottom:3px;color:var(--faint);font-size:9px;letter-spacing:.1em;text-transform:uppercase}
.pollution-map-legend i{flex:0 0 auto;width:8px;height:8px;transform:rotate(45deg);border:1px solid rgba(255,255,255,.4)}
.pollution-key-low{background:#1f5e85}.pollution-key-possible{background:#a9d7e9}.pollution-key-concern{background:#ed9c51}.pollution-key-high{background:#b92d36}
.drought-map-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding:0 23px 20px}
.drought-map-actions a{color:var(--spring);font:500 10px/1.4 'IBM Plex Mono',monospace;letter-spacing:.11em;text-transform:uppercase}
.drought-map-actions a:hover{text-decoration:underline;text-underline-offset:4px}
.drought-map-actions span{color:var(--faint);font:400 10px/1.45 'IBM Plex Mono',monospace;letter-spacing:.03em}
.drought-method{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:19px}
.drought-method p{max-width:none;margin:0;color:var(--mist);font-size:13px;line-height:1.55}
.drought-method b{display:block;margin-bottom:5px;color:var(--ice);font:500 10px/1.4 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase}
.drought-credit{margin-top:22px!important;max-width:1100px!important;color:var(--faint)!important;font:400 10px/1.6 'IBM Plex Mono',monospace!important}
@media(max-width:850px){.drought-grid{grid-template-columns:1fr}}
@media(max-width:600px){.drought-observatory{padding:68px 18px}.drought-grid{gap:12px}.drought-panel-top{padding:16px}.drought-panel-title{font-size:21px}.drought-map-frame{padding:9px}.drought-map-caption{padding:0 16px 16px}.pollution-map-legend{margin:0 16px 16px}.drought-map-actions{padding:4px 16px 17px}.drought-method{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.drought-observatory *{scroll-behavior:auto}}