/* ── RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --green:       #4a7c59;
  --green-dark:  #1e3a2a;
  --green-mid:   #264d37;
  --pink:        #c9697e;
  --pink-dark:   #a8505f;
  --teal:        #2d6666;
  --teal-light:  #3d8080;
  --earth:       #c9b49a;
  --earth-dark:  #8a7060;
  --cream:       #faf7f3;
  --white:       #ffffff;
  --charcoal:    #1a1a1a;
  --mid:         #555;
  --light:       #e8e4e0;
  --font-serif:  'Playfair Display', Georgia, serif;
  --font-sans:   'Inter', system-ui, sans-serif;

  /* Background art. These are only the fallbacks for a missing build: the
     real defaults come from /media/backgrounds.css, generated by
     build/optimize_images.py so they always point at variants that exist, and
     backgrounds.js overrides both at runtime from /data/backgrounds.json.

     Never put a master path here. The browser acts on this stylesheet before
     any script runs, so a master URL means every visitor downloads the
     full-resolution original before anything can substitute a variant. */
  --bg-hero-right:      none;
  --bg-hero-right-pos:  center;
  --bg-page-hero:       none;
  --bg-page-hero-pos:   center;
  --bg-cta-section:     none;
  --bg-cta-section-pos: center;
}

html { scroll-behavior: smooth; }
body { font-family: var(--font-sans); color: var(--charcoal); background: var(--white); }

/* Images resolved through the media manifest carry width/height attributes so
   the browser can reserve the correct box before the file arrives. Those
   attributes are a presentational hint with lower precedence than author CSS,
   but only where author CSS actually sets a height — otherwise the attribute
   wins and an image laid out with `width: 100%` is stretched to the source's
   full pixel height.

   Declaring height:auto here makes the attributes advisory site-wide, which
   is the behaviour every layout in this file wants. The handful of rules that
   genuinely need a fixed height (.nav-logo, .fw-strip, .social-avatar,
   .footer-brand, the hero Instagram tiles) each set one explicitly and
   override this by specificity. Fixing it per selector instead meant the same
   bug reappearing on every image newly routed through the manifest. */
img { height: auto; }

/* ── NAV ── */
nav {
  position: sticky; top: 0; z-index: 300;
  background: var(--white); border-bottom: 2px solid var(--charcoal);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 3rem; height: 100px;
}
.nav-logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; flex-shrink: 0; }
.nav-logo img { height: 80px; width: 80px; object-fit: contain; }
.nav-wordmark { font-family: var(--font-serif); font-size: 0.9rem; font-weight: 700; color: var(--green-dark); line-height: 1.2; }
.nav-wordmark span { display: block; font-family: var(--font-sans); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pink); }
.nav-links { display: flex; gap: 1.75rem; list-style: none; margin: 0 1.5rem; }
.nav-links a {
  text-decoration: none; font-size: 0.78rem; font-weight: 600;
  color: var(--mid); letter-spacing: 0.03em; text-transform: uppercase;
  transition: color 0.15s; white-space: nowrap;
}
.nav-links a:hover,
.nav-links a.active { color: var(--charcoal); }
.nav-links a.active { border-bottom: 2px solid var(--pink); padding-bottom: 2px; }
.nav-right { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.nav-cta {
  background: var(--charcoal); color: var(--white);
  padding: 0.5rem 1.1rem; border-radius: 0.25rem;
  font-size: 0.78rem; font-weight: 700; text-decoration: none;
  letter-spacing: 0.04em; text-transform: uppercase; transition: background 0.15s; white-space: nowrap;
}
.nav-cta:hover { background: var(--green-dark); }
.nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  padding: 0.4rem; flex-direction: column; gap: 5px;
}
.nav-toggle span {
  display: block; width: 22px; height: 2px;
  background: var(--charcoal); border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}
