/* ============================================================
   ENGAGE AND CHANGE — Shared stylesheet
   Concept: "Warmth against the cold."
   - Warm paper + ink = the human warmth this charity provides
   - Ember orange = the single action color (donate / urgency)
   - Deep winter-slate dark bands = the cold of the street
   Type: Bricolage Grotesque (display) + Libre Franklin (body/UI)
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Warm neutrals */
  --paper:      oklch(0.985 0.006 75);
  --paper-2:    oklch(0.965 0.010 74);
  --paper-3:    oklch(0.935 0.014 72);
  --ink:        oklch(0.235 0.018 60);
  --ink-soft:   oklch(0.430 0.018 62);
  --ink-faint:  oklch(0.580 0.016 64);
  --line:       oklch(0.890 0.012 70);
  --line-soft:  oklch(0.925 0.010 72);

  /* Action accent (ember) — the brand orange, amplified */
  --ember:       oklch(0.640 0.195 45);
  --ember-deep:  oklch(0.555 0.180 41);
  --ember-bright:oklch(0.745 0.170 60);
  --flame:       oklch(0.690 0.205 52);
  --rust:        oklch(0.470 0.135 38);
  --gold:        oklch(0.820 0.130 82);
  --ember-tint:  oklch(0.950 0.038 60);
  --ember-tint2: oklch(0.905 0.062 56);
  --grad-ember:  linear-gradient(135deg, oklch(0.72 0.185 58), oklch(0.595 0.185 36));

  /* Winter structural dark */
  --winter:     oklch(0.285 0.045 256);
  --winter-2:   oklch(0.225 0.040 258);
  --winter-3:   oklch(0.255 0.052 252);
  --winter-line:oklch(0.380 0.045 256);

  /* On-dark text */
  --on-dark:        oklch(0.965 0.008 80);
  --on-dark-soft:   oklch(0.820 0.014 82);

  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 14px;
  --radius-sm: 9px;

  --shadow-sm: 0 1px 2px oklch(0.30 0.03 60 / 0.06), 0 2px 8px oklch(0.30 0.03 60 / 0.05);
  --shadow-md: 0 6px 24px oklch(0.30 0.03 60 / 0.09), 0 2px 6px oklch(0.30 0.03 60 / 0.06);
  --shadow-lg: 0 18px 48px oklch(0.30 0.03 60 / 0.15), 0 6px 16px oklch(0.30 0.03 60 / 0.08);

  --ff-display: "Bricolage Grotesque", "Libre Franklin", system-ui, sans-serif;
  --ff-body: "Libre Franklin", system-ui, -apple-system, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  font-family: var(--ff-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
ul, ol { padding: 0; list-style: none; }

/* ---------- Type ---------- */
h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.018em;
  text-wrap: balance;
  color: var(--ink);
}
.display {
  font-size: clamp(2.6rem, 6.2vw, 5rem);
  font-weight: 800;
  letter-spacing: -0.028em;
}
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); letter-spacing: -0.012em; }
p { text-wrap: pretty; }

.eyebrow {
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ember-deep);
}
.eyebrow.on-dark { color: oklch(0.78 0.12 55); }
.lead { font-size: clamp(1.12rem, 1.6vw, 1.4rem); color: var(--ink-soft); line-height: 1.5; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(56px, 8vw, 110px); }
.section-tight { padding-block: clamp(40px, 5vw, 64px); }
.dark { background: var(--winter); color: var(--on-dark); }
.dark h1, .dark h2, .dark h3 { color: var(--on-dark); }
.dark p { color: var(--on-dark-soft); }
.cream-2 { background: var(--paper-2); }

.stack > * + * { margin-top: 1.1rem; }
.grid { display: grid; gap: clamp(20px, 3vw, 40px); }
.divider { height: 1px; background: var(--line); border: 0; }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute; left: 12px; top: 12px; z-index: 200; transform: translateY(-72px);
  background: var(--ink); color: var(--paper); padding: 10px 16px;
  border-radius: 8px; font-weight: 600; transition: transform .2s;
}
.skip-link:focus { transform: none; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1.5px solid var(--btn-bd);
  font-family: var(--ff-body); font-weight: 650; font-size: 0.97rem;
  letter-spacing: 0.005em; line-height: 1;
  padding: 0.85em 1.4em; border-radius: 999px; text-decoration: none;
  min-height: 46px;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--ember); outline-offset: 2px; }

.btn--ember { --btn-fg: #fff; color: #fff; background: var(--grad-ember); border-color: transparent; position: relative; overflow: hidden; box-shadow: 0 6px 18px oklch(0.62 0.19 45 / 0.32); }
.btn--ember::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 32%, oklch(1 0 0 / 0.38) 50%, transparent 68%); transform: translateX(-130%); transition: transform .6s ease; }
.btn--ember:hover { box-shadow: 0 12px 28px oklch(0.62 0.19 45 / 0.42); filter: saturate(1.06); }
.btn--ember:hover::after { transform: translateX(130%); }
@media (prefers-reduced-motion: reduce) { .btn--ember::after { display: none; } }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--ink); }
.btn--outline:hover { --btn-bg: var(--ink); --btn-fg: var(--paper); }
.btn--ghost-light { --btn-bg: transparent; --btn-fg: var(--on-dark); --btn-bd: var(--winter-line); }
.btn--ghost-light:hover { --btn-bg: oklch(1 0 0 / 0.08); }
.btn--lg { font-size: 1.05rem; padding: 1em 1.7em; min-height: 54px; }
.btn--sm { font-size: 0.86rem; padding: 0.6em 1.05em; min-height: 40px; }

@media (prefers-reduced-motion: reduce) {
  .btn:hover { transform: none; }
}

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: oklch(0.985 0.006 75 / 0.88);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex; align-items: center; gap: 22px;
  min-height: 72px;
}
.brand {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none; color: var(--ink); flex-shrink: 0;
  font-family: var(--ff-display); font-weight: 800; letter-spacing: -0.02em;
  font-size: 1.12rem; line-height: 1.05;
}
.brand-mark {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: var(--ember); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 1.05rem;
  font-family: var(--ff-display);
}
.brand small { display: block; font-family: var(--ff-body); font-weight: 600; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.brand-logo { height: 50px; width: auto; }
@media (max-width: 560px) { .brand-logo { height: 40px; } }

.nav-links {
  display: flex; align-items: center; gap: 2px;
  margin-left: auto;
}
.nav-links a {
  position: relative;
  text-decoration: none; color: var(--ink-soft); font-weight: 550;
  font-size: 0.93rem; padding: 8px 11px; white-space: nowrap;
  transition: color .18s ease;
}
.nav-links a::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: 2px; height: 2px;
  background: var(--ember); border-radius: 2px; transform: scaleX(0); transform-origin: left;
  transition: transform .24s cubic-bezier(.5,.2,.2,1);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: var(--ink); font-weight: 700; }
