/* ==========================================================================
   Version 3 — trail-led, with giving carried through the page
   Loads after site.css and v2.css. Reuses the meter, give panel, and tiers.
   ========================================================================== */

/* ---------- Status bar: trail conditions and the fund on one strip ---------- */
.statusbar {
  background: linear-gradient(to bottom,
    color-mix(in oklch, var(--lake-pale) 60%, var(--paper)),
    color-mix(in oklch, var(--lake-pale) 32%, var(--paper)));
  border-top: 1px solid color-mix(in oklch, var(--lake) 32%, transparent);
  font-size: var(--step--1);
}
.statusbar__inner {
  display: grid; gap: 0.4rem 1.5rem;
  padding-block: 0.5rem;
}
.statusbar__trail {
  display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;
  color: color-mix(in oklch, var(--ink) 88%, var(--lake));
}
.statusbar__trail strong { font-weight: 700; }
.statusbar__detail { color: color-mix(in oklch, var(--ink) 74%, var(--lake)); }

.statusbar__fund {
  display: grid; gap: 0.35rem 0.75rem; align-items: center;
  grid-template-columns: auto minmax(4rem, 9rem) auto auto;
}
.statusbar__fundlabel {
  font-size: var(--step--2); font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: color-mix(in oklch, var(--ink) 76%, var(--lake));
  white-space: nowrap;
}
.statusbar .meter__track { height: 0.5rem; width: 100%; }
.statusbar__figure {
  display: flex; align-items: baseline; gap: 0.35rem; white-space: nowrap;
  font-size: var(--step--2); color: var(--ink-soft);
}
.statusbar__figure b {
  font-family: var(--display); font-size: var(--step-0); font-weight: 700;
  letter-spacing: -0.015em; color: var(--ink); font-variant-numeric: tabular-nums;
}
/* Donate action in the strip. Goes straight to CanadaHelps. */
.chips { display: flex; align-items: center; gap: 0.3rem; }
.chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
  min-height: 1.85rem; padding: 0.2rem 0.7rem;
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  font-size: var(--step--2); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.chip:hover { background: var(--blaze); border-color: var(--blaze-deep); color: var(--spruce-deep); }
.chip__arrow { transition: transform 0.25s var(--ease); }
.chip:hover .chip__arrow { transform: translateX(3px); }

/* ---------- Support band ---------- */
.support-mid { background: var(--paper-deep); border-block: 1px solid var(--line); }
.support-mid__grid { display: grid; gap: clamp(1.75rem, 1rem + 2.6vw, 3rem); align-items: start; }
.support-mid .give__title { font-family: var(--display); font-size: var(--step-1); font-weight: 620; }

/* The fund repeated at the point of decision, not just in the masthead. */
.give__fund {
  display: grid; gap: 0.4rem;
  padding-block: var(--space-sm);
  border-block: 1px solid var(--line);
}
.give__fundhead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); }
.give__fundhead span {
  font-size: var(--step--2); font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-soft);
}
.give__fundhead b {
  font-family: var(--display); font-size: var(--step-2); font-weight: 700;
  letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums;
}
.give .meter__track { grid-column: auto; order: 0; height: 0.7rem; width: 100%; }
.give__fundfoot { font-size: var(--step--2); color: var(--ink-soft); }

.ways { display: grid; gap: 1px; background: var(--line-strong); border: 1px solid var(--line-strong); }
.way {
  background: var(--paper); padding: clamp(1.15rem, 0.9rem + 1.2vw, 1.75rem);
  display: grid; align-content: start; gap: 0.4rem;
}
.way__tag {
  font-size: var(--step--2); font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--ink-faint);
}
.way__title { font-family: var(--display); font-size: var(--step-1); font-weight: 620; letter-spacing: -0.015em; }
.way__price {
  font-size: var(--step--1) !important; font-weight: 700;
  color: var(--ink) !important; font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.way p { font-size: var(--step--1); line-height: 1.55; color: var(--ink-soft); max-width: 46ch; }
.way .link-arrow { margin-top: var(--space-xs); justify-self: start; }

/* Completed phases recede. The open ask carries the accent, because it is the one
   thing on this list that still needs something from the reader. */
.phases li:not(.phases__open) .phases__cost { color: var(--paper); }
.phases__open { position: relative; }
.phases__open .phases__year,
.phases__open .phases__cost { color: var(--blaze); }
.phases__open .phases__what { color: var(--paper); }

.steward__handoff {
  margin-top: clamp(2rem, 1.2rem + 2.4vw, 3rem);
  padding-top: var(--space-lg);
  border-top: 1px solid color-mix(in oklch, var(--paper) 20%, transparent);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-md) var(--space-xl);
}
.steward__handoff-text {
  font-family: var(--display); font-size: var(--step-1); font-weight: 500;
  font-style: italic; line-height: 1.3; letter-spacing: -0.01em;
  color: var(--paper); max-width: 34ch;
}

/* ---------- Partners, condensed to two tiers ----------
   Darker ground than the stewardship band, and no contour texture, so the offer
   reads as a different surface rather than a reprise of the proof. */
.v3 .partners { background: var(--spruce-deep); }
.v3 .partners .topo { display: none; }
.v3 .partners .tier { background: var(--spruce); }
.v3 .partners .tier--lead { background: color-mix(in oklch, var(--spruce) 74%, var(--moss)); }
.v3 .partners .tier--lead .tier__list li::before { background: var(--blaze); }

/* Both tiers stay full height. The hairline gap between them is the container
   showing through, so a short box would leave a stray band of it exposed.
   The balance comes from matched content instead. */

.credibility--light { border-top-color: color-mix(in oklch, var(--paper) 22%, transparent); }
.credibility--light .credibility__label { color: color-mix(in oklch, var(--paper) 58%, var(--spruce)); }
.credibility--light .credibility__list li { color: var(--paper); }
.credibility--light .credibility__list li + li::before { background: color-mix(in oklch, var(--paper) 26%, transparent); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (min-width: 40rem) {
  .ways { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 52rem) {
  .statusbar__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

@media (min-width: 62rem) {
  .support-mid__grid { grid-template-columns: minmax(21rem, 0.8fr) minmax(0, 1.2fr); }
  .ways { grid-template-columns: 1fr; }
  .tiers--pair { grid-template-columns: repeat(2, 1fr); }

  /* Rhythm by role. Reference material runs tight; the proof section and the ask
     get the most air, so the page has a peak instead of a run of equal slabs. */
  .trail, .prepare, .partners { padding-block: clamp(3rem, 1.5rem + 4.5vw, 5.5rem); }
  .steward { padding-block: clamp(4rem, 2rem + 7vw, 9rem); }
}

/* ---- Status strip on small screens: two rows, never three ---- */
@media (max-width: 51.9375rem) {
  .statusbar__inner { gap: 0.35rem; padding-block: 0.4rem; }

  .statusbar__trail {
    display: grid; grid-template-columns: auto auto 1fr; align-items: baseline;
    gap: 0 0.4rem; font-size: var(--step--2);
  }
  .statusbar__detail {
    grid-column: 3; justify-self: start;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .statusbar__trail .conditions__dot { align-self: center; }

  /* Figure, bar, and action on one line, so the bar reads as a meter belonging to
     the number beside it rather than as a rule under the strip. */
  .statusbar__fund {
    grid-template-columns: auto minmax(3.5rem, 1fr) auto;
    gap: 0.5rem;
  }
  .statusbar__fundlabel { display: none; }
  /* Placed on one line: figure, meter, action. v2.css spans the track across every
     column below 52rem, which suits the v2 masthead and breaks this one, so both
     the column and the row are stated outright. */
  .statusbar__figure       { grid-area: 1 / 1; order: 0; }
  .statusbar .meter__track { grid-area: 1 / 2; order: 0; height: 0.7rem; align-self: center; }
  .statusbar .chips        { grid-area: 1 / 3; order: 0; }
}

/* Phone. The conditions detail and the preset chips drop, so trail status and the
   fund figure share the top line and the meter runs the full width beneath it. */
@media (max-width: 26rem) {
  .statusbar__detail { display: none; }

  .statusbar__inner { grid-template-columns: 1fr auto; gap: 0.3rem 0.6rem; }
  .statusbar__fund { display: contents; }
  .statusbar__trail        { grid-area: 1 / 1; }
  .statusbar__figure       { grid-area: 1 / 2; justify-self: end; }
  .statusbar .meter__track { grid-area: 2 / 1; }
  .statusbar .chips        { grid-area: 2 / 2; }
}