/* Insight Tigray — site-wide design system */

:root {
  /* Shared motion tokens so every hover/focus state eases the same way. */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 0.18s;
  --t-base: 0.25s;
  --t-slow: 0.4s;

  /* Donation gold — the form palette, reused for the page hero bands. */
  --gold: #dab10d;
  --gold-ink: #231f20;
  --gold-ink-soft: rgba(35, 31, 32, 0.78);
}

html,
body {
  margin: 0;
  padding: 0;
  background: #f6efe4;
}

body {
  font-family: "GT America", "Public Sans", -apple-system, sans-serif;
  color: #241708;
  -webkit-font-smoothing: antialiased;
  min-width: 320px;
}

a {
  color: #b3402f;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}

a:hover {
  color: #e05c00;
}

input,
select,
textarea,
button {
  font-family: "GT America", "Public Sans", -apple-system, sans-serif;
}

input,
select,
textarea {
  /* Transparent outline up front so focus fades in instead of snapping. */
  outline: 2px solid transparent;
  outline-offset: -1px;
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), outline-color var(--t-base) var(--ease);
}

input:focus,
select:focus,
textarea:focus {
  outline-color: #e05c00;
  box-shadow: 0 0 0 4px rgba(224, 92, 0, 0.13);
}

@keyframes riseIn {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Join / contact confirmation banner (behavior from home.js + style.css) ---------- */
.join-message-container {
  box-sizing: border-box;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  pointer-events: none;
  z-index: 9999;
}

.join-message {
  padding: 24px;
  font-size: 2.5rem;
  text-align: center;
  border-radius: 16px;
}

/* ---------- Header ---------- */
.top-header {
  background: #f6efe4;
  border-bottom: 1px solid #d9c9ac;
}

.top-header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 72px;
}

.brand {
  font-family: "Canela Deck", "Newsreader", serif;
  font-weight: 600;
  font-size: 24px;
  color: #241708;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.brand:hover {
  color: #241708;
}

.brand span {
  color: #e05c00;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Nav items read as buttons at rest -- own surface, border and radius -- so the
   affordance does not depend on the visitor hovering first. The type is a touch
   tighter than the old plain-text nav to buy back the width the chrome costs. */
.desktop-nav a {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #241708;
  padding: 9px 10px;
  border: 1px solid #dccfb6;
  border-radius: 3px;
  background: #fffdf8;
  white-space: nowrap;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}

.desktop-nav a:hover {
  color: #e05c00;
  border-color: #e05c00;
  background: rgba(224, 92, 0, 0.08);
}

.desktop-nav a.active {
  font-weight: 700;
  color: #e05c00;
  border-color: #e05c00;
  background: rgba(224, 92, 0, 0.12);
}

.desktop-nav a:focus-visible {
  outline: 2px solid #e05c00;
  outline-offset: 2px;
}

.desktop-nav a.donate-cta {
  font-weight: 700;
  color: #f6efe4;
  background: #b3402f;
  border-color: #b3402f;
  padding: 9px 15px;
  margin-left: 4px;
}

.desktop-nav a.donate-cta:hover {
  background: #e05c00;
  border-color: #e05c00;
  color: #f6efe4;
}

.menu-toggle {
  display: none;
  background: none;
  border: 1px solid #d9c9ac;
  border-radius: 2px;
  cursor: pointer;
  padding: 10px 12px;
  flex-direction: column;
  gap: 4px;
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}

.menu-toggle:hover {
  border-color: #e05c00;
  background: rgba(224, 92, 0, 0.06);
}

.menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: #241708;
  transition: transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease), background var(--t-base) var(--ease);
}

.menu-toggle:hover span {
  background: #e05c00;
}

/* Hamburger folds into an X while the drawer is open. */
.top-header.menu-open .menu-toggle span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.top-header.menu-open .menu-toggle span:nth-child(2) {
  opacity: 0;
}

.top-header.menu-open .menu-toggle span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.mobile-nav {
  display: none;
  flex-direction: column;
  padding: 0 28px;
  border-top: 1px solid transparent;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height var(--t-slow) var(--ease), opacity var(--t-base) var(--ease), padding var(--t-slow) var(--ease), border-color var(--t-slow) var(--ease), visibility 0s linear var(--t-slow);
}

/* Same treatment in the drawer: full-width buttons instead of a stack of
   underlined text rows. */
