/* ================================================================
   Hands On Houses — main stylesheet
   Mobile-first. Colors and spacing live in CSS variables at the top
   so we can tune the whole look from one place.
   ================================================================ */

/* ----------------------------------------------------------------
   CUSTOM FONTS — Collaborate (OTF, self-hosted)
   ---------------------------------------------------------------- */
@font-face {
  font-family: "Collaborate";
  src: url("../assets/fonts/ColabThi.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Collaborate";
  src: url("../assets/fonts/ColabReg.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Collaborate";
  src: url("../assets/fonts/ColabMed.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Collaborate";
  src: url("../assets/fonts/ColabBol.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* All uppercase labels — Collaborate Thin */
.stat-label,
.timeline-name,
.contact-col-label,
.contact-info h3,
.foundation-box dt,
.footer-newsletter-label,
.recipient-tag,
.contact-col-label {
  font-family: var(--font-heading);
  font-weight: 300;
}

/* ----------------------------------------------------------------
   1. DESIGN TOKENS (edit these to change the whole look of the site)
   ---------------------------------------------------------------- */
:root {
  /* Palette — beige + white + sage. Calm, natural, nonprofit-warm.
     The yellow logo carries the visual energy; the sage accent stays restrained. */
  --color-bg: #F2EBE1;           /* warm beige — 40% lighter than #EADFCD, less contrast vs. white */
  --color-surface: #ffffff;
  --color-text: #3e5034;         /* dark forest green — replaces near-black across the site */
  --color-muted: #6b6862;
  --color-accent: #9cb88a;          /* mid-tone sage — button bg, stat numbers, focus rings */
  --color-accent-dark: #6a8459;     /* deeper sage — links, button hover, button text on light */
  --color-accent-darkest: #3e5034;  /* darkest forest green — h2 headings, button text */
  --color-border: #e6e1d8;       /* warm cream-gray */

  /* Typography */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Collaborate", system-ui, sans-serif;

  /* Spacing scale */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;

  /* Layout */
  --max-width: 1100px;
  --radius: 6px;
}

/* ----------------------------------------------------------------
   2. RESET + BASE
   ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height, 77px); /* set precisely by JS on load */
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  font-size: 17px;
}

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

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 500;        /* Lora reads well at 500 — heavier looks chunky */
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin: 0 0 var(--space-2);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2.75rem; color: var(--color-accent-darkest); line-height: 1.1; margin-top: 0; text-align: center; }
h3 { font-size: 1.3rem; }

p { margin: 0 0 var(--space-2); }

a {
  color: var(--color-accent-dark);  /* darker sage for readable links on cream */
  text-decoration: none;
}
a:hover, a:focus { text-decoration: underline; }

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-2);
}

/* Visually hidden but available to screen readers */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ----------------------------------------------------------------
   3. HEADER + NAV
   ---------------------------------------------------------------- */
.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 1000; /* must beat Leaflet's internal z-indexes (tiles=200, controls=800) */
}

.header-inner {
  display: flex;
  flex-wrap: wrap;          /* nav drops to its own row when open on mobile */
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem var(--space-2);
}

.site-logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;          /* avoids extra space under the inline image */
  position: relative;      /* anchor for the sage-hover layer below */
}
.site-logo img {
  height: 36px;
  width: auto;
  display: block;
  transition: opacity 0.25s ease;
}
.site-logo:hover { text-decoration: none; }

/* Hover swap — yellow logo crossfades to a sage version on mouseover.
   The sage PNG is painted into a ::before layer that sits exactly under
   the <img>, then we fade the <img> out so the sage shows through. */
.site-logo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../assets/images/logo-sage.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.site-logo:hover::before,
.site-logo:focus-visible::before { opacity: 1; }
.site-logo:hover img,
.site-logo:focus-visible img    { opacity: 0; }

.primary-nav {
  display: none;            /* hidden on mobile, toggled by JS */
  flex-direction: column;
  gap: var(--space-1);
  width: 100%;
  margin-top: var(--space-2);
}
.primary-nav.open { display: flex; }

.primary-nav a {
  color: var(--color-text);
  padding: 0.5rem 0;
}

.nav-toggle {
  background: none;
  border: none;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  width: 22px; height: 2px;
  background: var(--color-text);
  box-shadow: 0 6px 0 var(--color-text), 0 -6px 0 var(--color-text);
}

@media (min-width: 700px) {
  .header-inner { flex-wrap: nowrap; }
  .nav-toggle { display: none; }
  .primary-nav {
    display: flex;
    flex-direction: row;
    gap: var(--space-3);
    width: auto;
    margin-top: 0;
  }
}

/* ----------------------------------------------------------------
   4. HERO
   ---------------------------------------------------------------- */
