/* Shared shell: reset, type, buttons, header, footer, reveals, forms. Page styles live in css/pages/. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font: 400 var(--t-18) / 1.55 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
img, picture, svg, canvas, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; }
:focus-visible { outline: 2px solid var(--leaf); outline-offset: 3px; border-radius: 2px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--forest); color: #fff; padding: 10px 14px; border-radius: 8px; }
.skip:focus { top: 12px; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.wrap-narrow { width: min(760px, 100% - 2 * var(--gutter)); margin-inline: auto; }

/* Type */
.display { font-family: var(--display); font-weight: 500; line-height: 1.02; letter-spacing: -.012em; text-wrap: balance; font-variant-numeric: lining-nums; }
/* The scale, set once. Page stylesheets load after this and override where a section
   genuinely differs. Before this existed, any heading a page stylesheet forgot fell back
   to the browser default (32 / 24 / 19px), which is what broke About and Corporate. */
:where(h1.display) { font-size: var(--t-88); }
:where(h2.display) { font-size: var(--t-64); }
:where(h3.display) { font-size: var(--t-36); }
:where(h2.display, h3.display) em { font-style: italic; }
body { font-variant-numeric: lining-nums; }
.display em { font-style: italic; font-weight: 500; color: var(--moss); }
.eyebrow { font: 500 var(--t-12) / 1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--moss); }
.lede { font-size: var(--t-22); line-height: 1.45; color: var(--stone); max-width: 34em; text-wrap: pretty; }
.small { font-size: var(--t-14); color: var(--stone); }
/* Figures. Amounts and counts are always sans with lining, tabular numerals, whatever
   typeface surrounds them. This lives here, not in a page stylesheet, so every page gets it. */
