:root {
  --sand: #d8ae78;
  --sand-dark: #ae8054;
  --smoke: #2b2b29;
  --smoke-soft: rgba(43, 43, 41, 0.72);
  --panel: #3f3f3d;
  --paper: #eee6dc;
  --muted: rgba(238, 230, 220, 0.76);
  --gold: #d2a36e;
  /* Warm cream shared by the lower sections (meaning, PM2.5, dashboard) and the
     fires -> PM2.5 dissolve hand-off, so they share one tone. */
  --peach-pale: #f0c89a;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--panel);
  color: var(--paper);
  font-family: Georgia, "Times New Roman", serif;
  overflow-x: visible;
}

.problem-section {
  position: relative;
  min-height: 118vh;
  overflow: hidden;
  background: var(--panel);
}

/* large black smoke shape, like the Figma/generation reference */
.smoke-cap {
  position: absolute;
  z-index: 5;
  left: -8vw;
  right: -8vw;
  top: -15rem;
  height: 28rem;
  pointer-events: none;
}

.smoke-cap span {
  position: absolute;
  display: block;
  background: var(--smoke);
  border-radius: 999px;
  box-shadow: 0 26px 48px rgba(0, 0, 0, 0.22);
}

.smoke-cap span:nth-child(1) {
  width: 42vw;
  height: 20rem;
  left: 0;
  top: 0;
}
.smoke-cap span:nth-child(2) {
  width: 36vw;
  height: 22rem;
  left: 20vw;
  top: 5rem;
}
.smoke-cap span:nth-child(3) {
  width: 34vw;
  height: 22rem;
  left: 47vw;
  top: 5.8rem;
}
.smoke-cap span:nth-child(4) {
  width: 38vw;
  height: 20rem;
  right: 0;
  top: 2rem;
}

.city-stage {
  position: relative;
  height: 55vh;
  min-height: 430px;
  max-height: 620px;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 50% 44%,
      rgba(232, 198, 145, 0.32),
      transparent 34%
    ),
    linear-gradient(to bottom, #d1aa76 0%, #c79d6b 47%, #73695c 100%);
}

.city-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 42% 48%,
      rgba(243, 202, 143, 0.24),
      transparent 36%
    ),
    linear-gradient(
      to bottom,
      rgba(255, 230, 184, 0.08),
      rgba(54, 54, 51, 0.42)
    );
  z-index: 1;
}

.city-stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64%;
  z-index: 9;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(63, 63, 61, 0.18) 45%,
    var(--panel) 100%
  );
}

.birds {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 0.38;
  color: #4b4844;
  font-family: Arial, sans-serif;
  font-size: 1.05rem;
  letter-spacing: 2rem;
}

.birds::before {
  content: "⌁  ⌁   ⌁";
  position: absolute;
  left: 6vw;
  top: 38%;
}

.birds::after {
  content: "⌁  ⌁";
  position: absolute;
  right: 8vw;
  top: 30%;
}

.skyline {
  position: absolute;
  left: -4vw;
  right: -4vw;
  bottom: -1px;
  height: 76%;
  z-index: 3;
}

.layer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

