/* =========================================================
   Alia Vita — warm editorial system
   Display: Newsreader (variable)  ·  Text: Satoshi (variable)
   Self-hosted: no third-party font CDN (GDPR)
   ========================================================= */

@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-latin.woff2') format('woff2');
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-latin-ext.woff2') format('woff2');
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-italic-latin.woff2') format('woff2');
  font-weight: 300 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Variable.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-VariableItalic.woff2') format('woff2');
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  --paper: #f7f2e8;
  --paper-2: #efe7d6;
  --paper-3: #e6dbc5;
  --ink: #232821;
  --ink-2: #414a3c;
  /* #6a7263 measured 4.48:1 on the cream paper, a hair under the 4.5 AA
     minimum for body text. Darkened just enough to clear it. */
  --ink-soft: #5f6757;
  --terra: #a9502f;
  --terra-lt: #c4714b;
  --sea: #2f5d5a;
  --ochre: #a8762b;
  --line: rgba(35, 40, 33, 0.15);
  --line-2: rgba(35, 40, 33, 0.28);

  --display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --text: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --pad: clamp(1.25rem, 5vw, 5.5rem);
  --maxw: 1440px;
  --rhythm: clamp(4.5rem, 11vw, 10rem);
}

/* ---------- reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
}
h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-variation-settings: 'opsz' 20;
  letter-spacing: -0.015em;
  line-height: 1.06;
  text-wrap: balance;
}
p {
  margin: 0 0 1.1em;
  text-wrap: pretty;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* paper grain — printed feel, sits above everything, ignores pointer */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

/* ---------- shared ---------- */
.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
  max-width: 5rem;
}
.lead {
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.45rem);
  line-height: 1.5;
  color: var(--ink-2);
}
.muted {
  color: var(--ink-soft);
}

/* buttons */
.btn {
  --bg: var(--terra);
  --fg: var(--paper);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.9rem;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--bg);
  text-decoration: none;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 0.25s, color 0.25s, transform 0.25s;
}
.btn:hover {
  background: var(--ink);
  border-color: var(--ink);
  transform: translateY(-2px);
}
.btn--ghost {
  --bg: transparent;
  --fg: var(--ink);
  border-color: var(--line-2);
}
.btn--ghost:hover {
  --fg: var(--paper);
}
.link-u {
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 3px;
  transition: border-color 0.25s, color 0.25s;
}
.link-u:hover {
  border-color: var(--terra);
  color: var(--terra);
}

:where(a, button, input, textarea):focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 3px;
}

/* ---------- announcement ---------- */
.notice {
  background: var(--ink);
  color: #e9e6dc;
  font-size: 0.83rem;
  text-align: center;
  padding: 0.72rem var(--pad);
  letter-spacing: 0.01em;
}
.notice a {
  color: #fff;
  text-underline-offset: 4px;
}