nav.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
nav.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── BUTTONS ── */
.btn {
  display: inline-block; padding: 0.85rem 1.75rem; border-radius: 0.25rem;
  font-size: 0.85rem; font-weight: 700; text-decoration: none;
  letter-spacing: 0.04em; text-transform: uppercase; transition: all 0.15s; cursor: pointer;
  border: none;
}
.btn-white { background: var(--white); color: var(--green-dark); }
.btn-white:hover { background: var(--cream); }
.btn-ghost { background: transparent; color: var(--white); border: 1.5px solid rgba(255,255,255,0.35); }
.btn-ghost:hover { border-color: var(--white); background: rgba(255,255,255,0.08); }
.btn-ghost-dark { background: transparent; color: var(--charcoal); border: 1.5px solid var(--charcoal); }
.btn-ghost-dark:hover { background: var(--charcoal); color: var(--white); }
.btn-pink { background: var(--pink); color: var(--white); }
.btn-pink:hover { background: var(--pink-dark); }
.btn-dark { background: var(--charcoal); color: var(--white); }
.btn-dark:hover { background: #333; }
.btn-green { background: var(--green); color: var(--white); }
.btn-green:hover { background: var(--green-dark); }

/* ── PAGE HERO (inner pages) ── */
.page-hero {
  background: var(--green-dark);
  padding: 5rem 4rem 4.5rem;
  position: relative; overflow: hidden;
  min-height: 395px;
}
.page-hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--bg-page-hero);
  background-position: var(--bg-page-hero-pos); background-size: cover; background-repeat: no-repeat;
  opacity: 0.06; z-index: 0;
}
.page-hero-inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; }
.page-hero-eyebrow {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--pink); background: rgba(201,105,126,0.15); border: 1px solid rgba(201,105,126,0.3);
  display: inline-block; padding: 0.28rem 0.7rem; border-radius: 0.25rem; margin-bottom: 1.25rem;
}
.page-hero-title {
  font-family: var(--font-sans); font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 800; color: var(--white); line-height: 1.05;
  letter-spacing: -0.02em; margin-bottom: 1rem;
}
.page-hero-sub {
  font-size: 1rem; color: rgba(255,255,255,0.55);
  line-height: 1.75; max-width: 580px;
}

/* ── SHARED SECTION ── */
section { padding: 5rem 4rem; }
.section-label {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--pink); margin-bottom: 0.75rem;
}
.section-title {
  font-family: var(--font-sans); font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800; color: var(--charcoal); line-height: 1.1;
  letter-spacing: -0.02em; margin-bottom: 1rem;
}
.section-intro { font-size: 1rem; color: var(--mid); line-height: 1.75; max-width: 720px; margin-inline: auto; }
.section-divider { width: 48px; height: 3px; background: var(--pink); margin: 1.5rem 0; border-radius: 2px; }
.section-inner { max-width: 1200px; margin: 0 auto; }
.section-inner-wide { max-width: 1400px; margin: 0 auto; }

/* ── STATS BAR ── */
.stats-bar {
  background: var(--pink); padding: 2rem 4rem;
  display: flex; justify-content: space-around; flex-wrap: wrap; gap: 2rem;
}
.stat { text-align: center; color: var(--white); }
.stat-num { font-family: var(--font-sans); font-size: 3rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.stat-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85; margin-top: 0.25rem; }

/* ── FIREWEED STRIP ── */
.fw-strip { width: 100%; height: 300px; position: relative; overflow: hidden; }
.fw-strip img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.fw-strip-overlay { position: absolute; inset: 0; }
.fw-caption { display: none; }

