/* Shift the Focus – brand colors */
:root {
  --color-navy: #0b2a45;
  --color-blueMain: #0254eb;
  --color-navy1: #0d2137;
  --color-navy1-light: #3e597f;
  --color-navy-light: #1a365d;
  --color-ocean: #0284c7;
  --color-ocean-light: #0ea5e9;
  --color-sunrise: #e9a319;
  --color-sunrise-light: #fbbf24;
  --color-white: #ffffff;
  --color-text-muted: #64748b;
  --color-gold: #e3a61c;
  --color-teal: #1f7a7a;
  --color-off-white: #dbe0e8;
  --color-page-bg: #f4f6f9;
  --color-text: #183247;
}

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

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-page-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ----- Navbar ----- */
.site-header {
  background: var(--color-navy);
  color: var(--color-white);
  box-shadow: 0 2px 8px rgba(13, 33, 55, 0.2);
  position: sticky;
  top: 0;
  z-index: 100;
}

.navbar {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.navbar__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--color-white);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: 0.02em;
}

.navbar__brand:hover {
  color: var(--color-sunrise);
}

.navbar__brand img {
  height: 48px;
  width: auto;
  display: block;
}

.navbar__brand-text {
  white-space: nowrap;
}

.navbar__brand-text--accent {
  color: var(--color-sunrise);
}

.navbar__nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar__link {
  display: block;
  padding: 0.25rem 0.75rem;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9375rem;
  border-radius: 4px;
  transition: color 0.2s, background 0.2s;
}

.navbar__link:hover {
  color: var(--color-white);
  background: var(--color-navy-light);
}

.navbar__link--active,
.navbar__link[aria-current="page"] {
  color: var(--color-sunrise);
  font-weight: 600;
  background: rgba(233, 163, 25, 0.12);
}

.navbar__link--cta {
  background: var(--color-sunrise);
  color: var(--color-navy);
}

.navbar__link--cta:hover {
  background: var(--color-sunrise-light);
  color: var(--color-navy);
}

/* Active Donate: keep CTA readable with ring instead of transparent gold-on-gold */
.navbar__link--cta.navbar__link--active,
.navbar__link--cta[aria-current="page"] {
  color: var(--color-navy);
  font-weight: 700;
  background: var(--color-sunrise-light);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.45);
}

.navbar__link--cta.navbar__link--active:hover,
.navbar__link--cta[aria-current="page"]:hover {
  background: var(--color-sunrise);
  color: var(--color-navy);
}

/* Hamburger (hidden on wide screens) */
.navbar__toggle {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-white);
  cursor: pointer;
  transition: background 0.2s;
}

.navbar__toggle:hover {
  background: var(--color-navy-light);
}

.navbar__toggle:focus-visible {
  outline: 2px solid var(--color-sunrise);
  outline-offset: 2px;
}

.navbar__toggle-bars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 24px;
  height: 18px;
}

.navbar__toggle-bar {
  display: block;
  height: 2px;
  width: 100%;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease;
  transform-origin: center;
}

.navbar--open .navbar__toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.navbar--open .navbar__toggle-bar:nth-child(2) {
  opacity: 0;
}

.navbar--open .navbar__toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Collapse to the menu button below the width the full menu needs (about 990px with Sponsors).
   Keep in sync with the matchMedia query in base.html. */
@media (max-width: 1040px) {
  .navbar__toggle {
    display: flex;
  }

  .navbar__brand {
    flex: 1;
    min-width: 0;
  }

  .navbar__nav {
    display: none;
    order: 3;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    padding: 0.5rem 0 0.75rem;
    margin: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }

  .navbar--open .navbar__nav {
    display: flex;
  }

  .navbar__link {
    padding: 0.75rem 0.5rem;
    border-radius: 6px;
  }

  .navbar__link--cta {
    margin-top: 0.25rem;
    text-align: center;
  }

  body.nav-menu-open {
    overflow: hidden;
  }
}

/* ----- Main content ----- */
.site-main {
  flex: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 2rem;
  padding: 0 1.5rem 2rem;
  background: var(--color-page-bg);
}

/* ----- Official entrant strip (race T&Cs clause 9.2; follow the race Logo Guidelines) ----- */
.race-strip {
  padding-top: 0.5rem;   /* reads as the closing part of the section above */
  padding-bottom: 3rem;
  text-align: center;
}

/* Continue a blue-gray band when the section above is one */
.page-section--alt + .race-strip {
  --band-color: var(--color-off-white);
  background: var(--band-color);
  box-shadow: 0 0 0 100vmax var(--band-color);
  clip-path: inset(0 -100vmax);
}

.race-strip__label {
  margin: 0 0 1.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.race-strip__team {
  color: var(--color-navy);
}

.race-strip__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2.5rem 3.5rem;   /* generous clear space around each logo */
}

