/* ============================================================
   HOPE FOR ORPHANS — offline prototype
   Design language: Ukrainian wheat fields + sunflowers + vyshyvanka
   (embroidery) cross-stitch motifs, paper-craft layered illustration.
   No external fonts/images — everything renders fully offline.
   ============================================================ */

/* ============================================================
   Embedded webfonts (self-hosted so the prototype renders
   correctly fully offline, without relying on the viewer's
   machine already having these fonts installed)
   ============================================================ */
@font-face{
  font-family: 'Bebas Neue';
  src: url('assets/fonts/bebas-neue-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Montserrat';
  src: url('assets/fonts/montserrat-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Montserrat';
  src: url('assets/fonts/montserrat-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root{
  /* Palette — white / black / grey / tan, single red accent (no blue/green/gold) */
  --cream:        #FAF8F4;
  --cream-deep:   #EFEAE1;
  --paper:        #FFFFFF;
  --ink:          #201D1B;
  --ink-soft:     #6B6560;
  --line:         #DDD6C9;

  --gold:         #D9CBA8;   /* muted tan accent */
  --gold-deep:    #B7A170;
  --sky:          #8A8580;   /* neutral grey accent */
  --sky-deep:     #1C1917;   /* near-black band */
  --poppy:        #B3362A;   /* primary red accent */
  --poppy-deep:   #8C2A20;
  --sage:         #3A3532;   /* charcoal accent */
  --sage-deep:    #221F1D;

  --font-heading: 'Bebas Neue', Impact, 'Arial Narrow Bold', sans-serif;   /* big red section labels */
  --font-display: 'Montserrat', Arial, sans-serif;   /* headings / sub-headers — bold */
  --font-body:    'Montserrat', Arial, sans-serif;   /* body copy — regular */
  --font-utility: 'Montserrat', Arial, sans-serif;   /* buttons, nav, tags, labels */

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 12px 30px -12px rgba(32,29,27,0.22);
  --container: 1180px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}
h1{ font-size: clamp(2.2rem, 4vw, 3.4rem); }
h2{ font-size: clamp(1.95rem, 3.6vw, 2.75rem); }
h3{ font-size: 1.3rem; }
h4{ font-size: 1.05rem; }
p{ margin:0 0 1em; }
.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}
.eyebrow{
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--poppy);
  display:inline-flex;
  align-items:center;
  gap:.7em;
  margin-bottom: 1em;
}
.eyebrow::before{
  content:"";
  width: 38px; height: 3px;
  background: var(--poppy);
  display:inline-block;
}
.section-rule{
  height:1px;
  background: var(--line);
  width:100%;
  margin: 0 0 48px;
}

/* Section header hierarchy: the red label is the big, primary
   header (Bebas Neue); the headline underneath is a smaller
   Montserrat Bold sub-header. Matches the approved mockup. */
.section-head .eyebrow{
  font-size: clamp(2.4rem, 4.6vw, 3.4rem);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1;
  gap:0;
  margin-bottom: .3em;
}
.section-head .eyebrow::before{
  content: none;
  display: none;
}
.section-head h2{
  font-size: clamp(1.2rem, 1.7vw, 1.4rem);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0;
}


/* ---------- Stitch divider removed per feedback (no orange cross-hatch) ---------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family: var(--font-utility);
  font-weight:700;
  font-size: .92rem;
  padding: 12px 22px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{ background: var(--poppy); color: var(--paper); box-shadow: var(--shadow); }
.btn-primary:hover{ background: var(--poppy-deep); }
.btn-outline{ background:transparent; border-color: var(--ink); color: var(--ink); }
.btn-outline:hover{ background: var(--ink); color: var(--cream); }
.btn-gold{ background: var(--gold); color: var(--ink); }
.btn-gold:hover{ background: var(--gold-deep); color: var(--paper); }
.btn-sm{ padding: 8px 16px; font-size: .82rem; }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding: 64px 0 0;
  overflow:hidden;
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%);
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items:center;
  padding-bottom: 40px;
}
.hero h1{
  margin-bottom: .4em;
}
.hero .lede{
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 46ch;
}
.hero-ctas{ display:flex; gap:14px; margin: 26px 0 8px; flex-wrap:wrap; }
.hero-scene{ position:relative; }

/* Quick donate widget */
.quick-donate{
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  margin-top: 28px;
  max-width: 480px;
  border: 1px solid var(--cream-deep);
}
givebutter-widget{ display:block; width:100%; }
.quick-donate h3{ font-size:1.05rem; margin-bottom:2px; }
.quick-donate .sub{ font-size:.85rem; color:var(--ink-soft); margin-bottom:14px; }

/* ---------- Stats ---------- */
.stats-band{ background: var(--sky-deep); color: var(--cream); padding: 46px 0; }
.stats-grid{
  display:grid; grid-template-columns: repeat(4,1fr); gap: 24px;
  text-align:center;
}
.stat-num{ font-family: var(--font-display); font-size: 2.4rem; color: var(--poppy); }
.stat-label{ font-family: var(--font-utility); font-size:.85rem; letter-spacing:.03em; color: var(--cream-deep); }

/* ---------- Section shells ---------- */
section{ padding: 76px 0; }
.section-tight{ padding: 54px 0; }
.section-head{ max-width: 640px; margin-bottom: 40px; }
.section-head.no-sub{ margin-bottom: 24px; }
.section-alt{ background: var(--paper); }

.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.team-row-2{
  grid-template-columns: repeat(2, minmax(0, calc((100% - 2 * 26px) / 3)));
  justify-content: center;
  margin-top: 26px;
}
.grid-2{ display:grid; grid-template-columns: repeat(2,1fr); gap: 26px; }
.grid-4{ display:grid; grid-template-columns: repeat(4,1fr); gap: 22px; }

/* ---------- Cards ---------- */
.card{
  background: var(--paper);
  border-radius: var(--radius);
  border: 1px solid var(--cream-deep);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow); }
