@font-face {
  font-family: "PolySans";
  src: url("https://grist.org/wp-content/themes/grist/dist/fonts/PolySansUS-Median.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: auto;
}
@font-face {
  font-family: "Basis Grotesque Pro";
  src: url("https://grist.org/wp-content/themes/grist/dist/fonts/basis-grotesque-regular-pro.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: auto;
}
@font-face {
  font-family: "Basis Grotesque Pro";
  src: url("https://grist.org/wp-content/themes/grist/dist/fonts/basis-grotesque-bold-pro.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: auto;
}
@font-face {
  font-family: "Basis Grotesque Pro";
  src: url("https://grist.org/wp-content/themes/grist/dist/fonts/basis-grotesque-bold-italic-pro.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: auto;
}

.wall-of-wind {
  --wow-text: #3c3830;
  --wow-text-2: #6b665e;
  --wow-grid: #e6e3dd;
  --wow-card: #f0f0f0;
  --typography-primary: "PolySans", Arial, sans-serif;
  --typography-secondary: "Basis Grotesque Pro", "Basis Grotesque", Arial, sans-serif;
  max-width: 700px;
  margin: 0 auto;
  padding: 4px 20px 12px;
  background: var(--color-background, #fff);
  color: var(--wow-text);
  font-family: var(--typography-secondary);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
  box-sizing: border-box;
}
.wall-of-wind *,
.wall-of-wind *::before,
.wall-of-wind *::after { box-sizing: border-box; margin: 0; padding: 0; }

.wall-of-wind h2 {
  font-family: var(--typography-primary);
  font-weight: 500;
  font-size: 25px;
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--wow-text);
  margin: 10px 0 8px;
}
.wall-of-wind__subtitle {
  font-size: 16px;
  line-height: 1.4;
  color: var(--wow-text-2);
  margin-bottom: 16px;
  max-width: 600px;
  text-wrap: pretty;
}

.wall-of-wind__zones {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.wall-of-wind__zone {
  appearance: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  background: var(--color-background, #fff);
  border: 1.5px solid var(--wow-grid);
  border-radius: 6px;
  padding: 8px 10px 9px;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
.wall-of-wind__zone:hover { border-color: var(--wow-text-2); }
.wall-of-wind__zone:focus-visible { outline: 2px solid #3977f3; outline-offset: 2px; }
.wall-of-wind__zone[aria-pressed="true"] {
  border-color: var(--wow-text);
  box-shadow: 3px 3px 0 var(--wow-text);
  background: var(--wow-card);
}
.wall-of-wind__zone-name { display: block; font-size: 14px; color: var(--wow-text-2); }
.wall-of-wind__zone[aria-pressed="true"] .wall-of-wind__zone-name { color: var(--wow-text); }
.wall-of-wind__zone-num {
  display: block;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.wall-of-wind__zone-unit { display: block; font-size: 13px; color: var(--wow-text-2); }

.wall-of-wind__legend { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 24px; margin-bottom: 6px; }
.wall-of-wind__legend-title { font-size: 14px; width: 100%; }
.wall-of-wind__legend svg { display: block; overflow: visible; }
.wall-of-wind__legend text { font-family: var(--typography-secondary); font-size: 12px; fill: var(--wow-text-2); font-variant-numeric: tabular-nums; }

.wall-of-wind__stage { position: relative; width: 100%; }
.wall-of-wind__stage svg { display: block; width: 100%; height: auto; overflow: visible; }

.wall-of-wind__fill { transition: opacity 0.25s, filter 0.25s; }
.wall-of-wind__fill.is-dim { opacity: 0.55; filter: grayscale(1); }
.wall-of-wind__lines {
  fill: none !important;
  stroke: var(--color-background, #fff) !important;
  stroke-width: 0.75px !important;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.wall-of-wind__outline {
  fill: none !important;
  stroke: var(--wow-text) !important;
  stroke-width: 1.5px !important;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}
.wall-of-wind__outline.is-active { opacity: 1; }
.wall-of-wind__hit {
  fill: transparent !important;
  stroke: none !important;
  pointer-events: fill;
  cursor: pointer;
}
.wall-of-wind__hit:focus { outline: none; }

.wall-of-wind__footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  align-items: last baseline;
  gap: 16px;
  margin-top: 14px;
}
.wall-of-wind__source { font-size: 12px; line-height: 1.35; color: var(--wow-text-2); }
.wall-of-wind__source strong { font-weight: 700; font-style: italic; }
.wall-of-wind__logos { display: flex; align-items: flex-end; gap: 12px; flex-shrink: 0; }
.wall-of-wind__logo { display: block; height: 15.4px; width: auto; flex-shrink: 0; fill: var(--wow-text); }

@media (max-width: 600px) {
  .wall-of-wind { padding: 4px 16px 12px; }
  .wall-of-wind h2 { font-size: 21px; }
  .wall-of-wind__subtitle { font-size: 15px; }
  .wall-of-wind__zones { gap: 8px; }
  .wall-of-wind__zone { padding: 7px 8px 8px; }
  .wall-of-wind__zone-num { font-size: 17px; }
  .wall-of-wind__zone-unit { font-size: 12px; }
  .wall-of-wind__legend-title { font-size: 13px; }
}
@media (max-width: 359px) {
  .wall-of-wind__zones { gap: 6px; }
  .wall-of-wind__zone { padding: 6px 6px 7px; }
  .wall-of-wind__zone-unit { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .wall-of-wind__fill,
  .wall-of-wind__outline { transition: none; }
}