*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; background: var(--color-cream); color: var(--color-ink);
  font-family: var(--font-body); font-size: var(--step-0); line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
.icon { width: 1.25em; height: 1.25em; flex: none; stroke-width: 1.75; }
a { color: var(--color-forest); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--color-forest-deep); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 3px; box-shadow: 0 0 0 3px var(--color-forest); border-radius: 2px; }
/* Dark surfaces keep the gold ring alone, which already contrasts with forest. */
.site-footer :focus-visible, .cta-band :focus-visible { box-shadow: none; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 500; color: var(--color-forest); line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 0.5em; font-variation-settings: "opsz" 96; }
h1 { font-size: var(--step-4); } h2 { font-size: var(--step-3); } h3 { font-size: var(--step-2); } h4 { font-size: var(--step-1); }
p, ul, ol { margin: 0 0 1em; }
.display { font-size: var(--step-5); line-height: 1.02; letter-spacing: -0.02em; }
.eyebrow { font-family: var(--font-body); font-size: var(--step--1); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--space-4); }

.container { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-pad); }
.page-hero + .section-prose, .page-hero + .section-media-split { padding-top: 0; }

/* Section background rhythm. Each section marks its own flat background with
   `data-bg`. Two adjacent sections sharing one collapse into a single run so
   the doubled padding where they meet doesn't read as an oversized gap. Most
   components hold their padding on the outer `.section`, but statement and
   highlight hold it on an inner wrapper instead, so that's collapsed too. */
:is([data-bg="cream"] + [data-bg="cream"], [data-bg="sand"] + [data-bg="sand"], [data-bg="forest"] + [data-bg="forest"], [data-bg="forest-deep"] + [data-bg="forest-deep"]) {
  padding-top: 0;
}
:is([data-bg="cream"] + [data-bg="cream"], [data-bg="sand"] + [data-bg="sand"], [data-bg="forest"] + [data-bg="forest"], [data-bg="forest-deep"] + [data-bg="forest-deep"]) > .statement-inner,
:is([data-bg="cream"] + [data-bg="cream"], [data-bg="sand"] + [data-bg="sand"], [data-bg="forest"] + [data-bg="forest"], [data-bg="forest-deep"] + [data-bg="forest-deep"]) > .highlight-inner {
  padding-top: 0;
}
.prose { max-width: var(--prose-max); }
.prose h2 { margin-top: 1.6em; font-size: var(--step-3); }
.prose h3 { margin-top: 1.4em; font-size: var(--step-2); }
.prose > :first-child { margin-top: 0; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: 0.35em; }
.prose li::marker { color: var(--color-gold-deep); }