/* ── HOME HERO ── */
.hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.hero-left {
  background: var(--green-dark); padding: 6rem 5rem;
  display: flex; flex-direction: column; justify-content: center;
}
.hero-right {
  background-image: var(--bg-hero-right);
  background-position: var(--bg-hero-right-pos); background-size: cover; background-repeat: no-repeat;
  display: flex; align-items: center; justify-content: center; padding: 4rem;
  position: relative; overflow: hidden;
}
.hero-right img { width: min(340px,80%); height: auto; object-fit: contain; border-radius: 0.5rem; position: relative; z-index: 2; }
.hero-right::before { content:''; position:absolute; inset:0; background:rgba(20,50,35,0.45); z-index:1; }
.hero-hadih { font-family: var(--font-serif); font-style: italic; font-size: 1rem; color: rgba(255,255,255,0.45); margin-bottom: 1.25rem; display: block; }
.hero-eyebrow {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--pink); background: rgba(201,105,126,0.15); border: 1px solid rgba(201,105,126,0.3);
  display: inline-block; padding: 0.3rem 0.75rem; border-radius: 0.25rem; margin-bottom: 1.5rem;
}
.hero h1 {
  font-family: var(--font-sans); font-size: clamp(2.6rem, 5vw, 4.2rem);
  font-weight: 800; color: var(--white); line-height: 1.05;
  letter-spacing: -0.02em; margin-bottom: 1rem;
}
.hero h1 em { color: var(--pink); font-style: normal; }
.hero-tagline { font-size: 1rem; font-style: italic; font-family: var(--font-serif); color: rgba(255,255,255,0.6); margin-bottom: 1.5rem; }
.hero-sub { font-size: 0.95rem; color: rgba(255,255,255,0.55); line-height: 1.75; max-width: 480px; margin-bottom: 2.5rem; }
.hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* ── ABOUT SECTION ── */
.about { background: var(--white); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.about-copy p + p { margin-top: 1rem; }
.about-copy .section-intro { max-width: 100%; }
.about-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--light); }
.meta-item-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--mid); margin-bottom: 0.3rem; }
.meta-item-val { font-size: 0.875rem; color: var(--charcoal); line-height: 1.5; }
.about-img { border-radius: 0.5rem; overflow: hidden; cursor: pointer; box-shadow: 0 8px 40px rgba(0,0,0,0.1); }
.about-img img { width: 100%; display: block; transition: transform 0.3s; }
.about-img:hover img { transform: scale(1.02); }

/* ── PILLARS ── */
.pillars { background: var(--teal); }
.pillars .section-label { color: rgba(255,255,255,0.6); }
.pillars .section-title { color: var(--white); }
.pillars-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.25rem; margin-top: 2.5rem; }
.pillar-card {
  background: var(--white); border-radius: 0.25rem; padding: 2rem;
  border-left: 4px solid; transition: transform 0.15s;
}
.pillar-card:hover { transform: translateX(4px); }
.pillar-card:nth-child(1) { border-color: var(--green); }
.pillar-card:nth-child(2) { border-color: var(--pink); }
.pillar-card:nth-child(3) { border-color: var(--teal-light); }
.pillar-card:nth-child(4) { border-color: var(--earth-dark); }
.pillar-num { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mid); margin-bottom: 0.75rem; }
.pillar-title { font-family: var(--font-sans); font-size: 1rem; font-weight: 700; color: var(--charcoal); margin-bottom: 0.6rem; letter-spacing: -0.01em; }
.pillar-text { font-size: 0.875rem; color: var(--mid); line-height: 1.65; }

/* ── AMBASSADOR GRID ── */
.amb-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.75rem; margin-top: 2.5rem; }
.amb-grid.amb-grid-full { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.amb-card { cursor: pointer; border-radius: 0.375rem; overflow: hidden; border: 1px solid var(--light); transition: box-shadow 0.15s, transform 0.15s; }
.amb-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.12); transform: translateY(-2px); }
/* height:auto restated so aspect-ratio governs the box — see the base img rule. */
.amb-card img { width: 100%; height: auto; display: block; aspect-ratio: 4/5; object-fit: cover; }
.amb-card-info { padding: 0.75rem 0.75rem 0.875rem; border-top: 1px solid var(--light); }
.amb-card-name { font-size: 0.8rem; font-weight: 700; color: var(--charcoal); line-height: 1.3; }
.amb-card-nation { font-size: 0.68rem; color: var(--green); margin-top: 0.2rem; line-height: 1.4; }
.amb-card-bio { font-size: 0.78rem; color: var(--mid); line-height: 1.6; margin-top: 0.6rem; }

