/* Gather + Give — ported from Squarespace 7.1
   Palette and type taken from the original site tweak settings. */

:root {
  /* Tonal scale off the original Squarespace accent hue (162deg). The base
     --sage is the brand mid-tone and is unchanged; the steps either side let
     fills, text and hovers sit at different depths instead of all landing on
     the same flat mid-green.

     Contrast note: white on --sage is only 4.34:1, which is below AA for
     normal-size text. Solid fills carrying white text therefore use --sage-700
     (7.36:1) or --sage-900 (12.2:1), and sage text on a light ground uses
     --sage-700 (6.74:1 on --sage-050). */
  --sage-050: #f1f6f5;
  --sage-100: #e0ebe8;
  --sage-200: #c2d6d0;
  --sage-300: #99b8af;
  --sage: #5f8076;
  --sage-700: #3d5c53;
  --sage-900: #223a33;
  --sage-dark: #4d6a61;
  --charcoal: #454342;
  --ink: #1c1b1a;
  --light: #f2f2f2;
  --white: #ffffff;
  --max: 1200px;
  --gutter: clamp(20px, 6vw, 64px);
  --section-y: clamp(56px, 9vw, 112px);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .nav-link, .btn {
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
}

h1, h2, h3, h4 { margin: 0 0 0.5em; line-height: 1.2; font-weight: 600; }
h1 { font-size: clamp(34px, 6vw, 62px); letter-spacing: 0.04em; }
h2 { font-size: clamp(26px, 3.6vw, 38px); letter-spacing: 0.06em; }
h3 { font-size: clamp(19px, 2.2vw, 24px); }
h4 { font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--sage-700); }

img { max-width: 100%; display: block; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 760px; }
/* Causes + FAQ share this width: at full bleed it makes each of the three
   columns ~10% wider than the standard --max wrap. */
.wrap--wide { max-width: 1300px; }

.section { padding: var(--section-y) 0; }
/* Sage-tinted off-white rather than neutral grey, so the light bands read as
   part of the same family as the accent. */
.section--light { background: var(--sage-050); }
.section--sage {
  background: linear-gradient(158deg, var(--sage-700) 0%, var(--sage-900) 100%);
  color: var(--white);
}
.section--sage a { color: var(--white); }

.eyebrow {
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage-700);
  margin-bottom: 14px;
}

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--sage-100);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 84px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.logo { margin-right: auto; }
.logo img { height: 44px; width: auto; }
.logo__text {
  font-family: "Montserrat", sans-serif;
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--charcoal);
  text-decoration: none;
}

.nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 28px); }

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  position: relative;
  padding-bottom: 5px;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--charcoal);
  text-decoration: none;
  white-space: nowrap;
}
.nav-link:hover,
.nav-link:focus-visible { color: var(--sage-700); }

/* Underline sweeps in from the left. */
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-link:hover::after,
.nav-link:focus-visible::after { transform: scaleX(1); }

/* Chevron drawn from borders rather than a glyph - Montserrat has no arrow,
   and a font fallback for one character looks wrong next to the label. The
   flex gap reserves its width at rest, so nothing shifts on hover. */
.nav-link__arrow {
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translateX(-4px) rotate(45deg);
  opacity: 0;
  transition: opacity 0.3s ease,
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-link:hover .nav-link__arrow,
.nav-link:focus-visible .nav-link__arrow {
  opacity: 1;
  transform: translateX(0) rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .nav-link::after,
  .nav-link__arrow { transition: none; }
}

.social { display: flex; gap: 14px; }
.social a { color: var(--charcoal); line-height: 0; }
.social a:hover { color: var(--sage-700); }
.social svg { width: 18px; height: 18px; fill: currentColor; }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  position: relative;
  /* Also used on <button> now, which otherwise inherits UA font and chrome. */
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding: 15px 30px;
  /* --sage-700, not --sage: the label is 13px, and white on the mid-tone is
     below AA at that size. */
  background: var(--sage-700);
  color: var(--white);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--sage-700);
  transition: background-color 0.2s ease, border-color 0.2s ease,
              transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover,
