/* ============================================================
   Energy Insecurity — "Area of Concern" infographic (desktop + mobile).
   The mockups (NorthCarolina_Energy Costs-FINAL.jpg 1920x4030, and
   northcarolina_energy-costs-mobile.jpg 1193x14455) are dense data-viz posters;
   each is presented as full-width section-slice images with a rebuilt, clickable
   footer nav overlaid on the cropped cream/gray band.
   The desktop set shows above 768px; the mobile set shows at/below 768px.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

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

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

.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. */
.energy-mobile { display: none; }
@media (max-width: 768px) {
  .energy-desktop { display: none; }
  .energy-mobile  { display: block; max-width: none; }
}

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

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

/* the two underlined links in the gold legal bar (bottom ~25% of the band) */
.energy-nav .legal-link {
  position: absolute;
  top: 84%;
  height: 12%;
  display: block;
}

/* MOBILE: 2x2 quadrant hit areas over the gray nav band (top ~94% of the band) */
.energy-nav .nav-quad {
  position: absolute;
  display: block;
  transition: background-color .12s ease;
}
.energy-nav .nav-quad:hover { background: rgba(0, 0, 0, .05); }