/* ── SOCIAL SECTION ── */
.social-section { background: var(--cream); }
.social-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-top: 2.5rem; }
.social-post { border-radius: 0.5rem; overflow: hidden; position: relative; cursor: pointer; }
.social-post img { width: 100%; display: block; transition: transform 0.3s; }
.social-post:hover img { transform: scale(1.04); }
.social-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0); display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.social-post:hover .social-overlay { background: rgba(0,0,0,0.25); }
.social-overlay span { color: var(--white); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0; transition: opacity 0.2s; }
.social-post:hover .social-overlay span { opacity: 1; }
.social-handle { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--light); }
.social-avatar { width: 42px; height: 42px; border-radius: 0.25rem; overflow: hidden; flex-shrink: 0; }
.social-avatar img { width: 100%; height: 100%; object-fit: cover; }
.social-handle-name { font-size: 0.9rem; font-weight: 700; color: var(--charcoal); }
.social-handle-sub { font-size: 0.75rem; color: var(--mid); margin-top: 0.1rem; }

/* ── EVENTS ── */
.events-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2.5rem; }
.event-card {
  border: 1px solid var(--light); border-radius: 0.5rem; padding: 2.5rem;
  display: flex; gap: 2rem; align-items: flex-start; transition: border-color 0.15s;
}
.event-card:hover { border-color: var(--green); }
.event-card.event-pink:hover { border-color: var(--pink); }
.event-date { flex-shrink: 0; width: 64px; text-align: center; }
.event-month { font-size: 0.65rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; color: var(--mid); }
.event-day { font-size: 2.8rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--green); }
.event-pink .event-day { color: var(--pink); }
.event-title { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 0.6rem; }
.event-detail { font-size: 0.875rem; color: var(--mid); line-height: 1.65; }
.event-tag {
  display: inline-block; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 0.2rem 0.6rem;
  border-radius: 0.2rem; margin-top: 0.75rem;
  background: #e8f0eb; color: var(--green);
}
.event-card.event-pink .event-tag { background: #fdf0f2; color: var(--pink); }

/* ── MEDIA SECTION ── */
.media-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; margin-top: 2.5rem; }
.media-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.media-img { border-radius: 0.5rem; overflow: hidden; cursor: pointer; border: 1px solid var(--light); transition: box-shadow 0.15s; }
.media-img:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.12); }
.media-img img { width: 100%; display: block; }
.media-outlets { display: flex; flex-direction: column; gap: 0; }
.outlet { padding: 1.25rem 0; border-bottom: 1px solid var(--light); }
.outlet:first-child { border-top: 1px solid var(--light); }
.outlet-name { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; color: var(--teal-light); margin-bottom: 0.4rem; }
.outlet-desc { font-size: 0.875rem; color: var(--mid); line-height: 1.6; }
.media-note { font-size: 0.8rem; color: var(--mid); margin-top: 1.5rem; }
.media-note a { color: var(--teal-light); text-decoration: none; }
.media-note a:hover { text-decoration: underline; }

/* ── RESOURCES (content in resources.html uses inline layout) ── */

.faq { background: var(--cream); }
.faq-list { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 0; }
.faq-item { border-bottom: 1px solid var(--light); }
.faq-item:first-child { border-top: 1px solid var(--light); }
.faq-q {
  font-size: 0.95rem; font-weight: 700; color: var(--charcoal); padding: 1.25rem 0;
  cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  user-select: none;
}
.faq-q::after { content: '+'; font-size: 1.25rem; font-weight: 300; color: var(--pink); flex-shrink: 0; transition: transform 0.2s; }
.faq-item.open .faq-q::after { transform: rotate(45deg); }
.faq-a { display: none; font-size: 0.9rem; color: var(--mid); line-height: 1.75; padding-bottom: 1.25rem; max-width: 680px; }
.faq-item.open .faq-a { display: block; }

.steps-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; margin-top: 2.5rem; }
.step { text-align: center; padding: 1.5rem 1.25rem; max-width: 340px; flex: 0 1 300px; }
.step-num { font-size: 2rem; font-weight: 800; color: var(--pink); line-height: 1; margin-bottom: 0.75rem; }
.step-title { font-size: 0.82rem; font-weight: 700; color: var(--charcoal); margin-bottom: 0.4rem; }
.step-body { font-size: 0.78rem; color: var(--mid); line-height: 1.55; }