.btn:focus-visible {
  background: var(--sage-900);
  border-color: var(--sage-900);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -8px rgba(34, 58, 51, 0.55);
}
.btn:active { transform: translateY(0); box-shadow: 0 2px 6px -3px rgba(34, 58, 51, 0.5); }
.btn:focus-visible { outline: 2px solid var(--sage-200); outline-offset: 3px; }

.btn--sm { padding: 11px 22px; font-size: 12px; }
.btn--ghost { background: transparent; color: var(--white); border-color: var(--white); }
.btn--ghost:hover, .btn--ghost:focus-visible {
  background: var(--white);
  color: var(--sage-900);
  box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: background-color 0.2s ease, border-color 0.2s ease; }
  .btn:hover, .btn:focus-visible, .btn:active { transform: none; }
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: clamp(420px, 68vh, 620px);
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--white);
  background: var(--charcoal);
  overflow: hidden;
}
.hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(28, 27, 26, 0.42);
}
.hero__inner { position: relative; z-index: 1; padding: 60px var(--gutter); }
.hero h1 { text-transform: uppercase; }
.hero h3 { font-weight: 400; margin-bottom: 28px; }

/* ---------- galleries ---------- */

.grid { display: grid; gap: 14px; }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }


/* ---------- partners ---------- */

.partners { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); }
.partner { display: flex; flex-direction: column; }
.partner p { font-size: 15px; }

/* The share line sits at the bottom of the card. margin-top:auto makes the
   three lines align with each other even though the descriptions above them
   are different lengths (grid stretches the cards to equal height). */
.partner .partner__share {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: 14px;
  border-top: 1px solid var(--sage-200);
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  /* Not --sage: that is below AA on a light ground. --sage-700 is 6.74:1. */
  color: var(--sage-700);
}
.partner .partner__share strong { font-weight: 600; font-size: 18px; }

/* ---------- totals ---------- */

/* Blocks stacked inside a single section (Who We Are / photos / How It Works,
   and Partner Causes / FAQs) - the section supplies the outer padding, these
   supply the rhythm between the blocks inside it. */
.block + .block,
.faq-block { margin-top: clamp(44px, 6vw, 76px); }
.faq-block .acc { margin-top: 32px; }

/* minmax(0, 1fr), not 1fr: the "LOCAL EDUCATION" label is wider than its
   track and would blow the column out, making the three cells unequal. The
   share bars are percentages of their own cell, so unequal cells would stop
   them being comparable to each other. */
.totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 36px; text-align: center; }
.totals .amount {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(26px, 3.4vw, 40px);
  display: block;
  /* Fixed-width digits: without this the figures jitter while counting. */
  font-variant-numeric: tabular-nums;
}
.totals .label { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }

/* The rule under each figure is as wide as that cause's share of the total, so
   it doubles as a bar chart of the 50/40/10 split. */
.totals .share-bar {
  display: block;
  width: calc(var(--share) * 1%);
  height: 2px;
  margin: 16px auto 12px;
  background: rgba(255, 255, 255, 0.45);
  transform-origin: center;
}
/* .is-armed is added by script, so with JS off the bars render at full width. */
.totals.is-armed .share-bar { transform: scaleX(0); }
.totals.is-live .share-bar {
  transform: scaleX(1);
  transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  .totals .share-bar { transform: none !important; transition: none !important; }
}

/* ---------- accordion / faq ---------- */

.acc { border-top: 1px solid rgba(69, 67, 66, 0.18); }
.acc details { border-bottom: 1px solid rgba(69, 67, 66, 0.18); }

/* On the home page the FAQs run as three columns, one question each, on the
   same grid as the partner cards above so the two rows of columns line up.
   Scoped to .faq-block - the Event Info accordion stays stacked. */
.faq-block .acc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
  border-top: 0;
}
.faq-block .acc details {
  border-top: 1px solid var(--sage-200);
  border-bottom: 1px solid var(--sage-200);
  align-self: start;
}

/* The FAQs sit on the sage band, so the accordion has to invert: light
   hairlines, light marker, and an eyebrow that reads on a dark ground. */
