/* ============================================
   Feiyah Action Network, v2 layer
   Loaded AFTER style.css. Additive only: it introduces the components the
   per-item pages need and retunes the header. Nothing here restyles a class
   used by the existing pages, so style.css keeps serving them unchanged
   until this layer is rolled out.

   Brand tokens come from style.css. Gold stays reserved for donation CTAs.
   ============================================ */

/* ---- Header: fewer items, calmer, sticky on scroll ---- */
.hdr{
  position: sticky; top: 0; z-index: 200;
  background: rgba(255,255,255,0.96);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.hdr-in{
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 68px;
}
.hdr-brand{ display:flex; align-items:center; gap:11px; flex-shrink:0; }
.hdr-brand img{ width:40px; height:auto; }
.hdr-brand b{
  font-family:'Playfair Display',Georgia,serif; font-weight:700;
  color:var(--purple); font-size:1.02rem; line-height:1.15; display:block;
}
.hdr-brand span{ font-size:0.72rem; color:var(--ink-soft); letter-spacing:0.02em; }
.hdr-nav{ display:flex; align-items:center; gap:4px; }
.hdr-nav a{
  padding:9px 13px; border-radius:999px; font-size:0.93rem; font-weight:600;
  color:var(--ink); white-space:nowrap;
}
.hdr-nav a:hover{ background:var(--purple-tint); color:var(--purple-dark); }
.hdr-nav a[aria-current="page"]{ background:var(--purple-tint); color:var(--purple-dark); }
.hdr-give{
  background:var(--gold); color:var(--purple-dark) !important;
  padding:10px 18px !important; font-weight:700; margin-left:6px;
}
.hdr-give:hover{ background:var(--gold-dark); color:#fff !important; }
.hdr-burger{
  display:none; width:44px; height:44px; border:1px solid var(--line);
  border-radius:10px; background:#fff; cursor:pointer; padding:0;
  align-items:center; justify-content:center;
}
.hdr-burger i{ display:block; width:19px; height:2px; background:var(--ink); position:relative; }
.hdr-burger i::before,.hdr-burger i::after{
  content:''; position:absolute; left:0; width:19px; height:2px; background:var(--ink);
}
.hdr-burger i::before{ top:-6px; } .hdr-burger i::after{ top:6px; }

@media (max-width: 900px){
  .hdr-burger{ display:flex; }
  .hdr-nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid var(--line); padding:8px 16px 16px;
    box-shadow: var(--shadow);
  }
  .hdr-nav.open{ display:flex; }
  .hdr-nav a{ padding:13px 12px; border-radius:8px; font-size:1rem; }
  .hdr-give{ margin:8px 0 0; text-align:center; }
}

/* ---- Page head: left aligned, no centred eyebrow and rule ---- */
.phead{ padding: 44px 0 10px; }
.phead .crumbs{ font-size:0.82rem; color:var(--ink-soft); margin-bottom:14px; }
.phead .crumbs a{ color:var(--ink-soft); text-decoration:underline; text-underline-offset:2px; }
.phead .crumbs a:hover{ color:var(--purple); }
.phead .tag{
  display:inline-block; font-size:0.72rem; font-weight:700; letter-spacing:0.09em;
  text-transform:uppercase; color:var(--purple); background:var(--purple-tint);
  padding:5px 11px; border-radius:999px; margin-bottom:14px;
}
.phead h1{ margin:0 0 14px; max-width:16ch; }
.phead .lede{
  font-size:clamp(1.05rem,2.1vw,1.28rem); line-height:1.55;
  color:var(--ink); max-width:60ch; margin:0;
}

/* ---- Facts strip ---- */
.facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:10px; overflow:hidden; margin:30px 0 0;
}
/* On a narrow screen auto-fit leaves a trailing empty cell showing the grid
   gap colour, which reads as a rendering fault. Stack instead. */
@media (max-width:620px){ .facts{ grid-template-columns:1fr; } }
.facts div{ background:#fff; padding:16px 18px; }
.facts dt{ font-size:0.74rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:var(--ink-soft); }
.facts dd{ margin:5px 0 0; font-size:1.02rem; font-weight:600; color:var(--purple-dark); line-height:1.35; }

/* ---- Readable article column ---- */
.prose{ max-width:68ch; }
.prose h2{
  font-size:clamp(1.35rem,2.4vw,1.75rem); margin:36px 0 12px;
  padding-top:22px; border-top:1px solid var(--line);
}
.prose h2:first-child{ border-top:none; padding-top:0; margin-top:0; }
.prose p{ font-size:1.02rem; }
.prose ul{ margin:0 0 1.1em; color:var(--ink-soft); }
.prose li{ margin-bottom:7px; }

/* ---- Gallery: 2 up on phones, never a wall of tall images ---- */
.shots-h{ font-size:1.1rem; margin:40px 0 0; }
/* Two columns on a phone, three from tablet up, so six images land as neat
   rows rather than leaving an orphan on the end. */
.shots{
  display:grid; gap:8px; margin:20px 0 0;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:760px){ .shots{ gap:12px; grid-template-columns:repeat(3,1fr); } }
.shots img{
  width:100%;
  /* height:auto is required. Without it the width/height attributes on the
     img win over aspect-ratio and every photo renders at its full 600px. */
  height:auto; aspect-ratio:4/3; object-fit:cover;
  border-radius:8px; border:1px solid var(--line);
}

/* ---- Give block. The only gold on the page. ---- */
.give{
  margin:44px 0 0; padding:28px; border-radius:12px;
  background:var(--purple-dark); color:#EADCF0;
}
.give h2{ color:#fff; margin:0 0 8px; font-size:1.4rem; }
.give p{ color:#DCC9E4; margin:0 0 18px; max-width:52ch; }
.give a{
  display:inline-block; background:var(--gold); color:var(--purple-dark);
  font-weight:700; padding:13px 26px; border-radius:999px;
}
.give a:hover{ background:#EFBB33; color:var(--purple-dark); }

/* ---- Next / sibling links, so a reader is never at a dead end ---- */
.siblings{ margin:40px 0 0; }
.siblings h2{ font-size:1.1rem; margin:0 0 14px; }
.sib-grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.sib{
  display:block; padding:18px 20px; border:1px solid var(--line);
  border-radius:10px; background:#fff;
}
.sib:hover{ border-color:var(--purple); background:var(--purple-tint); }
.sib b{ display:block; font-family:'Playfair Display',Georgia,serif; color:var(--purple-dark); font-size:1.08rem; margin-bottom:5px; }
.sib span{ font-size:0.9rem; color:var(--ink-soft); }

.wrap{ padding:34px 0 60px; }