/* ── PARTNERS ── */
.partners-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2.5rem; }
.partner-card {
  border: 1px solid var(--light); border-radius: 0.5rem; padding: 2.5rem;
  display: flex; flex-direction: column; gap: 1rem; transition: border-color 0.15s;
}
.partner-card:hover { border-color: var(--green); }
.partner-logo-area { height: 64px; display: flex; align-items: center; }
.partner-name { font-size: 1rem; font-weight: 800; color: var(--charcoal); letter-spacing: -0.01em; }
.partner-type { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--teal-light); margin-top: 0.25rem; }
.partner-desc { font-size: 0.875rem; color: var(--mid); line-height: 1.65; }

/* ── GET INVOLVED ── */
.involve-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-top: 2.5rem; }
.involve-card {
  border-radius: 0.5rem; padding: 2.25rem; border: 1px solid var(--light);
  transition: border-color 0.15s, transform 0.15s;
}
.involve-card:hover { border-color: var(--green); transform: translateY(-2px); }
.involve-icon { font-size: 2rem; margin-bottom: 1rem; line-height: 1; }
.involve-title { font-size: 1rem; font-weight: 800; color: var(--charcoal); margin-bottom: 0.6rem; letter-spacing: -0.01em; }
.involve-body { font-size: 0.875rem; color: var(--mid); line-height: 1.65; margin-bottom: 1.25rem; }

/* ── CONTACT / FORM ── */
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; }
.contact-info-group { margin-bottom: 2rem; }
.contact-info-label { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; color: var(--mid); margin-bottom: 0.4rem; }
.contact-info-val { font-size: 0.95rem; color: var(--charcoal); }
.contact-info-val a { color: var(--pink); text-decoration: none; }
.contact-info-val a:hover { text-decoration: underline; }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.25rem; }
.form-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; color: var(--charcoal); }
.form-input, .form-textarea, .form-select {
  font-family: var(--font-sans); font-size: 0.9rem;
  padding: 0.75rem 1rem; border: 1.5px solid var(--light); border-radius: 0.25rem;
  background: var(--white); color: var(--charcoal);
  transition: border-color 0.15s; width: 100%;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
  outline: none; border-color: var(--green);
}
.form-textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-submit {
  background: var(--charcoal); color: var(--white); padding: 0.875rem 2rem;
  border-radius: 0.25rem; font-size: 0.85rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; border: none;
  transition: background 0.15s; width: 100%;
}
.form-submit:hover { background: var(--green-dark); }
.form-note { font-size: 0.75rem; color: var(--mid); margin-top: 0.5rem; }

/* ── CTA SECTION ── */
.cta-section {
  background-image: linear-gradient(rgba(30,58,42,0.88),rgba(30,58,42,0.88)), var(--bg-cta-section);
  background-position: center, var(--bg-cta-section-pos); background-size: cover; background-repeat: no-repeat;
  padding: 7rem 4rem; text-align: center;
}
.cta-inner { max-width: 700px; margin: 0 auto; }
.cta-section .section-label { color: rgba(255,255,255,0.5); }
.cta-h {
  font-family: var(--font-sans); font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 800; color: var(--white); line-height: 1.05;
  letter-spacing: -0.03em; margin-bottom: 1.5rem;
}
.cta-sub { font-size: 1rem; color: rgba(255,255,255,0.6); line-height: 1.75; margin-bottom: 2.5rem; }
.cta-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }

/* ── FOOTER ── */
footer { background: #111; padding: 3rem 4rem; }
.footer-inner { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 2rem; }
.footer-brand { display: flex; align-items: center; gap: 0.75rem; }
.footer-brand img { height: 32px; width: 32px; object-fit: contain; opacity: 0.8; }
.footer-brand-text { font-family: var(--font-serif); font-size: 0.9rem; color: rgba(255,255,255,0.85); font-weight: 700; }
.footer-brand-text span { color: var(--pink); }
.footer-links { display: flex; gap: 1.75rem; list-style: none; flex-wrap: wrap; }
.footer-links a { color: rgba(255,255,255,0.4); font-size: 0.8rem; text-decoration: none; font-weight: 500; transition: color 0.15s; }
.footer-links a:hover { color: rgba(255,255,255,0.8); }
.footer-contact a { color: var(--pink); text-decoration: none; display: block; margin-bottom: 0.3rem; font-size: 0.82rem; }
.footer-contact a:last-child { color: rgba(255,255,255,0.35); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1); margin-top: 2.5rem; padding-top: 1.5rem;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1rem; font-size: 0.75rem; color: rgba(255,255,255,0.3);
}
.footer-mussi { font-family: var(--font-serif); font-style: italic; color: rgba(255,255,255,0.25); }