.race-strip__link {
  display: block;
  line-height: 0;
}

.race-strip__logo {
  display: block;
  max-width: 100%;
  height: auto;
}

.race-strip__logo--wtr { width: 320px; }
.race-strip__logo--ac { width: 160px; }

/* ----- Footer ----- */
.site-footer {
  background: var(--color-navy);
  color: var(--color-white);
  margin-top: auto;
}

.footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.75rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.footer__meta {
  flex: 1 1 420px;
  min-width: 280px;
}

.footer__brand {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
}

.footer__brand-accent {
  color: var(--color-sunrise);
}

.footer__tagline {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.875rem;
  font-style: italic;
  margin: 0.15rem 0 0;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__link {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.2s;
}

.footer__link:hover {
  color: var(--color-sunrise);
}

.footer__copy-link,
.newsletter-privacy-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer__copy-link:hover,
.newsletter-privacy-link:hover {
  color: var(--color-sunrise);
}

.footer__copy {
  display: inline-block;
  width: auto;
  margin: 0.5rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.7);
  text-align: left;
}

.footer__social {
  margin-left: auto;
  min-width: 220px;
}

.footer__social .social-strip {
  margin-top: 0;
}

.footer__social .social-strip__list {
  justify-content: flex-end;
  gap: 0.875rem 1.125rem;
}

.footer__social .social-strip__icon {
  width: 1.5rem;
  height: 1.5rem;
}

@media (max-width: 768px) {
  .footer__social {
    width: 100%;
    margin-left: 0;
  }

  .footer__social .social-strip__list {
    justify-content: center;
  }
}

/* ----- Homepage hero ----- */
.hero {
  background: linear-gradient(90deg, var(--color-navy1) 0%, var(--color-navy1-light) 50%, #0a1628 100%);
  color: var(--color-white);
  padding: 2rem 0;
  margin: 0 -1.5rem 2rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 10px;
  background: linear-gradient(to top, var(--color-page-bg), transparent);
  pointer-events: none;
}

.hero__inner {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.hero--home .hero__inner {
  max-width: 1080px;
}

.hero__image {
  width: 100%;
  height: auto;
  max-width: 560px;
  margin: 0 auto 1.5rem;
  display: block;
  filter: drop-shadow(0 4px 24px rgba(13, 33, 55, 0.25));
}

.hero__title {
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  font-weight: 700;
  margin: 0 0 0.5rem;
  letter-spacing: 0.04em;
  line-height: 1.15;
}

.hero__title .accent {
  color: var(--color-sunrise);
}

.hero__tagline {
  margin: 0.75rem 0 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(233, 163, 25, 0.4);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.375rem, 3.5vw, 1.75rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.88);
}

.hero__cta {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: var(--color-sunrise);
  color: var(--color-navy);
  text-decoration: none;
  font-weight: 700;
  border-radius: 6px;
  transition: background 0.2s, transform 0.15s;
}

.hero__cta:hover {
  background: var(--color-sunrise-light);
  transform: translateY(-1px);
}

.row-countdown {
  max-width: 22rem;
  margin: 0;
  padding: 0,5rem 2.5rem;
  text-align: left;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(219, 224, 232, 0.96));
  border: 2px solid rgba(13, 33, 55, 0.35);
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(13, 33, 55, 0.1);
}

.row-countdown--hero {
  display: block;
  position: absolute;
  top: -0.35rem;
  right: -2.5rem;
  width: fit-content;
  max-width: none;
  margin: 0;
  padding: 0.55rem 1.15rem;
  background: linear-gradient(165deg, rgba(11, 42, 69, 0.94), rgba(26, 54, 93, 0.92));
  border: 2px solid rgba(233, 163, 25, 0.92);
  box-shadow: 0 10px 22px rgba(5, 15, 30, 0.34);
  transform: scale(0.75);
  transform-origin: top right;
}

.row-countdown__eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.row-countdown .section-heading {
  margin-bottom: 0.35rem;
  color: var(--color-navy);
}

.row-countdown__value {
  margin: 0;
  font-size: clamp(2rem, 7vw, 3rem);
  font-weight: 800;
  line-height: 1;
  color: var(--color-navy);
}

