/*
 * Allodial mission statement — GSAP progressive enhancement.
 *
 * One controller owns the section. GSAP only changes word opacity and vertical
 * position; CSS provides the static layout and reduced-motion fallback.
 */

html.mission-gsap-ready [data-leverage-story] [data-leverage-step] {
  opacity: 1 !important;
  color: rgba(248, 244, 232, 0.98) !important;
  border-color: rgba(239, 233, 218, 0.1) !important;
  filter: none !important;
  transform: none !important;
  box-shadow: none !important;
  transition: border-color 240ms ease !important;
}

html.mission-gsap-ready [data-leverage-story] .leverage-fact {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  text-shadow: none !important;
}

html.mission-gsap-ready [data-leverage-story] .mission-word {
  display: inline-block;
  white-space: nowrap;
  transform-origin: 50% 78%;
}

/* The resolved stack is intentionally cumulative: earlier statements stay
   readable while the next line comes into focus. */
html.mission-gsap-ready [data-leverage-story] .leverage-step {
  text-wrap: pretty;
}

/* Manifesto chapter ------------------------------------------------------ */

.manifesto-chapter {
  overflow: clip;
  color: var(--inverse);
  background: #0b1c1a;
  border-bottom: 1px solid rgba(239, 233, 218, 0.16);
}

.manifesto-chapter .leverage-declaration {
  border-bottom: 0;
}

.capacity-visual {
  display: grid;
  max-width: 930px;
  margin-top: 23px;
  padding-top: 17px;
  grid-template-columns: minmax(190px, 0.31fr) minmax(0, 0.69fr);
  align-items: stretch;
  gap: clamp(20px, 2.5vw, 38px);
  border-top: 1px solid rgba(239, 233, 218, 0.17);
}

.capacity-summary {
  display: flex;
  min-width: 0;
  justify-content: flex-end;
  border-right: 1px solid rgba(239, 233, 218, 0.12);
  flex-direction: column;
}

.capacity-summary strong {
  display: block;
  color: #e0b956;
  font-size: clamp(62px, 6.4vw, 96px);
  font-weight: 300;
  letter-spacing: -0.07em;
  line-height: 0.72;
}

.capacity-summary p {
  max-width: 225px;
  margin-top: 12px;
  padding-right: 22px;
  color: rgba(239, 233, 218, 0.74);
  font-size: clamp(13px, 1.1vw, 16px);
  line-height: 1.22;
}

.capacity-matrix {
  min-width: 0;
}

.capacity-matrix-head {
  display: flex;
  min-height: 20px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: rgba(239, 233, 218, 0.46);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.capacity-matrix-head b {
  color: rgba(239, 233, 218, 0.8);
  font-weight: 400;
}

.capacity-grid {
  display: grid;
  margin-top: 8px;
  grid-template-columns: repeat(20, minmax(0, 1fr));
  gap: clamp(2px, 0.28vw, 4px);
}

.capacity-grid > span {
  aspect-ratio: 1;
  background: rgba(239, 233, 218, 0.34);
  border: 1px solid rgba(239, 233, 218, 0.13);
  border-radius: 2px;
  transform: translateZ(0);
  will-change: opacity, transform;
}

.capacity-grid > .is-represented {
  background: #d8b14f;
  border-color: rgba(250, 226, 159, 0.92);
  box-shadow: 0 0 15px rgba(216, 177, 79, 0.22);
}

.capacity-key.leverage-equation {
  display: grid;
  max-width: none;
  margin-top: 11px;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 8px 18px;
  color: rgba(239, 233, 218, 0.56);
  font-size: 10px;
  letter-spacing: 0.045em;
}

.capacity-key.leverage-equation span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.capacity-key.leverage-equation i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  background: rgba(239, 233, 218, 0.28);
  border: 1px solid rgba(239, 233, 218, 0.2);
  border-radius: 1px;
}

.capacity-key.leverage-equation .capacity-key-represented i {
  background: #d8b14f;
  border-color: rgba(250, 226, 159, 0.88);
}

.capacity-key.leverage-equation b {
  color: rgba(250, 246, 234, 0.96);
  font-size: 13px;
}

.capacity-key.leverage-equation .capacity-key-unit {
  justify-self: end;
  color: rgba(239, 233, 218, 0.34);
}

/* State silhouettes remain part of the same dark thesis instead of becoming
   a detached light marketing strip. */
.manifesto-states.state-carousel {
  background:
    radial-gradient(circle at 72% 18%, rgba(84, 145, 113, 0.11), transparent 32%),
    #0b1c1a;
  border-top: 1px solid rgba(239, 233, 218, 0.13);
  border-bottom: 0;
}

.manifesto-states .state-carousel-head {
  min-height: 94px;
  border-bottom-color: rgba(239, 233, 218, 0.12);
}

.manifesto-states .state-carousel-head p {
  color: rgba(239, 233, 218, 0.68);
  font-size: clamp(15px, 1.55vw, 20px);
}

.manifesto-states .state-carousel-head strong {
  color: #f2ecdd;
  font-weight: 400;
}