/* ── LIGHTBOX ── */
.lightbox {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.92); align-items: center; justify-content: center;
  padding: 2rem; cursor: pointer;
}
.lightbox.open { display: flex; }
/* width/height:auto so the max-* constraints scale the image proportionally.
   The dimension attributes set by the media helper would otherwise fix both
   axes, and clamping only one of them distorts the picture. */
.lightbox img { width: auto; height: auto; max-height: 90vh; max-width: 90vw; border-radius: 0.25rem; object-fit: contain; cursor: default; }

/* ── LIGHTBOX WITH TEXT PANEL ──
   Only engages when openLightbox() is given caption/permalink metadata;
   a plain image lightbox is unaffected. */
.lightbox-stage { display: contents; }
.lightbox-has-panel .lightbox-stage {
  display: flex;
  align-items: stretch;
  gap: 0;
  max-height: 90vh;
  max-width: min(1100px, 92vw);
  background: var(--white);
  border-radius: 0.4rem;
  overflow: hidden;
  cursor: default;
}
.lightbox-has-panel .lightbox-stage img {
  max-height: 90vh;
  max-width: min(62%, 620px);
  border-radius: 0;
  object-fit: contain;
  background: var(--charcoal);
}
.lightbox-panel {
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.5rem 1.25rem;
  overflow-y: auto;
  background: var(--white);
}
.lightbox-caption {
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--charcoal);
  overflow-y: auto;
}
.lightbox-caption p + p { margin-top: 0.75rem; }
.lightbox-date {
  margin-top: 1rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
}
.lightbox-ig-btn {
  margin-top: 1.25rem;
  align-self: flex-start;
  flex-shrink: 0;
  background: var(--charcoal);
  color: var(--white);
  padding: 0.6rem 1.1rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.15s;
}
.lightbox-ig-btn:hover { background: var(--pink); }
.lightbox-ig-btn:focus-visible,
.lightbox-close:focus-visible,
.lightbox-arrow:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }

/* ── GALLERY NAV ──
   Sits under the image column so it never overlaps the caption panel. */
.lightbox-nav { display: none; }
.lightbox-has-nav .lightbox-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.6rem;
  background: var(--charcoal);
  flex-shrink: 0;
}
.lightbox-has-panel.lightbox-has-nav .lightbox-stage { flex-wrap: wrap; }
.lightbox-has-panel.lightbox-has-nav .lightbox-nav {
  order: 3;
  width: 100%;
}
.lightbox-arrow {
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.15rem 0.7rem;
  border-radius: 0.2rem;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s, background 0.15s;
}
.lightbox-arrow:hover { opacity: 1; background: rgba(255,255,255,0.12); }
.lightbox-counter {
  color: rgba(255,255,255,0.75);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  min-width: 4.5rem;
  text-align: center;
}

@media (max-width: 800px) {
  .lightbox-has-panel .lightbox-stage {
    flex-direction: column;
    max-width: 94vw;
  }
  .lightbox-has-panel .lightbox-stage img {
    max-width: 100%;
    max-height: 46vh;
  }
  .lightbox-panel { padding: 1.1rem 1.1rem 1rem; }
}
.lightbox-close { position: absolute; top: 1.5rem; right: 2rem; color: white; font-size: 2rem; cursor: pointer; opacity: 0.6; transition: opacity 0.15s; line-height: 1; }
.lightbox-close:hover { opacity: 1; }