/* ---------- header ---------- */
.hdr {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(247, 242, 232, 0.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.hdr__in {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0.9rem var(--pad);
  display: flex;
  align-items: center;
  gap: 2rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  margin-right: auto;
}
.brand img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.brand:hover img {
  transform: translateY(-4px) rotate(-9deg);
}
.brand span {
  font-family: var(--display);
  font-size: 1.42rem;
  font-variation-settings: 'opsz' 16;
  letter-spacing: 0.01em;
}
.nav {
  display: flex;
  gap: 1.9rem;
}
.nav a {
  text-decoration: none;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 0.35rem 0;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.nav a:hover {
  color: var(--terra);
  border-color: var(--terra);
}
.lang {
  display: flex;
  gap: 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
}
.lang a {
  text-decoration: none;
  color: var(--ink-soft);
  opacity: 0.55;
}
.lang a:hover {
  opacity: 1;
}
.lang a[aria-current] {
  color: var(--terra);
  opacity: 1;
}
.hdr .btn {
  padding: 0.72rem 1.35rem;
  font-size: 0.7rem;
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: clamp(560px, 84vh, 880px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero__img {
  position: absolute;
  inset: 0;
}
.hero__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}
/* duotone wash: warms the photo into the palette */
.hero__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
      175deg,
      rgba(35, 40, 33, 0.5) 0%,
      rgba(35, 40, 33, 0.12) 38%,
      rgba(35, 40, 33, 0.62) 88%
    ),
    linear-gradient(90deg, rgba(47, 93, 90, 0.28), rgba(169, 80, 47, 0.16));
}
.hero__in {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin-inline: auto;
  width: 100%;
  padding: 0 var(--pad) clamp(3rem, 7vw, 6rem);
  color: #fdfaf3;
}
.hero .eyebrow {
  color: rgba(253, 250, 243, 0.82);
}
.hero .eyebrow::after {
  background: rgba(253, 250, 243, 0.35);
}
.hero h1 {
  font-size: clamp(2.1rem, 1rem + 5.4vw, 7.4rem);
  font-variation-settings: 'opsz' 26;
  font-weight: 400;
  line-height: 1.0;
  max-width: 16ch;
  letter-spacing: -0.028em;
  text-shadow: 0 2px 40px rgba(20, 24, 19, 0.32);
  overflow-wrap: break-word;
}
.hero h1 em {
  font-style: normal;
  color: #f0b48c;
}
.hero__lead {
  max-width: 46ch;
  margin: 1.9rem 0 2.4rem;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  line-height: 1.55;
  color: rgba(253, 250, 243, 0.93);
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.6rem;
  align-items: center;
}
.hero .btn--ghost {
  --fg: #fdfaf3;
  border-color: rgba(253, 250, 243, 0.5);
}
.hero .btn--ghost:hover {
  background: #fdfaf3;
  --fg: var(--ink);
  border-color: #fdfaf3;
}
.hero__place {
  position: absolute;
  right: var(--pad);
  bottom: clamp(3rem, 7vw, 6rem);
  z-index: 2;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(253, 250, 243, 0.66);
  writing-mode: vertical-rl;
}

/* ---------- section frame ---------- */
.sec {
  padding-block: var(--rhythm);
}
.sec--sand {
  background: var(--paper-2);
}
.sec__head {
  max-width: 36ch;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.sec__head h2 {
  font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.4rem);
  font-variation-settings: 'opsz' 20;
}

/* ---------- about: asymmetric split ---------- */
.about {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.about h2 {
  font-size: clamp(1.75rem, 1rem + 2.4vw, 3.05rem);
  font-variation-settings: 'opsz' 20;
  margin-bottom: 1.6rem;
}
.about h2 em {
  font-style: normal;
  color: var(--terra);
}
.about__meta {
  font-size: 0.95rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
  margin-top: 2rem;
}
.about__meta strong {
  color: var(--ink);
  font-weight: 600;
}
.about__fig {
  position: relative;
}
/* :not(.about__bird) matters — the decorative bird is also an img in here,
   and a bare `.about__fig img` outranks `.about__bird` on specificity. */
.about__fig img:not(.about__bird) {
  /* portrait-composed photograph: fixed 4/5 frame, matching the source's
     own 928x1152 ratio, so effectively nothing is cropped away */
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.02);
}
/* bird escapes the image frame — deliberate grid-break */
.about__fig img.about__bird {
  position: absolute;
  left: -34px;
  bottom: -30px;
  width: clamp(78px, 9vw, 132px);
  height: auto;
  aspect-ratio: auto;
  opacity: 0.9;
  transform: rotate(-13deg);
}

/* ---------- fable band ---------- */
.fable {
  background: var(--terra);
  color: #fdf6ee;
  position: relative;
  overflow: hidden;
  padding-block: clamp(4rem, 9vw, 8rem);
}
.fable__in {
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: var(--pad);
  position: relative;
  z-index: 2;
  text-align: center;
}
.fable blockquote {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.55rem, 0.9rem + 2.9vw, 3.3rem);
  font-variation-settings: 'opsz' 22;
  font-style: italic;
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.02em;
}
.fable figcaption {
  margin-top: 2rem;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(253, 246, 238, 0.7);
}
.fable__bird {
  position: absolute;
  right: -3%;
  top: -12%;
  width: clamp(200px, 34vw, 520px);
  opacity: 0.11;
  transform: rotate(9deg);
  filter: invert(1);
  z-index: 1;
}

/* ---------- pillars: editorial numbered rows ---------- */
.pillar {
  display: grid;
  grid-template-columns: minmax(0, 4.2rem) minmax(0, 0.92fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
}
.pillar:last-child {
  border-bottom: 1px solid var(--line);
}
.pillar__n {
  font-family: var(--display);
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3.6rem);
  font-variation-settings: 'opsz' 22;
  font-weight: 400;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-2);
  padding-top: 0.15em;
}
.pillar h3 {
  font-size: clamp(1.45rem, 1rem + 1.5vw, 2.35rem);
  font-variation-settings: 'opsz' 18;
  margin-bottom: 1rem;
}
.pillar__body p:last-child {
  margin-bottom: 0;
}
.pillar__tag {
  display: inline-block;
  margin-top: 1.4rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.35rem 0.8rem;
  border: 1px solid currentColor;
  color: var(--accent, var(--terra));
}
.pillar ul {
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.pillar ul li {
  padding: 0.7rem 0 0.7rem 1.15rem;
  border-bottom: 1px dotted var(--line);
  position: relative;
}
.pillar ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.32rem;
  width: 5px;
  height: 5px;
  background: var(--accent, var(--terra));
  border-radius: 50%;
}
.pillar ul li:last-child {
  border-bottom: 0;
}

/* ---------- full-bleed breather band ---------- */
.band {
  position: relative;
  min-height: clamp(340px, 48vh, 560px);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.band > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.band::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
      100deg,
      rgba(35, 40, 33, 0.72),
      rgba(35, 40, 33, 0.34)
    ),
    linear-gradient(rgba(47, 93, 90, 0.2), rgba(169, 80, 47, 0.2));
}
.band__in {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  padding-inline: var(--pad);
}
.band__in p {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.9rem, 1rem + 4.4vw, 4.6rem);
  font-variation-settings: 'opsz' 24;
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: #fdfaf3;
}
.band__in em {
  font-style: normal;
  color: #f0b48c;
}

/* ---------- volunteers ----------
   Compact square portraits, as many per row as fit. auto-fill (not auto-fit)
   so three people stay small instead of stretching to fill the row. */
.vols {
  --vols-gap: clamp(1.25rem, 2.4vw, 2.25rem);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: var(--vols-gap);
}
/* When there is room for the whole row, use the balanced column count written
   onto the container as --vol-cols. auto-fill on its own fills each row to
   capacity and strands the leftovers: seven volunteers become six plus a lonely
   seventh, where 4 + 3 reads far better. Below this width auto-fill is still
   the right answer, because the count that balances is whatever fits. */