.nav-links a.nav-emph { color: var(--ink); font-weight: 650; }
@media (prefers-reduced-motion: reduce) { .nav-links a::after { transition: none; } }
.nav-cta .btn--ember { box-shadow: var(--shadow-sm); }
.nav-cta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-toggle {
  display: none; background: transparent; border: 1.5px solid var(--line);
  border-radius: 10px; width: 46px; height: 46px; align-items: center; justify-content: center;
  margin-left: auto;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
.nav-toggle span { position: relative; }
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; margin-left: 10px; }
  .nav-links { display: none; }
  .nav .nav-cta { display: flex; margin-left: auto; }
  .mobile-menu.open { display: block; }
}
.mobile-menu {
  display: none; border-top: 1px solid var(--line); background: var(--paper);
}
.mobile-menu .container { padding-block: 14px 22px; }
.mobile-menu a:not(.btn) {
  display: block; text-decoration: none; color: var(--ink); font-weight: 600;
  font-size: 1.05rem; padding: 13px 6px; border-bottom: 1px solid var(--line-soft);
}
.mobile-menu a[aria-current="page"] { color: var(--ember-deep); }
.mobile-menu .nav-cta { display: flex; gap: 10px; margin-top: 18px; }
.mobile-menu .nav-cta .btn { flex: 1; }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(40px, 6vw, 80px) clamp(48px, 6vw, 88px); position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(28px, 4vw, 56px); align-items: stretch; }
.hero-figure { display: flex; }
.hero-figure > image-slot { width: 100%; height: 100%; min-height: 460px; }
.hero .stack > * + * { margin-top: 1.5rem; }
.hero-title { font-size: clamp(2.4rem, 5vw, 4.1rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.06; margin-bottom: 0.15em; }
.hero-title em { font-style: normal; color: var(--ember); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-figure > image-slot { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
}

/* ---------- Campaign banner ---------- */
.campaign-banner {
  display: inline-flex; align-items: center; gap: 11px;
  background: var(--ember-tint); border: 1px solid oklch(0.86 0.06 55);
  border-radius: 999px; padding: 6px 7px 6px 16px; max-width: 100%;
  text-decoration: none; color: var(--ink); font-size: 0.92rem; line-height: 1.25;
}
.campaign-banner .cb-text { white-space: nowrap; }
.campaign-banner b { font-weight: 700; }
.campaign-banner .pulse {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ember); flex-shrink: 0;
  box-shadow: 0 0 0 0 oklch(0.62 0.176 42 / 0.5); animation: pulse 2.4s infinite;
}
@keyframes pulse { 70% { box-shadow: 0 0 0 9px oklch(0.62 0.176 42 / 0); } 100% { box-shadow: 0 0 0 0 oklch(0.62 0.176 42 / 0); } }
@media (prefers-reduced-motion: reduce) { .campaign-banner .pulse { animation: none; } }
.campaign-banner .tag {
  background: var(--ink); color: var(--paper); flex-shrink: 0;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px; text-decoration: none; white-space: nowrap;
}
@media (max-width: 600px) {
  .campaign-banner { flex-wrap: wrap; border-radius: 14px; padding: 11px 13px; gap: 9px; }
  .campaign-banner .cb-text { white-space: normal; flex: 1 1 auto; }
}

/* ---------- Image placeholders ---------- */
.ph {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background-color: var(--paper-3);
  background-image: repeating-linear-gradient(135deg,
    oklch(0.90 0.014 70) 0 12px, oklch(0.93 0.012 72) 12px 24px);
  border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--ink-faint);
  min-height: 220px;
}
.ph::after {
  content: attr(data-label);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.72rem; letter-spacing: 0.03em; color: var(--ink-soft);
  background: var(--paper); padding: 7px 13px; border-radius: 7px;
  border: 1px solid var(--ink-faint); text-align: center; max-width: 82%;
  box-shadow: var(--shadow-sm);
}
.ph.dark-ph {
  background-color: var(--winter-2);
  background-image: repeating-linear-gradient(135deg,
    oklch(0.26 0.04 257) 0 12px, oklch(0.30 0.045 256) 12px 24px);
  border-color: var(--winter-line);
}
.ph.ratio-43 { aspect-ratio: 4/3; min-height: 0; }
.ph.ratio-square { aspect-ratio: 1/1; min-height: 0; }
.ph.ratio-portrait { aspect-ratio: 3/4; min-height: 0; }
.ph.ratio-wide { aspect-ratio: 16/9; min-height: 0; }

/* ---------- Impact counters ---------- */
.impact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
@media (max-width: 720px) { .impact-grid { grid-template-columns: 1fr; } }
.stat-num {
  font-family: var(--ff-display); font-weight: 800; line-height: 0.95;
  font-size: clamp(3rem, 8vw, 5.6rem); letter-spacing: -0.04em;
  color: var(--on-dark);
}
.stat-num .plus { color: oklch(0.78 0.12 55); }
.stat-label { font-size: 1.05rem; color: var(--on-dark-soft); margin-top: 8px; max-width: 30ch; }

/* ---------- Cards ---------- */
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(22px, 3vw, 34px); box-shadow: var(--shadow-sm);
}
.program-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 32px); }
@media (max-width: 820px) { .program-grid { grid-template-columns: 1fr; } }
.program-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.program-card .body { padding: clamp(22px, 3vw, 32px); display: flex; flex-direction: column; gap: 14px; flex: 1; }
.program-card .ph { border-radius: 0; border-left: 0; border-right: 0; border-top: 0; }
.badge {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
}
.badge--active { background: var(--ember-tint); color: var(--ember-deep); }
.badge--archive { background: var(--paper-3); color: var(--ink-soft); }
.arrow-link {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  text-decoration: none; font-weight: 700; color: var(--ink);
  border-bottom: 2px solid var(--ember); padding-bottom: 2px; margin-top: auto;
}
.arrow-link svg { transition: transform .18s; }
.arrow-link:hover svg { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .arrow-link:hover svg { transform: none; } }

/* ---------- Testimonial strip ---------- */
.tcard {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(22px, 3vw, 30px); display: flex; flex-direction: column; gap: 16px;
  box-shadow: var(--shadow-sm); height: 100%;
}
.tcard .quote { font-size: 1.06rem; line-height: 1.5; color: var(--ink); }
.tcard .who { font-size: 0.9rem; color: var(--ink-soft); margin-top: auto; }
.tcard .who b { display: block; color: var(--ink); font-weight: 700; }
.tcard .mark { font-family: var(--ff-display); font-size: 2.4rem; line-height: 0.5; color: var(--ember); height: 0.6em; }

/* ---------- Partner strip ---------- */
.partner-strip { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.partner-chip {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--line); border-radius: 10px; padding: 11px 16px;
  background: var(--paper); font-weight: 600; font-size: 0.92rem; color: var(--ink-soft);
}
.partner-chip .logo-dot {
  width: 22px; height: 22px; border-radius: 5px; flex-shrink: 0;
  background: var(--paper-3); border: 1px dashed var(--line);
}

/* ---------- Closing band ---------- */
.closing-line {
  font-family: var(--ff-display); font-weight: 700; letter-spacing: -0.02em;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.12; text-wrap: balance;
}

/* ---------- Footer ---------- */
.site-footer { background: var(--winter-2); color: var(--on-dark-soft); padding-block: clamp(48px, 6vw, 72px) 30px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(28px, 4vw, 56px); }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 { color: var(--on-dark); font-family: var(--ff-body); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.13em; text-transform: uppercase; margin-bottom: 14px; }
.site-footer a:not(.btn) { color: var(--on-dark-soft); text-decoration: none; }
.site-footer a:not(.btn):hover { color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px; }
.footer-nav { display: grid; gap: 9px; }
.footer-brand .brand { color: var(--on-dark); }
.footer-contact { display: grid; gap: 7px; font-size: 0.95rem; }
.socials { display: flex; gap: 10px; margin-top: 16px; }
.socials a {
  width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--winter-line);
  display: grid; place-items: center; color: var(--on-dark-soft);
}
.socials a:hover { background: oklch(1 0 0 / 0.07); color: var(--on-dark); }
.footer-bottom {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--winter-line);
  display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center;
  font-size: 0.85rem; color: oklch(0.70 0.02 80);
}
.footer-bottom .reg { font-variant-numeric: tabular-nums; }
.supported-badge {
  margin-left: auto; display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--winter-line); border-radius: 9px; padding: 8px 13px;
  text-decoration: none; color: var(--on-dark-soft); font-size: 0.82rem;
}
.footer-credits { margin-left: auto; display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
.footer-credits .supported-badge { margin-left: 0; }
.powered-by {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  color: oklch(0.70 0.02 80); border: 1px solid var(--winter-line); border-radius: 9px;
  padding: 7px 13px; transition: border-color .2s ease, color .2s ease;
}
.powered-by span { font-size: 0.78rem; letter-spacing: 0.03em; white-space: nowrap; }
.powered-by img { height: 16px; width: auto; display: block; }
.powered-by:hover { border-color: var(--ember); color: var(--on-dark); }

/* ---------- Breadcrumb ---------- */
.breadcrumb { font-size: 0.85rem; color: var(--ink-faint); display: flex; gap: 8px; flex-wrap: wrap; padding-block: 18px 0; }
.breadcrumb a { text-decoration: none; color: var(--ink-soft); }
.breadcrumb a:hover { color: var(--ember-deep); }
.breadcrumb span[aria-current] { color: var(--ink); font-weight: 600; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Utilities ---------- */
.muted { color: var(--ink-soft); }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.maxch { max-width: 60ch; }
.maxch-sm { max-width: 44ch; }
.mt-0 { margin-top: 0; }
.section-head { max-width: 64ch; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head.center { margin-inline: auto; }

/* Responsive column helpers */
.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .cols-3 { grid-template-columns: 1fr; } }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .cols-2 { grid-template-columns: 1fr; } }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .cols-4 { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   INNER-PAGE COMPONENTS
   ============================================================ */

/* ---- Page hero ---- */
.page-hero { padding-block: clamp(28px, 4vw, 44px) clamp(34px, 5vw, 56px); border-bottom: 1px solid var(--line); }
.page-hero.on-dark-hero { background: var(--winter); border-bottom: 0; }
.page-hero.on-dark-hero, .page-hero.on-dark-hero h1, .page-hero.on-dark-hero .eyebrow { color: var(--on-dark); }
.page-hero.on-dark-hero .lead { color: var(--on-dark-soft); }
.page-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-weight: 800; letter-spacing: -0.025em; margin-top: 12px; }
.page-hero .lead { margin-top: 16px; }
.page-hero .hero-cta { margin-top: 24px; }

/* ---- Section anchor offset (sticky header) ---- */
:target { scroll-margin-top: 90px; }
.anchor { scroll-margin-top: 90px; }

/* ---- Prose ---- */
.prose p { margin-bottom: 1rem; color: var(--ink-soft); }
.prose p:last-child { margin-bottom: 0; }
.prose h3 { margin: 1.6em 0 0.5em; }
.prose strong { color: var(--ink); }
.prose a:not(.btn) { color: var(--ember-deep); text-underline-offset: 3px; }

/* ---- Forms ---- */
.form { display: grid; gap: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 7px; }
.field label { font-weight: 650; font-size: 0.92rem; color: var(--ink); }
.field label .req { color: var(--ember-deep); }
.field input, .field textarea, .field select {
  font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 14px; width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--ember); box-shadow: 0 0 0 3px var(--ember-tint);
}
.field input:user-invalid { border-color: oklch(0.62 0.18 25); }
.check-group { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .check-group { grid-template-columns: 1fr; } }
.check {
  display: flex; align-items: flex-start; gap: 11px; padding: 13px 15px;
  border: 1.5px solid var(--line); border-radius: 10px; cursor: pointer; background: var(--paper);
  transition: border-color .15s, background .15s;
}
.check:hover { border-color: var(--ink-faint); }
.check input { width: 19px; height: 19px; accent-color: var(--ember); margin-top: 2px; flex-shrink: 0; }
.check span { font-size: 0.95rem; }
.check:has(input:checked) { border-color: var(--ember); background: var(--ember-tint); }
.form-note { font-size: 0.88rem; color: var(--ink-soft); }
.form-success {
  display: none; padding: 16px 18px; border-radius: 10px; background: oklch(0.95 0.05 150);
  border: 1px solid oklch(0.80 0.09 150); color: oklch(0.35 0.08 150); font-weight: 600;
}
.form-success.show { display: block; }