.section--sage .acc details {
  border-top-color: rgba(255, 255, 255, 0.28);
  border-bottom-color: rgba(255, 255, 255, 0.28);
}
.section--sage .acc summary::after { color: rgba(255, 255, 255, 0.75); }

.faq-eyebrow {
  display: block;
  margin-bottom: 8px;
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.faq-q { display: block; }
.acc summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 40px 20px 0;
  position: relative;
  font-family: "Montserrat", sans-serif;
  font-size: 17px;
}
.faq-block .acc summary { font-size: 16px; line-height: 1.35; }
/* The marker lines up with the question, not the middle of the whole block. */
.faq-block .acc summary::after { top: auto; bottom: 22px; transform: none; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: var(--sage-700);
}
.acc details[open] summary::after { content: "\2013"; }
.acc .acc__body { padding: 0 0 22px; }
.acc .acc__body p { font-size: 16px; }

/* Event Info sits on the tinted band, so the accordion becomes a card to give
   it an edge to sit against. Container-level only - the items inside are
   unchanged, as is the FAQ accordion on the home page. */
.acc--card {
  margin-top: clamp(28px, 4vw, 40px);
  padding: 0 clamp(20px, 3vw, 32px);
  background: var(--white);
  border: 1px solid var(--sage-200);
  border-top: 1px solid var(--sage-200);
}
.acc--card details { border-bottom: 1px solid var(--sage-100); }
.acc--card details:last-of-type { border-bottom: 0; }
.acc--card summary { padding: 24px 40px 24px 0; }
.acc--card summary:hover { color: var(--sage-700); }
.acc--card details[open] summary { color: var(--sage-700); }

/* ---------- footer ---------- */

.site-footer {
  background: var(--charcoal);
  color: var(--white);
  padding: clamp(48px, 7vw, 72px) 0;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.site-footer a { color: var(--white); text-decoration: none; }

/* Brand, then the same links as the nav, then the icons. */
.site-footer__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 32px 48px;
}

.site-footer__brand img { height: 34px; width: auto; }
.site-footer__brand p { margin: 14px 0 0; font-size: 12px; opacity: 0.75; }

.site-footer__nav { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.site-footer__nav a {
  position: relative;
  padding-bottom: 4px;
}
/* Same underline as the nav, so the two read as the same set of links. */
.site-footer__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-footer__nav a:hover::after,
.site-footer__nav a:focus-visible::after { transform: scaleX(1); }

.site-footer__social { gap: 16px; }
.site-footer__social a { color: var(--white); opacity: 0.8; line-height: 0; }
.site-footer__social a:hover,
.site-footer__social a:focus-visible { opacity: 1; }
.site-footer__social svg { width: 18px; height: 18px; fill: currentColor; }

@media (prefers-reduced-motion: reduce) {
  .site-footer__nav a::after { transition: none; }
}

@media (max-width: 780px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 28px;
  }
  .site-footer__nav { justify-content: center; }
}

/* ---------- sponsorship tiers ---------- */

#sponsorship { scroll-margin-top: 96px; }

.tiers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(32px, 4vw, 48px);
}
.tier {
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.04);
}
.tier__name {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.tier__price {
  margin: 12px 0 0;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.tier__includes {
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  list-style: none;
  font-size: 14px;
  line-height: 1.5;
}
.tier__includes li + li { margin-top: 8px; }

.sponsor-contact { margin-top: clamp(30px, 4vw, 44px); }
.sponsor-contact p { font-size: 15px; }

/* The default eyebrow colour is tuned for light grounds. */
.section--sage .eyebrow { color: rgba(255, 255, 255, 0.72); }

/* ---------- contact panel ---------- */

.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-item + .contact-item {
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid var(--sage-100);
}
.contact-item__label {
  margin: 0 0 6px;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage-700);
}
.contact-item__name {
  margin: 0 0 8px;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  color: var(--ink);
}
.contact-item__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.contact-item__email {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(15px, 2.1vw, 18px);
  color: var(--ink);
  text-decoration: none;
  /* Addresses are long relative to a 480px panel. */
  overflow-wrap: anywhere;
}
.contact-item__email:hover,
.contact-item__email:focus-visible {
  color: var(--sage-700);
  text-decoration: underline;
}
.contact-item__copy {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--sage-700);
  background: transparent;
  border: 1px solid var(--sage-200);
  border-radius: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: background-color 0.15s ease, border-color 0.15s ease,
              color 0.15s ease;
}
.contact-item__copy svg { display: block; width: 15px; height: 15px; }
.contact-item__copy:hover,
.contact-item__copy:focus-visible {
  background: var(--sage-700);
  border-color: var(--sage-700);
  color: var(--white);
}