.mobile-nav a {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #241708;
  padding: 13px 16px;
  margin-bottom: 8px;
  border: 1px solid #dccfb6;
  border-radius: 3px;
  background: #fffdf8;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}

.mobile-nav a:hover {
  color: #e05c00;
  border-color: #e05c00;
  background: rgba(224, 92, 0, 0.08);
}

.mobile-nav a.active {
  font-weight: 700;
  color: #e05c00;
  border-color: #e05c00;
  background: rgba(224, 92, 0, 0.12);
}

.mobile-nav a:focus-visible {
  outline: 2px solid #e05c00;
  outline-offset: 2px;
}

.mobile-nav a.donate-cta {
  font-weight: 700;
  color: #f6efe4;
  background: #b3402f;
  border-color: #b3402f;
  padding: 15px 16px;
  text-align: center;
  margin-top: 8px;
  margin-bottom: 0;
}

.mobile-nav a.donate-cta:hover {
  background: #e05c00;
  border-color: #e05c00;
  color: #f6efe4;
}

/* Measured: brand (143px) + the eight nav buttons (775px) + gap + padding needs
   998px of viewport, so the full nav clears iPad landscape (1024px) with room to
   spare and the drawer only takes over below that. Anything tighter here and the
   nav wraps into a ragged two-line header. Keep in sync with the media query in
   nav.js, and re-measure if a nav item is added or renamed. */
@media (max-width: 1023px) {
  .desktop-nav {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

  .mobile-nav {
    display: flex;
  }

  .top-header.menu-open .mobile-nav {
    max-height: 720px;
    opacity: 1;
    visibility: visible;
    padding: 4px 28px 22px;
    border-top-color: #d9c9ac;
    transition-delay: 0s;
  }
}

/* ---------- Shared primitives ---------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.eyebrow-line {
  display: block;
  width: 44px;
  height: 2px;
  background: #e05c00;
}

.eyebrow-text {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #e8a05c;
}

.section {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(72px, 10vw, 128px) 28px;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: clamp(32px, 5vw, 56px);
}

.section-head h2 {
  font-family: "Canela Deck", "Newsreader", serif;
  font-weight: 500;
  font-size: clamp(38px, 5.5vw, 64px);
  letter-spacing: -0.02em;
  margin: 0;
}

.section-kicker {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8a7354;
}

.prose {
  font-family: "Canela Deck", "Newsreader", serif;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.72;
  color: #3a2c1a;
  margin: 0;
  text-wrap: pretty;
}

.prose a {
  font-weight: 500;
}

.split-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}

.sticky-col {
  position: sticky;
  top: 32px;
}

/* ---------- Inner-page hero band ---------- */
.page-hero {
  background: var(--gold);
  color: var(--gold-ink);
}

.page-hero .eyebrow-line {
  background: var(--gold-ink);
}

.page-hero .eyebrow-text {
  color: var(--gold-ink-soft);
}

/* Title left, lede beside it, instead of stacked. */
.page-hero-row {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}

.page-hero .page-hero-row .page-title {
  flex: none;
}

.page-hero .page-hero-row .page-lede {
  margin: 0 0 0 auto;
  flex: 0 1 auto;
  max-width: 620px;
  text-align: right;
}

.page-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(20px, 2.6vw, 34px) 28px;
}

.page-hero .eyebrow {
  margin-bottom: 12px;
}

.page-title {
  font-family: "Canela Deck", "Newsreader", serif;
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0;
}

.page-lede {
  font-family: "Canela Deck", "Newsreader", serif;
  font-size: clamp(18px, 2.4vw, 23px);
  line-height: 1.55;
  color: var(--gold-ink-soft);
  margin: 24px 0 0;
  max-width: 620px;
  text-wrap: pretty;
}

/* Compact variant (donate): a single statement instead of a full hero, so the
   form is in view on landing. */
.page-hero--compact .page-hero-inner {
  padding: clamp(18px, 2.2vw, 28px) 28px;
}

.page-hero--compact .eyebrow {
  margin-bottom: 14px;
}

.page-hero--compact .page-title {
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.05;
  max-width: 820px;
}

.page-hero--compact .page-lede {
  margin: 14px 0 0;
  font-size: clamp(16px, 1.8vw, 19px);
  max-width: 560px;
}

.section--tight {
  padding-top: clamp(28px, 4vw, 44px);
}

/* Phones: title only, so the form starts within the first screen. */
@media (max-width: 720px) {
  .page-hero--compact .page-hero-inner {
    padding: 22px 28px 26px;
  }

  .page-hero--compact .eyebrow {
    margin-bottom: 8px;
  }

  .page-hero--compact .page-title {
    font-size: 26px;
  }

  .page-hero--compact .page-lede {
    display: none;
  }

  .section--tight {
    padding-top: 24px;
  }
}

/* ---------- Home hero ---------- */
.hero {
  position: relative;
  background: #1c1006;
  color: #f6efe4;
  overflow: hidden;
  min-height: calc(100vh - 73px);
  min-height: calc(100svh - 73px);
  display: flex;
  flex-direction: column;
}

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.hero-shade-side {
  position: absolute;
  inset: 0;
  background: linear-gradient(75deg, rgba(24, 13, 4, 0.88) 0%, rgba(24, 13, 4, 0.62) 44%, rgba(24, 13, 4, 0.18) 75%, rgba(24, 13, 4, 0.05) 100%);
}

.hero-shade-vert {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(24, 13, 4, 0.25) 0%, rgba(24, 13, 4, 0) 30%, rgba(24, 13, 4, 0) 55%, rgba(24, 13, 4, 0.75) 100%);
}

.hero-content {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(40px, 6vh, 88px) 28px clamp(32px, 5vh, 64px);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  animation: riseIn 0.8s ease-out both;
}

.hero .eyebrow {
  margin-bottom: clamp(14px, 2.2vh, 28px);
}

.hero h1 {
  font-family: "Canela Deck", "Newsreader", serif;
  font-weight: 700;
  font-size: clamp(52px, min(9vw, 16vh), 132px);
  line-height: 0.96;
  letter-spacing: -0.03em;
  margin: 0 0 clamp(16px, 2.6vh, 32px);
  color: #f6efe4;
  text-shadow: 0 2px 24px rgba(24, 13, 4, 0.4);
}

.hero h1 b {
  color: rgb(232, 129, 61);
}