/* ---- Status banner ---- */
.status-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  border-radius: var(--radius); padding: 18px 22px; border: 1px solid;
}
.status-banner .dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.status-banner.closed { background: var(--paper-3); border-color: var(--line); color: var(--ink); }
.status-banner.closed .dot { background: var(--ink-faint); }
.status-banner.open { background: oklch(0.95 0.05 150); border-color: oklch(0.80 0.09 150); color: oklch(0.32 0.08 150); }
.status-banner.open .dot { background: oklch(0.60 0.14 150); }
.status-banner b { font-weight: 700; }

/* ---- Board ---- */
.board-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 30px); }
@media (max-width: 900px) { .board-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .board-grid { grid-template-columns: 1fr; } }
.board-card { display: flex; flex-direction: column; gap: 14px; }
.board-card .ph, .board-card .headshot {
  aspect-ratio: 1/1; border-radius: var(--radius); width: 100%; object-fit: cover;
  background: var(--paper-3); border: 1px solid var(--line); min-height: 0;
}
.board-card h3 { font-size: 1.15rem; }
.board-card .role { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ember-deep); margin-top: -8px; }
.board-card .board-title { font-size: 0.92rem; color: var(--ink-soft); margin-top: -8px; }
.board-card .bio { font-size: 0.92rem; color: var(--ink-soft); }
.board-links { display: flex; gap: 8px; margin-top: 2px; }
.board-links a {
  width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--ink-soft); background: var(--paper);
  transition: border-color .18s ease, color .18s ease, transform .18s ease;
}
.board-links a:hover { border-color: var(--ember); color: var(--ember-deep); transform: translateY(-2px); }
.board-links a svg { width: 17px; height: 17px; }
@media (prefers-reduced-motion: reduce) { .board-links a:hover { transform: none; } }

/* ---- Fact cards ---- */
.fact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.5vw, 28px); }
@media (max-width: 760px) { .fact-grid { grid-template-columns: 1fr; } }
.fact-card { border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 3vw, 30px); background: var(--paper); }
.fact-card .big { font-family: var(--ff-display); font-weight: 800; font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -0.03em; line-height: 1; color: var(--ember-deep); }
.fact-card p { margin-top: 12px; color: var(--ink-soft); }
.cite-list { font-size: 0.85rem; color: var(--ink-faint); display: grid; gap: 6px; }
.cite-list a { color: var(--ink-soft); }

/* ---- FAQ ---- */
.faq { display: grid; gap: 12px; }
.faq details { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); overflow: hidden; }
.faq summary {
  list-style: none; cursor: pointer; padding: 18px 22px; font-family: var(--ff-display);
  font-weight: 700; font-size: 1.08rem; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; color: var(--ember); font-weight: 400; transition: transform .2s; flex-shrink: 0; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq-body { padding: 0 22px 20px; color: var(--ink-soft); }

/* ---- Kit items ---- */
.kit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 18px; }
@media (max-width: 900px) { .kit-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .kit-grid { grid-template-columns: repeat(2, 1fr); } }
.kit-grid li { display: flex; align-items: flex-start; gap: 9px; padding: 8px 0; font-size: 0.96rem; border-bottom: 1px solid var(--line-soft); }
.kit-grid li svg { color: var(--ember); flex-shrink: 0; margin-top: 3px; }

