/* ==========================================================================
   RaqGiveback — public-facing design system
   Scoped to the marketing site (index.html). The authenticated app pages
   (dashboard.html, admin.html) and the auth pages (signin/signup) still use
   assets/css/raqgiveback.css, which this file deliberately does not touch.
   ========================================================================== */

:root {
  /* Foundation — Ink Black + Warm Bone, ~80% of the page combined */
  --ink:        #0d0d0c;
  --ink-2:      #171512; /* footer background — a hair lighter than --ink */
  --charcoal:   #292825; /* secondary dark surfaces/cards, e.g. photo tint, btn-dark hover */
  --cream:      #f3efe6; /* Warm Bone */
  --cream-2:    #e9e1d2;
  --line:       #d8cfbe;

  /* RAQ Red — primary brand/action accent, ~15%. Use for important words,
     primary CTAs, selected labels, active states — not everywhere. */
  --dominant:      #d52b20;
  /* Solid CTA fills specifically use a ~3%-deepened, visually-identical
     shade of RAQ Red rather than the exact spec hex: at #d52b20, Bone text
     on a solid fill measures 4.36:1 — 0.14 short of the 4.5:1 AA minimum
     for normal-size text. This clears it (4.62:1) with no visible
     difference. Every other use of red (accents, large headline type,
     marks) keeps the exact spec hex, since those only need 3:1. */
  --dominant-fill: #ce291f;
  /* Oxblood — secondary darker red. Hover/pressed state for red fills,
     dark red details, subtle depth. */
  --dominant-hi:   #741c18;
  /* Brighter, for small dominant-coloured text sitting directly on an ink
     background (base --dominant only clears the 3:1 large-text minimum
     there, not the 4.5:1 small-text one). */
  --dominant-text: #ee4a3b;

  /* Antique Gold — a micro-accent only, ~5% combined with oxblood. Tiny
     dividers, small labels, status details, decorative marks. Never a
     large fill or a primary CTA. */
  --spark:      #b88a2a;
  /* Darker, for small spark-coloured text sitting directly on cream
     (base --spark clears 3:1 for marks/large text but not small text). */
  --spark-text: #846315;

  /* Warm Gray — secondary text on dark backgrounds. */
  --warm-gray:  #a6a098;
  /* Was #6d665c — dropped 4.49:1 on --cream-2 (just under the 4.5:1 AA
     minimum for normal text); this clears both cream tones with margin. */
  --muted:      #655e54;
  --muted-dark: var(--warm-gray);

  --radius:     10px;
  --gutter:     clamp(20px, 5vw, 64px);
  --max:        1380px;

  /* Editorial type scale */
  /* Sized so the longest line ("Creating opportunity.") sits on one line at
     full container width from laptop up, and wraps deliberately below that. */
  --fs-mega:    clamp(2.5rem, 7.4vw, 6.5rem);
  --fs-h2:      clamp(2rem, 5.6vw, 4.5rem);
  --fs-h3:      clamp(1.35rem, 2.4vw, 2rem);
  --fs-lede:    clamp(1.02rem, 1.35vw, 1.2rem);
  --fs-stat:    clamp(3.2rem, 8.5vw, 7rem);
  --fs-label:   0.72rem;

  --ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.nav-open { overflow: hidden; }

h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -0.03em; line-height: 0.95; }
p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

/* Outline colour is chosen for contrast against its background, not tied to
   the brand accent — a coloured ring can't stay reliably ≥3:1 on both the
   cream and ink sections this page alternates between. */
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}
.hero :focus-visible,
.band--ink :focus-visible,
.final :focus-visible,
.site-nav :focus-visible,
.nav-panel :focus-visible {
  outline-color: var(--cream);
}
/* These flip their own background to --dominant on the focused state, so
   the ring needs to follow onto cream regardless of the section it's in. */