.row-countdown__subtext {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.row-countdown--hero .row-countdown__eyebrow {
  margin-bottom: 0.2rem;
  color: rgba(255, 255, 255, 0.8);
}

.row-countdown--hero .section-heading {
  margin-bottom: 0.25rem;
  color: var(--color-white);
}

.row-countdown--hero .row-countdown__value {
  margin-top: 0.1rem;
  font-size: clamp(1.5rem, 5.25vw, 2.25rem);
  color: var(--color-sunrise-light);
}

.row-countdown--hero .row-countdown__subtext {
  margin-top: 0.35rem;
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 768px) {
  .hero--home .hero__inner {
    max-width: 720px;
  }

  .row-countdown {
    width: min(100%, 22rem);
    max-width: 22rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}

@media (max-width: 800px) {
  .row-countdown--hero {
    position: static;
    margin-left: auto;
    margin-right: auto;
    transform-origin: top center;
  }
}
/*
.HF_SNJ_title {
  font-size: 3.5rem;
  font-weight: 700;
  margin: 0 0 1rem;
  letter-spacing: 0.04em;
  line-height: 1.15;
}
*/
/* ----- Utility ----- */
.btn--primary {
  background: var(--color-sunrise);
  color: var(--color-navy);
  padding: 0.625rem 1.25rem;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: background 0.2s;
}

.btn--primary:hover {
  background: var(--color-sunrise-light);
}

.link--ocean {
  color: var(--color-ocean);
  text-decoration: none;
  font-weight: 500;
}

.link--ocean:hover {
  color: var(--color-ocean-light);
  text-decoration: underline;
}

/* ----- Homepage layout (Hey Ciara–style structure) ----- */
.page-section {
  padding: 3rem 1.5rem;
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}

.page-section--alt {
  background: var(--color-off-white);
}

.page-section--accent {
  background: var(--color-navy);
  color: var(--color-white);
}

/* Extend band backgrounds to the full viewport width; content stays in .container */
.page-section--alt,
.page-section--accent {
  box-shadow: 0 0 0 100vmax var(--band-color);
  clip-path: inset(0 -100vmax);
}

.page-section--alt { --band-color: var(--color-off-white); }
.page-section--accent { --band-color: var(--color-navy); }

.page-section--accent .section-heading,
.page-section--accent .section-text {
  color: var(--color-white);
}

.page-section--accent .section-text {
  opacity: 0.9;
}

/* Contact page: increase space before newsletter strip by ~33% */
.page-section--contact-form {
  padding-bottom: 4rem;
}

/* Social links (home newsletter strip) */
.social-strip {
  margin-top: 1.25rem;
}

.social-strip__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem 2.75rem;
  justify-content: center;
  align-items: center;
}

.social-strip__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.18s ease, filter 0.18s ease;
}

.social-strip__link:hover {
  transform: translateY(-2px);
}

.social-strip__link:hover .social-strip__icon--instagram {
  filter: brightness(1.08) saturate(1.05);
}

.social-strip__link:hover .social-strip__icon--x,
.social-strip__link:hover .social-strip__icon--facebook,
.social-strip__link:hover .social-strip__icon--linkedin {
  filter: brightness(1.12);
}

.social-strip__link:focus-visible {
  outline: 2px solid var(--color-sunrise);
  outline-offset: 4px;
  border-radius: 6px;
}

.social-strip__icon {
  width: 2rem;
  height: 2rem;
  display: block;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

.container--narrow {
  max-width: 640px;
}

.container--two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: stretch;
}

@media (max-width: 768px) {
  .container--two-col {
    grid-template-columns: 1fr;
  }
  .two-col__media { order: -1; }
  .two-col__media {
    height: auto;
  }
}

.section-heading {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 700;
  color: var(--color-navy);
  margin: 0 0 1rem;
  line-height: 1.25;
}

.section-heading--small {
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
}

.section-lead {
  font-size: 1.125rem;
  color: var(--color-text);
  margin: 0 0 1.5rem;
  max-width: 56ch;
}

.section-text {
  color: var(--color-text);
  margin: 0 0 1rem;
}

.section-text--small {
  font-size: 0.875rem;
  margin-top: 0.75rem;
  opacity: 0.8;
}

.text-center {
  text-align: center;
}

.text-center .section-heading,
.text-center .section-text {
  margin-left: auto;
  margin-right: auto;
}

/* Placeholder images */
.placeholder-img {
  aspect-ratio: 16 / 10;
  background: var(--color-navy-light);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.placeholder-img--card {
  aspect-ratio: 4 / 3;
}

.placeholder-img--portrait {
  aspect-ratio: 3 / 4;
}

.placeholder-img--wide {
  aspect-ratio: 21 / 9;
}

.placeholder-img__label {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.875rem;
}

/* Home/media images: match charity behavior so real images scale within frames */
.two-col__media img,
.two-col__media picture > img,
.card__media img,
.card__media picture > img {
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
}

.two-col__media.placeholder-img:has(> img),
.two-col__media.placeholder-img:has(> picture > img),
.card__media.placeholder-img:has(> img),
.card__media.placeholder-img:has(> picture > img) {
  display: block;
  position: relative;
  padding: 0;
  background: var(--color-off-white);
}

.two-col__media.placeholder-img > img,
.two-col__media.placeholder-img > picture > img,
.card__media.placeholder-img > img,
.card__media.placeholder-img > picture > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.card__media.placeholder-img:has(> img) .placeholder-img__label {
  display: none;
}

/* Journal cards: show logos and graphics whole instead of cropping them to fill the frame */
.card__media--contain.placeholder-img > img,
.card--pinned .card__media--contain img {
  object-fit: contain;
  padding: 0.75rem;
}

.two-col__figure {
  margin: 0;
}

.card__figure {
  margin: 0;
}

.card__figure .media-caption {
  padding: 0.5rem 1rem 0;
}

.media-caption {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--color-text-muted);
  font-style: italic;
}