/* ── BREADCRUMB ── */
.breadcrumb { font-size: 0.75rem; color: rgba(255,255,255,0.35); margin-bottom: 1rem; }
.breadcrumb a { color: rgba(255,255,255,0.5); text-decoration: none; }
.breadcrumb a:hover { color: var(--pink); }
.breadcrumb span { margin: 0 0.4rem; }

/* ── LINK CARDS ── */
.link-card {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 1.5rem; border: 1px solid var(--light); border-radius: 0.375rem;
  text-decoration: none; color: var(--charcoal); transition: border-color 0.15s, background 0.15s;
}
.link-card:hover { border-color: var(--green); background: #f5f9f6; }
.link-card-title { font-size: 0.9rem; font-weight: 700; }
.link-card-sub { font-size: 0.78rem; color: var(--mid); margin-top: 0.2rem; }
.link-card-arrow { color: var(--green); font-size: 1.1rem; flex-shrink: 0; }

/* ── AMBASSADOR FULL CARD ── */
.amb-full-card {
  background: var(--white);
  border: 1px solid var(--light);
  border-radius: 0.5rem;
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
}
.amb-full-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.1); transform: translateY(-3px); }
.amb-full-img {
  /* height:auto — see the note on .amb-card img. */
  width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover;
  display: block; cursor: pointer;
}
.amb-full-info { padding: 1.25rem 1.25rem 1.5rem; }
.amb-full-name { font-size: 1rem; font-weight: 800; color: var(--charcoal); letter-spacing: -0.01em; }
.amb-full-nation { font-size: 0.72rem; color: var(--green); font-weight: 600; margin-top: 0.2rem; line-height: 1.4; }
.amb-full-bio { font-size: 0.82rem; color: var(--mid); line-height: 1.7; margin-top: 0.75rem; }
.amb-full-btn {
  display: inline-block; margin-top: 1rem; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-light);
  text-decoration: none; cursor: pointer; background: none; border: none; padding: 0;
}
.amb-full-btn:hover { color: var(--teal); text-decoration: underline; }