.btn-primary:focus-visible,
.involve-card:focus-visible { outline-color: var(--cream); }

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--dominant-fill);
  color: var(--cream);
  font-weight: 800;
  padding: 12px 22px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
}
.skip-link:focus { transform: translate(-50%, 0); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Layout primitives ---------- */

.shell {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: clamp(64px, 11vh, 150px); }
.band--ink   { background: var(--ink);   color: var(--cream); }
.band--cream { background: var(--cream); color: var(--ink); }
.band--cream2{ background: var(--cream-2); color: var(--ink); }

/* Programs and Get Involved are both dark bands with the cream Impact
   section normally breaking them up. While Impact is temporarily hidden,
   they sit flush against each other and the two bands' padding stacks into
   one long stretch of plain black. Halve Involved's top padding so the gap
   reads as a normal section break instead — this reverts to the full
   padding on its own once Impact's `hidden` attribute comes back off. */
.impact[hidden] + .involve { padding-top: clamp(32px, 5.5vh, 75px); }

/* Section label — small uppercase editorial marker with a gold tick */
.label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-label);
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 clamp(20px, 3vw, 34px);
  color: var(--muted);
}
.band--ink .label { color: var(--muted-dark); }
.label::before {
  content: "";
  width: 34px;
  height: 3px;
  background: var(--spark);
  flex: none;
}

.lede {
  font-size: var(--fs-lede);
  line-height: 1.62;
  color: var(--muted);
  max-width: 54ch;
}
.band--ink .lede { color: var(--muted-dark); }

/* ---------- Buttons — restrained corners, no pills ---------- */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 16px 30px;
  border: 2px solid var(--btn-bd);
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.22s var(--ease), color 0.22s var(--ease),
              border-color 0.22s var(--ease), transform 0.22s var(--ease);
}
.btn:hover { transform: translateY(-2px); }

.btn-primary { --btn-bg: var(--dominant-fill); --btn-fg: var(--cream); --btn-bd: var(--dominant-fill); }
.btn-primary:hover { --btn-bg: var(--dominant-hi); --btn-bd: var(--dominant-hi); }

.btn-ghost-light { --btn-fg: var(--cream); --btn-bd: rgba(246, 241, 232, 0.4); }
.btn-ghost-light:hover { --btn-bd: var(--cream); }

.btn-ghost-dark { --btn-fg: var(--ink); --btn-bd: rgba(14, 13, 11, 0.28); }
.btn-ghost-dark:hover { --btn-bd: var(--ink); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* Inline text link with a dominant underline that fills gold on hover.
   Color was previously only ever supplied by the page's `a { color: ... }`
   rule, so every real <a class="tlink"> read as brand red — but a
   <button class="tlink"> (used where a tab-switch needs JS, not a real
   link) has no such inherited color and fell back to default black. */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--dominant-fill);
  padding-bottom: 5px;
  border-bottom: 2px solid var(--dominant);
  transition: gap 0.22s var(--ease), border-color 0.22s var(--ease);
}
.tlink:hover { gap: 16px; border-color: var(--spark); }

/* ---------- Header / navigation ---------- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ink);
  border-bottom: 1px solid rgba(246, 241, 232, 0.12);
}
.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 74px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--cream);
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  flex: none;
}
.wordmark b { color: var(--dominant-text); font-weight: 900; }
/* A deliberate small gold mark, not a stray punctuation mark: same
   "small solid rectangle in --spark" language as .label::before, .stat__rule
   and .final__rule elsewhere on the page, so it reads as one recurring
   motif rather than several unrelated accidental-looking marks. The "."
   character is kept in markup for screen readers/copy-paste but rendered
   at font-size: 0 — the mark is drawn from the element's own box, not the
   glyph. */