.money { font: 500 1em / 1 var(--sans); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.02em; }
.money > span { font: inherit; }
.money .cur { font-weight: 400; opacity: .6; margin-right: .06em; color: inherit; }
.prose { max-width: 66ch; }
.prose p + p { margin-top: 1.1em; }
/* Prose sizing is for body copy only: a heading explicitly marked .display keeps the page scale. */
.prose h2:not(.display) { font-family: var(--display); font-weight: 500; font-size: var(--t-36); line-height: 1.1; margin: 2.2em 0 .6em; color: var(--forest); }
.prose h3:not(.display) { font-size: var(--t-22); font-weight: 600; margin: 1.8em 0 .5em; }
.prose ul, .prose ol { padding-left: 1.2em; margin: .8em 0; }
.prose li + li { margin-top: .35em; }
.prose a { color: var(--moss); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Page head (used by inner pages) */
.page-head { padding: calc(var(--header-h) + clamp(56px, 9vw, 120px)) 0 clamp(40px, 6vw, 80px); }
.page-head h1 { font-size: var(--t-64); max-width: 16ch; margin-top: 18px; color: var(--forest); }
.page-head .lede { margin-top: 22px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 26px; border-radius: 8px; font-weight: 500; font-size: var(--t-16); white-space: nowrap; transition: background-color .3s, color .3s, border-color .3s; }
.btn-primary { background: var(--forest); color: #fff; }
.btn-primary:hover { background: var(--moss); }
.btn-ghost { border: 1px solid var(--line-strong); color: var(--forest); }
.btn-ghost:hover { border-color: var(--forest); }
.btn-light { background: #fff; color: var(--forest); }
.btn-light:hover { background: var(--mist); }
.btn-outline-light { border: 1px solid rgba(255,255,255,.55); color: #fff; }
.btn-outline-light:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.btn-sm { height: 42px; padding: 0 18px; font-size: 15px; }
.btn .arrow { width: 16px; height: 16px; transition: transform .5s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* Chips and tags: one badge, and it is always glass. On a light ground it is frosted white, on a
   photograph it is smoked, and the emphasised one is forest glass. Same size, type, radius and edge. */
.tag { display: inline-flex; align-items: center; gap: 8px; font: 500 13px / 1 var(--sans); letter-spacing: .02em; text-transform: none; padding: 7px 12px; border-radius: 10px; white-space: nowrap; color: var(--forest);
  background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.85); box-shadow: 0 0 0 1px rgba(18,56,42,.1), 0 6px 14px -10px rgba(18,56,42,.5), inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); text-shadow: none; }
.tag-dark { background: rgba(6,18,12,.34); color: #fff; border: 1px solid rgba(255,255,255,.34); box-shadow: none; }
.tag-strong { background: rgba(18,56,42,.86); color: var(--sprout); border-color: rgba(255,255,255,.18); box-shadow: 0 6px 14px -10px rgba(6,18,12,.7); }
.tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--leaf); }

/* ---------- Header ---------- */
:root { --header-fade-depth: 60px; }
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  /* fixed height: the bar used to squeeze 16px on scroll, which shunted the logo up the page */
  height: var(--header-h);
  display: flex; align-items: center;
  color: var(--forest);
  isolation: isolate;
  background: rgba(251,252,249,calc(.97 * var(--hdr)));
  backdrop-filter: blur(calc(16px * var(--hdr)));
  -webkit-backdrop-filter: blur(calc(16px * var(--hdr)));
  box-shadow: 0 10px 40px -24px rgba(18, 56, 42, calc(.5 * var(--hdr)));
  transition: box-shadow .3s;
}
/* The opening has no rectangular backdrop or divider. The light ground eases
   into the landscape with a continuous fade beneath the navigation. */
.site-header::before {
  content: ""; position: absolute; inset: 0 0 calc(-1 * var(--header-fade-depth)); z-index: -1;
  pointer-events: none; opacity: calc(1 - var(--hdr));
  background: linear-gradient(to bottom, rgba(251,252,249,.98) 0%, rgba(251,252,249,.98) 25%, rgba(251,252,249,.9) 40%, rgba(251,252,249,.76) 50%, rgba(251,252,249,.56) 62%, rgba(251,252,249,.33) 75%, rgba(251,252,249,.14) 87%, rgba(251,252,249,.04) 94%, rgba(251,252,249,0) 100%);
}
.site-header > .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
@media (max-width: 900px) { :root { --header-fade-depth: 40px; } }
/* ---------- Logo lockups ----------
   One mark, two lockups: horizontal for the desktop header, stacked for the footer and mobile.
   Clear space on every side is the diameter of the filled circle, about 0.65 of the mark's height. */
.logo { display: flex; align-items: center; gap: 22px; text-decoration: none; color: var(--forest); }
.logo__mark { display: flex; flex: none; }
.logo__svg { display: block; width: auto; }
/* the mark's stroke has to thicken as it shrinks, so it is set per lockup rather than on the file */
.logo__svg .logo__ring { stroke-width: var(--mark-stroke, 2.6); }
.logo__svg .logo__thread { stroke-width: calc(var(--mark-stroke, 2.6) * .85); }
.logo__text { display: flex; flex-direction: column; gap: 6px; }
.logo__word { font-family: var(--display); font-weight: 500; font-size: 50px; line-height: .8; color: var(--forest); }
.logo__rule { display: block; width: 100%; height: 1px; background: var(--rule); }
.logo__sub { font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: .06em; color: var(--stone); white-space: nowrap; }

/* Stacked: footer and mobile. 64px mark sits above the 48px stroke step, so 2.4. */
.logo--stacked { --mark-stroke: 2.4; }
.logo--stacked .logo__svg { height: 64px; }

/* Reverse, for the forest footer */
.logo--reverse { color: var(--sprout); }
.logo--reverse .logo__word { color: var(--canvas); }
.logo--reverse .logo__rule { background: var(--moss); }
.logo--reverse .logo__sub { color: var(--sprout); }

/* Horizontal: desktop header. The header already shrinks on scroll through --hdr, so the lockup
   rides the same value from its full step (40px mark, 34px word) to the compact one (28px, 24px)
   instead of snapping between them. Both ends sit in the 28-48px band, hence 2.7. */
/* The compact step, held constant. The header is fixed on every page, which is what the compact
   variant is for, and at 28px the mark keeps its full clear space inside a 68px bar. It does not
   scale with scroll: a logo that resizes under you is the one thing a lockup must never do. */
.logo--inline { --mark-stroke: 2.9; gap: 12px; }
.logo--inline .logo__svg { height: 36px; }
.logo--inline .logo__text { flex-direction: row; align-items: center; gap: 11px; }
.logo--inline .logo__word { font-size: 24px; line-height: 1; }
.logo--inline .logo__rule { width: 1px; height: 16px; position: relative; top: 2px; }
.logo--inline .logo__sub { font-size: 9px; letter-spacing: .07em; position: relative; top: 3px; }

/* Keep the forest lockup on the light bar at the opening and while scrolling. */
.site-header .logo, .site-header .logo__word, .site-header .logo__sub { color: inherit; }
.site-header .logo__sub { opacity: .9; }
.site-header .logo__rule { background: currentColor; opacity: .34; }
.nav { display: flex; align-items: center; gap: 34px; font-weight: 500; font-size: 15px; }
.nav a { position: relative; padding: 6px 0; opacity: .92; }
.nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px; background: currentColor; transition: right .5s var(--ease); }
.nav a:hover::after, .nav a[aria-current]::after { right: 0; }
.nav .btn { height: 44px; padding: 0 20px; }
.nav .btn::after { display: none; }
.nav .btn-donate {
  background: var(--forest);
  color: #fff;
}
/* Menu button: three rules that fold into a cross. The middle bar is the element itself, so the
   two pseudo bars only ever have to travel to it. */
.menu-btn { display: none; width: 44px; height: 44px; margin-right: -10px; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; }
.menu-bars { width: 22px; height: 1.5px; background: currentColor; position: relative; transition: background .2s .18s; }
.menu-bars::before, .menu-bars::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .34s var(--ease), top .28s var(--ease) .12s; }
.menu-bars::before { top: -6.5px; } .menu-bars::after { top: 6.5px; }
.menu-btn[aria-expanded="true"] .menu-bars { background: transparent; transition-delay: 0s; }
.menu-btn[aria-expanded="true"] .menu-bars::before { top: 0; transform: rotate(45deg); transition: top .2s var(--ease), transform .34s var(--ease) .14s; }
.menu-btn[aria-expanded="true"] .menu-bars::after { top: 0; transform: rotate(-45deg); transition: top .2s var(--ease), transform .34s var(--ease) .14s; }

