/* Community / Give back.
   Builds on base.css + industry.css. Everything is scoped .gb-* so it cannot
   leak into another page. Motion is decorative only: base.css kills animation
   under prefers-reduced-motion, so nothing here depends on a keyframe to
   reach its resting position. */

:root{
  --gb:#E37F3E;
  --gb-deep:#B85A22;
  --gb-ink:#9C6423;
  --gb-tint:#FBEADB;
  --gb-line:#F0D6BC;
}
:root[data-theme="dark"]{
  --gb:#F0954F;
  --gb-deep:#E37F3E;
  --gb-ink:#F0BA85;
  --gb-tint:#241A12;
  --gb-line:#3A2A1D;
}

/* ---------- hero: full-bleed photograph ----------------------------------- */

.gb-hero{position:relative;display:flex;align-items:flex-end;
  /* the whole screen before the first scroll. svh keeps mobile browsers from
     jumping as the URL bar hides, with vh as the fallback. Floors at 34rem so a
     short landscape window cannot push the headline off the bottom, and caps at
     84rem so it does not run away on a very tall display. */
  min-height:clamp(34rem,100vh,84rem);min-height:clamp(34rem,100svh,84rem);
  overflow:hidden;isolation:isolate;margin-bottom:clamp(3rem,7vw,5rem)}
.gb-hero-img{position:absolute;inset:0;z-index:0}
.gb-hero-img img{width:100%;height:100%;object-fit:cover;object-position:center 38%;
  transform:scale(1.04);animation:gb-drift 30s ease-in-out infinite alternate}
@keyframes gb-drift{from{transform:scale(1.04) translate3d(0,0,0)}
                    to{transform:scale(1.11) translate3d(-1%,-1.2%,0)}}
/* scrim: dark enough for white type at the foot, clear at the top */
.gb-hero::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,
    rgba(8,16,13,.93) 0%, rgba(8,16,13,.74) 24%, rgba(8,16,13,.36) 54%, rgba(8,16,13,.12) 100%)}
.gb-hero .wrap{position:relative;z-index:2;padding-bottom:clamp(2.5rem,6vw,4.5rem)}
.gb-hero h1{max-width:16ch;margin-top:1rem;color:#fff}
.gb-hero em{color:var(--gb)}
.gb-hero .lead{max-width:48ch;margin-top:1.2rem;color:rgba(255,255,255,.84)}
.gb-hero .eyebrow{color:var(--gb)}

/* ---------- the pledge ---------------------------------------------------- */

.gb-pledge{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1.8rem,5vw,4rem);
  align-items:center;padding-block:clamp(2rem,5vw,3.5rem);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gb-fig{font-family:var(--d);font-weight:440;line-height:.86;letter-spacing:-.02em;
  font-size:clamp(5rem,16vw,12rem);color:var(--gb-deep);display:block}
.gb-fig-note{display:block;margin-top:.6rem;font-family:var(--s);font-size:.74rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gb-ink)}
.gb-fig.word{font-size:clamp(2.8rem,7.5vw,6rem);line-height:.98}
.gb-pledge-body p{font-size:clamp(1.15rem,2vw,1.6rem);line-height:1.5;color:var(--ink);max-width:26ch}
.gb-pledge-body p b{font-weight:600}
/* the standing commitment: quieter than the pledge, louder than a footnote */
.gb-pledge-body p.gb-vow{margin-top:clamp(.9rem,2vw,1.25rem);font-weight:600;
  font-size:clamp(.94rem,1.2vw,1.05rem);color:var(--gb-ink);max-width:32ch}
.gb-pledge a.src{color:var(--gb-ink);border-bottom:1px solid var(--gb-line)}
.gb-pledge a.src:hover{border-bottom-color:var(--gb)}

/* ---------- the need: a smaller portrait beside the two figures ---------- */

/* p3 is architecture, not a picture sitting inside a panel: it takes the whole
   left edge and the panel's own corners, and its height is set by the figures
   beside it. Framed and centred, it read as a second hero straight after p1. */
.gb-need{display:grid;grid-template-columns:minmax(0,.44fr) minmax(0,1fr);
  gap:0;align-items:stretch;background:var(--gb-tint);
  border-radius:var(--r-lg);overflow:hidden;margin-top:clamp(2.5rem,5vw,4rem)}
.gb-need-photo{position:relative;background:var(--gb-line);
  min-height:clamp(17rem,30vw,24rem)}
.gb-need-photo img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 28%}
.gb-need-figs{display:grid;gap:clamp(1.3rem,3vw,2.1rem);align-content:center;
  padding:clamp(1.8rem,4vw,3.2rem)}
.gb-need-figs b{display:block;font-family:var(--d);font-weight:460;line-height:1;
  font-size:clamp(2.6rem,7vw,4.2rem);color:var(--gb-deep)}
.gb-need-figs span{display:block;margin-top:.5rem;font-size:clamp(.96rem,1.3vw,1.06rem);
  color:var(--soft);line-height:1.55;max-width:32ch}

/* ---------- the courtyard, contained --------------------------------------- */

/* Held inside the column rather than run edge to edge: full-bleed at 58vh
   overpowered the hero and broke the one width the rest of the page keeps. */
/* 16:9, not 21:9. The need panel above runs roughly 3:1, so a wide thin band
   directly beneath it read as the same object twice; a taller frame separated
   from it by the figures strip does not. */
.gb-band{position:relative;overflow:hidden;background:var(--gb-tint);
  border-radius:var(--r-lg);aspect-ratio:16/9;
  margin-block:clamp(2.8rem,6vw,5rem)}
.gb-band img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 45%}

/* ---------- the programme, as a strip of figures -------------------------- */

.gb-ledger{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:1px;
  background:var(--gb-line);border:1px solid var(--gb-line);border-radius:var(--r-md);
  overflow:hidden}
.gb-row{background:var(--paper);padding:clamp(1.1rem,2.4vw,1.6rem)}
.gb-row b{display:block;font-family:var(--d);font-weight:460;line-height:1;
  font-size:clamp(1.5rem,2.9vw,2.15rem);color:var(--gb-deep)}
.gb-row span{display:block;margin-top:.5rem;font-size:.85rem;color:var(--soft);line-height:1.45}

.gb-src{margin-top:1.1rem;font-size:.78rem;color:var(--faint);line-height:1.55}
.gb-src a{border-bottom:1px solid var(--gb-line);color:var(--gb-ink)}
.gb-src a:hover{border-bottom-color:var(--gb)}

/* ---------- responsive ---------------------------------------------------- */

@media(max-width:900px){
  .gb-pledge{grid-template-columns:1fr;gap:1.2rem}
  .gb-need{grid-template-columns:1fr}
  .gb-need-photo{min-height:0;aspect-ratio:16/10}
  .gb-band{aspect-ratio:3/2}
}
@media(max-width:560px){
  .gb-hero{min-height:clamp(30rem,100vh,68rem);min-height:clamp(30rem,100svh,68rem)}
  .gb-ledger{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gb-band{aspect-ratio:4/3}
}