@media (min-width: 1080px) {
  /* Flex rather than grid, purely so an incomplete last row sits centred.
     CSS grid always packs the leftovers to the start, which left three
     volunteers hugging the left edge under a row of four. The cards are still
     exactly the width a --vol-cols grid would give them, so nothing else
     about the row changes. */
  .vols {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .vols > * {
    flex: 0 0 calc(
      (100% - (var(--vol-cols, 6) - 1) * var(--vols-gap)) / var(--vol-cols, 6)
    );
  }
}
.vol figure {
  margin: 0;
}
.vol img {
  width: 100%;
  /* height:auto is required — the width/height HTML attributes map to a real
     `height` presentational hint, and aspect-ratio is ignored unless one
     dimension is auto. Without this the square renders as a tall strip. */
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: saturate(0.9);
  transition: filter 0.5s, transform 0.6s;
}
.vol:hover img {
  filter: saturate(1.05);
  transform: scale(1.015);
}
.vol blockquote {
  margin: 0.95rem 0 0.7rem;
  /* sans, roman, darker: small italic serif was hard to read at this size */
  font-family: var(--text);
  font-size: 0.94rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-2);
}
.vol cite {
  font-style: normal;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: block;
}
.vol .vol__when {
  font-size: 0.74rem;
  color: var(--ink-soft);
  margin-top: 0.2rem;
  letter-spacing: 0.02em;
}

/* ---------- team ----------
   Always four across on desktop, square photo, bio underneath. Capped width
   keeps the squares compact instead of ballooning on a wide screen. */
.team {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.4vw, 2.25rem);
}
.person img {
  width: 100%;
  height: auto; /* see note on .vol img */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: grayscale(0.28) saturate(0.9);
  transition: filter 0.5s;
}
.person:hover img {
  filter: grayscale(0) saturate(1);
}
.person h3 {
  font-size: 1.12rem;
  font-variation-settings: 'opsz' 14;
  margin: 0.9rem 0 0.25rem;
}
.person .role {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 0.55rem;
}
.person p {
  font-size: 0.83rem;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
}
.person__ph {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--paper-3);
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  font-family: var(--display);
  font-size: 2.1rem;
  font-variation-settings: 'opsz' 20;
}

/* ---------- principles ---------- */
.vals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.val {
  background: var(--paper);
  padding: clamp(1.6rem, 3vw, 2.5rem);
}
.val__n {
  font-family: var(--display);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--terra);
  margin-bottom: 1.6rem;
}
.val h3 {
  font-size: 1.25rem;
  font-variation-settings: 'opsz' 16;
  margin-bottom: 0.6rem;
}
.val p {
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.55;
}

/* ---------- join ---------- */
.join {
  background: var(--ink);
  color: #eae7dc;
  padding-block: clamp(4rem, 9vw, 8rem);
}
.join__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
}
.join h2 {
  font-size: clamp(1.9rem, 1.1rem + 2.8vw, 3.5rem);
  font-variation-settings: 'opsz' 20;
  color: #fdfaf3;
  font-weight: 400;
}
.join .eyebrow {
  color: rgba(234, 231, 220, 0.6);
}
.join .eyebrow::after {
  background: rgba(234, 231, 220, 0.25);
}
.join p {
  color: rgba(234, 231, 220, 0.78);
}
.join__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 1.5rem;
}
.join .btn--ghost {
  --fg: #eae7dc;
  border-color: rgba(234, 231, 220, 0.35);
}
.join .btn--ghost:hover {
  background: #eae7dc;
  --fg: var(--ink);
}
.join__contact {
  font-size: 0.9rem;
  color: rgba(234, 231, 220, 0.65);
}
.join__contact a {
  color: #fdfaf3;
  text-decoration: none;
  border-bottom: 1px solid rgba(253, 250, 243, 0.3);
}

/* ---------- footer ---------- */
.ftr {
  background: var(--ink);
  color: rgba(234, 231, 220, 0.62);
  border-top: 1px solid rgba(234, 231, 220, 0.13);
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
  font-size: 0.9rem;
}
.ftr__in {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
}
.ftr__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}
.ftr__brand img {
  width: 30px;
  filter: invert(1);
  opacity: 0.85;
}
.ftr__brand span {
  font-family: var(--display);
  font-size: 1.3rem;
  color: #fdfaf3;
}
.ftr h2 {
  font-family: var(--text);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: rgba(234, 231, 220, 0.45);
  margin-bottom: 1.1rem;
}
.ftr li {
  margin-bottom: 0.55rem;
}
.ftr a {
  text-decoration: none;
  transition: color 0.2s;
}
.ftr a:hover {
  color: #fdfaf3;
}
.ftr__base {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.6rem;
  border-top: 1px solid rgba(234, 231, 220, 0.13);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  justify-content: space-between;
  font-size: 0.8rem;
  color: rgba(234, 231, 220, 0.42);
}

/* ---------- reveal (progressive enhancement) ----------
   No JS  ->  everything visible. JS only opts in to animating. */
.js [data-rise] {
  opacity: 0;
  transform: translateY(22px);
}
.js [data-rise].in {
  opacity: 1;
  transform: none;
  transition: opacity 0.85s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .js [data-rise] {
    opacity: 1;
    transform: none;
  }
}

/* ---------- responsive ---------- */
/* Below 1080px the nav moves to its own row and scrolls sideways.
   No hamburger, no JS: the links are always reachable. */