.hero {
  /* Hero photo with a sage-tinted overlay so the white text stays readable.
     The sage falls back to a flat color if the image fails to load. */
  background-color: var(--color-accent);
  background-image:
    linear-gradient(rgba(38, 56, 28, 0.40), rgba(38, 56, 28, 0.40)),
    url('../assets/images/hero.jpg');
  background-size: cover;
  background-position: center 40%;  /* shows more of her face including mouth */
  color: #fff;
  padding: var(--space-5) 0;
  text-align: center;
  min-height: clamp(480px, 65vh, 820px); /* scales with viewport; allows more image on large screens */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;                /* anchor for the absolutely-positioned credit */
}
.hero h1 {
  font-size: 3rem;         /* Lora reads slightly heavier than Cormorant; rein in the hero size */
  font-weight: 500;
  color: #fff;
}
.hero-tagline {
  font-size: 1.15rem;
  color: #fff;
  opacity: 0.92;
  max-width: 36rem;
  margin: 0 auto var(--space-3);
}
/* Small credit at the bottom of the hero, naming the person in the photo
   and linking down to her story. Quiet by design — doesn't compete with
   the headline or CTA. */
.hero-credit {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--space-2);
  margin: 0;
  font-size: 0.85rem;
  color: #fff;
  opacity: 0.85;
  text-align: center;
}
.hero-credit a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
/* Hover/focus — text (and its underline) shift to the logo yellow */
.hero-credit a:hover,
.hero-credit a:focus {
  color: #FFCD38;
  opacity: 1;
  text-decoration-thickness: 2px;
}
.equip-link,
.section-sage .foundation-box a.equip-link { text-decoration: underline; text-underline-offset: 2px; color: var(--color-accent-dark); }
.equip-arrow {
  color: #FFCD38;
  display: inline-block;
  margin-left: 0.1em;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.15s ease;
}
.equip-link:hover,
.equip-link:focus { color: var(--color-bg); }
.equip-link:hover .equip-arrow,
.equip-link:focus .equip-arrow {
  opacity: 1;
  transform: translateX(3px);
}

/* Candid Seal of Transparency badge */
.candid-badge-link {
  display: flex;
  justify-content: center;
  text-decoration: none;
  transition: opacity 0.2s ease, transform 0.15s ease;
  margin-top: 0.5rem;
}
.candid-badge-link:hover,
.candid-badge-link:focus {
  opacity: 0.82;
  transform: translateY(-2px);
}
.candid-badge-svg {
  display: block;
  width: 120px;
  height: 120px;
}

/* Arrow lives in the same yellow but is invisible until hover/focus.
   Using opacity (not display) so its space is reserved and the line
   doesn't jump as it appears. */
.hero-credit-arrow {
  color: #FFCD38;
  text-decoration: none;            /* keep the arrow out of the underline */
  display: inline-block;
  margin-left: 0.15em;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.15s ease;
}
.hero-credit a:hover .hero-credit-arrow,
.hero-credit a:focus .hero-credit-arrow {
  opacity: 1;
  transform: translateX(3px);       /* gentle nudge to suggest motion */
}

/* ----------------------------------------------------------------
   5. SECTIONS
   ---------------------------------------------------------------- */
.section {
  padding: var(--space-5) 0;
}
.section-alt {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
#impact {
  padding-top: 2rem;
  background: #fff;
  border-top: none;
  border-bottom: none;
}

/* All section headings and paragraphs flush left by default. */
.section .container > h2,
.section .container > p {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Stories section is the exception — keeps its centered column. */
#stories .container > h2,
#stories .container > p {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
#stories .container > h2 {
  margin-bottom: 2rem;
}

/* Featured tagline that introduces a section — elegant italic serif
   in mid-sage, larger than body text but lighter than h2. Reusable
   for any section that has a "mission line" worth highlighting. */
.section-tagline {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.375rem;
  line-height: 1.4;
  color: var(--color-accent-dark);
  margin-bottom: var(--space-3);
}
/* On the sage section the mid-sage color would vanish — use white. */
.section-sage .section-tagline { color: #fff; }

/* Yellow chip used for recipient names / location kickers.
   Dark-forest text on logo yellow gives 7.4:1 contrast — passes AAA.
   Reads as a label, not a heading — small, uppercase, letter-spaced. */
.recipient-tag {
  display: inline-block;
  vertical-align: middle;
  margin-right: 0;
  margin-left: 0;
  background: #FFCD38;                       /* logo yellow */
  color: var(--color-accent-darkest);        /* deep forest #3e5034 */
  font-family: var(--font-base, inherit);
  font-style: normal;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 4px;
  margin-bottom: 0;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
a.recipient-tag {
  text-decoration: none !important;
  color: var(--color-accent-darkest) !important;  /* override sage section white link rule */
}
a.recipient-tag:hover,
a.recipient-tag:focus {
  opacity: 0.85;
  transform: translateY(-1px);
  text-decoration: none !important;
}

/* Sage section — uses the deep sage (same as stat numbers and link text). */
.section-sage {
  background: var(--color-accent-dark);   /* #6a8459 */
  color: #fff;
}
.section-sage h2 { color: #fff; }
.section-sage h3 { color: #fff; }
/* Body links inside sage sections need a light color to stay visible */
.section-sage a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.section-sage a:hover { opacity: 0.85; }
/* Muted (gray) text in sage sections needs lightening for contrast */
.section-sage .foundation-docs { color: rgba(255, 255, 255, 0.88); }

/* Light sage section — alternating story background */
.section-sage-light {
  background: #6e8e5c;   /* muted mid-sage */
  color: #fff;
}
.section-sage-light h2,
.section-sage-light h3 { color: #fff; }
.section-sage-light a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.section-sage-light a:hover { opacity: 0.8; }
.section-sage-light .section-tagline { color: var(--color-accent-darkest); }

/* The .foundation-facts box is still a white card on the sage section —
   so text INSIDE it needs to stay dark to remain readable. */
.section-sage .foundation-box,
.section-sage .foundation-box dt,
.section-sage .foundation-box dd { color: var(--color-text); }
.section-sage .foundation-box a {
  color: var(--color-accent-dark);
  text-decoration: none;
}
.section-sage .foundation-box a:hover {
  text-decoration: underline;
  opacity: 1;
}

/* ----------------------------------------------------------------
   6. BUTTONS
   ---------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
  border: none;
  font-size: 1rem;
  transition: background 0.15s ease;
}
.btn-primary {
  background: #ffffff;
  color: var(--color-accent-darkest);
}
.btn-primary:hover, .btn-primary:focus {
  background: #FFCD38;
  color: var(--color-accent-darkest);
  text-decoration: none;
}
/* Shared style for all three yellow action buttons */
.btn-yellow {
  background: #FFCD38;
  color: #3e5034;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.6rem 1.5rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  display: inline-block;
  text-align: center;
}
.btn-yellow:hover,
.btn-yellow:focus {
  background: #6a8459 !important;
  color: #3e5034 !important;
}

/* ----------------------------------------------------------------
   7. STATS + MAP
   ---------------------------------------------------------------- */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}
@media (min-width: 700px) {
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
}

.stat-card {
  background: var(--color-bg);            /* light beige #fdfaf5 (same as page bg) */
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3);
  text-align: center;
}
.stat-number {
  display: block;
  font-family: var(--font-heading);
  font-size: 2.5rem;
  color: var(--color-accent-dark);   /* deeper sage for readable contrast on cream */
  line-height: 1;
}
.stat-label {
  display: block;
  margin-top: 0.5rem;
  color: var(--color-muted);
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* Timeline cards — same shape as .stats-grid but with the colors
   flipped (sage box, white type). Sits inside the About section. */
.timeline-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  margin: var(--space-4) 0;
}
/* 2-up on tablets so the cards don't crush, 4-up on desktop. */
@media (min-width: 520px) {
  .timeline-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 800px) {
  .timeline-grid { grid-template-columns: repeat(4, 1fr); }
}

.timeline-card {
  border-radius: var(--radius);
  padding: var(--space-3);
  text-align: center;
  color: #2d3d22;
}
/* Light → dark ombre — all lighter than the section bg (#6a8459), dark text throughout */
.timeline-card:nth-child(1) { background: #a8c797; color: #2d3d22; }
.timeline-card:nth-child(2) { background: #b9d2a9; color: #2d3d22; }
.timeline-card:nth-child(3) { background: #cfe0c2; color: #2d3d22; }
.timeline-card:nth-child(4) { background: #e4eedb; color: #2d3d22; }
.timeline-year {
  display: block;
  font-family: var(--font-heading);
  font-size: 2.5rem;
  color: inherit;
  line-height: 1;
}
.timeline-name {
  display: block;
  margin-top: 0.5rem;
  color: inherit;
  opacity: 0.8;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.timeline-desc {
  margin: var(--space-2) 0 0;
  padding-top: var(--space-2);
  border-top: 1px solid currentColor;
  opacity: 0.9;
  color: inherit;
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: left;
}

.map-intro { margin-bottom: var(--space-3); }

/* Leaflet map container. Height is required for the map to render.
   On mobile we use a more landscape shape because our countries span
   ~210 degrees of longitude vs. only 66 degrees of latitude — a wider
   frame fills with the country spread instead of empty ocean. */
.map-container {
  height: 440px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate; /* creates a stacking context so Leaflet's internal z-indexes don't bleed into the page */
}
@media (max-width: 700px) {
  .map-container { height: 260px; }
}

/* Map caption sentence — appears above the key */
.map-caption {
  text-align: center;
  font-family: var(--font-heading);
  font-size: 2.75rem;
  font-weight: 600;
  color: var(--color-accent-darkest);
  margin-bottom: 0.75rem;
}

/* Map key — sits below the caption, explains the two marker types */
.map-key {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
  font-size: 1rem;
  color: var(--color-text);
}
.map-key-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
@media (min-width: 600px) {
  .map-key { flex-direction: row; justify-content: center; gap: 2rem; }
}
.heart-marker-key {
  font-size: 18px;
  color: #c0392b;
  opacity: 0.55;
  animation: heart-pulse 2.4s ease-in-out infinite;
  line-height: 1;
}
.logo-marker-key {
  width: 22px;
  height: 22px;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

/* Heart markers — donor regions. Low opacity, pulsing gently. */
.heart-marker {
  background: none !important;
  border: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.heart-marker span {
  font-size: 18px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #c0392b;
  opacity: 0.55;
  display: block;
  line-height: 1;
  animation: heart-pulse 2.4s ease-in-out infinite;
}
@keyframes heart-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.55; }
  50%       { transform: scale(1.2); opacity: 0.75; }
}

/* Custom map marker — the Hands on Houses logo with a subtle shadow */
.logo-marker {
  transition: transform 0.15s ease;
}
.logo-marker:hover {
  transform: scale(1.15);
}
.logo-marker img {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

/* ----------------------------------------------------------------
   8. STORIES OF HOPE — before/after photo pairs
   ---------------------------------------------------------------- */
.stories-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-3);
}

.story-card {
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
}

.story-photos {
  display: grid;
  grid-template-columns: 1fr;     /* stacked on mobile */
  gap: var(--space-2);
  clear: right;                   /* don't let globe float overlap photos */
  margin-top: var(--space-3);
}
@media (min-width: 600px) {
  .story-photos { grid-template-columns: 1fr 1fr; } /* side-by-side on tablet+ */
}

.story-photo { margin: 0; }
.story-photo img,
.story-photo .photo-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}

.story-body {
  text-align: left;
  margin-bottom: var(--space-3);   /* space below body before photos/slider */
  min-height: 160px;               /* ensures globe always has breathing room */
  padding-bottom: var(--space-2);
}
.story-body h3 {
  font-size: 1.6rem;
  margin-bottom: 1.25rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
}
.story-body p {
  opacity: 0.95;
  /* fills the story-card column — same width as the photos above */
}
.story-pullquote {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.375rem;
  line-height: 1.4;
  text-align: center;
  margin: var(--space-3) 0 var(--space-2);
  border: none;
  padding: 0;
}
.story-pullquote cite {
  display: block;
  font-family: var(--font-base, inherit);
  font-style: normal;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  opacity: 0.75;
  margin-top: 0.5rem;
}

/* Inline story figure — single contextual photo + small italic caption.
   Constrained to 320px and centered so a tall portrait doesn't dominate
   the card. Landscape images at this width still look natural. */
.story-figure {
  margin: var(--space-3) auto;
  max-width: 320px;     /* reduced from 400px (−20%) — portraits were dominating the card */
}
.story-figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block;
}
.story-figure figcaption {
  font-size: 0.85rem;
  font-style: italic;
  opacity: 0.75;
  text-align: center;
  margin-top: 0.5rem;
}

/* ----- Featured story layout (magazine spread) -----
   Mainsuba's card uses a 2-column intro on desktop (portrait | text)
   and a single stacked column on mobile. The NEPAL kicker sits above
   both columns, then the portrait fills the empty space to the left of
   the headline. On phones, source order delivers:
       NEPAL → portrait → h3 → paragraph → pullquote
   which is the natural rhythm she wanted. */
.story-card--featured .story-intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.story-card--featured .story-body { margin-bottom: 0; }

@media (min-width: 700px) {
  .story-card--featured .story-intro {
    grid-template-columns: 130px 1fr;   /* 180px −30% */
    gap: var(--space-4);
    align-items: start;
  }
}

/* Portrait sits centered on mobile, fills the narrow grid column on desktop.
   No figcaption — the body paragraph and pullquote carry the context. */
.story-portrait {
  margin: 0 auto;
  max-width: 187px;  /* 260px −30% */
}
.story-portrait img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block;
}
@media (min-width: 700px) {
  .story-portrait { max-width: none; }
  .story-portrait img {
    height: 200px;
    object-fit: cover;
    object-position: center top;
  }
}
/* About-section subhead — quieter than h2, used for "The team". */
.about-subhead {
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
  text-align: center;
}

/* Team group photo — full container width by default */
.team-photo {
  max-width: var(--max-width);
  margin: 0 auto var(--space-2);
}
/* Narrow variant — matches the 760px text column in About Us */
.team-photo--narrow {
  max-width: 760px;
}
.team-photo img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block;
}
.team-photo .photo-placeholder {
  /* Placeholder shows the 540px container at a video-like 16:9 ratio
     so the layout can be previewed before the real photo lands. */
  aspect-ratio: 16 / 9;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Team caption now carries the full team statement (was previously a
   short name list with a separate team-bio paragraph below — those were
   merged). Bumped from 0.9rem/0.8 opacity so the longer copy reads well.
   Wider on desktop so the caption doesn't look pinched under the wide
   team photo. */
.team-photo figcaption {
  font-size: 1rem;
  font-style: italic;
  opacity: 0.95;
  text-align: center;
  max-width: 820px;
  margin: 0.75rem auto 0;
  line-height: 1.5;
}

/* Bridge paragraph between team caption and timeline — slightly larger
   than body copy to read as a thesis statement, sits above the sage cards. */
.about-history,
#about .container > p {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
}
.about-history {
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
}

/* Don's book block — small footer note inside the About section.
   The cover image tilts a few degrees to the left and casts a soft
   shadow so it reads as if lying on a table. On narrow screens the
   cover and copy stack vertically. */
.book-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  max-width: 720px;
  margin: var(--space-4) auto 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.book-cover {
  flex: 0 0 auto;
  display: block;
  width: 150px;
  /* Background kept fully transparent — page beige shows through the
     corners of the rotated rectangle without any compositing tint. */
  background: transparent;
}
.book-cover img {
  width: 100%;
  height: auto;
  display: block;
  /* Transform + shadow live on the IMG so the shadow respects the
     actual rotated rectangle. Shadow uses the dark forest from the
     palette (not pure black) so it harmonises with the warm beige
     section background instead of reading as cool gray. */
  transform: rotate(-4deg);
  box-shadow: 0 10px 18px rgba(62, 80, 52, 0.22);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.book-cover:hover img,
.book-cover:focus img {
  transform: rotate(-2deg) translateY(-2px);
  box-shadow: 0 12px 22px rgba(62, 80, 52, 0.26);
}
.book-copy {
  flex: 1 1 0;
  max-width: 420px;
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
}
@media (max-width: 600px) {
  .book-block {
    flex-direction: column;
    text-align: center;
    gap: var(--space-3);
  }
  .book-copy {
    max-width: 100%;
  }
}

.story-video {
  max-width: 540px;
  margin: var(--space-2) auto 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: transparent;
  position: relative;
}
.story-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
}

/* Asililo: before photo + video side-by-side, both locked to 16:9 */
.story-photos--video .story-photo img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  border-radius: var(--radius);
}
.story-photo--video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
}
.story-photo--video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Photo placeholder — pale, just enough to show the box shape until a real image lands */
.photo-placeholder {
  background: rgba(255, 255, 255, 0.12);
  border: 1px dashed rgba(255, 255, 255, 0.3);
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.9rem;
}

/* Story globe — default (featured card) still floats right */
.story-globe {
  float: right;
  width: 90px;
  height: 90px;
  margin: 0 0 1rem 1.5rem;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  shape-outside: circle(50%);
}


/* Slider instruction hint */
.slider-hint {
  text-align: center;
  font-size: 0.85rem;
  color: #fff;
  letter-spacing: 0.03em;
  margin-top: 0.6rem;
  margin-bottom: 0;
}

/* ----- Drag-to-compare slider (featured before/after) ----- */
.compare-slider {
  position: relative;
  width: 100%;
  /* No max-width — fills the story-card column, matching the photo pairs in other cards */
  margin: 0 auto var(--space-2);
  aspect-ratio: 4 / 3;           /* matches the cropped 960x720 source photos */
  border-radius: var(--radius);
  overflow: hidden;
  cursor: ew-resize;
  user-select: none;
  touch-action: pan-y;           /* lets vertical scrolling still work */
  background: rgba(0, 0, 0, 0.1);
}
.compare-img {
  position: absolute;
  inset: 0;
}
.compare-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.compare-img .photo-placeholder {
  width: 100%;
  height: 100%;
  aspect-ratio: unset;
  border-radius: 0;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
  letter-spacing: 0.05em;
}
/* Distinct gradients so the slider effect is visible without real photos */
.compare-placeholder-before {
  background: linear-gradient(135deg, #2d3a25 0%, #4a5e3d 100%);
}
.compare-placeholder-after {
  background: linear-gradient(135deg, #c4b896 0%, #e2d6b8 100%);
  color: var(--color-accent-darkest);
}
/* The "before" layer is clipped to reveal more or less as the user drags */
.compare-before {
  clip-path: inset(0 50% 0 0);   /* initial divider position */
}
.compare-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: rgba(255, 255, 255, 0.95);
  transform: translateX(-1px);
  pointer-events: none;          /* clicks pass through to the slider container */
}
.compare-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border: none;
  background: #fff;
  color: var(--color-accent-darkest);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  cursor: ew-resize;
  pointer-events: auto;          /* the handle itself stays interactive */
}
.compare-handle:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}
.compare-caption {
  text-align: center;
  font-size: 0.9rem;
  opacity: 0.85;
  font-style: italic;
  margin-bottom: var(--space-3);   /* sits inside the featured story card */
}

