/* ============================================================
   Heat & Drought — desktop "Area of Concern" infographic.
   The mockup (NorthCarolina_Heat and Drought-FINAL.jpg, 1920x4543) is a dense
   data-viz poster; it is presented as full-width section-slice images with a
   rebuilt, clickable footer nav overlaid on the cropped cream/red band.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body.heat {
  margin: 0;
  background: #4C0405;                 /* matches the poster maroon so letterboxing blends in */
  font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* the poster is designed at 4000px wide; scale it down responsively and fill the
   full viewport width (100vw) at any screen size — no cap, no letterboxing */
.heat-page {
  width: 100%;
  background: #fff;
  container-type: inline-size;
}

.strip { display: block; width: 100%; height: auto; }

/* ---------- Responsive swap between the two slice sets ---------- */
/* The desktop poster (1920px) stays sharp at tablet widths, so it also serves
   tablets; the mobile single-column set takes over at <= 768px. */
.heat-mobile { display: none; }
@media (max-width: 768px) {
  .heat-desktop { display: none; }
  .heat-mobile  { display: block; max-width: none; }
}

/* ---------- Footer nav + legal bar (cropped image + clickable overlays) ---------- */
.heat-nav { position: relative; line-height: 0; }
.heat-nav > img { display: block; width: 100%; height: auto; }

/* four columns over the cream nav band (top ~70% of the cropped band) */
.heat-nav .nav-col {
  position: absolute;
  top: 0;
  height: 70.4%;
  display: block;
  transition: background-color .12s ease;
}
.heat-nav .nav-col:hover { background: rgba(0, 0, 0, .05); }

/* the two underlined links in the red legal bar (desktop: bottom ~30% of the band) */
.heat-nav .legal-link {
  position: absolute;
  top: 82%;
  height: 12%;
  display: block;
}

/* MOBILE: 2x2 quadrant hit areas over the gray nav band (top ~86% of the band) */
.heat-nav .nav-quad {
  position: absolute;
  display: block;
  transition: background-color .12s ease;
}
.heat-nav .nav-quad:hover { background: rgba(0, 0, 0, .05); }
/* mobile legal links sit lower, in the red bar at the very bottom */
.heat-nav--mobile .legal-link { top: 91%; height: 7%; }