/* ---- Steps ---- */
.steps { display: grid; gap: 20px; counter-reset: step; }
.step { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
.step .n {
  width: 44px; height: 44px; border-radius: 50%; background: var(--ember); color: #fff;
  display: grid; place-items: center; font-family: var(--ff-display); font-weight: 800; font-size: 1.2rem; flex-shrink: 0;
}
.step h3 { font-size: 1.15rem; }
.step p { color: var(--ink-soft); margin-top: 4px; }

/* ---- Media items ---- */
.media-list { display: grid; gap: clamp(20px, 3vw, 28px); }
.media-item { display: grid; grid-template-columns: 150px 1fr; gap: clamp(18px, 3vw, 30px); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(18px, 2.5vw, 26px); background: var(--paper); }
@media (max-width: 720px) { .media-item { grid-template-columns: 1fr; } }
.media-meta { display: flex; flex-direction: column; gap: 12px; }
.media-logo { width: 100%; height: 64px; border-radius: 9px; background: var(--paper-3); border: 1px dashed var(--line); display: grid; place-items: center; font-family: ui-monospace, monospace; font-size: 0.68rem; color: var(--ink-faint); text-align: center; padding: 6px; }
.media-type { display: inline-flex; align-items: center; gap: 7px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ember-deep); }
.media-date { font-size: 0.85rem; color: var(--ink-faint); }
.media-body h3 { font-size: 1.25rem; margin-bottom: 12px; }
.media-embed { aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--winter-2); }
.media-embed iframe { width: 100%; height: 100%; border: 0; }
.audio-player { width: 100%; margin-top: 6px; }
.pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin-top: clamp(34px, 5vw, 50px); }
.pagination a, .pagination span {
  min-width: 42px; height: 42px; padding: 0 12px; border-radius: 9px; border: 1.5px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: var(--ink-soft); font-weight: 600;
}
.pagination a:hover { border-color: var(--ink); color: var(--ink); }
.pagination .current { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pagination .disabled { opacity: 0.4; pointer-events: none; }

/* ---- Gallery ---- */
.gallery-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 28px; }
.year-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.year-tab { padding: 9px 18px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--paper); font-weight: 650; cursor: pointer; color: var(--ink-soft); }
.year-tab[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.year-tab:hover:not([aria-selected="true"]) { border-color: var(--ink-faint); }
.month-block { margin-bottom: 44px; }
.month-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; justify-content: space-between; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.month-head h3 { font-size: 1.4rem; }
.thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.thumb { position: relative; aspect-ratio: 1/1; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--paper-3); cursor: pointer; }
.thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; opacity: 0; transition: opacity .4s; }
.thumb img.loaded { opacity: 1; }
.thumb .dl { position: absolute; bottom: 8px; right: 8px; width: 34px; height: 34px; border-radius: 8px; background: oklch(0.2 0.02 60 / 0.72); color: #fff; display: grid; place-items: center; opacity: 0; transition: opacity .15s; }
.thumb:hover .dl, .thumb:focus-within .dl { opacity: 1; }
.gallery-empty, .gallery-loading { padding: 60px 20px; text-align: center; color: var(--ink-faint); }
.lightbox { position: fixed; inset: 0; z-index: 300; background: oklch(0.12 0.02 60 / 0.94); display: none; align-items: center; justify-content: center; padding: 24px; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 82vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lightbox .lb-close, .lightbox .lb-nav { position: absolute; background: oklch(1 0 0 / 0.12); color: #fff; border: 0; border-radius: 10px; width: 50px; height: 50px; display: grid; place-items: center; cursor: pointer; font-size: 1.4rem; }
.lightbox .lb-close:hover, .lightbox .lb-nav:hover { background: oklch(1 0 0 / 0.22); }
.lightbox .lb-close { top: 20px; right: 20px; }
.lightbox .lb-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: 20px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-bar { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; color: var(--on-dark-soft); font-size: 0.9rem; }

/* ---- Generic two-col split ---- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }
.split.narrow-img { grid-template-columns: 1.15fr 0.85fr; }
@media (max-width: 820px) { .split.narrow-img { grid-template-columns: 1fr; } }

/* ---- Info list ---- */
.info-list { display: grid; gap: 16px; }
.info-list .row { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.info-list .ic { width: 40px; height: 40px; border-radius: 10px; background: var(--ember-tint); color: var(--ember-deep); display: grid; place-items: center; flex-shrink: 0; }
.info-list .row b { display: block; }
.info-list .row span { color: var(--ink-soft); font-size: 0.95rem; }

/* ---- CanadaHelps embed ---- */
.embed-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: clamp(14px, 2.5vw, 26px); position: relative; min-height: 420px;
}
.embed-card .embed-loading {
  position: absolute; inset: 0; display: grid; place-items: center; gap: 12px;
  color: var(--ink-faint); font-size: 0.95rem; pointer-events: none; padding: 24px; text-align: center;
}
.embed-card .embed-loading .spin {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--ember);
  animation: embedspin .8s linear infinite;
}
@keyframes embedspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .embed-card .embed-loading .spin { animation: none; } }
.embed-card #ch_p2p_embed_container,
.embed-card iframe { width: 100%; border: 0; display: block; position: relative; z-index: 1; }
.embed-fallback { margin-top: 16px; font-size: 0.9rem; color: var(--ink-soft); }
.embed-fallback a { color: var(--ember-deep); font-weight: 600; }

/* ============================================================
   FUN PACK — motion, depth, and brand-orange energy
   (all decorative motion no-ops under prefers-reduced-motion)
   ============================================================ */

/* ---- Scroll progress bar ---- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 200;
  transform: scaleX(0); transform-origin: left;
  background: var(--grad-ember); box-shadow: 0 0 10px oklch(0.66 0.2 50 / 0.6);
  transition: transform .08s linear;
}

/* ---- Sticky header scrolled state ---- */
.site-header { transition: box-shadow .25s ease, background .25s ease; }
.site-header.scrolled { box-shadow: 0 6px 24px oklch(0.30 0.03 60 / 0.10); background: oklch(0.985 0.006 75 / 0.96); }

/* ---- Hero animated backdrop ---- */
.hero { overflow: hidden; }
.hero .container { position: relative; z-index: 1; }
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-bg .blob { position: absolute; border-radius: 50%; filter: blur(44px); opacity: 0.55; }
.hero-bg .b1 { width: 460px; height: 460px; background: radial-gradient(circle, oklch(0.8 0.13 62 / 0.7), transparent 70%); top: -120px; right: -70px; animation: floatA 15s ease-in-out infinite; }
.hero-bg .b2 { width: 380px; height: 380px; background: radial-gradient(circle, oklch(0.72 0.18 40 / 0.55), transparent 70%); bottom: -150px; left: -70px; animation: floatB 19s ease-in-out infinite; }
.hero-bg .b3 { width: 300px; height: 300px; background: radial-gradient(circle, oklch(0.68 0.1 250 / 0.4), transparent 70%); top: 26%; left: 46%; animation: floatA 22s ease-in-out infinite reverse; }
.hero-bg .grid-dots { position: absolute; inset: 0; background-image: radial-gradient(oklch(0.5 0.05 60 / 0.10) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(circle at 50% 38%, #000, transparent 72%); mask-image: radial-gradient(circle at 50% 38%, #000, transparent 72%); }
@keyframes floatA { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-30px,24px) scale(1.08); } }
@keyframes floatB { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(34px,-28px) scale(1.06); } }

/* ---- Floating chips on the hero image ---- */
.hero-figure { position: relative; }
.float-chip {
  position: absolute; background: var(--paper); border: 1px solid var(--line);
  border-radius: 999px; padding: 9px 15px; box-shadow: var(--shadow-md);
  font-weight: 700; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 8px; z-index: 2; white-space: nowrap;
}
.float-chip .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 4px var(--ember-tint); }
.float-chip strong { color: var(--ember-deep); }
.float-chip.fc1 { top: 16px; left: -16px; animation: bobA 5.5s ease-in-out infinite; }
.float-chip.fc2 { bottom: 24px; right: -12px; animation: bobB 6.5s ease-in-out infinite; }
@keyframes bobA { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }
@keyframes bobB { 0%,100% { transform: translateY(0); } 50% { transform: translateY(11px); } }
@media (max-width: 880px) { .float-chip { display: none; } }

/* ---- Live Toronto thermometer (hero) ---- */.weather-widget {
  --band: oklch(0.62 0.13 250);
  position: absolute; top: -20px; right: -26px; z-index: 3; width: 250px;
  display: flex; gap: 14px; align-items: flex-start;
  padding: 15px 17px; border-radius: 16px;
  background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  animation: loaderPop .6s cubic-bezier(.2,.8,.2,1);
  transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease;
}
.weather-widget:hover { transform: translateY(-6px); box-shadow: 0 24px 56px oklch(0.30 0.03 60 / 0.22), 0 8px 20px oklch(0.30 0.03 60 / 0.10); }
.weather-widget[hidden] { display: none; }
.wx-thermo { position: relative; width: 22px; height: 96px; flex-shrink: 0; }
.wx-thermo-track {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 10px; height: 78px; border-radius: 999px; overflow: hidden;
  background: oklch(0.91 0.012 70); box-shadow: inset 0 0 0 1px oklch(0.86 0.012 70);
}
.wx-thermo-fill { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; transform: translateY(70%); border-radius: 999px; background: var(--band); transition: transform 1.1s cubic-bezier(.2,.8,.2,1); }
.wx-bulb { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 22px; height: 22px; border-radius: 50%; background: var(--band); box-shadow: 0 0 0 3px color-mix(in oklch, var(--band) 22%, transparent); }
.weather-widget[data-band="cold"] { --band: oklch(0.62 0.13 250); }
.weather-widget[data-band="cool"] { --band: oklch(0.66 0.12 215); }
.weather-widget[data-band="warm"] { --band: oklch(0.70 0.15 60); }
.weather-widget[data-band="hot"]  { --band: oklch(0.62 0.19 35); }
.wx-body { min-width: 0; }
.wx-head { display: flex; align-items: baseline; gap: 2px; font-family: var(--ff-display); font-weight: 800; letter-spacing: -0.02em; color: var(--ink); line-height: 1; }
.wx-head .wx-temp { font-size: 2rem; }
.wx-head .wx-unit { font-size: 1rem; color: var(--ink-soft); font-weight: 700; }
.wx-tag { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--band); margin-top: 4px; }
.wx-insight { font-size: 0.82rem; line-height: 1.4; color: var(--ink-soft); margin-top: 6px; text-wrap: pretty; }
.wx-loc { font-size: 0.72rem; color: var(--ink-faint); margin-top: 8px; }
@media (max-width: 880px) {
  .weather-widget { position: static; width: 100%; right: auto; top: auto; margin-top: 18px; box-shadow: var(--shadow-md); animation: none; }
  .weather-widget:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .weather-widget { animation: none; }
  .weather-widget:hover { transform: none; }
  .wx-thermo-fill { transition: none; }
}