.hero-lede {
  font-family: "Canela Deck", "Newsreader", serif;
  font-size: clamp(16px, min(2.2vw, 2.7vh), 22px);
  line-height: 1.5;
  color: rgba(246, 239, 228, 0.92);
  margin: 0 0 clamp(22px, 3.4vh, 42px);
  max-width: 620px;
  text-wrap: pretty;
  text-shadow: 0 1px 12px rgba(24, 13, 4, 0.5);
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-actions a {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 2px;
}

/* Shared button motion — keyed off the button classes, not their container,
   so the easing holds wherever a CTA is dropped in. */
.cta-solid,
.cta-outline,
.cta-light,
.cta-ghost {
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}

.cta-solid:hover,
.cta-outline:hover,
.cta-light:hover,
.cta-ghost:hover {
  transform: translateY(-2px);
}

.cta-solid:active,
.cta-outline:active,
.cta-light:active,
.cta-ghost:active {
  transform: translateY(0);
}

.cta-solid {
  color: #1c1006;
  background: #e05c00;
  padding: 17px 34px;
}

.cta-solid:hover {
  background: #f6efe4;
  color: #1c1006;
}

.cta-outline {
  color: #f6efe4;
  border: 1px solid rgba(246, 239, 228, 0.55);
  padding: 16px 33px;
  backdrop-filter: blur(4px);
}

.cta-outline:hover {
  border-color: #e05c00;
  color: #e8a05c;
}

.hero-stats {
  position: relative;
  border-top: 1px solid rgba(246, 239, 228, 0.25);
  backdrop-filter: blur(10px);
  background: rgba(24, 13, 4, 0.35);
}

.hero-stats-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(16px, 2.4vh, 28px) 28px;
  display: flex;
  /* Row gap stays small — the wide column gap opening up vertically left a
     ~70px hole whenever the stats wrapped onto a second line. */
  gap: clamp(12px, 1.6vh, 20px) clamp(20px, 7vw, 96px);
  flex-wrap: wrap;
  align-items: center;
}

.goal-note {
  font-family: "Canela Deck", "Newsreader", serif;
  font-style: italic;
  font-size: clamp(16px, 2.3vh, 19px);
  color: #e8a05c;
}

@media (max-width: 760px) {
  .hero-stats-inner {
    gap: 12px 32px;
  }

  .goal-note {
    flex-basis: 100%;
  }
}

.stat {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.stat-value {
  font-family: "Canela Deck", "Newsreader", serif;
  font-weight: 500;
  font-size: clamp(30px, 4.6vh, 40px);
  color: #f6efe4;
}

.stat-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(246, 239, 228, 0.6);
}

/* ---------- Home: How You Can Help ---------- */
.help-section {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(72px, 10vw, 128px) 28px;
}

.help-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #d9c9ac;
}

a.help-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 4vw, 56px);
  align-items: baseline;
  padding: clamp(28px, 4vw, 44px) 8px;
  border-bottom: 1px solid #d9c9ac;
  color: inherit;
  transition: background var(--t-base) var(--ease), padding-left var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}

a.help-item:hover {
  background: #efe5d2;
  padding-left: 24px;
  color: inherit;
  border-bottom-color: #b3402f;
}

.help-num {
  font-family: "Canela Deck", "Newsreader", serif;
  font-style: italic;
  font-size: clamp(20px, 2.6vw, 28px);
  color: #b3402f;
  min-width: 44px;
}

.help-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.help-title {
  font-family: "Canela Deck", "Newsreader", serif;
  font-weight: 500;
  font-size: clamp(26px, 3.6vw, 40px);
  letter-spacing: -0.01em;
  transition: color var(--t-base) var(--ease);
}

a.help-item:hover .help-title {
  color: #b3402f;
}

.help-arrow {
  font-size: 24px;
  color: #e05c00;
  display: inline-block;
  transition: transform var(--t-base) var(--ease);
}

a.help-item:hover .help-arrow {
  transform: translateX(8px);
}

.help-desc {
  display: block;
  font-size: 15.5px;
  line-height: 1.65;
  color: #5c4a33;
  margin-top: 10px;
  max-width: 640px;
  text-wrap: pretty;
}

.help-desc b {
  font-weight: 600;
  color: #b3402f;
}

/* ---------- Home: Our Mission ---------- */
.mission-section {
  background: #efe5d2;
  border-top: 1px solid #d9c9ac;
}

.mission-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(72px, 10vw, 128px) 28px;
}

.mission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}

.mission-side {
  position: sticky;
  top: 32px;
}

.mission-side .eyebrow-line {
  background: #b3402f;
}

.mission-side .eyebrow-text {
  color: #8a7354;
}

.mission-side h2 {
  font-family: "Canela Deck", "Newsreader", serif;
  font-weight: 500;
  font-size: clamp(38px, 5.5vw, 64px);
  letter-spacing: -0.02em;
  margin: 0 0 32px;
}

.mission-side img {
  width: 100%;
  border-radius: 2px;
  display: block;
  filter: sepia(0.12);
}

.mission-text {
  font-family: "Canela Deck", "Newsreader", serif;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.72;
  color: #3a2c1a;
  margin: 0;
  text-wrap: pretty;
}

.mission-text .dropcap {
  font-family: "Canela Deck", "Newsreader", serif;
  float: left;
  font-size: 4.2em;
  line-height: 0.82;
  padding: 6px 12px 0 0;
  color: #b3402f;
  font-weight: 500;
}

/* ---------- About ---------- */
.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}

.about-grid h2 {
  font-family: "Canela Deck", "Newsreader", serif;
  font-weight: 500;
  font-size: clamp(32px, 4.5vw, 52px);
  letter-spacing: -0.02em;
  margin: 0 0 28px;
}