@media (max-width: 1080px) {
  .hdr__in {
    flex-wrap: wrap;
    row-gap: 0;
  }
  .nav {
    order: 5;
    width: 100%;
    margin-top: 0.85rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--line);
    gap: 1.4rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .nav::-webkit-scrollbar {
    display: none;
  }
  .nav a {
    white-space: nowrap;
  }
}
@media (max-width: 900px) {
  .about,
  .join__in,
  .ftr__in {
    grid-template-columns: 1fr;
  }
  /* four across is far too small on a phone — 73px squares at 390px wide */
  .team {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pillar {
    grid-template-columns: 3rem 1fr;
  }
  .pillar ul {
    grid-column: 2 / -1;
  }
  .hero__place {
    display: none;
  }
  .about__fig img.about__bird {
    left: auto;
    right: 10px;
    bottom: -20px;
  }
}
@media (max-width: 620px) {
  .hdr__in {
    gap: 0.75rem;
  }
  .brand {
    gap: 0.45rem;
  }
  .brand img {
    width: 40px;
    height: 40px;
  }
  .brand span {
    font-size: 1.1rem;
  }
  .lang {
    gap: 0.4rem;
    font-size: 0.66rem;
  }
  .hdr .btn {
    padding: 0.58rem 0.85rem;
    font-size: 0.6rem;
    letter-spacing: 0.08em;
  }
  .notice {
    font-size: 0.76rem;
    line-height: 1.45;
  }
  /* stop any child from forcing the row wider than the screen */
  .hdr__in > * {
    min-width: 0;
  }
  .hero__cta .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* =========================================================
   PROJECTS PAGE
   ========================================================= */

/* page head — no hero image, the projects carry the pictures */
.phead {
  padding-block: clamp(3rem, 7vw, 6rem) clamp(2rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--line);
}
.phead h1 {
  font-size: clamp(2rem, 1.2rem + 3.2vw, 4.1rem);
  font-variation-settings: 'opsz' 24;
  max-width: 20ch;
  line-height: 1.04;
}
.phead__lead {
  max-width: 56ch;
  margin-top: 1.8rem;
}

/* phase marker: "Happening now" / "Coming next" */
.phase {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  flex-wrap: wrap;
}
.phase h2 {
  font-size: clamp(1.3rem, 1rem + 1vw, 1.85rem);
  font-variation-settings: 'opsz' 18;
}
.phase__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--terra);
  box-shadow: 0 0 0 5px rgba(169, 80, 47, 0.16);
  flex: none;
}
.phase__dot--open {
  background: transparent;
  border: 2px solid var(--ink-soft);
  box-shadow: none;
}
.phase__rule {
  flex: 1;
  height: 1px;
  background: var(--line);
  min-width: 1.5rem;
}
.phase__count {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* big alternating project rows */
.proj {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 4.5rem);
  align-items: center;
  padding-block: clamp(2rem, 4vw, 3.5rem);
  border-top: 1px solid var(--line);
}
.proj:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.proj--flip .proj__fig {
  order: 2;
}
.proj__fig {
  margin: 0; /* <figure> ships with a 40px UA margin that insets the image */
}
.proj__fig img {
  width: 100%;
  height: auto; /* see note on .vol img */
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.proj__body h3 {
  font-size: clamp(1.45rem, 1rem + 1.5vw, 2.3rem);
  font-variation-settings: 'opsz' 20;
  margin: 0.75rem 0 1rem;
}
.proj__tag {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent, var(--terra));
}
.proj__tag--light {
  color: rgba(253, 246, 238, 0.75);
}
.proj__body p {
  color: var(--ink-2);
  font-size: 0.97rem;
  line-height: 1.6;
}
.proj__facts {
  margin-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
}
.proj__facts li {
  display: flex;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px dotted var(--line);
  color: var(--ink-2);
}
.proj__facts span {
  flex: 0 0 8.5rem;
  color: var(--ink-soft);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding-top: 0.22rem;
}

/* honest stand-in where we have no photograph yet */
.proj__ph,
.card__ph {
  aspect-ratio: 3 / 2;
  background: var(--paper-3);
  border: 1px solid var(--line);
  display: grid;
  place-content: center;
  text-align: center;
  gap: 0.4rem;
  padding: 1.5rem;
}
.proj__ph span {
  font-family: var(--display);
  font-size: clamp(3rem, 6vw, 5rem);
  font-variation-settings: 'opsz' 24;
  line-height: 1;
  color: var(--accent, var(--terra));
}
.proj__ph em {
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.card__ph span {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-variation-settings: 'opsz' 18;
  color: var(--ink-soft);
}

/* smaller two-up cards for upcoming work */
.grid2 {
  display: grid;
  /* fixed 2-up: auto-fit gave 3 columns and left a lone orphan card */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.75rem);
}
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.card > img {
  width: 100%;
  height: auto; /* see note on .vol img */
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.card__body {
  padding: clamp(1.25rem, 2.4vw, 1.9rem);
}
.card__body h3 {
  font-size: 1.35rem;
  font-variation-settings: 'opsz' 18;
  margin: 0.6rem 0 0.7rem;
}
.card__body p {
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.58;
  margin: 0;
}

/* GREENEYE — the one big ambition, so it gets a band of its own */
.greeneye {
  margin-top: clamp(2rem, 4vw, 3.5rem);
  background: var(--sea);
  color: #f2f6f4;
  padding: clamp(2.25rem, 5vw, 4.5rem);
}
.greeneye__in {
  max-width: 62ch;
}
.greeneye h3 {
  font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4.4rem);
  font-variation-settings: 'opsz' 26;
  color: #fff;
  letter-spacing: 0.02em;
  margin: 0.7rem 0 1.1rem;
}
.greeneye__lead {
  font-family: var(--display);
  font-size: clamp(1.1rem, 1rem + 0.7vw, 1.5rem);
  font-variation-settings: 'opsz' 16;
  line-height: 1.4;
  color: #fff;
}
.greeneye p {
  color: rgba(242, 246, 244, 0.82);
  font-size: 0.97rem;
}
.greeneye .btn {
  margin-top: 0.8rem;
  --bg: #f2f6f4;
  --fg: var(--sea);
}
.greeneye .btn:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