/* ----------------------------------------------------------------
   9. VIDEO (responsive 16:9)
   ---------------------------------------------------------------- */
.video-wrap {
  position: relative;
  padding-top: 56.25%; /* 16:9 */
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
}
.video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* ----------------------------------------------------------------
   10. GIVEBUTTER + FORM
   ---------------------------------------------------------------- */
.givebutter-embed {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: var(--space-3) auto 0;
}
.placeholder-note {
  color: var(--color-muted);
  font-style: italic;
  margin: 0;
}

/* Givebutter donate-widget mock — a placeholder approximating what the
   real widget will look like so the team can preview the layout. Remove
   when the real embed code is pasted in. */
.donate-mock {
  text-align: center;
}
.donate-mock-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #FFD500;
  color: #1a1a1a;
  border: none;
  border-radius: 8px;
  padding: 0.85rem 1.75rem;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: not-allowed;
  font-family: inherit;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.donate-mock-button svg {
  width: 18px;
  height: 18px;
}
.donate-mock-byline {
  margin: 0.75rem 0 0;
  font-size: 0.8rem;
  color: var(--color-muted);
  letter-spacing: 0.04em;
}
.donate-mock-note {
  margin: 0.5rem 0 0;
  font-size: 0.7rem;
  color: var(--color-muted);
  font-style: italic;
  opacity: 0.7;
}