/* Mobile menu: a sheet that slides out from under the bar, over a dimmed page.
   It sits outside .site-header in the markup - see the note in partials/header.njk. */
.menu-scrim { position: fixed; inset: 0; z-index: 89; background: rgba(6, 18, 12, .44); opacity: 0; transition: opacity .42s var(--ease); }
.menu-scrim[hidden] { display: none; }
.menu-scrim.is-open { opacity: 1; }

.mobile-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 95;
  max-height: 100svh; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(var(--header-h) + 4px) var(--gutter) 24px;
  background: var(--canvas); color: var(--forest);
  border-radius: 0 0 24px 24px;
  box-shadow: 0 32px 64px -34px rgba(6, 18, 12, .55);
  transform: translateY(-101%);
  transition: transform .5s cubic-bezier(.22, 1, .32, 1);
}
.mobile-nav[hidden] { display: none; }
.mobile-nav.is-open { transform: none; }
.mobile-nav-inner { display: grid; }
.mobile-nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 2px; border-top: 1px solid var(--line);
  font-family: var(--display); font-weight: 500; font-size: 27px; line-height: 1.1;
  color: var(--forest); -webkit-tap-highlight-color: transparent;
}
.mobile-nav a:first-child { border-top: 0; }
.mobile-nav a[aria-current] { color: var(--leaf); }
.mn-chev { width: 16px; height: 16px; flex: none; opacity: .3; transition: transform .4s var(--ease), opacity .3s; }
.mobile-nav a:active .mn-chev, .mobile-nav a[aria-current] .mn-chev { opacity: .75; transform: translateX(3px); }
.mobile-nav .mn-give { justify-content: center; width: 100%; height: 54px; margin-top: 20px; border-top: 0; font-family: var(--sans); font-size: 16px; color: #fff; }
.mn-foot { margin: 18px 0 0; font-size: 12px; letter-spacing: .04em; color: var(--stone); }
/* Rows arrive just behind the sheet, and only on the way in - closing takes everything at once. */
.mobile-nav-inner > * { opacity: 0; transform: translateY(-10px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.mobile-nav.is-open .mobile-nav-inner > * { opacity: 1; transform: none; }
.mobile-nav.is-open .mobile-nav-inner > :nth-child(1) { transition-delay: .11s; }
.mobile-nav.is-open .mobile-nav-inner > :nth-child(2) { transition-delay: .16s; }
.mobile-nav.is-open .mobile-nav-inner > :nth-child(3) { transition-delay: .21s; }
.mobile-nav.is-open .mobile-nav-inner > :nth-child(4) { transition-delay: .26s; }
.mobile-nav.is-open .mobile-nav-inner > :nth-child(5) { transition-delay: .31s; }
.mobile-nav.is-open .mobile-nav-inner > :nth-child(n+6) { transition-delay: .36s; }

body.menu-open { overflow: hidden; }
/* The bar goes solid so the sheet reads as coming out of it, and drops its shadow so no line
   crosses the panel. */
body.menu-open .site-header { --hdr: 1; box-shadow: none; }
@media (min-width: 901px) { .mobile-nav, .menu-scrim { display: none !important; } }
@media (max-width: 900px) {
  .nav { display: none; }
  .menu-btn { display: flex; }
}

/* ---------- Footer ---------- */
.site-footer { position: relative; background: var(--forest); color: rgba(255,255,255,.82); padding: 88px 0 40px; overflow: hidden; isolation: isolate; }
.footer-bg { position: absolute; inset: 0; z-index: -1; }
.footer-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.footer-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(6,18,12,.72), rgba(10,34,24,.6) 45%, rgba(10,34,24,.52) 80%, rgba(6,18,12,.66)); }
.site-footer a, .site-footer p, .site-footer h4, .footer-bottom { text-shadow: 0 1px 12px rgba(0,0,0,.45); }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }

.site-footer p { max-width: 30em; margin-top: 18px; font-size: 15px; line-height: 1.6; }
.site-footer h4 { margin: 0 0 14px; font: 500 12px / 1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--sprout); }
.site-footer ul { list-style: none; display: grid; gap: 10px; font-size: 15px; }
.site-footer ul a:hover { color: #fff; }
.footer-bottom { margin-top: 64px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.16); display: flex; justify-content: space-between; gap: 20px; font-size: 13px; color: rgba(255,255,255,.6); flex-wrap: wrap; }
.footer-bottom i { font-style: normal; margin: 0 6px; opacity: .6; }
.footer-credit { color: rgba(255,255,255,.85); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .3s; }
.footer-credit:hover { color: #fff; }
.footer-social { display: flex; gap: 12px; margin-top: 14px; }
.footer-social-link { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.28); color: rgba(255,255,255,.82); transition: color .3s, border-color .3s, background-color .3s; }
.footer-social-link svg { width: 18px; height: 18px; }
.footer-social-link:hover { color: #fff; border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.08); }
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-top { grid-template-columns: 1fr; } }