/* Two-column content */
.two-col__content,
.about-two-col > div,
.about-two-col .about-two-col__text {
  min-height: 0;
}

.two-col__media {
  margin: 0;
  min-height: 0;
  height: 100%;
}

/* In two-col sections, let media follow text-column height instead of fixed ratios */
.container--two-col .two-col__media.placeholder-img {
  aspect-ratio: unset;
  height: 100%;
  min-height: 0;
}

/* Stacked on phones there is no text column to follow, so give the media its own shape.
   Must come after the rule above, which would otherwise win and collapse the image. */
@media (max-width: 768px) {
  .container--two-col .two-col__media.placeholder-img {
    aspect-ratio: 16 / 10;
    height: auto;
  }

  /* Photo above text when stacked. Home wraps the photo in a figure, so move the figure itself. */
  .container--two-col > .two-col__figure {
    order: -1;
  }
}

.two-col__content .section-heading {
  margin-top: 0;
}

.two-col__content .section-text {
  margin-bottom: 1rem;
}

/* Card grid */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.card {
  background: var(--color-white);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(13, 33, 55, 0.08);
}

.card__media {
  width: 100%;
}

.card__body {
  padding: 1.25rem;
}

.card__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-navy);
  margin: 0 0 0.5rem;
}

.card__excerpt {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  margin: 0 0 0.75rem;
  line-height: 1.5;
}

/* Quote block */
.quote-block {
  margin: 0;
  padding: 2rem 0;
  border: none;
}

.quote-block__text {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  font-style: italic;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.4;
  margin: 0 0 0.75rem;
}

.quote-block__cite {
  display: block;
  margin-left: auto;
  text-align: right;
  font-size: clamp(1rem, 1.9vw, 1.2rem);
  font-weight: 600;
  color: var(--color-text);
}

/* Signup strip */
.signup-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: 400px;
  margin: 1rem auto 0;
  justify-content: center;
}

.signup-strip__input {
  flex: 1;
  min-width: 200px;
  padding: 0.625rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
  font-size: 1rem;
}

.signup-strip__input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.signup-strip__btn {
  flex-shrink: 0;
}

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

/* ----- About page (Hey Ciara about–style structure) ----- */
.about-hero {
  padding: 2.5rem 1.5rem;
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  background: linear-gradient(180deg, var(--color-navy) 0%, var(--color-navy-light) 100%);
  color: var(--color-white);
}

.about-hero__title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  margin: 0 0 0.5rem;
  letter-spacing: 0.02em;
}

.about-hero__tagline {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.125rem;
  font-style: italic;
  opacity: 0.9;
  margin: 0;
}

/* Pull quote (standalone highlight) */
.pull-quote {
  margin: 0;
  padding: 0;
  border: none;
}

.pull-quote__text {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-style: italic;
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.4;
  margin: 0;
}

.pull-quote--large {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-style: italic;
  font-weight: 700;
  color: var(--color-white);
  margin: 0;
}

.page-section--accent .pull-quote--large {
  color: var(--color-white);
}

/* Timeline */
.timeline {
  max-width: 560px;
  margin: 2rem auto 0;
}

.timeline__item {
  margin-bottom: 2rem;
}

.timeline__item:last-child {
  margin-bottom: 0;
}

.timeline__year {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-sunrise);
  margin: 0 0 0.5rem;
}

.timeline__list {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--color-text);
  line-height: 1.6;
}

.timeline__list li {
  margin-bottom: 0.25rem;
}

/* About facts (Q&A / Get to know us) */
.about-facts {
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-facts__item {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(13, 33, 55, 0.1);
}

.about-facts__item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.about-facts__q {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-navy);
  margin: 0 0 0.5rem;
}

.about-facts__a {
  font-size: 0.9375rem;
  color: var(--color-text);
  line-height: 1.5;
  margin: 0;
}

.about-facts__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.about-facts__toggle::after {
  content: "+";
  flex-shrink: 0;
  font-size: 1.125rem;
  line-height: 1;
  color: var(--color-ocean);
  transition: transform 0.2s ease, color 0.2s ease;
}

.about-facts__toggle[aria-expanded="true"]::after {
  content: "\2212";
}

.about-facts__toggle:hover,
.about-facts__toggle:focus-visible {
  color: var(--color-ocean);
}