@media (max-width: 820px) {
  .proj,
  .proj--flip .proj__fig,
  .grid2 {
    grid-template-columns: 1fr;
    order: 0;
  }
  .proj__facts span {
    flex-basis: 6.5rem;
  }
}


/* pillar row: heading column + text column */
.pillar__head h3 {
  margin-bottom: 0.85rem;
}
.pillar__text {
  color: var(--ink-2);
  margin: 0;
  padding-top: 0.35rem;
}

/* section-closing call to action */
.work__cta {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}
.work__cta-note {
  margin: 1rem 0 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
@media (max-width: 900px) {
  .pillar {
    grid-template-columns: 3rem minmax(0, 1fr);
  }
  .pillar__text {
    grid-column: 2 / -1;
    padding-top: 0;
  }
}


/* sub-line under a section headline */
.sec__sub {
  margin: 1.1rem 0 0;
  font-size: 0.98rem;
  color: var(--ink-soft);
  max-width: 46ch;
}

/* icon panels: used where we have no photograph yet, built from the
   association's own icon set so they read as designed, not as a gap */
.iconpanel {
  aspect-ratio: 3 / 2;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.9rem;
  padding: 1.75rem;
  text-align: center;
  background: var(--panel, var(--paper-3));
  border: 1px solid var(--line);
}
.iconpanel img {
  width: clamp(64px, 12vw, 108px);
  height: auto;
  opacity: 0.5;
}
.iconpanel__n {
  font-family: var(--display);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-variation-settings: 'opsz' 24;
  line-height: 1;
  color: var(--accent, var(--terra));
}
.iconpanel__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  max-width: 22ch;
  line-height: 1.5;
}

.proj__fig .iconpanel img {
  width: clamp(96px, 15vw, 172px);
}
.proj__fig .iconpanel__label {
  max-width: 34ch;
}

/* =========================================================
   PHONE
   Not a squeezed desktop layout: long stacked grids become
   swipeable rows, and the vertical rhythm tightens so the
   page is a reasonable scroll on a handset.
   ========================================================= */

.swipe-hint {
  display: none;
}

@media (max-width: 760px) {
  :root {
    --rhythm: 3.25rem; /* was up to 10rem — far too airy on a phone */
  }

  /* hero: leave room for the notice + header without a 90vh wall */
  .hero {
    min-height: 66vh;
  }
  .hero__lead {
    margin: 1.1rem 0 1.6rem;
  }

  /* section headings tighter */
  .sec__head {
    margin-bottom: 1.75rem;
  }
  .eyebrow {
    margin-bottom: 1rem;
  }

  /* three areas: number sits inline with the title, text right under it */
  .pillar {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding-block: 1.6rem;
  }
  .pillar__n {
    font-size: 1.1rem;
    -webkit-text-stroke: 0;
    color: var(--accent, var(--terra));
    opacity: 0.75;
    padding-top: 0;
  }
  .pillar__head h3 {
    margin-bottom: 0.6rem;
  }
  .pillar__text {
    grid-column: 1;
    font-size: 0.95rem;
    line-height: 1.55;
  }
  .pillar__tag {
    font-size: 0.6rem;
  }

  /* ---- swipeable rows ----
     Cards bleed to both screen edges so it is obvious there is more
     to the right. Negative margin cancels the .wrap padding. */
  .vols,
  .team {
    display: flex;
    grid-template-columns: none;
    gap: 0.85rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--pad);
    margin-inline: calc(var(--pad) * -1);
    padding-inline: var(--pad);
    padding-bottom: 0.5rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
  }
  .vols::-webkit-scrollbar,
  .team::-webkit-scrollbar {
    display: none;
  }
  .vol,
  .person {
    flex: 0 0 63%;
    scroll-snap-align: start;
  }
  .vol blockquote {
    font-size: 0.89rem;
    margin: 0.75rem 0 0.55rem;
  }
  .person p {
    font-size: 0.8rem;
  }

  .swipe-hint {
    display: block;
    margin: -0.4rem 0 0.9rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }

  /* principles: 2x2 instead of four tall blocks */
  .vals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .val {
    padding: 1.1rem 0.9rem;
  }
  .val__n {
    margin-bottom: 0.9rem;
  }
  .val h3 {
    font-size: 1.05rem;
  }
  .val p {
    font-size: 0.83rem;
  }

  /* full-bleed bands get shorter */
  .fable {
    padding-block: 3rem;
  }
  .band {
    min-height: 280px;
  }
  .join,
  .greeneye {
    padding-block: 3rem;
  }

  /* projects page */
  .proj {
    padding-block: 1.75rem;
    gap: 1.25rem;
  }
  .proj__facts span {
    flex-basis: 5.75rem;
    font-size: 0.62rem;
  }
  .grid2 {
    gap: 1.1rem;
  }
  .phead {
    padding-block: 2.25rem 1.75rem;
  }
}

/* very small handsets */
@media (max-width: 400px) {
  .vol,
  .person {
    flex-basis: 72%;
  }
}

