/* ============================================================
   CCRF · Component layer
   Reusable classes for every template/section pattern. Templates
   carry NO presentational inline styles — only dynamic data passed
   as CSS custom properties (e.g. --tint, --ar, --badge-bg).
   Values lifted verbatim from the approved design.
   ============================================================ */

/* ------------------------------------------------------------
   Layout primitives
   ------------------------------------------------------------ */
.ccrf-wrap { max-width: var(--maxw); margin: 0 auto; }
.ccrf-wrap--prose { max-width: 820px; }

.ccrf-section { padding-inline: var(--pad-x); padding-block: clamp(54px, 6.5cqi, 108px); }
.ccrf-section--white { background: #fff; }
.ccrf-section--cream { background: var(--cream); }
.ccrf-section--blue { background: var(--blue-tint); }
.ccrf-section--red  { background: var(--red); color: #fff; }
/* Vertical-rhythm variants (exact design values) */
.ccrf-section--py-content { padding-block: clamp(48px, 6cqi, 92px); }
.ccrf-section--py-related { padding-block: clamp(48px, 6cqi, 88px); }
.ccrf-section--py-compact { padding-block: clamp(40px, 5cqi, 80px); }
.ccrf-section--py-band    { padding-block: clamp(40px, 4.5cqi, 72px); }
.ccrf-section--topline { border-top: 1px solid var(--hairline); }
.ccrf-section--tight-top { padding-block-start: 24px; }

/* Background tint via data: <section class="ccrf-section" style="--bg:#fff"> */
.ccrf-section--bg { background: var(--bg, #fff); }

/* ------------------------------------------------------------
   Buttons (canonical). Form submit buttons in Gravity / Woo map
   onto the same --btn-* tokens so every button matches.
   ------------------------------------------------------------ */
.ccrf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-decoration: none;
  font-family: inherit;
  font-weight: 700;
  font-size: var(--btn-fs);
  line-height: 1.1;
  text-align: center;
  border: none;
  border-radius: var(--btn-radius);
  padding: var(--btn-pad);
  cursor: pointer;
}
.ccrf-btn--red   { background: var(--red); color: #fff; box-shadow: var(--btn-red-shadow); }
.ccrf-btn--red:hover { background: var(--red-hover); color: #fff; }
.ccrf-btn--navy  { background: var(--navy); color: #fff; }
.ccrf-btn--navy:hover { background: var(--navy-hover); color: #fff; }
.ccrf-btn--cyan  { background: var(--cyan); color: #fff; }
.ccrf-btn--white { background: #fff; color: var(--red); }
.ccrf-btn--ghost { background: transparent; color: var(--navy); border: 1.5px solid var(--line); font-weight: 600; }
.ccrf-btn--ghost:hover { border-color: var(--navy); }
.ccrf-btn--ghost-cta { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.6); font-weight: 600; }
.ccrf-btn--lg    { padding: 17px 34px; font-size: 16px; }
.ccrf-btn--sm    { padding: 9px 18px; font-size: 12.5px; }
.ccrf-btn--block { display: flex; width: 100%; }

/* "All stories →" style outline link button (section headers) */
.ccrf-linkbtn {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; font-weight: 600; font-size: 15px; color: var(--navy);
  border: 1.5px solid var(--line); border-radius: var(--radius); padding: 13px 24px;
}
.ccrf-linkbtn:hover { border-color: var(--navy); }
.ccrf-linkbtn--white { background: #fff; }

/* Plain red text link with arrow */
.ccrf-arrowlink {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; font-weight: 700; font-size: 16px; color: var(--red); align-self: flex-start;
}
.ccrf-arrowlink__sym { font-size: 18px; }
.ccrf-backlink {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; font-weight: 600; font-size: 14.5px; color: var(--navy);
}
.ccrf-backlink__sym { font-size: 16px; }

/* ------------------------------------------------------------
   Headings / eyebrows / section headers
   ------------------------------------------------------------ */
.ccrf-h2 { font-size: clamp(28px, 4.4cqi, 48px); line-height: 1.1; font-weight: 700; letter-spacing: -.015em; color: var(--navy); margin: 0; }
.ccrf-h2--sm { font-size: clamp(26px, 3.6cqi, 40px); }
.ccrf-h2--xs { font-size: clamp(24px, 3.4cqi, 34px); margin-bottom: 24px; }
.ccrf-h2--archive { font-size: clamp(22px, 2.8cqi, 30px); margin-bottom: 28px; }
.ccrf-h2--archive-mt { margin-top: clamp(48px, 5cqi, 80px); }
.ccrf-h2--mb { margin-bottom: 26px; }
.ccrf-h2--mb-sm { margin-bottom: 18px; }
.ccrf-h2--fs { font-size: clamp(26px, 4cqi, 44px); line-height: 1.18; margin-bottom: 22px; }
.ccrf-h3 { font-size: 21px; font-weight: 700; letter-spacing: -.01em; color: var(--navy); margin: 0 0 18px; }

/* Section intro block (eyebrow + heading + optional body), constrained width */
.ccrf-sec-intro { max-width: 640px; margin-bottom: clamp(30px, 3.5cqi, 52px); }

/* Section header row: intro on the left, an action link on the right */
.ccrf-sec-head {
  display: flex; flex-wrap: wrap; gap: 16px;
  justify-content: space-between; align-items: flex-end;
  margin-bottom: clamp(28px, 3cqi, 46px);
}
.ccrf-sec-head--related { margin-bottom: clamp(26px, 3cqi, 42px); }

/* ------------------------------------------------------------
   Page headers
   ------------------------------------------------------------ */
/* Warm (cream) header — pages, archives, news */
.ccrf-phead { background: var(--cream); border-bottom: 1px solid var(--hairline); }
.ccrf-phead--page    { padding: clamp(36px, 4.5cqi, 68px) var(--pad-x) clamp(34px, 4cqi, 56px); }
.ccrf-phead--archive { padding: clamp(40px, 5cqi, 72px) var(--pad-x); }
.ccrf-phead--article { padding: clamp(34px, 4cqi, 60px) var(--pad-x) clamp(30px, 3.5cqi, 48px); }
.ccrf-phead__title { margin: 0; font-weight: 700; letter-spacing: -.015em; color: var(--navy); line-height: 1.08; }
.ccrf-phead--page .ccrf-phead__title    { font-size: clamp(32px, 5cqi, 56px); letter-spacing: -.02em; max-width: 18ch; }
.ccrf-phead--archive .ccrf-phead__title { font-size: clamp(30px, 4.6cqi, 50px); }
.ccrf-phead--article .ccrf-phead__title { font-size: clamp(30px, 4.6cqi, 52px); line-height: 1.1; letter-spacing: -.02em; margin-bottom: 22px; }
.ccrf-phead__intro { font-size: clamp(15px, 1.6cqi, 18px); line-height: 1.6; color: var(--ink); margin: 16px 0 0; max-width: 60ch; }
.ccrf-phead--page .ccrf-phead__intro { font-size: clamp(16px, 1.7cqi, 20px); margin: 20px 0 0; max-width: 62ch; }
.ccrf-phead--article .ccrf-phead__intro { font-size: clamp(17px, 1.8cqi, 21px); line-height: 1.55; margin: 0 0 28px; font-weight: 500; }

/* Dark image hero (homepage, page hero, hero section, event) */
.ccrf-hero { position: relative; background: #141937; overflow: hidden; display: flex; align-items: center; min-height: clamp(500px, 62cqi, 648px); }
.ccrf-hero--page  { min-height: clamp(420px, 52cqi, 560px); }
.ccrf-hero--event { min-height: clamp(380px, 46cqi, 500px); align-items: flex-end; }
.ccrf-hero__media { position: absolute; inset: 0; }
.ccrf-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ccrf-hero__media--hatch { background-image: repeating-linear-gradient(135deg,#1A2046 0 17px,#1F275500 0,#202a55 17px 34px); }
.ccrf-hero__scrim { position: absolute; inset: 0; background: linear-gradient(95deg,rgba(13,17,42,.95) 0%,rgba(13,17,42,.80) 42%,rgba(13,17,42,.34) 78%,rgba(13,17,42,.20) 100%); }
.ccrf-hero__scrim--event { background: linear-gradient(0deg,rgba(13,17,42,.96) 0%,rgba(13,17,42,.70) 46%,rgba(13,17,42,.30) 100%); }
.ccrf-hero__inner { position: relative; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: clamp(48px, 6cqi, 84px) var(--pad-x); }
.ccrf-hero--page .ccrf-hero__inner  { padding-block: clamp(44px, 5.5cqi, 78px); }
.ccrf-hero--event .ccrf-hero__inner { padding-block: clamp(36px, 4.5cqi, 64px); }
.ccrf-hero__eyebrow { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: #FF6B70; margin-bottom: 24px; }
.ccrf-hero--page .ccrf-hero__eyebrow { margin-bottom: 22px; }
.ccrf-hero__eyebrow::before { content: ""; width: 30px; height: 2px; background: var(--red); flex-shrink: 0; }
.ccrf-hero__title { font-size: clamp(34px, 6.2cqi, 62px); line-height: 1.06; font-weight: 800; letter-spacing: -.02em; color: #fff; margin: 0 0 24px; max-width: 19ch; }
.ccrf-hero--page .ccrf-hero__title  { font-size: clamp(32px, 5.6cqi, 58px); line-height: 1.07; margin-bottom: 22px; }
.ccrf-hero--event .ccrf-hero__title { font-size: clamp(30px, 5cqi, 56px); line-height: 1.07; max-width: 18ch; }
.ccrf-hero__intro { font-size: clamp(16px, 1.65cqi, 20px); line-height: 1.6; color: #C4C9E0; margin: 0 0 34px; max-width: 56ch; }
.ccrf-hero__intro--last { margin-bottom: 0; }
.ccrf-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.ccrf-hero__actions--mb { margin-bottom: 34px; }
.ccrf-hero__btn { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 700; font-size: 16px; color: #fff; background: var(--red); padding: 17px 34px; border-radius: var(--radius); }
.ccrf-hero__btn--ghost { font-weight: 600; padding: 16px 18px; background: transparent; border: 1.5px solid rgba(255,255,255,.34); }
.ccrf-hero__btn-sym { font-size: 18px; }
.ccrf-hero__trust { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; font-size: 13px; font-weight: 500; color: #8C93B8; }
.ccrf-hero__trust span { display: inline-flex; align-items: center; gap: 8px; }
.ccrf-hero__trust span::before { content: ""; width: 7px; height: 7px; background: var(--cyan); display: inline-block; flex-shrink: 0; }
/* Event hero date/time/venue chips */
.ccrf-hero__meta { display: flex; flex-wrap: wrap; gap: 12px 26px; }
.ccrf-hero__chip { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: #E3E7F4; }

/* ------------------------------------------------------------
   Media / image frames
   ------------------------------------------------------------ */
.ccrf-media { aspect-ratio: var(--ar, 16/10); border-radius: var(--radius); overflow: hidden; }
.ccrf-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ccrf-media iframe { width: 100%; height: 100%; border: 0; display: block; }
.ccrf-media--43   { aspect-ratio: 4/3; }
.ccrf-media--11   { aspect-ratio: 1/1; }
.ccrf-media--169  { aspect-ratio: 16/9; }
.ccrf-media--1610 { aspect-ratio: 16/10; }
.ccrf-media--219  { aspect-ratio: 21/9; }
.ccrf-ph { aspect-ratio: var(--ar, auto); }   /* .ccrf-ph base lives in style.css */
.ccrf-ph--blue { background-image: repeating-linear-gradient(135deg,#CCEAF3 0 14px,#D8F0F8 14px 28px); }
.ccrf-ph--blue .ccrf-ph__cap { color: #7FB6CB; }

/* ------------------------------------------------------------
   Split: text + image
   ------------------------------------------------------------ */
.ccrf-split { display: flex; flex-wrap: wrap; gap: clamp(28px, 4cqi, 60px); align-items: center; }
.ccrf-split--reverse { flex-direction: row-reverse; }
.ccrf-split--top { align-items: flex-start; }
.ccrf-split--stretch { align-items: stretch; }
.ccrf-split__text  { flex: 1.1; min-width: 300px; max-width: 640px; }
.ccrf-split__media { flex: 1; min-width: 300px; }
.ccrf-split__media--wide { flex: 1.15; }
.ccrf-split__text--wide  { flex: 1.05; }
.ccrf-split__col-center { display: flex; flex-direction: column; justify-content: center; }
.ccrf-split--mb { margin-bottom: clamp(36px, 4cqi, 60px); }

/* Body copy used in coloured/split sections (not full prose) */
.ccrf-lead { font-size: clamp(15px, 1.55cqi, 17px); line-height: 1.6; color: var(--ink-2); margin: 0 0 24px; max-width: 54ch; }
.ccrf-lead--big { font-size: clamp(15px, 1.6cqi, 18px); line-height: 1.64; color: var(--ink); margin: 0 0 28px; max-width: 48ch; }

/* Bullet list with cyan square markers (AYA points) */
.ccrf-ticks { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 26px; }
.ccrf-ticks li, .ccrf-tick { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; color: var(--navy); font-weight: 600; line-height: 1.4; }
.ccrf-ticks { list-style: none; padding: 0; }
.ccrf-tick::before, .ccrf-ticks li::before { content: ""; width: 7px; height: 7px; background: var(--cyan); margin-top: 6px; flex-shrink: 0; border-radius: 2px; }

/* ------------------------------------------------------------
   Stat strip
   ------------------------------------------------------------ */
.ccrf-stats { background: var(--cream); border-bottom: 1px solid var(--hairline); }
.ccrf-stats__grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.ccrf-stat { padding: clamp(30px, 3cqi, 44px) clamp(16px, 2cqi, 28px); border-right: 1px solid var(--hairline); display: flex; flex-direction: column; align-items: center; text-align: center; }
.ccrf-stat__icon { margin-bottom: 18px; height: 38px; display: flex; align-items: center; }
.ccrf-stat__figure { font-size: clamp(28px, 3.6cqi, 42px); font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--navy); }
.ccrf-stat__figure--kicker { display: flex; flex-direction: column; align-items: center; }
.ccrf-stat__kicker { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px; }
.ccrf-stat__label { font-size: 13.5px; line-height: 1.45; color: var(--muted); margin-top: 14px; font-weight: 500; max-width: 22ch; }

/* ------------------------------------------------------------
   Hairline card grid + feature cards (research / support / included)
   ------------------------------------------------------------ */
.ccrf-cardgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}
.ccrf-cardgrid--280 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ccrf-cardgrid--220 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ccrf-cardgrid--mb { margin-bottom: 40px; }

.ccrf-fcard { text-decoration: none; background: #fff; padding: 34px 30px 30px; display: block; }
.ccrf-fcard--sm { padding: 30px 28px; }
.ccrf-fcard__icon { width: 46px; height: 46px; background: var(--tint, var(--blue-tint)); display: flex; align-items: center; justify-content: center; margin-bottom: 24px; border-radius: var(--radius); }
.ccrf-fcard--sm .ccrf-fcard__icon { margin-bottom: 20px; }
.ccrf-fcard__title { font-size: 20px; font-weight: 700; color: var(--navy); margin-bottom: 12px; letter-spacing: -.01em; }
.ccrf-fcard--sm .ccrf-fcard__title { font-size: 18px; margin-bottom: 9px; }
.ccrf-fcard__body { font-size: 15px; line-height: 1.58; color: var(--ink); margin: 0 0 18px; }
.ccrf-fcard--sm .ccrf-fcard__body { font-size: 14px; line-height: 1.55; margin: 0; }
.ccrf-fcard__cta { font-size: 14px; font-weight: 600; color: var(--red); }
/* Plain (non-card) included-item cell */
.ccrf-cell { background: #fff; padding: 24px; }
.ccrf-cell__title { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 7px; }
.ccrf-cell__body { font-size: 14px; line-height: 1.55; color: var(--ink); margin: 0; }

/* ------------------------------------------------------------
   News / event card grid (separate gapped cards)
   ------------------------------------------------------------ */
.ccrf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(22px, 2.5cqi, 34px); }
.ccrf-grid--300 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ccrf-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* fixed 3-up (collapses below) */
.ccrf-grid--past { opacity: .92; }

/* News / story card */
.ccrf-card { text-decoration: none; display: block; }
.ccrf-card__img { aspect-ratio: 16/10; margin-bottom: 18px; position: relative; border-radius: var(--radius); overflow: hidden; }
.ccrf-card__img--event { aspect-ratio: auto; height: 200px; }
.ccrf-card__img--empty { background-image: repeating-linear-gradient(135deg,#E7DFD4 0 14px,#EFE9DF 14px 28px); }
.ccrf-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ccrf-card__title { font-size: 19px; font-weight: 700; color: var(--navy); line-height: 1.3; margin-bottom: 9px; letter-spacing: -.01em; }
.ccrf-card__title--event { line-height: 1.25; margin-bottom: 8px; }
.ccrf-card__date { font-size: 13px; color: #9499AE; margin-bottom: 16px; }
.ccrf-card__cta { display: inline-block; font-size: 14px; font-weight: 600; color: var(--red); }
.ccrf-card__type { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--type-color, var(--cyan)); margin-bottom: 9px; }
.ccrf-card__place { font-size: 14px; color: #7C8198; margin-bottom: 16px; }
.ccrf-card__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Calendar date chip (event card image) */
.ccrf-datechip { position: absolute; top: 14px; left: 14px; background: var(--navy); padding: 9px 14px; text-align: center; border-radius: var(--radius); }
.ccrf-datechip__day { font-size: 19px; font-weight: 800; color: #fff; line-height: 1; }
.ccrf-datechip__mon { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin-top: 3px; }
.ccrf-datechip__year { font-size: 11px; font-weight: 700; color: #C9CEE4; margin-top: 2px; }

/* ------------------------------------------------------------
   Badges / chips
   ------------------------------------------------------------ */
.ccrf-badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; padding: 6px 12px; border-radius: 3px; }
.ccrf-badge--cat  { background: var(--badge-bg, var(--navy)); }
.ccrf-badge--gold { background: var(--gold); color: var(--navy-deep); font-size: 12px; letter-spacing: .1em; padding: 7px 13px; }
.ccrf-badge--red  { background: var(--red); font-size: 12px; letter-spacing: .1em; padding: 7px 13px; }
.ccrf-badge--fs   { align-self: flex-start; margin-bottom: 24px; }
.ccrf-card__badge { position: absolute; top: 14px; left: 14px; letter-spacing: .07em; padding: 6px 11px; }

/* ------------------------------------------------------------
   Content page: prose body + sticky sidebar (TOC + donate)
   ------------------------------------------------------------ */
.ccrf-cp__body { display: flex; gap: clamp(40px, 5cqi, 80px); align-items: flex-start; }
.ccrf-cp__main { flex: 1; min-width: 0; max-width: 760px; }
.ccrf-cp__main--full { max-width: 820px; margin: 0 auto; --content-maxw: 820px; }
.ccrf-cp__aside { width: 300px; flex-shrink: 0; position: sticky; top: 32px; }
.ccrf-cp__donate--mt { margin-top: 24px; }

.ccrf-toc { border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; }
.ccrf-toc__head { background: var(--cream); padding: 20px 24px; border-bottom: 1px solid var(--hairline); }
.ccrf-toc__head span { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
.ccrf-toc__list { display: flex; flex-direction: column; }
.ccrf-toc-link { padding: 14px 24px; font-size: 14.5px; color: var(--ink); text-decoration: none; border-left: 3px solid transparent; }
.ccrf-toc-link:hover { background: var(--cream); }
.ccrf-toc-link.is-active { color: var(--navy) !important; font-weight: 600; border-left-color: var(--red) !important; background: #fff; }

.wp-link-pages { margin-top: 24px; font-weight: 600; color: var(--navy); }

/* Sticky donate card */
.ccrf-donate-card { background: var(--navy); border-radius: var(--radius); padding: 28px 26px; }
.ccrf-donate-card__title { font-size: 18px; font-weight: 700; color: #fff; letter-spacing: -.01em; margin-bottom: 10px; }
.ccrf-donate-card__body { font-size: 14px; line-height: 1.55; color: #C4C9E0; margin: 0 0 20px; }

/* ------------------------------------------------------------
   Breadcrumbs (light + dark)
   ------------------------------------------------------------ */
.ccrf-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; margin-bottom: 22px; }
.ccrf-breadcrumbs a { color: var(--muted); text-decoration: none; }
.ccrf-breadcrumbs__sep { color: #C9C0B2; }
.ccrf-breadcrumbs__cur { color: var(--navy); font-weight: 600; }
.ccrf-breadcrumbs--dark a { color: #9DA6CC; }
.ccrf-breadcrumbs--dark .ccrf-breadcrumbs__sep { color: #4A5680; }
.ccrf-breadcrumbs--dark .ccrf-breadcrumbs__cur { color: #fff; }

/* ------------------------------------------------------------
   News article: header, hero image, body, author + share, tags
   ------------------------------------------------------------ */
.ccrf-phead__narrow { max-width: 820px; }
.ccrf-badge--mb { margin-bottom: 20px; }
.ccrf-news-hero { padding: clamp(28px, 3.5cqi, 52px) var(--pad-x) 0; background: #fff; }
.ccrf-news-body { padding: clamp(34px, 4cqi, 56px) var(--pad-x) clamp(48px, 6cqi, 92px); background: #fff; }
.ccrf-prose--820 { max-width: 820px; --content-maxw: 820px; }
.ccrf-news-col { max-width: 820px; }

.ccrf-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding-top: 6px; }
.ccrf-byline__author { display: flex; align-items: center; gap: 12px; }
.ccrf-byline__avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background-image: repeating-linear-gradient(135deg,#E2DACE 0 7px,#EFE9DF 7px 14px); flex-shrink: 0; }
.ccrf-byline__avatar img { display: block; width: 44px; height: 44px; }
.ccrf-byline__name { font-size: 14.5px; font-weight: 700; color: var(--navy); line-height: 1.2; }
.ccrf-byline__meta { font-size: 13px; color: var(--muted-2); margin-top: 2px; }

.ccrf-share { display: flex; align-items: center; gap: 9px; margin-left: auto; }
.ccrf-share__label { font-size: 13px; font-weight: 600; color: var(--muted); margin-right: 2px; }
.ccrf-share a { width: var(--share-size, 36px); height: var(--share-size, 36px); border-radius: 50%; background: var(--share-bg, var(--navy)); display: flex; align-items: center; justify-content: center; text-decoration: none; }

.ccrf-figcaption { font-size: 13.5px; color: var(--muted-2); margin-top: 12px; font-weight: 500; }

.ccrf-article-foot { border-top: 1px solid var(--hairline); padding-top: 26px; margin-top: 40px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.ccrf-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.ccrf-tags__label { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); margin-right: 3px; }
.ccrf-tag { text-decoration: none; font-size: 13px; font-weight: 600; color: var(--muted); background: var(--cream); border: 1px solid var(--hairline); padding: 7px 14px; border-radius: 3px; }

/* ------------------------------------------------------------
   CTA band
   ------------------------------------------------------------ */
.ccrf-cta-band { background: var(--red); color: #fff; }
.ccrf-cta-band__inner { max-width: var(--maxw); margin: 0 auto; padding: clamp(26px, 3cqi, 40px) var(--pad-x); display: flex; flex-wrap: wrap; gap: 20px clamp(24px, 4cqi, 48px); align-items: center; justify-content: space-between; }
.ccrf-cta-band__text { flex: 1; min-width: 260px; }
.ccrf-cta-band h2, .ccrf-cta-band__title { font-size: clamp(24px, 3.2cqi, 38px); line-height: 1.1; font-weight: 700; letter-spacing: -.015em; color: #fff; margin: 0; }
.ccrf-cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ccrf-cta-band__btn { white-space: nowrap; }

/* ------------------------------------------------------------
   FAQ accordion (native <details>)
   ------------------------------------------------------------ */
.ccrf-faq-list { border-top: 1px solid var(--hairline); }
.ccrf-faq { border-bottom: 1px solid var(--hairline); }
.ccrf-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer; padding: 20px 2px; list-style: none; }
.ccrf-faq summary::-webkit-details-marker { display: none; }
.ccrf-faq__q { font-size: 16.5px; font-weight: 700; color: var(--navy); letter-spacing: -.01em; }
.ccrf-faq__sign { color: var(--red); flex-shrink: 0; line-height: 1; width: 24px; text-align: center; font-size: 0 !important; }
.ccrf-faq__sign::before { font-size: 26px; }
.ccrf-faq[open] .ccrf-faq__sign::before { content: "−"; }
.ccrf-faq:not([open]) .ccrf-faq__sign::before { content: "+"; }
.ccrf-faq__a { padding: 0 2px 22px; }
.ccrf-faq__a p { font-size: 15px; line-height: 1.65; color: var(--ink); margin: 0; }
.ccrf-faq-contact { margin: 26px 0 40px; font-size: 14.5px; line-height: 1.6; color: var(--ink); }
.ccrf-faq-contact a { color: var(--red); font-weight: 600; text-decoration: none; }

/* ------------------------------------------------------------
   Blockquote section (A: red rule · B: dark feature panel)
   ------------------------------------------------------------ */
.ccrf-bq { margin: 0; padding: 0 0 0 28px; border-left: 3px solid var(--red); }
.ccrf-bq__text { font-size: clamp(19px, 2.2cqi, 24px); line-height: 1.42; font-weight: 600; color: var(--navy); letter-spacing: -.01em; margin: 0 0 12px; }
.ccrf-bq__cite { font-size: 14.5px; font-weight: 600; color: var(--muted); }
.ccrf-quote-feature__text { font-size: clamp(19px, 2.2cqi, 25px); line-height: 1.4; font-weight: 600; color: #fff; letter-spacing: -.01em; margin: 0 0 16px; }
.ccrf-quote-feature__name { font-size: 15px; font-weight: 700; color: #fff; }
.ccrf-quote-feature__role { font-size: 14px; color: #9DA6CC; margin-top: 3px; }

/* ------------------------------------------------------------
   Columns section + form wrappers
   ------------------------------------------------------------ */
.ccrf-columns { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: clamp(28px, 4cqi, 56px); align-items: start; }
.ccrf-form-wrap { max-width: 820px; margin: 0 auto; }
.ccrf-prose--740 { --content-maxw: 740px; }
.ccrf-form-notice { border: 1px dashed #CBBFA9; border-radius: var(--radius); background: var(--cream); padding: 28px; color: var(--muted); }

/* ------------------------------------------------------------
   Event single: body + register card
   ------------------------------------------------------------ */
.ccrf-ev__body { display: flex; gap: clamp(36px, 4.5cqi, 72px); align-items: flex-start; }
.ccrf-ev__main { flex: 1; min-width: 0; max-width: 740px; }
.ccrf-ev__standfirst { font-size: 17px; line-height: 1.72; color: var(--navy); font-weight: 600; margin: 0 0 32px; }
.ccrf-ev__aside { width: 340px; flex-shrink: 0; position: sticky; top: 32px; }
.ccrf-ev-card { border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; }
.ccrf-ev-card__price { background: var(--navy); padding: 26px 28px; }
.ccrf-ev-card__price-label { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.ccrf-ev-card__price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ccrf-ev-card__amount { font-size: 38px; font-weight: 800; color: #fff; letter-spacing: -.02em; line-height: 1; }
.ccrf-ev-card__amount-sub { font-size: 15px; color: #C4C9E0; }
.ccrf-ev-card__price-extra { font-size: 14px; color: #9DA6CC; margin-top: 8px; }
.ccrf-ev-card__body { background: #fff; padding: 24px 28px; }
.ccrf-ev-card__facts { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.ccrf-ev-fact { display: flex; gap: 12px; align-items: flex-start; }
.ccrf-ev-fact svg { flex-shrink: 0; margin-top: 1px; }
.ccrf-ev-fact__label { font-size: 13px; color: var(--muted-2); font-weight: 500; }
.ccrf-ev-fact__value { font-size: 15px; font-weight: 600; color: var(--navy); }
.ccrf-ev-card__note { font-size: 13px; line-height: 1.5; color: var(--muted-2); margin-top: 18px; text-align: center; }
/* Register card buttons (block, card-specific sizing) */
.ccrf-ev-card__btn { display: block; text-align: center; text-decoration: none; font-weight: 700; font-size: 16px; color: #fff; background: var(--red); padding: 15px; border-radius: var(--radius); margin-bottom: 10px; }
.ccrf-ev-card__btn--cal { font-weight: 600; font-size: 14.5px; color: var(--navy); background: transparent; border: 1.5px solid var(--line); padding: 13px; margin-bottom: 0; }
.ccrf-ev-card__btn--fb { display: flex; align-items: center; justify-content: center; gap: 9px; font-weight: 700; font-size: 14.5px; color: #fff; background: var(--cyan); padding: 13px; margin-top: 10px; margin-bottom: 0; }
.ccrf-ev-card__btn--fb svg { flex-shrink: 0; }

/* Event content sections (single-event main column) */
.ccrf-ev-block { margin-bottom: 40px; }
.ccrf-ev-schedule__row { display: flex; gap: 22px; padding: 18px 0; border-bottom: 1px solid var(--hairline); align-items: baseline; }
.ccrf-ev-schedule__time { width: 90px; flex-shrink: 0; font-size: 15px; font-weight: 700; color: var(--red); }
.ccrf-ev-schedule__title { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.ccrf-ev-schedule__desc { font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.ccrf-ev-getting__blurb { font-size: 15px; line-height: 1.6; color: var(--ink); margin: 0 0 40px; }
.ccrf-ev-getting__map--gap { margin-bottom: 18px; }
.ccrf-ev-getting__map--end { margin-bottom: 40px; }

/* ------------------------------------------------------------
   Supporter quote carousel (homepage)
   ------------------------------------------------------------ */
.ccrf-qc { position: relative; color: #fff; margin-top: clamp(32px, 5cqi, 74px); }
.ccrf-qc__bg { position: absolute; inset: 0; background: var(--navy-deep); overflow: hidden; z-index: 0; }
.ccrf-qc__bg::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg,#13204A 0 18px,#0E1A3D00 0,#101d44 18px 36px); opacity: .5; }
.ccrf-qc__row { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; display: flex; flex-wrap: nowrap; align-items: stretch; min-height: clamp(230px, 21cqi, 300px); }
.ccrf-qc__portrait { position: relative; width: clamp(210px, 33cqi, 440px); flex-shrink: 0; align-self: stretch; }
.ccrf-qc__img { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; height: auto; z-index: 3; pointer-events: none; }
.ccrf-qc__content { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 3.4cqi, 46px) clamp(58px, 7cqi, 108px) clamp(24px, 3.4cqi, 46px) clamp(24px, 4cqi, 52px); }
.ccrf-qc__mark { font-size: clamp(40px, 5cqi, 68px); line-height: .5; font-weight: 800; color: var(--red); font-family: Georgia, "Times New Roman", serif; margin-bottom: 12px; }
.ccrf-qc__quote { font-size: clamp(18px, 2.1cqi, 27px); line-height: 1.32; font-weight: 600; color: #fff; letter-spacing: -.01em; margin: 0 0 18px; max-width: 27ch; }
.ccrf-qc__name { font-size: clamp(15px, 1.5cqi, 17px); font-weight: 700; color: #fff; letter-spacing: -.005em; }
.ccrf-qc__role { font-size: clamp(13px, 1.4cqi, 15px); color: #9DA6CC; margin-top: 3px; }
.ccrf-qc__dots { display: flex; gap: 10px; margin-top: 18px; }
.ccrf-qc__dot { width: 11px; height: 11px; border-radius: 50%; border: none; cursor: pointer; padding: 0; background: rgba(255,255,255,.32); }
.ccrf-qc__dot.is-active { background: var(--red); }
.ccrf-qc__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 48px; height: 48px; border-radius: 50%; border: none; background: #fff; color: var(--navy-deep); font-size: 19px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.ccrf-qc__arrow--prev { left: clamp(10px, 1.5cqi, 30px); }
.ccrf-qc__arrow--next { right: clamp(10px, 1.5cqi, 30px); }

/* ------------------------------------------------------------
   Pagination (archives)
   ------------------------------------------------------------ */
.ccrf-empty { font-size: 17px; color: var(--ink); }
.ccrf-empty a { color: var(--red); font-weight: 600; }

/* Archive toolbar: taxonomy filters + content search */
.ccrf-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: clamp(24px, 3cqi, 40px); min-width: 0; }
.ccrf-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px; min-width: 0; }
.ccrf-filter { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ccrf-filter__label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
/* min-width:0 + max-width lets the native select shrink below its intrinsic
   width (Firefox otherwise refuses to, causing overflow on narrow screens). */
.ccrf-filter__select { width: 210px; min-width: 0; max-width: 100%; cursor: pointer; }
.ccrf-search { display: flex; align-items: stretch; gap: 10px; min-width: 0; }
.ccrf-search__input { flex: 1 1 240px; min-width: 0; }   /* shrinkable basis, not a fixed width */
.ccrf-search__btn { padding-block: 0; flex-shrink: 0; }   /* height matches the field via stretch */
/* Match the site's mobile breakpoint (980px): stack the toolbar, lay the
   selects out as an auto-fitting grid (2-up, collapsing to 1-up on small
   phones), and give the search its own full-width row. */
@container (max-width: 980px) {
  .ccrf-toolbar { flex-direction: column; align-items: stretch; }
  .ccrf-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px 14px; width: 100%; }
  .ccrf-filter { min-width: 0; }
  .ccrf-filter__select { min-width: 0; width: 100%; }
  .ccrf-search { width: 100%; }
}
@media (max-width: 980px) {
  .ccrf-toolbar { flex-direction: column; align-items: stretch; }
  .ccrf-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px 14px; width: 100%; }
  .ccrf-filter { min-width: 0; }
  .ccrf-filter__select { min-width: 0; width: 100%; }
  .ccrf-search { width: 100%; }
}

/* Accessibly-hidden label text */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.ccrf-pagination { margin-top: 48px; }
.pagination .nav-links, .navigation .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pagination a, .pagination span, .navigation a, .navigation span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 14px;
  border: 1.5px solid var(--line); border-radius: var(--radius);
  text-decoration: none; font-weight: 600; font-size: 14.5px; color: var(--navy);
}
.pagination .current, .navigation .current { background: var(--navy); color: #fff; border-color: var(--navy); }
.pagination a:hover, .navigation a:hover { border-color: var(--navy); }

/* ------------------------------------------------------------
   WooCommerce wrapper container (woocommerce.php)
   ------------------------------------------------------------ */
.ccrf-wc-wrap { padding: clamp(40px, 5cqi, 80px) var(--pad-x); background: #fff; }

/* ------------------------------------------------------------
   Responsive stacking
   ------------------------------------------------------------ */
@container (max-width: 880px) {
  .ccrf-cp__body { flex-direction: column; }
  .ccrf-cp__aside { width: 100%; position: static; }
}
@media (max-width: 880px) {
  .ccrf-cp__body { flex-direction: column; }
  .ccrf-cp__aside { width: 100%; position: static; }
}
@container (max-width: 900px) {
  .ccrf-ev__body { flex-direction: column; }
  .ccrf-ev__aside { width: 100%; position: static; }
}
@media (max-width: 900px) {
  .ccrf-ev__body { flex-direction: column; }
  .ccrf-ev__aside { width: 100%; position: static; }
}
@container (max-width: 720px) {
  .ccrf-columns { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .ccrf-columns { grid-template-columns: 1fr; }
}
@container (max-width: 620px) {
  .ccrf-share { margin-left: 0; }
}
/* Fixed 3-up grid → 2-up then 1-up on smaller screens. */
@container (max-width: 900px) { .ccrf-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px)     { .ccrf-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 600px) { .ccrf-grid--3 { grid-template-columns: 1fr; } }
@media (max-width: 600px)     { .ccrf-grid--3 { grid-template-columns: 1fr; } }

/* Text+image splits stack on mobile. The base split classes wrap via
   min-width, but the --wide variants (e.g. Life Beyond Treatment) have none,
   so force a clean vertical stack here. */
@container (max-width: 720px) {
  .ccrf-split, .ccrf-split--reverse { flex-direction: column; }
  .ccrf-split > * { flex: none; width: 100%; min-width: 0; max-width: none; }
}
@media (max-width: 720px) {
  .ccrf-split, .ccrf-split--reverse { flex-direction: column; }
  .ccrf-split > * { flex: none; width: 100%; min-width: 0; max-width: none; }
}

/* Supporter-quote carousel stacks on mobile: portrait on top, quote below. */
@container (max-width: 720px) {
  .ccrf-qc__row { flex-direction: column; min-height: 0; }
  .ccrf-qc__portrait { width: 100%; height: 240px; }
  .ccrf-qc__img { height: 100%; width: auto; max-width: 100%; }
  .ccrf-qc__content { padding: 30px clamp(20px, 6cqi, 32px) 36px; }
  .ccrf-qc__arrow { display: none; }   /* navigate via the dots on mobile */
}
@media (max-width: 720px) {
  .ccrf-qc__row { flex-direction: column; min-height: 0; }
  .ccrf-qc__portrait { width: 100%; height: 240px; }
  .ccrf-qc__img { height: 100%; width: auto; max-width: 100%; }
  .ccrf-qc__content { padding: 30px 22px 36px; }
  .ccrf-qc__arrow { display: none; }
}

/* ------------------------------------------------------------
   Timeline section — horizontal scroll region with a spine + dot
   per milestone. The viewport bleeds to the right viewport edge;
   the first card aligns with the content column (--tl-edge equals
   the .ccrf-wrap left offset). The page never scrolls sideways.
   ------------------------------------------------------------ */
.ccrf-sec-intro--flush { margin-bottom: 0; }

.ccrf-tl__nav { display: flex; gap: 10px; }
.ccrf-tl__arrow {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--line); background: #fff; color: var(--navy);
  font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ccrf-tl__arrow:hover:not(:disabled) { border-color: var(--navy); }
.ccrf-tl__arrow:disabled { opacity: .35; cursor: default; }

.ccrf-tl { --tl-edge: max(var(--pad-x), calc((100% - var(--maxw)) / 2)); }
.ccrf-tl__clip { position: relative; margin-inline: calc(-1 * var(--pad-x)); }
/* Right-edge fade signals there is more to scroll; hidden at the end. */
.ccrf-tl__clip::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0;
  width: clamp(48px, 8cqi, 120px);
  background: linear-gradient(to right, transparent, var(--bg, #fff));
  pointer-events: none; transition: opacity .25s; z-index: 2;
}
.ccrf-tl.is-end .ccrf-tl__clip::after { opacity: 0; }

.ccrf-tl__viewport {
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-inline-start: var(--tl-edge);
  scrollbar-width: none;               /* Firefox */
}
.ccrf-tl__viewport::-webkit-scrollbar { display: none; }
.ccrf-tl__viewport:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }

.ccrf-tl__track {
  position: relative;
  display: flex; gap: clamp(18px, 2.2cqi, 30px);
  width: max-content;
  margin: 0; list-style: none;
  padding: 0 var(--pad-x) 6px var(--tl-edge);
}
/* The spine — spans the whole scrollable width, lead-in padding included.
   Flag + date sit ABOVE the line; a tail drops from the line to the card. */
.ccrf-tl__track::before {
  content: ""; position: absolute; left: 0; right: 0; top: 30px; height: 2px;
  background: var(--line);
}

.ccrf-tl__node {
  position: relative; flex: 0 0 auto;
  width: min(360px, 82vw);
  padding-top: 44px;
  display: flex; flex-direction: column;
  scroll-snap-align: start;
}
/* Tail: speech-bubble pointer from the card up to the spine — a hairline
   outer triangle with a white inner face that merges into the card body. */
.ccrf-tl__node::after {
  content: ""; position: absolute; left: 10px; top: 30px;
  width: 0; height: 0; z-index: 1;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 14px solid var(--hairline);
}
.ccrf-tl__node::before {
  content: ""; position: absolute; left: 12px; top: 34px;
  width: 0; height: 0; z-index: 2;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 11px solid #fff;
}
.ccrf-tl__marker {                    /* flag marker, planted on the spine */
  position: absolute; top: 8px; left: 0;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
}
.ccrf-tl__marker svg { display: block; }
.ccrf-tl__date {
  position: absolute; top: 8px; left: 23px;
  font-size: 16px; line-height: 21px; font-weight: 800;
  color: var(--navy); letter-spacing: -.01em;
}

.ccrf-tl__card {
  flex: 1; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius);
  overflow: hidden;
}
.ccrf-tl__card .ccrf-media,
.ccrf-tl__card .ccrf-ph { border-radius: 0; flex-shrink: 0; }
.ccrf-tl__card-body { padding: 22px 24px 26px; }
.ccrf-tl__title { font-size: 19px; font-weight: 700; color: var(--navy); letter-spacing: -.01em; margin-bottom: 10px; }
.ccrf-tl__text { font-size: 14.5px; line-height: 1.6; color: var(--ink); }
.ccrf-tl__text p { margin: 0 0 10px; }
.ccrf-tl__text p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------
   Native theme form controls (search, comments) — same --field-*
   tokens as Gravity Forms and WooCommerce so every field matches.
   ------------------------------------------------------------ */
.ccrf-field,
.search-form input[type="search"],
.search-form input.search-field,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  box-sizing: border-box;
  border: 1px solid var(--field-border-color);
  border-radius: var(--field-radius);
  padding: var(--field-pad);
  font-family: inherit;
  font-size: var(--field-fs);
  color: var(--field-text);
  background: var(--field-bg);
  line-height: 1.5;
  outline: none;
}
.ccrf-field:focus,
.search-form input[type="search"]:focus,
.search-form input.search-field:focus,
.comment-form input:focus,
.comment-form textarea:focus {
  border-color: var(--navy);
  box-shadow: var(--field-focus-ring);
}
.search-form input[type="submit"],
.comment-form input[type="submit"] {
  font-family: inherit; font-weight: 700; font-size: var(--btn-fs);
  color: #fff; background: var(--red); border: none;
  border-radius: var(--btn-radius); padding: var(--btn-pad);
  cursor: pointer; box-shadow: var(--btn-red-shadow);
}
.search-form input[type="submit"]:hover,
.comment-form input[type="submit"]:hover { background: var(--red-hover); }