/* ============================================================
   All Ears: shared styles
   Brand palette (taken from the CK24 badge logo):
   --brand  #ED1C24  signal red   (accent, graphics, CTAs)
   --black  #0B0B0C  near-black   (grounding)
   --white  #FFFFFF  white        (space, clarity)

   Theming: every surface/text colour is a semantic token,
   redefined under [data-theme="dark"]. The brand red is
   constant across both themes.
   ============================================================ */

:root {
  /* --- brand constants --- */
  --brand: #ED1C24;
  --brand-strong: #C8102E;
  --brand-soft: #FF6B70;

  /* --- light theme (default) --- */
  --bg: #FFFFFF;
  --fg: #0B0B0C;
  --muted: #5C5C64;
  --surface: #FFFFFF;
  --surface-2: #F5F4F2;
  --line: #E4E3E0;

  /* accent used for TEXT on the current background (contrast-safe) */
  --accent-text: var(--brand-strong);

  /* inverted bands (hero, dark sections, footer) */
  --band-bg: #0B0B0C;
  --band-fg: #FFFFFF;
  --band-muted: #B4B4BC;
  --band-surface: rgba(255, 255, 255, 0.05);
  --band-line: rgba(255, 255, 255, 0.12);

  --radius: 14px;
  --max: 1120px;
  --display: "Bricolage Grotesque", Georgia, serif;
  --body: "Figtree", -apple-system, "Segoe UI", sans-serif;
}