.card-body{ padding: 22px; }
.card h3{ font-size: 1.18rem; margin-bottom: 8px; }
.card p{ color: var(--ink-soft); font-size: .95rem; }
.card .tag{
  display:inline-block; font-family: var(--font-utility); font-size:.7rem;
  font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  background: var(--cream-deep); color: var(--sky-deep);
  padding: 4px 10px; border-radius:999px; margin-bottom:10px;
}

/* Photo placeholder frames (used everywhere instead of real photos) */
.photo-frame{
  position:relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius-sm);
  background: linear-gradient(150deg, var(--sky) 0%, var(--sky-deep) 100%);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  border: 4px solid var(--paper);
  outline: 2px dashed rgba(250,243,231,0.55);
  outline-offset: -10px;
}
.photo-frame.gold{ background: linear-gradient(150deg, var(--gold) 0%, var(--gold-deep) 100%); }
.photo-frame.poppy{ background: linear-gradient(150deg, #c9584a 0%, var(--poppy-deep) 100%); }
.photo-frame.sage{ background: linear-gradient(150deg, #55504A 0%, var(--sage-deep) 100%); }
.photo-frame svg{ width: 42%; height:42%; opacity:.95; }
.photo-caption{
  position:absolute; left:0; right:0; bottom:0;
  background: rgba(42,36,32,0.62);
  color: var(--cream);
  font-family: var(--font-utility);
  font-size: .72rem;
  padding: 8px 12px;
  letter-spacing: .01em;
}
.photo-caption b{ color: var(--gold); font-weight:700; }

/* ---------- Testimonials ---------- */
.testimonial{
  background: var(--cream-deep);
  border-radius: var(--radius);
  padding: 28px;
  position:relative;
}
.testimonial .quote-mark{
  font-family: var(--font-display);
  font-size: 3.2rem;
  color: var(--poppy-deep);
  line-height:0;
  display:block;
  margin-bottom: 12px;
}
.testimonial p{ font-size: 1rem; color: var(--ink); }
.testimonial .who{ font-family: var(--font-utility); font-weight:700; font-size:.85rem; color: var(--sky-deep); }

/* ---------- Team ---------- */
.team-card{ text-align:center; padding: 26px 20px; }
.avatar{
  width: 96px; height:96px; border-radius:50%;
  margin: 0 auto 16px;
  display:flex; align-items:center; justify-content:center;
  color: var(--paper); font-family: var(--font-display); font-size:1.6rem; font-weight:700;
}
.team-card h3{ margin-bottom:2px; font-size:1.05rem; }
.team-role{ font-family: var(--font-utility); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color: var(--poppy-deep); font-weight:700; margin-bottom:10px; }
.team-quote{ font-size:.88rem; color: var(--ink-soft); font-style:italic; }

/* ---------- What We Do: static two-column layout (mock-matched) ---------- */
.whatwedo-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items:start;
}
.whatwedo-text .section-head{ margin-bottom: 18px; max-width:none; }
.whatwedo-text p{ color: var(--ink-soft); margin-bottom: 1.3em; }
.whatwedo-visual{ position:relative; }
.map-static-card{
  background: var(--cream-deep); border-radius: var(--radius);
  border: 1px solid var(--line); padding: 22px; box-shadow: var(--shadow);
}
.map-static-card img{
  width:100%; display:block; border-radius: var(--radius-sm);
  filter: drop-shadow(0 10px 18px rgba(32,29,27,0.16));
}
.connector-arrow{
  position:absolute; right:-42px; top:32%; width:138px; z-index:2;
}
.stat-box{
  background: var(--cream-deep); border-radius: var(--radius);
  padding: 8px 28px; margin-top: 24px;
}
.stat-line{
  font-family: var(--font-body); font-size: 1.05rem; color: var(--ink-soft);
  padding: 14px 0; border-bottom: 1px dashed var(--line);
}
.stat-line:last-child{ border-bottom: none; }
.stat-num-inline{
  font-family: var(--font-display); font-weight:700; font-size: 1.5rem;
  color: var(--poppy); margin-right: 10px;
}
@media (max-width: 920px){
  .connector-arrow{ display:none; }
}
.map-wrap{
  display:grid; grid-template-columns: 1.2fr 0.8fr; gap: 30px; align-items:start;
}
.map-image-wrap{
  position:relative; width:100%; border-radius: var(--radius-sm); overflow:hidden;
  filter: drop-shadow(0 10px 18px rgba(32,29,27,0.16));
}
.map-image-wrap img{ width:100%; display:block; }
.map-hotspot{
  position:absolute; width:30px; height:30px; border-radius:50%;
  transform: translate(-50%,-50%);
  background: transparent; border: 3px solid transparent; cursor:pointer; padding:0;
  transition: background .15s, border-color .15s;
}
.map-hotspot:hover{ background: rgba(32,29,27,0.10); }
.map-hotspot.active{ border-color: var(--ink); background: rgba(179,54,42,0.14); }
.map-hotspot:focus-visible{ outline: 3px solid var(--poppy); outline-offset:2px; }
.map-svg-holder{
  background: var(--cream-deep);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  padding: 20px;
  box-shadow: var(--shadow);
}
.map-detail{
  background: var(--sky-deep); color: var(--cream);
  border-radius: var(--radius); padding: 26px; min-height: 260px;
  position: sticky; top: 24px;
}
.map-detail .tag{ background: rgba(255,255,255,.14); color: var(--poppy); }
.map-detail h3{ color:var(--cream); }
.map-detail .metric-row{ display:flex; gap:22px; margin-top:16px; }
.map-detail .metric-num{ font-family:var(--font-display); font-size:1.6rem; color:var(--poppy); }
.map-detail .metric-label{ font-size:.72rem; font-family:var(--font-utility); color: var(--cream-deep); }
/* route-line removed — reference map uses plain dots, no connecting path */

/* ---------- Financials ---------- */
.fin-grid{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 46px; align-items:center; }
.donut-wrap{ display:flex; align-items:center; justify-content:center; }
.legend{ margin-top: 18px; }
.legend-row{ display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px dashed var(--cream-deep); font-size:.92rem; }
.legend-row .swatch{ width:14px; height:14px; border-radius:4px; flex:none; }
.legend-row .pct{ margin-left:auto; font-family: var(--font-display); font-weight:700; }
.info-box{
  background: var(--cream-deep); border-radius: var(--radius); padding: 22px; margin-top: 20px;
  border-left: 5px solid var(--poppy);
}

/* ---------- Volunteer form ---------- */
.form-card{ background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: 32px; }
.form-row{ margin-bottom: 18px; }
.form-row label{ display:block; font-family: var(--font-utility); font-weight:700; font-size:.85rem; margin-bottom:6px; }
.form-row input, .form-row select, .form-row textarea{
  width:100%; padding: 12px 14px; border-radius: 10px; border: 1.5px solid var(--cream-deep);
  font-family: var(--font-body); font-size: .95rem; background: var(--cream);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{
  outline: 2px solid var(--poppy); border-color: var(--poppy);
}
.role-pick{ display:grid; grid-template-columns: repeat(3,1fr); gap:14px; margin-bottom: 22px; }
.role-card{
  border: 2px solid var(--cream-deep); border-radius: var(--radius-sm); padding: 16px; cursor:pointer; transition:.15s;
}
.role-card:hover{ border-color: var(--poppy); }
.role-card.selected{ border-color: var(--sky-deep); background: var(--cream-deep); }
.role-card h4{ font-family:var(--font-display); margin-bottom:4px; font-size:1rem; }
.role-card p{ font-size:.82rem; color:var(--ink-soft); margin:0; }
.checkbox-card{ display:block; position:relative; }
.checkbox-card input[type="checkbox"]{
  position:absolute; top:16px; right:16px; width:20px; height:20px;
  accent-color: var(--poppy); cursor:pointer;
}
.checkbox-card h4{ padding-right:32px; }
.checkbox-card.selected{ border-color: var(--poppy); background: var(--cream-deep); }

/* ---------- Partners logo wall ---------- */
.logo-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.logo-card{
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  padding: 30px 20px; min-height: 130px; transition: box-shadow .15s, border-color .15s;
}
.logo-card:hover{ box-shadow: var(--shadow); border-color: var(--poppy); }
.logo-card svg{ max-width: 100%; height:auto; }
.partner-category h3{ margin-bottom: 16px; font-size:1.1rem; }
.partner-category{ margin-bottom: 40px; }

/* ---------- Upcoming camps ---------- */
.camp-card{ display:flex; flex-direction:column; height:100%; }
.camp-date{
  font-family: var(--font-utility); font-weight:700; font-size:.78rem; letter-spacing:.05em;
  text-transform:uppercase; color: var(--poppy); margin-bottom:6px;
}
.camp-meta{ display:flex; gap:14px; font-size:.82rem; color:var(--ink-soft); margin-top:10px; font-family:var(--font-utility); }
.camp-meta span{ display:flex; align-items:center; gap:5px; }

/* ---------- CTA band ---------- */
.cta-band{
  background: var(--poppy); color: var(--paper);
  border-radius: var(--radius); padding: 46px; text-align:center;
  margin: 20px 0;
}
.cta-band h2{ color: var(--paper); }
.cta-band p{ color: rgba(255,255,255,.86); max-width: 60ch; margin-left:auto; margin-right:auto; }
.cta-band .btn-primary{ background: var(--paper); color: var(--poppy-deep); }
.cta-band .btn-primary:hover{ background: var(--cream); }

/* ---------- Footer ---------- */
footer{ background: var(--ink); color: var(--cream-deep); padding: 50px 0 26px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; margin-bottom: 30px; }
.footer-grid h4{ color: var(--poppy); font-family: var(--font-utility); font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px; }
.footer-grid a{ display:block; color: var(--cream-deep); opacity:.85; font-size:.9rem; margin-bottom:9px; }
.footer-grid a:hover{ opacity:1; color: var(--poppy); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding-top:20px; font-size:.78rem; color:rgba(250,243,231,.6); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* ---------- Utility ---------- */
.center{ text-align:center; }
.mt-lg{ margin-top: 40px; }
.two-col{ display:grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items:center; }

/* ---------- Responsive ---------- */
@media (max-width: 920px){
  .hero-grid, .fin-grid, .map-wrap, .two-col, .whatwedo-grid{ grid-template-columns: 1fr; }
  .grid-3, .grid-4{ grid-template-columns: repeat(2,1fr); }
  .footer-grid{ grid-template-columns: repeat(2,1fr); }
  .stats-grid{ grid-template-columns: repeat(2,1fr); gap: 30px; }
  .map-detail{ position:static; }
}
@media (max-width: 600px){
  .grid-3, .grid-4, .grid-2, .role-pick{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
  .stats-grid{ grid-template-columns: 1fr 1fr; }
  .hero{ padding-top: 40px; }
  section{ padding: 52px 0; }
}

/* ============================================================
   ONE-PAGE SITE ADDITIONS (real photography + in-page nav)
   ============================================================ */

/* Real photo frames */
.photo-frame-real{
  position:relative; aspect-ratio: 4/3; border-radius: var(--radius-sm);
  overflow:hidden; border: 4px solid var(--paper); box-shadow: var(--shadow);
  background: var(--cream-deep); display:block;
  transition: transform .15s ease, box-shadow .15s ease;
}
a.photo-frame-real:hover{ transform: translateY(-3px); box-shadow: 0 16px 28px -10px rgba(32,29,27,0.32); }
.carousel-hint{
  text-align:center; font-size:.85rem; color: var(--ink-soft);
  margin-top: 14px; font-family: var(--font-utility);
}

/* ---------- Camp gallery page ---------- */
.camp-date-line{
  font-family: var(--font-utility); font-weight:700; color: var(--poppy);
  text-transform: uppercase; letter-spacing:.04em; font-size:.85rem; margin-bottom: 16px;
}
.photo-tile{
  border-radius: var(--radius); overflow:hidden; border:1px solid var(--line);
  cursor:pointer; aspect-ratio:4/3; background: var(--cream-deep); padding:0;
  display:block; width:100%; transition: transform .15s ease, box-shadow .15s ease;
}
.photo-tile img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-tile:hover{ transform: translateY(-3px); box-shadow: var(--shadow); }

.lightbox{
  position:fixed; inset:0; background: rgba(20,18,16,0.94);
  display:none; align-items:center; justify-content:center; z-index:999; padding:24px;
}
.lightbox.open{ display:flex; }
.lightbox img{
  max-width:88vw; max-height:82vh; border-radius:8px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5); display:block;
}
.lightbox-close{
  position:absolute; top:22px; right:26px; background:none; border:none;
  color:#fff; font-size:2.2rem; line-height:1; cursor:pointer;
}
.lightbox-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,.25);
  color:#fff; width:56px; height:56px; border-radius:50%; font-size:1.8rem;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition: background .15s;
}
.lightbox-arrow:hover{ background: rgba(255,255,255,0.2); }
.lightbox-arrow.left{ left:20px; }
.lightbox-arrow.right{ right:20px; }
.lightbox-counter{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,.75); font-family: var(--font-utility); font-size:.85rem;
}
@media (max-width: 600px){
  .lightbox-arrow{ width:44px; height:44px; font-size:1.4rem; }
  .lightbox-close{ top:12px; right:16px; font-size:1.8rem; }
}

/* ---------- Camp gallery pop-out modal ---------- */
.camp-modal{
  position:fixed; inset:0; z-index:900; display:none;
  align-items:center; justify-content:center; padding:24px;
}
.camp-modal.open{ display:flex; }
.camp-modal-backdrop{
  position:absolute; inset:0; background: rgba(20,18,16,0.72);
}
.camp-modal-panel{
  position:relative; z-index:1;
  background: var(--cream); border-radius: var(--radius);
  max-width: 1100px; width:100%; max-height:88vh; overflow-y:auto;
  padding: 44px; box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
.camp-modal-close{
  position:absolute; top:16px; right:20px; background:none; border:none;
  font-size:2rem; line-height:1; color: var(--ink-soft); cursor:pointer;
  z-index:2;
}
.camp-modal-close:hover{ color: var(--ink); }
.camp-modal-nav{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom: 22px; font-family: var(--font-utility); font-weight:700; font-size:.92rem;
}
.camp-modal-prev, .camp-modal-next{
  background:none; border:none; color: var(--poppy); cursor:pointer;
  display:flex; align-items:center; gap:6px; padding:6px 4px;
}
.camp-modal-prev:hover, .camp-modal-next:hover{ color: var(--poppy-deep); }
@media (max-width: 600px){
  .camp-modal-panel{ padding: 28px 20px; }
}
.photo-frame-real img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-frame-real.wide{ aspect-ratio: 16/10; }
.photo-frame-real.square{ aspect-ratio: 1/1; }
.photo-frame-real .photo-caption{
  position:absolute; left:0; right:0; bottom:0;
  background: linear-gradient(0deg, rgba(42,36,32,.75), rgba(42,36,32,0));
  color: var(--cream); font-family: var(--font-utility); font-size:.74rem;
  padding: 22px 12px 10px;
}

/* Hero with real photography */
.hero-photo{
  position:relative; min-height: 620px; display:flex; align-items:center;
  overflow:hidden; padding: 0;
}
.hero-photo .hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-photo .hero-bg img{ width:100%; height:100%; object-fit:cover; object-position: center 32%; filter: grayscale(1); }
.hero-photo .hero-overlay{
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(115deg, rgba(39,76,99,.94) 0%, rgba(39,76,99,.72) 38%, rgba(42,36,32,.24) 78%);
}
.hero-photo .container{ position:relative; z-index:2; }
.hero-photo .hero-grid{ align-items:center; padding: 70px 0; }
.hero-photo h1, .hero-photo .eyebrow{ color: var(--cream); }
.hero-photo .eyebrow::before{ background: var(--poppy); }
.hero-photo .eyebrow{ font-size: clamp(1.2rem, 2.2vw, 1.9rem); margin-bottom: .6em; }
.hero-photo .eyebrow::before{ width: 56px; height: 4px; }
h1.hero-giant{
  font-family: var(--font-heading);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 0.95;
  font-size: clamp(3.6rem, 10.5vw, 9.5rem);
  margin-bottom: .3em;
}
.hero-photo .lede{ color: rgba(250,243,231,0.88); }
.hero-photo .quick-donate{ box-shadow: 0 24px 50px -16px rgba(0,0,0,.5); }

/* Avatar built from a real photo (team section) */
.avatar-photo{
  width: 108px; height:108px; border-radius:50%; overflow:hidden;
  margin: 0 auto 16px; border: 3px solid var(--paper); box-shadow: var(--shadow);
}
.avatar-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Orphanage chip list beside the map */
.site-chip-list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.site-chip{
  font-family: var(--font-utility); font-size:.76rem; font-weight:700;
  padding: 7px 13px; border-radius:999px; border:1.5px solid var(--cream-deep);
  background: var(--paper); cursor:pointer; transition:.15s;
}
.site-chip:hover{ border-color: var(--poppy); }
.site-chip.active{ background: var(--poppy); color: var(--paper); border-color: var(--poppy-deep); }

/* Map pin label visibility (10 pins = keep it tidy) */
.pin text{ opacity:0; transition: opacity .15s ease; paint-order: stroke; stroke: var(--paper); stroke-width: 3px; }
.pin:hover text, .pin.active text{ opacity:1; }
.pin circle{ r:6; }
.pin:hover circle, .pin.active circle{ r:8.5; }

/* Gallery grid removed in favor of scrollable carousel below */
.carousel-wrap{ position:relative; }
.carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow);
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; line-height:1; color: var(--ink); cursor:pointer; z-index:5;
  transition: background .15s, color .15s, border-color .15s;
}
.carousel-arrow:hover{ background: var(--poppy); color: var(--paper); border-color: var(--poppy-deep); }
.carousel-arrow.left{ left:-8px; }
.carousel-arrow.right{ right:-8px; }
@media (max-width: 600px){
  .carousel-arrow{ width:36px; height:36px; font-size:1.2rem; }
  .carousel-arrow.left{ left:-4px; }
  .carousel-arrow.right{ right:-4px; }
}
.story-carousel{
  display:flex; gap:18px; overflow-x:auto; padding-bottom:14px;
  scroll-snap-type: none;
  scroll-behavior: auto !important;
  -webkit-overflow-scrolling:touch;
}
.story-carousel .photo-frame-real{
  flex: 0 0 300px; aspect-ratio:4/3; scroll-snap-align: none;
}
.story-carousel::-webkit-scrollbar{ height:8px; }
.story-carousel::-webkit-scrollbar-thumb{ background: var(--line); border-radius:999px; }
.story-carousel::-webkit-scrollbar-track{ background: transparent; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .card, .btn{ transition:none; }
}

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 3px solid var(--sky-deep); outline-offset: 2px;
}