.contact-form {
  display: grid;
  gap: var(--space-2);
}
.contact-form label {
  display: flex;
  flex-direction: column;
  font-weight: 600;
  font-size: 0.95rem;
}
.contact-form input,
.contact-form textarea {
  font: inherit;
  margin-top: 0.3rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}
.hp-field { display: none; } /* Honeypot — invisible to humans */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  gap: var(--space-4);
}
@media (min-width: 700px) {
  .contact-grid { grid-template-columns: 1fr 1fr 1fr; }
  .contact-grid--two { grid-template-columns: 1fr 1fr; }
}

/* ----------------------------------------------------------------
   Contact section — three equal columns
   All three use .contact-col-block for consistent label → content → action.
   Stacks vertically on mobile.
   ---------------------------------------------------------------- */
.contact-three-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-3);
}
@media (min-width: 700px) {
  .contact-three-col {
    grid-template-columns: 1fr 1fr 1fr;
    align-items: start;
  }
}
.contact-col-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.contact-col-block .book-cover {
  width: 120px;
  margin: 0 auto;
}
.contact-col-block p {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 var(--space-2);
}
.contact-col-block .book-copy {
  margin: 0 0 var(--space-2);
  max-width: 100%;
}

/* Footer newsletter Sign up button hover */
.js-newsletter-open:hover {
  background: #fff !important;
  color: #3e5034 !important;
}