.layer.back {
  height: 78%;
  opacity: 0.24;
  background:
    linear-gradient(to top, #3d3b38 0 50%, transparent 78%),
    repeating-linear-gradient(
      to right,
      transparent 0 2.2rem,
      #3c3a37 2.2rem 3rem,
      transparent 3rem 4.3rem
    );
  clip-path: polygon(
    0 82%,
    3% 77%,
    6% 80%,
    8% 72%,
    10% 81%,
    13% 73%,
    16% 80%,
    19% 68%,
    22% 81%,
    26% 76%,
    30% 80%,
    34% 66%,
    38% 80%,
    42% 74%,
    45% 81%,
    49% 68%,
    53% 80%,
    57% 72%,
    61% 80%,
    65% 63%,
    69% 79%,
    73% 72%,
    77% 80%,
    81% 67%,
    85% 80%,
    89% 74%,
    93% 80%,
    97% 72%,
    100% 79%,
    100% 100%,
    0 100%
  );
}

.layer.mid {
  height: 62%;
  opacity: 0.46;
  background:
    linear-gradient(to top, #343331 0 58%, transparent 84%),
    repeating-linear-gradient(
      to right,
      transparent 0 2.1rem,
      #343331 2.1rem 3.05rem,
      transparent 3.05rem 4.3rem
    );
  clip-path: polygon(
    0 84%,
    4% 78%,
    7% 82%,
    10% 70%,
    13% 82%,
    17% 76%,
    21% 82%,
    25% 72%,
    28% 83%,
    33% 76%,
    37% 82%,
    41% 68%,
    45% 82%,
    49% 75%,
    53% 82%,
    58% 66%,
    62% 82%,
    66% 75%,
    70% 82%,
    74% 70%,
    78% 82%,
    82% 75%,
    86% 82%,
    90% 70%,
    94% 82%,
    100% 74%,
    100% 100%,
    0 100%
  );
}

.monument {
  position: absolute;
  bottom: 12%;
  background: rgba(52, 51, 49, 0.52);
  z-index: 5;
  filter: blur(0.2px);
}

.qutub {
  left: 17%;
  width: 1.2rem;
  height: 12rem;
  clip-path: polygon(35% 0, 65% 0, 76% 100%, 24% 100%);
}

.india-gate {
  left: 50%;
  width: 6.7rem;
  height: 8.5rem;
  transform: translateX(-50%);
  border-radius: 0.15rem 0.15rem 0 0;
}

.india-gate::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 2.5rem;
  height: 5.2rem;
  transform: translateX(-50%);
  background: #c79864;
  border-radius: 1.25rem 1.25rem 0 0;
  opacity: 0.6;
}

.lotus {
  right: 17%;
  width: 8.5rem;
  height: 5.8rem;
  background: rgba(52, 51, 49, 0.48);
  clip-path: polygon(
    50% 0,
    61% 35%,
    80% 11%,
    73% 55%,
    100% 38%,
    82% 78%,
    52% 100%,
    18% 78%,
    0 39%,
    27% 55%,
    20% 11%,
    39% 35%
  );
}

.dome {
  left: 35%;
  width: 5.4rem;
  height: 4.4rem;
  border-radius: 50% 50% 0 0;
}

.front-slums {
  position: absolute;
  left: -3vw;
  right: -3vw;
  bottom: 0;
  height: 32%;
  z-index: 7;
  background: #333230;
  clip-path: polygon(
    0 62%,
    4% 62%,
    4% 50%,
    9% 50%,
    9% 62%,
    16% 62%,
    16% 47%,
    21% 47%,
    21% 62%,
    27% 62%,
    27% 54%,
    34% 54%,
    34% 62%,
    39% 62%,
    39% 45%,
    44% 45%,
    44% 62%,
    50% 62%,
    50% 51%,
    55% 51%,
    55% 62%,
    61% 62%,
    61% 46%,
    67% 46%,
    67% 62%,
    72% 62%,
    72% 50%,
    78% 50%,
    78% 62%,
    84% 62%,
    84% 43%,
    90% 43%,
    90% 62%,
    96% 62%,
    96% 52%,
    100% 52%,
    100% 100%,
    0 100%
  );
}

.front-slums::before,
.front-slums::after {
  content: "";
  position: absolute;
  bottom: 38%;
  width: 14rem;
  height: 11rem;
  opacity: 0.92;
  background:
    linear-gradient(#2e2e2c, #2e2e2c) 0 0 / 100% 0.8rem no-repeat,
    repeating-linear-gradient(
      to bottom,
      #383735 0 1.15rem,
      #30302e 1.15rem 1.32rem
    );
}

.front-slums::before {
  left: 0;
}
.front-slums::after {
  right: 0;
}

.haze {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 42% 54%,
      rgba(222, 179, 119, 0.16),
      transparent 34%
    ),
    linear-gradient(
      to bottom,
      rgba(218, 174, 120, 0.08),
      rgba(63, 63, 61, 0.35)
    );
  -webkit-backdrop-filter: blur(1.2px);
  backdrop-filter: blur(1.2px);
}

.text-panel {
  position: relative;
  z-index: 12;
  width: min(760px, calc(100% - 3rem));
  margin: 0 auto;
  padding: clamp(3.2rem, 7vw, 5rem) 0 clamp(7rem, 10vw, 9rem);
  background: transparent;
}

.kicker {
  margin: 0 0 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.72rem, 1vw, 0.86rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

h1 {
  margin: 0 0 2.1rem;
  max-width: 720px;
  color: #f4eee6;
  font-size: clamp(2.35rem, 4.6vw, 4.35rem);
  line-height: 1.07;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.body-copy {
  max-width: 690px;
  color: var(--muted);
  font-size: clamp(1.15rem, 1.55vw, 1.44rem);
  line-height: 1.62;
}

.body-copy p {
  margin: 0 0 1.45rem;
}

.body-copy strong {
  color: #f4eee6;
  font-weight: 700;
}

.grain {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(
      circle at 20% 30%,
      rgba(255, 255, 255, 0.7) 0 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 80% 60%,
      rgba(0, 0, 0, 0.8) 0 1px,
      transparent 1px
    );
  background-size:
    18px 18px,
    25px 25px;
}

.bottom-haze {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18vh;
  z-index: 18;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(63, 63, 61, 0.78));
}

@media (max-width: 700px) {
  .problem-section {
    min-height: 130vh;
  }

  .city-stage {
    height: 44vh;
    min-height: 340px;
  }

  .qutub {
    left: 10%;
    transform: scale(0.72);
    transform-origin: bottom center;
  }
  .india-gate {
    transform: translateX(-50%) scale(0.72);
    transform-origin: bottom center;
  }
  .lotus {
    right: 9%;
    transform: scale(0.72);
    transform-origin: bottom center;
  }
  .dome {
    transform: scale(0.72);
    transform-origin: bottom center;
  }

  .text-panel {
    width: min(560px, calc(100% - 2.3rem));
    padding-top: 2.8rem;
  }
}

:root {
  --cream: #ffd9ad;
  --sand: #e2b579;
  --wheat: #c99858;
  --brown: #6d5136;
  --ink: #343434;
  --muted: rgba(52, 52, 52, 0.72);
  --burn: #c65b3a;
  --smoke: #3c3c39;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--cream);
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  overflow-x: visible;
}

.farmer-window {
  position: relative;
  min-height: 108vh;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 52% 28%,
      rgba(255, 230, 196, 0.72),
      transparent 38%
    ),
    linear-gradient(to bottom, #ffdcb4 0%, var(--cream) 66%, #edc28a 100%);
}

.smoke-top {
  position: absolute;
  left: -4vw;
  right: -4vw;
  top: -7.5rem;
  height: 14rem;
  z-index: 5;
  pointer-events: none;
}

.smoke-top span {
  position: absolute;
  display: block;
  background: var(--smoke);
  border-radius: 999px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.smoke-top span:nth-child(1) {
  width: 20vw;
  height: 9rem;
  left: -2vw;
  top: 2.2rem;
}
.smoke-top span:nth-child(2) {
  width: 28vw;
  height: 8.4rem;
  left: 10vw;
  top: 5.2rem;
}
.smoke-top span:nth-child(3) {
  width: 17vw;
  height: 7.2rem;
  left: 31vw;
  top: 2.9rem;
}
.smoke-top span:nth-child(4) {
  width: 31vw;
  height: 8.8rem;
  right: 22vw;
  top: 4.3rem;
}
.smoke-top span:nth-child(5) {
  width: 28vw;
  height: 9.5rem;
  right: 0;
  top: 2.7rem;
}

.smoke-wisp {
  position: absolute;
  right: 8.5vw;
  top: 3.8rem;
  width: 4.2rem;
  height: 8rem;
  z-index: 6;
  opacity: 0.85;
}

.smoke-wisp::before,
.smoke-wisp::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border-left: 0.75rem solid var(--smoke);
  transform: rotate(18deg);
}

.smoke-wisp::before {
  width: 2.8rem;
  height: 6.5rem;
  left: 0.6rem;
  top: 0;
}

.smoke-wisp::after {
  width: 2.1rem;
  height: 5rem;
  left: 2rem;
  top: 1rem;
}

.content {
  position: relative;
  z-index: 10;
  width: min(980px, calc(100% - 3rem));
  margin: 0 auto;
  padding: clamp(6.5rem, 12vw, 9rem) 0 13rem;
  text-align: center;
}

h1 {
  margin: 0 0 1.3rem;
  font-size: clamp(2.7rem, 5vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.lede {
  max-width: 690px;
  margin: 0 auto 3.3rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  line-height: 1.42;
}

.chart-title {
  margin: 0 0 1.4rem;
  font-size: clamp(0.95rem, 1.3vw, 1.12rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
}

.clock-row {
  position: relative;
  display: grid;
  grid-template-columns: 140px minmax(420px, 560px);
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 auto 2.5rem;
  width: fit-content;
}

.days-note {
  text-align: left;
  align-self: center;
  transform: translateY(10px);
}

.days-note .big {
  color: var(--burn);
  font-weight: 700;
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  line-height: 0.9;
}

.days-note .label {
  margin-top: 0.25rem;
  color: var(--burn);
  font-size: 1.1rem;
  font-weight: 700;
}

.days-note p {
  margin: 1rem 0 0;
  max-width: 150px;
  font-size: 1rem;
  line-height: 1.32;
}

.gauge {
  position: relative;
  height: 330px;
}

.arc {
  position: absolute;
  left: 50%;
  bottom: 34px;
  width: 430px;
  height: 215px;
  transform: translateX(-50%);
  border-radius: 430px 430px 0 0;
  background: conic-gradient(
    from 270deg at 50% 100%,
    var(--burn) 0deg 30deg,
    #d7a86b 30deg 180deg,
    transparent 180deg 360deg
  );
  overflow: hidden;
}

.arc::after {
  content: "";
  position: absolute;
  left: 54px;
  right: 54px;
  bottom: 0;
  height: 161px;
  background: var(--cream);
  border-radius: 322px 322px 0 0;
}

.tick {
  position: absolute;
  left: 50%;
  bottom: 34px;
  width: 1px;
  height: 262px;
  transform-origin: bottom center;
}

.tick::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1.5px;
  height: 12px;
  background: var(--ink);
}

.tick:nth-child(2) {
  transform: rotate(-76deg);
}
.tick:nth-child(3) {
  transform: rotate(-62deg);
}
.tick:nth-child(4) {
  transform: rotate(-48deg);
}
.tick:nth-child(5) {
  transform: rotate(-34deg);
}
.tick:nth-child(6) {
  transform: rotate(-20deg);
}
.tick:nth-child(7) {
  transform: rotate(-6deg);
}
.tick:nth-child(8) {
  transform: rotate(8deg);
}
.tick:nth-child(9) {
  transform: rotate(22deg);
}
.tick:nth-child(10) {
  transform: rotate(36deg);
}
.tick:nth-child(11) {
  transform: rotate(50deg);
}
.tick:nth-child(12) {
  transform: rotate(64deg);
}
.tick:nth-child(13) {
  transform: rotate(78deg);
}

.needle {
  position: absolute;
  left: 50%;
  bottom: 34px;
  width: 255px;
  height: 9px;
  background: var(--ink);
  border-radius: 999px;
  transform-origin: left center;
  transform: rotate(198deg);
  z-index: 4;
}

.needle::after {
  content: "";
  position: absolute;
  right: -8px;
  top: 50%;
  width: 0;
  height: 0;
  transform: translateY(-50%);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 18px solid var(--ink);
}

.hub {
  position: absolute;
  left: 50%;
  bottom: 12px;
  width: 46px;
  height: 46px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--ink);
  border: 7px solid #8e7a62;
  box-shadow: inset 0 0 0 4px var(--ink);
  z-index: 5;
}

.gauge-label {
  position: absolute;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.05;
}

.gauge-label span {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.gauge-label.zero {
  left: 8%;
  bottom: 18px;
}
.gauge-label.thirty {
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  font-size: 1.45rem;
}
.gauge-label.sixty {
  right: 5%;
  bottom: 18px;
}

.process {
  width: min(700px, 100%);
  margin: 2rem auto 0;
  padding: 1.8rem 2rem;
  border: 1px solid rgba(109, 81, 54, 0.22);
  border-radius: 0.9rem;
  background: rgba(255, 230, 196, 0.28);
  box-shadow: 0 14px 45px rgba(124, 82, 45, 0.06);
  text-align: left;
}

.process p {
  margin: 0 0 1.2rem;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.58;
}

.process p:last-child {
  margin-bottom: 0;
}

.process strong {
  color: var(--ink);
}

.crop-left,
.crop-right {
  position: absolute;
  bottom: 3rem;
  width: 13rem;
  height: 28rem;
  z-index: 4;
  opacity: 0.48;
}

.crop-left {
  left: 5vw;
}
.crop-right {
  right: 5vw;
  transform: scaleX(-1);
}

.stem {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0.35rem;
  height: 25rem;
  transform: translateX(-50%);
  background: var(--wheat);
  border-radius: 999px;
}

.leaf {
  position: absolute;
  left: 50%;
  width: 4rem;
  height: 6rem;
  background: var(--wheat);
  border-radius: 100% 0 100% 0;
  transform-origin: bottom left;
}

.leaf:nth-child(2) {
  bottom: 2.3rem;
  transform: rotate(-62deg);
}
.leaf:nth-child(3) {
  bottom: 5.7rem;
  transform: rotate(42deg) scaleX(-1);
}
.leaf:nth-child(4) {
  bottom: 8.6rem;
  transform: rotate(-58deg);
}
.leaf:nth-child(5) {
  bottom: 12.1rem;
  transform: rotate(44deg) scaleX(-1);
}
.leaf:nth-child(6) {
  bottom: 15.4rem;
  transform: rotate(-52deg);
}
.leaf:nth-child(7) {
  bottom: 19rem;
  transform: rotate(34deg) scaleX(-1);
}
.leaf:nth-child(8) {
  bottom: 21.5rem;
  transform: rotate(-5deg);
}

.hill {
  position: absolute;
  left: -8vw;
  right: -8vw;
  bottom: 0;
  height: 12rem;
  z-index: 1;
  background: var(--sand);
  clip-path: polygon(
    0 58%,
    15% 32%,
    37% 45%,
    54% 55%,
    72% 40%,
    100% 53%,
    100% 100%,
    0 100%
  );
}

.grain {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image: radial-gradient(
    circle,
    rgba(120, 82, 45, 0.55) 0 1px,
    transparent 1px
  );
  background-size: 18px 18px;
}

@media (max-width: 850px) {
  .clock-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .days-note {
    text-align: center;
    justify-self: center;
  }

  .days-note p {
    max-width: 260px;
  }

  .gauge {
    width: min(560px, 100%);
    margin: 0 auto;
    transform: scale(0.86);
    transform-origin: center;
  }

  .crop-left,
  .crop-right {
    width: 8rem;
    height: 20rem;
    opacity: 0.35;
  }

  .content {
    padding-bottom: 9rem;
  }
}

@media (max-width: 600px) {
  .process {
    width: min(340px, 100%);
    padding: 1.4rem;
  }

  .gauge {
    transform: scale(0.67);
    height: 250px;
    margin: -1.7rem auto;
  }

  .crop-left,
  .crop-right {
    display: none;
  }
}

:root {
  --cream: #ffd9ad;
  --field: #e2b579;
  --field-dark: #d6a269;
  --card: #ffd8ad;
  --ink: #252525;
  --burn: #c95f43;
  --burn-dark: #a84434;
  --charcoal: #343434;
  --wheat: #c99858;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--charcoal);
  font-family: Georgia, "Times New Roman", serif;
  overflow-x: visible;
}

.fire-transition {
  position: relative;
  min-height: 115vh;
  background: var(--charcoal);
  overflow: visible;
}

.background-scene {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.background-scene svg {
  display: block;
  width: 100%;
  height: 100%;
}

.sticky-card-wrap {
  position: sticky;
  top: 0;
  z-index: 60;
  min-height: 0vh;
  display: grid;
  place-items: center;
  padding: 2rem;
  transform: translateY(-6rem);
}

.text-card {
  width: min(690px, calc(100vw - 3rem));
  padding: clamp(2rem, 4vw, 3.2rem) clamp(2.2rem, 5vw, 4rem);
  background: rgba(255, 216, 173, 0.96);
  color: var(--ink);
  box-shadow: 0 18px 36px rgba(72, 45, 26, 0.24);
  margin-top: -6rem;
  transform: translateY(-6rem);
  z-index: 80;
}

.text-card p {
  margin: 0 0 1.6rem;
  font-size: clamp(1.14rem, 1.75vw, 1.55rem);
  line-height: 1.58;
}

.text-card p:last-child {
  margin-bottom: 0;
}

.text-card strong {
  color: #111;
}

.grain {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  opacity: 0.11;
  mix-blend-mode: overlay;
  background-image: radial-gradient(
    circle,
    rgba(120, 82, 45, 0.55) 0 1px,
    transparent 1px
  );
  background-size: 18px 18px;
}

@media (max-width: 700px) {
  .fire-transition {
    min-height: 0vh;
  }

  .text-card {
    width: min(520px, calc(100vw - 2rem));
  }
}

:root {
  --bg: #343434;
  --panel: transparent;
  --ink: #f2f2f2;
  --muted: #c9c9c9;
  --state: #3f3f3f;
  --state-line: #5d5d5d;
  --yellow: #ffe066;
  --orange: #ff9f1c;
  --red: #c84f3a;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: #383735;
  color: white;
  font-family: Georgia, "Times New Roman", serif;
  overflow-x: visible;
}

.fire-scrolly {
  position: relative;
  min-height: 560vh;
  background: var(--bg);
  isolation: isolate;
}

.scrolly-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.map-wrap {
  position: relative;
  width: 100vw;
  height: 100vh;
}

#fire-map {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  display: block;
  background:
    radial-gradient(
      circle at 32% 38%,
      rgba(255, 139, 30, 0.08),
      transparent 34%
    ),
    #373737;
}

.state {
  fill: var(--state);
  stroke: var(--state-line);
  stroke-width: 0.75;
}

.state.region-focus {
  fill: #464646;
  stroke: #777;
  stroke-width: 1.2;
}

.map-label {
  fill: rgba(255, 255, 255, 0.58);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-anchor: middle;
  pointer-events: none;
}

.delhi-label {
  fill: rgba(255, 255, 255, 0.98);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.08em;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.72);
  stroke-linejoin: round;
  stroke-width: 3px;
}

.date-badge {
  position: absolute;
  left: 1.1rem;
  top: 1.1rem;
  z-index: 5;
  padding: 0.75rem 0.95rem;
  background: rgba(20, 20, 20, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.09);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: Arial, Helvetica, sans-serif;
}

.date-badge .date {
  font-weight: 900;
  font-size: 1rem;
}

.date-badge .count {
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.82rem;
}

/* Top-left HUD stack: date badge with the color legend beneath it. */
.map-hud-top {
  position: absolute;
  left: 1.1rem;
  top: 1.1rem;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  max-width: min(48vw, 30rem);
}

.map-hud-top .date-badge,
.map-hud-top .legend {
  position: static;
  left: auto;
  top: auto;
  bottom: auto;
}

.legend {
  position: absolute;
  left: 1.1rem;
  bottom: 1.1rem;
  z-index: 5;
  display: grid;
  gap: 0.45rem;
  padding: 0.75rem 0.9rem;
  background: rgba(20, 20, 20, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.09);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.68);
}

.legend span {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
}

.dot.new {
  background: var(--yellow);
}
.dot.week {
  background: var(--orange);
}
.dot.old {
  background: var(--red);
}

/* Indexed fire vs PM2.5 mini-chart, bottom-left of the map (where the legend
   used to sit). Static like the map; its lines grow as the map advances. */
/* Grey veil over the pinned map that fades in at the end, so the map dissolves
   to the interlude background in place (it never scrolls away). The annotations
   are faded out alongside it (see fadeMapAtEnd) so nothing shows over the grey. */
.map-fade-veil {
  position: absolute;
  inset: 0;
  z-index: 10;
  background-color: #3f3f3f;
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8vw;
  /* Triggered, time-based fades so the dim/peach never get stuck half-applied
     when you pause or scroll fast through the transition. */
  transition:
    opacity 0.7s ease,
    background-color 0.7s ease;
}

.map-fade-veil.is-grey {
  opacity: 1;
}

.map-fade-veil.is-peach {
  background-color: var(--peach-pale, #f0c89a);
}

.fire-scrolly .steps {
  transition: opacity 0.7s ease;
}

.fire-scrolly .steps.is-faded {
  opacity: 0;
}

/* Soft smoke that drifts behind the text, building up as you scroll (opacity is
   driven by scroll in fadeMapAtEnd). Subtle so the focus stays on the words. */
.dissolve-smoke {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.dissolve-smoke span {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(216, 212, 206, 0.13),
    rgba(216, 212, 206, 0) 70%
  );
  filter: blur(34px);
  will-change: transform, opacity;
}

.dissolve-smoke span:nth-child(1) {
  width: 48vw;
  height: 48vw;
  left: -6vw;
  top: 6vh;
  animation: dissolveSmokeA 27s ease-in-out infinite;
}
.dissolve-smoke span:nth-child(2) {
  width: 38vw;
  height: 38vw;
  right: -4vw;
  top: 20vh;
  animation: dissolveSmokeB 33s ease-in-out infinite;
}
.dissolve-smoke span:nth-child(3) {
  width: 54vw;
  height: 54vw;
  left: 16vw;
  bottom: -10vh;
  animation: dissolveSmokeA 31s ease-in-out infinite reverse;
}
.dissolve-smoke span:nth-child(4) {
  width: 30vw;
  height: 30vw;
  left: 58vw;
  top: 10vh;
  animation: dissolveSmokeB 24s ease-in-out infinite;
}
.dissolve-smoke span:nth-child(5) {
  width: 42vw;
  height: 42vw;
  left: 28vw;
  top: 38vh;
  animation: dissolveSmokeA 37s ease-in-out infinite;
}

@keyframes dissolveSmokeA {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(4vw, -3vh) scale(1.16);
  }
}

@keyframes dissolveSmokeB {
  0%,
  100% {
    transform: translate(0, 0) scale(1.06);
  }
  50% {
    transform: translate(-5vw, 2vh) scale(0.9);
  }
}

/* Transition lines that fade in/out on the grey veil while the map is still
   pinned (no gap, no slide). Stacked in one cell; only opacity changes. */
.dissolve-lines {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: min(60rem, 86vw);
}

.dissolve-line {
  grid-area: 1 / 1;
  margin: 0;
  text-align: center;
  color: #f4eee6;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.7rem, 3.8vw, 3.4rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  opacity: 0;
  /* Scrolling into range toggles .is-visible, which plays this timed fade
     (a real animation), rather than the opacity tracking scroll position. */
  transition: opacity 0.6s ease;
  will-change: opacity;
}

.dissolve-line.is-visible {
  opacity: 1;
}

/* Hold region at the end of the fires section: keeps the map pinned after the
   last annotation is read, giving room to fade it out before the sticky releases.
   The map's date animation is unaffected (getFireScrollProgress excludes this). */
.fire-outro-spacer {
  height: 480vh;
}

.fire-pm-mini {
  position: absolute;
  left: 1.1rem;
  bottom: 1.1rem;
  z-index: 5;
  margin: 0;
  width: min(24rem, 34vw);
  padding: 0.7rem 0.85rem 0.55rem;
  background: rgba(20, 20, 20, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.09);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: Arial, Helvetica, sans-serif;
}

.fire-pm-mini-title {
  margin: 0 0 0.3rem;
  color: rgba(245, 245, 245, 0.9);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

#fire-pm-mini-chart {
  display: block;
  width: 100%;
  height: auto;
}

.fire-pm-mini .axis text {
  fill: rgba(220, 220, 220, 0.7);
  font-size: 9px;
}

.fire-pm-mini .mini-axis-title {
  fill: rgba(220, 220, 220, 0.6);
  font-size: 8.5px;
  letter-spacing: 0.02em;
}

.fire-pm-mini .axis line,
.fire-pm-mini .axis path {
  stroke: rgba(255, 255, 255, 0.16);
}

.fire-pm-mini .mini-grid line {
  stroke: rgba(255, 255, 255, 0.08);
}

.fire-pm-mini .mini-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fire-pm-mini .mini-line.fires {
  stroke: var(--map-orange, #ff9f1c);
}

.fire-pm-mini .mini-line.pm25 {
  stroke: #5aa9e6;
  stroke-dasharray: 4 3;
}

.fire-pm-mini .mini-legend text {
  fill: rgba(232, 232, 232, 0.92);
  font-size: 9px;
}

.fire-pm-mini .mini-day-marker {
  stroke: rgba(255, 255, 255, 0.32);
  stroke-width: 1;
  stroke-dasharray: 2 2;
}

@media (max-width: 720px) {
  .fire-pm-mini {
    display: none;
  }
}

.steps {
  position: relative;
  z-index: 5;
  width: min(1420px, 100vw);
  margin: -100vh auto 0;
  padding-top: 36vh;
  padding-right: clamp(1rem, 3vw, 3.25rem);
  padding-bottom: 95vh;
  pointer-events: none;
}

.step {
  min-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.step:nth-child(even) {
  justify-content: flex-end;
}

.fire-scrolly .step:last-child {
  margin-top: 0;
}

.annotation {
  width: min(430px, 88vw);
  padding: 0;
  background: transparent;
  color: #f2f2f2;
  box-shadow: none;
  border-radius: 0;
  font-size: clamp(1rem, 1.3vw, 1.16rem);
  line-height: 1.5;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

.annotation h2 {
  margin: 0 0 0.65rem;
  color: white;
  font-size: clamp(1.45rem, 2.4vw, 2.25rem);
  line-height: 1.05;
}

.annotation p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
}

.annotation .note {
  margin-top: 0.8rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.64);
}

.fire-point {
  mix-blend-mode: screen;
  stroke: rgba(255, 247, 214, 0.2);
  stroke-width: 0.6;
  vector-effect: non-scaling-stroke;
}

@media (max-width: 760px) {
  .map-wrap {
    width: 100vw;
    height: 100vh;
  }

  .steps {
    width: calc(100vw - 2rem);
    padding-top: 32vh;
    padding-bottom: 80vh;
  }

  .step,
  .step:nth-child(even) {
    justify-content: center;
    align-items: end;
    padding-bottom: 10vh;
  }

  .annotation {
    width: 100%;
  }
}
:root {
  --bg: #020202;
  --smoke: rgba(210, 210, 210, 0.82);
  --text: rgba(245, 245, 245, 0.88);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  font-family: Georgia, "Times New Roman", serif;
  overflow-x: visible;
}

body {
  min-height: 185vh;
}

.intro-smoke {
  position: relative;
  height: 100vh;
  width: 100vw;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, rgba(45, 45, 45, 0.35), transparent 42%),
    linear-gradient(#020202, rgb(56, 53, 47));
  isolation: isolate;
}

.title-stack {
  position: relative;
  z-index: 1;
  filter: brightness(1.08);
  text-align: center;
  color: var(--text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(12px);
  animation: titleReveal 1.4s ease forwards 0.35s;
}

.title-stack h1 {
  margin: 0;
  font-size: clamp(3.4rem, 10vw, 9.6rem);
  line-height: 0.92;
  font-weight: 700;
  text-shadow: 0 0 26px rgba(255, 255, 255, 0.18);
}

.title-stack .dek {
  max-width: 48rem;
  margin: 1.4rem auto 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
  color: rgba(245, 245, 245, 0.78);
}

.title-stack .byline {
  margin-top: 1.25rem;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.8rem, 1.5vw, 1.05rem);
  letter-spacing: 0.08em;
  text-transform: none;
  color: rgba(245, 245, 245, 0.7);
}

#smokeCanvas {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  cursor: none;
  transition: opacity 450ms linear;
}

.eraser-cursor {
  position: fixed;
  z-index: 5;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  pointer-events: none;
  translate: -50% -50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 0 34px rgba(255, 255, 255, 0.22),
    inset 0 0 28px rgba(255, 255, 255, 0.14);
  opacity: 0;
  transition: opacity 180ms ease;
}

.intro-smoke:hover .eraser-cursor {
  opacity: 1;
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  z-index: 4;
  transform: translateX(-50%);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.52);
  opacity: 0.75;
}

.after-space {
  height: 85vh;
  background: rgba(255, 255, 255, 0.18);
}

@keyframes titleReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
   STITCHED PAGE FIXES
   These overrides scope the colors/selectors so components
   stop overwriting each other after being stitched together.
   ========================================================= */

html,
body {
  margin: 0;
  min-height: 100%;
  overflow-x: visible;
  font-family: Georgia, "Times New Roman", serif;
  background: #020202;
}

/* Intro scope */
.intro-smoke {
  --intro-bg: #020202;
  --intro-text: rgba(245, 245, 245, 0.88);
  color: var(--intro-text);
}

.intro-smoke .title-stack h1 {
  color: var(--intro-text);
  margin: 0;
  font-size: clamp(3.4rem, 10vw, 9.6rem);
  line-height: 0.92;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.intro-smoke + .after-space {
  height: 0;
  background: rgb(56, 53, 47);
}

/* Problem intro scope */
.problem-section {
  --problem-sand: #d8ae78;
  --problem-smoke: #2b2b29;
  --problem-panel: #383735;
  --problem-paper: #eee6dc;
  --problem-muted: rgba(238, 230, 220, 0.76);
  --problem-gold: #d2a36e;
  background: var(--problem-panel);
  color: var(--problem-paper);
}

.problem-section .smoke-cap span {
  background: var(--problem-smoke);
}
.problem-section .text-panel {
  color: #383735;
}
.problem-section .kicker {
  color: var(--problem-gold);
}
.problem-section h1 {
  color: #f4eee6;
  margin: 0 0 2.1rem;
  max-width: 720px;
  font-size: clamp(2.35rem, 4.6vw, 4.35rem);
  line-height: 1.07;
  letter-spacing: -0.035em;
}
.problem-section .body-copy {
  color: var(--problem-muted);
}
.problem-section .body-copy strong {
  color: #f4eee6;
}
.problem-section > .grain {
  z-index: 20;
  opacity: 0.16;
}
.problem-section .bottom-haze {
  background: linear-gradient(to bottom, transparent, rgba(63, 63, 61, 0.78));
}

/* Closing reflection — same palette/layout as the problem section, with faint
   italic news quotes drifting behind the text and intensifying toward the end. */
.reflection-section {
  position: relative;
  overflow: hidden;
  min-height: 140vh;
  background: #383735;
  color: #eee6dc;
}
.reflection-section .kicker {
  color: #d2a36e;
}
.reflection-section h1 {
  color: #f4eee6;
}
.reflection-section .body-copy {
  color: rgba(238, 230, 220, 0.76);
}
.reflection-section .body-copy strong {
  color: #f4eee6;
}
/* the protest line — gently emphasised, not shouting */
.reflection-section .body-copy .protest-line {
  margin: 2rem 0;
  padding-left: 1.2rem;
  border-left: 2px solid rgba(230, 184, 120, 0.7);
  color: #e3d4b8;
  font-size: clamp(1.2rem, 1.7vw, 1.6rem);
  font-weight: 500;
  line-height: 1.5;
}
.reflection-section .text-panel {
  position: relative;
  z-index: 12;
}

.reflection-section .bg-quotes {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.reflection-section .bg-quote {
  position: absolute;
  max-width: min(24ch, 26vw);
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(1.05rem, 1.7vw, 1.65rem);
  line-height: 1.5;
  color: #eee6dc;
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.9s ease,
    transform 0.9s ease;
}
.reflection-section .bg-quote.in {
  opacity: var(--q-op, 0.12);
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reflection-section .bg-quote {
    transform: none;
    transition: none;
  }
}
.reflection-section .bg-quote span {
  font-style: normal;
  font-size: 0.78em;
  letter-spacing: 0.04em;
}
/* horizontal lines; opacity rises as the section goes on */
.reflection-section .bg-quote:nth-child(1) {
  top: 2%;
  left: 5%;
  --q-op: 0.05;
}
.reflection-section .bg-quote:nth-child(2) {
  top: 13%;
  right: 5%;
  --q-op: 0.06;
}
.reflection-section .bg-quote:nth-child(3) {
  top: 25%;
  left: 5%;
  --q-op: 0.07;
}
.reflection-section .bg-quote:nth-child(4) {
  top: 36%;
  right: 6%;
  --q-op: 0.08;
}
.reflection-section .bg-quote:nth-child(5) {
  top: 46%;
  left: 5%;
  --q-op: 0.09;
}
.reflection-section .bg-quote:nth-child(6) {
  top: 54%;
  right: 5%;
  --q-op: 0.1;
}
.reflection-section .bg-quote:nth-child(7) {
  top: 60%;
  left: 9%;
  --q-op: 0.11;
}
.reflection-section .bg-quote:nth-child(8) {
  top: 65%;
  right: 4%;
  --q-op: 0.12;
}
.reflection-section .bg-quote:nth-child(9) {
  top: 69%;
  left: 4%;
  --q-op: 0.13;
}
/* confine each quote to its side gutter, clear of the centred 760px text block */
.reflection-section .bg-quote:nth-child(odd) {
  left: 1.5rem;
  right: calc(50% + 380px + 1.5rem);
  max-width: none;
}
.reflection-section .bg-quote:nth-child(even) {
  right: 1.5rem;
  left: calc(50% + 380px + 1.5rem);
  max-width: none;
}

.reflection-section .protest-signs {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.reflection-section .protest-sign {
  position: absolute;
  height: auto;
  opacity: 0;
  transition:
    opacity 1s ease,
    transform 1s ease;
}
.reflection-section .protest-sign.in {
  opacity: 1;
  transform: translateX(0);
}
.reflection-section .sign-first {
  top: 14%;
  left: -6%;
  width: clamp(19rem, 34vw, 36rem);
  transform: translateX(-52px);
}
.reflection-section .sign-second {
  top: 40%;
  right: -1.5%;
  width: clamp(24rem, 42vw, 44rem);
  transform: translateX(52px);
}
@media (prefers-reduced-motion: reduce) {
  .reflection-section .protest-sign {
    transform: none;
    transition: none;
  }
}

/* Smoke art capping the foot of the section — sits behind the text and quotes,
   above the section background. */
.reflection-section .footer-smoke {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  z-index: 0;
  line-height: 0;
  pointer-events: none;
}
.reflection-section .footer-smoke img {
  display: block;
  width: 100%;
  height: auto;
}

/* Farmer clock scope */
.farmer-window {
  --farmer-cream: #ffd9ad;
  --farmer-sand: #e2b579;
  --farmer-wheat: #c99858;
  --farmer-ink: #343434;
  --farmer-muted: rgba(52, 52, 52, 0.72);
  --farmer-burn: #c65b3a;
  --farmer-smoke: #3c3c39;
  background:
    radial-gradient(
      circle at 52% 28%,
      rgba(255, 230, 196, 0.72),
      transparent 38%
    ),
    linear-gradient(
      to bottom,
      #ffdcb4 0%,
      var(--farmer-cream) 66%,
      #edc28a 100%
    );
  color: var(--farmer-ink);
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.farmer-window .smoke-top span {
  background: var(--farmer-smoke);
}
.farmer-window .smoke-wisp::before,
.farmer-window .smoke-wisp::after {
  border-left-color: var(--farmer-smoke);
}
.farmer-window h1 {
  color: var(--farmer-ink);
  margin: 0 0 1.3rem;
  font-size: clamp(2rem, 2.75vw, 3rem);
  line-height: 1.08;
  letter-spacing: 0;
}
.farmer-window .lede,
.farmer-window .process p {
  color: var(--farmer-muted);
}
.farmer-window .chart-title,
.farmer-window .gauge-label,
.farmer-window .days-note p {
  color: var(--farmer-ink);
}
.farmer-window .residue-note {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: clamp(-1.2rem, -2vw, -0.5rem) auto clamp(-5.5rem, -8vw, -3.25rem);
  color: var(--farmer-muted);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.05rem, 1.45vw, 1.32rem);
  line-height: 1.55;
  text-align: center;
}
.farmer-window .days-note .big,
.farmer-window .days-note .label {
  color: var(--farmer-burn);
}
.farmer-window .arc {
  background: conic-gradient(
    from 270deg at 50% 100%,
    var(--farmer-burn) 0deg 30deg,
    #d7a86b 30deg 180deg,
    transparent 180deg 360deg
  );
}
.farmer-window .arc::after {
  background: var(--farmer-cream);
}
.farmer-window .tick::before,
.farmer-window .needle,
.farmer-window .hub {
  background: var(--farmer-ink);
}
.farmer-window .needle::after {
  border-left-color: var(--farmer-ink);
}
.farmer-window .stem,
.farmer-window .leaf {
  background: var(--farmer-wheat);
  opacity: 0.42;
}
.farmer-window .hill {
  background: #d6a269;
  left: 0;
  right: 0;
  /* Taller dark-tan ground so the smoke-cap rises over the hill, but its crest
     still rests below the text above it. */
  height: 16rem;
  overflow: hidden;
}
.farmer-window > .grain {
  z-index: 20;
  opacity: 0.16;
}

.farmer-window .content {
  padding-bottom: clamp(5rem, 8vw, 7rem);
}

.farmer-window-layout {
  display: grid;
  grid-template-columns: minmax(16rem, 0.6fr) minmax(34rem, 1.4fr);
  gap: clamp(3rem, 5vw, 4.5rem);
  align-items: center;
  width: min(1120px, calc(100% - 8rem));
  padding-top: clamp(8rem, 10vw, 9.5rem);
  padding-bottom: clamp(5rem, 8vw, 7rem);
}

.farmer-text-panel {
  max-width: 27rem;
}

.farmer-window .farmer-text-panel h1 {
  max-width: 18ch;
  margin-bottom: clamp(1.15rem, 2.4vw, 1.75rem);
  margin-right: 0;
  margin-left: 0;
  text-align: left;
}

.farmer-window .farmer-text-panel h1::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  margin-top: clamp(1.15rem, 2.4vw, 1.65rem);
  background: var(--farmer-burn);
}

.farmer-window .farmer-text-panel .lede {
  max-width: 25rem;
  margin: 0;
  color: rgba(52, 52, 52, 0.76);
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  line-height: 1.7;
  text-align: left;
}

.farmer-window .farmer-text-panel .lede + .lede {
  margin-top: 0.85rem;
}

.farmer-window .days-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.9rem;
  align-items: baseline;
  width: 100%;
  max-width: 25rem;
  margin: 0 0 clamp(1.65rem, 3vw, 2.25rem);
  padding: 0;
  border-left: 0;
  text-align: left;
}

.farmer-window .days-note .big {
  color: var(--farmer-burn);
  font-size: clamp(2.7rem, 4.6vw, 4.2rem);
  line-height: 0.95;
  letter-spacing: 0;
}

.farmer-window .days-note .label {
  margin-top: 0.2rem;
  color: var(--farmer-burn);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.78rem, 1.2vw, 1.05rem);
  font-weight: 900;
  letter-spacing: 0.14em;
}

.farmer-window .days-note p {
  grid-column: 1 / -1;
  margin: 0.35rem 0 0;
  max-width: 25rem;
  color: rgba(52, 52, 52, 0.78);
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  line-height: 1.42;
  text-align: left;
}

.farmer-window .residue-note {
  max-width: 27rem;
  margin: 0;
  color: rgba(52, 52, 52, 0.72);
  font-size: clamp(0.98rem, 1.05vw, 1.06rem);
  line-height: 1.62;
  text-align: left;
}

.fire-counts-panel {
  position: relative;
  min-width: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--farmer-ink);
  transform: translateY(0.75rem);
}