[data-theme="dark"] {
  --bg: #0B0B0C;
  --fg: #F4F4F6;
  --muted: #A2A2AB;
  --surface: #16161A;
  --surface-2: #121216;
  --line: #2A2A31;

  --accent-text: var(--brand-soft);

  /* bands lift slightly off the page so they stay legible */
  --band-bg: #16161A;
  --band-fg: #F4F4F6;
  --band-muted: #A2A2AB;
  --band-surface: rgba(255, 255, 255, 0.06);
  --band-line: rgba(255, 255, 255, 0.14);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Skip link: off-screen until focused, so keyboard users can jump past the
   nav without it appearing for everyone else. */
/* fixed, not absolute: absolute anchors to the document, so once the page is
   scrolled the link stays off-screen above and never reveals on focus. */
.skip-link {
  position: fixed;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 100;
  background: var(--brand-strong);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 12px 20px;
  border-radius: 0 0 10px 10px;
  text-decoration: none;
  transition: transform 0.15s ease;
}

.skip-link:focus {
  transform: translate(-50%, 0);
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  transition: background 0.25s ease, color 0.25s ease;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

.wrap {
  width: min(var(--max), calc(100% - 48px));
  margin-inline: auto;
}

/* ---------- typography ---------- */

h1, h2, h3 {
  font-family: var(--display);
  line-height: 1.08;
  letter-spacing: -0.015em;
  font-weight: 700;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 6.5vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
h3 { font-size: 1.25rem; line-height: 1.3; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--brand);
  border-radius: 2px;
}

.lede {
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  color: var(--muted);
  max-width: 58ch;
}

.on-dark { color: var(--band-fg); }
.on-dark .lede { color: var(--band-muted); }
.on-dark .eyebrow { color: var(--brand-soft); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--body);
  font-weight: 700;
  font-size: 1rem;
  padding: 15px 28px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }

/* primary brand button: red with white text (kept from the logo) */
.btn-gold { background: var(--brand); color: #FFFFFF; }
.btn-gold:hover { background: #FF2A33; }

.btn-ghost { border-color: currentColor; background: transparent; }

.btn-ink { background: var(--fg); color: var(--bg); }
.btn-ink:hover { background: var(--brand); color: #FFFFFF; }

/* on the red CTA band, the button should be black/white not red */
.cta-band .btn-ink { background: #0B0B0C; color: #FFFFFF; }
.cta-band .btn-ink:hover { background: #FFFFFF; color: #0B0B0C; }

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
}

.brand svg { display: block; }

/* the CK24 badge logo */
.brand-mark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  flex: none;
}

.footer-brand .brand-mark { width: 36px; height: 36px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin-left: auto;
  margin-right: 22px;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-links a:not(.btn) {
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--muted);
  transition: color 0.15s ease;
}

.nav-links a:not(.btn):hover,
.nav-links a[aria-current="page"] { color: var(--fg); }

.nav-links a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--brand);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

.nav-links .btn { padding: 10px 22px; font-size: 0.9rem; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2.5px;
  background: var(--fg);
  border-radius: 2px;
  margin: 5px 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ---------- theme switcher ---------- */

.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--fg);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}

.theme-toggle:hover {
  border-color: var(--brand);
  transform: translateY(-1px);
}

.theme-toggle:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* show sun in dark mode, moon in light mode */
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ---------- hero ---------- */

.hero {
  background: var(--band-bg);
  color: var(--band-fg);
  padding: clamp(72px, 12vw, 140px) 0 0;
  overflow: hidden;
}

.hero-inner { max-width: 800px; }

.hero .lede { margin-top: 22px; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

.hero-wave {
  margin-top: clamp(48px, 8vw, 90px);
  display: block;
  width: 100%;
  height: auto;
}

.hero-wave path { stroke: var(--brand); }

/* subtle page-hero variant for inner pages */
.page-hero {
  background: var(--band-bg);
  color: var(--band-fg);
  padding: clamp(56px, 9vw, 100px) 0 clamp(48px, 7vw, 80px);
}

.page-hero .lede { margin-top: 18px; }

/* ---------- waveform signature ---------- */

.wave-divider {
  display: block;
  width: 100%;
  height: 60px;
  color: var(--brand);
}

@media (prefers-reduced-motion: no-preference) {
  .wave-animated path {
    stroke-dasharray: 12 6;
    animation: wave-flow 30s linear infinite;
  }
  @keyframes wave-flow {
    to { stroke-dashoffset: -1000; }
  }
}

/* ---------- sections ---------- */

.section { padding: clamp(64px, 9vw, 110px) 0; }
.section-dark { background: var(--band-bg); color: var(--band-fg); }
.section-tint { background: var(--surface-2); }

.section-head { max-width: 640px; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head .lede { margin-top: 14px; }

/* ---------- cards ---------- */

.grid {
  display: grid;
  gap: 24px;
}

.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px;
}

.card h3 { margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 0.98rem; }

.card .card-num {
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--accent-text);
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 14px;
}

.section-dark .card {
  background: var(--band-surface);
  border-color: var(--band-line);
}

.section-dark .card p { color: var(--band-muted); }
.section-dark .card .card-num { color: var(--brand-soft); }

/* ---------- giving blocks & monthly tiers ---------- */

.give-block { margin-top: clamp(40px, 6vw, 64px); }

.give-title {
  font-size: clamp(1.4rem, 2.6vw, 1.75rem);
  margin-bottom: 10px;
}

.give-intro {
  color: var(--muted);
  max-width: 62ch;
  margin-bottom: 26px;
}

/* Mobile-first and explicit rather than auto-fit: with five tiers, auto-fit
   orphans the featured one on a row of its own at common widths. */
.tiers {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  /* room for the featured badge, which overhangs the top edge */
  margin-top: 26px;
  align-items: stretch;
}

@media (min-width: 560px) {
  .tiers { grid-template-columns: repeat(3, 1fr); }
}

/* 5 × 150px + gaps + page gutters ≈ 860px, so all five fit in one row here */
@media (min-width: 880px) {
  .tiers { grid-template-columns: repeat(5, 1fr); gap: 16px; }
}

.tiers li { display: flex; }

.tier {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-height: 104px;
  padding: 22px 16px;
  text-align: center;
  text-decoration: none;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  color: var(--fg);
  transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.tier:hover {
  border-color: var(--brand);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10);
}

.tier:active { transform: translateY(-1px); }

.tier:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
}

.tier-amount {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.2vw, 2.1rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.tier-per {
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0;
  color: var(--muted);
  margin-left: 2px;
}

.tier-note {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.35;
}

/* The £25 tier funds a full place, so it carries the emphasis. Red border and
   badge rather than a red fill. White on #ED1C24 is only 4.38:1, which fails
   AA, so the badge uses the darker --brand-strong (5.88:1). */
.tier-featured {
  border-color: var(--brand);
  border-width: 2px;
}

.tier-featured .tier-note { color: var(--accent-text); font-weight: 600; }

.tier-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  background: var(--brand-strong);
  color: #FFFFFF;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
}

/* Below the 3-column breakpoint the featured tier spans the full width, so it
   reads as the highlighted option rather than an odd leftover. */
@media (max-width: 559px) {
  .tiers li:last-child { grid-column: 1 / -1; }
}

/* ---------- story / prose ---------- */

.prose {
  max-width: 680px;
  margin-inline: auto;
}

.prose p { margin-bottom: 1.35em; }

.prose .drop {
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  line-height: 1.4;
  color: var(--fg);
  font-weight: 600;
}

.pull-quote {
  border-left: 4px solid var(--brand);
  padding: 8px 0 8px 26px;
  margin: 2.2em 0;
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  line-height: 1.45;
  font-weight: 600;
}

/* ---------- photo ---------- */

.photo {
  margin: 2.5em 0;
}

.photo img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.photo figcaption {
  margin-top: 12px;
  font-size: 0.88rem;
  color: var(--muted);
  text-align: center;
}

.photo-placeholder {
  background: var(--surface-2);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  padding: 20px;
  min-height: 320px;
  margin: 2.5em 0;
}

/* ---------- stats band ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: center;
}

.stat b {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 800;
  color: var(--brand-soft);
  line-height: 1;
  margin-bottom: 8px;
  /* equal-width digits, so the number doesn't jitter as it counts up */
  font-variant-numeric: tabular-nums;
}

.stat span { color: var(--band-muted); font-size: 0.95rem; }

/* ---------- Instagram rolling banner ---------- */

.ig-strip {
  --ig-duration: 60s;
  background: var(--band-bg);
  color: var(--band-fg);
  padding: clamp(48px, 7vw, 72px) 0 clamp(52px, 7vw, 76px);
  overflow: hidden;
}

/* JS adds .is-loaded once posts are in; until then reserve nothing. */
.ig-strip:not(.is-loaded) .ig-viewport { display: none; }

.ig-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.ig-head h2 { max-width: 20ch; }
.ig-head .eyebrow { color: var(--brand-soft); }

.ig-follow {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--band-fg);
  text-decoration: none;
  border-bottom: 2px solid var(--brand);
  padding-bottom: 2px;
  white-space: nowrap;
}

.ig-follow:hover { color: var(--brand-soft); }

/* Full-bleed track that runs past the .wrap gutters */
.ig-viewport {
  display: flex;
  width: 100%;
  overflow: hidden;
  /* fade the edges so posts enter and leave softly */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.ig-marquee {
  display: flex;
  gap: 16px;
  padding-right: 16px;
  flex: none;
  animation: ig-scroll var(--ig-duration) linear infinite;
}

/* Pause when someone wants to actually look at a photo */
.ig-viewport:hover .ig-marquee,
.ig-viewport:focus-within .ig-marquee {
  animation-play-state: paused;
}

@keyframes ig-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

.ig-item {
  position: relative;
  flex: none;
  width: clamp(180px, 22vw, 260px);
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--band-surface);
  border: 1px solid var(--band-line);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.ig-item:hover,
.ig-item:focus-visible {
  transform: translateY(-4px);
  border-color: var(--brand);
}

.ig-item:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
}

.ig-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ig-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(11, 11, 12, 0.7);
  color: #FFFFFF;
  font-size: 0.7rem;
  line-height: 1;
}

/* Reduced motion: stop the scroll and let people swipe through instead. */
@media (prefers-reduced-motion: reduce) {
  .ig-viewport {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .ig-marquee { animation: none; }
  /* the duplicated run is decorative once scrolling is manual */
  .ig-marquee[aria-hidden="true"] { display: none; }
}

/* ---------- CTA band ---------- */

.cta-band {
  background: var(--brand);
  color: #FFFFFF;
}

.cta-band .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding: clamp(48px, 7vw, 72px) 0;
}

.cta-band h2 { max-width: 18ch; }
.cta-band p { color: rgba(255, 255, 255, 0.88); margin-top: 10px; max-width: 46ch; }

/* ---------- crisis strip ---------- */

.crisis {
  background: #0B0B0C;
  color: #FFFFFF;
  border-top: 1px solid var(--band-line);
  padding: 26px 0;
  font-size: 0.95rem;
}

.crisis .wrap {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.crisis strong { color: var(--brand-soft); }

.crisis a { color: var(--brand-soft); font-weight: 700; }

.crisis-dot {
  flex: none;
  width: 10px;
  height: 10px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--brand);
}

@media (prefers-reduced-motion: no-preference) {
  .crisis-dot { animation: pulse 2.4s ease-in-out infinite; }
  @keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(237, 28, 36, 0.55); }
    50% { box-shadow: 0 0 0 8px rgba(237, 28, 36, 0); }
  }
}

/* ---------- footer ---------- */

.site-footer {
  background: var(--band-bg);
  color: var(--band-muted);
  padding: clamp(48px, 7vw, 72px) 0 40px;
  font-size: 0.93rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}

.site-footer h4 {
  font-family: var(--display);
  color: var(--band-fg);
  font-size: 1rem;
  margin-bottom: 14px;
}

.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: var(--band-muted); text-decoration: none; }
.site-footer a:hover { color: var(--band-fg); text-decoration: underline; }