.about-grid img {
  width: 100%;
  border-radius: 2px;
  display: block;
  filter: sepia(0.1);
}

/* ---------- Areas of Need ---------- */
.areas-intro {
  margin-bottom: clamp(48px, 7vw, 72px);
  max-width: 880px;
}

.areas-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.areas-head h2 {
  font-family: "Canela Deck", "Newsreader", serif;
  font-weight: 500;
  font-size: clamp(32px, 4.5vw, 52px);
  letter-spacing: -0.02em;
  margin: 0;
}

.areas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  border-top: 1px solid #d9c9ac;
  border-left: 1px solid #d9c9ac;
}

.area-item {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 26px 24px;
  border-bottom: 1px solid #d9c9ac;
  border-right: 1px solid #d9c9ac;
  transition: background var(--t-base) var(--ease);
}

.area-item:hover {
  background: #efe5d2;
}

.area-num {
  font-family: "Canela Deck", "Newsreader", serif;
  font-style: italic;
  font-size: 17px;
  color: #b3402f;
  transition: transform var(--t-base) var(--ease);
}

.area-item:hover .area-num {
  transform: translateX(3px);
}

.area-name {
  font-family: "Canela Deck", "Newsreader", serif;
  font-size: 21px;
  font-weight: 500;
  /* Slash-joined labels ("Accounting/Economy/Finance") have no ordinary break
     opportunity and ran off the edge on narrow phones. */
  overflow-wrap: anywhere;
}

/* ---------- Gallery ---------- */
.media-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: clamp(24px, 3.5vw, 40px);
}

.media-head h2 {
  font-family: "Canela Deck", "Newsreader", serif;
  font-weight: 500;
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -0.02em;
  margin: 0;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 14px;
}

.media-grid.photos {
  margin-bottom: clamp(64px, 9vw, 104px);
}

.media-head-side {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.slideshow-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 14px;
  border: 1px solid #d9c9ac;
  border-radius: 999px;
  background: #fbf7ef;
  color: #241708;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}

.slideshow-btn-icon {
  width: 0;
  height: 0;
  border-left: 9px solid #b3402f;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  transition: border-left-color var(--t-base) var(--ease);
}

.slideshow-btn:hover,
.slideshow-btn:focus-visible {
  background: #e05c00;
  border-color: #e05c00;
  color: #fff;
}

.slideshow-btn:hover .slideshow-btn-icon,
.slideshow-btn:focus-visible .slideshow-btn-icon {
  border-left-color: #fff;
}

.slideshow-btn:focus-visible {
  outline: 3px solid #e05c00;
  outline-offset: 3px;
}

/* Each tile is a button that opens the lightbox at that item. */
.media-tile {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 2px;
  overflow: hidden;
  background: #1c1006;
  color: #f6efe4;
  font: inherit;
  cursor: zoom-in;
}

.media-tile.is-video {
  cursor: pointer;
}

.media-tile:focus-visible {
  outline: 3px solid #e05c00;
  outline-offset: 3px;
}

.media-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-slow) var(--ease), filter var(--t-slow) var(--ease);
}

.media-tile:hover img,
.media-tile:focus-visible img {
  transform: scale(1.04);
  filter: brightness(1.06);
}

/* Darkens the lower edge on hover so the label reads over any photo. */
.media-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(28, 16, 6, 0.6), rgba(28, 16, 6, 0) 45%);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
}

.media-tile:hover::after,
.media-tile:focus-visible::after {
  opacity: 1;
}

.tile-label {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 1;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}

.media-tile:hover .tile-label,
.media-tile:focus-visible .tile-label {
  opacity: 1;
  transform: none;
}

.play-badge {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(246, 239, 228, 0.92);
  color: #1c1006;
  display: grid;
  place-items: center;
  z-index: 1;
  transition: transform var(--t-base) var(--ease), background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}

.play-badge::before {
  content: "";
  margin-left: 5px;
  border-left: 18px solid currentColor;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}

.media-tile:hover .play-badge,
.media-tile:focus-visible .play-badge {
  transform: scale(1.08);
  background: #e05c00;
  color: #fff;
}

/* ---------- Lightbox ---------- */
html.lb-open {
  overflow: hidden;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  background: #120a04;
  color: #f6efe4;
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.lightbox[hidden] {
  display: none;
}

.lightbox.is-open {
  opacity: 1;
}

.lightbox:focus {
  outline: none;
}

.lb-progress {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: rgba(246, 239, 228, 0.12);
  z-index: 2;
}

.lb-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: #e05c00;
}

.lb-progress.is-timed span {
  animation: lbProgress var(--lb-duration, 5s) linear forwards;
}

@keyframes lbProgress {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

.lb-bar,
.lb-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(16px, 3vw, 32px);
  flex: none;
}

.lb-foot {
  padding-top: 12px;
  padding-bottom: 18px;
  font-size: 13px;
  color: rgba(246, 239, 228, 0.7);
}

.lb-counter {
  font-family: "Canela Deck", "Newsreader", serif;
  font-style: italic;
  font-size: 19px;
  letter-spacing: 0.02em;
}