/* ---- Card hover lifts + image zoom ---- */
.program-card, .board-card, .tcard, .fact-card, .media-item, .cols-3 > .card {
  transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease, border-color .28s ease;
}
.program-card:hover, .board-card:hover, .tcard:hover, .fact-card:hover, .media-item:hover, .cols-3 > .card:hover {
  transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--ember-tint2);
}
.program-card .ph { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.program-card:hover .ph { transform: scale(1.05); }
.fact-card .big { transition: color .25s ease; }
.fact-card:hover .big { color: var(--flame); }
.board-card .headshot, .board-card .ph { transition: transform .5s ease; }
.board-card:hover .headshot, .board-card:hover .ph { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .program-card:hover, .board-card:hover, .tcard:hover, .fact-card:hover, .media-item:hover, .cols-3 > .card:hover { transform: none; }
  .program-card:hover .ph, .board-card:hover .headshot, .board-card:hover .ph { transform: none; }
}

/* ---- Micro-interactions ---- */
.partner-chip { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease; }
.partner-chip:hover { transform: translateY(-3px); border-color: var(--ember); box-shadow: var(--shadow-sm); color: var(--ink); }
.partner-chip:hover .logo-dot { border-color: var(--ember); }
.year-tab { transition: transform .15s ease, border-color .15s, background .2s, color .2s; }
.year-tab:hover:not([aria-selected="true"]) { transform: translateY(-2px); }
.faq summary { transition: color .15s; }
.faq summary:hover { color: var(--ember-deep); }
.step .n { transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease; box-shadow: 0 6px 16px oklch(0.62 0.19 45 / 0.28); }
.step:hover .n { transform: scale(1.12) rotate(-6deg); }
.info-list .ic { transition: transform .2s ease; }
.info-list .row:hover .ic { transform: scale(1.08); }
.socials a { transition: transform .18s ease, background .15s, color .15s; }
.socials a:hover { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) {
  .partner-chip:hover, .year-tab:hover, .step:hover .n, .socials a:hover, .info-list .row:hover .ic { transform: none; }
}

/* ---- Marquee (partner logos) ---- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.marquee__track { display: flex; gap: 14px; width: max-content; animation: marquee 40s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; flex-wrap: wrap; } .marquee { -webkit-mask-image: none; mask-image: none; } }

/* ---- Dark section ember glow + rising embers ---- */
.section.dark { position: relative; overflow: hidden; }
.section.dark > .container { position: relative; z-index: 1; }
.section.dark::before {
  content: ""; position: absolute; z-index: 0; width: 60vw; height: 60vw; max-width: 720px; max-height: 720px;
  right: -8%; top: -28%; border-radius: 50%;
  background: radial-gradient(circle, oklch(0.62 0.19 45 / 0.32), transparent 64%);
  animation: glowPulse 9s ease-in-out infinite;
}
.section.dark.center::before { left: 50%; right: auto; transform: translateX(-50%); animation-name: glowPulseC; }
@keyframes glowPulse { 0%,100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.12); } }
@keyframes glowPulseC { 0%,100% { opacity: 0.5; transform: translateX(-50%) scale(1); } 50% { opacity: 0.85; transform: translateX(-50%) scale(1.12); } }
.embers { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.embers i { position: absolute; bottom: -12px; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle, var(--ember-bright), oklch(0.6 0.18 40 / 0)); opacity: 0; animation: rise linear infinite; }
@keyframes rise { 0% { opacity: 0; transform: translateY(0) scale(.6); } 12% { opacity: .85; } 100% { opacity: 0; transform: translateY(-118%) scale(1.25); } }

/* ---- Impact stat flourish ---- */
.stat-num { position: relative; display: inline-block; }
.stat-block .stat-num::after { content: ""; display: block; height: 4px; width: 64px; transform: scaleX(0); transform-origin: left; margin-top: 12px; border-radius: 3px; background: var(--grad-ember); transition: transform 1s cubic-bezier(.2,.7,.2,1) .25s; }
.stat-block.in .stat-num::after { transform: none; }

/* ---- Reveal variants + stagger ---- */
.reveal { transition-delay: var(--d, 0s); }
.reveal-l { opacity: 0; transform: translateX(-26px); transition: opacity .6s ease, transform .6s ease; transition-delay: var(--d,0s); }
.reveal-r { opacity: 0; transform: translateX(26px); transition: opacity .6s ease, transform .6s ease; transition-delay: var(--d,0s); }
.reveal-scale { opacity: 0; transform: scale(.94); transition: opacity .6s ease, transform .6s ease; transition-delay: var(--d,0s); }
.reveal-l.in, .reveal-r.in, .reveal-scale.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal-l, .reveal-r, .reveal-scale { opacity: 1; transform: none; transition: none; } }

/* ---- Warm page-hero wash (inner pages) ---- */
.page-hero:not(.on-dark-hero) { background: linear-gradient(180deg, oklch(0.965 0.036 62) 0%, var(--paper) 100%); }
.page-hero.on-dark-hero { position: relative; overflow: hidden; }
.page-hero.on-dark-hero::before { content: ""; position: absolute; z-index: 0; width: 520px; height: 520px; right: -8%; top: -58%; border-radius: 50%; background: radial-gradient(circle, oklch(0.62 0.19 45 / 0.30), transparent 64%); }
.page-hero .container { position: relative; z-index: 1; }

/* ---- Kill decorative animation under reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .hero-bg .blob, .float-chip, .section.dark::before, .embers i { animation: none !important; }
  .scroll-progress { display: none; }
}

/* ---- User-fillable image slots ---- */
image-slot { display: block; width: 100%; height: auto; border-radius: var(--radius); overflow: hidden; background: var(--paper-3); }
image-slot.r43 { aspect-ratio: 4/3; }
image-slot.rwide { aspect-ratio: 16/9; }
image-slot.rport { aspect-ratio: 3/4; }
image-slot.rsq { aspect-ratio: 1/1; }
image-slot.rcine { aspect-ratio: 5/2; }
@media (max-width: 640px) { image-slot.rcine { aspect-ratio: 3/2; } }

/* Two-column hero (inner pages) */
.hero-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 4vw, 56px); align-items: stretch; }
.hero-split > .hero-split-text { align-self: center; }
.hero-split > image-slot { width: 100%; height: 100%; min-height: 340px; background: var(--paper); box-shadow: var(--shadow-md); }
@media (max-width: 880px) {
  .hero-split { grid-template-columns: 1fr; }
  .hero-split > image-slot { height: auto; min-height: 0; aspect-ratio: 4/3; }
}
.program-card image-slot { border-radius: 0; aspect-ratio: 16/9; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.program-card:hover image-slot { transform: scale(1.05); }
.board-card image-slot { aspect-ratio: 1/1; border-radius: var(--radius); transition: transform .5s ease; }
.board-card:hover image-slot { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .program-card:hover image-slot, .board-card:hover image-slot { transform: none; } }

/* ---- Partner logo slots ---- */
.partner-logos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 860px) { .partner-logos { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .partner-logos { grid-template-columns: repeat(2, 1fr); } }
.partner-logos image-slot { aspect-ratio: 3 / 2; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); transition: border-color .2s ease, transform .2s ease; }
.partner-logos image-slot:hover { border-color: var(--ember); transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .partner-logos image-slot:hover { transform: none; } }

/* ============================================================
   MOBILE OPTIMIZATION PASS
   ============================================================ */
/* Belt-and-suspenders against any decorative horizontal overflow */
html, body { overflow-x: clip; }
* { min-width: 0; }
.container { max-width: 100%; }
img, image-slot, video, iframe, table { max-width: 100%; }

@media (max-width: 760px) {
  body { font-size: 16px; }
  .section { padding-block: clamp(44px, 11vw, 72px); }
  .page-hero { padding-block: 24px 30px; }
  /* let big display type breathe and never overflow */
  .hero-title { font-size: clamp(2.1rem, 8.5vw, 3rem); }
  .display { font-size: clamp(2.2rem, 9vw, 3rem); }
  h2 { font-size: clamp(1.7rem, 6.5vw, 2.2rem); }
  .stat-num { font-size: clamp(2.6rem, 13vw, 3.6rem); word-break: normal; }
  .closing-line { font-size: clamp(1.5rem, 6vw, 2rem); }
  /* hero CTAs go full-width so taps are easy and tidy */
  .hero-cta .btn, .page-hero .hero-cta .btn { flex: 1 1 100%; }
  .section.dark.center .hero-cta .btn { flex: 1 1 100%; }
  /* breadcrumb shouldn't crowd the title */
  .breadcrumb { font-size: 0.8rem; }
  /* board roles/bios spacing */
  .board-grid { gap: 26px; }
  /* media item logo: cap height so it doesn't dominate */
  .media-logo { height: 56px; }
  /* steps: keep the number from shrinking text column */
  .step { gap: 14px; }
  .step .n { width: 40px; height: 40px; font-size: 1.05rem; }
  /* info-list rows tighter */
  .info-list .ic { width: 36px; height: 36px; }
}

@media (max-width: 560px) {
  :root { --gutter: 18px; }
  /* tap targets: ensure nav + buttons are comfy */
  .btn { min-height: 48px; }
  .btn--sm { min-height: 44px; }
  /* hero figure not too tall on phones */
  .hero-figure > image-slot { aspect-ratio: 3 / 2; min-height: 220px; }
  /* mobile menu: a touch more room */
  .mobile-menu a { padding: 14px 4px; }
  /* partner logos: 2-up already; keep labels readable */
  .partner-logos { gap: 11px; }
  /* lightbox controls sized + repositioned for thumb reach */
  .lightbox { padding: 14px; }
  .lightbox img { max-width: 94vw; max-height: 70vh; }
  .lightbox .lb-close { top: 12px; right: 12px; width: 44px; height: 44px; }
  .lightbox .lb-nav { width: 44px; height: 44px; }
  .lightbox .lb-prev { left: 10px; }
  .lightbox .lb-next { right: 10px; }
  .lightbox .lb-bar { bottom: 12px; width: calc(100% - 24px); justify-content: center; flex-wrap: wrap; text-align: center; }
  /* gallery toolbar: tabs scroll, download button drops below neatly */
  .gallery-toolbar { gap: 12px; }
  #gallery-tool-extra { margin-left: 0 !important; width: 100%; }
  #gallery-tool-extra .btn { width: 100%; }
  .year-tabs { width: 100%; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: none; }
  .year-tabs::-webkit-scrollbar { display: none; }
  .year-tab { flex: 0 0 auto; }
  /* thumb grid: 2 columns minimum on phones */
  .thumb-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  /* footer bottom: stack the badge */
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
  .supported-badge { margin-left: 0; }
  .footer-credits { margin-left: 0; }
  /* month head wraps cleanly */
  .month-head h3 { font-size: 1.2rem; }
  /* download chip on thumbs always visible on touch (no hover) */
  .thumb .dl { opacity: 1; width: 38px; height: 38px; }
}

/* Coarse-pointer (touch) devices: reveal affordances that rely on hover */
@media (hover: none) {
  .thumb .dl { opacity: 1; }
  .marquee:hover .marquee__track { animation-play-state: running; }
}

/* ============================================================
   TASTEFUL ICONS — impact stats + ways-to-help
   Badge handles entrance; inner SVG carries a subtle idle loop.
   ============================================================ */
.stat-icon {
  width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center;
  margin-bottom: 20px; color: var(--ember-bright);
  background: oklch(1 0 0 / 0.06); border: 1px solid var(--winter-line);
  opacity: 0; transform: scale(.7) translateY(6px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1);
}
.stat-block.in .stat-icon { opacity: 1; transform: none; }
.stat-icon svg { width: 31px; height: 31px; }

.help-icon {
  width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center;
  margin-bottom: 4px; color: var(--ember-deep);
  background: var(--ember-tint); border: 1px solid var(--ember-tint2);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), background .25s ease;
}
.help-icon svg { width: 28px; height: 28px; }
.card:hover .help-icon { transform: translateY(-3px) rotate(-4deg); background: var(--ember-tint2); }

@media (prefers-reduced-motion: no-preference) {
  .stat-block.in .icon-bottle, .card .icon-bottle { animation: icoSway 5s ease-in-out infinite; transform-origin: 50% 82%; }
  .stat-block.in .icon-pack,   .card .icon-pack   { animation: icoBob 4.2s ease-in-out infinite; }
  .stat-block.in .icon-clip    { animation: icoBob 4.6s ease-in-out infinite; }
  .stat-block.in .icon-cal     { animation: icoSway 5.2s ease-in-out infinite; transform-origin: 50% 50%; }
  .stat-block.in .icon-build   { animation: icoBob 5s ease-in-out infinite; }
  .icon-heart  { animation: icoBeat 3.6s ease-in-out infinite; transform-origin: 50% 55%; }
  .icon-mega   { animation: icoSway 4.6s ease-in-out infinite; transform-origin: 30% 50%; }
  .icon-people { animation: icoBob 4.6s ease-in-out infinite; }
}
@keyframes icoSway { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes icoBob  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes icoBeat { 0%,100% { transform: scale(1); } 18% { transform: scale(1.12); } 36% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .card:hover .help-icon { transform: none; }
}

/* ============================================================
   BRANDED SNOW LOADER (once per session)
   ============================================================ */
#site-loader {
  position: fixed; inset: 0; z-index: 9999; overflow: hidden;
  display: grid; place-items: center;
  background:
    radial-gradient(125% 95% at 50% 28%, oklch(0.47 0.03 250), transparent 68%),
    linear-gradient(165deg, oklch(0.40 0.03 250) 0%, oklch(0.255 0.04 257) 100%);
  transition: opacity .6s ease, visibility .6s ease;
}
#site-loader.is-hidden { opacity: 0; visibility: hidden; }
.ec-loaded #site-loader { display: none; }
#site-loader .loader-inner {
  position: relative; z-index: 2; display: flex; flex-direction: column;
  align-items: center; gap: 26px; padding: 24px; text-align: center;
}
#site-loader .loader-logo {
  width: min(440px, 74vw); height: auto;
  filter: drop-shadow(0 10px 34px oklch(0.15 0.02 256 / 0.55));
  animation: loaderPop .8s cubic-bezier(.2,.8,.2,1) both;
}
#site-loader .loader-bar {
  width: 140px; height: 4px; border-radius: 999px; overflow: hidden;
  background: oklch(1 0 0 / 0.16);
}
#site-loader .loader-bar i { display: block; height: 100%; width: 42%; border-radius: 999px; background: var(--grad-ember); animation: loaderBar 1.15s ease-in-out infinite; }
.snow-layer { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.snow-layer i {
  position: absolute; top: -6vh; color: #fff; line-height: 1; font-style: normal;
  text-shadow: 0 0 4px oklch(1 0 0 / 0.55); will-change: transform;
  animation: snowfall linear infinite;
}
@keyframes snowfall {
  0%   { transform: translateY(-8vh) translateX(0) rotate(0deg); }
  100% { transform: translateY(112vh) translateX(var(--wind, 0px)) rotate(360deg); }
}
@keyframes loaderPop { 0% { opacity: 0; transform: translateY(12px) scale(.95); } 100% { opacity: 1; transform: none; } }
@keyframes loaderBar { 0% { transform: translateX(-130%); } 100% { transform: translateX(340%); } }
@media (prefers-reduced-motion: reduce) {
  .snow-layer i { animation: none; opacity: 0 !important; }
  #site-loader .loader-logo { animation: none; }
  #site-loader .loader-bar i { animation: none; width: 100%; }
}


/* ---- Event host block (About) ---- */
.host-block { margin-top: clamp(34px, 5vw, 52px); padding-top: clamp(26px, 4vw, 38px); border-top: 1px solid var(--line); }
.host-block .eyebrow { margin-bottom: 18px; }
.board-card.host-card { display: grid; grid-template-columns: 190px 1fr; gap: clamp(20px, 3vw, 32px); align-items: start; max-width: 780px; }
@media (max-width: 620px) { .board-card.host-card { grid-template-columns: 1fr; max-width: 100%; } }

/* ---- Bargains Group block (Get Involved) ---- */
.bargains-block { display: grid; grid-template-columns: 1fr auto; gap: clamp(20px, 3vw, 38px); align-items: center; }
@media (max-width: 760px) { .bargains-block { grid-template-columns: 1fr; } .bargains-block .btn { width: 100%; } }

/* ---- Distribution photo strip (PWS) ---- */
.photo-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 760px) { .photo-strip { grid-template-columns: repeat(2, 1fr); } }
.photo-strip image-slot { aspect-ratio: 4/3; }
.strip-caption { margin-top: 12px; font-size: 0.88rem; color: var(--ink-faint); }

/* ---- Partner marquee logos (data-driven from logos.json) ---- */
.partner-chip { background: #fff; padding: 12px 18px; }
.partner-chip img.partner-logo { height: 30px; width: auto; max-width: 140px; object-fit: contain; display: block; }
@media (max-width: 640px) { .partner-chip img.partner-logo { height: 24px; max-width: 110px; } }

/* ---- Filled photo slots (real images in former .ph placeholders) ---- */
img.ph { width: 100%; height: 100%; object-fit: cover; }

/* ---- Grouped partner logo grids (sponsors / in-kind) ---- */
.partner-groups { display: grid; gap: 34px; margin-top: 8px; }
.partner-group-title { font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 14px; }
.logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 14px; }
.logo-tile { background: #fff; border: 1px solid var(--line); border-radius: 12px; height: 92px; display: grid; place-items: center; padding: 16px; }
.logo-tile img { max-height: 48px; max-width: 100%; width: auto; object-fit: contain; display: block; }
@media (max-width: 640px) { .logo-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); } .logo-tile { height: 76px; padding: 12px; } .logo-tile img { max-height: 38px; } }

/* ==================================================================
   POLISH LAYER (Aug 2026 design pass) — appended by wire_export.py.
   Scoped, additive overrides only; safe to re-append after any export.
   ================================================================== */

/* Headings wrap evenly; no widowed single words on two-line heads */
h1, h2, h3 { text-wrap: balance; }