/* Footer newsletter column */
.footer-newsletter-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 180px;
  padding: 2rem;
}

.contact-col-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-accent-dark);
  font-weight: 500;
  margin: 0 0 0.75rem;
}

.contact-info h3 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text);
  margin-top: var(--space-2);
  margin-bottom: 0.3rem;
}
.contact-info p { margin-bottom: var(--space-2); }

/* Send message button — yellow → green on hover */
.js-contact-open {
  background: #FFCD38;
  color: #3e5034;
  border: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.js-contact-open:hover,
.js-contact-open:focus {
  background: var(--color-accent);
  color: var(--color-accent-darkest);
}

/* Centre-align contact section on all screens */
.contact-info { text-align: center; }

/* Newsletter divider + form in contact section */
.contact-newsletter-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: var(--space-4) 0 var(--space-3);
  color: var(--color-muted);
  font-size: 0.9rem;
}
.contact-newsletter-divider::before,
.contact-newsletter-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}
/* Margie newsletter panel */
.contact-newsletter-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.margie-photo {
  width: 130px;
  height: 200px;
  border-radius: var(--radius);
  object-fit: cover;
  object-position: center top;
}
.margie-intro {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0;
}

.contact-newsletter {
  width: 100%;
}

/* Stacked signup fields used in both newsletter and book-launch forms */
.signup-fields {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.signup-fields input,
.signup-fields textarea {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.9rem;
  font-family: inherit;
  line-height: 1.4;
}
.signup-fields input:focus {
  outline: none;
  border-color: var(--color-accent-dark);
}
.signup-fields button {
  padding: 0.6rem 1.25rem;
  background: #FFCD38;
  color: #3e5034;
  border: none;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  align-self: flex-start;
}
.signup-fields button:hover { background: #f0be20; }

/* Book launch section */
.book-launch-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 700px) {
  .book-launch-grid {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}
.book-launch-copy h2 { margin-bottom: 0.75rem; }
.book-launch-copy p  { margin-bottom: 0; color: var(--color-muted); }
/* Book signup form sits on sage-green background — override inputs to match */
.book-launch-form .signup-fields input {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.3);
  color: #fff;
  font-size: 0.9rem;
  padding: 0.55rem 0.75rem;
}
.book-launch-form .signup-fields input::placeholder {
  color: rgba(255,255,255,0.65);
}
.book-launch-form .signup-fields input:focus {
  border-color: rgba(255,255,255,0.7);
  outline: none;
}
.book-launch-form .signup-fields button {
  background: #FFCD38;
  color: #3e5034;
}
.book-launch-form .signup-fields button:hover {
  background: #f0be20;
}

/* Book notify trigger button — yellow, fades to white on hover */
.js-book-notify {
  transition: background 0.2s, color 0.2s;
}
.js-book-notify:hover {
  background: #fff !important;
  color: #3e5034 !important;
}
.contact-newsletter-row {
  display: flex;
  gap: 0.5rem;
}
.contact-newsletter-row input {
  flex: 1;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.9rem;
  min-width: 0;
}
.contact-newsletter-row input:focus {
  outline: none;
  border-color: var(--color-accent-dark);
}
.contact-newsletter-row button {
  padding: 0.55rem 1.25rem;
  background: #FFCD38;
  color: #3e5034;
  border: none;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
}
.contact-newsletter-row button:hover { background: #f0be20; }

/* Foundation boxes */
.foundation-boxes {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  margin: var(--space-3) 0 var(--space-2);
}
@media (max-width: 699px) {
  .foundation-box { padding: 1rem 1.1rem; }
  /* Shrink circles on mobile — match footer logo height */
  .candid-badge-svg { width: 64px; height: 64px; }
  .donut-chart { width: 64px; height: 64px; }
  /* Center-align Independent Profile and Stewardship boxes on mobile */
  .foundation-box:nth-child(2),
  .foundation-box:nth-child(3) {
    text-align: center;
  }
  .foundation-box:nth-child(3) .stewardship-chart {
    align-items: center;
  }
  .foundation-box:nth-child(3) .donut-legend {
    align-self: center;
    text-align: left; /* keep swatch + label pairs left-aligned within the centred block */
  }
}
@media (min-width: 700px) {
  .foundation-boxes { grid-template-columns: repeat(3, 1fr); }
}
.foundation-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3);
}
.foundation-box dt {
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-accent-dark);
  display: block;
  margin-bottom: 0.65rem;
}
.foundation-box dd {
  margin: 0;
  font-weight: 400;
  color: var(--color-text);
}
/* Newsletter inside foundation box */
.foundation-newsletter {
  margin-top: 1rem;
}
.foundation-newsletter-row {
  display: flex;
  gap: 0.5rem;
}
.foundation-newsletter-row input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.9rem;
  min-width: 0;
}
.foundation-newsletter-row input:focus {
  outline: none;
  border-color: var(--color-accent-dark);
}
.foundation-newsletter-row button {
  padding: 0.5rem 1rem;
  background: #FFCD38;
  color: #3e5034;
  border: none;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
}
.foundation-newsletter-row button:hover { background: #f0be20; }

.foundation-docs {
  color: var(--color-muted);
  font-size: 0.95rem;
}

/* Stewardship donut chart */
.stewardship-row { grid-column: 2; grid-row: 1 / 4; } /* right column, spans all three text rows */
.stewardship-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
}
.donut-chart {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
  transform: rotate(-90deg); /* start segments at top */
}
.donut-programs    { stroke: #3e5034; }
.donut-fundraising { stroke: #FFCD38; }
.donut-admin       { stroke: #9cb88a; }
.donut-pct {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  fill: var(--color-text);
  text-anchor: middle;
  transform: rotate(90deg);
  transform-origin: 50px 50px;
}
.donut-label {
  font-size: 9px;
  fill: var(--color-muted);
  text-anchor: middle;
  transform: rotate(90deg);
  transform-origin: 50px 50px;
}
.donut-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.9rem;
  align-self: flex-start;
}
.legend-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  margin-right: 0.4rem;
  vertical-align: middle;
}
.swatch-programs    { background: #3e5034; }
.swatch-fundraising { background: #FFCD38; }
.swatch-admin       { background: #9cb88a; }

/* ----------------------------------------------------------------
   11. FOOTER
   ---------------------------------------------------------------- */
/* Instagram section */
.section-instagram {
  background: #204B26;
  padding: var(--space-5) 0 var(--space-5);
  color: #fff;
}
.ig-title-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: var(--space-3);
  text-align: left;
}
.section-instagram h2 {
  color: #fff;
  margin-top: 0;
  margin-bottom: 0;
  text-align: left;
}
.ig-logo {
  margin-top: var(--space-3);
  display: flex;
  justify-content: center;
}
.ig-logo img {
  height: 60px;
  width: auto;
  opacity: 0.75;
}

/* Footer */
.site-footer {
  background: #113915;
  color: #d9d5cd;
  padding: 0;
  margin-top: 0;
}
.site-footer a { color: #fff; }
.site-footer .container { padding: 0; }

.footer-ig-heading {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1rem;
  margin-top: 0;
  color: #fff;
  text-decoration: none;
  margin-bottom: 0;
  opacity: 0.9;
}
.footer-ig-heading:hover { opacity: 1; text-decoration: underline; }

/* Donate modal overlay */
.donate-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; }
.donate-modal[hidden] { display: none; }
.donate-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
.donate-modal-box {
  position: relative;
  background: #fff;
  border-radius: 12px;
  padding: 2rem 1.5rem 1.5rem;
  max-width: 480px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 40px rgba(0,0,0,0.3);
}
.donate-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #666;
  line-height: 1;
  padding: 0.25rem 0.5rem;
}
.donate-modal-close:hover { color: #000; }

/* Footer bottom bar — three columns */
.footer-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  align-items: stretch;
  padding: 0;
  max-width: var(--max-width);
  margin: 0 auto;
}

/* Each footer column */
.footer-bottom > * {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 180px;
  padding: 2rem;
}

/* Brand — right-aligned */
.footer-brand {
  align-items: flex-end;
  padding-right: 2rem;
}
/* Legal in left column — left-aligned */
.footer-legal--left {
  align-items: flex-start;
  text-align: left;
  padding-left: 2rem;
}
.footer-logo {
  height: 52px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
}
.footer-brand a:hover .footer-logo,
.footer-brand a:focus .footer-logo {
  content: url("../assets/images/logo-yellow.png");
}
.footer-tagline {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
  max-width: 220px;
}

/* Newsletter */
.footer-newsletter-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(255,255,255,0.6);
  margin-bottom: 1rem;
}
.footer-newsletter-row {
  display: flex;
  gap: 0.5rem;
  width: 100%;
  max-width: 280px;
}
.footer-newsletter-row input {
  flex: 1;
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 0.9rem;
  min-width: 0;
}
.footer-newsletter-row input::placeholder { color: rgba(255,255,255,0.4); }
.footer-newsletter-row input:focus { outline: none; border-color: #FFCD38; }
.footer-newsletter-row button {
  padding: 0.55rem 1rem;
  background: #FFCD38;
  color: #3e5034;
  border: none;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
}
.footer-newsletter-row button:hover { background: #f0be20; }

/* Legal */
.footer-legal {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.75);
  line-height: 2;
}
.footer-legal p { margin: 0; }
.footer-legal a { color: rgba(255,255,255,0.9); text-decoration: underline; }
.footer-legal a:hover { color: #fff; }

@media (max-width: 700px) {
  .footer-bottom { grid-template-columns: 1fr; }
  .footer-bottom > * { min-height: auto; padding: 2rem 1.5rem; }
}

/* ----------------------------------------------------------------
   FOUNDATION BAR
   ---------------------------------------------------------------- */
.foundation-bar {
  background: #FFCD38;
}
.foundation-bar-inner-wrap {
  display: flex;
  align-items: center;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-4) 2rem;
}
.foundation-bar-text {
  flex: 1;
}
.foundation-bar-text p {
  font-size: 0.95rem;
  color: #1a2414;
  margin: 0;
  line-height: 1.55;
}
.foundation-bar-text a {
  color: #1a2414;
  text-decoration: underline;
}
.foundation-bar-text a:hover { opacity: 0.75; }
.foundation-bar-arrow-col {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
}
.foundation-bar-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1;
  color: var(--color-accent-darkest);
  text-decoration: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.foundation-bar-arrow:hover,
.foundation-bar-arrow:focus {
  transform: translate(3px, -3px);
  opacity: 0.75;
}
@media (max-width: 700px) {
  .footer-bottom { grid-template-columns: 1fr; }
  .footer-bottom > * { min-height: auto; padding: 0.75rem 1.5rem; align-items: center; text-align: center; }
  .footer-brand { order: 1; padding-right: 1.5rem; padding-bottom: 0.5rem; }
  .footer-newsletter-col { order: 2; }
  .footer-legal--left { order: 3; align-items: center; text-align: center; }
  .btn-yellow { width: 149px; }
}

/* Behold widget overrides — force 3-column grid, square cells */
behold-widget {
  display: block;
  --behold-columns: 3;
}

/* Footer stacks vertically — copyright, meta, then social icons as a row. */
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-1);
}

