/* ==========================================================================
   The Connie Erickson Foundation — design system (v2)
   Clean, modern and warm: Plus Jakarta Sans, white + lavender surfaces,
   rounded cards, soft shadows, one strong purple. No gradients, no glow.
   1 Tokens · 2 Base · 3 Layout · 4 Type · 5 Buttons · 6 Header · 7 Footer
   8 Components · 9 Home · 10 Dialogs · 11 Utilities
   ========================================================================== */

/* 1 · Tokens ------------------------------------------------------------- */
:root {
  --white: #ffffff;
  --tint: #f7f3fd;          /* lavender wash for alternating sections */
  --tint-2: #efe8fb;

  --ink: #1b1230;
  --ink-2: #4a4260;
  --ink-3: #6b6383;

  --p900: #1d0b3e;
  --p800: #2f1466;
  --p700: #4c1d95;
  --p600: #5b21b6;          /* primary */
  --p500: #7c3aed;
  --p300: #c4b0f2;
  --p200: #e0d4f8;
  --p100: #f0e9fc;

  --amber: #f2b544;         /* small highlights only */
  --amber-ink: #4a3300;
  --success: #17724a;
  --danger: #b3261e;

  --line: rgba(27, 18, 48, 0.1);
  --line-strong: rgba(27, 18, 48, 0.2);
  --line-inv: rgba(255, 255, 255, 0.18);

  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --r-xl: 32px;

  --sh-1: 0 1px 2px rgba(29, 11, 62, 0.05), 0 6px 20px rgba(29, 11, 62, 0.06);
  --sh-2: 0 2px 4px rgba(29, 11, 62, 0.05), 0 16px 44px rgba(29, 11, 62, 0.12);

  --gutter: clamp(20px, 4vw, 40px);
  --max: 1180px;
  --max-narrow: 760px;
  --header-h: 76px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-color: 0.2s ease;     /* colour / background fades on hover */
  --t-shadow: 0.4s ease;    /* shadow + border fades: an even fade, not a snap */
  --t-lift: 0.4s var(--ease); /* small hover lifts */
}

/* 2 · Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  background: var(--white);
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  word-spacing: 0.04em;   /* Plus Jakarta's default word space is a little tight */
}
main { flex: 1 0 auto; }

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--p600); text-underline-offset: 0.22em; text-decoration-thickness: 1px; transition: color var(--t-color), text-decoration-color var(--t-color); }
a:hover { color: var(--p800); }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
address { font-style: normal; }
[hidden] { display: none !important; }
:where(ul[class], ol[class]) { list-style: none; margin: 0; padding: 0; }

:focus-visible { outline: 3px solid var(--p500); outline-offset: 3px; border-radius: 6px; }
.section--dark :focus-visible, .site-footer :focus-visible, .cta :focus-visible { outline-color: var(--amber); }
::selection { background: var(--p200); color: var(--ink); }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r-sm);
  text-decoration: none; transition: top 0.2s;
}
.skip-link:focus { top: 12px; }

.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon--fill { fill: currentColor; stroke: none; }

/* 3 · Layout ------------------------------------------------------------- */
.container { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(var(--max-narrow) + var(--gutter) * 2); }