.manifesto-states .state-carousel-head > span {
  color: #d8b14f;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.manifesto-states .state-marquee {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-color: rgba(216, 177, 79, 0.44) rgba(239, 233, 218, 0.06);
  scrollbar-width: thin;
}

.manifesto-states .state-marquee:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(216, 177, 79, 0.72);
}

.manifesto-states .state-marquee::before {
  background: linear-gradient(90deg, #0b1c1a, transparent);
}

.manifesto-states .state-marquee::after {
  background: linear-gradient(-90deg, #0b1c1a, transparent);
}

.manifesto-states .state-marquee li {
  color: rgba(247, 241, 226, 0.94);
  background: rgba(239, 233, 218, 0.035);
  border-color: rgba(239, 233, 218, 0.13);
  scroll-snap-align: start;
}

.manifesto-states .state-marquee li::after {
  background: linear-gradient(90deg, #d8b14f, rgba(216, 177, 79, 0.06));
}

.manifesto-states .state-marquee img {
  opacity: 0.9;
  filter: invert(92%) sepia(8%) saturate(421%) hue-rotate(349deg) brightness(102%) contrast(88%);
}

.manifesto-states .state-marquee b {
  color: #d8b14f;
}

@media (max-width: 720px) {
  html.mission-gsap-ready [data-leverage-story] [data-leverage-step] {
    color: rgba(248, 244, 232, 0.96) !important;
  }

  .capacity-visual {
    margin-top: 17px;
    padding-top: 13px;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 13px;
  }

  .capacity-summary strong {
    font-size: 57px;
  }

  .capacity-summary p {
    margin-top: 8px;
    padding-right: 10px;
    font-size: 11px;
  }

  .capacity-matrix-head {
    font-size: 10px;
  }

  .capacity-grid {
    gap: 2px;
  }

  .capacity-key.leverage-equation {
    margin-top: 8px;
    grid-template-columns: 1fr 1fr;
    gap: 6px 8px;
    font-size: 10px;
  }

  .capacity-key.leverage-equation span {
    align-items: flex-start;
    white-space: normal;
  }

  .capacity-key.leverage-equation b {
    font-size: 11px;
  }

  .capacity-key.leverage-equation .capacity-key-unit {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .manifesto-states .state-carousel-head {
    min-height: 82px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.mission-gsap-ready [data-leverage-story] [data-leverage-step],
  html.mission-gsap-ready [data-leverage-story] .leverage-fact,
  html.mission-gsap-ready [data-leverage-story] .leverage-fact > strong,
  html.mission-gsap-ready [data-leverage-story] .leverage-equation > *,
  html.mission-gsap-ready [data-leverage-story] .leverage-method,
  html.mission-gsap-ready [data-leverage-story] .mission-word {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }

  .capacity-grid > span {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .manifesto-states .state-marquee {
    overflow-x: auto;
    scroll-snap-type: inline proximity;
  }

  .manifesto-states .state-marquee-track {
    animation: none !important;
    transform: none !important;
  }
}

/* Manifesto chapter, light ------------------------------------------------
 *
 * The chapter was built dark and lit its lines by raising them from near-black
 * to near-white. Light inverts that: the resting state is a soft green that is
 * already readable, the resolved state is full ink, and the thing that actually
 * "lights up" is the gold on the phrase that carries the claim.
 *
 * This block overrides rather than edits the originals because the dark rules
 * are spread across styles.css and this file, and keeping the light treatment
 * in one place makes it one thing to read and one thing to revert.
 */

.manifesto-chapter {
  color: var(--ink);
  background: var(--canvas);
  border-bottom: 1px solid var(--line-strong);
}

.manifesto-chapter .leverage-declaration {
  color: var(--ink);
  background: var(--canvas);
  border-top: 1px solid var(--line);
}

.manifesto-chapter .leverage-sticky::before {
  background:
    radial-gradient(circle at 76% 46%, rgba(84, 145, 113, 0.09), transparent 32%),
    radial-gradient(circle at 26% 84%, rgba(181, 138, 42, 0.08), transparent 30%),
    linear-gradient(120deg, #fcfbf6 0%, #f1f4ee 56%, #faf8f1 100%);
}

/* The state map was a light shape knocked out of a dark field. On a light
   field it has to run the other way: no inversion, and a scrim in the canvas
   colour instead of the night colour. */
.manifesto-chapter .leverage-state-map img {
  opacity: 0.3;
  filter: none;
}

.manifesto-chapter .leverage-state-map::before {
  background: linear-gradient(90deg, var(--canvas) 0%, rgba(252, 251, 246, 0.9) 24%, rgba(252, 251, 246, 0.2) 64%, rgba(252, 251, 246, 0.12) 100%);
}

.manifesto-chapter .leverage-index {
  color: var(--subtle);
}

.manifesto-chapter .leverage-index b {
  color: rgba(115, 128, 120, 0.62);
}

.manifesto-chapter .leverage-label {
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line-strong);
}

/* Resting lines sit at a readable green rather than a whisper — on a light
   field, 0.26 opacity ink is illegible rather than merely quiet. */
.manifesto-chapter .leverage-step {
  color: rgba(79, 98, 89, 0.42);
}

.manifesto-chapter .leverage-step.is-leverage-current {
  color: var(--ink);
}

.manifesto-chapter .leverage-step.is-leverage-complete {
  color: rgba(48, 75, 70, 0.72);
}

/* The GSAP path sets its resolved colour inline with !important, so the light
   value has to be stated at the same weight or the dark one wins. */
html.mission-gsap-ready .manifesto-chapter [data-leverage-story] [data-leverage-step] {
  color: var(--ink) !important;
  border-color: rgba(48, 75, 70, 0.12) !important;
}

/* The gold phrase. This is the element that lights up: it stays gold at every
   stage of the reveal, so as a line resolves the claim inside it is what the
   eye lands on first. */
.manifesto-chapter .leverage-step .lit {
  color: var(--gold);
  font-weight: 400;
  transition: color 240ms ease;
}

.manifesto-chapter .leverage-step.is-leverage-current .lit,
html.mission-gsap-ready .manifesto-chapter [data-leverage-step] .lit {
  color: var(--gold-dark) !important;
}

/* Capacity visual ------------------------------------------------------- */

.manifesto-chapter .capacity-visual {
  border-top: 1px solid var(--line-strong);
}

.manifesto-chapter .capacity-summary {
  border-right: 1px solid var(--line);
}

.manifesto-chapter .capacity-summary strong {
  color: var(--gold-dark);
}

.manifesto-chapter .capacity-summary p {
  color: var(--muted);
}

.manifesto-chapter .capacity-matrix-head {
  color: var(--subtle);
}

.manifesto-chapter .capacity-matrix-head b {
  color: var(--ink-2);
}

/* Unrepresented parcels read as empty tiles on paper, represented ones as
   solid gold — the same figure/ground relationship the dark version had, with
   the values swapped rather than the meaning. */
.manifesto-chapter .capacity-grid > span {
  background: rgba(48, 75, 70, 0.07);
  border: 1px solid rgba(48, 75, 70, 0.09);
}

.manifesto-chapter .capacity-grid > .is-represented {
  background: var(--gold);
  border-color: var(--gold-dark);
  box-shadow: 0 0 12px rgba(181, 138, 42, 0.28);
}

.manifesto-chapter .capacity-foot,
.manifesto-chapter .capacity-visual small,
.manifesto-chapter .leverage-fact small {
  color: var(--subtle);
}

/* Capacity legend + method note, light. These sat at 0.34–0.56 alpha of the
   inverse cream, which on paper resolves to nearly nothing. */
.manifesto-chapter .capacity-key.leverage-equation {
  color: var(--muted);
}

.manifesto-chapter .capacity-key.leverage-equation i {
  background: rgba(48, 75, 70, 0.1);
  border: 1px solid rgba(48, 75, 70, 0.16);
}

.manifesto-chapter .capacity-key.leverage-equation .capacity-key-represented i {
  background: var(--gold);
  border-color: var(--gold-dark);
}

.manifesto-chapter .capacity-key.leverage-equation b {
  color: var(--ink);
}

.manifesto-chapter .capacity-key.leverage-equation .capacity-key-unit {
  color: var(--subtle);
}

.manifesto-chapter .leverage-method {
  color: var(--subtle);
}

/* State silhouettes follow the chapter. Leaving this band dark would have put
   a hard black bar in the middle of a section that is now paper, reading as a
   different page rather than the same argument continuing. */
.manifesto-chapter .manifesto-states.state-carousel {
  background:
    radial-gradient(circle at 72% 18%, rgba(84, 145, 113, 0.07), transparent 34%),
    var(--sage);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.manifesto-chapter .manifesto-states .state-carousel-head {
  border-bottom-color: var(--line);
}

.manifesto-chapter .manifesto-states .state-carousel-head p {
  color: var(--muted);
}

.manifesto-chapter .manifesto-states .state-carousel-head strong {
  color: var(--ink);
}

.manifesto-chapter .manifesto-states .state-carousel-head > span {
  color: var(--gold-dark);
}

.manifesto-chapter .manifesto-states .state-marquee {
  scrollbar-color: rgba(181, 138, 42, 0.5) rgba(48, 75, 70, 0.07);
}

.manifesto-chapter .manifesto-states .state-marquee::before {
  background: linear-gradient(90deg, var(--sage), transparent);
}

.manifesto-chapter .manifesto-states .state-marquee::after {
  background: linear-gradient(-90deg, var(--sage), transparent);
}

.manifesto-chapter .manifesto-states .state-marquee li {
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.6);
  border-color: var(--line);
}

.manifesto-chapter .manifesto-states .state-marquee li::after {
  background: linear-gradient(90deg, var(--gold), rgba(181, 138, 42, 0.08));
}

/* The silhouettes are dark strokes on a transparent ground, so on paper they
   need no filter at all — the invert existed only to lift them off the night. */
.manifesto-chapter .manifesto-states .state-marquee img {
  opacity: 0.72;
  filter: none;
}

.manifesto-chapter .manifesto-states .state-marquee b {
  color: var(--gold-dark);
}