/* =====================================================================
   Impact pages (Framework / Report).
   New, self-contained stylesheet so the legacy impact/index.html (kept as
   a reference) and its impact.css stay untouched. Section styles are added
   here as each section is built, mirroring the house DA (kicker + title,
   alternating black/white bands, Fraunces figures on thin rules).
   ===================================================================== */

/* Shared page-top: heading left, lead right (matches the other pages) */
.ip-top .page-head { align-items: flex-start; }
.ip-top .page-head__lead { max-width: 52ch; }

/* Section heading (shared) */
.ip-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 1.3rem + 3vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.006em;
  color: var(--color-ink);
}

/* =====================================================================
   Impact Framework page. Bands alternate white / black / white / black /
   white, so the page ends light against the dark footer.
   ===================================================================== */

/* Dark bands: pure white type throughout, per the DA */
.ip-bar,
.ip-score { background: var(--color-footer); color: #fff; }
.ip-bar .ip-title,
.ip-score .ip-title { color: #fff; }

/* Shared reading size, same as .ab-lead elsewhere */
.ip-lead {
  margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem);
  max-width: 66.67%;
  font-size: var(--fs-lg);
  font-weight: 300;
  line-height: 1.6;
  color: #fff;
}
.ip-lead:last-child { margin-bottom: 0; }

/* Title to content: the DA's 96px */
.ip-bar__body,
.ip-score__body,
.ip-stages__intro,
.ip-collect__grid { margin-top: clamp(3.5rem, 7vw, 6rem); }

/* Inline link inside a paragraph: the house underline, drawn on hover */
.ip-inline-link {
  position: relative;
  color: inherit;
  text-decoration: none;
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.ip-inline-link:hover { color: inherit; background-size: 0 1px; }

/* ---- Band 3: the five stages. Same grammar as the Entry doors. ---- */
.ip-stages__intro {
  max-width: 66.67%;
  font-size: var(--fs-lg);
  font-weight: 300;
  line-height: 1.6;
  color: var(--color-text-secondary);
}
.ip-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
  margin-top: clamp(3rem, 6vw, 5rem);
}
.ip-stage__num {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(3rem, 2rem + 4vw, 5.5rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}
.ip-stage__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
.ip-stage__desc {
  margin: clamp(1rem, 2vw, 1.5rem) 0 0;
  max-width: 58ch;
  font-size: var(--fs-lg);
  font-weight: 300;
  line-height: 1.62;
  color: var(--color-text-secondary);
}

/* ---- Band 4: the SDG map. Alignment carries it, no rules. ---- */
.ip-map {
  margin-top: clamp(3.5rem, 7vw, 6rem);
  display: grid;
  gap: clamp(1.1rem, 2.2vw, 1.6rem);
}
.ip-map__row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.7fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  font-size: var(--fs-base);
  font-weight: 300;
  line-height: 1.45;
  color: #fff;
}
.ip-map__row--head {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.55);
}
.ip-map__row span:nth-child(2) { font-weight: 500; }

/* ---- Band 5: what we collect ---- */
.ip-collect__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 5vw, 4rem);
}
.ip-collect__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 1rem + 1vw, 1.7rem);
  line-height: 1.15;
  color: var(--color-ink);
}
.ip-collect__desc {
  margin: clamp(0.9rem, 2vw, 1.3rem) 0 0;
  max-width: 46ch;
  font-size: var(--fs-base);
  font-weight: 300;
  line-height: 1.6;
  color: var(--color-text-secondary);
}
.ip-collect__note {
  margin: clamp(3.5rem, 7vw, 5.5rem) 0 0;
  max-width: 66.67%;
  font-size: var(--fs-base);
  font-weight: 300;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* The limits sit apart, as a disclosure block: two thirds, muted, like the
   source notes on Overview and Risk. */
.ip-limits { margin-top: clamp(3.5rem, 7vw, 5.5rem); max-width: 66.67%; }
.ip-limits__text {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 300;
  line-height: 1.65;
  color: var(--color-muted);
}
.ip-limits__text strong { font-weight: 600; color: var(--color-ink); }
.ip-limits__cta { display: inline-block; margin-top: clamp(2rem, 4vw, 2.75rem); }

@media (max-width: 860px) {
  .ip-lead,
  .ip-stages__intro,
  .ip-collect__note,
  .ip-limits { max-width: 100%; }
  .ip-collect__grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .ip-stage { grid-template-columns: 1fr; gap: clamp(1.25rem, 4vw, 1.75rem); }
  .ip-map__row {
    grid-template-columns: 1fr;
    gap: 0.35rem;
    padding-bottom: clamp(1rem, 3vw, 1.4rem);
  }
  .ip-map__row--head { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ip-inline-link { transition: none; }
}

/* =====================================================================
   Impact Report page. White header band, then the report itself lit on a
   dark stage.
   ===================================================================== */

/* Subtitle under the page title */
.ip-sub {
  margin: clamp(0.9rem, 2vw, 1.35rem) 0 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--color-muted);
}

/* ---- The stage ---------------------------------------------------- */
.ip-grail {
  overflow: hidden;              /* the halo is wider than the page */
  padding-top: 0;                /* it follows the white header band */
}
.ip-grail__stage {
  position: relative;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: clamp(2.5rem, 6vw, 5rem);
}

/* The halo, tuned for a white band. A glow cannot brighten white, so the
   light is suggested instead: a warm wash just off-white behind the cover,
   sitting inside a soft grey bloom that keeps the white from going flat.
   It breathes very slowly, enough to feel lit rather than pasted on. */
.ip-grail__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(1150px, 155vw);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(214, 198, 160, 0.20) 0%, rgba(214, 198, 160, 0.07) 45%, rgba(214, 198, 160, 0) 72%),
    radial-gradient(closest-side, rgba(17, 17, 17, 0.05) 0%, rgba(17, 17, 17, 0.015) 55%, rgba(17, 17, 17, 0) 78%);
  animation: ip-grail-breathe 7s ease-in-out infinite;
}
@keyframes ip-grail-breathe {
  0%, 100% { opacity: 0.80; transform: translate(-50%, -50%) scale(0.97); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.03); }
}

/* On white the cover has to lift off the page: a hairline so the white
   cover keeps an edge, then two stacked shadows, one tight and one very
   wide, which is what makes an object read as floating and lit from above. */
.ip-grail__cover {
  position: relative;
  display: block;
  width: clamp(230px, 30vw, 420px);
  height: auto;
  aspect-ratio: 1240 / 1754;
  object-fit: cover;
  box-shadow:
    0 0 0 1px rgba(17, 17, 17, 0.08),
    0 8px 18px rgba(17, 17, 17, 0.06),
    0 40px 80px rgba(17, 17, 17, 0.16);
}

.ip-grail__actions {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}

/* A moving glow behind the blurred nav scrim would tile; hold it still. */
body.mega-open .ip-grail__glow { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .ip-grail__glow { animation: none; opacity: 0.9; }
}