/* ============================================================
   pages-give.css — support.html, donate.html, thank-you.html
   The giving pages. Page-specific styles only; the design
   system lives in tokens/base/layout/components/mosaic/pages.
   ============================================================ */

/* ============================================================
   SHARED — spec §11: on mobile the Give CTA is the sticky
   bottom bar; the header pill is desktop-only (it overflows
   the 375px header and covers the brand).
   ============================================================ */
@media (max-width: 899px) {
  .site-header .btn-give { display: none; }
}

/* the inactive tier group must actually hide: the shared
   `.tier-grid { display:grid }` beats the UA [hidden] rule */
.tier-grid[hidden] { display: none; }

/* ============================================================
   SUPPORT — hero: one product, four ways. Price list as index.
   ============================================================ */
.support-hero {
  padding-top: calc(76px + var(--space-section) * .55);
  padding-bottom: calc(var(--space-section) * .6);
}
.support-hero__copy { grid-column: 1 / -1; }
.support-hero h1 {
  font-size: clamp(2.6rem, 1.5rem + 4.8vw, 5.5rem);
  line-height: .98;
  max-width: 13ch;
  margin-block: 20px 24px;
}
.support-hero .lede {
  color: var(--text-on-dark-mute);
  max-width: 52ch;
}

.support-index {
  grid-column: 1 / -1;
  margin-top: calc(var(--tile) * 1.5);
  align-self: end;
  letter-spacing: .1em;
}
.support-index a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-block: 13px;
  color: var(--chalk);
  text-decoration: none;
}
.support-index a i {
  flex: 1;
  min-width: 24px;
  border-bottom: 1px dotted rgba(168, 181, 162, .45);
  transform: translateY(-4px);
}
.support-index a span:last-child { color: var(--lichen); white-space: nowrap; }
.support-index a:hover span:first-child {
  text-decoration: underline;
  text-decoration-color: var(--candytuft);
  text-decoration-thickness: 2px;
  text-underline-offset: .25em;
}
@media (min-width: 900px) {
  .support-hero__copy { grid-column: 1 / 8; }
  .support-index { grid-column: 9 / 13; margin-top: 0; }
}

/* ============================================================
   SUPPORT — the Living Mosaic block + the planting record
   ============================================================ */
.mosaic-block { padding-top: calc(var(--space-section) * .55); }
.mosaic-block__head { margin-bottom: calc(var(--tile) * 1.75); }
.mosaic-block__head .h2 { margin-block: 16px 18px; max-width: 16ch; }
.mosaic-block__head .lede { color: var(--text-on-dark-mute); max-width: 52ch; }
.mosaic-block .milestone { margin-top: 18px; max-width: 760px; }

.mosaic-record { margin-top: calc(var(--tile) * 3); align-items: start; }
.mosaic-record__table { grid-column: 1 / -1; }

/* mobile: never a horizontally scrolling table (spec §11) —
   each record restacks as a specimen-style block */
@media (max-width: 639px) {
  .mosaic-record__table thead { display: none; }
  .mosaic-record__table table, .mosaic-record__table tbody { display: block; }
  .mosaic-record__table caption { display: block; }
  .mosaic-record__table tr {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 16px;
    padding-block: 14px;
    border-bottom: 1px solid var(--rule-dark);
  }
  .mosaic-record__table td { display: block; padding: 0; border: none; }
  .mosaic-record__table td:nth-child(1) { grid-row: 1; color: var(--lichen); }
  .mosaic-record__table td:nth-child(2) { grid-row: 1; font-weight: 500; }
  .mosaic-record__table td:nth-child(3) { grid-column: 2; color: var(--lichen); }
  .mosaic-record__table td:nth-child(4),
  .mosaic-record__table td:nth-child(5) {
    grid-column: 2;
    font-size: var(--label);
    letter-spacing: .06em;
    color: var(--lichen);
    opacity: .8;
  }
}
.mosaic-record__note {
  grid-column: 1 / -1;
  margin-top: calc(var(--tile) * 1.5);
  color: var(--lichen);
  line-height: 2.1;
}
.mosaic-record__note .rule {
  display: block;
  width: 48px;
  border-top: 1px solid var(--rule-dark);
  margin-block: 10px;
}
@media (min-width: 900px) {
  .mosaic-record__table { grid-column: 1 / 9; }
  .mosaic-record__note { grid-column: 10 / 13; margin-top: 4px; }
}

/* ============================================================
   SUPPORT — the ask ladder. An editorial spread, offset and
   alternating. Not four equal cards.
   ============================================================ */
.ladder { padding-top: calc(var(--space-section) * .8); }
.ladder__head { margin-bottom: calc(var(--tile) * 1.5); }
.ladder__head .h2 { margin-top: 16px; max-width: 20ch; }

.rung {
  border-top: 1px solid var(--rule-dark);
  padding-block: clamp(56px, 7vw, 110px);
  align-items: start;
}
.rung:last-of-type { padding-bottom: 0; }

.rung__title {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 60, 'WONK' 1;
  font-weight: 400;
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem);
  line-height: 1.08;
  margin-bottom: 18px;
}
.rung__body { grid-column: 1 / -1; }
.rung__body > p { color: var(--text-on-dark-mute); }
.rung__body .specimen { margin-top: calc(var(--tile) * 1.25); }
.rung__body .footnote { margin-top: 18px; font-size: .75rem; }

.rung__figure { grid-column: 1 / -1; }
.rung__price {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 60, 'WONK' 1;
  font-weight: 300;
  font-size: clamp(3rem, 2rem + 4.5vw, 5.75rem);
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--chalk);
}

.rung__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: calc(var(--tile) * 1.25);
}
.rung__alt {
  font-size: var(--small);
  color: var(--text-on-dark-mute);
}

/* the tile glyph: literal square metres, grout showing through */
.tile-field {
  --ts: 26px;
  margin-top: 18px;
  background-color: var(--myrtle);
  background-image:
    repeating-linear-gradient(to right,
      transparent 0 calc(var(--ts) - 2px), var(--surface-dark) calc(var(--ts) - 2px) var(--ts)),
    repeating-linear-gradient(to bottom,
      transparent 0 calc(var(--ts) - 2px), var(--surface-dark) calc(var(--ts) - 2px) var(--ts)),
    linear-gradient(112deg, rgba(6,24,28,.28) 0%, transparent 46%, rgba(237,238,234,.07) 100%);
  border-radius: var(--radius-tile);
  transform: rotate(-.5deg);
}
.tile-field--1       { width: calc(var(--ts) * 1); height: calc(var(--ts) * 1); }
.tile-field--12      { width: calc(var(--ts) * 4); height: calc(var(--ts) * 3); }
.tile-field--250     { --ts: 16px; width: calc(var(--ts) * 25); height: calc(var(--ts) * 10); max-width: 100%; }
@media (max-width: 639px) {
  /* 25 columns must end on a whole tile, not mid-tessera */
  .tile-field--250 { --ts: min(16px, calc((100vw - 2 * var(--pad-x)) / 25)); }
}
.tile-field--monthly { width: calc(var(--ts) * 6); height: calc(var(--ts) * 2); flex: 0 0 auto; }

/* patch of wild: price + single tile left, body right */
@media (min-width: 900px) {
  .rung--patch .rung__figure { grid-column: 1 / 4; }
  .rung--patch .rung__body { grid-column: 5 / 12; }

  /* wild guardian: mirrored */
  .rung--guardian .rung__body { grid-column: 1 / 8; order: 0; }
  .rung--guardian .rung__figure { grid-column: 9 / 13; order: 1; justify-self: end; text-align: right; }
  .rung--guardian .tile-field { margin-left: auto; }

  /* seat of hope: bench detail left, body right */
  .rung--seat .rung__bench { grid-column: 1 / 6; }
  .rung--seat .rung__body { grid-column: 7 / 13; }
}
.rung--guardian .rung__figure { display: flex; flex-direction: column; gap: 0; }

.rung__bench { grid-column: 1 / -1; margin-bottom: calc(var(--tile) * 1.5); }
.rung__bench img { aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 900px) { .rung__bench { margin-bottom: 0; } }

/* first guardian: the full spread */
.rung--first { display: block; }
.rung--first .rung__photo img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
}
.rung--first__grid { margin-top: calc(var(--tile) * 2); align-items: start; }
.rung--first .rung__body { grid-column: 1 / -1; }
.rung--first .rung__side { grid-column: 1 / -1; margin-top: calc(var(--tile) * 1.5); }
.rung--first .rung__side .specimen { margin-top: calc(var(--tile) * 1.25); }
.rung--first .tile-field { margin-top: 20px; }
@media (min-width: 900px) {
  .rung--first .rung__body { grid-column: 1 / 6; }
  .rung--first .rung__side { grid-column: 7 / 13; margin-top: 0; }
}
@media (max-width: 639px) {
  .rung--first .rung__photo img { aspect-ratio: 4 / 3; }
}

/* monthly: the quiet closing band */
.rung--monthly { display: block; }
.rung--monthly__inner {
  border: 1px dashed var(--rule-dark);
  border-radius: var(--radius-card);
  padding: clamp(24px, 3.5vw, 44px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
}
.rung--monthly .rung__body { flex: 1 1 320px; }
.rung--monthly .rung__title { margin-bottom: 10px; }
.rung--monthly .tile-field { margin-top: 0; }
.rung--monthly .btn { flex: 0 0 auto; }

/* ============================================================
   SUPPORT — the ask: photo column beside the module
   ============================================================ */
.ask-col-photo .photo img { aspect-ratio: 4 / 5; object-fit: cover; }

/* ============================================================
   SUPPORT — corporate & grow with us (light, quiet)
   ============================================================ */
.corporate .grid { row-gap: calc(var(--tile) * 2); }
.corporate__head { grid-column: 1 / -1; }
.corporate__head .h2 { margin-block: 16px 18px; max-width: 18ch; }
.corporate__head p { color: var(--text-on-light-mute); }

.corporate__routes { grid-column: 1 / -1; margin: 0; }
@media (min-width: 900px) {
  .corporate__head { grid-column: 1 / 6; }
  .corporate__routes { grid-column: 7 / 13; }
}
.route {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 20px;
  padding-block: 16px;
  border-top: 1px solid var(--rule-light);
}
@media (min-width: 640px) {
  .route { grid-template-columns: minmax(150px, 200px) 1fr; padding-block: 18px; }
}
.route dt {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--label);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--text-on-light-mute);
  padding-top: 3px;
}
.route dd {
  margin: 0;
  font-size: var(--small);
  line-height: 1.55;
  color: var(--ink-deep);
}
.corporate__cta {
  border-top: 1px solid var(--rule-light);
  padding-top: calc(var(--tile) * 1.25);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}
.corporate__mail { color: var(--text-on-light-mute); letter-spacing: .1em; }
.corporate__mail a { text-transform: none; letter-spacing: .04em; }

/* ============================================================
   SUPPORT — Barefoot Impact
   ============================================================ */
.fundraise .grid { align-items: center; row-gap: calc(var(--tile) * 2); }
.fundraise__copy { grid-column: 1 / -1; }
.fundraise__copy .h2 { margin-block: 16px 18px; }
.fundraise__copy > p { color: var(--text-on-dark-mute); }
.fundraise__copy .pull-quote { margin-block: calc(var(--tile) * 1.5); }
.fundraise__photo { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .fundraise__copy { grid-column: 1 / 6; }
  .fundraise__photo { grid-column: 7 / 13; }
}

/* ============================================================
   DONATE — chrome-less. A logo, a close button, the form.
   ============================================================ */
.donate-page {
  background: var(--surface-deepest);
  color: var(--text-on-dark);
  min-height: 100svh;
}

.donate-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--pad-x);
}
.donate-chrome__brand img { width: 40px; height: 40px; }
.donate-chrome__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius-pill);
  color: var(--chalk);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.donate-chrome__close:hover {
  border-color: var(--candytuft);
  background: rgba(196, 115, 155, .08);
}

.donate-main {
  max-width: 660px;
  margin-inline: auto;
  padding: clamp(16px, 3vh, 40px) var(--pad-x) calc(var(--tile) * 4);
}
.donate-patch-line {
  color: var(--gorse);
  margin-bottom: 14px;
}
.donate-headline {
  font-size: clamp(2.1rem, 1.4rem + 3.2vw, 3.9rem);
  line-height: 1.02;
  letter-spacing: -.015em;
}
.donate-lede {
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--text-on-dark-mute);
  margin-block: 14px 28px;
  max-width: 50ch;
}