/* ---------- Reveals ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- Forms ---------- */
.field { display: grid; gap: 8px; }
.field label { font-weight: 500; font-size: 15px; }
.input { height: 52px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 10px; background: #fff; font: inherit; color: var(--ink); width: 100%; }
.input:focus { outline: 2px solid var(--leaf); outline-offset: 1px; border-color: transparent; }

/* ---------- CTA band (shared) ---------- */
.cta-band { position: relative; color: #fff; padding: clamp(96px, 14vw, 200px) 0; isolation: isolate; text-align: center; }
.cta-band .bg { position: absolute; inset: 0; z-index: -1; }
.cta-band .bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-band .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,18,12,.72), rgba(6,18,12,.35)); }
.cta-band h2 { font-size: var(--t-64); margin: 0 auto; max-width: 16ch; }
.cta-band h2 em { color: var(--sprout); }
.cta-band .lede { color: rgba(255,255,255,.82); margin: 20px auto 0; }
.cta-band .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
/* Left variant: same band, read as a column against the photograph rather than centred on it. */
.cta-band--left { text-align: left; }
.cta-band--left .wrap > * { margin-inline: 0; }
.cta-band--left h2 { margin-inline: 0; max-width: 18ch; }
.cta-band--left .lede { margin-inline: 0; }
.cta-band--left .actions { justify-content: flex-start; }
.cta-band--left .bg::after { background: linear-gradient(to right, rgba(6,18,12,.82), rgba(6,18,12,.5) 45%, rgba(6,18,12,.15)); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Pictograms ---------- */
.ico { width: 24px; height: 24px; flex: none; color: var(--leaf); }
.ico-lg { width: 32px; height: 32px; }
.ico-ring { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--mist); color: var(--forest); flex: none; }
.ico-ring .ico { width: 22px; height: 22px; color: inherit; }
.ico-ring.on-dark { background: rgba(255,255,255,.1); color: var(--sprout); }

/* ---------- Motion utilities ---------- */
.reveal-stagger > * { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-stagger.in > * { opacity: 1; transform: none; }
.reveal-stagger.in > :nth-child(1) { transition-delay: 0s; } .reveal-stagger.in > :nth-child(2) { transition-delay: .08s; } .reveal-stagger.in > :nth-child(3) { transition-delay: .16s; } .reveal-stagger.in > :nth-child(4) { transition-delay: .24s; } .reveal-stagger.in > :nth-child(5) { transition-delay: .32s; } .reveal-stagger.in > :nth-child(n+6) { transition-delay: .4s; }
.zoom-img { overflow: hidden; }
.zoom-img img { transition: transform 1.4s var(--ease); }
.zoom-img:hover img, a:hover .zoom-img img { transform: scale(1.04); }
.draw path[pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; }
.draw.in path[pathLength] { transition: stroke-dashoffset 1.8s var(--ease); stroke-dashoffset: 0; }

/* ---------- Page transitions (cross-document) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 260ms var(--ease) both vt-out; }
::view-transition-new(root) { animation: 420ms var(--ease) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.site-header { view-transition-name: header; }

/* Patch photograph morph. The card you click and the hero you land on are the same picture, so
   the box does the travelling and both ends fill it with object-fit: cover: what you watch is one
   photograph being re-cropped from a card to the full screen.
   Set up by partials/transition-head.njk, which names the two ends across the navigation. */
.vt-morph { --morph: 760ms; --morph-ease: cubic-bezier(.4, 0, .2, 1); }
/* The card being handed over stops hovering first: see the note in partials/transition-head.njk. */
.vt-handoff { transform: none !important; transition: none !important; }
.vt-morph::view-transition-group(patch-media) { animation-duration: var(--morph); animation-timing-function: var(--morph-ease); }
/* The two ends are different crops of one photograph, so the old one is held at full opacity
   underneath and the new one is brought up over it. Fading both at once would dip through the
   page behind them; swapping outright shows the crop change as a jump. */
.vt-morph::view-transition-image-pair(patch-media) { isolation: none; }
.vt-morph::view-transition-old(patch-media),
.vt-morph::view-transition-new(patch-media) { mix-blend-mode: normal; width: 100%; height: 100%; object-fit: cover; }
.vt-morph::view-transition-old(patch-media) { animation: var(--morph) linear both vt-late-out; }
.vt-morph::view-transition-new(patch-media) { animation: var(--morph) linear both vt-mid-in; }
/* The page being left fades as the photograph grows over it; the page being entered fades in
   underneath on the same clock, so nothing is ever doubled and nothing snaps. */
/* One photograph only: the page being left goes at once, the photograph grows alone over a clean
   field, and the new page arrives under it in the last third. */
.vt-morph::view-transition-old(root) { animation: 120ms linear both vt-fade-out; }
.vt-morph::view-transition-new(root) { animation: var(--morph) linear both vt-late-in; }
@keyframes vt-late-in { 0%, 62% { opacity: 0; } 100% { opacity: 1; } }
@keyframes vt-late-out { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes vt-mid-in { 0%, 35% { opacity: 0; } 80%, 100% { opacity: 1; } }
@keyframes vt-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes vt-hold-in { from { opacity: 0; } to { opacity: 1; } }
/* Only the words wait: they rise as the photograph settles. */
.vt-morph-in::view-transition-old(patch-copy) { animation: none; opacity: 0; }
.vt-morph-in::view-transition-new(patch-copy) { animation: 500ms var(--ease) 540ms both vt-copy-rise; }
.vt-morph::view-transition-old(patch-copy) { animation: 200ms linear both vt-out; }
@keyframes vt-copy-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } .reveal-stagger > * { opacity: 1; transform: none; } .draw path[pathLength] { stroke-dashoffset: 0; } }