.wordmark i {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 4px;
  margin-bottom: 3px;
  background: var(--spark);
  font-size: 0;
  line-height: 0;
  flex: none;
}
.wordmark img {
  height: 32px;
  width: auto;
  display: block;
  flex: none;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 34px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  color: var(--muted-dark);
  font-size: 0.79rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 10px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.nav-links a:hover { color: var(--cream); border-color: var(--dominant); }

.nav-actions { display: flex; align-items: center; gap: 18px; flex: none; }
.nav-signin {
  color: var(--cream);
  font-size: 0.79rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 10px 2px; /* keeps the hit area above the 24px minimum */
}
.nav-signin:hover { color: var(--dominant-text); }
.nav-join {
  min-height: 46px;
  padding: 13px 24px;
  font-size: 0.79rem;
}

/* Hamburger */
.nav-toggle {
  display: none;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid rgba(246, 241, 232, 0.25);
  border-radius: var(--radius);
  cursor: pointer;
  flex: none;
}
.nav-toggle span {
  display: block;
  position: relative;
  width: 20px;
  height: 2px;
  background: var(--cream);
  transition: background 0.2s var(--ease);
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: var(--cream);
  transition: transform 0.24s var(--ease), top 0.24s var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* Mobile panel */
.nav-panel {
  display: none;
  position: fixed;
  inset: 74px 0 0;
  z-index: 99;
  background: var(--ink);
  padding: clamp(24px, 6vw, 48px) var(--gutter) 48px;
  overflow-y: auto;
  flex-direction: column;
}
.nav-panel[data-open="true"] { display: flex; }
.nav-panel ul { list-style: none; margin: 0 0 auto; padding: 0; }
.nav-panel li { border-bottom: 1px solid rgba(246, 241, 232, 0.13); }
.nav-panel li a {
  display: block;
  padding: 22px 2px;
  color: var(--cream);
  font-size: clamp(1.6rem, 7vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.nav-panel li a:hover { color: var(--dominant); }
.nav-panel__foot { display: grid; gap: 12px; padding-top: 32px; }
.nav-panel__foot .btn { width: 100%; }

/* ---------- Photo placeholders ----------
   Swap for <img src="..." alt="..."> — see the HTML comments at each slot. */

.photo {
  position: relative;
  overflow: hidden;
  background-color: var(--charcoal);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(246, 241, 232, 0.05) 0 2px,
    transparent 2px 11px
  );
  border-radius: var(--radius);
}
.band--cream .photo,
.band--cream2 .photo {
  background-color: var(--cream-2);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(14, 13, 11, 0.07) 0 2px,
    transparent 2px 11px
  );
}
.photo > img { width: 100%; height: 100%; object-fit: cover; }
.photo__note {
  position: absolute;
  inset: auto 12px 12px;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-dark);
  pointer-events: none;
}
.band--cream .photo__note,
.band--cream2 .photo__note { color: var(--muted); }
.photo:has(> img) .photo__note { display: none; }

/* ---------- 1. Hero ---------- */

.hero {
  background: var(--ink);
  color: var(--cream);
  padding-block: clamp(48px, 8vh, 104px) clamp(0px, 4vh, 56px);
  position: relative;
}
/* Headline runs the full width; supporting copy + imagery sit beneath it.
   Keeps the message oversized without pushing the CTAs off-screen. */
.hero__lower {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(28px, 4.5vw, 68px);
  align-items: end;
  margin-top: clamp(26px, 3.6vw, 48px);
}
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-label);
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dominant-text);
  margin-bottom: clamp(22px, 4vw, 40px);
}
.hero__eyebrow em {
  font-style: normal;
  color: var(--muted-dark);
  letter-spacing: 0.14em;
}
.hero h1 {
  font-size: var(--fs-mega);
  font-weight: 900;
  line-height: 0.86;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  text-wrap: balance;
}
.hero h1 span { display: block; }
.hero h1 .accent { color: var(--dominant); }

.hero__sub {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  max-width: 44ch;
}
.hero__sub::before {
  content: "";
  flex: none;
  width: 3px;
  align-self: stretch;
  background: var(--spark);
}
.hero__sub p { font-size: var(--fs-lede); color: var(--muted-dark); }

.hero .btn-row { margin-top: clamp(22px, 3vw, 34px); }

.hero__media { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hero__media .photo { aspect-ratio: 4 / 3; }

.hero__ticker {
  margin-top: clamp(40px, 6vw, 76px);
  border-top: 1px solid rgba(246, 241, 232, 0.14);
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-dark);
}
.hero__ticker span { display: inline-flex; align-items: center; gap: 10px; }
.hero__ticker span::before { content: ""; width: 5px; height: 5px; background: var(--dominant); }

/* ---------- 2. Mission ---------- */

.mission__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
}
.mission h2 {
  font-size: var(--fs-h2);
  text-transform: uppercase;
  text-wrap: balance;
}
/* The one sentence that carries the brand — treated as the artwork. */
.mission h2 .hl {
  display: inline;
}
.mission__body { margin-top: clamp(26px, 3.5vw, 40px); display: grid; gap: 20px; }
.mission__quote {
  border-left: 3px solid var(--spark);
  padding-left: 20px;
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  font-weight: 700;
  line-height: 1.5;
  max-width: 44ch;
}
.mission__media { display: grid; gap: 14px; }
.mission__media .photo { aspect-ratio: 3 / 4; }

/* ---------- 3. Programs — alternating editorial rows, not cards ---------- */