.footer-socials {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* Social icon links */
.footer-social {
  display: inline-flex;
  align-items: center;
  color: #cad8b6;
  transition: opacity 0.2s ease;
}
.footer-social:hover { opacity: 0.7; }
.footer-social svg {
  width: 26px;
  height: 26px;
  display: block;
}

/* ----------------------------------------------------------------
   12. MOBILE TUNING
   One block of narrow-screen overrides so the phone view is calm
   and well-paced without spreading tweaks across every section.
   ---------------------------------------------------------------- */
@media (max-width: 700px) {
  /* Headings — wrap less awkwardly in the narrow column */
  h1 { font-size: 2rem; }
  h2 { font-size: 2rem; }

  /* Section breathing room — less aggressive than desktop's 4rem */
  .section { padding: var(--space-4) 0; }
  .section-tagline { font-size: 1.125rem; }

  /* Hero — smaller headline + shorter minimum so the photo
     doesn't eat the whole first viewport */
  .hero { padding: var(--space-4) 0; min-height: clamp(320px, 50vh, 480px); }
  .hero h1 { font-size: 2.25rem; }
  .hero-tagline { font-size: 1rem; }

  /* Open mobile nav — divider line + roomier tap targets */
  .primary-nav {
    margin-top: var(--space-1);
    padding-top: var(--space-1);
    border-top: 1px solid var(--color-border);
  }
  .primary-nav a {
    padding: 0.75rem 0;
    font-size: 1.05rem;
  }

  /* Stories + stats — slight reductions for the narrow column */
  .stat-number { font-size: 2.25rem; }
  .timeline-year { font-size: 2.25rem; }
  .story-body h3 { font-size: 1.4rem; }
  .story-pullquote { font-size: 1.15rem; }
}