/* A single photo treatment: preserve the sky and landscape, with shade around
   the lower copy. Page-specific overlays must not stack on top of this one. */
main [data-hero] { --hero-shade-left: .4; --hero-shade-shoulder: .18; --hero-shade-shoulder-position: 46%; --hero-shade-end: 78%; --hero-shade-floor: .68; --hero-shade-middle: .4; --hero-shade-phone-upper: .54; }
main [data-hero] .eyebrow { color: #fff; }
main [data-hero]::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(6,18,12,var(--hero-shade-floor)) 0%, rgba(6,18,12,var(--hero-shade-middle)) 30%, rgba(6,18,12,.1) 55%, transparent 72%),
    linear-gradient(to right, rgba(6,18,12,var(--hero-shade-left)) 0%, rgba(6,18,12,var(--hero-shade-shoulder)) var(--hero-shade-shoulder-position), transparent var(--hero-shade-end));
}
@media (max-width: 900px) {
  main [data-hero]::after {
    background:
      linear-gradient(to top, rgba(6,18,12,.74) 0%, rgba(6,18,12,.64) 40%, rgba(6,18,12,var(--hero-shade-phone-upper)) 68%, transparent 84%),
      linear-gradient(to right, rgba(6,18,12,.25), transparent);
  }
}

/* Partners band (shared) */
.partners-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; padding: 34px 44px; border-radius: var(--r-20); background: var(--forest); color: #fff; }
.partners-label { font-family: var(--display); font-style: italic; font-size: var(--t-22); color: var(--sprout); }
.partners-row img { height: 52px; width: auto; opacity: .95; }
.partners-word { font-family: var(--display); font-weight: 600; font-size: var(--t-36); }
@media (max-width: 700px) { .partners-row { justify-content: start; } }