/* Text that only assistive technology reads, such as the new-tab warning on an
   external link, where an icon alone would leave the warning unspoken. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; white-space: nowrap; border: 0; clip-path: inset(50%);
}

.skip-link { position: absolute; left: 16px; top: -100px; z-index: 200; background: var(--color-forest); color: var(--color-on-dark); padding: 12px 18px; border-radius: var(--radius-sm); }
.skip-link:focus { top: 12px; }
main:focus { outline: none; }

/* Buttons */
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-6); }
.btn {
  --btn-bg: var(--color-gold); --btn-fg: var(--color-ink);
  position: relative; display: inline-flex; align-items: center; gap: 0.6em; overflow: hidden;
  padding: 0.95em 1.6em; border-radius: 999px; border: 1.5px solid var(--btn-bg);
  background: var(--btn-bg); color: var(--btn-fg); font-family: var(--font-body); font-weight: 700; font-size: var(--step--1);
  letter-spacing: 0.02em; text-decoration: none; line-height: 1; cursor: pointer;
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.btn::after { content: "→" / ""; display: inline-block; transition: transform 0.35s var(--ease-out); }
.btn:hover { --btn-bg: var(--color-gold-deep); color: var(--btn-fg); text-decoration: none; }
.btn:hover::after { transform: translateX(4px); }
.btn-ghost { --btn-bg: transparent; --btn-fg: var(--color-forest); border-color: var(--color-forest); }
.btn-ghost:hover { --btn-bg: var(--color-forest); --btn-fg: var(--color-on-dark); }
.btn-sm { padding: 0.75em 1.25em; }
.btn-sm::after { content: none; }
.header-actions { display: flex; align-items: center; gap: var(--space-3); flex: none; }
.header-contact, .header-donate { flex: none; white-space: nowrap; justify-content: center; }
.btn.is-disabled, .btn[aria-disabled="true"] { opacity: 0.6; pointer-events: none; cursor: default; }

/* Pattern band */
.pattern-band { position: relative; height: var(--band-h); overflow: hidden; }
.pattern-band::before {
  content: ""; position: absolute; inset: 0 calc(var(--band-h) * -4) 0 0;
  background: url("../img/pattern-band.svg") repeat-x 0 0 / auto 100%;
  animation: band-drift 6s linear infinite;
}
.pattern-band-lg { --band-h: 16px; }
.site-header > .pattern-band { --band-h: 8px; }
@keyframes band-drift { to { transform: translateX(calc(var(--band-h) * -2)); } }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(251, 247, 239, 0.92); backdrop-filter: saturate(1.2) blur(12px); -webkit-backdrop-filter: saturate(1.2) blur(12px); transition: box-shadow 0.3s var(--ease-out); }
.header-inner { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); min-height: var(--header-h); transition: min-height 0.3s var(--ease-out); }
.site-header.is-condensed .header-inner { min-height: 64px; }
.wordmark { display: inline-flex; flex-direction: column; text-decoration: none; color: var(--color-forest); line-height: 1; flex: none; transition: color 0.3s var(--ease-out); }
.wordmark:hover { text-decoration: none; }
.wordmark-name { font-family: var(--font-heading); font-weight: 600; font-size: 1.75rem; letter-spacing: 0.02em; }
.wordmark-sub { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); margin-top: 4px; transition: color 0.3s var(--ease-out); }
.wordmark-sub .nowrap { white-space: nowrap; }
.wordmark-light { color: var(--color-on-dark); }
.wordmark-light .wordmark-sub { color: var(--color-on-dark-muted); }

.nav-list { display: flex; align-items: center; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.nav-item { position: relative; }
.nav-item.has-dropdown { display: flex; align-items: center; }
.nav-group-link { padding-right: 4px; }
/* The chevron belongs to its label, so it sits tight against it and never draws its own underline. */
.nav-item.has-dropdown .nav-toggle { padding-left: 0; padding-right: 8px; margin-left: -2px; background-image: none; }
.nav-item.has-dropdown .nav-toggle:hover, .nav-item.has-dropdown .nav-toggle.is-current { background-size: 0 2px; }
.nav-link, .nav-toggle {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; border: 0; background: none;
  font: 500 0.95rem/1 var(--font-body); color: var(--color-ink); text-decoration: none; cursor: pointer; border-radius: var(--radius-sm);
  background-image: linear-gradient(var(--color-gold), var(--color-gold)); background-size: 0 2px; background-repeat: no-repeat; background-position: 12px calc(100% - 4px);
  transition: background-size 0.35s var(--ease-out), color 0.2s;
  white-space: nowrap;
}
.nav-link:hover, .nav-toggle:hover, .nav-link[aria-current="page"], .nav-toggle.is-current { background-size: calc(100% - 24px) 2px; color: var(--color-forest); text-decoration: none; }
.chev { width: 10px; transition: transform 0.3s var(--ease-out); }
.nav-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.dropdown {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 300px; list-style: none; margin: 0; padding: 10px;
  background: var(--color-cream); border: 1px solid var(--color-line); border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out), visibility 0.25s;
}
.nav-item.has-dropdown:hover .dropdown, .nav-toggle[aria-expanded="true"] + .dropdown { opacity: 1; visibility: visible; transform: none; }
/* Invisible bridge across the gap so hover survives the move from toggle to menu. */
.dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.dropdown a { display: block; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--color-ink); text-decoration: none; font-size: 0.95rem; line-height: 1.3; transition: background-color 0.2s, padding-left 0.3s var(--ease-out); }
.dropdown a:hover, .dropdown a[aria-current="page"] { background: var(--color-sand); padding-left: 18px; color: var(--color-forest); }