.fire-counts-panel .chart-kicker,
.fire-counts-panel .chart-subtitle {
  text-align: left;
  transform: translateY(0.45rem);
}

.fire-counts-panel .fire-counts-callout {
  display: grid;
  grid-template-columns: max-content minmax(13rem, 24rem);
  gap: clamp(0.75rem, 1.1vw, 1rem);
  align-items: center;
  max-width: 48rem;
  margin-top: clamp(0.35rem, 1vw, 0.85rem);
  padding-top: 0;
  border-top: 0;
  text-align: left;
}

.fire-counts-panel .callout-label {
  display: none;
}

.fire-counts-panel .callout-number {
  color: var(--farmer-burn);
  font-size: clamp(3.2rem, 5.4vw, 5rem);
  text-align: left;
  width: max-content;
}

.fire-counts-panel .fire-counts-callout p:last-child {
  margin: 0;
  padding-left: clamp(1rem, 1.4vw, 1.25rem);
  border-left: 1px solid rgba(52, 52, 52, 0.28);
  color: rgba(52, 52, 52, 0.58);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.78rem, 0.9vw, 0.9rem);
  font-weight: 600;
  line-height: 1.48;
  text-align: left;
}

@media (max-width: 940px) {
  .farmer-window-layout {
    grid-template-columns: 1fr;
  }

  .farmer-text-panel {
    max-width: 40rem;
  }

  .fire-counts-panel .fire-counts-callout {
    grid-template-columns: 1fr;
  }
}

/* Fire transition scope */
.fire-transition {
  --fire-card: #ffd8ad;
  --fire-ink: #252525;
  --fire-charcoal: #343434;
  --fire-progress: 0;
  --fire-veil: 0;
  min-height: 285vh;
  margin-top: 0;
  background: #d6a269;
  color: var(--fire-ink);
  overflow: clip;
  padding: 0;
}
.fire-transition .background-scene svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100vw;
  height: 100vh;
  transform: none;
}

.fire-transition .background-scene {
  position: sticky;
  top: 0;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  isolation: isolate;
  overflow: hidden;
}

.fire-transition .background-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: #343434;
  opacity: var(--fire-veil);
  transition: opacity 80ms linear;
}

.fire-transition .fire-takeover-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(
      ellipse at 8% 16%,
      rgba(255, 195, 96, 0.82) 0 7%,
      transparent 17%
    ),
    radial-gradient(
      ellipse at 22% 10%,
      rgba(202, 73, 42, 0.94) 0 10%,
      transparent 22%
    ),
    radial-gradient(
      ellipse at 38% 6%,
      rgba(255, 155, 72, 0.9) 0 13%,
      transparent 25%
    ),
    radial-gradient(
      ellipse at 55% 12%,
      rgba(181, 58, 42, 0.9) 0 11%,
      transparent 23%
    ),
    radial-gradient(
      ellipse at 74% 8%,
      rgba(232, 107, 54, 0.94) 0 14%,
      transparent 27%
    ),
    radial-gradient(
      ellipse at 92% 16%,
      rgba(255, 181, 86, 0.78) 0 9%,
      transparent 21%
    ),
    linear-gradient(
      180deg,
      rgba(238, 117, 55, 0.98) 0%,
      rgba(205, 62, 38, 1) 34%,
      rgba(110, 28, 25, 1) 100%
    );
  clip-path: polygon(
    0 100%,
    0 30%,
    6% 16%,
    12% 35%,
    19% 9%,
    27% 32%,
    35% 4%,
    43% 29%,
    52% 12%,
    61% 34%,
    70% 7%,
    79% 31%,
    88% 13%,
    100% 29%,
    100% 100%
  );
  transform: translateY(68%) scaleY(0.6);
  transform-origin: 50% 100%;
  transition:
    opacity 80ms linear,
    transform 80ms linear;
}

.fire-transition .flame-layer {
  transform-box: view-box;
  transform-origin: 50% 100%;
  transition: transform 80ms linear;
}

.fire-transition > .grain {
  position: sticky;
  top: 0;
  height: 100vh;
}
.stubble-photo-clips {
  position: absolute;
  left: 50%;
  right: auto;
  top: clamp(3rem, 6vw, 5rem);
  bottom: auto;
  z-index: 18;
  width: min(1080px, 94vw);
  height: clamp(10rem, 16vw, 16rem);
  transform: translateX(-50%);
  pointer-events: none;
}
.stubble-photo {
  position: absolute;
  display: block;
  width: clamp(16rem, 26vw, 27rem);
  height: clamp(9.5rem, 14.5vw, 15.5rem);
  object-fit: cover;
  border: 8px solid rgba(255, 216, 173, 0.82);
  box-shadow: 0 1.35rem 2.5rem rgba(72, 45, 26, 0.26);
  filter: sepia(0.14) saturate(0.92) contrast(0.96);
  opacity: 0.92;
}
.stubble-photo-left {
  left: 0;
  bottom: 0.2rem;
  z-index: 1;
  transform: none;
}
.stubble-photo-right {
  right: 0;
  bottom: 0;
  z-index: 2;
  transform: none;
}
.stubble-photo-low {
  left: 50%;
  bottom: 1.1rem;
  z-index: 3;
  width: clamp(18rem, 30vw, 31rem);
  height: clamp(10.5rem, 16vw, 17rem);
  transform: translateX(-50%);
  opacity: 0.94;
}
.fire-transition .sticky-card-wrap {
  position: relative;
  top: auto;
  min-height: auto;
  padding: clamp(1.5rem, 3.5vh, 2.5rem) 2rem clamp(6rem, 12vh, 8rem);
  margin-top: clamp(-5rem, -8vh, -2.5rem);
  transform: none;
}
.fire-transition .text-card {
  position: relative;
  z-index: 35;
  background: rgba(255, 216, 173, 0.96);
  color: var(--fire-ink);
  box-shadow: 0 18px 36px rgba(72, 45, 26, 0.24);
  margin-top: 0;
  transform: none;
}
.fire-transition .text-card p {
  color: var(--fire-ink);
}
.fire-transition .text-card strong {
  color: #111;
}

@media (max-width: 900px) {
  .stubble-photo-clips {
    display: none;
  }
}
.fire-transition > .grain {
  z-index: 8;
  opacity: 0.11;
}

/* Fire scrolly map scope */
.fire-scrolly {
  --map-bg: #343434;
  --map-state: #3f3f3f;
  --map-state-line: #5d5d5d;
  --map-muted: #c9c9c9;
  --map-yellow: #ffe066;
  --map-orange: #ff9f1c;
  --map-red: #c84f3a;
  position: relative;
  min-height: 620vh;
  margin-top: 0;
  background: var(--map-bg);
  color: white;
  z-index: 25;
  isolation: isolate;
  overflow: visible;
}

.fire-scrolly .scrolly-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.fire-scrolly .steps {
  position: relative;
  z-index: 5;
  width: min(1420px, 100vw);
  margin: -100vh auto 0;
  padding-top: 36vh;
  padding-right: clamp(1rem, 3vw, 3.25rem);
  padding-bottom: 24vh;
  pointer-events: none;
}

.fire-scrolly .step {
  min-height: 96vh;
}
.fire-scrolly .state {
  fill: var(--map-state);
  stroke: var(--map-state-line);
}
.fire-scrolly .delhi-ring {
  fill: none;
  pointer-events: none;
  stroke: rgba(255, 255, 255, 0.86);
  vector-effect: non-scaling-stroke;
}
.fire-scrolly .delhi-ring-outer {
  stroke-width: 2;
  stroke-dasharray: 4 4;
  opacity: 0.72;
}
.fire-scrolly .delhi-ring-inner {
  stroke: rgba(91, 214, 255, 0.9);
  stroke-width: 2.5;
  opacity: 0.95;
}
.fire-scrolly .delhi-marker {
  fill: #5bd6ff;
  stroke: #e2f8ff;
  stroke-width: 2.2;
  filter: drop-shadow(0 0 8px rgba(91, 214, 255, 0.72));
  vector-effect: non-scaling-stroke;
}
.fire-scrolly .smoke-screen-dim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #111;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms linear;
}
.fire-scrolly #wind-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}
.fire-scrolly .wind-layer {
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms linear;
}
.fire-scrolly .wind-vector {
  stroke: rgba(238, 230, 220, 0.54);
  stroke-width: 1.4;
  stroke-linecap: round;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.46));
  vector-effect: non-scaling-stroke;
}
.fire-scrolly .wind-vector-field {
  opacity: 0.72;
  animation: windVectorPulse 2.4s ease-in-out infinite;
}
.fire-scrolly .wind-vector-arrowhead {
  fill: rgba(238, 230, 220, 0.62);
  stroke: rgba(0, 0, 0, 0.38);
  stroke-width: 0.5;
}
.fire-scrolly .wind-route-halo {
  fill: none;
  stroke: rgba(255, 236, 184, 0.34);
  stroke-width: 11;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: blur(1.4px);
  vector-effect: non-scaling-stroke;
}
.fire-scrolly .wind-route {
  fill: none;
  stroke: #ffe7a8;
  stroke-width: 5.2;
  stroke-linecap: round;
  stroke-dasharray: 28 18;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.85))
    drop-shadow(0 0 10px rgba(255, 226, 157, 0.62));
  vector-effect: non-scaling-stroke;
  animation: windFlow 1.35s linear infinite;
}
.fire-scrolly .wind-arrowhead {
  fill: #ffe7a8;
  stroke: rgba(8, 10, 10, 0.78);
  stroke-width: 1;
}
.fire-scrolly .annotation {
  color: #f2f2f2;
  width: min(520px, 38vw);
  padding: clamp(1rem, 2vw, 1.35rem);
  background: rgba(22, 22, 22, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 1rem 2.6rem rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.88);
}

@keyframes windFlow {
  to {
    stroke-dashoffset: -34;
  }
}

@keyframes windVectorPulse {
  50% {
    opacity: 0.48;
  }
}
.fire-scrolly .annotation h2 {
  color: white;
}
.fire-scrolly .annotation p {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
}
.fire-scrolly .annotation p + p {
  margin-top: 0.85rem;
}
.fire-scrolly .date-badge .count {
  color: var(--map-muted);
}
.fire-scrolly .dot.new {
  background: var(--map-yellow);
}
.fire-scrolly .dot.week {
  background: var(--map-orange);
}
.fire-scrolly .dot.old {
  background: var(--map-red);
}

/* Cigarette interactive */
.cigarette-interactive {
  position: relative;
  min-height: 112vh;
  padding: clamp(6rem, 11vw, 9rem) clamp(1.5rem, 7vw, 6rem);
  overflow: hidden;
  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(255, 217, 173, 0.42),
      transparent 22rem
    ),
    linear-gradient(180deg, #343434 0 5rem, #e2b579 5rem 100%);
  color: #252525;
}

.cig-smoke-top {
  position: absolute;
  inset: 0 -4rem auto;
  height: 9rem;
  background:
    radial-gradient(circle at 9% 0, #343434 0 4.4rem, transparent 4.55rem),
    radial-gradient(circle at 24% 0, #343434 0 5rem, transparent 5.15rem),
    radial-gradient(circle at 44% 0, #343434 0 4.6rem, transparent 4.75rem),
    radial-gradient(circle at 64% 0, #343434 0 5.4rem, transparent 5.55rem),
    radial-gradient(circle at 85% 0, #343434 0 4.8rem, transparent 4.95rem),
    linear-gradient(#343434, #343434);
  background-repeat: no-repeat;
  background-size: 100% 5.5rem;
}

.cig-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(17rem, 0.9fr) minmax(19rem, 1.1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
  max-width: 1120px;
  margin: 0 auto;
}

.cig-copy,
.cig-reveal {
  background: rgba(255, 217, 173, 0.34);
  border: 1px solid rgba(93, 68, 42, 0.24);
  box-shadow: 0 18px 38px rgba(72, 45, 26, 0.16);
}

.cig-copy {
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.cig-copy .kicker {
  margin: 0 0 0.65rem;
  color: #9f4f35;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cig-copy .source-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.cig-copy .source-link:hover,
.cig-copy .source-link:focus-visible {
  color: #252525;
}

.cig-copy h1 {
  margin: 0 0 1rem;
  color: #252525;
  font-size: clamp(2rem, 4.3vw, 3.8rem);
  line-height: 0.98;
}

.cig-copy p,
.cig-reveal p {
  color: rgba(37, 37, 37, 0.78);
  line-height: 1.55;
}

.cigarette-illustration {
  width: min(100%, 340px);
  margin: 1.6rem 0;
}

.cigarette-illustration svg {
  display: block;
  width: 100%;
}

.guess-control {
  display: grid;
  grid-template-columns: 2rem 5.5rem 2rem 1fr;
  gap: 0.45rem;
  align-items: center;
  margin-top: 1.25rem;
  font-family: Arial, Helvetica, sans-serif;
}

.guess-number {
  padding: 0.35rem 0.2rem;
  border: 2px solid rgba(159, 79, 53, 0.52);
  background: rgba(255, 249, 242, 0.58);
  color: #bf6b35;
  font-size: 2.15rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.guess-step,
.guess-confirm {
  border: 0;
  background: #3f3f3d;
  color: #eee6dc;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.guess-step {
  height: 2.1rem;
  border-radius: 3px;
}

.guess-confirm {
  margin-top: 0.9rem;
  padding: 0.85rem 1.25rem;
}

.cig-reveal {
  min-height: 34rem;
  padding: clamp(1.4rem, 3vw, 2rem);
}

.before-guess {
  display: grid;
  min-height: 28rem;
  place-items: center;
  text-align: center;
}

.reveal-label,
.hist-title {
  margin: 0 0 0.5rem;
  color: #7a5232;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.real-number {
  color: #bf6b35;
  font-size: clamp(4rem, 8vw, 6rem);
  font-weight: 900;
  line-height: 0.9;
}

.real-unit {
  margin: 0 0 1.25rem;
  font-family: Arial, Helvetica, sans-serif;
}

.cig-grid {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: 0.35rem;
  margin: 1rem 0 1.35rem;
}

.cig-icon {
  aspect-ratio: 30 / 14;
}

.cig-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.histogram-wrap {
  margin-top: 1rem;
}

#guess-histogram {
  width: 100%;
  height: 150px;
  display: block;
}

.guess-comment {
  margin: 1rem 0 0;
  color: #9f4f35;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
}

@media (max-width: 760px) {
  .cig-layout {
    grid-template-columns: 1fr;
  }

  .cig-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* Final cigarette equivalent overrides */
.cigarette-interactive {
  min-height: 100vh;
  padding-top: clamp(6rem, 10vw, 8rem);
}

.cigarette-interactive .cig-layout {
  grid-template-columns: minmax(18rem, 0.9fr) minmax(22rem, 1.1fr);
  align-items: center;
}

.cigarette-interactive .cig-copy,
.cigarette-interactive .cig-reveal {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.cigarette-interactive .cig-copy {
  padding: 0;
}

.cigarette-interactive .cig-copy h1 {
  max-width: 34rem;
  margin-bottom: 1.1rem;
  font-size: clamp(1.45rem, 2.8vw, 2.55rem);
  line-height: 1.12;
}

.sentence-guess {
  margin-top: 1rem;
  font-family: Arial, Helvetica, sans-serif;
}

.guess-label {
  display: block;
  margin-bottom: 0.35rem;
  color: rgba(37, 37, 37, 0.58);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.guess-input-row {
  display: grid;
  grid-template-columns: 6.25rem 1.8rem auto;
  gap: 0.45rem;
  align-items: center;
}

#guess-input {
  width: 100%;
  height: 3.25rem;
  border: 2px solid rgba(159, 79, 53, 0.34);
  background: rgba(255, 239, 218, 0.64);
  color: #bf6b35;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.guess-buttons {
  display: grid;
  gap: 0.18rem;
}

.cigarette-interactive .guess-step {
  height: 1.5rem;
  border-radius: 2px;
  font-size: 0.72rem;
  line-height: 1;
}

.cigarette-interactive .guess-confirm {
  margin-top: 1rem;
}

.cigarette-interactive .cigarette-illustration {
  width: min(88%, 360px);
  margin: clamp(1.5rem, 3vw, 2.6rem) 0 0 -0.7rem;
  transform: rotate(-8deg);
}

.cigarette-interactive .cig-reveal {
  min-height: 0;
  padding: 0;
}

.live-guess,
.after-guess {
  min-height: 34rem;
  padding: clamp(1rem, 2vw, 1.4rem);
  border: 1px solid rgba(126, 83, 45, 0.24);
  background: rgba(226, 181, 121, 0.22);
}

.live-guess .real-number,
.after-guess .real-number {
  font-size: clamp(3.4rem, 7vw, 5.8rem);
}

.cigarette-interactive .cig-grid {
  --cig-columns: 9;
  display: grid;
  grid-template-columns: repeat(var(--cig-columns), minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: clamp(0.18rem, 0.7vw, 0.42rem);
  align-content: start;
  min-height: 15rem;
  margin: 1rem 0 1.35rem;
}

.cigarette-interactive .cig-icon {
  aspect-ratio: 42 / 16;
}

.cigarette-interactive .cig-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 1px 0 rgba(84, 54, 29, 0.22));
}

.empty-grid-note {
  grid-column: 1 / -1;
  align-self: center;
  justify-self: center;
  margin: 4rem 0;
  color: rgba(37, 37, 37, 0.52);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
}

.cigarette-interactive .histogram-wrap {
  margin-top: 1.15rem;
}

@media (max-width: 760px) {
  .cigarette-interactive .cig-layout {
    grid-template-columns: 1fr;
  }

  .live-guess,
  .after-guess {
    min-height: auto;
  }

  .guess-input-row {
    grid-template-columns: 5.7rem 1.8rem auto;
  }
}

/* Final cigarette equivalent overrides */
.cigarette-interactive {
  min-height: 100vh;
  padding-top: clamp(6rem, 10vw, 8rem);
}

.cigarette-interactive .cig-layout {
  grid-template-columns: minmax(18rem, 0.9fr) minmax(22rem, 1.1fr);
  align-items: center;
}

.cigarette-interactive .cig-copy,
.cigarette-interactive .cig-reveal {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.cigarette-interactive .cig-copy {
  padding: 0;
}

.cigarette-interactive .cig-copy h1 {
  max-width: 34rem;
  margin-bottom: 1.1rem;
  font-size: clamp(1.45rem, 2.8vw, 2.55rem);
  line-height: 1.12;
}

.sentence-guess {
  margin-top: 1rem;
  font-family: Arial, Helvetica, sans-serif;
}

.guess-label {
  display: block;
  margin-bottom: 0.35rem;
  color: rgba(37, 37, 37, 0.58);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.guess-input-row {
  display: grid;
  grid-template-columns: 6.25rem 1.8rem auto;
  gap: 0.45rem;
  align-items: center;
}

#guess-input {
  width: 100%;
  height: 3.25rem;
  border: 2px solid rgba(159, 79, 53, 0.34);
  background: rgba(255, 239, 218, 0.64);
  color: #bf6b35;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.guess-buttons {
  display: grid;
  gap: 0.18rem;
}

.cigarette-interactive .guess-step {
  height: 1.5rem;
  border-radius: 2px;
  font-size: 0.72rem;
  line-height: 1;
}

.cigarette-interactive .guess-confirm {
  margin-top: 1rem;
}

.cigarette-interactive .cigarette-illustration {
  width: min(78%, 320px);
  margin-top: clamp(1.8rem, 4vw, 3rem);
  transform: rotate(-8deg);
}

.cigarette-interactive .cig-reveal {
  min-height: 0;
  padding: 0;
}

.live-guess,
.after-guess {
  min-height: 34rem;
  padding: clamp(1rem, 2vw, 1.4rem);
  border: 1px solid rgba(126, 83, 45, 0.24);
  background: rgba(226, 181, 121, 0.22);
}

.live-guess .real-number,
.after-guess .real-number {
  font-size: clamp(3.4rem, 7vw, 5.8rem);
}

.cigarette-interactive .cig-grid {
  --cig-columns: 9;
  display: grid;
  grid-template-columns: repeat(var(--cig-columns), minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: clamp(0.18rem, 0.7vw, 0.42rem);
  align-content: start;
  min-height: 15rem;
  margin: 1rem 0 1.35rem;
}

.cigarette-interactive .cig-icon {
  aspect-ratio: 30 / 14;
  transform: rotate(-28deg);
}

.cigarette-interactive .cig-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 1px 0 rgba(84, 54, 29, 0.22));
}

.empty-grid-note {
  grid-column: 1 / -1;
  align-self: center;
  justify-self: center;
  margin: 4rem 0;
  color: rgba(37, 37, 37, 0.52);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
}

.cigarette-interactive .histogram-wrap {
  margin-top: 1.15rem;
}

@media (max-width: 760px) {
  .cigarette-interactive .cig-layout {
    grid-template-columns: 1fr;
  }

  .live-guess,
  .after-guess {
    min-height: auto;
  }

  .guess-input-row {
    grid-template-columns: 5.7rem 1.8rem auto;
  }
}

.farmer-window .content > h1 {
  display: block;
  width: 100%;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Cigarette equivalent live guess */
.cigarette-interactive {
  min-height: 100vh;
  padding-top: clamp(6rem, 10vw, 8rem);
}

.cigarette-interactive .cig-layout {
  grid-template-columns: minmax(18rem, 0.9fr) minmax(22rem, 1.1fr);
  align-items: center;
}

.cigarette-interactive .cig-copy,
.cigarette-interactive .cig-reveal {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.cigarette-interactive .cig-copy {
  padding: 0;
}

.cigarette-interactive .cig-copy h1 {
  max-width: 34rem;
  margin-bottom: 1.1rem;
  font-size: clamp(1.45rem, 2.8vw, 2.55rem);
  line-height: 1.12;
}

.sentence-guess {
  margin-top: 1rem;
  font-family: Arial, Helvetica, sans-serif;
}

.guess-label {
  display: block;
  margin-bottom: 0.35rem;
  color: rgba(37, 37, 37, 0.58);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.guess-input-row {
  display: grid;
  grid-template-columns: 6.25rem 1.8rem auto;
  gap: 0.45rem;
  align-items: center;
}

#guess-input {
  width: 100%;
  height: 3.25rem;
  border: 2px solid rgba(159, 79, 53, 0.34);
  background: rgba(255, 239, 218, 0.64);
  color: #bf6b35;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.guess-buttons {
  display: grid;
  gap: 0.18rem;
}

.cigarette-interactive .guess-step {
  height: 1.5rem;
  border-radius: 2px;
  font-size: 0.72rem;
  line-height: 1;
}

.cigarette-interactive .guess-confirm {
  margin-top: 1rem;
}

.cigarette-interactive .cigarette-illustration {
  width: min(78%, 320px);
  margin-top: clamp(1.8rem, 4vw, 3rem);
  transform: rotate(-8deg);
}

.cigarette-interactive .cig-reveal {
  min-height: 0;
  padding: 0;
}

.live-guess,
.after-guess {
  min-height: 34rem;
  padding: clamp(1rem, 2vw, 1.4rem);
  border: 1px solid rgba(126, 83, 45, 0.24);
  background: rgba(226, 181, 121, 0.22);
}

.live-guess .real-number,
.after-guess .real-number {
  font-size: clamp(3.4rem, 7vw, 5.8rem);
}

.cigarette-interactive .cig-grid {
  --cig-columns: 9;
  display: grid;
  grid-template-columns: repeat(var(--cig-columns), minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: clamp(0.18rem, 0.7vw, 0.42rem);
  align-content: start;
  min-height: 15rem;
  margin: 1rem 0 1.35rem;
}

.cigarette-interactive .cig-icon {
  aspect-ratio: 30 / 14;
  transform: rotate(-28deg);
}

.cigarette-interactive .cig-icon svg {
  overflow: visible;
  filter: drop-shadow(0 1px 0 rgba(84, 54, 29, 0.22));
}

.empty-grid-note {
  grid-column: 1 / -1;
  align-self: center;
  justify-self: center;
  margin: 4rem 0;
  color: rgba(37, 37, 37, 0.52);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
}

.histogram-wrap {
  margin-top: 1.15rem;
}

@media (max-width: 760px) {
  .cigarette-interactive .cig-layout {
    grid-template-columns: 1fr;
  }

  .live-guess,
  .after-guess {
    min-height: auto;
  }

  .guess-input-row {
    grid-template-columns: 5.7rem 1.8rem auto;
  }
}

/* Cigarette interactive */
.cigarette-interactive {
  position: relative;
  min-height: 112vh;
  padding: clamp(6rem, 11vw, 9rem) clamp(1.5rem, 7vw, 6rem);
  overflow: hidden;
  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(255, 217, 173, 0.42),
      transparent 22rem
    ),
    linear-gradient(180deg, #343434 0 5rem, #e2b579 5rem 100%);
  color: #252525;
}

.cig-smoke-top {
  position: absolute;
  inset: 0 -4rem auto;
  height: 9rem;
  background:
    radial-gradient(circle at 9% 0, #343434 0 4.4rem, transparent 4.55rem),
    radial-gradient(circle at 24% 0, #343434 0 5rem, transparent 5.15rem),
    radial-gradient(circle at 44% 0, #343434 0 4.6rem, transparent 4.75rem),
    radial-gradient(circle at 64% 0, #343434 0 5.4rem, transparent 5.55rem),
    radial-gradient(circle at 85% 0, #343434 0 4.8rem, transparent 4.95rem),
    linear-gradient(#343434, #343434);
  background-repeat: no-repeat;
  background-size: 100% 5.5rem;
}

.cig-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(17rem, 0.9fr) minmax(19rem, 1.1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
  max-width: 1120px;
  margin: 0 auto;
}

.cig-copy,
.cig-reveal {
  background: rgba(255, 217, 173, 0.34);
  border: 1px solid rgba(93, 68, 42, 0.24);
  box-shadow: 0 18px 38px rgba(72, 45, 26, 0.16);
}

.cig-copy {
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.cig-copy .kicker {
  margin: 0 0 0.65rem;
  color: #9f4f35;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cig-copy h1 {
  margin: 0 0 1rem;
  color: #252525;
  font-size: clamp(2rem, 4.3vw, 3.8rem);
  line-height: 0.98;
}

.cig-copy p,
.cig-reveal p {
  color: rgba(37, 37, 37, 0.78);
  line-height: 1.55;
}

.cigarette-illustration {
  width: min(100%, 340px);
  margin: 1.6rem 0;
}

.cigarette-illustration svg {
  display: block;
  width: 100%;
}

.guess-control {
  display: grid;
  grid-template-columns: 2rem 5.5rem 2rem 1fr;
  gap: 0.45rem;
  align-items: center;
  margin-top: 1.25rem;
  font-family: Arial, Helvetica, sans-serif;
}

.guess-number {
  padding: 0.35rem 0.2rem;
  border: 2px solid rgba(159, 79, 53, 0.52);
  background: rgba(255, 249, 242, 0.58);
  color: #bf6b35;
  font-size: 2.15rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.guess-step,
.guess-confirm {
  border: 0;
  background: #3f3f3d;
  color: #eee6dc;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.guess-step {
  height: 2.1rem;
  border-radius: 3px;
}

.guess-confirm {
  margin-top: 0.9rem;
  padding: 0.85rem 1.25rem;
}

.cig-reveal {
  min-height: 34rem;
  padding: clamp(1.4rem, 3vw, 2rem);
}

.before-guess {
  display: grid;
  min-height: 28rem;
  place-items: center;
  text-align: center;
}

.reveal-label,
.hist-title {
  margin: 0 0 0.5rem;
  color: #7a5232;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.real-number {
  color: #bf6b35;
  font-size: clamp(4rem, 8vw, 6rem);
  font-weight: 900;
  line-height: 0.9;
}

.real-unit {
  margin: 0 0 1.25rem;
  font-family: Arial, Helvetica, sans-serif;
}

.cig-grid {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: 0.35rem;
  margin: 1rem 0 1.35rem;
}

.cig-icon {
  aspect-ratio: 30 / 14;
}

.cig-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.histogram-wrap {
  margin-top: 1rem;
}

#guess-histogram {
  width: 100%;
  height: 150px;
  display: block;
}

.guess-comment {
  margin: 1rem 0 0;
  color: #9f4f35;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
}

@media (max-width: 760px) {
  .cig-layout {
    grid-template-columns: 1fr;
  }

  .cig-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* Final cigarette equivalent overrides */
.cigarette-interactive {
  min-height: 100vh;
  padding-top: clamp(6rem, 10vw, 8rem);
}

.cigarette-interactive .cig-layout {
  grid-template-columns: minmax(18rem, 0.9fr) minmax(22rem, 1.1fr);
  align-items: center;
}

.cigarette-interactive .cig-copy,
.cigarette-interactive .cig-reveal {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.cigarette-interactive .cig-copy {
  padding: 0;
}

.cigarette-interactive .cig-copy h1 {
  max-width: 34rem;
  margin-bottom: 1.1rem;
  font-size: clamp(1.45rem, 2.8vw, 2.55rem);
  line-height: 1.12;
}

.sentence-guess {
  margin-top: 1rem;
  font-family: Arial, Helvetica, sans-serif;
}

.guess-label {
  display: block;
  margin-bottom: 0.35rem;
  color: rgba(37, 37, 37, 0.58);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.guess-input-row {
  display: grid;
  grid-template-columns: 6.25rem 1.8rem auto;
  gap: 0.45rem;
  align-items: center;
}

#guess-input {
  width: 100%;
  height: 3.25rem;
  border: 2px solid rgba(159, 79, 53, 0.34);
  background: rgba(255, 239, 218, 0.64);
  color: #bf6b35;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.guess-buttons {
  display: grid;
  gap: 0.18rem;
}

.cigarette-interactive .guess-step {
  height: 1.5rem;
  border-radius: 2px;
  font-size: 0.72rem;
  line-height: 1;
}

.cigarette-interactive .guess-confirm {
  margin-top: 1rem;
}

.cigarette-interactive .cigarette-illustration {
  width: min(78%, 320px);
  margin-top: clamp(1.8rem, 4vw, 3rem);
  transform: rotate(-8deg);
}

.cigarette-interactive .cig-reveal {
  min-height: 0;
  padding: 0;
}

.live-guess,
.after-guess {
  min-height: 34rem;
  padding: clamp(1rem, 2vw, 1.4rem);
  border: 1px solid rgba(126, 83, 45, 0.24);
  background: rgba(226, 181, 121, 0.22);
}

.live-guess .real-number,
.after-guess .real-number {
  font-size: clamp(3.4rem, 7vw, 5.8rem);
}

.cigarette-interactive .cig-grid {
  --cig-columns: 9;
  display: grid;
  grid-template-columns: repeat(var(--cig-columns), minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: clamp(0.18rem, 0.7vw, 0.42rem);
  align-content: start;
  min-height: 15rem;
  margin: 1rem 0 1.35rem;
}

.cigarette-interactive .cig-icon {
  aspect-ratio: 30 / 14;
  transform: rotate(-28deg);
}

.cigarette-interactive .cig-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 1px 0 rgba(84, 54, 29, 0.22));
}

.empty-grid-note {
  grid-column: 1 / -1;
  align-self: center;
  justify-self: center;
  margin: 4rem 0;
  color: rgba(37, 37, 37, 0.52);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
}

.cigarette-interactive .histogram-wrap {
  margin-top: 1.15rem;
}

@media (max-width: 760px) {
  .cigarette-interactive .cig-layout {
    grid-template-columns: 1fr;
  }

  .live-guess,
  .after-guess {
    min-height: auto;
  }

  .guess-input-row {
    grid-template-columns: 5.7rem 1.8rem auto;
  }
}

/* Cigarette section design polish */
.cigarette-interactive {
  padding: clamp(6rem, 9vw, 7.5rem) clamp(1.5rem, 7vw, 6rem)
    clamp(4.5rem, 8vw, 6rem);
  background:
    radial-gradient(
      circle at 74% 26%,
      rgba(255, 222, 174, 0.34),
      transparent 18rem
    ),
    linear-gradient(180deg, #343434 0 4.6rem, #e2b579 4.6rem 100%);
}

.cigarette-interactive .cig-layout {
  max-width: 1080px;
  grid-template-columns: minmax(17rem, 0.88fr) minmax(24rem, 1.12fr);
  gap: clamp(2rem, 5vw, 4rem);
}

.cigarette-interactive .kicker,
.cigarette-interactive .guess-label,
.cigarette-interactive .reveal-label,
.cigarette-interactive .hist-title {
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0.12em;
}

.cigarette-interactive .cig-copy h1 {
  color: #2d2925;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: 0;
}

.sentence-guess {
  max-width: 29rem;
}

.guess-input-row {
  grid-template-columns: 6.4rem 1.8rem minmax(7rem, auto);
}

#guess-input {
  border-color: rgba(112, 77, 47, 0.3);
  background: rgba(255, 242, 224, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.cigarette-interactive .guess-step,
.cigarette-interactive .guess-confirm {
  background: #3f3f3d;
  color: #eee6dc;
}

.cigarette-interactive .guess-step {
  padding: 0;
}

.cigarette-interactive .guess-confirm {
  padding: 0.85rem 1.2rem;
}

.cigarette-interactive .cigarette-illustration {
  width: min(92%, 380px);
  margin-top: clamp(2rem, 4vw, 3.4rem);
  margin-left: -1rem;
}

.live-guess,
.after-guess {
  display: flex;
  min-height: clamp(32rem, 48vw, 38rem);
  flex-direction: column;
  border-color: rgba(90, 62, 38, 0.28);
  background: rgba(226, 181, 121, 0.2);
}

.cigarette-interactive .real-number {
  color: #b45e2d;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
  letter-spacing: 0;
}

.cigarette-interactive .real-unit {
  color: rgba(45, 41, 37, 0.7);
  font-family: Arial, Helvetica, sans-serif;
}

.cigarette-interactive .cig-grid {
  --cig-columns: 5;
  --cig-rows: 5;
  flex: 1;
  min-height: 18rem;
  grid-template-columns: repeat(var(--cig-columns), minmax(0, 1fr));
  grid-template-rows: repeat(var(--cig-rows), minmax(0, 1fr));
  gap: clamp(0.18rem, 0.55vw, 0.38rem);
  align-items: stretch;
}

.cigarette-interactive .cig-icon {
  display: flex;
  min-width: 0;
  min-height: 0;
  align-items: center;
  justify-content: center;
}

.cigarette-interactive .cig-icon svg {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

.cigarette-interactive .histogram-wrap {
  flex: 0 0 auto;
}

@media (max-width: 760px) {
  .cigarette-interactive .cig-layout {
    grid-template-columns: 1fr;
  }

  .live-guess,
  .after-guess {
    min-height: 29rem;
  }
}

.cigarette-interactive .cig-icon {
  transform: none;
  overflow: visible;
}

/* Single-box cigarette reveal correction */
.cigarette-interactive .cig-reveal {
  min-height: 0;
}

.live-guess,
.after-guess {
  min-height: clamp(32rem, 48vw, 38rem);
}

.live-guess {
  display: block;
  padding: clamp(1rem, 2vw, 1.4rem);
}

.live-guess .cig-grid {
  height: 100%;
  min-height: calc(clamp(32rem, 48vw, 38rem) - clamp(2rem, 4vw, 2.8rem));
  margin: 0;
}

.after-guess[hidden],
.live-guess[hidden] {
  display: none;
}

/* Cigarette grid declutter */
.live-guess,
.after-guess {
  border-color: rgba(90, 62, 38, 0.18);
  background: rgba(226, 181, 121, 0.12);
}

.live-guess {
  overflow: hidden;
}

.live-guess .cig-grid {
  min-height: calc(clamp(32rem, 48vw, 38rem) - clamp(2rem, 4vw, 2.8rem));
  padding: clamp(0.65rem, 1.4vw, 1rem);
  overflow: hidden;
}

.cigarette-interactive .cig-grid {
  gap: clamp(0.28rem, 0.65vw, 0.55rem);
  justify-items: center;
  align-items: center;
}

.cigarette-interactive .cig-icon {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.cigarette-interactive .cig-icon svg {
  width: 82%;
  height: 82%;
  max-width: 5.4rem;
  max-height: 2.2rem;
  margin: auto;
}

.cigarette-interactive .cigarette-illustration {
  width: min(82%, 340px);
  margin-top: clamp(1.8rem, 3vw, 2.8rem);
}

/* Fire counts chart */
.fire-counts-section {
  position: relative;
  padding: clamp(4.5rem, 8vw, 7rem) clamp(1.25rem, 5vw, 4rem);
  background:
    radial-gradient(
      circle at 84% 42%,
      rgba(188, 104, 52, 0.18),
      transparent 20rem
    ),
    linear-gradient(180deg, #343434 0%, #2f302e 100%);
  color: #eee6dc;
}

.fire-counts-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 0.28fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
}

.fire-counts-chart-wrap {
  min-width: 0;
}

.chart-kicker,
.callout-label {
  margin: 0 0 0.9rem;
  color: rgba(52, 52, 52, 0.62);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

#fire-counts-chart {
  display: block;
  width: 100%;
  min-height: clamp(20rem, 29vw, 27rem);
  overflow: visible;
}

.fire-window-band {
  fill: rgba(198, 91, 58, 0.075);
  stroke: none;
  stroke-dasharray: 5 5;
}

.fire-window-boundary {
  stroke: rgba(184, 64, 32, 0.42);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke;
}

.fire-window-label {
  fill: #b84020;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
}

.fire-grid-lines line {
  stroke: rgba(52, 52, 52, 0.07);
}

.year-fire-line {
  fill: none;
  stroke: rgba(52, 52, 52, 0.16);
  stroke-width: 1.05;
}

.avg-fire-line {
  fill: none;
  stroke: #b84020;
  stroke-width: 3.2;
  filter: none;
}

.fire-counts-panel .year-fire-line,
.fire-counts-panel .avg-fire-line {
  transition: stroke-dashoffset 3600ms cubic-bezier(0.22, 0.72, 0.18, 1);
}

.fire-counts-panel .avg-fire-line {
  transition-duration: 4200ms;
}

.avg-fire-dot {
  fill: #b84020;
  stroke: #ffd9ad;
  stroke-width: 1.25;
  opacity: 1;
  transition: opacity 420ms ease 3100ms;
}

.fire-counts-panel:not(.is-chart-entered) .avg-fire-dot {
  opacity: 0;
}

.fire-axis text,
.fire-counts-legend text {
  fill: rgba(52, 52, 52, 0.56);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
}

.fire-axis line {
  stroke: rgba(52, 52, 52, 0.14);
}

.fire-axis .axis-baseline {
  stroke: rgba(52, 52, 52, 0.24);
  stroke-width: 1;
}

.chart-subtitle {
  margin: -0.35rem 0 0.35rem;
  color: rgba(52, 52, 52, 0.7);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  line-height: 1.35;
}

.year-fire-hit {
  opacity: 0;
}

.fire-axis-title {
  display: none;
}

.fire-counts-legend line {
  stroke: #b84020;
  stroke-width: 3.2;
}

.fire-counts-callout {
  padding-top: 2.5rem;
}

.callout-number {
  color: #b84020;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(3.4rem, 7vw, 5.9rem);
  font-weight: 900;
  line-height: 0.9;
}

.fire-counts-callout p:last-child {
  margin: 1rem 0 0;
  color: rgba(52, 52, 52, 0.74);
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  line-height: 1.45;
}

@media (max-width: 820px) {
  .fire-counts-layout {
    grid-template-columns: 1fr;
  }

  .fire-counts-callout {
    padding-top: 0;
  }
}

/* Fire counts readability + hover */
.fire-axis-title {
  fill: rgba(52, 52, 52, 0.72);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fire-axis.y-axis text {
  font-size: 0.72rem;
}

.year-fire-line {
  transition:
    stroke-dashoffset 3600ms cubic-bezier(0.22, 0.72, 0.18, 1),
    opacity 160ms ease,
    stroke 160ms ease,
    stroke-width 160ms ease;
}

.year-fire-line.is-muted {
  opacity: 0.1;
}

.year-fire-line.is-active {
  opacity: 1;
  stroke: #e47c2f;
  stroke-width: 2.4;
  filter: none;
}

.year-fire-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 18;
  pointer-events: stroke;
  cursor: pointer;
}

.fire-hover-label rect {
  fill: rgba(255, 238, 214, 0.88);
  stroke: rgba(228, 124, 47, 0.28);
}

.fire-hover-label text {
  fill: #a8501e;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.03em;
}

.year-fire-series .year-fire-label {
  display: none;
  pointer-events: none;
}

.year-fire-series .year-fire-label rect {
  fill: rgba(255, 238, 214, 0.88);
  stroke: rgba(228, 124, 47, 0.28);
}

.year-fire-series .year-fire-label text {
  fill: #a8501e;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.03em;
}

.year-fire-series:hover .year-fire-line,
.year-fire-series:focus-within .year-fire-line {
  opacity: 1;
  stroke: #e47c2f;
  stroke-width: 2.4;
  filter: none;
}

.year-fire-series:hover .year-fire-label,
.year-fire-series:focus-within .year-fire-label {
  display: block;
}

/* Fire counts map-blue backdrop */
.fire-counts-section {
  background: #2596be;
  color: #f4efe5;
}

.fire-counts-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at 78% 42%,
    rgba(47, 48, 46, 0.18),
    transparent 26rem
  );
}

.fire-counts-layout {
  position: relative;
  z-index: 1;
}

/* Fire counts neutral backdrop */
.fire-counts-section {
  background: #3f3f3f;
}

.fire-counts-section::before {
  background: radial-gradient(
    circle at 78% 42%,
    rgba(223, 111, 53, 0.12),
    transparent 26rem
  );
}

/* Fire-to-Delhi transition */
.fire-counts-section {
  padding-bottom: clamp(7rem, 12vw, 10rem);
  background:
    radial-gradient(
      circle at 78% 42%,
      rgba(223, 111, 53, 0.12),
      transparent 26rem
    ),
    linear-gradient(180deg, #3f3f3f 0%, #3f3f3f 62%, #6b5848 82%, #f0c89a 100%);
}

.fire-counts-section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8rem;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(240, 200, 154, 0), #f0c89a 88%);
}

.fire-to-delhi-bridge {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: clamp(3rem, 7vw, 5.5rem) auto 0;
  color: rgba(244, 239, 229, 0.86);
  font-size: clamp(1.35rem, 2.2vw, 2.15rem);
  line-height: 1.32;
  text-align: center;
}

#what-reaches-delhi {
  background:
    radial-gradient(
      circle at 18% 28%,
      rgba(232, 180, 138, 0.32),
      transparent 24rem
    ),
    radial-gradient(
      circle at 82% 34%,
      rgba(85, 85, 85, 0.08),
      transparent 26rem
    ),
    linear-gradient(180deg, #f0c89a 0%, #f0c89a 100%);
  color: #2e2e2e;
}

#what-reaches-delhi .effects-text-panel {
  background: transparent;
  box-shadow: none;
  color: #2e2e2e;
}

#what-reaches-delhi .effects-text-panel .kicker {
  color: #b84020;
}

#what-reaches-delhi .effects-text-panel h1 {
  color: #2e2e2e;
}

#what-reaches-delhi .effects-text-panel p {
  color: rgba(46, 46, 46, 0.78);
}

#what-reaches-delhi .visual-placeholder {
  border-left-color: rgba(184, 64, 32, 0.48);
  background: rgba(46, 46, 46, 0.06);
  color: rgba(46, 46, 46, 0.66);
}

/* The fires section's own background is the interlude grey, while the map keeps
   its dark backdrop inside the sticky. So when the map fades out (grey veil) and
   its sticky releases, the grey section background is revealed underneath it —
   and the interlude that follows is the same grey. The transition is a dissolve;
   nothing slides up over the map. */
/* The map keeps its dark backdrop inside the sticky. The fires section's own
   background is the PM2.5 peach, so once the dissolve veil has turned peach and
   the sticky releases, the peach section background is revealed underneath it and
   the PM2.5 section follows in the same peach — a pure dissolve, no slide. */
.fire-scrolly {
  background: var(--peach-pale, #f0c89a);
  transition: opacity 0.9s ease;
}

/* Once the dissolve is done, the whole fires layer fades itself away (revealing
   the PM2.5 viz pinned behind it) on a timer — not tied to scroll — so you can't
   get stuck half-faded. */
.fire-scrolly.is-dismissed {
  opacity: 0;
}

.fire-scrolly .scrolly-sticky {
  background: var(--bg);
}

/* Dark interlude between the fire map and the PM2.5 visual. It follows the fires
   section in normal flow (no overlap, no z-index, no transform) — it is already
   the same grey underneath, so it never appears to move. It pins statically
   while you scroll; sequential lines fade in/out in place, then the background
   shifts to the PM2.5 peach to hand off into that section. */
.story-interlude {
  position: relative;
  height: 320vh;
  background: #3f3f3f;
  pointer-events: none;
}

.story-interlude-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.interlude-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #3f3f3f;
}

.interlude-lines {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: min(60rem, 86vw);
}

.interlude-line {
  grid-area: 1 / 1;
  margin: 0;
  text-align: center;
  color: #f4eee6;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.7rem, 3.8vw, 3.4rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  opacity: 0;
  will-change: opacity;
}

.pm25-scrolly {
  --peach: #d4956a;
  --peach-light: #e8b48a;
  --peach-pale: #f0c89a;
  --dark: #2e2e2e;
  --charcoal: #3a3a3a;
  --smoke: #555;
  --rust: #b84020;
  --rust-light: #d05030;
  --sand: #c8916a;
  --tan: #8b6840;
  --wheat-gold: #c8a070;
  position: relative;
  min-height: 420vh;
  /* Sits behind the fires section's tail (no z-index, so it's under the z-2 fires
     section). The dissolve fades the fires section out to reveal this viz already
     pinned underneath — a true in-place crossfade, no slide and no empty gap. */
  margin-top: -200vh;
  background:
    linear-gradient(rgba(46, 46, 46, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 46, 46, 0.12) 1px, transparent 1px),
    radial-gradient(
      circle at 18% 28%,
      rgba(232, 180, 138, 0.32),
      transparent 24rem
    ),
    radial-gradient(
      circle at 82% 34%,
      rgba(85, 85, 85, 0.08),
      transparent 26rem
    ),
    linear-gradient(180deg, var(--peach-pale) 0%, var(--peach-pale) 100%);
  background-size:
    3rem 3rem,
    3rem 3rem,
    auto,
    auto,
    auto;
  background-position:
    0 0,
    0 0,
    center,
    center,
    center;
  background-attachment: fixed, fixed, scroll, scroll, scroll;
  color: var(--dark);
}

.pm25-sticky {
  position: sticky;
  top: 0;
  display: block;
  min-height: 100vh;
  overflow: hidden;
  z-index: 1;
}

.pm25-copy {
  position: absolute;
  left: 50%;
  bottom: clamp(1.5rem, 5vh, 3.5rem);
  z-index: 2;
  width: min(820px, calc(100vw - 2rem));
  padding: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
  transform: translateX(-50%);
  transition: opacity 160ms ease;
}

.pm25-copy .kicker {
  margin: 0 0 0.45rem;
  color: #b35f45;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pm25-copy h1 {
  margin: 0 auto;
  max-width: 44rem;
  color: var(--dark);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 2vw, 1.85rem);
  line-height: 1.14;
}

.pm25-copy h1 strong,
.pm25-copy .hot {
  color: var(--rust);
}

.pm25-copy p:not(.kicker) {
  margin: 0.55rem auto 0;
  max-width: 44rem;
  color: rgba(46, 46, 46, 0.78);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.9rem, 1vw, 1rem);
  line-height: 1.42;
}

.pm25-stage {
  position: relative;
  min-height: 100vh;
}

#pm25-scrolly-viz {
  display: block;
  width: 100%;
  height: 100vh;
}

.pm25-source-note {
  position: absolute;
  top: 0.8rem;
  right: 1rem;
  z-index: 2;
  width: min(34rem, 62vw);
  margin: 0;
  color: rgba(46, 46, 46, 0.66);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.72rem, 0.85vw, 0.86rem);
  line-height: 1.35;
  text-align: right;
}

.pm25-scroll-steps {
  position: relative;
  z-index: 1;
  margin-top: -100vh;
  pointer-events: none;
}

.pm25-step {
  min-height: 100vh;
}

.pm25-country-label,
.pm25-marker-label,
.pm25-marker-value,
.pm25-bracket-label,
.pm25-axis-label {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.pm25-country-label {
  font-size: clamp(1.12rem, 1.65vw, 1.65rem);
}

.pm25-marker-value {
  font-size: clamp(0.9rem, 1.35vw, 1.22rem);
}

.pm25-marker-label,
.pm25-bracket-label,
.pm25-axis-label {
  font-size: clamp(0.54rem, 0.72vw, 0.74rem);
  text-transform: uppercase;
}

.pm25-particle {
  filter: none;
}

.pm25-center-line {
  stroke: rgba(46, 46, 46, 0.66);
  stroke-width: 1.5;
}

.pm25-marker-line {
  stroke-dasharray: 6 8;
  stroke-width: 1.1;
}

@media (max-width: 820px) {
  .pm25-sticky {
    display: block;
  }

  .pm25-copy {
    left: 0;
    right: 0;
    bottom: 1rem;
    max-width: none;
    margin: 0;
    padding: 0 1.25rem;
    background: transparent;
    box-shadow: none;
    transform: none;
  }

  .pm25-copy h1 {
    max-width: none;
    font-size: 1.45rem;
  }

  .pm25-copy p:not(.kicker) {
    font-size: 0.92rem;
  }

  .pm25-stage {
    min-height: 72vh;
  }

  #pm25-scrolly-viz {
    height: 72vh;
  }
}

/* "So what does this mean?" — centered chapter break after the PM2.5 visual. */
.meaning-section {
  position: relative;
  z-index: 4;
  padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 6vw, 5rem)
    clamp(1.25rem, 2.5vw, 2.25rem);
  background: var(--peach-pale, #f0c89a);
  color: #2e2e2e;
  overflow: hidden;
}

.top-left-smoke {
  position: absolute;
  top: 0;
  left: 0;

  /* was 52vw */
  width: 34vw;

  max-width: 520px;
  min-width: 340px;

  height: 650px;

  z-index: 0;
  pointer-events: none;
}

.top-left-smoke svg {
  width: 100%;
  height: 100%;
  display: block;
}

.meaning-inner {
  position: relative;
  z-index: 2;
  max-width: 72rem;
  margin: 0 auto;
  text-align: center;
}

.meaning-title {
  margin: 0 0 1.1rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #1f1c1a;
}

.meaning-lede {
  margin: 0 auto;
  max-width: 60rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1rem, 1.4vw, 1.28rem);
  line-height: 1.6;
  color: rgba(46, 46, 46, 0.85);
}

.meaning-sub {
  margin: 0.9rem auto 0;
  max-width: 58rem;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(0.92rem, 1.2vw, 1.08rem);
  line-height: 1.55;
  color: rgba(46, 46, 46, 0.62);
}

/* Card holding a (future) seasonal plot on the left and a short caption on the
   right. Warm panel to match the section, with an empty plot slot for now. */
.meaning-card {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: clamp(1.4rem, 3vw, 2.4rem);
  align-items: stretch;
  max-width: 84rem;
  margin: clamp(1.6rem, 3.5vw, 3rem) auto 0;
  padding: clamp(1.4rem, 2.6vw, 2.2rem);
  background: rgba(255, 250, 240, 0.55);
  border: 1px solid rgba(93, 68, 42, 0.2);
  border-radius: 1.4rem;
  box-shadow: 0 26px 52px rgba(72, 45, 26, 0.13);
  text-align: left;
}

.meaning-card-plot {
  min-height: clamp(22rem, 54vh, 40rem);
  border-radius: 1rem;
  background: rgba(255, 253, 248, 0.55);
  border: 1px solid rgba(93, 68, 42, 0.16);
}

.meaning-card-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.4rem 0.6rem;
}

.meaning-card-text p {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.02rem, 1.35vw, 1.28rem);
  line-height: 1.6;
  color: rgba(46, 46, 46, 0.82);
}

@media (max-width: 760px) {
  .meaning-card {
    grid-template-columns: 1fr;
  }
}

.meaning-effects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
  gap: clamp(1.6rem, 3vw, 2.6rem);
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  text-align: left;
}

.meaning-effect {
  padding-top: 1.1rem;
  border-top: 2px solid rgba(184, 64, 32, 0.4);
}

.meaning-stat {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  font-weight: 700;
  color: #b84020;
  line-height: 1;
}

.meaning-effect h3 {
  margin: 0.6rem 0 0.5rem;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1f1c1a;
}

.meaning-effect p {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.92rem, 1.05vw, 1.02rem);
  line-height: 1.55;
  color: rgba(46, 46, 46, 0.74);
}

.cigarette-interactive {
  margin-top: -1px;
  background:
    radial-gradient(
      circle at 74% 26%,
      rgba(255, 222, 174, 0.34),
      transparent 18rem
    ),
    linear-gradient(180deg, #926c48 0%, #926c48 100%);
}

/* Remove old cigarette top cap during fire-to-health transition */
.cigarette-interactive .cig-smoke-top {
  display: none;
}

/* Reference-style cigarette equivalent redesign */
.cigarette-interactive {
  --peach: #d4956a;
  --peach-light: #e8b48a;
  --peach-pale: #f0c89a;
  --dark: #2e2e2e;
  --charcoal: #3a3a3a;
  --smoke: #555;
  --rust: #b84020;
  --rust-light: #d05030;
  --sand: #c8916a;
  min-height: 100vh;
  padding: clamp(3.5rem, 7vw, 5.8rem) clamp(1.1rem, 5.4vw, 5.6rem);
  background: #926c48;
  color: var(--dark);
}

.cigarette-interactive::before {
  content: none;
}

.cigarette-interactive::after {
  content: none;
}

.cigarette-interactive .cigarette-smoke-cap {
  z-index: 1;
  top: auto;
  bottom: -13rem;
  left: -10vw;
  right: -10vw;
  height: 31rem;
  transform: rotate(180deg);
  transform-origin: center center;
}

.cigarette-interactive .cigarette-smoke-cap span {
  background: rgb(43, 41, 34);
  box-shadow: 0 -24px 52px rgba(0, 0, 0, 0.24);
}

.cigarette-interactive .cigarette-smoke-cap span:nth-child(1) {
  width: 48vw;
  height: 22rem;
}

.cigarette-interactive .cigarette-smoke-cap span:nth-child(2) {
  width: 42vw;
  height: 24rem;
  left: 18vw;
}

.cigarette-interactive .cigarette-smoke-cap span:nth-child(3) {
  width: 40vw;
  height: 24rem;
  left: 46vw;
}

.cigarette-interactive .cigarette-smoke-cap span:nth-child(4) {
  width: 44vw;
  height: 22rem;
}

.cigarette-interactive .cigarette-smoke-cap-back {
  z-index: 0;
  bottom: -8.5rem;
  left: -14vw;
  right: -6vw;
  opacity: 0.46;
}

.cigarette-interactive .cigarette-smoke-cap-back span {
  background: rgb(43, 41, 34);
  box-shadow: 0 -18px 44px rgba(0, 0, 0, 0.18);
}

.cigarette-interactive .cig-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(21rem, 0.9fr) minmax(30rem, 1.1fr);
  gap: clamp(2rem, 5vw, 5.4rem);
  align-items: center;
  max-width: 1280px;
  min-height: calc(100vh - clamp(7rem, 14vw, 11.6rem));
  margin: 0 auto;
}

.cigarette-interactive .cig-copy,
.cigarette-interactive .cig-reveal {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.cigarette-interactive .cig-copy {
  position: relative;
  min-height: 43rem;
  padding: 0;
}

.cigarette-interactive .kicker {
  margin: 0 0 1.45rem;
  color: #f0c89a;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.82rem, 1vw, 1rem);
  font-weight: 900;
  letter-spacing: 0.18em;
  line-height: 1.1;
  text-transform: uppercase;
}

.cigarette-interactive .source-link {
  color: inherit;
  text-decoration: none;
}

.cigarette-interactive .source-link:hover,
.cigarette-interactive .source-link:focus-visible {
  color: var(--dark);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.cigarette-interactive .cig-copy h1 {
  max-width: 41rem;
  margin: 0 0 1.45rem;
  color: #efe5d9;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 2.85vw, 3.2rem);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.1;
}

.cigarette-interactive .sentence-guess {
  max-width: 27rem;
  margin-top: clamp(1.3rem, 3vw, 2.4rem);
}

.cigarette-interactive .guess-label,
.cigarette-interactive .reveal-label,
.cigarette-interactive .hist-title {
  margin: 0;
  color: #f0c89a;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: 0.17em;
  line-height: 1.15;
  text-transform: uppercase;
}

.cigarette-interactive .guess-input-row {
  display: grid;
  grid-template-columns: 10.25rem 2.45rem minmax(8.5rem, auto);
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin-top: 0.95rem;
  color: var(--dark);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1rem, 1.45vw, 1.32rem);
  line-height: 1;
}

.cigarette-interactive #guess-input {
  width: 10.25rem;
  height: 4.2rem;
  min-width: 0;
  padding: 0 0.8rem;
  border: 1px solid rgba(200, 145, 106, 0.52);
  border-right: 0;
  border-radius: 999px 0 0 999px;
  background: rgba(255, 250, 244, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 0.8rem 1.7rem rgba(92, 56, 28, 0.08);
  color: var(--rust);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(2.2rem, 3.4vw, 3.25rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
}

.cigarette-interactive #guess-input::-webkit-inner-spin-button,
.cigarette-interactive #guess-input::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

.cigarette-interactive .guess-buttons {
  display: grid;
  width: 2.45rem;
  height: 4.2rem;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--rust-light), var(--rust));
  box-shadow: 0 0.8rem 1.7rem rgba(92, 56, 28, 0.16);
}

.cigarette-interactive .guess-step {
  position: relative;
  display: grid;
  width: 100%;
  height: 2.1rem;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fffaf4;
  font-size: 0;
  line-height: 0;
}

.cigarette-interactive .guess-step + .guess-step {
  border-top: 1px solid rgba(255, 250, 244, 0.28);
}

.cigarette-interactive .guess-step::before {
  content: "";
  width: 0.62rem;
  height: 0.62rem;
  border-top: 3px solid #fffaf4;
  border-left: 3px solid #fffaf4;
}

.cigarette-interactive .guess-step[data-delta="1"]::before {
  transform: translateY(0.12rem) rotate(45deg);
}

.cigarette-interactive .guess-step[data-delta="-1"]::before {
  transform: translateY(-0.12rem) rotate(225deg);
}

.cigarette-interactive .guess-input-row span {
  padding-left: 1rem;
  white-space: nowrap;
}

.cigarette-interactive .guess-confirm {
  margin-top: 1.75rem;
  padding: 1rem 1.65rem;
  border: 0;
  border-radius: 0.55rem;
  background: linear-gradient(180deg, var(--rust-light), var(--rust));
  box-shadow: 0 0.95rem 1.65rem rgba(100, 42, 20, 0.18);
  color: #fffaf4;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.cigarette-interactive .guess-confirm:hover,
.cigarette-interactive .guess-confirm:focus-visible {
  background: var(--rust);
  transform: translateY(-1px);
}

.cigarette-interactive .cigarette-illustration {
  position: absolute;
  right: clamp(-0.8rem, 0.4vw, 0.8rem);
  bottom: -1.6rem;
  width: min(56%, 31rem);
  margin: 0;
  filter: drop-shadow(0 1.2rem 1rem rgba(72, 45, 26, 0.18));
}

.cigarette-interactive .cigarette-illustration svg {
  display: block;
  width: 100%;
}

.cigarette-interactive .cig-reveal {
  overflow: hidden;
  border: 1px solid rgba(200, 145, 106, 0.52);
  border-radius: 1.15rem;
  background: rgba(255, 250, 244, 0.42);
  box-shadow: 0 1.2rem 3.2rem rgba(111, 67, 35, 0.12);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.cigarette-interactive .live-guess,
.cigarette-interactive .after-guess {
  min-height: clamp(33rem, 57vw, 47rem);
  border: 0;
  background: transparent;
  box-shadow: none;
}

.cigarette-interactive .live-guess {
  display: grid;
  align-items: center;
  padding: clamp(1.4rem, 3vw, 2.8rem);
}

.cigarette-interactive .live-guess[hidden],
.cigarette-interactive .after-guess[hidden] {
  display: none;
}

.cigarette-interactive .live-guess .cig-grid {
  height: min(100%, 38rem);
  min-height: clamp(24rem, 45vw, 37rem);
  margin: 0;
  padding: 0;
}

.cigarette-interactive .after-guess {
  position: relative;
  display: block;
  min-height: 0;
  padding: 0;
}

.cigarette-interactive .after-guess::before,
.cigarette-interactive .histogram-wrap::before {
  display: block;
  width: 3.4rem;
  height: 3.4rem;
  flex: 0 0 auto;
  border: 1px solid rgba(212, 149, 106, 0.62);
  border-radius: 50%;
  background-color: rgba(255, 250, 244, 0.2);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 2.05rem 2.05rem;
}

.cigarette-interactive .after-guess::before {
  content: "";
  position: absolute;
  top: clamp(1.5rem, 3vw, 2.2rem);
  left: clamp(1.35rem, 3vw, 2.2rem);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23b84020' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 39h36'/%3E%3Crect x='10' y='27' width='8' height='12'/%3E%3Crect x='23' y='20' width='8' height='19'/%3E%3Crect x='36' y='11' width='8' height='28'/%3E%3Cpath d='M10 22l9-10 9 8 13-15'/%3E%3Ccircle cx='10' cy='22' r='2.5' fill='%23b84020'/%3E%3Ccircle cx='19' cy='12' r='2.5' fill='%23f0c89a'/%3E%3Ccircle cx='28' cy='20' r='2.5' fill='%23f0c89a'/%3E%3Crect x='39' y='3' width='7' height='7' rx='1.5' fill='%23f0c89a'/%3E%3C/g%3E%3C/svg%3E");
}

.cigarette-interactive .reveal-label,
.cigarette-interactive .real-number,
.cigarette-interactive .real-unit {
  margin-left: clamp(6.2rem, 9vw, 7.6rem);
  margin-right: clamp(1.4rem, 3vw, 2.2rem);
}

.cigarette-interactive .reveal-label {
  margin-top: clamp(1.75rem, 3vw, 2.45rem);
  color: var(--dark);
  line-height: 1.15;
}

.cigarette-interactive .real-number {
  margin-top: 0.55rem;
  color: var(--rust);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(4.1rem, 8vw, 6rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.86;
}

.cigarette-interactive .real-unit {
  margin-top: 0.6rem;
  color: var(--dark);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1;
}

.cigarette-interactive .cig-grid {
  --cig-columns: 8;
  --cig-rows: 6;
  display: grid;
  grid-template-columns: repeat(var(--cig-columns), minmax(0, 1fr));
  grid-template-rows: repeat(var(--cig-rows), minmax(0, 1fr));
  gap: clamp(0.2rem, 0.65vw, 0.58rem) clamp(0.42rem, 1vw, 0.9rem);
  align-items: center;
  flex: 0 0 auto;
  justify-items: center;
  min-height: clamp(15rem, 27vw, 23rem);
  padding: clamp(1.15rem, 2.8vw, 2.1rem) clamp(1.35rem, 3vw, 2.35rem)
    clamp(1.8rem, 3.2vw, 2.55rem);
}

.cigarette-interactive .after-guess .cig-grid {
  height: clamp(15.5rem, 24vw, 20.5rem);
  min-height: clamp(15.5rem, 24vw, 20.5rem);
  border-bottom: 1px solid rgba(200, 145, 106, 0.45);
}

.cigarette-interactive .after-guess > .cig-grid {
  flex: 0 0 auto;
  height: clamp(14.5rem, 21vw, 18rem);
  min-height: clamp(14.5rem, 21vw, 18rem);
}

.cigarette-interactive .cig-icon {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 1.25rem;
  place-items: center;
  overflow: visible;
}

.cigarette-interactive .cig-icon svg {
  width: 100%;
  height: auto;
  max-width: 4.5rem;
  max-height: 1.7rem;
  overflow: visible;
}

.cigarette-interactive .empty-grid-note {
  grid-column: 1 / -1;
  align-self: center;
  justify-self: center;
  color: var(--smoke);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
}

.cigarette-interactive .histogram-wrap {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.15rem) clamp(1.35rem, 3vw, 2.25rem) 0;
}

.cigarette-interactive .histogram-wrap::before {
  content: "";
  position: absolute;
  top: clamp(1.35rem, 3vw, 2rem);
  left: clamp(1.35rem, 3vw, 2.2rem);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23b84020' stroke-width='3' stroke-linejoin='round'%3E%3Crect x='10' y='26' width='8' height='14'/%3E%3Crect x='24' y='18' width='8' height='22'/%3E%3Crect x='38' y='8' width='8' height='32'/%3E%3C/g%3E%3C/svg%3E");
}

.cigarette-interactive .hist-title {
  margin: 0 0 0.95rem clamp(4.7rem, 6vw, 5.3rem);
  color: var(--dark);
}

.cigarette-interactive #guess-histogram {
  display: block;
  width: 100%;
  height: 150px;
  margin-top: 0.45rem;
}

.cigarette-interactive .guess-comment {
  position: relative;
  margin: clamp(1rem, 2vw, 1.35rem) clamp(1.35rem, 3vw, 2.25rem)
    clamp(1.35rem, 3vw, 2rem);
  padding: 1rem 1.2rem 1rem clamp(4.2rem, 6vw, 4.9rem);
  border: 1px solid rgba(212, 149, 106, 0.68);
  border-radius: 0.95rem;
  background: rgba(255, 250, 244, 0.28);
  color: var(--dark);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  line-height: 1.28;
}

.cigarette-interactive .guess-comment span {
  display: block;
}

.cigarette-interactive .guess-comment strong {
  display: block;
  font-weight: 900;
}

.cigarette-interactive .guess-comment::before {
  content: "";
  position: absolute;
  display: block;
  width: 2.85rem;
  height: 2.85rem;
  margin: -0.33rem 0 0 calc(clamp(-3.75rem, -5vw, -3.1rem));
  border-radius: 50%;
  background: var(--rust);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23fffaf4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 31c-4-3-6-7-6-12 0-7 5.5-12 12-12s12 5 12 12c0 5-2 9-6 12'/%3E%3Cpath d='M18 31h12M19 36h10M21 40h6'/%3E%3Cpath d='M24 31V20l5-4H19l5 4'/%3E%3Cpath d='M24 2v3M8 9l3 3M2 23h4M40 23h6M37 9l-3 3'/%3E%3C/g%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 2.2rem 2.2rem;
}

@media (max-width: 980px) {
  .cigarette-interactive .cig-layout {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .cigarette-interactive .cig-copy {
    min-height: 34rem;
  }

  .cigarette-interactive .cig-copy h1 {
    max-width: 41rem;
    font-size: clamp(2.2rem, 5.5vw, 3.35rem);
  }

  .cigarette-interactive .cigarette-illustration {
    right: 0;
    width: min(48%, 22rem);
  }
}

@media (max-width: 620px) {
  .cigarette-interactive {
    padding: 3rem 1rem;
  }

  .cigarette-interactive .cig-copy {
    min-height: auto;
    padding-bottom: 15rem;
  }

  .cigarette-interactive .cig-copy h1 {
    font-size: clamp(2rem, 10vw, 2.85rem);
  }

  .cigarette-interactive .guess-input-row {
    grid-template-columns: 8.75rem 2.2rem;
    row-gap: 0.75rem;
  }

  .cigarette-interactive #guess-input {
    width: 8.75rem;
    height: 3.8rem;
    padding: 0 0.6rem;
  }

  .cigarette-interactive .guess-buttons {
    height: 3.8rem;
  }

  .cigarette-interactive .guess-step {
    height: 1.9rem;
  }

  .cigarette-interactive .guess-input-row span {
    grid-column: 1 / -1;
    padding-left: 0.2rem;
  }

  .cigarette-interactive .cigarette-illustration {
    width: min(76%, 20rem);
  }

  .cigarette-interactive .live-guess,
  .cigarette-interactive .after-guess {
    min-height: 31rem;
  }

  .cigarette-interactive .reveal-label,
  .cigarette-interactive .real-number,
  .cigarette-interactive .real-unit {
    margin-left: 5.4rem;
  }

  .cigarette-interactive .cig-grid {
    min-height: 15rem;
  }
}

/* Smoke city transition section */
.smoke-city-section {
  position: relative;
  display: grid;
  min-height: 100vh;
  overflow: hidden;
  background: #6f5d42 url("assets/generated/india-gate-smoke-clean.png") center
    center / cover no-repeat;
  color: #f4eee4;
}

.smoke-city-section::before {
  content: none;
}

.smoke-city-section::after {
  content: none;
}

.smoke-city-section .smoke-city-cap {
  z-index: 1;
  top: -15rem;
  height: 28rem;
}

.smoke-city-section .smoke-city-cap span {
  background: rgba(43, 41, 34, 0.92);
  box-shadow: 0 28px 56px rgba(0, 0, 0, 0.24);
}

.smoke-city-copy {
  position: relative;
  z-index: 2;
  align-self: center;
  width: min(42rem, calc(100% - 2rem));
  margin-left: clamp(1.4rem, 8.8vw, 8.5rem);
  margin-top: clamp(-2rem, -3vw, -1rem);
}

.smoke-city-kicker {
  margin: 0 0 1.25rem;
  color: #d9a33d;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.78rem, 1vw, 0.95rem);
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 1.1;
  text-transform: uppercase;
}

.smoke-city-copy h2 {
  max-width: 37rem;
  margin: 0 0 1.35rem;
  color: #fff8eb;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 5.1vw, 5rem);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.04;
  text-shadow: 0 0.1rem 0.7rem rgba(0, 0, 0, 0.34);
}

.smoke-city-copy p:not(.smoke-city-kicker) {
  margin: 0;
  color: rgba(255, 248, 235, 0.86);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1rem, 1.35vw, 1.22rem);
  letter-spacing: 0;
  line-height: 1.55;
  text-shadow: 0 0.08rem 0.5rem rgba(0, 0, 0, 0.34);
}

.smoke-scroll-cue {
  display: none;
}

@media (max-width: 760px) {
  .smoke-city-section {
    min-height: 92vh;
    background-position: 54% center;
  }

  .smoke-city-copy {
    align-self: center;
    width: min(31rem, calc(100% - 2rem));
    margin-left: 1.25rem;
  }

  .smoke-city-copy h2 {
    font-size: clamp(2.55rem, 13vw, 4.2rem);
  }
}

/* Draft Delhi effects section */
.delhi-effects-draft {
  --effects-bg: #3f3f3f;
  --effects-panel: #eee6dc;
  --effects-ink: #252525;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(18rem, 0.58fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  min-height: 125vh;
  padding: clamp(6rem, 10vw, 9rem) clamp(1.5rem, 7vw, 6rem)
    clamp(7rem, 10vw, 9rem);
  overflow: hidden;
  background: linear-gradient(
    180deg,
    #3f3f3f 0%,
    #3f3f3f 72%,
    #6b5848 91%,
    #e2b579 100%
  );
  color: var(--effects-ink);
}

.effects-haze-stage {
  position: absolute;
  inset: 0;
  opacity: 0.58;
  pointer-events: none;
}

.effects-haze-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 35% 26%,
      rgba(226, 181, 121, 0.16),
      transparent 26rem
    ),
    linear-gradient(180deg, rgba(63, 63, 63, 0.2), rgba(226, 181, 121, 0.18));
}

.effects-skyline {
  position: absolute;
  left: -4vw;
  right: -4vw;
  bottom: 0;
  height: 42%;
}

.effects-layer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

.effects-layer.back {
  height: 72%;
  opacity: 0.22;
  background:
    linear-gradient(to top, #252525 0 48%, transparent 74%),
    repeating-linear-gradient(
      to right,
      transparent 0 2.6rem,
      #2c2c2a 2.6rem 3.4rem,
      transparent 3.4rem 5rem
    );
}

.effects-layer.front {
  height: 48%;
  opacity: 0.42;
  background:
    linear-gradient(to top, #242422 0 52%, transparent 76%),
    repeating-linear-gradient(
      to right,
      #242422 0 2.1rem,
      transparent 2.1rem 3.2rem
    );
}

.effects-smog {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(238, 230, 220, 0.06),
    rgba(226, 181, 121, 0.28)
  );
  mix-blend-mode: screen;
}

.effects-text-panel {
  position: relative;
  z-index: 1;
  max-width: 760px;
  padding: clamp(2rem, 4vw, 3.2rem) clamp(2rem, 5vw, 4rem);
  background: rgba(238, 230, 220, 0.96);
  box-shadow: 0 18px 36px rgba(24, 24, 22, 0.24);
}

.effects-text-panel .kicker {
  margin: 0 0 0.75rem;
  color: #9f4f35;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.effects-text-panel h1 {
  margin: 0 0 1.35rem;
  color: #252525;
  font-size: clamp(2.2rem, 5vw, 4.4rem);
  line-height: 0.98;
}

.effects-text-panel p {
  color: rgba(37, 37, 37, 0.8);
  font-size: clamp(1.02rem, 1.45vw, 1.24rem);
  line-height: 1.58;
}

.effects-text-panel strong {
  color: #111;
}

.effects-viz-placeholder {
  position: relative;
  z-index: 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 30rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid rgba(238, 230, 220, 0.18);
  background: rgba(37, 37, 37, 0.34);
  color: rgba(238, 230, 220, 0.82);
}

.placeholder-label {
  margin: 0 0 1rem;
  color: rgba(238, 230, 220, 0.68);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.placeholder-chart {
  display: flex;
  align-items: end;
  gap: 0.5rem;
  height: 16rem;
  padding: 1rem;
  border-bottom: 1px solid rgba(238, 230, 220, 0.28);
  background: rgba(24, 24, 22, 0.16);
}

.placeholder-chart span {
  flex: 1;
  min-width: 0;
  background: linear-gradient(180deg, #df6f35, rgba(223, 111, 53, 0.38));
}

.effects-viz-placeholder p:last-child {
  margin: 1rem 0 0;
  color: rgba(238, 230, 220, 0.76);
  line-height: 1.45;
}

@media (max-width: 900px) {
  .delhi-effects-draft {
    grid-template-columns: 1fr;
  }

  .effects-viz-placeholder {
    min-height: 22rem;
  }
}

/* Text-only Delhi effects draft */
.delhi-effects-draft {
  display: block;
  min-height: 112vh;
  padding: clamp(6rem, 11vw, 9rem) clamp(1.5rem, 7vw, 6rem);
  background: #3f3f3f;
  color: #eee6dc;
}

.delhi-effects-draft .effects-haze-stage,
.delhi-effects-draft .effects-viz-placeholder {
  display: none;
}

.delhi-effects-draft .effects-text-panel {
  width: min(42vw, 700px);

  margin-left: auto;
  margin-right: 6vw;

  padding: 0;

  background: transparent;
  box-shadow: none;
}

.delhi-effects-draft .effects-text-panel .kicker {
  color: #d2a36e;
}

.delhi-effects-draft .effects-text-panel h1 {
  color: #eee6dc;
  font-size: clamp(3rem, 7vw, 5.8rem);
  line-height: 0.98;
}

.delhi-effects-draft .effects-text-panel p {
  color: rgba(238, 230, 220, 0.72);
  font-size: clamp(1.12rem, 1.55vw, 1.34rem);
  line-height: 1.6;
}

.delhi-effects-draft .effects-text-panel strong {
  color: #f5efe6;
}

/* Delhi effects dark tan backdrop */
.delhi-effects-draft {
  background: #b77940;
}

.delhi-effects-draft .effects-text-panel .kicker {
  color: #7a5232;
}

.delhi-effects-draft .effects-text-panel h1 {
  color: #252525;
}

.delhi-effects-draft .effects-text-panel p {
  color: rgba(37, 37, 37, 0.74);
}

.delhi-effects-draft .effects-text-panel strong {
  color: #111;
}

/* Delhi effects backdrop after the India Gate section */
.delhi-effects-draft {
  background: #23201c;
  color: #f4eee6;
}

.delhi-effects-draft .effects-text-panel {
  background: rgba(35, 32, 28, 0.82);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
}

.delhi-effects-draft .effects-text-panel .kicker {
  color: #d2a36e;
}

.delhi-effects-draft .effects-text-panel h1 {
  color: #f4eee6;
}

.delhi-effects-draft .effects-text-panel p {
  color: rgba(244, 238, 230, 0.78);
}

.delhi-effects-draft .effects-text-panel strong {
  color: #fff8eb;
}

/* Match Delhi effects type scale to intro problem section */
.delhi-effects-draft .effects-text-panel h1 {
  max-width: 720px;
  margin: 0 0 2.1rem;
  font-size: clamp(2.35rem, 4.6vw, 4.35rem);
  line-height: 1.07;
  letter-spacing: -0.035em;
}

.delhi-effects-draft .effects-text-panel p {
  font-size: clamp(1.15rem, 1.55vw, 1.44rem);
  line-height: 1.62;
}

.story-section {
  min-height: auto;
  padding-top: clamp(5rem, 9vw, 7.5rem);
  padding-bottom: clamp(5rem, 9vw, 7.5rem);
}

.story-section .visual-placeholder {
  margin-top: 2rem;
  padding: 1.1rem 1.2rem;
  border-left: 4px solid rgba(122, 82, 50, 0.55);
  background: rgba(37, 37, 37, 0.06);
  color: rgba(37, 37, 37, 0.66);
  font-style: italic;
}

.visual-only-section {
  padding-top: clamp(3rem, 6vw, 4.5rem);
}

.smoke-city-section.story-section {
  min-height: 100vh;
  padding: 0;
}

.closing-section {
  padding-bottom: clamp(7rem, 11vw, 10rem);
}

html,
body {
  overflow-x: clip;
}

/* Clickable article clippings around the Delhi effects text */
.article-clippings {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.article-clip {
  --rot: 0deg;
  position: absolute;
  display: grid;
  gap: 0.55rem;
  width: clamp(13.5rem, 17vw, 18.5rem);
  min-height: 12rem;
  padding: 2.25rem 1rem 1rem;
  overflow: hidden;
  border: 1px solid rgba(66, 47, 31, 0.24);
  background:
    linear-gradient(
      180deg,
      rgba(255, 252, 244, 0.96),
      rgba(246, 232, 205, 0.98)
    ),
    #f6e8cd;
  box-shadow: 0 1.1rem 2.3rem rgba(37, 37, 37, 0.18);
  color: #24221f;
  font-family: Georgia, "Times New Roman", serif;
  text-decoration: none;
  transform: rotate(var(--rot));
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease;
  pointer-events: auto;
}

.article-clip::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1.45rem;
  background:
    linear-gradient(90deg, rgba(37, 37, 37, 0.12), transparent 34%),
    var(--bar, #9f4f35);
}

.article-clip::after {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  height: 2.8rem;
  opacity: 0.34;
  background:
    linear-gradient(#8f866f 0 0) 0 0 / 100% 1px no-repeat,
    linear-gradient(#8f866f 0 0) 0 0.72rem / 86% 1px no-repeat,
    linear-gradient(#8f866f 0 0) 0 1.44rem / 94% 1px no-repeat,
    linear-gradient(#8f866f 0 0) 0 2.16rem / 68% 1px no-repeat;
}

.article-clip:hover,
.article-clip:focus-visible {
  z-index: 4;
  filter: saturate(1.08);
  box-shadow: 0 1.6rem 3rem rgba(37, 37, 37, 0.26);
  transform: translateY(-0.75rem) rotate(var(--rot)) scale(1.035);
}

.article-clip:focus-visible {
  outline: 3px solid rgba(37, 37, 37, 0.7);
  outline-offset: 5px;
}

.article-clip .clip-source {
  color: #8c5d35;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.article-clip strong {
  position: relative;
  z-index: 1;
  color: #26231f;
  font-size: clamp(1.05rem, 1.35vw, 1.36rem);
  line-height: 1.08;
}

.article-clip span:last-child {
  position: relative;
  z-index: 1;
  color: rgba(37, 37, 37, 0.68);
  font-size: 0.86rem;
  line-height: 1.32;
}

.clip-bbc {
  --bar: #111;
  --rot: -13deg;
  left: max(-2.2rem, calc(50% - 46rem));
  top: 12%;
}

.clip-cnn {
  --bar: #cf5f10;
  --rot: 9deg;
  left: max(1.5rem, calc(50% - 43rem));
  bottom: 10%;
}

.clip-chicago {
  --bar: #9b3f16;
  --rot: 8deg;
  right: max(-1.8rem, calc(50% - 46rem));
  top: 9%;
}

.clip-nyt {
  --bar: #222;
  --rot: -7deg;
  right: max(1.3rem, calc(50% - 43rem));
  bottom: 9%;
}

@media (max-width: 1120px) {
  .article-clip {
    width: clamp(11.5rem, 19vw, 15rem);
    min-height: 10.5rem;
  }
}

@media (max-width: 860px) {
  .article-clippings {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    max-width: 760px;
    margin: 2.4rem auto 0;
    pointer-events: auto;
  }

  .article-clip {
    position: relative;
    inset: auto;
    width: auto;
    min-height: 0;
    transform: none;
  }

  .article-clip:hover,
  .article-clip:focus-visible {
    transform: translateY(-0.4rem) scale(1.01);
  }
}

/* Article screenshots belong to the opening smog/problem section */
.problem-section .text-panel {
  z-index: 16;
}

.problem-section {
  min-height: max(155vh, 108rem);
}

.problem-section .article-clippings {
  position: absolute;
  top: calc(clamp(430px, 55vh, 620px) + 2.5rem);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 14;
  pointer-events: none;
}

.problem-section .article-clip {
  --rot: 0deg;
  position: absolute;
  display: block;
  width: clamp(17rem, 24vw, 28rem);
  height: clamp(13rem, 26vw, 24rem);
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  box-shadow: 0 1.4rem 2.5rem rgba(0, 0, 0, 0.24);
  transform: rotate(var(--rot));
  transform-origin: center;
  transition:
    transform 180ms ease,
    filter 180ms ease,
    box-shadow 180ms ease;
  pointer-events: auto;
}

.problem-section .article-clip::before,
.problem-section .article-clip::after {
  display: none;
}

.problem-section .article-clip img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, top center);
  border: 0;
  background: #f6eedf;
}

.problem-section .article-clip:hover,
.problem-section .article-clip:focus-visible {
  z-index: 18;
  filter: brightness(1.04) saturate(1.04);
  box-shadow: 0 1.8rem 3.2rem rgba(0, 0, 0, 0.32);
  transform: translateY(-0.8rem) rotate(var(--rot)) scale(1.025);
}

.problem-section .article-clip:focus-visible {
  outline: 3px solid rgba(238, 230, 220, 0.9);
  outline-offset: 8px;
}

.problem-section .clip-cnn {
  --rot: -15deg;
  left: clamp(-13.8rem, -8.5vw, -6rem);
  top: clamp(3.2rem, 7vh, 5.2rem);
  width: clamp(20rem, 25.5vw, 31.5rem);
  height: clamp(11.6rem, 17vw, 17rem);
}

.problem-section .clip-bbc {
  --rot: -13deg;
  left: clamp(-9.7rem, -5.5vw, -3rem);
  top: clamp(16rem, 29vh, 21.5rem);
  width: clamp(19rem, 25.5vw, 30.5rem);
  height: clamp(12.7rem, 18vw, 19rem);
}

.problem-section .clip-chicago {
  --rot: 7deg;
  right: clamp(-10.8rem, -6.5vw, -4.5rem);
  top: clamp(1rem, 4vh, 3.2rem);
  width: clamp(18rem, 23.5vw, 28.5rem);
  height: clamp(11.8rem, 16vw, 17rem);
}

.problem-section .clip-nyt {
  --rot: -5deg;
  right: clamp(-14rem, -7.8vw, -5.2rem);
  top: clamp(14.3rem, 26vh, 19.6rem);
  width: clamp(23rem, 30.5vw, 36.5rem);
  height: clamp(15.8rem, 22vw, 25rem);
}

.problem-section .clip-bbc-cap {
  --rot: 8deg;
  --pos: top left;
  left: clamp(-11.8rem, -6.8vw, -4.6rem);
  top: clamp(29rem, 52vh, 37rem);
  width: clamp(19rem, 25vw, 30rem);
  height: clamp(12.5rem, 17.5vw, 18.5rem);
}

.problem-section .clip-geo {
  --rot: -7deg;
  --pos: top center;
  left: clamp(-8.8rem, -4.6vw, -2.6rem);
  top: clamp(41rem, 72vh, 51rem);
  width: clamp(19rem, 25.5vw, 30.5rem);
  height: clamp(13rem, 18vw, 19rem);
}

.problem-section .clip-nih {
  --rot: 6deg;
  --pos: top left;
  right: clamp(-12.8rem, -7vw, -4.7rem);
  top: clamp(30rem, 53vh, 38rem);
  width: clamp(18rem, 24.5vw, 29rem);
  height: clamp(13rem, 18vw, 19rem);
}

.problem-section .clip-bbc-500 {
  --rot: -9deg;
  --pos: top center;
  right: clamp(-9.6rem, -5.2vw, -3rem);
  top: clamp(43rem, 75vh, 53rem);
  width: clamp(19rem, 25.5vw, 30.5rem);
  height: clamp(13rem, 18vw, 19rem);
}

.delhi-effects-draft .article-clippings {
  display: none;
}

@media (max-width: 1440px) {
  .problem-section {
    min-height: max(145vh, 96rem);
  }

  .problem-section .article-clip {
    width: clamp(14rem, 20vw, 22rem);
    height: clamp(9rem, 15vw, 15.5rem);
    opacity: 0.82;
  }

  .problem-section .clip-cnn,
  .problem-section .clip-bbc,
  .problem-section .clip-bbc-cap,
  .problem-section .clip-geo {
    left: clamp(-13.5rem, -9vw, -7.5rem);
  }

  .problem-section .clip-chicago,
  .problem-section .clip-nyt,
  .problem-section .clip-nih,
  .problem-section .clip-bbc-500 {
    right: clamp(-13.5rem, -9vw, -7.5rem);
  }

  .problem-section .clip-nyt {
    width: clamp(16rem, 23vw, 25rem);
    height: clamp(10rem, 16vw, 17rem);
  }
}

@media (max-width: 1250px) {
  .problem-section {
    min-height: max(132vh, 84rem);
  }

  .problem-section .article-clip {
    width: clamp(12rem, 18vw, 17rem);
    height: clamp(8rem, 13vw, 12rem);
    opacity: 0.62;
  }

  .problem-section .clip-cnn,
  .problem-section .clip-bbc,
  .problem-section .clip-bbc-cap,
  .problem-section .clip-geo {
    left: -12.5rem;
  }

  .problem-section .clip-chicago,
  .problem-section .clip-nyt,
  .problem-section .clip-nih,
  .problem-section .clip-bbc-500 {
    right: -12.5rem;
  }

  .problem-section .clip-bbc-cap,
  .problem-section .clip-geo,
  .problem-section .clip-nih,
  .problem-section .clip-bbc-500 {
    display: none;
  }
}

@media (max-width: 1050px) {
  .problem-section .article-clip {
    opacity: 0.72;
  }

  .problem-section .clip-cnn,
  .problem-section .clip-bbc,
  .problem-section .clip-bbc-cap,
  .problem-section .clip-geo {
    left: -11rem;
  }

  .problem-section .clip-chicago,
  .problem-section .clip-nyt,
  .problem-section .clip-nih,
  .problem-section .clip-bbc-500 {
    right: -11rem;
  }
}

@media (max-width: 760px) {
  .problem-section .article-clippings {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
    max-width: min(100% - 2rem, 34rem);
    margin: -4rem auto 5rem;
    pointer-events: auto;
  }

  .problem-section .article-clip {
    position: relative;
    inset: auto;
    width: auto;
    opacity: 1;
    transform: none;
  }

  .problem-section .article-clip:hover,
  .problem-section .article-clip:focus-visible {
    transform: translateY(-0.35rem) scale(1.015);
  }
}

.section-navigator {
  position: fixed;
  top: 50%;
  right: 1.15rem;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.62rem;
  padding: 0.78rem 0.42rem;
  background: rgba(43, 43, 41, 0.58);
  border: 1px solid rgba(238, 230, 220, 0.14);
  border-radius: 999px;
  box-shadow: 0 0.75rem 1.8rem rgba(0, 0, 0, 0.2);
  transform: translateY(-50%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.section-nav-item {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 0.58rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.section-nav-item::before {
  content: "";
  display: block;
  background: rgba(238, 230, 220, 0.58);
  transition:
    width 180ms ease,
    height 180ms ease,
    background-color 180ms ease,
    opacity 180ms ease,
    transform 180ms ease;
}

.section-nav-item[data-nav-type="text"]::before {
  width: 1.16rem;
  height: 0.16rem;
  border-radius: 999px;
}

.section-nav-item[data-nav-type="interaction"]::before {
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  opacity: 0.72;
}

.section-nav-item:hover::before,
.section-nav-item:focus-visible::before,
.section-nav-item.active::before {
  background: #d26f46;
  opacity: 1;
}

.section-nav-item[data-nav-type="text"]:hover::before,
.section-nav-item[data-nav-type="text"]:focus-visible::before,
.section-nav-item[data-nav-type="text"].active::before {
  width: 1.58rem;
}

.section-nav-item[data-nav-type="interaction"]:hover::before,
.section-nav-item[data-nav-type="interaction"]:focus-visible::before,
.section-nav-item[data-nav-type="interaction"].active::before {
  width: 0.54rem;
  height: 0.54rem;
}

.section-nav-item:focus-visible {
  outline: none;
}

.section-nav-label {
  position: absolute;
  right: calc(100% + 0.52rem);
  top: 50%;
  color: #eee6dc;
  background: rgba(43, 43, 41, 0.82);
  border: 1px solid rgba(238, 230, 220, 0.1);
  border-radius: 999px;
  box-shadow: 0 0.35rem 0.95rem rgba(0, 0, 0, 0.16);
  font-family: Arial, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  padding: 0.4rem 0.54rem;
  pointer-events: none;
  white-space: nowrap;
  transform: translate(0.35rem, -50%);
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

.section-nav-item:hover .section-nav-label,
.section-nav-item:focus-visible .section-nav-label {
  opacity: 1;
  transform: translate(0, -50%);
}

.github-corner-link {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 10000;
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  color: #f7f7f4;
  background: #3a3a3a;
  border-radius: 50%;
  box-shadow: 0 0.7rem 1.7rem rgba(0, 0, 0, 0.24);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
}

.github-corner-link:hover,
.github-corner-link:focus-visible {
  background: #2f2f2f;
  transform: translateY(-0.28rem);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.3);
}

.github-corner-link:focus-visible {
  outline: 3px solid rgba(247, 247, 244, 0.78);
  outline-offset: 4px;
}

.github-corner-link svg {
  width: 1.95rem;
  height: 1.95rem;
  fill: currentColor;
}

@media (max-width: 760px) {
  .github-corner-link {
    right: 0.9rem;
    bottom: 0.9rem;
    width: 3.1rem;
    height: 3.1rem;
  }

  .github-corner-link svg {
    width: 1.7rem;
    height: 1.7rem;
  }
}

@media (max-width: 900px) {
  .section-navigator {
    right: 0.65rem;
    gap: 0.54rem;
    padding: 0.7rem 0.36rem;
  }
}

@media (max-width: 760px) {
  .section-navigator {
    display: none;
  }
}

.other-sources-chart {
  width: 100%;
  max-width: 420px;
  font-family: Arial, Helvetica, sans-serif;
}

.source-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.source-label {
  font-size: 0.78rem;
  color: #f4eee6;
  text-align: right;
  letter-spacing: 0.04em;
}

.source-bar {
  height: 12px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}

.source-fill {
  height: 100%;
  border-radius: 999px;
}

.traffic {
  width: 100%;
  background: #d06451;
}

.dust {
  width: 78%;
  background: #bd914a;
}

.industry {
  width: 58%;
  background: #71544e;
}

.waste {
  width: 38%;
  background: #3f3f3f;
}

.crop {
  width: 88%;
  background: #c75c41;
}
.pollution-bars {
  width: 100%;
  max-width: 650px;
  padding-left: 2rem;
  padding-top: 2rem;
  font-family: Arial, Helvetica, sans-serif;
}

.pollution-item {
  margin-bottom: 4rem;
}

.pollution-label {
  color: #f4eee6;
  font-size: 1rem;
  letter-spacing: 0.18em;
  margin-bottom: 0.85rem;
  font-weight: 500;
}

.pollution-bar {
  height: 48px;
  position: relative;
  cursor: pointer;
  transition: transform 0.25s ease;
}

.pollution-bar:hover {
  transform: translateX(6px);
}

.traffic {
  width: 420px;
  background: #d06451;
}

.crop {
  width: 360px;
  background: #c75c41;
}

.dust {
  width: 300px;
  background: #bd914a;
}

.industry {
  width: 220px;
  background: #71544e;
}

.waste {
  width: 150px;
  background: #555555;
}

.tooltip {
  position: absolute;
  left: calc(100% + 16px);
  top: 50%;
  transform: translateY(-50%);
  width: 240px;

  background: rgba(35, 32, 28, 0.95);
  color: #f4eee6;

  padding: 0.85rem 1rem;
  border-radius: 4px;

  font-size: 0.85rem;
  line-height: 1.4;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;

  border-left: 3px solid rgba(240, 200, 154, 0.5);
}

.pollution-bar:hover .tooltip {
  opacity: 1;
}

#why-winter-makes-it-worse {
  display: grid;
  grid-template-columns: 46vw minmax(26rem, 42vw);
  align-items: center;
  gap: 4vw;
  min-height: 100vh;
}

#why-winter-makes-it-worse .pollution-bars {
  position: static;
  transform: none;
  width: 100%;
  max-width: none;
  min-width: 0;
  padding: 0;
}

#why-winter-makes-it-worse .effects-text-panel {
  width: 100%;
  max-width: 720px;
  margin: 0;

  transform: translateX(-120px);
}

/* ==========================================================
   FINAL FIRE TRANSITION FIX
   - keeps the existing SVG
   - removes the long empty fire-scroll section
   - overlaps fire on top of the farmer/chart viewport
   - plays automatically from one scroll gesture
   ========================================================== */
html.fire-scroll-locked,
body.fire-scroll-locked {
  overflow: hidden !important;
}

.farmer-window {
  position: relative;
  z-index: 1;
}

.fire-transition {
  --fire-veil: 0;
  position: relative !important;
  height: 100vh !important;
  min-height: 100vh !important;
  margin-top: -100vh !important;
  padding: 0 !important;
  z-index: 30 !important;
  overflow: hidden !important;
  pointer-events: none;
  background: transparent !important;
  color: var(--fire-ink, #252525);
  isolation: isolate;
}

.fire-transition .background-scene {
  position: absolute !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 1 !important;
  overflow: hidden !important;
  isolation: isolate;
  /* Stay invisible so the farmer section shows through until the flames ignite. */
  opacity: 0;
}

/* The tan page-background rect would paint over the farmer section, so drop it
   entirely — only the flames should ever rise. */
.fire-transition .background-scene > svg > rect {
  display: none !important;
}

.fire-transition .background-scene svg {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 1 !important;
  background: transparent !important;
}

.fire-transition .background-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: #343434;
  opacity: 0;
}

.fire-transition .flame-layer {
  transform-box: view-box;
  transform-origin: 50% 100%;
  transform: translateY(44%) scale(1, 0.72);
}

.fire-transition .fire-takeover-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transform: translateY(84%) scaleY(0.72);
  transform-origin: 50% 100%;
  background:
    radial-gradient(
      ellipse at 8% 16%,
      rgba(255, 195, 96, 0.82) 0 7%,
      transparent 17%
    ),
    radial-gradient(
      ellipse at 22% 10%,
      rgba(202, 73, 42, 0.94) 0 10%,
      transparent 22%
    ),
    radial-gradient(
      ellipse at 38% 6%,
      rgba(255, 155, 72, 0.9) 0 13%,
      transparent 25%
    ),
    radial-gradient(
      ellipse at 55% 12%,
      rgba(181, 58, 42, 0.9) 0 11%,
      transparent 23%
    ),
    radial-gradient(
      ellipse at 74% 8%,
      rgba(232, 107, 54, 0.94) 0 14%,
      transparent 27%
    ),
    radial-gradient(
      ellipse at 92% 16%,
      rgba(255, 181, 86, 0.78) 0 9%,
      transparent 21%
    ),
    linear-gradient(
      180deg,
      rgba(238, 117, 55, 0.98) 0%,
      rgba(205, 62, 38, 1) 34%,
      rgba(110, 28, 25, 1) 100%
    );
  clip-path: polygon(
    0 100%,
    0 30%,
    6% 16%,
    12% 35%,
    19% 9%,
    27% 32%,
    35% 4%,
    43% 29%,
    52% 12%,
    61% 34%,
    70% 7%,
    79% 31%,
    88% 13%,
    100% 29%,
    100% 100%
  );
}

.fire-transition > .grain {
  position: absolute !important;
  inset: 0 !important;
  height: auto !important;
  z-index: 8 !important;
}

.fire-transition.fire-armed .flame-layer,
.fire-transition.fire-armed .fire-takeover-layer,
.fire-transition.fire-armed .background-scene::after {
  will-change: transform, opacity;
}

/* Reveal the overlay only once the user ignites the takeover. */
.fire-transition.fire-armed .background-scene,
.fire-transition.fire-playing .background-scene,
.fire-transition.fire-finished .background-scene {
  opacity: 1;
}

.fire-transition.fire-playing .flame-layer {
  animation: oneScrollFlamesRise 2.2s cubic-bezier(0.33, 0, 0.2, 1) forwards;
}

.fire-transition.fire-playing .fire-takeover-layer {
  animation: oneScrollFireTakeover 2.2s cubic-bezier(0.33, 0, 0.2, 1) forwards;
}

.fire-transition.fire-playing .background-scene::after {
  animation: oneScrollFireDarken 2.2s cubic-bezier(0.33, 0, 0.2, 1) forwards;
}

.fire-transition.fire-finished .flame-layer {
  transform: translateY(-18%) scale(1.12, 3.05);
}

.fire-transition.fire-finished .fire-takeover-layer {
  opacity: 1;
  transform: translateY(0) scaleY(1.12);
}

.fire-transition.fire-finished .background-scene::after {
  opacity: 0.98;
}

/* The takeover is a one-time event. Once it has landed on the map, the fire
   overlay is dismissed entirely and the smoke-cap below takes over as the
   permanent divider between the farmer section and the map. */
.fire-transition.fire-settled {
  visibility: hidden;
}

/* Smoke divider at the farmer/map seam. It sits entirely above the seam so it
   only billows into the farmer section, never down into the map. Hidden until
   the one-time takeover has played, then it stays as the section divider for all
   later up/down scrolling. */
.fire-seam-cap {
  position: absolute;
  left: -8vw;
  right: -8vw;
  top: -10rem;
  height: 30rem;
  /* Below the sticky map (z-index 1) but, since #fire-scrolly sits above the
     farmer section, still above the farmer — so the map occludes the lower half
     and the smoke only reads in the farmer section. */
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms ease;
}

/* Solid map color (same as the map background), no shadow, so the smoke reads as
   a clean extension of the map. Wide, overlapping blobs form one continuous
   hill band instead of separate bubbles with bright gaps between them. */
.fire-seam-cap span {
  background: #343434;
  box-shadow: none;
}

.fire-seam-cap span:nth-child(1) {
  width: 52vw;
  height: 27rem;
  left: -6vw;
  top: 6rem;
}
.fire-seam-cap span:nth-child(2) {
  width: 52vw;
  height: 29rem;
  left: 20vw;
  top: 4rem;
}
.fire-seam-cap span:nth-child(3) {
  width: 52vw;
  height: 29rem;
  left: 46vw;
  top: 4rem;
}
.fire-seam-cap span:nth-child(4) {
  width: 52vw;
  height: 27rem;
  right: -6vw;
  top: 6rem;
}

.fire-seam-cap.is-revealed {
  opacity: 1;
}

.fire-scrolly {
  position: relative;
  z-index: 2;
  margin-top: 0 !important;
}

/* Full-screen veil in the map tone: held solid at the cut to the map, then
   faded out so the map section reveals in instead of hard-cutting. */
.map-reveal-veil {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: #343434;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity 750ms ease,
    visibility 0s linear 750ms;
}

.map-reveal-veil.is-covering {
  opacity: 1;
  visibility: visible;
  transition: none;
}

@keyframes oneScrollFlamesRise {
  0% {
    transform: translateY(44%) scale(1, 0.72);
  }

  100% {
    transform: translateY(-18%) scale(1.12, 3.05);
  }
}

@keyframes oneScrollFireTakeover {
  /* Only opacity has an intermediate stop, so the rising transform stays one
     continuous motion (no fast-slow-fast stutter). */
  0% {
    opacity: 0;
    transform: translateY(84%) scaleY(0.72);
  }

  22% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: translateY(0) scaleY(1.12);
  }
}

@keyframes oneScrollFireDarken {
  0%,
  58% {
    opacity: 0;
  }

  100% {
    opacity: 0.98;
  }
}

/* ── Restored health-effect columns (original design) ── */
.meaning-effects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
  gap: clamp(1.6rem, 3vw, 2.6rem);
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  text-align: left;
}
.meaning-effect {
  padding-top: 1.1rem;
  border-top: 2px solid rgba(184, 64, 32, 0.4);
}
.meaning-stat {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  font-weight: 700;
  color: #b84020;
  line-height: 1;
}
.meaning-effect h3 {
  margin: 0.6rem 0 0.5rem;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1f1c1a;
}
.meaning-effect p {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.92rem, 1.05vw, 1.02rem);
  line-height: 1.55;
  color: rgba(46, 46, 46, 0.74);
}

/* ── PM2.5 draw-to-reveal (in the meaning section, full-bleed, no card) ── */
.meaning-section .pm25-draw {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-top: clamp(3rem, 6vw, 5rem);
  padding: 0 clamp(1rem, 4vw, 4rem);
  box-sizing: border-box;
}
.pm25-draw-text {
  max-width: 56rem;
  margin: 0 auto clamp(1.6rem, 3vw, 2.6rem);
  text-align: center;
}
.pm25-draw-title {
  margin: 0 0 0.8rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  font-weight: 800;
  line-height: 1.1;
  color: #2b2620;
}
.pm25-draw-desc {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.02rem, 1.3vw, 1.2rem);
  line-height: 1.6;
  color: rgba(58, 46, 36, 0.82);
}
.pm25-draw-chart {
  width: 100%;
  max-width: 96rem;
  margin: 0 auto;
}
.pm25-draw-controls {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: clamp(1.2rem, 2.5vw, 2rem);
}
.pm25-draw-controls[hidden] {
  display: none;
}
.pm25-btn {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
}
.pm25-btn-solid {
  background: #c2541f;
  color: #fff;
  border: 0;
}
.pm25-btn-solid:hover:not(:disabled) {
  background: #a8431a;
}
.pm25-btn-solid:disabled {
  background: rgba(120, 82, 50, 0.28);
  color: rgba(255, 255, 255, 0.85);
  cursor: not-allowed;
}
.pm25-btn-ghost {
  background: transparent;
  border: 1.5px solid rgba(120, 82, 50, 0.35);
  color: #7a6450;
}
.pm25-btn-ghost:hover {
  border-color: #c2541f;
  color: #c2541f;
}

/* Health-effect cards fade + rise in on scroll (staggered). Progressive
   enhancement: .anim-ready is added by JS, so without JS they stay visible. */
.meaning-effect.anim-ready {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}
.meaning-effect.anim-ready.is-in {
  opacity: 1;
  transform: translateY(0);
}
.meaning-effect.anim-ready:nth-child(2) {
  transition-delay: 0.12s;
}
.meaning-effect.anim-ready:nth-child(3) {
  transition-delay: 0.24s;
}
.meaning-effect.anim-ready:nth-child(4) {
  transition-delay: 0.36s;
}
@media (prefers-reduced-motion: reduce) {
  .meaning-effect.anim-ready {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Generic scroll-in reveal (used for the AQI header + dashboard card). */
.scroll-reveal.anim-ready {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.85s ease,
    transform 0.85s ease;
}
.scroll-reveal.anim-ready.is-in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal.anim-ready {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* "It's not just the fires" — dark inversion scrollytelling: story steps on the
   left half, full-bleed particle viz on the right half. */
.inversion-section {
  position: relative;
  padding: 0;
  background: #383735;
  color: #ece6da;
}
.inversion-scrolly {
  position: relative;
}
/* One full-width scene: background viz + centered text overlay. */
.inversion-pinned {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
#inversion-viz {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.inversion-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.inversion-section .effects-header {
  position: absolute;
  top: clamp(2.4rem, 13vh, 10rem);
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  font-weight: 800;
  line-height: 1.04;
  color: #f5efe3;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.5);
}
.inversion-caption {
  position: absolute;
  left: clamp(1.5rem, 6vw, 6rem);
  top: 52%;
  transform: translateY(-50%);
  max-width: min(42%, 34rem);
  text-align: left;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.inversion-caption.is-shown {
  opacity: 1;
}
.inversion-caption h3 {
  margin: 0 0 0.8rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.5rem, 2.8vw, 2.3rem);
  font-weight: 700;
  color: #e6b878;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}
.inversion-caption p {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.15rem, 2.1vw, 1.9rem);
  line-height: 1.5;
  color: #f1eadd;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}
.inversion-caption b {
  color: #e6b878;
}
.inversion-caption .cap-lead {
  margin: 0 0 1.2rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  color: #f1eadd;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}
.inversion-caption .cap-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.inversion-caption .cap-li {
  margin: 0 0 0.7rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 2.3vw, 2rem);
  font-weight: 700;
  color: #e6b878;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}
.inversion-caption .cap-li.cap-new {
  animation: capFadeUp 0.6s ease both;
}
@keyframes capFadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Invisible scroll-height triggers (pulled up to overlap the pinned scene). */
.inversion-triggers {
  position: relative;
  margin-top: -100vh;
  z-index: 3;
  pointer-events: none;
}
.inversion-step {
  height: 95vh;
}
.inversion-step-tall {
  height: 165vh;
}
@media (max-width: 700px) {
  .inversion-overlay {
    padding-top: clamp(2.5rem, 12vh, 8rem);
  }
}