/* Phones: no scroll-reveal. It risks blank sections when the user jumps
   via an anchor before the observer fires, and adds nothing on a small
   screen where everything arrives one card at a time anyway. */
@media (max-width: 760px) {
  .js [data-rise] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* taller variant of the full-bleed band, for a hero-scale photograph */
.band--tall {
  min-height: clamp(420px, 62vh, 700px);
}
.band__in p.band__eyebrow {
  font-family: var(--text);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: rgba(253, 250, 243, 0.72);
  margin: 0 0 1.1rem;
}
.band__in p.band__note {
  font-family: var(--text);
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(253, 250, 243, 0.94);
  max-width: 46ch;
  margin: 1.5rem 0 0;
  text-shadow: 0 1px 12px rgba(16, 20, 24, 0.55);
}
/* headline sits left so the photograph stays readable on the right */
.band--tall .band__in {
  max-width: var(--maxw);
}
.band--tall .band__in > p:not(.band__eyebrow):not(.band__note) {
  font-size: clamp(1.5rem, 0.9rem + 2.2vw, 2.9rem);
  max-width: 17ch;
  text-shadow: 0 2px 24px rgba(16, 20, 24, 0.45);
  line-height: 1.12;
}
.band--tall::after {
  background: linear-gradient(
    95deg,
    rgba(20, 26, 30, 0.82) 0%,
    rgba(20, 26, 30, 0.55) 46%,
    rgba(20, 26, 30, 0.12) 72%
  );
}
@media (max-width: 760px) {
  .band--tall {
    min-height: 0;
    padding-block: 2.75rem;
  }
  .band--tall::after {
    background: linear-gradient(rgba(20, 26, 30, 0.66), rgba(20, 26, 30, 0.78));
  }
  .band__in p.band__note {
    font-size: 0.85rem;
  }
}

/* ---------- fact band: colour panel, photo beside the text ----------
   The photograph is placed, not used as a background: shown whole at its
   native 972x2160 ratio, height-capped so it never dominates. */
.factband {
  background: var(--sea);
  color: #eef4f2;
  padding-block: clamp(2.5rem, 6vw, 5rem);
}
.factband__in {
  display: grid;
  /* 55/45 so the photo has real presence and the text does not trail off
     into a gap halfway across the band */
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
.factband .eyebrow {
  color: rgba(238, 244, 242, 0.7);
}
.factband .eyebrow::after {
  background: rgba(238, 244, 242, 0.3);
}
.factband h2 {
  font-size: clamp(1.5rem, 1rem + 2vw, 2.7rem);
  font-variation-settings: 'opsz' 22;
  color: #fff;
  max-width: 22ch;
  line-height: 1.14;
  margin-bottom: 1.4rem;
}
.factband h2 em {
  font-style: normal;
  color: #f0b48c;
}
.factband p {
  color: rgba(238, 244, 242, 0.84);
  font-size: 0.97rem;
  line-height: 1.62;
  max-width: 42ch;
}
.factband p:last-child {
  margin-bottom: 0;
}
.factband__fig {
  margin: 0;
  justify-self: end;   /* flush with the page's right alignment line */
}
.factband__fig img {
  width: 100%;
  max-width: 380px;      /* placed, not stretched — never fills the band */
  height: auto;          /* aspect ratio untouched, nothing clipped */
  border-radius: 2px;
}
.factband__fig figcaption {
  margin-top: 0.7rem;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(238, 244, 242, 0.6);
  max-width: 22ch;
}

@media (max-width: 760px) {
  .factband__in {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 1.5rem;
  }
  .factband__fig {
    justify-self: start;
  }
  .factband__fig img {
    max-width: 300px;
  }
}


/* =========================================================
   PHONE CHROME  (phone only — desktop is unaffected)
   Hamburger menu + dismissible announcement + 48px touch
   targets, following the reference mobile design.
   ========================================================= */

/* the new controls simply do not exist above the phone breakpoint */
.menu-btn,
.notice__x {
  display: none;
}
.notice__txt {
  color: inherit;
  text-decoration: none;
}
.notice__txt .arrow {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.notice.is-hidden {
  display: none;
}

@media (max-width: 760px) {
  /* ---- announcement: one line, tappable, dismissible ---- */
  .notice {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-align: left;
    padding: 0 0.25rem 0 var(--pad);
    min-height: 48px;
    font-size: 0.9rem;
  }
  .notice__txt {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-block: 0.6rem;
  }
  .notice__x {
    display: grid;
    place-items: center;
    flex: none;
    width: 48px;
    height: 48px;
    background: none;
    border: 0;
    color: #e9e6dc;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
  }

  /* ---- header row: brand · Support us · hamburger ---- */
  .hdr__in {
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-block: 0.55rem;
  }
  .hdr__in > * {
    min-width: 0;
  }
  .brand {
    min-height: 48px;
  }
  .brand span {
    white-space: nowrap;
  }
  .menu-btn {
    display: grid;
    place-items: center;
    flex: none;
    width: 48px;
    height: 48px;
    background: none;
    border: 1px solid var(--line-2);
    color: var(--ink);
    cursor: pointer;
  }
  .menu-btn svg {
    display: block;
  }
  .menu-btn .icon-close {
    display: none;
  }
  .hdr.is-menu-open .menu-btn .icon-open {
    display: none;
  }
  .hdr.is-menu-open .menu-btn .icon-close {
    display: block;
  }

  /* ---- the menu panel: closed by default, full width when open ---- */
  .nav,
  .hdr .lang {
    display: none;
  }
  .hdr.is-menu-open .nav {
    display: block;
    order: 5;
    width: 100%;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line);
    overflow: visible;
  }
  .hdr.is-menu-open .lang {
    display: flex;
    order: 6;
    width: 100%;
    gap: 0.4rem;
    padding: 0.9rem var(--pad) 1.1rem;
    border-top: 1px solid var(--line);
  }
  .nav a {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0.35rem var(--pad);
    font-size: 0.9rem;
    border-bottom: 0;
    white-space: normal;
  }
  .hdr .lang a {
    display: grid;
    place-items: center;
    min-width: 48px;
    min-height: 44px;
    border: 1px solid transparent;
    font-size: 0.82rem;
    opacity: 1;
  }
  .hdr .lang a[aria-current] {
    border-color: var(--line-2);
  }

  /* ---- generous body copy: never below ~17px on a handset ---- */
  body {
    font-size: 1.0625rem;
    line-height: 1.65;
  }
  .pillar__text {
    font-size: inherit;
  }

  /* ---- touch targets ---- */
  .btn {
    min-height: 48px;
    justify-content: center;
    font-size: 0.82rem;
  }
  .hdr .btn {
    min-height: 44px;
    padding: 0.6rem 1rem;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
  }
  .work__cta .btn {
    min-height: 52px;
    padding-inline: 2.2rem;
  }
  .ftr li a {
    display: inline-block;
    padding-block: 0.55rem;
  }
  .join {
    text-align: center;
  }
  .join .eyebrow {
    justify-content: center;
  }
  .join__cta {
    justify-content: center;
  }
  .join .btn {
    flex: 1 1 100%;
  }
}

/* ---------- support band (funders & partners) ---------- */
.support__head {
  max-width: 46ch;
  margin-bottom: clamp(2.25rem, 5vw, 3.5rem);
}
.support__head h2 {
  font-size: clamp(1.9rem, 1.1rem + 2.8vw, 3.4rem);
  font-variation-settings: 'opsz' 22;
  color: #fdfaf3;
  margin-bottom: 1.2rem;
}
.support__lead {
  color: rgba(234, 231, 220, 0.8);
  font-size: 1rem;
  line-height: 1.62;
  margin: 0;
}
.support__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.75rem);
}
.support__card {
  border: 1px solid rgba(234, 231, 220, 0.2);
  padding: clamp(1.4rem, 2.6vw, 2.1rem);
  display: flex;
  flex-direction: column;
}
.support__card h3 {
  font-size: 1.35rem;
  font-variation-settings: 'opsz' 18;
  color: #fdfaf3;
  margin-bottom: 1.1rem;
}
.support__list {
  margin-bottom: 1.6rem;
  flex: 1;
}
.support__list li {
  padding: 0.6rem 0;
  border-bottom: 1px dotted rgba(234, 231, 220, 0.18);
  color: rgba(234, 231, 220, 0.82);
  font-size: 0.93rem;
  line-height: 1.5;
}
.support__list li:last-child {
  border-bottom: 0;
}
.support__list span {
  color: #f0b48c;
  font-weight: 700;
  margin-right: 0.35rem;
}
.support__card .btn {
  align-self: flex-start;
}
.support__pay {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid rgba(234, 231, 220, 0.2);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.support__pay h4 {
  font-family: var(--text);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: rgba(234, 231, 220, 0.5);
  margin-bottom: 0.8rem;
}
.support__pay p {
  color: rgba(234, 231, 220, 0.8);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 0.6rem;
}
.support__bank strong {
  color: #fdfaf3;
  letter-spacing: 0.02em;
}
.support__pay .link-u {
  color: #fdfaf3;
  border-bottom-color: rgba(253, 250, 243, 0.35);
  font-size: 0.9rem;
}

@media (max-width: 760px) {
  .support__card .btn {
    align-self: stretch;
  }
  .support__head {
    margin-bottom: 1.75rem;
  }
  .join {
    text-align: left;
  }
}

/* ---------- support band: readability pass ----------
   Sea teal instead of near-black: the band sat directly above the ink
   footer, so the page ended in one long dark slab. Teal is already in
   the palette (biodiversity accent, turtle band) and lifts the text. */
#support {
  background: var(--sea);
}
#support .support__lead,
#support .support__list li,
#support .support__pay p,
#support .support__vol p {
  color: rgba(240, 246, 244, 0.92);
}
#support .support__pay h4 {
  /* was 0.5 alpha at 10.9px — measured 4.19:1, under the AA minimum */
  font-size: 0.72rem;
  color: rgba(240, 246, 244, 0.78);
}
#support .support__card {
  border-color: rgba(240, 246, 244, 0.26);
}
#support .support__list li {
  border-bottom-color: rgba(240, 246, 244, 0.22);
}
#support .support__pay,
#support .support__vol {
  border-top-color: rgba(240, 246, 244, 0.26);
}
#support .eyebrow {
  color: rgba(240, 246, 244, 0.75);
}
#support .eyebrow::after {
  background: rgba(240, 246, 244, 0.3);
}
#support .link-u {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.45);
}
#support .btn {
  --bg: var(--terra);
  --fg: #fff;
}
#support .btn--ghost {
  --bg: transparent;
  --fg: #fff;
  border-color: rgba(240, 246, 244, 0.5);
}
#support .btn--ghost:hover {
  background: #fff;
  --fg: var(--sea);
  border-color: #fff;
}

/* the volunteer route, given its own clear row at the foot of the band */
.support__vol {
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: clamp(1.25rem, 3vw, 3rem);
  align-items: center;
}
.support__vol h3 {
  font-size: clamp(1.2rem, 1rem + 0.9vw, 1.7rem);
  font-variation-settings: 'opsz' 18;
  color: #fff;
  margin-bottom: 0.7rem;
}
.support__vol p {
  font-size: 0.93rem;
  line-height: 1.6;
  margin: 0;
  max-width: 60ch;
}
.support__vol-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
}
@media (max-width: 760px) {
  .support__vol {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .support__vol-cta {
    align-self: stretch;
  }
  .support__vol-cta .btn {
    width: 100%;
  }
}

/* the amounts: #f0b48c measured 4.07:1 on teal — same warm family, lifted */
#support .support__list span {
  color: #f7cfae;
}

/* ---------- support band: type aligned with the rest of the site ----------
   `.support__vol p` was also matching the <p class="eyebrow">, overriding its
   size and margin. Excluding it restores the site-wide eyebrow. Body copy in
   this band was 14–16px against 18px everywhere else, which is why it read
   small and thin on the dark ground. */
.support__vol p:not(.eyebrow) {
  font-size: 1rem;
  line-height: 1.62;
  margin: 0;
  max-width: 60ch;
}
.support__vol .eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.6;
  margin: 0 0 1rem;
}
#support .support__lead {
  font-size: 1.125rem; /* same as body copy elsewhere */
  line-height: 1.62;
}
#support .support__list li {
  font-size: 1rem;
  line-height: 1.6;
  padding: 0.65rem 0;
}
#support .support__pay p {
  font-size: 0.95rem;
  line-height: 1.62;
}
#support .support__vol h3 {
  margin-bottom: 0.85rem;
}

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.form {
  max-width: 42rem;
}
.field {
  margin: 0 0 1.35rem;
}
.field label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.55rem;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #fffdf8;
  border: 1px solid var(--line-2);
  border-radius: 0;
  padding: 0.85rem 1rem;
  min-height: 52px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea {
  resize: vertical;
  line-height: 1.6;
}
.field input::placeholder,
.field textarea::placeholder {
  color: #9aa08f;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--terra);
  box-shadow: 0 0 0 3px rgba(169, 80, 47, 0.14);
}
/* Browsers give select their own chrome, which looks nothing like the rest of
   this form. Strip it and draw the arrow ourselves. */