/* Visible focus for keyboard users (WCAG 2.4.7); ember ring, offset so it never clips */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--ember);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Stat and fact numbers hold their width while counting (tabular figures) */
.stat-num, .fact-card .big { font-variant-numeric: tabular-nums; }

/* Form pages: the info column tops-align with the tall form instead of
   floating vertically centered beside it (Apply, Contact) */
.split:has(form) { align-items: start; }

/* Impact band: three stats sit as a composed row on desktop instead of
   two blocks and a void */
@media (min-width: 880px) {
  .impact-grid { grid-template-columns: repeat(3, 1fr); }
}

/* One primary action per view: the Donate card leads the three-ways row */
.cols-3 > .card:first-child {
  border-color: color-mix(in srgb, var(--ember) 40%, var(--line));
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.07);
}

/* Long single-column fact text holds a readable measure (was full-bleed ~120ch) */
.fact-card p { max-width: 68ch; }

/* Bargains block: body copy holds its measure; CTA hangs with the text */
.bargains-block p { max-width: 62ch; }

/* Media page: outlet chips are labels, not dashed placeholder boxes */
.media-logo {
  border-style: solid;
  border-color: var(--line);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-family: inherit;
}

/* Media page: embedded players hold a sane width inside the item */
.media-embed { max-width: 720px; }

/* Event-host card: room to breathe */
.host-block { margin-top: clamp(40px, 6vw, 64px); }
.board-card.host-card { padding: clamp(20px, 3vw, 30px); }
.host-card h3 { margin-bottom: 6px; }
.host-card .role { margin-top: 0; }
.host-card .bio { margin-top: 10px; }

/* Mobile: the 46-logo wall compresses to a tighter grid so it stops
   dominating the scroll */
@media (max-width: 640px) {
  .logo-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .logo-tile { height: 62px; padding: 10px; border-radius: 10px; }
  .logo-tile img { max-height: 30px; }
}

/* ---- Unified width system (Aug 2026): every section runs full width with
   exaggerated side margins — nothing centered-narrow, nothing edge-to-edge.
   (The base stylesheet's mobile pass already set .container to max-width:100%
   globally; this makes that intentional and gives large screens real gutters.) ---- */
.container { max-width: none; }
@media (min-width: 1200px) {
  :root { --gutter: clamp(64px, 6.5vw, 170px); }
}
.nav-links a { font-size: 1.04rem; }
.nav-links { gap: clamp(18px, 2.2vw, 34px); }
@media (min-width: 1100px) {
  .hero-title { font-size: clamp(3rem, min(4.6vw, 8.5vh), 5.1rem); }
  .hero .lead { font-size: clamp(1.18rem, 1.35vw, 1.5rem); max-width: 52ch; }
  .hero-figure > image-slot { min-height: min(560px, 54vh); }
  .hero-cta .btn--lg { font-size: 1.08rem; padding: 16px 30px; }
}

/* Above the fold: header + hero + marquee fit one viewport, so the marquee
   is visible on load. Compress hero verticals against viewport height. */
@media (min-width: 881px) {
  .hero { padding-block: clamp(14px, 3vh, 44px) clamp(16px, 3.2vh, 48px); }
}
@media (min-width: 881px) and (max-height: 940px) {
  .hero .stack > * + * { margin-top: 0.85rem; }
  .hero-countdown { margin-top: clamp(12px, 1.8vh, 22px); padding: clamp(10px, 1.6vh, 16px) clamp(14px, 1.8vw, 22px); }
  .cd-cell b { font-size: clamp(1.35rem, 2.8vh, 2rem); }
  .cd-copy { font-size: 0.88rem; }
  .hero-marquee { padding-block: 12px; }
  .hero-marquee .mq-item img { height: 28px; }
}
@media (min-width: 881px) and (max-height: 880px) {
  .hero { padding-block: 10px 14px; }
  .hero .stack > * + * { margin-top: 0.6rem; }
  .hero-title { font-size: clamp(2.3rem, 6.8vh, 3.2rem); }
  .hero .lead { font-size: 1.05rem; }
  .campaign-banner { padding: 8px 12px; font-size: 0.85rem; }
  .hero-cta .btn--lg { font-size: 1rem; padding: 12px 22px; }
  .cd-cell b { font-size: 1.4rem; }
  .cd-cell { min-width: 46px; }
  .cd-copy span { display: none; }
  .hero-figure > image-slot { min-height: 0; }
}

/* Event-day countdown chip under the hero CTAs */
.hero-countdown {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: clamp(16px, 2vw, 26px);
  margin-top: clamp(20px, 2.5vw, 30px);
  padding: clamp(14px, 1.6vw, 20px) clamp(16px, 2vw, 26px);
  background: var(--winter);
  color: var(--on-dark);
  border-radius: 14px;
  max-width: 620px;
}
.cd-cells { display: flex; align-items: baseline; gap: 10px; }
.cd-cell { display: inline-flex; flex-direction: column; align-items: center; min-width: 58px; }
.cd-cell b {
  font-size: clamp(1.7rem, 2.4vw, 2.4rem); font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--ember-bright, var(--ember));
}
.cd-cell i { font-style: normal; font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase; margin-top: 5px; opacity: 0.75; }
.cd-sep { font-size: 1.5rem; font-weight: 700; opacity: 0.4; align-self: flex-start; margin-top: 4px; }
.cd-copy { margin: 0; font-size: 0.95rem; line-height: 1.45; max-width: 30ch; }
.cd-copy span { display: block; margin-top: 4px; font-size: 0.8rem; opacity: 0.7; }
@media (max-width: 560px) { .hero-countdown { flex-direction: column; align-items: flex-start; } }

/* Homepage event-day photo mosaic: one wide anchor + four squares */
.photo-mosaic {
  display: grid; gap: 12px;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 190px;
}
.pm { display: block; overflow: hidden; border-radius: 12px; position: relative; }
.pm img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform .45s cubic-bezier(.2,.8,.2,1); display: block; }
.pm:hover img { transform: scale(1.04); }
.pm-wide { grid-column: span 2; grid-row: span 2; }
@media (max-width: 880px) {
  .photo-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .pm-wide { grid-column: span 2; grid-row: span 1; }
}
@media (prefers-reduced-motion: reduce) { .pm img { transition: none; } .pm:hover img { transform: none; } }

/* ---- About: organizational mission (official statement, verbatim) ---- */
.mission-prose { max-width: 72ch; margin-top: clamp(18px, 2.5vw, 30px); }
.mission-prose p { font-size: clamp(1.06rem, 1.35vw, 1.3rem); line-height: 1.65; color: var(--on-dark-soft); margin-bottom: 1em; }
.mission-callout {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(1.35rem, 2vw, 1.9rem) !important;
  line-height: 1.35 !important;
  font-weight: 700;
  color: var(--on-dark) !important;
  border-left: none;
  padding-top: 0.4em;
}
.mission-callout::before { content: ""; display: block; width: 64px; height: 4px; background: var(--ember-bright); border-radius: 2px; margin-bottom: 0.55em; }

/* ---- Legal pages + footer legal links ---- */
.legal-prose { max-width: 72ch; }
.legal-prose h2 { margin-top: clamp(28px, 4vw, 44px); margin-bottom: 10px; font-size: clamp(1.25rem, 1.6vw, 1.6rem); }
.legal-prose p { margin-bottom: 14px; line-height: 1.65; color: var(--ink-soft); }
.legal-prose p b { color: var(--ink); }
.legal-prose a { color: var(--ember-deep); text-decoration: underline; text-underline-offset: 2px; }
.footer-bottom .legal-links a { color: inherit; opacity: 0.85; text-decoration: underline; text-underline-offset: 2px; }
.footer-bottom .legal-links a:hover { opacity: 1; }

/* ---- Partner logo marquee (hero bottom) ---- */
.hero-marquee {
  border-block: 1px solid var(--line);
  background: #fdfcfa;
  padding-block: 18px;
}
.marquee-viewport { overflow: hidden; }
.marquee-track {
  display: flex; align-items: center; gap: clamp(40px, 4vw, 72px);
  width: max-content;
  animation: mq-scroll var(--mq-dur, 90s) linear infinite;
}
.marquee-viewport:hover .marquee-track { animation-play-state: paused; }
.mq-item { flex: none; display: grid; place-items: center; }
.mq-item img { height: 34px; width: auto; max-width: 150px; object-fit: contain; display: block; }
@keyframes mq-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}

/* ---- Brand illustration accents (Aug 2026) ---- */