.about-facts__toggle:focus-visible {
  outline: 2px solid var(--color-sunrise);
  outline-offset: 3px;
  border-radius: 3px;
}

/* About page image containers (Hey Ciara–style) */
.about-figure {
  margin: 0 0 1.5rem;
}

.about-figure:last-child {
  margin-bottom: 0;
}

.about-figure__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  overflow: hidden;
}

.about-figure__img .placeholder-img {
  margin: 0;
}

.about-figure__caption {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-top: 0.5rem;
  font-style: italic;
  line-height: 1.4;
}

.about-figure--full {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
}

.about-figure--full:last-child {
  margin-bottom: 0;
}

/* Two-col with image on About (image + text side by side) */
.about-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

/* Figure column matches sibling text column height; image area flexes with it */
.about-two-col .about-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

.about-two-col .about-figure__img {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Drop fixed aspect-ratio in two-col so placeholder/image can grow/shrink with text */
.about-two-col .about-figure__img.placeholder-img {
  aspect-ratio: unset;
  height: auto;
}

.about-two-col .about-figure__img > img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

.about-two-col .about-figure__caption {
  flex-shrink: 0;
  margin-top: 0.5rem;
}

.about-two-col > div .section-text:last-child,
.about-two-col .about-two-col__text .section-text:last-child {
  margin-bottom: 0;
}

/* About page option: keep figure side from exceeding text height */
.about-two-col--match-text {
  align-items: stretch;
}

.about-two-col--match-text > div,
.about-two-col--match-text > .about-figure {
  min-height: 0;
}

.about-two-col--match-text > .about-figure {
  height: 100%;
}

.about-two-col--match-text .about-figure__img {
  flex: 1 1 0;
  min-height: 0;
}

/* Desktop: take the image out of the height calculation so a tall (portrait) photo is cropped to the
   text column instead of stretching the row. */
/* Keep the top of a photo in frame when it's cropped (e.g. hands at the top of the Wall photo) */
.about-figure__img > img.img-focus-top {
  object-position: 50% 12%;
}

@media (min-width: 769px) {
  .about-two-col--match-text .about-figure__img {
    position: relative;
  }

  .about-two-col--match-text .about-figure__img > img {
    position: absolute;
    inset: 0;
  }
}

@media (max-width: 768px) {
  .about-two-col {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .about-two-col .about-figure {
    order: -1;
    height: auto;
    min-height: unset;
  }
  .about-two-col .about-figure__img.placeholder-img {
    aspect-ratio: 16 / 10;
    flex: none;
    min-height: unset;
    height: auto;
  }

  .about-two-col .about-figure__img > img {
    min-height: unset;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }
}

/* ----- Campaign / blog page (Hey Ciara blog–style structure) ----- */
.campaign-hero {
  padding: 2.5rem 1.5rem;
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  background: linear-gradient(180deg, var(--color-navy) 0%, var(--color-navy-light) 100%);
  color: var(--color-white);
}

.campaign-hero__title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  margin: 0 0 0.5rem;
  letter-spacing: 0.02em;
}

.campaign-hero__tagline {
  font-size: 1.125rem;
  opacity: 0.95;
  margin: 0 0 0.5rem;
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}

.campaign-hero__sub {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1rem;
  font-style: italic;
  opacity: 0.9;
  margin: 0;
}

/* Home: intro band below hero */
.home-intro {
  padding-top: 2.5rem;
  padding-bottom: 2.75rem;
  margin-bottom: 2rem;
  border-top: 3px solid var(--color-sunrise);
  /* Light counterpart to the navy hero: same floating panel, gradient lighter at center */
  background: linear-gradient(90deg, #d3dce8 0%, var(--color-white) 50%, #d3dce8 100%);
  box-shadow: 0 4px 24px rgba(13, 33, 55, 0.08);
}

.home-intro .container--narrow {
  max-width: 46rem;
}

.home-intro__heading {
  font-size: clamp(1.75rem, 4.5vw, 2.85rem);
  font-weight: 800;
  color: var(--color-navy);
  line-height: 1.2;
  margin: 0 0 1.25rem;
  letter-spacing: 0.02em;
}

.home-intro__heading .accent {
  color: var(--color-sunrise);
}

.home-intro__lead {
  font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
  line-height: 1.65;
  color: var(--color-text);
  margin: 0 auto;
  max-width: 52ch;
  font-weight: 500;
}

@media (max-width: 480px) {
  .home-intro {
    padding-top: 2rem;
    padding-bottom: 2.25rem;
  }

  .home-intro__heading {
    margin-bottom: 1rem;
  }
}

/* Journal list: intro band below shared hero (former campaign-hero copy) */
.journal-intro {
  border-bottom: 1px solid rgba(13, 33, 55, 0.1);
}

.journal-intro .container--narrow {
  max-width: 42rem;
}

.journal-intro__lead {
  font-size: clamp(1.0625rem, 2.4vw, 1.25rem);
  line-height: 1.55;
  color: var(--color-text);
  margin: 0 auto 1.125rem;
  max-width: 52ch;
  font-weight: 600;
}

.journal-intro__emphasis {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(0.9375rem, 2vw, 1.0625rem);
  font-style: italic;
  line-height: 1.65;
  color: var(--color-text-muted);
  margin: 0 auto;
  max-width: 48ch;
}

@media (max-width: 480px) {
  .journal-intro__lead {
    margin-bottom: 1rem;
  }
}

.page-section--tight {
  padding: 1.5rem 1.5rem;
}

/* Blog search */
.blog-search-label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-navy);
  margin: 0 0 0.5rem;
}