/* ── EVENT FULL CARD ── */
.event-full-card {
  border: 1px solid var(--light); border-radius: 0.75rem; overflow: hidden;
  transition: box-shadow 0.2s;
}
.event-full-card:hover { box-shadow: 0 8px 40px rgba(0,0,0,0.09); }
.event-full-header {
  padding: 2.5rem 3rem; display: flex; align-items: flex-start; gap: 2.5rem;
}
.event-full-header.green-header { background: var(--green-dark); }
.event-full-header.pink-header  { background: var(--teal); }
.event-full-date { flex-shrink: 0; text-align: center; }
.event-full-month { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.event-full-day   { font-size: 5rem; font-weight: 800; color: var(--white); line-height: 1; letter-spacing: -0.04em; }
.event-full-year  { font-size: 0.75rem; font-weight: 600; color: rgba(255,255,255,0.4); letter-spacing: 0.1em; }
.event-full-title-wrap { padding-top: 0.5rem; }
.event-full-eyebrow { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 0.5rem; }
.event-full-title { font-family: var(--font-sans); font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 800; color: var(--white); line-height: 1.1; letter-spacing: -0.02em; }
.event-full-body { padding: 2.5rem 3rem; background: var(--white); }
.event-full-detail-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-bottom: 2rem; }
.event-full-detail-label { font-size: 0.65rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; color: var(--mid); margin-bottom: 0.3rem; }
.event-full-detail-val { font-size: 0.875rem; color: var(--charcoal); line-height: 1.5; }

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .amb-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 960px) {
  nav { padding: 0 1.5rem; }
  .nav-links { display: none; position: absolute; top: 100px; left: 0; right: 0; flex-direction: column; background: var(--white); border-bottom: 2px solid var(--charcoal); padding: 1.5rem 2rem; gap: 1.25rem; z-index: 299; margin: 0; }
  nav.nav-open .nav-links { display: flex; }
  .nav-toggle { display: flex; }
  .nav-cta { display: none; }

  section { padding: 3.5rem 1.5rem; }
  .page-hero { padding: 3.5rem 1.5rem 3rem; }
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-left { padding: 4rem 1.5rem; }
  .hero-right { padding: 2rem 1.5rem 3.5rem; min-height: 360px; }
  .about-grid, .pillars-grid, .events-grid, .media-layout, .partners-grid, .contact-layout, .involve-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .resources-grid { grid-template-columns: 1fr; }
  .amb-grid { grid-template-columns: repeat(3, 1fr); }
  .amb-grid.amb-grid-full { grid-template-columns: repeat(2, 1fr); }
  .social-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-bar { padding: 1.5rem; gap: 1.5rem; }
  .cta-section { padding: 4rem 1.5rem; }
  footer { padding: 2rem 1.5rem; }
  .footer-inner { flex-direction: column; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .amb-grid { grid-template-columns: repeat(2, 1fr); }
  .amb-grid.amb-grid-full { grid-template-columns: 1fr; }
  .events-grid { grid-template-columns: 1fr; }
  .media-imgs { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
  .nav-wordmark { display: none; }
}

/* ── ACCESSIBILITY ─────────────────────────────────────────────────────────
   Skip link, screen-reader utility, focus indicators, reduced motion and
   target sizing. Uses only the design tokens declared in :root above —
   no new palette here. */

/* ── SCREEN-READER-ONLY ──
   Hides content visually while leaving it in the accessibility tree. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── SKIP LINK ──
   First element in <body>, so it is the first tab stop. Hidden with the
   clip-rect pattern rather than a transform so the reduced-motion block
   below can never reveal it, and so it takes no layout space when idle. */
.skip-link {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus {
  position: fixed;
  top: 0.75rem; left: 0.75rem;
  z-index: 500; /* above sticky nav (300), below lightbox (1000) */
  width: auto; height: auto;
  margin: 0; padding: 0.75rem 1.25rem;
  overflow: visible;
  clip: auto;
  clip-path: none;
  background: var(--charcoal);
  color: var(--white);
  text-decoration: none;
  font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  border-radius: 0.25rem;
  outline: 3px solid var(--white);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--charcoal);
}

/* ── GLOBAL FOCUS INDICATOR ──
   :focus-visible only, so a mouse click never draws a ring.
   The site has both cream/white and green-dark/charcoal surfaces, so a single
   colour cannot read on both. This is a two-tone ring: a white outline sitting
   inside a charcoal halo. On light surfaces the charcoal reads; on dark
   surfaces the white reads. Both are existing tokens. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--charcoal);
}

/* <main> carries tabindex="-1" purely as the skip-link landing target —
   a ring there is noise, so suppress it. */
#main-content:focus,
#main-content:focus-visible {
  outline: none;
  box-shadow: none;
}

/* ── FORM FIELD FOCUS ──
   The .form-input:focus rule above removes the outline and signals focus with
   a border colour alone. That border colour is left exactly as-is; this adds
   back a real, visible indicator on top of it. */
.form-input:focus-visible,
.form-textarea:focus-visible,
.form-select:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--charcoal);
}

/* ── FAQ QUESTION AS <button> ──
   .faq-q is a real button for keyboard/AT support. Strip the UA button
   styling so it renders identically to the <div> it replaced; the layout,
   colour and type rules in the .faq-q block above still apply. */
.faq-q {
  width: 100%;
  background: none;
  border: 0;
  font-family: inherit;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
}

/* ── TARGET SIZE (WCAG 2.2 AA 2.5.8) ──
   Footer nav links rendered ~15px tall. Vertical padding only, so the
   horizontal gap rhythm of the flex row is untouched. */
.footer-links a {
  display: inline-block;
  padding: 0.3rem 0;
  min-height: 24px;
}

/* ── REDUCED MOTION ──
   Mirrors the block at the foot of instagram-widget.css. State-indicating
   transforms (the nav hamburger becoming an X, the FAQ +/x) are deliberately
   kept — they carry meaning; only their transition is flattened. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

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

  /* Decorative hover motion — removed outright, not just sped up. */
  .about-img:hover img,
  .social-post:hover img,
  .pillar-card:hover,
  .amb-card:hover,
  .involve-card:hover,
  .amb-full-card:hover { transform: none; }
}