/* Home closing CTA rides on the warm winter-night illustration */
.section.dark.closing-glow {
  background-image: linear-gradient(rgb(20 28 46 / 0.55), rgb(20 28 46 / 0.35)), url("../brand/toronto-glow-v2.jpg");
  background-size: cover;
  background-position: center bottom;
}

/* Donate hero: copy left, kit flat-lay illustration right */
.donate-hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 4vw, 60px); align-items: center; }
.donate-kit-figure { margin: 0; }
.donate-kit-figure img { width: 100%; height: auto; border-radius: 14px; display: block; }
.donate-kit-figure figcaption { margin-top: 10px; font-size: 0.85rem; color: var(--on-dark-soft); text-align: center; }
@media (max-width: 880px) { .donate-hero-grid { grid-template-columns: 1fr; } .donate-kit-figure { max-width: 440px; } }

/* Get Involved / About photo splits: the image column stretches to the text
   column's height so sections end together instead of leaving voids */
@media (min-width: 880px) {
  .split image-slot.rport, .split image-slot.r43 {
    aspect-ratio: auto; align-self: stretch; height: auto; min-height: 380px;
  }
}

/* Media page: real outlet logos in the meta chip */
.media-logo img { max-height: 42px; max-width: 88%; width: auto; object-fit: contain; display: block; }
.media-logo:has(img) { background: #fdfcfa; border-style: solid; }

/* Testimonial cards: the org's own mark sits with the attribution */
figcaption.who { display: flex; align-items: center; gap: 12px; }
figcaption.who .t-logo {
  height: 34px; max-width: 96px; width: auto; object-fit: contain; flex: none;
  background: #fdfcfa; border: 1px solid var(--line); border-radius: 8px; padding: 4px 7px;
  box-sizing: content-box;
}
figcaption.who .t-mono {
  flex: none; width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--ember-tint); color: var(--ember-deep);
  font-weight: 800; font-size: 1.05rem; letter-spacing: 0.02em;
}
figcaption.who > span:last-child { display: block; }

/* ---- 2027 Spotlight strip (Sep 2026, data-driven from spotlight.json) ---- */
.spotlight { display: flex; align-items: center; gap: 6px; background: var(--ember-tint); border-bottom: 1px solid oklch(0.86 0.06 55); min-height: 46px; padding-left: var(--gutter); }
.spotlight[hidden] { display: none; }
.sp-label {
  flex: none; display: inline-flex; align-items: center;
  padding: 6px 13px; border-radius: 999px; background: var(--grad-ember); color: #fff;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 1px 2px oklch(0.55 0.18 41 / 0.25);
}
.sp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.sp-viewport {
  flex: 1 1 auto; min-width: 0; overflow: hidden; display: flex; align-items: center; align-self: stretch;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.sp-track { display: flex; align-items: center; width: max-content; gap: clamp(44px, 5vw, 80px); padding-left: 24px; will-change: transform; }
.sp-item { flex: none; display: inline-flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 0.92rem; line-height: 1.25; color: var(--ink); text-decoration: none; white-space: nowrap; }
a.sp-item:hover span b { color: var(--ember-deep); }
.sp-item b { font-weight: 700; }
.sp-item img { height: 22px; width: auto; max-width: 84px; object-fit: contain; display: block; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; box-sizing: content-box; }
.sp-item .sp-tag { font-style: normal; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ember-deep); border: 1px solid oklch(0.80 0.09 50); border-radius: 999px; padding: 3px 8px; }
/* Reduced motion: no auto-scroll, the row swipes instead of freezing in place */
.sp-static .sp-viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
.sp-static .sp-viewport::-webkit-scrollbar { display: none; }
.sp-static .sp-track { padding-right: 24px; }
@media (max-width: 640px) {
  .spotlight { padding-left: 16px; }
  .sp-label { padding: 5px 10px; font-size: 0.6rem; letter-spacing: 0.1em; }
  .sp-item { font-size: 0.85rem; gap: 8px; }
  .sp-item img { height: 18px; max-width: 64px; }
}

/* Impact numbers size to their own column, not the viewport: "5,000,000+"
   runs ~5.3em wide, so a vw-based size overflowed into the next stat
   between ~880px and ~1400px (reported Sep 30 2026). */
.stat-block { container-type: inline-size; min-width: 0; }
.stat-block .stat-num { font-size: clamp(2.2rem, 17cqi, 5.6rem); }

/* KITS FOR A CAUSE placement (Get Involved + For Companies) */
.kfac-media { display: grid; gap: 18px; align-content: start; }
.kfac-logo-link { display: inline-block; justify-self: start; border-radius: 8px; }
.kfac-logo-link img { display: block; width: clamp(170px, 20vw, 230px); height: auto; }
.kfac-program { font-size: clamp(1.25rem, 2vw, 1.55rem); }
.kfac-program a { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--ember); }
.kfac-program a:hover { color: var(--ember); }
.kfac-block { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(22px, 3.5vw, 48px); align-items: center; }
@media (max-width: 820px) { .kfac-block { grid-template-columns: 1fr; } }

/* Nav: the polish-layer link size (1.04rem) made seven links need ~1280px.
   Between 1081px and 1279px flex squeezed each link below its text width and
   labels ran into each other ("Project Winter SurvivalGet Involved", reported
   Sep 30 2026). Hamburger takes over below 1280px. */
@media (max-width: 1279px) {
  .nav-toggle { display: inline-flex; margin-left: 10px; }
  .nav-links { display: none; }
  .nav .nav-cta { display: flex; margin-left: auto; }
  .mobile-menu.open { display: block; }
}

/* ---- Agency apply callout (Oct 20 2026): bar above the header on every page but apply.html,
   block after the hero on index + PWS. Labels swap by date in main.js (pwsPhase). ---- */
.agency-bar { display: block; background: var(--winter); color: var(--on-dark); text-decoration: none; font-size: 0.95rem; line-height: 1.35; position: relative; z-index: 101; }
.agency-bar .ab-inner { display: flex; align-items: center; justify-content: center; gap: 10px 14px; flex-wrap: wrap; padding-block: 10px; text-align: center; }
.agency-bar .ab-tag { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; background: var(--grad-ember); color: #fff; padding: 4px 9px; border-radius: 999px; }
.agency-bar .ab-text { color: var(--on-dark); font-weight: 500; }
.agency-bar .ab-cta { font-weight: 700; color: oklch(0.84 0.13 70); white-space: nowrap; }
.agency-bar:hover .ab-cta, .agency-bar:focus-visible .ab-cta { text-decoration: underline; text-underline-offset: 3px; }
.agency-bar:focus-visible { outline: 3px solid var(--ember-bright); outline-offset: -3px; }
.mobile-menu a.mm-apply { color: var(--ember-deep); font-weight: 700; }
.mobile-menu a.mm-apply span { font-weight: 500; color: var(--ink-soft); }
.agency-callout { background: var(--winter); color: var(--on-dark); padding-block: clamp(44px, 7vw, 84px); position: relative; overflow: hidden; }
.agency-callout::before { content: ""; position: absolute; inset: auto -10% -60% auto; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, oklch(0.64 0.19 45 / 0.28), transparent 70%); pointer-events: none; }
.agency-callout .ac-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.agency-callout h2 { color: var(--on-dark); font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.04; margin: 10px 0 16px; text-wrap: balance; }
.agency-callout .ac-copy p:not(.eyebrow) { color: var(--on-dark-soft); font-size: 1.12rem; max-width: 52ch; }
.agency-callout .ac-dates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0 0 22px; border: 1px solid var(--winter-line); border-radius: 14px; overflow: hidden; }
.agency-callout .ac-dates div { padding: 14px 16px; border-left: 1px solid var(--winter-line); }
.agency-callout .ac-dates div:first-child { border-left: 0; }
.agency-callout dt { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark-soft); }
.agency-callout dd { margin: 4px 0 0; font-family: var(--ff-display, inherit); font-weight: 800; font-size: 1.2rem; color: var(--on-dark); }
.agency-callout .ac-btn { width: 100%; justify-content: center; }
.agency-callout .ac-note { margin-top: 12px; font-size: 0.92rem; color: var(--on-dark-soft); text-align: center; }
@media (max-width: 860px) { .agency-callout .ac-grid { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .agency-callout .ac-dates div { padding: 12px 10px; } .agency-callout dd { font-size: 1.02rem; } .agency-bar { font-size: 0.88rem; } }
.agency-bar[hidden], .agency-callout[hidden] { display: none; }
.agency-bar .ab-short { display: none; color: var(--on-dark); font-weight: 600; }
@media (max-width: 640px) { .agency-bar .ab-tag, .agency-bar .ab-text { display: none; } .agency-bar .ab-short { display: inline; } .agency-bar .ab-inner { gap: 8px; padding-block: 9px; } }