/* email line with a leading icon */
.site-footer .with-icon {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.site-footer .with-icon svg {
  width: 17px;
  height: 17px;
  flex: none;
  opacity: 0.75;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.site-footer .with-icon:hover svg { opacity: 1; color: var(--brand-soft); }

/* icon-only social links: the accessible name comes from aria-label */
.social-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

/* Base = on a normal page surface (e.g. the contact card). The footer
   overrides these with its dark-band tokens below. */
.social {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--muted);
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.social svg { width: 18px; height: 18px; display: block; }

.social:hover {
  color: var(--fg);
  border-color: var(--brand);
  transform: translateY(-2px);
}

.site-footer .social {
  border-color: var(--band-line);
  color: var(--band-muted);
}

.site-footer .social:hover { color: var(--band-fg); }

.social:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--band-fg);
  margin-bottom: 14px;
}

.footer-legal {
  border-top: 1px solid var(--band-line);
  padding-top: 24px;
  font-size: 0.85rem;
  color: var(--band-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* Stack the copyright and the design credit on the left of the legal row. */
.footer-legal-text { display: grid; gap: 6px; }

/* Deliberately NOT flex: flex turns the text nodes into anonymous items and
   drops the whitespace around them, so the hidden "love" ran into its
   neighbours ("Designed withloveby") when read or copied. Normal inline
   flow keeps the spaces. */
.credit {
  font-size: 0.85rem;
  color: var(--band-muted);
}

.credit a {
  color: var(--band-fg);
  text-decoration: none;
  font-weight: 700;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.credit a:hover {
  color: var(--brand-soft);
  border-bottom-color: var(--brand);
}

.credit a:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: 2px;
}

.heart {
  width: 14px;
  height: 14px;
  fill: var(--brand);
  display: inline-block;
  vertical-align: -2px;
  transform-origin: center;
}

/* Double-thump, like an actual heartbeat, with a rest between beats. */
@media (prefers-reduced-motion: no-preference) {
  .heart { animation: heartbeat 1.6s ease-in-out infinite; }

  @keyframes heartbeat {
    0%, 28%, 100% { transform: scale(1); }
    8%  { transform: scale(1.3); }
    16% { transform: scale(1); }
    22% { transform: scale(1.2); }
  }
}

/* Screen-reader-only text, so the heart still reads as the word "love". */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Accreditation marks. Both are dark artwork (one on white, one on a
   transparent background), so they sit on white chips to stay legible
   against the dark footer. */
/* stretch, so both chips share the height of the taller one */
.footer-badges {
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
  flex: none;
}

.badge {
  display: grid;
  place-items: center;
  background: #FFFFFF;
  padding: 8px 14px;
  border-radius: 8px;
  line-height: 0;
  transition: transform 0.15s ease;
}

a.badge:hover { transform: translateY(-2px); }

.badge:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
}

/* The two marks have very different aspect ratios (the CC lockup is wide,
   the MHFA one is nearly square), so they're sized individually to carry
   the same visual weight rather than to a shared width. */
.badge img { height: auto; }
.badge-cc img { width: 168px; }
.badge-mhfa img { width: 138px; }

@media (max-width: 680px) {
  .footer-legal { justify-content: flex-start; }
}

/* ---------- forms ---------- */

.form-grid { display: grid; gap: 20px; max-width: 640px; }

.field label {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 8px;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  font: inherit;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--fg);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(237, 28, 36, 0.25);
}

.form-hint {
  margin-top: 12px;
  font-size: 0.9rem;
  color: var(--muted);
  max-width: 42ch;
}

.form-status:not(:empty) {
  margin-top: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
}

/* Success uses a green that clears 4.5:1 on both themes; errors use the
   contrast-safe darker brand red rather than #ED1C24. */
.form-status.is-success { color: #1E7B34; }
[data-theme="dark"] .form-status.is-success { color: #5FD07C; }
.form-status.is-error { color: var(--accent-text); }

/* Honeypot: visually gone, kept out of the tab order and the a11y tree. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.note {
  font-size: 0.88rem;
  color: var(--muted);
  background: var(--surface-2);
  border-left: 3px solid var(--brand);
  padding: 12px 16px;
  border-radius: 0 8px 8px 0;
}

/* ---------- reveal on scroll ---------- */

.reveal { opacity: 0; transform: translateY(18px); }

.reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

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

@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* The full nav (5 links + Donate + theme switcher) stops fitting well below
   ~950px, so collapse to the burger menu here rather than at 680px. */
@media (max-width: 950px) {
  .nav-toggle { display: block; }

  .nav-actions { margin-left: auto; }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 12px 24px 20px;
    display: none;
  }

  .nav-links.open { display: flex; }

  .nav-links li { padding: 10px 0; }
  .nav-links .btn { justify-content: center; margin-top: 8px; }
}

@media (max-width: 680px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; gap: 32px; }
  .footer-grid { grid-template-columns: 1fr; }
}