.section { padding-block: clamp(56px, 8vw, 104px); }
.section--tight { padding-block: clamp(36px, 5vw, 64px); }
.section--tint { background: var(--tint); }
.section--dark { background: var(--p900); color: #fff; }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark p, .section--dark li { color: rgba(255, 255, 255, 0.82); }
.section--dark a:not(.btn) { color: #fff; }
.section--dark .eyebrow { background: rgba(255, 255, 255, 0.1); color: #fff; }
.section--dark em { color: var(--p300); }

.grid { display: grid; gap: clamp(16px, 2.4vw, 28px); }
.grid-2, .grid-3, .grid-4 { display: grid; gap: clamp(16px, 2.4vw, 28px); grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-2, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 640px) and (max-width: 899px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.split { display: grid; gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--wide-text { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .split--wide-media { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .split--reverse > :first-child { order: 2; }
  .split--top { align-items: start; }
}
.stack > * + * { margin-top: var(--stack, 1.1rem); }
.cluster { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* 4 · Type --------------------------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--font); font-weight: 800; line-height: 1.12; letter-spacing: -0.025em; word-spacing: 0.03em; margin: 0; color: var(--ink); text-wrap: balance; }
h1 { font-size: clamp(2.35rem, 1.3rem + 4.2vw, 4.1rem); letter-spacing: -0.035em; line-height: 1.05; }
h2 { font-size: clamp(1.8rem, 1.25rem + 2.2vw, 2.75rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); line-height: 1.25; letter-spacing: -0.015em; font-weight: 700; }
h4 { font-size: 1.05rem; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; }
em { font-style: normal; color: var(--p600); }
p { margin: 0; text-wrap: pretty; }
strong { font-weight: 700; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin: 0 0 1rem; padding: 0.4em 0.95em;
  border-radius: 999px; background: var(--p100); color: var(--p700);
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0; line-height: 1.2;
}
.lede { font-size: clamp(1.1rem, 1.02rem + 0.4vw, 1.3rem); line-height: 1.6; color: var(--ink-2); max-width: 46ch; }
.prose { max-width: 66ch; }
.prose > * + * { margin-top: 1.1em; }
.prose h2, .prose h3 { margin-top: 1.8em; }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: 0.4em; }
.muted { color: var(--ink-3); }

.section-head { max-width: 40rem; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head p:not(.eyebrow) { margin-top: 0.9rem; color: var(--ink-2); font-size: 1.1rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lede { margin-inline: auto; }
.section--dark .section-head p:not(.eyebrow) { color: rgba(255, 255, 255, 0.8); }

/* 5 · Buttons ------------------------------------------------------------ */
.btn {
  --btn-bg: var(--p600); --btn-fg: #fff; --btn-bd: var(--p600);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  padding: 0.85em 1.55em; min-height: 48px;
  border-radius: 999px; border: 1.5px solid var(--btn-bd);
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 700; font-size: 0.98rem; line-height: 1.2; letter-spacing: -0.005em;
  text-decoration: none; text-align: center;
  transition: background-color var(--t-color), color var(--t-color), border-color var(--t-color), box-shadow var(--t-shadow), translate var(--t-lift);
}
.btn:hover { --btn-bg: var(--p700); --btn-bd: var(--p700); color: #fff; }
.btn--secondary { --btn-bg: #fff; --btn-fg: var(--p700); --btn-bd: var(--p200); }
.btn--secondary:hover { --btn-bg: var(--p100); --btn-bd: var(--p300); color: var(--p800); }
.btn--light { --btn-bg: #fff; --btn-fg: var(--p800); --btn-bd: #fff; }
.btn--light:hover { --btn-bg: var(--p100); --btn-bd: var(--p100); color: var(--p900); }
.btn--outline-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, 0.45); }
.btn--outline-light:hover { --btn-bg: rgba(255, 255, 255, 0.12); --btn-bd: #fff; color: #fff; }
/* Shadow + lift only where a real pointer hovers (it would stick after a tap) */
@media (hover: hover) {
  .btn:hover { box-shadow: 0 8px 22px rgba(76, 29, 149, 0.26); }
  .btn--light:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2); }
  .btn--secondary:hover, .btn--outline-light:hover { box-shadow: none; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn:hover { translate: 0 -1px; }
}
.btn:active { translate: none; box-shadow: none; transition-duration: 0.1s; }
.btn--sm { padding: 0.6em 1.2em; min-height: 40px; font-size: 0.92rem; }
.btn--lg { padding: 1em 1.9em; min-height: 56px; font-size: 1.05rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.6; cursor: progress; }
.btn .icon { width: 1.1em; height: 1.1em; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.link-arrow { position: relative; display: inline-flex; align-items: center; gap: 0.45em; font-weight: 700; text-decoration: none; color: var(--p600); transition: color var(--t-color); }
.link-arrow::after { content: ""; width: 1.1em; height: 1.1em; background: currentColor; -webkit-mask: url("../images/icons/arrow-right.svg") center / contain no-repeat; mask: url("../images/icons/arrow-right.svg") center / contain no-repeat; transition: transform 0.3s var(--ease); }
.link-arrow:hover, .card--link:hover .link-arrow { color: var(--p800); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .link-arrow:hover::after, .card--link:hover .link-arrow::after { transform: translateX(4px); }
}
.link-arrow::before { content: ""; position: absolute; inset: -12px -6px; }
.section--dark .link-arrow { color: #fff; }

/* 6 · Header ------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid transparent; transition: border-color 0.25s, box-shadow 0.25s; }
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 24px rgba(29, 11, 62, 0.06); }
.site-header__inner { display: flex; align-items: center; gap: 20px; height: var(--header-h); width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.brand { display: block; flex: none; line-height: 0; }
.brand img { height: 98px; width: auto; margin-block: -16px; }  /* logo art has transparent padding; crop it */

.site-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.site-nav a { padding: 0.55em 0.95em; border-radius: 999px; font-size: 0.95rem; font-weight: 600; text-decoration: none; color: var(--ink-2); transition: background-color var(--t-color), color var(--t-color); }
.site-nav a:hover { background: var(--p100); color: var(--p700); }
.site-nav a[aria-current="page"] { background: var(--p100); color: var(--p700); }
.site-header__actions { display: flex; align-items: center; gap: 8px; margin-left: 6px; }
.nav-toggle { display: none; width: 46px; height: 46px; padding: 0; border: 1.5px solid var(--line-strong); background: #fff; border-radius: 50%; align-items: center; justify-content: center; color: var(--ink); transition: border-color var(--t-color), background-color var(--t-color); }
.nav-toggle:hover { border-color: var(--p300); background: var(--tint); }
.nav-toggle .icon { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 1080px) {
  .site-header__actions { margin-left: auto; }
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: fixed; inset: var(--header-h) 0 0 0; z-index: 99;
    flex-direction: column; align-items: stretch; gap: 4px; margin: 0;
    padding: 16px var(--gutter) 40px;
    background: #fff; border-top: 1px solid var(--line); overflow-y: auto;
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity 0.22s, transform 0.22s var(--ease), visibility 0s 0.22s;
  }
  .site-nav.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .site-nav a { padding: 0.9em 1em; border-radius: var(--r); font-size: 1.15rem; font-weight: 700; color: var(--ink); }
}
body.nav-open { overflow: hidden; }

/* 7 · Footer ------------------------------------------------------------- */
.site-footer { margin-top: auto; background: var(--p900); color: rgba(255, 255, 255, 0.78); padding-top: clamp(48px, 6vw, 80px); font-size: 0.98rem; }
/* underline is always there but transparent, so it can fade in on hover */
.site-footer a:not(.btn) { color: rgba(255, 255, 255, 0.88); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.25em; transition: color var(--t-color), text-decoration-color var(--t-color); }
.site-footer a:not(.btn):hover { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.6); }
.site-footer__grid { display: grid; gap: 36px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } .site-footer__col:last-child { grid-column: 2 / 4; } }
@media (min-width: 1000px) { .site-footer__grid { grid-template-columns: 1.6fr 0.9fr 1.3fr 1fr; } .site-footer__col:last-child { grid-column: auto; } }
.site-footer__logo { width: 150px; height: auto; margin: -14px 0 6px -6px; filter: brightness(0) invert(1); opacity: 0.95; }
.site-footer__about p { max-width: 34ch; margin-bottom: 22px; }
.site-footer h2 { margin: 0 0 14px; font-family: var(--font); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 32px; }
.site-footer address { margin-bottom: 10px; line-height: 1.6; }
.site-footer .social a { gap: 10px; }
.site-footer .social img { filter: brightness(0) invert(1); opacity: 0.85; transition: opacity var(--t-color); }
.site-footer .social a:hover img { opacity: 1; }
.site-footer__base { display: flex; flex-wrap: wrap; gap: 8px 32px; justify-content: space-between; margin-top: clamp(36px, 5vw, 56px); padding-block: 24px; border-top: 1px solid var(--line-inv); font-size: 0.86rem; color: rgba(255, 255, 255, 0.6); }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 8px 32px; justify-content: space-between; margin-top: -8px; padding-bottom: 24px; font-size: 0.8rem; color: rgba(255, 255, 255, 0.55); }
.site-footer__legal p { margin: 0; }
.site-footer__legal nav { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.site-footer__legal nav a:not(.btn) { text-decoration-color: rgba(255, 255, 255, 0.35); }
@media (max-width: 419px) { .site-footer__legal nav > span { flex-basis: 100%; } }

/* 8 · Components --------------------------------------------------------- */

/* Inner-page header: lavender band, copy left, optional photo right */
.page-hero { position: relative; overflow: hidden; background: var(--tint); padding-block: clamp(44px, 6vw, 88px); isolation: isolate; }
.page-hero::before { content: ""; position: absolute; z-index: -1; right: -6%; top: -46%; width: min(560px, 60vw); aspect-ratio: 1; border-radius: 50%; background: var(--p100); }
.page-hero::after { content: ""; position: absolute; z-index: -1; right: 14%; bottom: -30%; width: min(220px, 30vw); aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--p200); }
.page-hero__grid { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (min-width: 900px) { .page-hero__grid--media { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.page-hero h1 { max-width: 16ch; font-size: clamp(2.2rem, 1.3rem + 3.6vw, 3.6rem); }
.page-hero .lede { margin-top: 1.25rem; }
.page-hero .btn-row { margin-top: 1.75rem; }

/* Cards */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px, 3vw, 32px); box-shadow: var(--sh-1); }
.card--tint { background: var(--tint); border-color: transparent; box-shadow: none; }
.card--dark { background: var(--p800); border-color: transparent; color: #fff; box-shadow: none; }
.card--dark h3, .card--dark h4 { color: #fff; }
.card--dark p { color: rgba(255, 255, 255, 0.82); }
.card--flat { box-shadow: none; }
/* Link cards fade their shadow in and out. The lift uses `translate` so it never
   fights the scroll-reveal `transform` (see the .reveal rules further down). */
.card--link { display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: box-shadow var(--t-shadow), border-color var(--t-shadow), translate var(--t-lift); }
.card--link:hover { color: inherit; }
.card--link:focus-visible { box-shadow: var(--sh-2); border-color: var(--p200); }
@media (hover: hover) {
  .card--link:hover { box-shadow: var(--sh-2); border-color: var(--p200); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card--link:hover { translate: 0 -3px; }
}
.card__media { margin: calc(clamp(22px, 3vw, 32px) * -1) calc(clamp(22px, 3vw, 32px) * -1) 1.25rem; border-radius: var(--r-lg) var(--r-lg) 0 0; overflow: hidden; aspect-ratio: 16 / 10; background: var(--tint); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card h3 + p, .card h4 + p { margin-top: 0.6rem; color: var(--ink-2); }
.card .link-arrow, .card .btn-row { margin-top: auto; }
.card > * + .link-arrow { margin-top: 1.1rem; }
.card--link .link-arrow { pointer-events: none; }
/* Cards in a row share a height: pin their arrow links to the bottom so they line up */
@supports selector(:has(*)) {
  .card--link > :has(+ .link-arrow) { margin-bottom: 1.1rem; }
  .card--link > * + .link-arrow { margin-top: auto; }
}

.icon-chip { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: 1.1rem; border-radius: 14px; background: var(--p100); color: var(--p600); }
.icon-chip .icon { width: 24px; height: 24px; }
.section--dark .icon-chip, .card--dark .icon-chip { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* Photos */
.photo { margin: 0; }
.photo img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--sh-1); background: var(--tint); }
.photo figcaption { margin-top: 10px; font-size: 0.86rem; color: var(--ink-3); }
.photo--tall img { aspect-ratio: 4 / 5; object-fit: cover; }
.photo--wide img { aspect-ratio: 3 / 2; object-fit: cover; }
.photo--round img { border-radius: var(--r-xl); }
/* Explicit arch radii: "999px" top corners forced the browser to scale every corner
   down, which left the bottom corners almost square. 50% / 40% = a half circle on 4:5. */
.photo--arch img { border-radius: 50% 50% var(--r-lg) var(--r-lg) / 40% 40% var(--r-lg) var(--r-lg); aspect-ratio: 4 / 5; object-fit: cover; }
.photo--small { max-width: 380px; }  /* some source photos are small; don't upscale far */

/* Big numbers */
.stats { display: grid; gap: clamp(14px, 2vw, 24px); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.stat { padding: clamp(22px, 3vw, 30px); border-radius: var(--r-lg); background: var(--tint); }
.stat__value { font-size: clamp(2.3rem, 1.7rem + 2.6vw, 3.4rem); font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--p600); font-variant-numeric: tabular-nums; }
.stat__label { margin-top: 0.7rem; color: var(--ink-2); font-size: 0.98rem; line-height: 1.5; }
.section--tint .stat { background: #fff; box-shadow: var(--sh-1); }
.section--dark .stat { background: rgba(255, 255, 255, 0.07); }
.section--dark .stat__value { color: #fff; }
.section--dark .stat__label { color: rgba(255, 255, 255, 0.78); }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.32em 0.8em; border-radius: 999px; background: var(--p100); color: var(--p700); font-size: 0.78rem; font-weight: 700; line-height: 1.2; }
.badge--amber { background: #fdf0d2; color: var(--amber-ink); }
.badge--success { background: #dff3e8; color: var(--success); }
.badge--muted { background: var(--tint-2); color: var(--ink-2); }

/* Event card */
.event-card { display: flex; flex-direction: column; gap: 1.1rem; }
.event-card__head { display: flex; gap: 16px; align-items: flex-start; }
.date-tile { flex: none; display: grid; place-items: center; width: 68px; padding: 10px 0 12px; border-radius: 16px; background: var(--p600); color: #fff; text-align: center; line-height: 1; }
.date-tile__month { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85; }
.date-tile__day { margin-top: 4px; font-size: 1.9rem; font-weight: 800; letter-spacing: -0.03em; }
.date-tile--muted { background: var(--tint-2); color: var(--ink-2); }
.event-card__meta { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; color: var(--ink-2); font-size: 0.97rem; }
.event-card__meta li { display: flex; gap: 10px; align-items: flex-start; }
.event-card__meta .icon { margin-top: 0.2em; color: var(--p600); }

/* Fact rows (When / Where / Cost) */
.facts { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.fact { display: flex; gap: 14px; align-items: flex-start; }
.fact .icon-chip { width: 40px; height: 40px; margin: 0; border-radius: 12px; }
.fact .icon-chip .icon { width: 20px; height: 20px; }
.fact__label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.fact__value { color: var(--ink); font-weight: 600; }

/* Checklists */
.checklist { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; }
.checklist .icon { flex: none; margin-top: 0.25em; padding: 3px; width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--p100); color: var(--p600); stroke-width: 2.5; }
.section--dark .checklist .icon { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* Video embeds */
.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: var(--p900); box-shadow: var(--sh-2); }
.video iframe, .video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: var(--p800); display: grid; place-items: center; overflow: hidden; }
.video__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.video__btn { position: relative; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: #fff; color: var(--p600); box-shadow: 0 10px 30px rgba(29, 11, 62, 0.35); transition: transform var(--t-lift), color var(--t-color); }
.video__btn .icon { width: 30px; height: 30px; margin-left: 4px; }
.video__play:hover .video__btn { color: var(--p800); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .video__play:hover .video__btn { transform: scale(1.06); }
  .video__play:hover .video__poster { transform: scale(1.03); }
}
.section--dark .video { background: var(--p800); box-shadow: none; }  /* dark-on-dark shadow reads as a smudge */

/* Photo grid with lightbox */
.gallery { columns: 2; column-gap: 14px; }
@media (min-width: 720px) { .gallery { columns: 3; } }
@media (min-width: 1040px) { .gallery { columns: 4; } }
.gallery > * { break-inside: avoid; margin: 0 0 14px; }
.gallery button { display: block; width: 100%; padding: 0; border: 0; background: none; border-radius: var(--r); overflow: hidden; }
.gallery img { width: 100%; transition: transform 0.5s var(--ease); background: var(--tint); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .gallery button:hover img { transform: scale(1.03); }
}

/* Closing call-to-action card (shared partial) */
.cta-wrap { padding-block: clamp(40px, 6vw, 80px) clamp(48px, 7vw, 96px); }
/* After a plain white section the section's own bottom padding is gap enough */
.section:not(.section--tint):not(.section--dark) + .cta-wrap { padding-top: 0; }
.cta { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 28px; align-items: center; padding: clamp(32px, 5vw, 64px); border-radius: var(--r-xl); background: var(--p700); color: #fff; }
.cta::before { content: ""; position: absolute; z-index: -1; right: -90px; top: -110px; width: 380px; aspect-ratio: 1; border-radius: 50%; background: var(--p600); }
.cta::after { content: ""; position: absolute; z-index: -1; right: 120px; bottom: -120px; width: 220px; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.16); }
.cta h2 { color: #fff; max-width: 18ch; }
.cta p { margin-top: 0.9rem; max-width: 46ch; color: rgba(255, 255, 255, 0.86); font-size: 1.1rem; }
@media (min-width: 860px) { .cta { grid-template-columns: minmax(0, 1fr) auto; } }
/* Phones: stacked CTA buttons share one width instead of two ragged pills */
@media (max-width: 559px) { .cta .btn-row .btn { flex: 1 1 100%; } }
/* Small phones: trim button side padding so labels stay on one line */
@media (max-width: 400px) {
  .cta { padding-inline: 24px; }
  .section .btn, .cta .btn { padding-inline: 1.15em; }
  .section .btn--lg, .cta .btn--lg { font-size: 1rem; }
}

/* Scroll reveal (only when JS has flagged the document) */
/* The stagger delay rides on the opacity/transform transitions only (via --reveal-delay),
   so hover fades on revealed elements start immediately. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease) var(--reveal-delay, 0s), transform 0.6s var(--ease) var(--reveal-delay, 0s); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal[data-delay="1"] { --reveal-delay: 0.07s; }
.js .reveal[data-delay="2"] { --reveal-delay: 0.14s; }
.js .reveal[data-delay="3"] { --reveal-delay: 0.21s; }
/* First-screen content is never faded in: it must paint immediately (LCP) */
.js .page-hero .reveal, .js .hero .reveal { opacity: 1; transform: none; transition: none; }
/* Revealed link cards: keep the reveal AND the hover fade (a plain .card--link
   transition would otherwise lose to `.js .reveal` and the shadow would snap in) */
.js .card--link.reveal { transition: opacity 0.6s var(--ease) var(--reveal-delay, 0s), transform 0.6s var(--ease) var(--reveal-delay, 0s), box-shadow var(--t-shadow), border-color var(--t-shadow), translate var(--t-lift); }

/* Event date states (toggled by site.js once an event date has passed) */
[data-event-date]:not(.is-past) [data-past] { display: none !important; }
[data-event-date].is-past [data-upcoming] { display: none !important; }

/* 9 · Home --------------------------------------------------------------- */
.hero { position: relative; background: var(--tint); }
/* Where the ribbon forms in the hero (see ribbon-3d.js: --rb-x/--rb-y centre and
   --rb-h height, as fractions of this box). With the scrolling ribbon this box
   only marks the spot; otherwise it holds the ribbon's own canvas. */
.hero__ribbon { position: absolute; inset: 0; z-index: -1; pointer-events: none; --rb-x: 0.735; --rb-y: 0.5; --rb-h: 0.82; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 48px; align-items: center; min-height: clamp(560px, calc(100svh - var(--header-h) - 16px), 720px); padding-block: clamp(28px, 3.5vw, 48px); }
.hero__copy { max-width: 640px; position: relative; }
.hero__copy h1 { margin-top: 1rem; font-size: clamp(2.4rem, 1.3rem + 3.3vw, 3.6rem); }
.hero__copy .lede { margin-top: 1.1rem; max-width: 46ch; }
.hero__copy .btn-row { margin-top: 1.6rem; }
.hero__note { margin-top: 0.9rem; display: flex; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--ink-3); }
.hero__note .icon { color: var(--p600); }

/* Key numbers under the buttons */
.hero__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 1.6rem; padding-top: 1.1rem; border-top: 1px solid var(--line); max-width: 600px; }
.hero__stats li { display: grid; gap: 4px; padding-right: 18px; }
.hero__stats li + li { padding-left: 18px; border-left: 1px solid var(--line); }
.hero__stats strong { font-size: clamp(1.4rem, 1.15rem + 0.8vw, 1.75rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: var(--p700); font-variant-numeric: tabular-nums; }
.hero__stats span { font-size: 0.86rem; line-height: 1.4; color: var(--ink-2); }

@media (max-width: 999px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-bottom: clamp(32px, 6vw, 56px); }
  .hero__copy { max-width: none; }
}
/* Tablets: the ribbon rises beside the buttons and numbers */
@media (min-width: 700px) and (max-width: 999px) {
  .hero__copy .lede { max-width: min(460px, 62vw); }
  .hero__stats { max-width: min(470px, 62vw); }
  .hero__ribbon { inset: 34% 0 -6% 0; --rb-x: 0.84; --rb-y: 0.5; --rb-h: 0.78; }
}
/* Phones: the ribbon's loop sits beside the buttons (running off the right edge a
   little) and its crossing and tails tuck behind the card of numbers. */
@media (max-width: 699px) {
  .hero__grid { row-gap: 0; }
  .hero__copy { display: contents; }
  .hero__copy > * { grid-column: 1; }
  .hero__copy > .eyebrow { grid-row: 1; justify-self: start; }
  .hero__copy > h1 { grid-row: 2; }
  .hero__copy > .lede { grid-row: 3; }
  .hero__copy > .btn-row { grid-row: 4; }
  .hero__copy > .hero__note { grid-row: 5; max-width: max(12.5em, calc(100% - 200px)); }
  .hero__ribbon { position: relative; inset: auto; grid-row: 4 / 7; grid-column: 1; align-self: start; height: 470px; margin: -14px calc(var(--gutter) * -1) 0; --rb-x: 0.8; --rb-y: 0.5; --rb-h: 0.86; --rb-lift: 0.1; }
  .hero__stats { grid-row: 6; position: relative; margin-top: 30px; padding: 18px 16px; border: 1px solid rgba(255, 255, 255, 0.8); border-radius: var(--r-lg); background: rgba(255, 255, 255, 0.8); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); box-shadow: var(--sh-2); }
  .hero__stats li { padding-right: 10px; align-content: start; }
  .hero__stats li + li { padding-left: 10px; }
  .hero__stats strong { font-size: 1.3rem; }
  .hero__stats span { font-size: 0.76rem; }
}
@media (max-width: 359px) { .hero__ribbon { height: 430px; --rb-x: 0.84; } .hero__stats span { font-size: 0.72rem; } }
/* Narrow phones: the $122,000 needs the widest of the three columns */
@media (max-width: 380px) {
  .hero__stats { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr) minmax(0, 0.85fr); padding-inline: 12px; }
  .hero__stats strong { font-size: 1.14rem; letter-spacing: -0.035em; }
  .hero__stats li { padding-right: 8px; }
  .hero__stats li + li { padding-left: 8px; }
}
/* Short phones: tighter type, so the ribbon's loop beside the buttons is in view on load */
@media (max-width: 699px) and (max-height: 700px) {
  .hero__grid { padding-top: 20px; }
  .hero__copy h1 { margin-top: 0.7rem; font-size: 2.1rem; }
  .hero__copy .lede { margin-top: 0.8rem; font-size: 1rem; line-height: 1.55; }
  .hero__copy .btn-row { margin-top: 1.1rem; }
}
/* Short laptop windows: the ribbon moves up and shrinks a little so its tails end above
   the fold (every ribbon shape down the page follows its size, so the heart and the
   closing ribbon fit the window below the header too) */
@media (min-width: 1000px) and (max-height: 739px) { .hero__ribbon { --rb-y: 0.41; --rb-h: 0.76; } }
/* ...and the copy tightens so the numbers and the note stay above the fold */
@media (min-width: 1000px) and (max-height: 829px) {
  .hero__grid { padding-block: 18px; }
  .hero__copy h1 { margin-top: 0.7rem; font-size: clamp(2.3rem, 1rem + 2.9vw, 3.1rem); }
  .hero__copy .lede { margin-top: 0.8rem; }
  .hero__copy .btn-row { margin-top: 1.2rem; }
  .hero__stats { margin-top: 1.2rem; padding-top: 0.85rem; }
  .hero__note { margin-top: 0.7rem; }
}
@media (min-width: 1000px) and (min-height: 740px) and (max-height: 799px) { .hero__ribbon { --rb-y: 0.45; --rb-h: 0.8; } }
/* Phones held sideways: the ribbon forms beside the heading, in the first screen */
@media (min-width: 700px) and (max-width: 999px) and (max-height: 500px) {
  .hero__ribbon { inset: 0 0 auto 0; height: calc(100svh - var(--header-h)); --rb-x: 0.87; --rb-y: 0.5; --rb-h: 0.88; }
}

/* Fundraising progress. Without the scrolling ribbon this is a plain bar. */
.home-progress { padding-block: clamp(40px, 6vw, 80px); }
.home-progress__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; }
.home-progress__raised { margin: 6px 0 0; font-size: clamp(2.8rem, 2rem + 3.2vw, 4.4rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.home-progress__of { margin: 10px 0 0; color: var(--ink-2); font-size: 1.05rem; }
.home-progress__of strong { color: var(--ink); }
.home-progress__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.ribbon-track { position: relative; display: flow-root; margin-top: clamp(24px, 3vw, 36px); --track-h: 44px; }
.meter__track { position: relative; height: 12px; margin-block: calc((var(--track-h) - 12px) / 2); border-radius: 99px; background: var(--p100); overflow: hidden; }
.meter__fill { position: absolute; inset: 0; border-radius: 99px; background: var(--p600); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease); }
.meter__pin { position: absolute; top: calc((var(--track-h) - 12px) / 2 - 6px); left: 0; transform: translate(-50%, -100%); line-height: 1.2; transition: left 1.6s var(--ease); white-space: nowrap; }
.meter__pct { font-weight: 800; color: var(--p700); font-size: 0.95rem; }
.ribbon-track__scale { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; min-height: 1.5em; font-size: 0.86rem; color: var(--ink-3); }
.meter__status { flex: 1; text-align: center; opacity: 0; }
[data-meter].no-goal .meter__track, [data-meter].no-goal .meter__pin { visibility: hidden; }
[data-meter].is-error .meter__status { opacity: 1; }
@media (max-width: 699px) { .home-progress__head { align-items: flex-start; } }
/* With the scrolling ribbon the ribbon itself is the fill: the track becomes a dashed
   outline one ribbon wide, and the ribbon (on the layer below the content) slides into
   it from the window's left edge, its cut end coming to rest at the share raised;
   past that point it turns down out of the track (ribbon-3d.js, homePath). The outline
   and its scale show only while the ribbon is in the bar (.rb-in), the % label, over
   the fill point (--fill-x), only while it fills the bar to exactly the share (.rb-at):
   an empty or half-slid bar never shows a wrong amount.
   The top padding makes room for the ribbon's run from the hero to the left edge, the
   bottom padding (with .home-why's top padding) for its run under the bar. */
html.ribbon-scroll .home-progress { padding-top: calc(var(--rw, 60px) * 1.55); padding-bottom: calc(var(--rw, 60px) * 0.5); }
@media (min-width: 700px) and (max-width: 999px) { html.ribbon-scroll .home-progress { padding-top: calc(var(--rw, 60px) * 1.9); } }   /* the tablet hero ribbon sits lower */
html.ribbon-scroll .ribbon-track { --track-h: calc(var(--rw, 60px) + 16px); margin-top: clamp(34px, 3.4vw, 44px); }
/* (the right end leaves room in the window for the ribbon's turn out of a full bar) */
html.ribbon-scroll .meter__track, html.ribbon-scroll .ribbon-track__scale { margin-right: max(0px, calc(var(--rw, 60px) * 1.7 - (100vw - 100%) / 2)); }
html.ribbon-scroll .meter__track { height: var(--track-h); margin-top: 0; margin-bottom: 0; overflow: visible; background: none; border: 2px dashed var(--p300); border-left: 0; border-radius: 0 14px 14px 0; }   /* open at the left, where the ribbon comes in */
html.ribbon-scroll .meter__fill { display: none; }
html.ribbon-scroll .meter__track, html.ribbon-scroll .ribbon-track__scale, html.ribbon-scroll .meter__pin { opacity: 0; transition: opacity 0.35s ease; }
html.ribbon-scroll [data-meter].rb-in .meter__track, html.ribbon-scroll [data-meter].rb-in .ribbon-track__scale, html.ribbon-scroll [data-meter].rb-at .meter__pin { opacity: 1; }
html.ribbon-scroll .meter__pin { top: auto; bottom: 100%; left: var(--fill-x, 0px) !important; transform: translate(-50%, -6px); }
html.ribbon-scroll .meter__pct { font-size: 1.05rem; }
/* the amount raised: in the empty track just past the fill point, or (no room there)
   in white on the ribbon, ending before its notched tip; shown with the % label */
.meter__amt { display: none; }
html.ribbon-scroll .meter__amt { display: block; position: absolute; top: calc(var(--track-h) / 2); left: var(--tip-x, calc(var(--fill-x, 0px) + var(--rw, 60px) * 0.7)); transform: translate(clamp(10px, calc(var(--rw, 60px) * 0.18), 16px), -50%); font-weight: 700; font-size: 1rem; line-height: 1.2; color: var(--p700); white-space: nowrap; font-variant-numeric: tabular-nums; pointer-events: none; opacity: 0; transition: opacity 0.35s ease; }
html.ribbon-scroll [data-meter].amt-in .meter__amt { left: var(--notch-x, calc(var(--fill-x, 0px) - var(--rw, 60px) * 0.3)); transform: translate(calc(-100% - clamp(10px, calc(var(--rw, 60px) * 0.18), 16px)), -50%); padding: 0.18em 0.65em; border-radius: 99px; background: rgba(33, 8, 74, 0.55); color: #fff; }
html.ribbon-scroll [data-meter].rb-at .meter__amt { opacity: 1; }
[data-meter].is-error .meter__amt, [data-meter].no-goal .meter__amt { visibility: hidden; }
html.ribbon-scroll .ribbon-track__scale { margin-top: 10px; }
/* no total to show: no bar, and the ribbon just flows through */
html.ribbon-scroll [data-meter].is-error .meter__track, html.ribbon-scroll [data-meter].is-error .ribbon-track__scale > span:not(.meter__status) { visibility: hidden; }
html.ribbon-scroll [data-meter].is-error .ribbon-track__scale { opacity: 1; }
/* room for the ribbon between the impact section and the video: under the $75,000 box,
   and (side by side, from 900px) for its turn down and round above the video */
html.ribbon-scroll .home-impact { padding-bottom: max(clamp(56px, 8vw, 104px), calc(var(--rw, 60px) * 1.7)); }
@media (min-width: 900px) { html.ribbon-scroll .home-video { padding-top: calc(clamp(56px, 8vw, 104px) + var(--rw, 60px) * 1.9); } }

/* Finale: the closing ribbon dead centre, between the heading (left) and the lede and
   buttons (right); under the text, centred, on phones and tablets. Without the scrolling
   ribbon the still image stands in for it. With it, the ribbon rises into its left
   tail from behind the footer (ribbon-3d.js, homePath). */
.home-finale { padding-block: clamp(36px, 4.2vw, 56px); }
.home-finale__inner { display: grid; grid-template-areas: "title" "side" "ribbon"; justify-items: center; align-items: center; text-align: center; }
.home-finale__title { grid-area: title; max-width: 16ch; font-size: clamp(2rem, 1.3rem + 2.8vw, 3.2rem); }
.home-finale__side { grid-area: side; }
.home-finale .lede { margin: 1rem auto 0; max-width: 40ch; }
.home-finale .btn-row { margin-top: 1.6rem; justify-content: center; }
.home-finale__ribbon { grid-area: ribbon; position: relative; width: min(100%, 420px); height: calc(var(--rbh, clamp(300px, 34vw, 420px)) * 0.9); margin-top: clamp(20px, 4vw, 32px); }
.home-finale__still { position: absolute; left: 50%; top: 50%; height: 120%; width: auto; max-width: none; transform: translate(-50%, -50%); pointer-events: none; }
html.ribbon-scroll .home-finale__still { display: none; }
.home-finale { overflow-x: clip; }   /* the fallback still is wider than its box on narrow screens */
/* (from 900px: three equal columns, so the ribbon stands dead centre with the heading and
   the text balanced either side of it) */
@media (min-width: 900px) {
  .home-finale__inner { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "title ribbon side"; column-gap: clamp(24px, 3vw, 48px); }
  .home-finale__title { justify-self: end; text-align: right; }
  .home-finale__side { justify-self: start; text-align: left; }
  .home-finale .lede { margin: 0; }
  .home-finale .btn-row { justify-content: flex-start; }
  .home-finale__ribbon { width: calc(var(--rbh, 480px) * 0.54); margin-top: 0; }
}
@media (min-width: 900px) and (max-width: 1199px) { .home-finale__title { font-size: clamp(2rem, 1rem + 2.6vw, 2.6rem); } }

/* With the scrolling ribbon, the ribbon runs between section backgrounds and
   content: backgrounds are painted below it, content above it. */
.home > section { position: relative; }
.home > section > .container { position: relative; z-index: 1; }
/* the hero's ribbon box measures against the full-width hero, so its container stays
   unpositioned and the copy itself is lifted above the ribbon */
.home > .hero > .container { position: static; }
.home .hero__copy > * { position: relative; z-index: 1; }
html:not(.ribbon-scroll) .home > .hero { isolation: isolate; }
html.ribbon-scroll .home > .hero, html.ribbon-scroll .home > .section--tint, html.ribbon-scroll .home > .section--dark { background: transparent; }
html.ribbon-scroll .home > .hero::before, html.ribbon-scroll .home > .section--tint::before, html.ribbon-scroll .home > .section--dark::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tint); }
html.ribbon-scroll .home > .section--dark::before { background: var(--p900); }
html.ribbon-scroll .site-footer { position: relative; z-index: 1; }
/* the page root paints the white; a body background would cover the section backgrounds above */
html.ribbon-scroll body { background: transparent; }
.ribbon-page { position: absolute; left: 0; top: 0; width: 100%; z-index: 0; pointer-events: none; will-change: transform; }
.ribbon-page canvas { display: block; width: 100%; height: 100%; }
.ribbon-page--front { z-index: 3; }

/* 10 · Dialogs ----------------------------------------------------------- */
.dialog { padding: 0; border: 0; background: transparent; color: var(--ink); width: min(660px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: visible; margin: auto; }
.dialog::backdrop { background: rgba(29, 11, 62, 0.6); }
.dialog[open] { animation: dialog-in 0.28s var(--ease); }
.dialog[open]::backdrop { animation: fade-in 0.28s ease; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.dialog__panel { position: relative; max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; padding: clamp(22px, 3.5vw, 32px); background: #fff; border-radius: var(--r-xl); box-shadow: var(--sh-2); }
.dialog__close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--tint); color: var(--ink-2); transition: background-color var(--t-color), color var(--t-color); }
.dialog__close:hover { background: var(--p100); color: var(--ink); }

.donate h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.9rem); padding-right: 40px; }
.donate__intro { margin-top: 10px; color: var(--ink-2); font-size: 0.97rem; }
.donate__form { margin-top: 18px; display: grid; gap: 14px; }
.donate__amounts { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
.donate__amounts legend, .field__label { padding: 0; font-size: 0.85rem; font-weight: 700; color: var(--ink); }
.field__label em { font-style: normal; font-weight: 500; color: var(--ink-3); }
.donate__quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.donate__quick .field--amount { grid-column: 1 / -1; }
@media (min-width: 560px) {
  .donate__quick { grid-template-columns: repeat(4, minmax(0, 0.8fr)) minmax(0, 1.4fr); }
  .donate__quick .field--amount { grid-column: auto; }
}
.donate__quick .chip, .donate__quick .field__amount { min-height: 48px; }
.chip { padding: 0.65em 0.5em; border-radius: 12px; border: 1.5px solid var(--line-strong); background: #fff; font-weight: 700; transition: border-color var(--t-color), background-color var(--t-color), color var(--t-color); }
.chip:hover { border-color: var(--p600); }
.chip.is-active { background: var(--p600); border-color: var(--p600); color: #fff; }
.field { display: grid; gap: 6px; }
.field input, .field textarea { width: 100%; padding: 0.68em 0.9em; border: 1.5px solid var(--line-strong); border-radius: 12px; background: #fff; transition: border-color var(--t-color), box-shadow var(--t-color); }
.field textarea { resize: vertical; min-height: 56px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--p600); box-shadow: 0 0 0 4px var(--p100); }
.field input:disabled { background: var(--tint); color: var(--ink-3); }
.field__amount { display: flex; align-items: center; gap: 8px; padding-left: 0.9em; border: 1.5px solid var(--line-strong); border-radius: 12px; background: #fff; font-weight: 700; transition: border-color var(--t-color), box-shadow var(--t-color); }
.field__amount:focus-within { border-color: var(--p600); box-shadow: 0 0 0 4px var(--p100); }
.field__amount input { border: 0; box-shadow: none !important; padding-left: 0; }
.donate__row { display: grid; gap: 12px; }
@media (min-width: 520px) { .donate__row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 700px) { .donate__row { grid-template-columns: 0.9fr 1.25fr 0.95fr; } }
@media (min-width: 520px) and (max-width: 699px) { .donate__row > :last-child { grid-column: 1 / -1; } }
/* fixed size: long notes scroll inside the box instead of resizing the dialog */
.donate .field textarea { min-height: 0; height: calc(3 * 1.45em + 1.36em + 3px); resize: none; line-height: 1.45; overflow-y: auto; }
/* The checkout button is pinned to the bottom of the panel, so it is always
   visible, even on short screens where the form has to scroll. */
.donate__footer { position: sticky; bottom: calc(-1 * clamp(22px, 3.5vw, 32px)); z-index: 1; margin: 4px calc(-1 * clamp(22px, 3.5vw, 32px)) calc(-1 * clamp(22px, 3.5vw, 32px)); padding: 14px clamp(22px, 3.5vw, 32px) clamp(22px, 3.5vw, 32px); background: #fff; display: grid; gap: 10px; }
.dialog__panel.is-scrollable .donate__footer { box-shadow: 0 -10px 20px -14px rgba(29, 11, 62, 0.3); }
.donate__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.donate__actions .btn { flex: 1 1 260px; max-width: 100%; }
@media (max-width: 519px) { .donate__actions .btn { flex-basis: 100%; } }
.check { display: flex; align-items: center; gap: 10px; font-size: 0.94rem; color: var(--ink-2); }
.check input { width: 18px; height: 18px; accent-color: var(--p600); }
.donate__msg { min-height: 0; font-size: 0.92rem; }
.donate__msg:empty { display: none; }
.donate__msg.is-error { color: var(--danger); }
.donate__msg.is-success { color: var(--success); }
.donate__thanks { text-align: center; padding-block: 12px; display: grid; justify-items: center; gap: 14px; }
.donate__thanks p { color: var(--ink-2); max-width: 36ch; }
.donate__check { color: var(--p600); }

.lightbox { width: min(1100px, calc(100vw - 24px)); }
.lightbox::backdrop { background: rgba(14, 8, 26, 0.9); }
.lightbox__figure { margin: 0; text-align: center; }
.lightbox__figure img { max-height: calc(100dvh - 120px); width: auto; margin-inline: auto; border-radius: var(--r); }
.lightbox__figure figcaption { margin-top: 12px; color: rgba(255, 255, 255, 0.88); font-size: 0.95rem; }
.lightbox__btn { position: fixed; top: 50%; width: 48px; height: 48px; margin-top: -24px; display: grid; place-items: center; border: 1px solid var(--line-inv); border-radius: 50%; background: rgba(29, 11, 62, 0.6); color: #fff; font-size: 1.4rem; line-height: 1; transition: background-color var(--t-color), color var(--t-color); }
.lightbox__btn:hover { background: #fff; color: var(--p900); }
.lightbox__btn--prev { left: 16px; }
.lightbox__btn--next { right: 16px; }
.lightbox__close { position: fixed; top: 16px; right: 16px; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line-inv); border-radius: 50%; background: rgba(29, 11, 62, 0.6); color: #fff; transition: background-color var(--t-color), color var(--t-color); }
.lightbox__close:hover { background: #fff; color: var(--p900); }

/* 11 · Utilities --------------------------------------------------------- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.text-center { text-align: center; }
.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2.5rem; }
.no-scroll { overflow: hidden; }

/* Touch: keep hit areas >= 44px */
@media (pointer: coarse), (max-width: 960px) {
  .btn--sm { min-height: 44px; }
  .site-footer li a { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  /* No movement, but keep the short colour and shadow fades on interactive things
     (hover lifts/scales are already limited to prefers-reduced-motion: no-preference) */
  a, button, .btn, .card--link, .chip, .field input, .field textarea, .field__amount {
    transition-property: color, background-color, border-color, box-shadow, text-decoration-color, opacity !important;
    transition-duration: 0.2s !important;
    transition-delay: 0s !important;
  }
  .site-footer .social img { transition-duration: 0.2s !important; }
}

@media print {
  .site-header, .site-footer, .dialog, .cta-wrap { display: none !important; }
  body { background: #fff; }
}

.nowrap { white-space: nowrap; }

/* Page-to-page navigation: a short cross-fade in browsers that support
   cross-document view transitions; the header stays put. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.25s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }