/* Donate: the gift control fills the first screen; the chosen pair's story sits underneath. */
.page-donate { background: var(--canvas); --header-fade-depth: 34px; }
.page-donate [hidden] { display: none !important; }
.page-donate .newsletter, .page-donate .next-step { display: none; }

.gs { padding: clamp(64px, 8vw, 120px) 0; background: var(--canvas); position: relative; overflow: hidden; }
.gs::before { content: ""; position: absolute; inset: 0 0 auto; height: 70%; background: url("/assets/contours.svg") right top / 900px auto no-repeat; opacity: .35; pointer-events: none; -webkit-mask-image: linear-gradient(to left, #000, transparent 55%); mask-image: linear-gradient(to left, #000, transparent 55%); }
.gs-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
.gs-kicker { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--moss); }
.gs-kicker svg { width: 44px; height: 10px; }
.gs-kicker circle:first-child { fill: var(--leaf); }
.gs-kicker circle:last-child { fill: none; stroke: var(--leaf); stroke-width: 1.6; }
.gs-kicker path { stroke: var(--leaf); stroke-width: 1.4; stroke-dasharray: 1.4 3; stroke-linecap: round; }
.gs-copy h2 { margin: 18px 0 22px; font-size: var(--t-48); color: var(--forest); max-width: 15ch; }
.gs-copy > p { font-size: var(--t-18); line-height: 1.6; color: var(--ink); max-width: 34em; }
.gs-copy > p + p { margin-top: 14px; }
.gs-facts { margin-top: 34px; border-top: 1px solid var(--line-strong); }
.gs-facts div { display: grid; grid-template-columns: 9.5em 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.45; }
.gs-facts dt { color: var(--stone); }
.gs-facts dd { color: var(--ink); }
.gs-facts a { color: var(--moss); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* the pinboard: three plates, overlapping, each at its own angle */
.gs-board { position: relative; min-height: clamp(460px, 44vw, 640px); }
.gs-pin { position: absolute; margin: 0; width: 58%; transition: transform .7s var(--ease); }
.gs-pin-1 { top: 0; left: 0; transform: rotate(-3deg); z-index: 1; }
.gs-pin-2 { top: 14%; right: 0; width: 46%; transform: rotate(4deg); z-index: 2; }
.gs-pin-3 { bottom: 0; left: 18%; width: 52%; transform: rotate(-1.5deg); z-index: 3; }
.gs-pin-1 .plate-media { aspect-ratio: 4 / 5; }
.gs-pin:hover { transform: rotate(0) scale(1.03); z-index: 4; }

.plate { display: block; background: #fff; border: 1.5px solid var(--forest); padding: 9px; box-shadow: 8px 8px 0 rgba(18, 56, 42, .1); color: var(--ink); }
.plate-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.plate-media img { width: 100%; height: 100%; object-fit: cover; }
.plate-caption { display: flex; justify-content: space-between; gap: 14px; font: 500 11px / 1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--stone); padding: 10px 2px 2px; }
.plate-caption b { color: var(--forest); font-weight: 500; }

@media (max-width: 900px) {
  .gs-grid { grid-template-columns: 1fr; }
  .gs-board { min-height: 0; height: 118vw; max-height: 560px; }
  .gs-facts div { grid-template-columns: 8em 1fr; }
}

/* Phone only: less air between the places and the story */
@media (max-width: 640px) { .gs { padding-top: 36px; } }