/* Confirmation beside the icon. Kept in the DOM with aria-live so the copy is
   announced; the text is cleared afterwards so a second copy re-announces. */
.contact-item__copied {
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage-700);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.contact-item__copied.is-shown { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .contact-item__copied { transition: none; }
}

/* ---------- side drawer ---------- */

/* A <dialog> reset into a right-hand slide-over. The browser gives us focus
   containment, Escape and an inert background; this only handles looks. */
.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  margin: 0;
  width: min(480px, 100%);
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  padding: 0;
  border: 0;
  background: var(--white);
  color: var(--ink);
  box-shadow: -20px 0 60px -30px rgba(28, 27, 26, 0.5);
  overflow: hidden;
  transform: translateX(100%);
  transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}
.drawer[open] { display: flex; flex-direction: column; }
.drawer.is-open { transform: translateX(0); }
.drawer::backdrop { background: rgba(28, 27, 26, 0.45); }

.drawer__head {
  display: flex;
  align-items: center;
  gap: 16px;
  /* No bottom rule, and no bottom padding: the title should read as the
     form's own heading rather than a section header sitting above it. */
  padding: clamp(32px, 5vw, 46px) clamp(18px, 4vw, 28px) 0;
}
.drawer__title {
  flex: 1;
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(24px, 3.2vw, 30px);
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.drawer__close {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--sage-200);
  background: transparent;
  color: var(--charcoal);
  font-family: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
              color 0.15s ease;
}
.drawer__close:hover,
.drawer__close:focus-visible {
  background: var(--sage-700);
  border-color: var(--sage-700);
  color: var(--white);
}

.drawer__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* Tight to the heading above it, normal padding elsewhere. */
  padding: clamp(14px, 2.4vw, 20px) clamp(18px, 4vw, 28px) clamp(20px, 4vw, 30px);
}
.drawer__body givebutter-widget { display: block; }
.drawer__fallback { font-size: 15px; }
.drawer__loading {
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage-700);
}

/* Stop the page behind the panel from scrolling. */
html.drawer-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .drawer { transition: none; }
}

/* ---------- utility ---------- */

.center { text-align: center; }
.stack > * + * { margin-top: 22px; }
.note {
  border-left: 3px solid var(--sage-700);
  padding: 4px 0 4px 16px;
  font-size: 15px;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 12px;
  top: 12px;
  z-index: 100;
  background: var(--white);
  padding: 10px 16px;
}

@media (max-width: 900px) {
  .partners, .totals, .faq-block .acc { grid-template-columns: 1fr; }
  .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* Three labels plus the social icons cannot share a row with the logo below
   about 780px, so the header becomes two centred rows: logo, then nav. */
@media (max-width: 780px) {
  .site-header__inner {
    flex-wrap: wrap;
    justify-content: center;
    min-height: 0;
    gap: 0;
    row-gap: 12px;
    padding-top: 16px;
    padding-bottom: 14px;
  }
  .logo { margin-right: 0; width: 100%; }
  .logo img { height: 32px; margin: 0 auto; }
  .nav { width: 100%; justify-content: center; gap: clamp(14px, 4vw, 26px); }
  .nav-link { font-size: 12px; letter-spacing: 0.1em; gap: 0; }
  /* No hover on touch, and the reserved width is worth reclaiming here. */
  .nav-link__arrow { display: none; }
}

@media (max-width: 600px) {
  .logo img { height: 28px; }
  .nav-link { font-size: 11px; letter-spacing: 0.06em; }
  .social { gap: 12px; }
  .social svg { width: 16px; height: 16px; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .tiers { grid-template-columns: 1fr; }
}