.programs__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.programs__head h2 { font-size: var(--fs-h2); text-transform: uppercase; }

.program {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  padding-block: clamp(34px, 4.5vw, 64px);
  border-top: 1px solid rgba(246, 241, 232, 0.16);
}
.program:last-child { border-bottom: 1px solid rgba(246, 241, 232, 0.16); }
.program:nth-child(even) .program__media { order: -1; }
.program__media .photo { aspect-ratio: 16 / 10; }
.program__no {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  color: var(--dominant-text);
  margin-bottom: 16px;
}
.program h3 {
  font-size: var(--fs-h3);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.program__tag {
  font-size: clamp(1.05rem, 1.7vw, 1.4rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
  text-wrap: balance;
}
.program p.lede { max-width: 48ch; }
.program .tlink { margin-top: 22px; }

/* ---------- 4. Impact ---------- */

.impact__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(34px, 5vw, 58px);
}
.impact__head h2 { font-size: var(--fs-h2); text-transform: uppercase; }
.impact__note { font-size: 0.78rem; letter-spacing: 0.06em; color: var(--muted); max-width: 34ch; }

.impact__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.stat {
  background: var(--cream);
  padding: clamp(24px, 3vw, 40px) clamp(20px, 2.4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stat__num {
  font-size: var(--fs-stat);
  font-weight: 900;
  line-height: 0.84;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
/* Exactly one number carries gold — the headline human metric. */
.stat--hero .stat__num { color: var(--spark); }
.stat__label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.stat__rule { width: 30px; height: 3px; background: var(--dominant); }

/* ---------- 5. Get involved ---------- */

.involve__head { max-width: 40ch; margin-bottom: clamp(34px, 5vw, 60px); }
.involve__head h2 { font-size: var(--fs-h2); text-transform: uppercase; margin-bottom: 18px; }

.involve__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: rgba(246, 241, 232, 0.18);
  border: 1px solid rgba(246, 241, 232, 0.18);
}
.involve-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--ink);
  color: var(--cream);
  padding: clamp(26px, 3vw, 40px);
  min-height: 268px;
  transition: background-color 0.26s var(--ease), color 0.26s var(--ease);
}
.involve-card__no {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--dominant-text);
  transition: color 0.26s var(--ease);
}
.involve-card h3 { font-size: 1.5rem; text-transform: uppercase; }
.involve-card p {
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--muted-dark);
  transition: color 0.26s var(--ease);
  margin-bottom: auto;
}
.involve-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding-top: 18px;
  border-top: 2px solid var(--dominant);
  transition: gap 0.24s var(--ease), border-color 0.26s var(--ease);
}
/* Whole panel is the link — red takeover on hover/focus. Every text element
   goes to cream rather than mixing in spark/ink here: spark on --dominant
   is only ~1.6:1 (checked and rejected), so cream is the one colour that
   stays accessible across every piece of text in this state. */
.involve-card:hover,
.involve-card:focus-visible { background: var(--dominant-fill); color: var(--cream); }
.involve-card:hover .involve-card__no,
.involve-card:focus-visible .involve-card__no { color: var(--cream); }
/* Solid --cream, not a translucent version of it — at 0.88 alpha over the
   fill this dropped to 3.86:1, short of the 4.5:1 this paragraph text
   (not large) needs. */
.involve-card:hover p,
.involve-card:focus-visible p { color: var(--cream); }
.involve-card:hover .involve-card__cta,
.involve-card:focus-visible .involve-card__cta { gap: 16px; border-color: var(--cream); }

/* ---------- 6. Community / stories ---------- */

.community__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(30px, 4vw, 50px);
}
.community__head h2 { font-size: var(--fs-h2); text-transform: uppercase; }

.gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(130px, 17vw, 210px);
  gap: clamp(10px, 1.2vw, 16px);
}
.gallery .photo { width: 100%; height: 100%; }
.gallery .g-tall  { grid-row: span 2; }
.gallery .g-wide  { grid-column: span 2; }

.stories {
  margin-top: clamp(30px, 4vw, 52px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: clamp(18px, 2.4vw, 32px);
}
/* Deliberately empty slots — real stories/quotes go here. Nothing invented. */
.story {
  border-top: 2px solid var(--ink);
  padding-top: 20px;
  display: grid;
  gap: 12px;
}
.story__kind {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--spark-text);
}
.story__slot {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--muted);
}