.lb-caption {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lb-hint {
  font-family: "Canela Deck", "Newsreader", serif;
  font-style: italic;
  font-size: 14px;
  color: rgba(246, 239, 228, 0.45);
}

.lb-actions {
  display: flex;
  gap: 6px;
}

.lb-btn {
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(246, 239, 228, 0.22);
  border-radius: 50%;
  background: rgba(18, 10, 4, 0.55);
  color: inherit;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.lb-btn:hover {
  background: rgba(246, 239, 228, 0.12);
  border-color: rgba(246, 239, 228, 0.5);
}

.lb-btn:active {
  transform: scale(0.94);
}

.lb-btn:focus-visible {
  outline: 2px solid #e05c00;
  outline-offset: 2px;
}

.lb-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lb-btn .icon-play {
  fill: currentColor;
  stroke: none;
}

/* The play/pause and fullscreen buttons carry both icons; state picks one. */
.lb-play .icon-pause,
.lb-full .icon-collapse,
.is-playing .lb-play .icon-play,
.is-fullscreen .lb-full .icon-expand {
  display: none;
}

.is-playing .lb-play .icon-pause,
.is-fullscreen .lb-full .icon-collapse {
  display: block;
}

.lb-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(64px, 8vw, 104px);
}

.lb-media {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  animation: lbIn var(--t-slow) var(--ease);
}

video.lb-media {
  width: 100%;
  background: #000;
}

.lb-media.from-next {
  --lb-shift: 28px;
}

.lb-media.from-prev {
  --lb-shift: -28px;
}

@keyframes lbIn {
  from {
    opacity: 0;
    transform: translateX(var(--lb-shift, 0)) scale(0.985);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.lb-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  z-index: 1;
}

.lb-arrow:active {
  transform: translateY(-50%) scale(0.94);
}

.lb-prev {
  left: clamp(10px, 2vw, 28px);
}

.lb-next {
  right: clamp(10px, 2vw, 28px);
}

@media (max-width: 760px) {
  .lb-stage {
    padding: 0 10px;
  }

  .lb-arrow {
    width: 44px;
    height: 44px;
  }

  .lb-prev {
    left: 12px;
  }

  .lb-next {
    right: 12px;
  }

  .lb-hint {
    display: none;
  }
}

/* ---------- Forms (Join Us, Contact) ---------- */
.form-card {
  background: #fbf7ef;
  border: 1px solid #d9c9ac;
  border-radius: 2px;
  padding: clamp(28px, 4vw, 44px);
}

.form-card .takeActionForm {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5c4a33;
}

.field input,
.field select,
.field textarea {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  padding: 13px 14px;
  border: 1px solid #d9c9ac;
  border-radius: 2px;
  background: #fff;
  color: #241708;
  width: 100%;
  box-sizing: border-box;
}

.field textarea {
  resize: vertical;
}

/* reCAPTCHA renders a fixed 304px-wide widget that cannot shrink itself, so it
   punched out of the form card and gave the page a horizontal scrollbar on
   phones. Scale it to fit; the explicit height reclaims the space the transform
   leaves behind, since transforms don't affect layout. */
.g-recaptcha {
  transform-origin: left top;
}

@media (max-width: 420px) {
  .g-recaptcha {
    transform: scale(0.8);
    height: 62px;
  }
}

@media (max-width: 354px) {
  .g-recaptcha {
    transform: scale(0.66);
    height: 52px;
  }
}

.form-submit {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f6efe4;
  background: #b3402f;
  border: none;
  padding: 17px 34px;
  border-radius: 2px;
  cursor: pointer;
  align-self: flex-start;
  -webkit-appearance: none;
  appearance: none;
  transition: background var(--t-base) var(--ease), opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}

.form-submit:hover:enabled {
  background: #e05c00;
  transform: translateY(-2px);
}

.form-submit:active:enabled {
  transform: translateY(0);
}

.form-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.thankyou_message {
  background: #efe5d2;
  border: 1px solid #d9c9ac;
  border-radius: 2px;
  padding: clamp(32px, 5vw, 56px);
}

.thankyou_message h2 {
  font-family: "Canela Deck", "Newsreader", serif;
  font-weight: 500;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.3;
  margin: 0;
}

.thankyou_message .boldItalic {
  font-style: italic;
  color: #b3402f;
}

/* ---------- Contact details column ---------- */
.contact-side h2 {
  font-family: "Canela Deck", "Newsreader", serif;
  font-weight: 500;
  font-size: clamp(32px, 4.5vw, 52px);
  letter-spacing: -0.02em;
  margin: 0 0 24px;
}

.contact-side .prose {
  margin: 0 0 32px;
  max-width: 460px;
}

.contact-lines {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 15px;
  color: #3a2c1a;
}

.contact-lines div {
  display: flex;
  align-items: center;
  gap: 14px;
}

.contact-rule {
  width: 32px;
  height: 1px;
  background: #b3402f;
  flex: none;
}

/* ---------- Donate ---------- */
.donate-layout {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 36px);
}

/* Supporting copy + contact lines live under the form: useful once a donor has
   a question, never in the way before that. */
.donate-after {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 14px 40px;
  padding: 0 8px;
}

.donate-after p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: #5c4a33;
  max-width: 560px;
  text-wrap: pretty;
}

.contact-lines--row {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px 28px;
}

.contact-lines--row a {
  color: #3a2c1a;
}

.contact-lines--row a:hover {
  color: #b3402f;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.donate-card {
  background: #fbf7ef;
  border: 1px solid #d9c9ac;
  border-radius: 2px;
  padding: clamp(24px, 3.5vw, 44px);
}

/* Generic [hidden] must win over the display rules below. */
.donate-card [hidden] {
  display: none !important;
}