.blog-search {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: 400px;
}

.blog-search__input {
  flex: 1;
  min-width: 180px;
  padding: 0.625rem 1rem;
  border: 1px solid var(--color-navy-light);
  border-radius: 6px;
  font-size: 1rem;
  color: var(--color-text);
}

.blog-search__btn {
  flex-shrink: 0;
}

/* Blog section titles */
.blog-section-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-navy);
  margin: 0 0 1rem;
}

/* Category pills */
#categories {
  scroll-margin-top: 4.5rem;
}

.category-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.category-pill {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  background: var(--color-white);
  color: var(--color-navy);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 2rem;
  border: 1px solid var(--color-navy-light);
  transition: background 0.2s, color 0.2s;
}

.category-pill:hover,
.category-pill--active {
  background: var(--color-navy);
  color: var(--color-white);
  border-color: var(--color-navy);
}

/* Blog cards (full-card link) */
.card--blog .card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.card--blog .card__link:hover .card__title {
  color: var(--color-ocean);
}

.card--blog .card__read-more {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-ocean);
}

.card--blog .card__link:hover .card__read-more {
  color: var(--color-ocean-light);
  text-decoration: underline;
}

.blog-entry__posted {
  margin-bottom: 1rem;
}

/* Donate page */
.donate-sponsor-note {
  margin-top: 2rem;
}

/* Contact form honeypot: off-screen rather than display:none, which some bots check for */
.contact-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Campaign page: Team Course Corrected */
.team-mark {
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-mark img {
  width: min(320px, 70%);
  height: auto;
}

.team-facts {
  margin: 1.5rem 0;
  padding: 0;
}

.team-facts > div {
  display: flex;
  gap: 1rem;
  padding: 0.6rem 0;
  border-top: 1px solid rgba(13, 33, 55, 0.14);
}

.team-facts dt {
  flex: 0 0 4.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-top: 0.15rem;
}

.team-facts dd {
  margin: 0;
  color: var(--color-navy);
  font-weight: 600;
}

/* Page not found (config/templates/404.html) */
.error-page__links {
  margin-top: 1.75rem;
}

/* Temporary "coming soon" page (core/coming_soon.html) */
.coming-soon__mark {
  display: block;
  margin: 0 auto 1rem;
}

.coming-soon__note {
  margin: 1.5rem 0 0;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-navy);
}

.coming-soon .home-intro__lead + .home-intro__lead {
  margin-top: 1rem;
}

.coming-soon__footer {
  padding: 1rem 1.5rem;
  text-align: center;
}

.coming-soon__footer .footer__copy {
  display: block;
  margin: 0.25rem 0;
  padding: 0;
  border: 0;
  text-align: center;
}

/* Sponsors page */
.sponsors-lead {
  max-width: none;
}

.sponsor-reasons,
.sponsor-wall {
  margin-top: 2rem;
}

.sponsor-reason .card__body {
  padding: 1.5rem;
}

/* Four "why partner" cards: two by two on mid-size screens, so one card is never left alone on a row */
@media (min-width: 600px) and (max-width: 1199px) {
  .sponsor-reasons:has(> .card:nth-child(4)) {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .sponsor-reasons:has(> .card:nth-child(4)) {
    grid-template-columns: repeat(4, 1fr);
  }
}

.sponsor-placements {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
}

.sponsor-placements li {
  position: relative;
  padding: 0.75rem 0 0.75rem 1.75rem;
  border-bottom: 1px solid rgba(13, 33, 55, 0.12);
}

.sponsor-placements li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 1.2rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--color-sunrise);
}

.sponsors-wall-intro {
  max-width: 40rem;
  margin: 0 auto;
}

.sponsor-slot {
  border: 2px dashed rgba(13, 33, 55, 0.25);
  box-shadow: none;
  background: transparent;
}

.sponsor-slot__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  margin: 1rem 1rem 0;
  border-radius: 6px;
  background: rgba(13, 33, 55, 0.06);
  color: var(--color-text-muted);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.875rem;
}

.sponsor-cta {
  margin: 2.5rem 0 0;
  text-align: center;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-navy);
}