.menu-toggle { display: none; align-items: center; gap: 10px; border: 1.5px solid var(--color-forest); background: none; border-radius: 999px; padding: 10px 16px; font: 700 0.85rem/1 var(--font-body); color: var(--color-forest); cursor: pointer; transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out); }
.menu-toggle-bars { width: 18px; height: 10px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; transition: transform 0.3s; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars { transform: scaleY(0.2); }

.mobile-menu { position: fixed; inset: 0; top: calc(var(--header-h) + var(--band-h)); z-index: 45; background: var(--color-forest); overflow-y: auto; padding: var(--space-6) var(--gutter) var(--space-9); }
.mobile-list { list-style: none; margin: 0; padding: 0; }
.mobile-list > li { border-bottom: 1px solid rgba(251, 247, 239, 0.18); }
.mobile-link, .mobile-group-toggle { display: flex; width: 100%; justify-content: space-between; align-items: center; padding: 18px 0; border: 0; background: none; font: 500 var(--step-1)/1.2 var(--font-heading); color: var(--color-on-dark); text-decoration: none; cursor: pointer; text-align: left; }
.mobile-group-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.mobile-sublist { list-style: none; margin: 0 0 16px; padding: 0 0 0 12px; }
.mobile-sublist a { display: block; padding: 10px 0; color: var(--color-on-dark-muted); text-decoration: none; }
.mobile-sublist a[aria-current="page"], .mobile-link[aria-current="page"] { color: var(--color-gold); font-weight: 700; }
.mobile-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-7); }
/* The open menu is a dark surface, so its ghost button and focus rings switch to the light treatment. */
.mobile-actions .btn-ghost { --btn-fg: var(--color-on-dark); border-color: var(--color-on-dark); }
.mobile-actions .btn-ghost:hover { --btn-bg: var(--color-on-dark); --btn-fg: var(--color-forest); }
.mobile-menu :focus-visible { box-shadow: none; }
.mobile-legal { margin-top: var(--space-8); display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--step--1); line-height: 1.5; color: var(--color-on-dark-muted); }
.mobile-legal p { margin: 0; }
.mobile-legal a { color: var(--color-on-dark-muted); }
.mobile-legal a:hover { color: var(--color-gold); }

@media (max-width: 1279px) {
  /* Below the desktop breakpoint the header is just the wordmark and the menu button. */
  .primary-nav { display: none; }
  .header-actions { display: none; }
  .wordmark-sub { display: none; }
  .menu-toggle { display: inline-flex; margin-left: auto; }
  .header-inner { min-height: 72px; gap: var(--space-4); }
  :root { --header-h: 72px; }
}
html.menu-open, html.menu-open body { overflow: hidden; }
/* The bar with the wordmark and Close button stays cream while the open menu below is green. */
html.menu-open.nav-overlay .template-home .site-header,
html.menu-open.nav-overlay .template-home .site-header.is-condensed {
  background: rgba(251, 247, 239, 0.98); backdrop-filter: none; -webkit-backdrop-filter: none;
}
html.menu-open.nav-overlay .template-home .site-header .wordmark-name,
html.menu-open.nav-overlay .template-home .site-header .wordmark-sub,
html.menu-open.nav-overlay .template-home .site-header .menu-toggle { color: var(--color-forest); }
html.menu-open.nav-overlay .template-home .site-header .menu-toggle { border-color: var(--color-forest); }