.donate-test-banner {
  margin: -8px 0 20px;
  padding: 10px 14px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7a4a00;
  background: #fde9b5;
  border: 1px dashed #d9a441;
  border-radius: 2px;
}

.donate-steps {
  list-style: none;
  display: flex;
  gap: 6px;
  margin: 0 0 32px;
  padding: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a08c6c;
}

.donate-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  padding-bottom: 10px;
  border-bottom: 2px solid #e6dac3;
  transition: color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}

.donate-steps li span {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e6dac3;
  color: #5c4a33;
  font-size: 11px;
  letter-spacing: 0;
}

.donate-steps li.is-current {
  color: #241708;
  border-bottom-color: #e05c00;
}

.donate-steps li.is-current span {
  background: #e05c00;
  color: #1c1006;
}

.donate-steps li.is-done {
  color: #5c4a33;
  border-bottom-color: #b3402f;
}

.donate-steps li.is-done span {
  background: #b3402f;
  color: #f6efe4;
}

/* Two panes — "Your gift" | "Your details" — so the wide card never turns into
   one 1200px-long input. */
.donate-form,
.donate-payment {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.donate-pane,
.pay-summary,
.pay-main {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.donate-pane + .donate-pane,
.pay-main {
  border-left: 1px solid #e6dac3;
  padding-left: clamp(28px, 4vw, 64px);
  margin-left: clamp(28px, 4vw, 64px);
}

.donate-payment {
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
}

.pane-title {
  font-family: "Canela Deck", "Newsreader", serif;
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 2px;
  color: #241708;
}

@media (max-width: 860px) {
  .donate-form,
  .donate-payment {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }

  .donate-pane + .donate-pane,
  .pay-main {
    border-left: none;
    padding-left: 0;
    margin-left: 0;
    border-top: 1px solid #e6dac3;
    padding-top: 28px;
  }
}

.donate-fieldset {
  border: none;
  margin: 0;
  padding: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.field-label {
  padding: 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5c4a33;
}

.currency-pick select {
  width: 100%;
  box-sizing: border-box;
  font-size: 15px;
  font-weight: 500;
  padding: 13px 34px 13px 12px;
  border: 1px solid #d9c9ac;
  border-radius: 2px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c4a33' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center / 13px;
  color: #241708;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* Frequency: three-way segmented control built on radios. */
.seg {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid #d9c9ac;
  border-radius: 2px;
  background: #fff;
  overflow: hidden;
}

.seg-option {
  position: relative;
}

.seg-option + .seg-option {
  border-left: 1px solid #d9c9ac;
}

.seg-option input,
.amount-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.seg-option span {
  display: block;
  padding: 13px 8px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: #5c4a33;
  cursor: pointer;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}

.seg-option span:hover {
  background: #f6efe4;
}

.seg-option input:checked + span {
  background: #241708;
  color: #f6efe4;
}

.seg-option input:focus-visible + span,
.amount-option input:focus-visible + span {
  outline: 2px solid #e05c00;
  outline-offset: -2px;
  box-shadow: 0 0 0 4px rgba(224, 92, 0, 0.13);
}

/* Amount: quick picks and custom entry share one row, so "Other" reads as a
   fourth option rather than an afterthought below the grid. */
.amount-row {
  display: grid;
  /* minmax(0, …) lets a column shrink below its text width instead of overflowing the card. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

/* The presets are rendered into their own container; `contents` lets them sit
   in the row grid alongside the custom field. */
.amount-grid {
  display: contents;
}

.amount-option span {
  display: block;
  height: 100%;
  box-sizing: border-box;
  padding: 16px 4px;
  text-align: center;
  font-family: "Canela Deck", "Newsreader", serif;
  font-size: clamp(16px, 2.4vw, 21px);
  white-space: nowrap;
  color: #241708;
  background: #fff;
  border: 1px solid #d9c9ac;
  border-radius: 2px;
  cursor: pointer;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}

.amount-option span:hover {
  border-color: #b3402f;
  transform: translateY(-2px);
}

.amount-option input:checked + span {
  background: #241708;
  border-color: #241708;
  color: #f6efe4;
}

.amount-custom {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 8px;
  background: #fff;
  border: 1px solid #d9c9ac;
  border-radius: 2px;
  transition: border-color var(--t-base) var(--ease);
}

.amount-custom:hover {
  border-color: #b3402f;
}

.amount-symbol {
  flex: none;
  font-family: "Canela Deck", "Newsreader", serif;
  font-size: clamp(16px, 2.4vw, 21px);
  color: #8a7354;
  pointer-events: none;
}

.amount-custom input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  padding: 16px 0;
  border: none;
  background: none;
  font-family: "Canela Deck", "Newsreader", serif;
  font-size: clamp(16px, 2.4vw, 21px);
  color: #241708;
}

.amount-custom.is-filled {
  background: #241708;
  border-color: #241708;
}

.amount-custom.is-filled .amount-symbol,
.amount-custom.is-filled input {
  color: #f6efe4;
}

.amount-custom input:focus {
  outline: none;
}

.amount-custom input::placeholder {
  color: #a08c6c;
  opacity: 1;
}

@media (max-width: 620px) {
  .amount-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.link-button {
  background: none;
  border: none;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  color: #b3402f;
  cursor: pointer;
  text-align: left;
  transition: color var(--t-fast) var(--ease);
}

.link-button:hover {
  color: #e05c00;
}

.donate-comment {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}

.donate-comment #comment-wrap {
  width: 100%;
}

/* Honeypot: off-screen, not display:none, so naive bots still "see" it. */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.donate-error {
  margin: 0;
  padding: 12px 14px;
  overflow-wrap: anywhere;
  font-size: 14.5px;
  line-height: 1.5;
  color: #7a1f12;
  background: #f7dcd6;
  border: 1px solid #e3a79b;
  border-radius: 2px;
}

/* Primary buttons: label + a real arrow, not a glyph. */
.donate-submit {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: auto;
  text-align: center;
}

.btn-arrow {
  width: 26px;
  height: 26px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--t-base) var(--ease);
}

.donate-submit:hover:enabled .btn-arrow,
a.donate-submit:hover .btn-arrow {
  transform: translateX(5px);
}

.donate-fineprint {
  margin: -8px 0 0;
  font-size: 12.5px;
  color: #8a7354;
  text-align: center;
}

/* Payment step: gift summary on the left, Stripe on the right. */
.pay-amount {
  margin: 0;
  font-family: "Canela Deck", "Newsreader", serif;
  font-size: clamp(38px, 4.5vw, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #241708;
}

.pay-frequency {
  margin: -10px 0 0;
  font-size: 15px;
  font-weight: 500;
  color: #5c4a33;
}

.donate-recurring-note {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #8a7354;
}

.pay-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  margin: 4px 0 0;
  padding-top: 18px;
  border-top: 1px solid #e6dac3;
  font-size: 14.5px;
}

.pay-meta dt {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a7354;
  align-self: baseline;
}

.pay-meta dd {
  margin: 0;
  color: #241708;
  overflow-wrap: anywhere;
}

.express-wrap {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.or-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a08c6c;
}

.or-divider::before,
.or-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e6dac3;
}

#payment-element {
  min-height: 120px;
}

/* Done: the whole card turns green. */
.donate-thanks,
.donate-unavailable {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 640px;
  padding: clamp(8px, 2vw, 16px) 0;
}

.thanks-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #2e7d4f;
  color: #fff;
  animation: riseIn var(--t-slow) var(--ease);
}

