/* ============================================================
   pages.css — home sections + shared subpage patterns
   ============================================================ */

/* ============================================================
   §2 THE MANIFESTO — asymmetric. Margin note cols 1–3, body 5–11.
   ============================================================ */
.manifesto { position: relative; }
.manifesto__note {
  grid-column: 1 / -1;
  color: var(--lichen);
  line-height: 2.1;
  margin-bottom: calc(var(--tile) * 1.5);
}
.manifesto__note .rule {
  display: block;
  width: 48px;
  border-top: 1px solid var(--rule-dark);
  margin-block: 10px;
}
.manifesto__body { grid-column: 1 / -1; }
.manifesto__body p {
  font-size: var(--lede);
  line-height: 1.45;
  color: var(--chalk);
  max-width: 60ch;
}
.manifesto__body p + p { margin-top: 1.2em; }
.manifesto__body strong { font-weight: 600; }

@media (min-width: 900px) {
  .manifesto__note {
    grid-column: 1 / 4;
    align-self: center;
    margin-bottom: 0;
  }
  .manifesto__body { grid-column: 5 / 12; }
}

/* ============================================================
   §3 THE STRATA — a field plate of the forest that plants itself
   on scroll: soil → shrub → sub-tree → tree → canopy.
   Pinned + scrubbed on desktop, plays once on approach on mobile.
   ============================================================ */
.strata-section { overflow: clip; }
.strata { align-items: center; }
.strata__copy { grid-column: 1 / -1; }
.strata__copy .h2 { margin-block: 16px 20px; max-width: 16ch; }
.strata__copy p { color: var(--text-on-dark-mute); }
.strata__copy p sup { color: var(--lichen); font-size: .7em; }
.strata__copy .footnote { margin-top: calc(var(--tile) * 1.5); }

.strata-facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: calc(var(--tile) * 1.25) 0 0;
}
.strata-facts li {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lichen);
  border: 1px dashed var(--rule-dark);
  border-radius: var(--radius-tile);
  padding: 9px 14px;
}

.strata__credit {
  margin-top: calc(var(--tile) * 1.25);
  font-size: var(--small);
  line-height: 1.6;
  max-width: 46ch;
}
.strata__credit strong { color: var(--chalk); font-weight: 600; }

.strata__diagram {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: calc(var(--tile) * 2);
}
@media (min-width: 900px) {
  .strata__copy { grid-column: 1 / 6; }
  .strata__diagram { grid-column: 7 / 13; margin-top: 0; }
}

.strata-plate { position: relative; }
.strata-plate__svg { display: block; width: 100%; height: auto; }

/* layer labels — field-plate annotations pinned to each stratum's band */
.strata-label {
  position: absolute;
  left: 76%;
  top: var(--label-y);
  transform: translateY(-50%);
  width: 22.5%;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--chalk);
  line-height: 1.35;
}
.strata-label::before {
  content: '';
  position: absolute;
  right: 100%;
  margin-right: 9px;
  top: .55em;
  width: 24px;
  border-top: 1px dashed rgba(168, 181, 162, .45);
}
.strata-label small {
  display: block;
  font-size: .6563rem;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: none;
  color: var(--lichen);
  margin-top: 4px;
}
@media (max-width: 519px) {
  .strata-label { font-size: .625rem; letter-spacing: .1em; }
  .strata-label small { display: none; }
  .strata-label::before { width: 14px; margin-right: 6px; }
}

/* the emergent crowns keep moving once grown — barely */
.strata-plate__svg .crown {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .strata-plate__svg #g-canopy .plant:first-of-type .crown {
    animation: strata-sway 9s var(--ease-in-out) infinite alternate;
  }
  .strata-plate__svg #g-canopy .plant:last-of-type .crown {
    animation: strata-sway 12s var(--ease-in-out) -4s infinite alternate;
  }
}
@keyframes strata-sway {
  from { transform: rotate(-.5deg); }
  to   { transform: rotate(.65deg); }
}

.strata__ground {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lichen);
  opacity: .7;
}

/* ============================================================
   §4 SEATS OF HOPE — horizontal rail
   ============================================================ */
.seats-section { overflow: clip; }
.seats-head { margin-bottom: calc(var(--tile) * 2); }
.seats-head .h2 { margin-block: 16px 20px; max-width: 18ch; }
.seats-head .lede { color: var(--text-on-dark-mute); max-width: 56ch; }

.seats-track {
  display: flex;
  gap: clamp(20px, 3vw, 48px);
  padding-inline: var(--pad-x);
  /* no width:max-content — mobile Chrome expands the layout viewport for it */
}
.seat-card {
  width: min(72vw, 560px);
  flex: 0 0 auto;
}
.seat-card .photo img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}
.seat-card .specimen { margin-top: 20px; }

/* the empty fifth slot — the corporate ask, no adjectives */
.seat-card--empty {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px dashed var(--rule-dark);
  border-radius: var(--radius-card);
  padding: clamp(24px, 3vw, 40px);
  min-height: 420px;
}
.seat-card--empty .specimen { border-top: none; padding-top: 0; }
.seat-card--empty .seat-empty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px;
}

/* the rail is a native scroll container by default (mobile-first, and the
   no-JS fallback on desktop); motion.js switches it to a pinned GSAP rail */
.seats-rail {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.seats-rail::-webkit-scrollbar { display: none; }
.seats-rail--pinned { overflow: visible; scroll-snap-type: none; }

.seats-scroll-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-inline: var(--pad-x);
  font-family: var(--font-mono);
  font-size: var(--label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lichen);
}
@media (max-width: 899px) {
  .seat-card { width: 88vw; scroll-snap-align: center; }
}
@media (min-width: 900px) {
  .seats-scroll-hint { display: none; }

  /*
    Pin math: GSAP locks the section at `top top`. The section MUST fit in
    one viewport or the cards clip under the fold.
    Budget @ 900px vh: header 76 + head ≤ ~160 + rail fills the rest + pad-b.
  */
  .seats-section {
    box-sizing: border-box;
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    padding-block: 0;
    padding-top: 76px; /* clear fixed header */
    padding-bottom: clamp(16px, 2.5vh, 32px);
    display: flex;
    flex-direction: column;
  }
  .seats-head {
    flex: 0 0 auto;
    margin-bottom: clamp(8px, 1.6vh, 20px);
  }
  .seats-head .h2 {
    margin-block: 6px 8px;
    font-size: clamp(1.625rem, 1.1rem + 1.5vw, 2.25rem);
    line-height: 1.12;
  }
  .seats-head .lede {
    font-size: var(--small);
    line-height: 1.45;
    max-width: 62ch;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .seats-rail {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: stretch;
  }
  .seats-track {
    width: 100%;
    align-items: stretch;
    height: 100%;
  }
  .seat-card {
    width: min(42vw, 400px);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .seat-card .photo {
    flex: 1 1 auto;
    min-height: 0;
    max-height: calc(100% - 9.5rem); /* leave room for specimen */
    overflow: hidden;
    border-radius: var(--radius-card);
  }
  .seat-card .photo picture,
  .seat-card .photo img {
    display: block;
    width: 100%;
    height: 100%;
  }
  .seat-card .photo img {
    aspect-ratio: auto;
    max-height: none;
    object-fit: cover;
  }
  .seat-card .specimen {
    flex: 0 0 auto;
    margin-top: 10px;
    gap: 2px;
    font-size: .75rem;
    padding-top: 10px;
  }
  .seat-card .specimen__name {
    font-size: clamp(1.125rem, 0.9rem + 0.8vw, 1.375rem);
    line-height: 1.15;
  }
  .seat-card .specimen__quote {
    font-size: .9375rem;
    padding-top: 8px;
    margin-top: 4px;
    /* keep the quote to one line so the card never blows the vh budget */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .seat-card--empty {
    min-height: 0;
    max-height: 100%;
    height: auto;
    justify-content: center;
  }
}

/* ============================================================
   §5 URBAN TO WILD — the light register. Turning a page.
   ============================================================ */
.utw-head { max-width: 60ch; }
.utw-head .h2 { margin-block: 16px 20px; max-width: 20ch; }
.utw-head .lede { color: var(--text-on-light-mute); }

.utw-steps {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block: calc(var(--tile) * 2.5);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(.75rem, 1.6vw, 1rem);
  letter-spacing: .18em;
  color: var(--ink-deep);
  flex-wrap: wrap;
}
.utw-steps .dash {
  flex: 1 1 30px;
  min-width: 24px;
  border-top: 1px solid var(--rule-light);
}

.utw-cards { align-items: stretch; }
.utw-card {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  background: var(--chalk);
  border-radius: var(--radius-card);
  overflow: hidden;
}
@media (min-width: 900px) {
  .utw-card { grid-column: span 4; }
}
.utw-card .photo img { aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0; }

/* the Uganda card — a small field print pinned to the survey board.
   The archive photo is low-res; shown at print size it reads as a
   snapshot from the field, not a broken hero. */
.utw-card__mount {
  margin: 0;
  aspect-ratio: 3 / 2;
  display: grid;
  place-items: center;
  padding: 20px;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 11px,
      rgba(6, 24, 28, .06) 11px,
      rgba(6, 24, 28, .06) 12px
    ),
    var(--limestone);
  border-bottom: 1px dashed var(--rule-light);
}
.fieldprint {
  width: min(68%, 300px);
  background: var(--chalk);
  padding: 9px 9px 30px;
  border-radius: 3px;
  box-shadow:
    0 1px 2px rgba(6, 24, 28, .18),
    0 10px 26px rgba(6, 24, 28, .18);
  transform: rotate(-2.2deg);
  position: relative;
  transition: transform var(--dur-med) var(--ease-out);
}
.utw-card--field:hover .fieldprint { transform: rotate(-.4deg) scale(1.02); }
.fieldprint img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 1px;
}
.fieldprint__label {
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 9px;
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .5625rem;
  letter-spacing: .13em;
  color: var(--text-on-light-mute);
  white-space: nowrap;
  overflow: hidden;
}
@media (max-width: 899px) {
  .fieldprint { width: min(76%, 300px); }
  .fieldprint__label { font-size: .5rem; letter-spacing: .1em; }
}
.utw-card__body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.utw-card__body .eyebrow { color: var(--text-on-light-mute); }
.utw-card__body h3 { font-size: 1.125rem; }
.utw-card__body p { font-size: var(--small); color: var(--text-on-light-mute); line-height: 1.55; }
.utw-card__body .link { margin-top: auto; padding-top: 12px; font-size: var(--small); font-weight: 500; }

/* ============================================================
   §6 PARTNERS — quiet
   ============================================================ */
.partners-section .eyebrow { margin-bottom: calc(var(--tile) * 1.5); }

/* ============================================================
   §7 THE ASK — the inline donation module
   ============================================================ */
.ask-head .h2 { max-width: 16ch; margin-bottom: 16px; }
.ask-head .lede { color: var(--text-on-dark-mute); max-width: 44ch; }

.donation-module {
  margin-top: calc(var(--tile) * 2);
  max-width: 640px;
}

.freq-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-bottom: 20px;
}
.freq-toggle button {
  padding: 16px;
  background: transparent;
  border: none;
  color: var(--lichen);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--label);
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.freq-toggle button.is-active {
  background: var(--candytuft);
  color: var(--ink-deep);
}