.field select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235f6757' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}
/* honeypot: off-screen rather than display:none, which some bots detect */
.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form button[type='submit'] {
  cursor: pointer;
  font-family: inherit;
}
.form__privacy {
  margin: 1.1rem 0 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
  max-width: 46ch;
}
.formnote {
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.6rem;
  font-size: 0.95rem;
  border-left: 3px solid;
}
.formnote--ok {
  background: rgba(47, 93, 90, 0.09);
  border-color: var(--sea);
  color: #24504d;
}
.formnote--bad {
  background: rgba(169, 80, 47, 0.09);
  border-color: var(--terra);
  color: #8e4227;
}
.contact__aside {
  border-left: 1px solid var(--line);
  padding-left: clamp(1.25rem, 3vw, 2.5rem);
}
.contact__block {
  margin-bottom: 1.75rem;
}
.contact__block h2 {
  font-family: var(--text);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
}
.contact__block p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .contact {
    grid-template-columns: 1fr;
  }
  .contact__aside {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 1.75rem;
  }
}

/* ---- pieces Miriam can insert from the editor ------------------------- */

/* A bit of breathing room. Scales with the viewport like the rest of the
   spacing, so it does not become a huge hole on a phone. */
.spacer {
  height: clamp(1.5rem, 4vw, 3.25rem);
}

/* A highlighted box. Tinted from --accent, which is only ever set to one of
   the site's own three accents, so an inserted box still belongs to the page.
   colour-mix keeps the tint honest against the paper background instead of
   guessing at a hard-coded rgba. */
.callout {
  --callout-tint: color-mix(in srgb, var(--accent, var(--terra)) 8%, transparent);
  display: block;
  margin: clamp(1.25rem, 3vw, 2rem) 0;
  padding: clamp(1rem, 2.4vw, 1.5rem) clamp(1.1rem, 2.6vw, 1.75rem);
  border-left: 3px solid var(--accent, var(--terra));
  background: var(--callout-tint);
}
/* Older browsers without colour-mix still get a readable box. */
@supports not (background: color-mix(in srgb, red 8%, transparent)) {
  .callout { background: rgba(169, 80, 47, 0.06); }
}
.callout > p {
  margin: 0;
  color: var(--ink);
}
.callout > p + p {
  margin-top: 0.7rem;
}

/* ---- project detail pages -------------------------------------------- */

.subbody > p {
  max-width: 62ch;
  margin: 0 0 1.15rem;
}
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(0.85rem, 2vw, 1.35rem);
  margin: clamp(1.75rem, 4vw, 2.75rem) 0;
}
.gallery figure { margin: 0; }
.gallery img {
  width: 100%;
  /* height:auto again: the width/height attributes are a real presentational
     hint, and aspect-ratio is ignored without it. */
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}
.subback {
  margin-top: clamp(2rem, 5vw, 3rem);
}

/* "Read more" on a project card that has a detail page of its own. */
.proj__more {
  margin: 1.1rem 0 0;
}
.proj__more a {
  font-family: var(--sans, inherit);
  font-size: 0.83rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent, var(--terra));
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.proj__more a:hover { opacity: 0.72; }