.thanks-icon svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.donate-thanks h2,
.donate-unavailable h2 {
  font-family: "Canela Deck", "Newsreader", serif;
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}

.donate-thanks h2 {
  color: #1f5e3a;
}

.donate-thanks p,
.donate-unavailable p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: #3a4f41;
}

.donate-home {
  align-self: flex-start;
  margin-top: 8px;
  background: #2e7d4f;
  color: #fff;
}

.donate-home:hover {
  background: #246a41;
  color: #fff;
}

.donate-card.is-complete {
  background: #eef7f1;
  border-color: #b7dcc3;
}

.donate-card.is-complete .donate-steps li.is-done,
.donate-card.is-complete .donate-steps li.is-current {
  color: #1f5e3a;
  border-bottom-color: #2e7d4f;
}

.donate-card.is-complete .donate-steps li.is-done span,
.donate-card.is-complete .donate-steps li.is-current span {
  background: #2e7d4f;
  color: #fff;
}


/* ---------- Donate card: Donorbox-era palette ----------
   The donation card keeps the gold scheme donors knew from the old Donorbox
   form. Scoped to .donate-card so the rest of the page stays on the site
   palette. Values measured from the live embed (basic-color #dab10d). */
.donate-card {
  --db-gold: var(--gold);
  --db-gold-dark: #c49f0b;
  --db-gold-soft: #fbf3d2;
  --db-gold-ring: rgba(218, 177, 13, 0.22);
  --db-ink: #231f20;
  --db-text: #474747;
  --db-muted: #898989;
  --db-link: #9c7d08;   /* gold family, dark enough to read on white */
  --db-border: #c4c3c3;
  --db-line: #e1e1e1;
  background: #fff;
  border-color: var(--db-line);
  color: var(--db-ink);
}

.donate-card .donate-steps {
  color: var(--db-muted);
}

.donate-card .donate-steps li {
  border-bottom-color: var(--db-line);
}

.donate-card .donate-steps li span {
  background: var(--db-line);
  color: var(--db-text);
}

.donate-card .donate-steps li.is-current {
  color: var(--db-ink);
  border-bottom-color: var(--db-gold);
}

.donate-card .donate-steps li.is-current span {
  background: var(--db-gold);
  color: #000;
}

.donate-card .donate-steps li.is-done {
  color: var(--db-text);
  border-bottom-color: var(--db-gold-dark);
}

.donate-card .donate-steps li.is-done span {
  background: var(--db-gold-dark);
  color: #000;
}

.donate-card .field,
.donate-card .field-label {
  color: var(--db-text);
}

.donate-card .field input,
.donate-card .field select,
.donate-card .field textarea,
.donate-card .currency-pick select {
  border: 1px solid var(--db-border);
  border-radius: 3px;
  color: var(--db-ink);
}

.donate-card input:focus,
.donate-card select:focus,
.donate-card textarea:focus {
  outline-color: var(--db-gold);
  box-shadow: 0 0 0 4px var(--db-gold-ring);
}

.donate-card .amount-symbol {
  color: var(--db-gold);
}

/* Custom amount is styled to sit in the preset row as a fourth option. */
.donate-card .amount-custom {
  border: 2px solid var(--db-border);
  border-radius: 3px;
}

.donate-card .amount-custom:hover {
  border-color: var(--db-gold);
}

.donate-card .amount-custom.is-filled {
  background: var(--db-gold);
  border-color: var(--db-gold);
}

.donate-card .amount-custom.is-filled .amount-symbol,
.donate-card .amount-custom.is-filled input {
  color: #000;
}