/* Overlay navbar, home only, JS-driven (html.nav-overlay is added by nav.js) */
html.nav-overlay .template-home .site-header {
  position: fixed; inset: 0 0 auto 0;
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
  transition: background-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
html.nav-overlay .template-home .site-header > .pattern-band { display: none; }
html.nav-overlay .template-home .site-header .wordmark,
html.nav-overlay .template-home .site-header .nav-link,
html.nav-overlay .template-home .site-header .nav-toggle,
html.nav-overlay .template-home .site-header .menu-toggle {
  color: var(--color-on-dark);
}
html.nav-overlay .template-home .site-header .wordmark-sub { color: var(--color-on-dark-muted); }
html.nav-overlay .template-home .site-header .menu-toggle { border-color: var(--color-on-dark); }
/* The ghost Contact button has no fill of its own, so it needs the same on-dark
   treatment as the plain nav links and menu toggle to read over a photo. */
html.nav-overlay .template-home .site-header .header-contact { --btn-fg: var(--color-on-dark); border-color: var(--color-on-dark); }
/* The forest focus companion ring reads poorly over a photo, so the transparent header keeps the gold outline alone. */
html.nav-overlay .template-home .site-header:not(.is-condensed) :focus-visible { box-shadow: none; }
/* The dropdown panel is still a cream surface even while the header is transparent, so its ring stays. */
html.nav-overlay .template-home .site-header:not(.is-condensed) .dropdown :focus-visible { box-shadow: 0 0 0 3px var(--color-forest); }

html.nav-overlay .template-home .site-header.is-condensed {
  background: rgba(251, 247, 239, 0.92);
  backdrop-filter: saturate(1.2) blur(12px);
  -webkit-backdrop-filter: saturate(1.2) blur(12px);
}
html.nav-overlay .template-home .site-header.is-condensed > .pattern-band { display: block; }
html.nav-overlay .template-home .site-header.is-condensed .wordmark { color: var(--color-forest); }
html.nav-overlay .template-home .site-header.is-condensed .wordmark-sub { color: var(--color-muted); }
html.nav-overlay .template-home .site-header.is-condensed .nav-link,
html.nav-overlay .template-home .site-header.is-condensed .nav-toggle { color: var(--color-ink); }
html.nav-overlay .template-home .site-header.is-condensed .menu-toggle { color: var(--color-forest); border-color: var(--color-forest); }
html.nav-overlay .template-home .site-header.is-condensed .header-contact { --btn-fg: var(--color-forest); border-color: var(--color-forest); }

/* Footer */
.site-footer { background: var(--color-forest); color: var(--color-on-dark); margin-top: 0; }
.site-footer a { color: var(--color-on-dark); }
.site-footer a:hover { color: var(--color-gold); }
.footer-grid { display: grid; gap: var(--space-8); padding-block: var(--space-9) var(--space-8); }
.footer-top { display: grid; gap: var(--space-8) var(--space-7); grid-template-columns: 1fr; }
.wordmark-light .wordmark-name { font-size: clamp(2.5rem, 2rem + 2vw, 3rem); color: var(--color-gold); }
.footer-tagline { font-family: var(--font-heading); font-size: var(--step-1); color: var(--color-on-dark); margin: var(--space-5) 0 var(--space-4); }
.footer-contact { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.footer-contact li { display: flex; align-items: center; gap: var(--space-3); color: var(--color-on-dark-muted); }
.footer-contact .icon { color: var(--color-gold); }
.footer-heading { font-weight: 700; font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-gold); margin-bottom: var(--space-4); }
.footer-nav { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.footer-nav ul { list-style: none; padding: 0; margin: 0; }
.footer-nav li { margin-bottom: 8px; font-size: var(--step--1); line-height: 1.4; }
.footer-nav a { text-decoration: none; }
.footer-bottom-row { display: grid; gap: var(--space-7); grid-template-columns: 1fr; align-items: start; }
/* Each acknowledgement takes a full-width row of its own, the two grouped inside a
   dotted box, and the Baldwin quote takes a full-width row beneath them. The
   full-width shape was chosen after the measure of all three options was reported,
   and the order was chosen after seeing the grouped box rendered.
   Measured in Chrome at a real viewport, not in an iframe, counting the characters
   in each rendered line box rather than dividing a paragraph by its line count,
   which undercounts because the last line is partial. The acknowledgement measure
   runs about 50 characters a line at 390px, 99 at 768px, 132 at 1024px and 161 from
   1280px up, where the container stops growing at 1152px. The long measure is the
   accepted cost of the full-width row, so capping it or pairing the two
   acknowledgements needs a new decision rather than a tidy-up. The gap here is one
   step tighter than the row gap, so the two acknowledgements group together inside
   their box and the quote reads as its own thing beneath them. Note the measure
   above is now taken inside the box padding, so it is a little shorter than the
   figures quoted. */
/* A dotted rule groups the two acknowledgements and separates them from the quote
   above, which read as one undifferentiated block once the quote took its own row.
   The border colour is the muted on-dark text colour at low alpha, so it reads as a
   quiet rule rather than a card edge competing with the gold headings. */
.footer-acknowledgements { display: grid; gap: var(--space-6); grid-template-columns: 1fr; border: 1px dotted rgba(201, 211, 203, 0.55); border-radius: var(--radius-lg); padding: clamp(20px, 3vw, 32px); }
.footer-land p:not(.footer-heading) { color: var(--color-on-dark-muted); font-size: var(--step--1); }
/* The quote is centred and inset from both edges so it does not run the full
   container width like the acknowledgements above it, which keeps it reading as a
   pull quote rather than another block of body copy. The icon and the caption
   centre with it. */
.footer-quote { margin: 0; text-align: center; padding-inline: clamp(16px, 6vw, 96px); }
.footer-quote .icon { width: 44px; height: 44px; color: var(--color-gold); margin: 0 auto var(--space-4); display: block; }
.footer-quote blockquote { margin: 0; font-family: var(--font-heading); font-size: var(--step-2); line-height: 1.25; }
.footer-quote figcaption { margin-top: var(--space-2); color: var(--color-gold); font-weight: 700; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4); padding-block: var(--space-5); border-top: 1px solid rgba(251, 247, 239, 0.15); font-size: var(--step--1); color: var(--color-on-dark-muted); }
.footer-bottom p { margin: 0; }
.footer-credit { display: flex; align-items: center; gap: var(--space-2); }
.footer-credit-link { display: inline-flex; align-items: center; opacity: 1; transition: opacity 0.2s; }
.footer-credit-link:hover { opacity: 0.7; }
.footer-credit-link img { display: block; }
@media (min-width: 900px) {
  .footer-top { grid-template-columns: 1fr 2fr; }
}

/* Page fade transition */
.page-fade { position: fixed; inset: 0; z-index: 100; background: var(--color-cream); pointer-events: none; opacity: 0; transition: opacity 0.3s var(--ease-out); }
html.is-entering .page-fade, html.is-leaving .page-fade { opacity: 1; }

/* Motion initial states (only while motion JS is active) */
.js-motion:not(.reduced-motion) .reveal-up, .js-motion:not(.reduced-motion) .reveal-stagger > * { opacity: 0; transform: translateY(24px); }
.js-motion.reduced-motion .reveal-up, .js-motion.reduced-motion .reveal-stagger > * { opacity: 0; }
.js-motion .reveal-lines { visibility: hidden; }
.js-motion:not(.reduced-motion) .clip-reveal { clip-path: inset(0 0 100% 0); }
.js-motion:not(.reduced-motion) .hero-settle { transform: scale(1.08); }

@media print {
  .reveal-up, .reveal-stagger > *, .reveal-lines, .reveal-lines *, .clip-reveal, .clip-reveal img, .hero-settle, .parallax {
    opacity: 1 !important; transform: none !important; visibility: visible !important; clip-path: none !important;
  }
  .page-fade, .pattern-band, .menu-toggle, .mobile-menu { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .pattern-band::before { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}