.sponsors-fine-print {
  margin-top: 2rem;
}

/* Causes page */
.causes-intro {
  padding-bottom: 4rem;
}

.causes-intro__text {
  max-width: 46rem;
  margin: 0 auto;
  text-align: center;
}

.card-grid--causes {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: 3rem;
}

.cause-panel {
  scroll-margin-top: 5rem;
}

.causes-intro__hint {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  text-align: center;
  margin: 0;
}

.card--selected {
  box-shadow: 0 0 0 3px var(--color-sunrise), 0 2px 8px rgba(13, 33, 55, 0.08);
}

.cause-eyebrow {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-sunrise);
  margin: 0 0 0.5rem;
}

/* Journal post page: single reading column */
.container--article {
  max-width: 720px;
}

.article__figure {
  margin: 0 0 2rem;
}

.article__figure img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 28rem;
  margin: 0 auto;
  border-radius: 8px;
}

.article-body {
  color: var(--color-text);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.article-body > * {
  margin: 0 0 1.25rem;
}

.article-body h2,
.article-body h3,
.article-body h4 {
  color: var(--color-navy);
  line-height: 1.3;
  margin: 2.25rem 0 0.75rem;
}

.article-body h2 { font-size: 1.5rem; }
.article-body h3 { font-size: 1.25rem; }
.article-body h4 { font-size: 1.0625rem; }

.article-body a {
  color: var(--color-ocean);
}

.article-body a:hover {
  color: var(--color-ocean-light);
}

.article-body ul,
.article-body ol {
  padding-left: 1.5rem;
}

.article-body li + li {
  margin-top: 0.375rem;
}

.article-body blockquote {
  border-left: 3px solid var(--color-sunrise);
  padding: 0.25rem 0 0.25rem 1.25rem;
  color: var(--color-navy);
  font-style: italic;
}

.article-body blockquote > :last-child {
  margin-bottom: 0;
}

.article-body img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 28rem;
  height: auto;
  margin: 0 auto;
  border-radius: 8px;
}

/* Two photos on the same line in a post's Markdown sit side by side, cropped to a matching shape.
   Write them as: ![alt one](url-one) ![alt two](url-two)   (a blank line starts a new row) */
.article-body p:has(> img + img) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.article-body p:has(> img + img) img {
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  margin: 0;
}

.article-body hr {
  border: 0;
  border-top: 1px solid rgba(13, 33, 55, 0.15);
  margin: 2rem 0;
}

.article__back {
  margin: 2.5rem 0 0;
}

.draft-banner {
  background: var(--color-sunrise-light);
  color: var(--color-navy);
  font-weight: 600;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin: 0 0 1.5rem;
}

/* Pinned journal post: wide horizontal card */
.card--pinned {
  margin-top: 1.5rem;
}

.card--pinned .card__link {
  display: grid;
  grid-template-columns: 2fr 3fr;
}

.card--pinned .card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card--pinned .card__body {
  align-self: center;
  padding: 2rem 2.25rem;
}

.card--pinned .card__title {
  font-size: 1.5rem;
}

.card--pinned .card__excerpt {
  font-size: 1rem;
  color: var(--color-text);
}

@media (max-width: 768px) {
  .card--pinned .card__link {
    grid-template-columns: 1fr;
  }

  .card--pinned .card__media img {
    aspect-ratio: 16 / 10;
  }

  .card--pinned .card__body {
    padding: 1.25rem;
  }
}

.card-grid--blog {
  margin-top: 0;
  /* Fixed columns (not auto-fit) so one or two cards keep their size instead of stretching. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .card-grid--blog {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .card-grid--blog {
    grid-template-columns: minmax(0, 1fr);
  }
}

.card-grid--blog .card__body {
  padding: 1.25rem;
}

.card-grid--blog .card__body:has(> .card__posted:first-child) {
  padding-top: 0;
}

.card-grid--blog .card__posted {
  margin: 0;
  padding: 0.15rem 0rem 0.75rem;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--color-text-muted);
  text-align: left;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2rem;
}

.pagination[hidden] {
  display: none;
}

.pagination__status {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

#recent-posts {
  scroll-margin-top: 4.5rem;
}

.pagination__link {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-ocean);
  text-decoration: none;
}

.pagination__link:hover {
  color: var(--color-ocean-light);
  text-decoration: underline;
}

.pagination__link--prev::before {
  content: '';
}

/* Recent posts: continuous loading on the journal list (script in journal/entry_list.html) */
.journal-scroll__sentinel {
  height: 1px;
}

.journal-scroll__status {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.journal-scroll__status:empty {
  display: none;
}

/* ----- Contact form ----- */
.contact-form {
  margin-top: 1.5rem;
  max-width: 640px;
}

.contact-form__required {
  color: var(--color-sunrise);
  font-weight: 700;
}

.contact-form__row--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.5rem;
  align-items: start;
}

@media (max-width: 560px) {
  .contact-form__row--split {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

.contact-form__field {
  margin-bottom: 1.25rem;
}

/* Same label height + control alignment for all labeled fields */
.contact-form__field:not(.contact-form__field--message) .contact-form__label {
  display: block;
  min-height: 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.contact-form__input,
.contact-form__select {
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-size: 1rem;
  font-family: inherit;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid var(--color-navy1-light);
  border-radius: 6px;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
  vertical-align: middle;
}

/* Single-line inputs and topic select share one height and edge alignment */
.contact-form__input:not(.contact-form__input--textarea),
.contact-form__select {
  min-height: 2.75rem;
  height: 2.75rem;
}

.contact-form__select {
  appearance: auto;
  cursor: pointer;
  padding-right: 2rem;
  background-color: var(--color-white);
}

.contact-form__input::placeholder,
.contact-form__input--textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.contact-form__input:focus,
.contact-form__select:focus {
  outline: none;
  border-color: var(--color-ocean);
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.2);
}

.contact-form__field--error .contact-form__input,
.contact-form__field--error .contact-form__select {
  border-color: var(--color-sunrise);
}

.contact-form__field--message {
  margin-top: 0.25rem;
}

.contact-form__input--textarea {
  resize: vertical;
  min-height: 8rem;
  height: auto;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  line-height: 1.5;
}

.contact-form__hint {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 0.35rem 0 0;
}

.contact-form__errors {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  font-size: 0.875rem;
  color: var(--color-navy);
}

.contact-form__errors li {
  padding: 0.25rem 0.5rem;
  margin-top: 0.25rem;
  background: rgba(233, 163, 25, 0.15);
  border-left: 3px solid var(--color-sunrise);
  border-radius: 2px;
}

.contact-form__errors--global {
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  background: rgba(233, 163, 25, 0.12);
  border: 1px solid var(--color-sunrise);
  border-radius: 6px;
  color: var(--color-navy);
}

.contact-form__errors--global p {
  margin: 0;
}

.contact-form__actions {
  margin-top: 1.5rem;
}

.contact-form__messages {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}

.contact-form__message {
  padding: 0.85rem 1rem;
  border-radius: 6px;
  font-weight: 600;
  border-width: 2px;
  border-style: solid;
  box-shadow: 0 2px 10px rgba(13, 33, 55, 0.12);
  text-align: center;
  letter-spacing: 0.01em;
}

.contact-form__message--success {
  background: rgba(2, 132, 199, 0.2);
  border: 1px solid var(--color-ocean);
  color: var(--color-navy);
  border-left: 5px solid var(--color-ocean);
}

.contact-form__message--info {
  background: rgba(2, 132, 199, 0.2);
  border: 1px solid var(--color-ocean);
  color: var(--color-navy);
  border-left: 5px solid var(--color-ocean);
}

.contact-form__message--error {
  background: rgba(220, 38, 38, 0.2);
  border: 1px solid #dc2626;
  color: #7f1d1d;
  border-left: 5px solid #dc2626;
}

/* Higher-contrast feedback inside dark newsletter strip */
.page-section--accent .contact-form__message--success,
.page-section--accent .contact-form__message--info {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.55);
  color: #ffffff;
}

.page-section--accent .contact-form__message--error {
  background: rgba(220, 38, 38, 0.28);
  border-color: rgba(255, 230, 230, 0.85);
  color: #ffffff;
}

/* ----- Charities page (two equal columns + border) ----- */
.charities-intro {
  margin-bottom: 2rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 56ch;
  text-align: center;
}

.charities-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: stretch;
}

/* Single charity: one column, centered (avoids empty half-width column) */
.charities-two-col--single {
  grid-template-columns: 1fr;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}

.charities-two-col__col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 1.5rem;
  border: 1px solid var(--color-navy-light);
  border-radius: 8px;
  background: var(--color-white);
  box-shadow: 0 2px 12px rgba(13, 33, 55, 0.08);
}

.charities-two-col__media {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 0 1.25rem;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}

/* Responsive images: scale down to column width, preserve aspect ratio */
.charities-two-col__media img,
.charities-two-col__media picture > img {
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
}

/* Real image inside aspect-ratio placeholder box: stay within frame (4:3 etc.) */
.charities-two-col__media.placeholder-img:has(> img) {
  display: block;
  position: relative;
  padding: 0;
  background: var(--color-off-white);
}

.charities-two-col__media.placeholder-img > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center;
}

.charities-two-col__media picture {
  display: block;
  max-width: 100%;
}

.charities-two-col__body {
  flex: 1 1 auto;
}

.charities-two-col__body .section-heading {
  margin-top: 0;
}

@media (max-width: 768px) {
  .charities-two-col {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}