.donate-form { margin-top: 0; max-width: none; }
.donate-form .field:first-of-type { margin-top: 26px; }
.donate-form .donation-outcome { margin-block: 16px 6px; }

.fee-cover {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 6px 0 26px;
  font-size: var(--small);
  line-height: 1.5;
  color: var(--chalk);
  cursor: pointer;
  max-width: 52ch;
}
.fee-cover input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: var(--candytuft);
  cursor: pointer;
}

.donate-submit {
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
}
@media (max-width: 479px) {
  /* “GIVE £5 A MONTH AND GROW IT” stays on one line on a 375px phone */
  .donation-module .donate-submit { font-size: .9375rem; padding-inline: 16px; }
}
.donate-pay {
  margin-top: 18px;
  text-align: center;
  color: var(--lichen);
  letter-spacing: .18em;
}
.donate-page .donation-module__fine { margin-top: 10px; }

.field .hint[data-message-count].is-low { color: var(--gorse); }

/* ============================================================
   THANK YOU — the moment (quiet chrome: gift already made)
   ============================================================ */
body:has(.ty-hero) .site-header .btn-give,
body:has(.ty-hero) .give-bar {
  display: none;
}
body:has(.ty-hero) .footer-ask {
  display: none; /* acquisition ask belongs elsewhere */
}

.ty-hero {
  padding-top: calc(76px + var(--space-section) * .5);
  align-items: start;
}
.ty-hero .grid { row-gap: calc(var(--tile) * 2.5); align-items: center; }
.ty-copy { grid-column: 1 / -1; }
.ty-headline {
  font-size: var(--display-l);
  line-height: 1.02;
  letter-spacing: -.015em;
  max-width: 14ch;
  margin-block: 18px 16px;
}
.ty-lede { color: var(--text-on-dark-mute); max-width: 44ch; }

.ty-dedication {
  margin-top: calc(var(--tile) * 1.5);
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius-card);
  background: rgba(6, 24, 28, .5);
  padding: 22px 24px;
  max-width: 52ch;
}
.ty-sample-note {
  margin-top: 14px;
  color: var(--gorse);
  letter-spacing: .12em;
  line-height: 1.9;
  max-width: 44ch;
}

.ty-mosaic { grid-column: 1 / -1; }
.ty-mosaic .mosaic--compact { aspect-ratio: 4 / 3; }
.ty-locator {
  margin-top: 12px;
  color: var(--lichen);
  letter-spacing: .12em;
  line-height: 1.9;
}
@media (min-width: 900px) {
  .ty-copy { grid-column: 1 / 7; }
  .ty-mosaic { grid-column: 8 / 13; }
}

/* pass it on */
.ty-share__inner { grid-column: 1 / -1; }
@media (min-width: 900px) { .ty-share__inner { grid-column: 2 / 11; } }
.ty-share-line {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 60, 'WONK' 1;
  font-style: italic;
  font-weight: 400;
  font-size: var(--h2);
  line-height: 1.25;
  max-width: 26ch;
  margin-block: 18px 26px;
}
.ty-share__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
}
.ty-share__mosaic-link { font-size: var(--small); color: var(--text-on-dark-mute); }

/* the after-form: asked after the gift, never before */
.ty-after .grid { row-gap: calc(var(--tile) * 2); align-items: start; }
.ty-after__head { grid-column: 1 / -1; }
.ty-after__head .h2 { margin-block: 16px 14px; }
.ty-after__head p { color: var(--text-on-light-mute); }
.ty-after__form { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .ty-after__head { grid-column: 1 / 6; }
  .ty-after__form { grid-column: 7 / 13; max-width: 480px; }
}

.ty-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-block: 12px;
  font-size: var(--small);
  line-height: 1.5;
  color: var(--ink-deep);
  cursor: pointer;
}
.ty-check input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: var(--candytuft);
  cursor: pointer;
}
.ty-check--photo {
  border: 1px solid var(--rule-light);
  border-radius: var(--radius-card);
  background: var(--chalk);
  padding: 16px;
  margin-block: 10px 4px;
  font-weight: 500;
}
.ty-after__form .btn { margin-top: 18px; }
.ty-after__ok {
  margin-top: 14px;
  color: var(--text-on-light-mute);
  letter-spacing: .12em;
}