.donate-card .amount-custom:focus-within {
  border-color: var(--db-gold);
  box-shadow: 0 0 0 4px var(--db-gold-ring);
}

.donate-card .amount-custom input {
  color: var(--db-ink);
}

.donate-card .seg {
  border: 2px solid var(--db-gold);
  border-radius: 3px;
}

.donate-card .seg-option + .seg-option {
  border-left-color: var(--db-gold);
}

.donate-card .seg-option span {
  color: #000;
}

.donate-card .seg-option span:hover {
  background: var(--db-gold-soft);
}

.donate-card .seg-option input:checked + span {
  background: var(--db-gold);
  color: #000;
}

.donate-card .seg-option input:focus-visible + span,
.donate-card .amount-option input:focus-visible + span {
  outline-color: var(--db-gold);
  box-shadow: 0 0 0 4px var(--db-gold-ring);
}

.donate-card .amount-option span {
  border: 2px solid var(--db-border);
  border-radius: 3px;
  color: #4c4c4c;
}

.donate-card .amount-option span:hover {
  border-color: var(--db-gold);
}

.donate-card .amount-option input:checked + span {
  background: var(--db-gold);
  border-color: var(--db-gold);
  color: #000;
}

.donate-card .link-button {
  color: var(--db-link);
}

.donate-card .link-button:hover {
  color: var(--db-gold-dark);
}

.donate-card .form-submit:not(.donate-home) {
  background: var(--db-gold);
  color: #000;
  border-radius: 4px;
}

.donate-card .form-submit:not(.donate-home):hover:enabled {
  background: var(--db-gold-dark);
  color: #000;
}

.donate-card .pane-title,
.donate-card .pay-amount,
.donate-card .pay-meta dd,
.donate-card .donate-unavailable h2 {
  color: var(--db-ink);
}

.donate-card .pay-frequency,
.donate-card .donate-unavailable p {
  color: var(--db-text);
}

.donate-card .currency-pick select {
  border-color: var(--db-border);
  border-radius: 3px;
}

.donate-card .donate-pane + .donate-pane,
.donate-card .pay-main,
.donate-card .pay-meta {
  border-color: var(--db-line);
}

.donate-card .donate-unavailable a {
  color: var(--db-link);
}

/* The green "done" state wins over the gold palette. */
.donate-card.is-complete .donate-home {
  background: #2e7d4f;
  color: #fff;
}

.donate-card.is-complete .donate-home:hover {
  background: #246a41;
}

.donate-card .donate-fineprint,
.donate-card .donate-recurring-note,
.donate-card .or-divider {
  color: var(--db-muted);
}

.donate-card .or-divider::before,
.donate-card .or-divider::after {
  background: var(--db-line);
}

/* ---------- CTA band ---------- */
.cta-band {
  background: #b3402f;
  color: #f6efe4;
}

.cta-band-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 72px) 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.cta-band h2 {
  font-family: "Canela Deck", "Newsreader", serif;
  font-weight: 500;
  font-size: clamp(26px, 3.6vw, 40px);
  letter-spacing: -0.015em;
  margin: 0;
}

.cta-band h2 span {
  color: #f2c9a0;
}

.cta-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.cta-actions a {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 2px;
}

.cta-light {
  color: #b3402f;
  background: #f6efe4;
  padding: 16px 32px;
}

.cta-light:hover {
  background: #1c1006;
  color: #f6efe4;
}

.cta-ghost {
  color: #f6efe4;
  border: 1px solid rgba(246, 239, 228, 0.55);
  padding: 15px 31px;
}

.cta-ghost:hover {
  border-color: #1c1006;
  background: #1c1006;
  color: #f6efe4;
}

/* ---------- Footer ---------- */
.it-footer {
  background: #1c1006;
  color: rgba(246, 239, 228, 0.7);
  overflow: hidden;
}

.it-footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 88px) 28px 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 44px;
  padding-bottom: clamp(48px, 7vw, 72px);
}

.footer-about {
  font-size: 14.5px;
  line-height: 1.7;
  margin: 0;
  max-width: 380px;
  text-wrap: pretty;
}

.footer-heading {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #e8a05c;
  margin: 0 0 18px;
}

.footer-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
}

.footer-links a {
  font-size: 14.5px;
  color: rgba(246, 239, 228, 0.7);
}

.footer-links a:hover {
  color: #e05c00;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14.5px;
}

.footer-watermark {
  font-family: "Canela Deck", "Newsreader", serif;
  font-weight: 500;
  /* Min sized so the nowrap wordmark still fits a 320px screen instead of
     getting its first and last letters clipped. */
  font-size: clamp(34px, 11vw, 148px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: rgba(246, 239, 228, 0.14);
  white-space: nowrap;
  text-align: center;
  padding-bottom: clamp(28px, 4vw, 48px);
}

.it-footer-bar {
  border-top: 1px solid rgba(246, 239, 228, 0.12);
  position: relative;
  background: #1c1006;
}

.it-footer-bar p {
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 28px;
  font-size: 13px;
  color: rgba(246, 239, 228, 0.5);
}

/* ---------- Single-column fallbacks ----------
   Once the two-column grids fold to one column (~955px and below) a sticky side
   column pins itself over the content stacked beneath it. Declared last so it
   beats the .sticky-col / .mission-side rules above, which have equal
   specificity. */
@media (max-width: 1000px) {

  .sticky-col,
  .mission-side {
    position: static;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}