.tier-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
/* UA [hidden] loses to display:grid — must re-assert for freq toggle */
.tier-grid[hidden] { display: none; }
@media (min-width: 900px) {
  .tier-grid { grid-template-columns: repeat(4, 1fr); }
}
.tier-grid label { cursor: pointer; position: relative; display: block; }
.tier-grid input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tier-grid .tier-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 14px;
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius-card);
  text-align: center;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  min-height: 84px;
  justify-content: center;
}
.tier-grid .tier-amount {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 60, 'WONK' 1;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
}
.tier-grid .tier-what {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lichen);
}
.tier-grid input:checked + .tier-box {
  border-color: var(--candytuft);
  background: rgba(196, 115, 155, .1);
}
.tier-grid input:checked + .tier-box .tier-what { color: var(--chalk); }
.tier-grid input:focus-visible + .tier-box {
  outline: 2px solid var(--gorse);
  outline-offset: 3px;
}

.tier-other {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius-card);
  padding: 4px 4px 4px 18px;
}
.tier-other span {
  font-family: var(--font-mono);
  font-size: var(--label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lichen);
  white-space: nowrap;
}
.tier-other input {
  flex: 1;
  min-width: 60px;
  background: transparent;
  border: none;
  color: var(--chalk);
  padding: 12px 8px;
  font-size: 1.125rem;
}
.tier-other input:focus { outline: none; }
.tier-other input:focus-visible {
  outline: 2px solid var(--gorse);
  outline-offset: 3px;
}
.tier-other:focus-within { border-color: var(--candytuft); }

.donation-outcome {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--label);
  letter-spacing: .12em;
  color: var(--gorse);
  min-height: 1.4em;
  margin-block: 18px 22px;
}

.donation-module .btn--primary {
  width: 100%;
  min-height: 56px;
  font-size: 1.0625rem;
}
.donation-module__fine {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .06em;
  color: var(--lichen);
  text-align: center;
}

/* the ask: mosaic anchor beside the module on desktop */
.ask-grid { align-items: start; }
.ask-grid > .ask-col-form { grid-column: 1 / -1; }
.ask-grid > .ask-col-mosaic { grid-column: 1 / -1; margin-top: calc(var(--tile) * 2); }
@media (min-width: 900px) {
  .ask-grid > .ask-col-form { grid-column: 1 / 7; }
  .ask-grid > .ask-col-mosaic { grid-column: 8 / 13; margin-top: 0; position: sticky; top: 100px; }
}
.ask-col-mosaic .milestone { margin-top: 18px; }

/* ============================================================
   SHARED SUBPAGE PATTERNS
   ============================================================ */

/* page hero (non-mosaic pages) */
.page-hero {
  padding-top: calc(76px + var(--space-section) * .7);
  padding-bottom: calc(var(--space-section) * .5);
}
.page-hero .eyebrow { margin-bottom: 20px; }
.page-hero h1 {
  font-size: var(--display-l);
  line-height: 1.02;
  max-width: 16ch;
}
.page-hero .lede {
  margin-top: 24px;
  color: var(--text-on-dark-mute);
  max-width: 52ch;
}
.surface-light .page-hero .lede { color: var(--text-on-light-mute); }

/* full-bleed photo hero */
.photo-hero {
  position: relative;
  min-height: 72svh;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}
.photo-hero__img { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.photo-hero__img img { width: 100%; height: 100%; object-fit: cover; }
.photo-hero__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6,24,28,.88) 0%, rgba(6,24,28,.28) 55%, rgba(6,24,28,.42) 100%);
}
.photo-hero__content {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: calc(var(--space-section) * .9) var(--pad-x) calc(var(--tile) * 3);
  color: var(--chalk);
}
.photo-hero h1 { max-width: 14ch; }
.photo-hero .lede { margin-top: 20px; color: rgba(237,238,234,.85); max-width: 46ch; }
.photo-hero .eyebrow { margin-bottom: 20px; color: var(--lichen); }