/* ---------- 7. Support / Donate ---------- */

.support__inner {
  text-align: center;
  max-width: 640px;
}
.support .label { justify-content: center; }
.support h2 { font-size: var(--fs-h2); text-transform: uppercase; margin-bottom: 16px; }
.support .lede { margin-inline: auto; }
.support .btn-row { justify-content: center; margin-top: clamp(26px, 3.5vw, 40px); }

/* ---------- 7b. Donate page ---------- */

.donate-hero {
  background: var(--ink);
  color: var(--cream);
  padding-block: clamp(64px, 11vh, 130px) clamp(48px, 8vh, 90px);
  text-align: center;
}
.donate-hero .label { justify-content: center; color: var(--muted-dark); }
.donate-hero h1 {
  font-size: var(--fs-mega);
  text-transform: uppercase;
  max-width: 16ch;
  margin-inline: auto;
  text-wrap: balance;
}
.donate-hero .lede { color: var(--muted-dark); max-width: 56ch; margin: 22px auto 0; }

.donate-note {
  background: var(--cream-2);
  border-left: 4px solid var(--spark);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: clamp(18px, 2.5vw, 26px) clamp(20px, 3vw, 30px);
  max-width: 720px;
  margin: 0 auto clamp(40px, 5vw, 64px);
}
.donate-note__title {
  font-weight: 800;
  color: var(--spark-text);
  margin-bottom: 6px;
}
.donate-note p:last-child { color: var(--muted); font-size: 0.92rem; }

.donate-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 32px);
}
.donate-card {
  min-width: 0;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 34px);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.donate-card__main { flex: 1; min-width: 0; }
.donate-card__label {
  font-size: var(--fs-label);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.donate-card__handle {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.qr-slot {
  flex: none;
  width: 128px;
  height: 128px;
  position: relative;
  overflow: hidden;
  background-color: var(--cream-2);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(14, 13, 11, 0.07) 0 2px,
    transparent 2px 11px
  );
  border-radius: var(--radius);
}
.qr-slot > img { width: 100%; height: 100%; object-fit: contain; }
.qr-slot__note {
  position: absolute;
  inset: auto 8px 8px;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
}
.qr-slot:has(> img) .qr-slot__note { display: none; }

/* ---------- 8. Final CTA ---------- */

.final {
  background: var(--ink);
  color: var(--cream);
  padding-block: clamp(70px, 13vh, 170px);
  text-align: center;
}
.final h2 {
  font-size: clamp(2.3rem, 8.6vw, 7rem);
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  max-width: 19ch;
  margin-inline: auto;
  text-wrap: balance;
}
.final h2 .accent { color: var(--dominant); }
.final__rule { width: 60px; height: 4px; background: var(--spark); margin: 0 auto clamp(26px, 4vw, 40px); }
.final .btn-row { justify-content: center; margin-top: clamp(30px, 4vw, 46px); }
.final .lede {
  margin: 24px auto 0;
  text-align: center;
  /* .final isn't a .band--ink element, so it never got that rule's dark-bg
     override — was rendering the light-background --muted colour (3.43:1)
     on this black section. */
  color: var(--muted-dark);
}

/* ---------- 9. Footer ---------- */

.site-foot {
  background: var(--ink-2);
  color: var(--muted-dark);
  padding-block: clamp(44px, 6vw, 76px) 32px;
  border-top: 1px solid rgba(246, 241, 232, 0.1);
}
.site-foot__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 60px);
  padding-bottom: clamp(32px, 4vw, 52px);
}
.site-foot h4 {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: 18px;
}
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
/* inline-block + padding so each footer link clears the 24px minimum
   target size (they were 16px line boxes before) */
.site-foot ul a {
  display: inline-block;
  padding: 7px 2px;
  font-size: 0.92rem;
}
.site-foot a { font-size: 0.92rem; }
.site-foot a:hover { color: var(--dominant-text); }
.site-foot__blurb { font-size: 0.92rem; max-width: 40ch; margin-top: 16px; }
.site-foot__bottom {
  border-top: 1px solid rgba(246, 241, 232, 0.1);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  font-size: 0.78rem;
}

/* Config banner injected by supabaseClient.js — kept styled here since this
   page no longer loads raqgiveback.css. */