/* ---------- Thread link: the animated connection between a patch and its match ---------- */
.thread-link { position: relative; width: clamp(160px, 22vw, 320px); height: 80px; align-self: center; justify-self: center; flex: none; }
.thread-link svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; }
.thread-link .tl-base { stroke: var(--line-strong); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.thread-link .tl-flow { stroke: var(--leaf); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 10 14; vector-effect: non-scaling-stroke; animation: tlflow 1.8s linear infinite; }
@keyframes tlflow { to { stroke-dashoffset: -24; } }
.thread-link .tl-dot { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); }
.thread-link .tl-dot-a { left: 3%; background: var(--sprout); box-shadow: 0 0 0 2.5px #fff, 0 0 0 4px var(--leaf); }
.thread-link .tl-dot-b { left: 97%; background: var(--canvas); box-shadow: 0 0 0 2.5px var(--leaf); }
.thread-link .tl-pill { position: absolute; left: 50%; top: -10px; transform: translate(-50%, -100%); white-space: nowrap; font: 500 12.5px / 1 var(--sans); letter-spacing: .02em; color: var(--forest); background: var(--mist); padding: 8px 14px; border-radius: 4px; }
.thread-link.on-dark .tl-base { stroke: rgba(255,255,255,.22); }
.thread-link.on-dark .tl-flow { stroke: var(--sprout); }
.thread-link.on-dark .tl-dot-a { box-shadow: 0 0 0 2.5px var(--void), 0 0 0 4px var(--sprout); }
.thread-link.on-dark .tl-dot-b { background: var(--void); box-shadow: 0 0 0 2.5px var(--sprout); }
.thread-link.on-dark .tl-pill { background: rgba(6,18,12,.7); color: #fff; }
@media (max-width: 900px) {
  .thread-link { width: 80px; height: 120px; margin: 0 auto; }
  .thread-link svg { width: 120px; height: 80px; inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(90deg); }
  .thread-link .tl-dot { left: 50%; }
  .thread-link .tl-dot-a { top: 3%; } .thread-link .tl-dot-b { top: 97%; }
  .thread-link .tl-pill { top: 50%; left: calc(50% + 28px); transform: translateY(-50%); }
}
@media (prefers-reduced-motion: reduce) { .thread-link .tl-flow { animation: none; } }

/* Under 760px the horizontal lockup gives way to the stacked one at its 25px step, and the footer
   lockup drops to the 36px step so it does not dominate a phone screen. */
@media (max-width: 760px) {
  .logo--inline { --mark-stroke: 2.9; gap: 12px; }
  .logo--inline .logo__svg { height: 38px; }
  .logo--inline .logo__text { flex-direction: column; align-items: flex-start; gap: 4px; }
  .logo--inline .logo__word { font-size: 25px; line-height: .85; }
  .logo--inline .logo__rule { width: 100%; height: 1px; }
  .logo--inline .logo__sub { font-size: 8px; letter-spacing: .07em; }
  .logo--stacked { --mark-stroke: 2.7; gap: 16px; }
  .logo--stacked .logo__svg { height: 47px; }
  .logo--stacked .logo__word { font-size: 36px; }
  .logo--stacked .logo__text { gap: 4px; }
}

/* Visually hidden, kept in the accessibility tree. The map page carried its own copy of this;
   nav markers need it everywhere. */
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Preview build: a nav item whose page is not finished yet. Quietened, with a small marker, so it
   reads as work in progress rather than a link that failed. */
.nav a.is-soon, .mobile-nav a.is-soon { opacity: .55; }
.nav a.is-soon::after, .mobile-nav a.is-soon .mn-label::after { content: ""; display: inline-block; width: 4px; height: 4px; margin-left: 7px; border-radius: 50%; background: currentColor; vertical-align: .35em; }
.nav a.is-soon:hover, .mobile-nav a.is-soon:hover { opacity: .8; }

/* The site says out loud that its place pictures are illustrations. Quiet, but on every page. */
.footer-imagery { margin-top: 56px; max-width: 62ch; font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.62); }
.footer-imagery a { color: var(--sprout); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.footer-imagery a:hover { color: #fff; }

/* ---------- Kind label: plain uppercase tag, urban on leaf, wild on forest ---------- */
.tag-kind { background: rgba(78,154,91,.88); color: #fff; border-color: rgba(255,255,255,.3); }
.tag-kind-wild { background: rgba(18,56,42,.88); color: var(--sprout); border-color: rgba(255,255,255,.2); }

/* ---------- Leaf glyph on primary actions ---------- */
/* Jess's buttons carry a leaf after the label. Use: <a class="btn btn-primary">Label {{ leaf | safe }}</a>
   where leaf is the same svg the arrow is, with class "leaf": {% set icon = 'leaf' %}{% set iconClass = 'leaf' %}{% include "partials/icons.njk" %} */
.btn .leaf { width: 17px; height: 17px; color: inherit; opacity: .9; transition: transform .5s var(--ease); }
.btn:hover .leaf { transform: translateY(-2px) rotate(-8deg); }
.btn-primary .leaf, .btn-donate .leaf { color: var(--sprout); }
.btn-light .leaf { color: var(--leaf); }
/* The Whole Wild World mark is round, so it needs more height than a wordmark to read at the same weight. */
.partners-row img[alt="Whole Wild World"] { height: 84px; }

/* Partner band. Forest ground, each partner's own logo on a white plate (the house card from the
   journey: hairline border, hard offset shadow, a degree of tilt either way). */
.partners-band { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 28px 44px; padding: clamp(28px, 4vw, 48px) clamp(22px, 4vw, 52px); border-radius: var(--r-20); background: var(--forest); color: #fff; }
.partners-band .partners-label { margin: 0; max-width: 6ch; line-height: 1.05; font-size: var(--t-28, 28px); }
.partner-plates { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 26px 20px; }
.partner-plate:nth-child(odd) { transform: rotate(-1.4deg); }
.partner-plate:nth-child(even) { transform: rotate(1.1deg) translateY(6px); }
.partner-plate > a, .partner-plate > div { display: flex; flex-direction: column; height: 100%; background: #fff; padding: 10px 10px 0; box-shadow: 6px 6px 0 rgba(6, 18, 12, .45); color: var(--ink); text-decoration: none; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.partner-plate > a:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 rgba(6, 18, 12, .5); }
.partner-plate > a:focus-visible { outline: 2px solid var(--sprout); outline-offset: 4px; }
.pp-mark { display: flex; align-items: center; justify-content: center; height: 100px; padding: 8px 2px; }
.pp-mark img { width: auto; height: auto; max-width: 100%; max-height: 78px; }
.pp-word { font-family: var(--display); font-weight: 600; font-size: 30px; line-height: 1; color: var(--forest); }
.pp-name { display: block; margin-top: auto; padding: 9px 2px 10px; border-top: 1px solid var(--rule); font: 500 10.5px / 1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--stone); }
.partner-plate.is-pending > div { background: transparent; box-shadow: none; outline: 1.5px dashed rgba(169, 213, 160, .55); outline-offset: -1.5px; color: #fff; }
.partner-plate.is-pending .pp-word { max-width: 9em; font-size: 21px; line-height: 1.1; text-align: center; text-wrap: balance; color: var(--sprout); }
.partner-plate.is-pending .pp-name { border-top: 1px dashed rgba(169, 213, 160, .4); color: rgba(255, 255, 255, .72); }
@media (max-width: 900px) { .partners-band { grid-template-columns: 1fr; } .partners-band .partners-label { max-width: none; } }
@media (max-width: 520px) { .partner-plates { grid-template-columns: 1fr 1fr; gap: 22px 16px; } .pp-mark { height: 84px; } .pp-mark img { max-height: 60px; } }
@media (prefers-reduced-motion: reduce) { .partner-plate > a { transition: none; } }

/* Next step: the close of every inner page. A wide link to the next page to read, with its photo,
   and a forest block for the gift. Two moves, nothing else. */
.next-step { padding: clamp(56px, 7vw, 96px) 0; background: var(--mist); }
.next-step-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 16px; }
.next-read { position: relative; display: grid; grid-template-columns: clamp(120px, 16vw, 220px) minmax(0, 1fr) auto; align-items: center; gap: clamp(18px, 2.4vw, 32px); padding: 14px clamp(20px, 3vw, 40px) 14px 14px; background: #fff; border: 1.5px solid var(--forest); box-shadow: 8px 8px 0 rgba(18, 56, 42, .12); color: var(--forest); text-decoration: none; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.next-thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.next-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.next-copy { display: grid; gap: 6px; }
.next-kicker { font: 500 var(--t-12) / 1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--moss); }
.next-title { font-size: var(--t-48); line-height: 1.02; }
.next-line { font-size: var(--t-16); color: var(--stone); max-width: 34em; }
.next-arrow { width: 40px; height: 16px; color: var(--moss); transition: transform .45s var(--ease); }
.next-read:hover { transform: translate(-3px, -3px); box-shadow: 11px 11px 0 rgba(18, 56, 42, .14); }
.next-read:hover .next-thumb img { transform: scale(1.05); }
.next-read:hover .next-arrow { transform: translateX(6px); }
.next-give { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; padding: clamp(22px, 3vw, 36px); background: var(--forest); color: #fff; text-decoration: none; }
.next-give-mark { width: 52px; height: auto; color: var(--sprout); }
.next-give-line { font-size: var(--t-36); line-height: 1.08; }
.next-give-btn { align-self: flex-start; display: inline-flex; align-items: center; height: 48px; padding: 0 22px; border-radius: 8px; background: #fff; color: var(--forest); font-weight: 500; transition: background-color .3s; }
.next-give:hover .next-give-btn { background: var(--sprout); }
.next-read:focus-visible, .next-give:focus-visible { outline: 2px solid var(--leaf); outline-offset: 4px; }
@media (max-width: 900px) { .next-step-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .next-read { grid-template-columns: 96px minmax(0, 1fr); padding-right: 18px; } .next-arrow { display: none; } .next-title { font-size: var(--t-36); } }
@media (prefers-reduced-motion: reduce) { .next-read, .next-thumb img, .next-arrow { transition: none; } }

/* Page opening: every inner page. Light ground, a plain headline with one photograph set into the
   line, a short line beside it, then three photographs from the page's subject cut into a mist
   field that runs on into the next section. */
/* ---------- Inner page opening (partials/page-open.njk) ---------- */
.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; }

/* The opening is a hybrid: the headline on the page colour, a large photograph filling the right of
   the opening edge to edge, and a second photograph on a plate pinned across the seam. The words
   never sit on the photograph, so they stay sharp whatever the picture. */
.po { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(560px, 74vh, 760px); display: flex; align-items: center; padding: calc(var(--header-h) + clamp(36px, 6vh, 72px)) 0 clamp(56px, 7vh, 90px); background: var(--canvas); }
.po-grid { position: static; display: block; }
.po-copy { position: relative; z-index: 2; width: min(54%, 720px); }
.po-crumb { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--stone); }
.po-crumb a { color: var(--moss); text-decoration: none; }
.po-crumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.po-crumb svg { width: 30px; height: 10px; color: var(--leaf); }
.po-crumb span { color: var(--forest); font-weight: 500; }
.po h1 { margin-top: clamp(18px, 2.4vw, 30px); font-size: clamp(42px, 5vw, 80px); line-height: 1.01; letter-spacing: -.016em; color: var(--forest); max-width: 13ch; text-wrap: balance; }
.po-lede { margin-top: clamp(18px, 2vw, 26px); font-size: var(--t-22); line-height: 1.5; color: var(--ink); max-width: 27em; text-wrap: pretty; }
.po-cta { display: inline-flex; align-items: center; gap: 12px; margin-top: 28px; height: 52px; padding: 0 8px 0 20px; border-radius: 12px; background: var(--forest); color: #fff; font-weight: 500; transition: background-color .3s; }
.po-cta:hover { background: var(--moss); }
.po-cta svg { width: 36px; height: 36px; padding: 10px; border-radius: 9px; background: var(--sprout); color: var(--forest); transition: transform .45s var(--ease); }
.po-cta:hover svg { transform: translateX(3px); }

/* the photograph field */
.po-art { position: absolute; z-index: 1; top: var(--header-h); right: 0; bottom: 0; width: 41%; }
.po-plate { margin: 0; }
.po-plate-1 { position: absolute; inset: 0; padding: 0; border: 0; box-shadow: none; background: var(--forest); border-bottom-left-radius: 36px; overflow: hidden; }
.po-plate-1 .plate-media { position: absolute; inset: 0; aspect-ratio: auto; }
.po-plate-1 .plate-media img { animation: po-drift 14s var(--ease) both; }
@keyframes po-drift { from { transform: scale(1.1); } to { transform: scale(1); } }
.po-plate-1::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(to top, rgba(6,18,12,.7), transparent); pointer-events: none; }
.po-plate-1 .plate-caption { position: absolute; right: 22px; bottom: 18px; left: auto; z-index: 2; padding: 0; gap: 10px; color: rgba(255,255,255,.75); }
.po-plate-1 .plate-caption b { color: #fff; }
/* the second photograph, pinned across the seam */
.po-plate-2 { position: absolute; z-index: 3; left: -96px; bottom: 12%; width: clamp(180px, 15vw, 250px); rotate: -4deg; animation: po-pin 1.1s var(--ease) .25s both; }
.po-plate-2 .plate-media { aspect-ratio: 4 / 5; }
.po-plate-2:hover { rotate: 0deg; transition: rotate .6s var(--ease); }
@keyframes po-pin { from { opacity: 0; transform: translate(30px, 20px) rotate(6deg); } }
.po-thread, .po-knot { display: none; }
/* the page colour steps into the photograph in a thin band of mist, and the contour lines come with it */
.po::after { content: ""; position: absolute; left: 0; right: 41%; bottom: 0; height: 42%; z-index: 0; background: url("/assets/contours.svg") right bottom / 1100px auto; opacity: .45; -webkit-mask-image: linear-gradient(to left, #000, transparent 70%); mask-image: linear-gradient(to left, #000, transparent 70%); pointer-events: none; }
.po + section { padding-top: clamp(56px, 7vw, 100px); }

@media (max-width: 1100px) { .po-copy { width: 56%; } .po h1 { font-size: clamp(40px, 5.2vw, 62px); } }
@media (max-width: 900px) {
  .po { display: block; min-height: 0; padding: calc(var(--header-h) + 26px) 0 0; }
  .po-copy { width: auto; }
  .po h1 { font-size: clamp(38px, 10.6vw, 56px); }
  .po-lede { font-size: 18px; }
  .po-art { position: relative; top: auto; width: auto; height: 62vw; max-height: 440px; margin: 34px 0 0 var(--gutter); }
  .po-plate-1 { border-radius: 26px 0 0 26px; }
  .po-plate-2 { left: auto; right: calc(100% - 140px); bottom: -22px; width: 128px; }
  .po::after { display: none; }
  .po-lean .po-art { display: none; }
  .po-lean { padding-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { .po-plate-1 .plate-media img, .po-plate-2 { animation: none; } }

/* Headings on inner pages are set in one voice: no italic, no second colour for the last words. */
body:not(.page-home) main :is(h1, h2, h3) em { font-style: normal; color: inherit; }
@media (max-width: 900px) {
  .po-plate-2 { right: auto; left: -14px; bottom: 18px; width: 118px; padding: 6px; }
  .po-plate-2 .plate-caption { display: none; }
  .po-plate-1 .plate-caption { right: 16px; bottom: 14px; }
  .po { padding-bottom: 0; }
}

/* Phone only: footer links are easier to hit with a thumb */
@media (max-width: 640px) {
  .site-footer .footer-top a { display: inline-block; padding: 7px 0; }
  .footer-credit { padding: 6px 0; }
}

/* ---------- Phone menu: a full dark sheet over the forest, big links with a line each ---------- */
@media (max-width: 900px) {
  .mobile-nav { height: 100svh; max-height: none; padding: calc(var(--header-h) + 6px) var(--gutter) calc(22px + env(safe-area-inset-bottom)); border-radius: 0; color: #fff; isolation: isolate;
    background: #0b261c; box-shadow: none; }
  .mobile-nav::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(11,38,28,.92), rgba(11,38,28,.82) 55%, rgba(11,38,28,.94)), url("/assets/footer-forest-1800.jpg") center / cover; }
  .mobile-nav-inner { min-height: calc(100svh - var(--header-h) - 28px); align-content: start; }
  .mobile-nav a { padding: 15px 2px 14px; border-top: 1px solid rgba(255,255,255,.14); color: #fff; }
  .mobile-nav a:first-child { border-top: 1px solid rgba(255,255,255,.14); }
  .mn-text { display: grid; gap: 4px; min-width: 0; }
  .mn-label { font-size: 30px; line-height: 1.05; }
  .mn-desc { font: 400 13.5px/1.3 var(--sans); color: rgba(255,255,255,.62); }
  .mobile-nav a[aria-current] .mn-label { color: var(--sprout); }
  .mn-chev { opacity: .45; color: var(--sprout); }
  .mobile-nav a[aria-current] .mn-chev { opacity: 1; }
  .mobile-nav a.mn-appeal { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 14px; margin-top: 22px; padding: 9px 14px 9px 9px; border: 1px solid rgba(255,255,255,.22); border-radius: 16px; background: rgba(255,255,255,.08); }
  .mn-appeal-pic { width: 56px; height: 56px; border-radius: 11px; overflow: hidden; }
  .mn-appeal-pic img { width: 100%; height: 100%; object-fit: cover; }
  .mn-appeal-txt { display: grid; gap: 3px; font-family: var(--sans); }
  .mn-appeal-txt small { font: 600 10.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--sprout); }
  .mn-appeal-txt b { font: 500 18px/1.1 var(--display); }
  .mn-appeal-txt span { font-size: 13px; color: rgba(255,255,255,.75); }
  .mobile-nav .mn-give { margin-top: 14px; height: 56px; border-radius: 14px; background: var(--sprout); color: var(--forest); font-weight: 500; font-size: 17px; }
  .mn-foot { margin-top: 16px; color: rgba(255,255,255,.5); }
  /* the bar dissolves into the sheet: no white strip, the mark and the cross turn light */
  body.menu-open .site-header { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; color: #fff; }
  body.menu-open .site-header .logo { color: var(--sprout); }
  body.menu-open .site-header .logo__word { color: var(--canvas); }
  body.menu-open .site-header .logo__rule { background: var(--moss); }
  body.menu-open .site-header .logo__sub { color: var(--sprout); }
  .mobile-nav a:first-child { border-top: 0; }
}