.config-warning {
  background: var(--dominant-fill);
  color: #fff;
  text-align: center;
  font-size: 0.85rem;
  padding: 11px 18px;
}
.config-warning code {
  background: rgba(255, 255, 255, 0.22);
  padding: 1px 5px;
  border-radius: 3px;
}

/* ==========================================================================
   Responsive — each breakpoint is a deliberate layout, not a shrink
   ========================================================================== */

/* Laptop */
@media (max-width: 1180px) {
  .hero__lower { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); }
  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-foot__top { grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr)); }
}

/* Tablet landscape — nav collapses, hero stacks with a wide image band */
@media (max-width: 1024px) {
  .nav-links, .nav-signin { display: none; }
  .nav-toggle { display: flex; }

  /* Tablet: copy + CTAs stack above a full-width image strip */
  .hero__lower { grid-template-columns: 1fr; align-items: start; gap: clamp(26px, 4vw, 40px); }
  .hero__media .photo { aspect-ratio: 16 / 10; }

  .mission__grid { grid-template-columns: 1fr; }
  .mission__media { grid-template-columns: 1fr 1fr; }
  .mission__media .photo { aspect-ratio: 1 / 1; }

  .program { grid-template-columns: 1fr; gap: 22px; }
  /* Image leads every row once stacked, so the rhythm stays consistent. */
  .program__media, .program:nth-child(even) .program__media { order: -1; }
  .program__media .photo { aspect-ratio: 16 / 9; }

  /* Each .program's own bottom padding, #programs' section padding, and
     Involved's (already-halved) top padding all stack on top of each other
     between the last program card and "Get Involved" — on a short mobile
     viewport that combined stretch of black still reads as oversized, more
     so than it does on desktop. Tighten both sides further, but only while
     Impact is hidden between them. */
  #programs:has(+ .impact[hidden]) { padding-bottom: clamp(24px, 6vw, 40px); }
  .impact[hidden] + .involve { padding-top: clamp(24px, 6vw, 40px); }
}

/* Tablet portrait */
@media (max-width: 860px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery .g-wide { grid-column: span 2; }
  .site-foot__top { grid-template-columns: 1fr 1fr; }
  .site-foot__brand { grid-column: 1 / -1; }

  .qr-slot { width: 96px; height: 96px; }
}

/* Phone */
@media (max-width: 620px) {
  /* Wordmark + Join Us + hamburger overflowed a 390px viewport at full size.
     Everything stays visible — Join Us included — just tightened to fit. */
  .site-nav__inner { gap: 10px; min-height: 66px; }
  .wordmark { font-size: 0.98rem; }
  .nav-actions { gap: 10px; }
  .nav-join { min-height: 44px; padding: 12px 15px; font-size: 0.7rem; letter-spacing: 0.1em; }
  .nav-panel { inset: 66px 0 0; }
  .site-foot ul a { padding: 10px 2px; }

  .hero { padding-block: 36px 8px; }
  /* One image on phones — two would each be too small to read. */
  .hero__media { grid-template-columns: 1fr; }
  .hero__media .photo:last-child { display: none; }
  .hero__ticker { gap: 8px 18px; font-size: 0.64rem; }

  .btn, .btn-row .btn { width: 100%; }
  .nav-join { width: auto; }

  .mission__media { grid-template-columns: 1fr; }
  .mission__media .photo { aspect-ratio: 4 / 3; }

  .gallery {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 44vw;
  }
  .gallery .g-tall { grid-row: span 1; }

  .impact__grid { grid-template-columns: 1fr 1fr; }
  .involve__grid { grid-template-columns: 1fr; }
  .involve-card { min-height: 0; }
  .site-foot__top { grid-template-columns: 1fr; }
  .site-foot__bottom { flex-direction: column; }

  /* Donate page: stack each card and push the QR code below the button —
     the direct Cash App / Venmo links are the priority on a phone. */
  .donate-cards { grid-template-columns: 1fr; }
  .donate-card { flex-direction: column; align-items: stretch; text-align: center; }
  .donate-card .qr-slot { align-self: center; }
}

@media (max-width: 400px) {
  .impact__grid { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; grid-auto-rows: 58vw; }
  .gallery .g-wide { grid-column: span 1; }
}

/* ---------- Motion ---------- */

.reveal { opacity: 0; transform: translateY(22px); }
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .btn:hover { transform: none; }
}