/* ─────────────────────────────────────────────────────────────
   Christmas Joy for Every Child (2026) — /christmas-joy-for-children/
   and its thank-you variant. Loaded after campaign.css, whose form,
   FAQ and sticky-CTA rules this page reuses. Seasonal layer on the
   site tokens: warm ivory grounds, SSA navy type, restrained evergreen,
   gold used only as hairlines/marks (never as text colour), SSA red
   for donation buttons. No snow, sparkle or looping animation.
   ───────────────────────────────────────────────────────────── */

.xj, .xj-thanks{
  --xj-ivory:   #FBF7EF;
  --xj-ivory-2: #F3ECDF;
  --xj-ever:    #1E4A38;   /* evergreen — 9.6:1 on ivory */
  --xj-ever-2:  #163A2C;
  --xj-gold:    #B8924A;   /* decorative only */
  --xj-radius:  6px;
}
.xj{ background: var(--xj-ivory); }
.xj .h2{ color: var(--navy); }
.xj .h2--light{ color: #fff; }
.xj p{ text-wrap: pretty; }

.xj-eyebrow{
  display: block; margin-bottom: 1rem;
  font: 500 .8125rem/1.5 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--xj-ever);
}
.xj-eyebrow::before{ content: ""; display: inline-block; vertical-align: middle; width: 1.6rem; height: 1px; margin-right: .6rem; background: var(--xj-gold); }
.xj-eyebrow--light{ color: #E9DDC2; }

.xj-narrow{ max-width: 46rem; }
.xj-cta-row{ display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.xj-pull{
  margin-top: 1.5rem; padding-left: 1.1rem; border-left: 2px solid var(--xj-gold);
  font: 500 clamp(1.15rem, 1.05rem + .45vw, 1.4rem)/1.45 var(--display); color: var(--navy);
}
.xj-pull--center{ border: 0; padding: 0; text-align: center; }

/* ── 1. Hero ─────────────────────────────────────────────── */
.xj-hero{ padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 5.5rem); }
.xj-hero__grid{ display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.xj-hero__h{
  font: 500 clamp(2.3rem, 1.6rem + 3.2vw, 4rem)/1.06 var(--display); letter-spacing: -.025em; color: var(--navy);
  text-wrap: balance;
}
.xj-hero__lead{ margin-top: 1.25rem; font-size: clamp(1.125rem, 1.05rem + .3vw, 1.3rem); line-height: 1.6; color: var(--text); max-width: 54ch; }
.xj-hero__p{ margin-top: 1rem; font-size: 1.0313rem; line-height: 1.7; color: var(--text-mid); max-width: 56ch; }
.xj-hero__cta{ display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.9rem; }
.xj-trust{ margin-top: 1.1rem; font-size: .9375rem; color: var(--silver-tx); }
.xj-hero__media{ aspect-ratio: 1 / 1; border-radius: var(--xj-radius); overflow: hidden; box-shadow: 0 30px 60px -36px rgba(16,36,63,.55); }

/* ── Closed state ────────────────────────────────────────── */
.xj-closed{ background: var(--paper); padding-block: clamp(3rem, 6vw, 5rem); border-block: 1px solid var(--xj-ivory-2); }
.xj-closed .lead{ margin-top: 1rem; }
.xj-results{ margin-top: 1.5rem; padding: 1.25rem 1.4rem; background: var(--xj-ivory); border-left: 2px solid var(--xj-gold); }
.xj-results p + p{ margin-top: .75rem; }

/* ── Split sections (2, 7, 8) ────────────────────────────── */
.xj-split{ padding-block: var(--chapter); }
.xj-split:focus{ outline: none; }
.xj-split__grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.xj-split__copy p{ margin-top: 1rem; font-size: 1.0625rem; line-height: 1.75; color: var(--text-mid); max-width: 60ch; }
.xj-split__copy .h2{ margin-bottom: .5rem; }
.xj-split__media{ aspect-ratio: 4 / 3; border-radius: var(--xj-radius); overflow: hidden; }
.xj-split--reverse .xj-split__media{ order: 2; }
.xj-biz{ background: var(--paper); }
.xj-why{ background: var(--xj-ivory); }

.xj-points{ list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .7rem; }
.xj-points li{ position: relative; padding-left: 1.75rem; font-size: 1.0313rem; color: var(--text); }
.xj-points li::before{
  content: ""; position: absolute; left: 0; top: .35em; width: .95rem; height: .5rem;
  border-left: 2px solid var(--xj-ever); border-bottom: 2px solid var(--xj-ever); transform: rotate(-45deg);
}
.xj-ein{ margin-top: 1.25rem !important; font: 500 .875rem/1.4 var(--mono) !important; letter-spacing: .05em; color: var(--navy) !important; }

/* ── 3. How donations help ───────────────────────────────── */
.xj-help{ background: var(--paper); padding-block: var(--chapter); }
.xj-help__head{ display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.xj-help__head .lead{ margin-top: 1rem; }
.xj-help__media{ aspect-ratio: 4 / 3; border-radius: var(--xj-radius); overflow: hidden; }
.xj-cards{ list-style: none; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.xj-card{
  padding: 1.75rem 1.5rem; background: var(--xj-ivory); border-radius: var(--xj-radius);
  border-top: 2px solid var(--xj-ever);
}
.xj-card__ico{ width: 2rem; height: 2rem; fill: none; stroke: var(--xj-ever); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.xj-card__h{ margin-top: 1rem; font: 500 1.25rem/1.3 var(--display); color: var(--navy); }
.xj-card p{ margin-top: .6rem; font-size: 1rem; line-height: 1.65; color: var(--text-mid); }
.xj-help__close{ margin-top: clamp(2rem, 4vw, 3rem); display: grid; justify-items: center; gap: 1.25rem; text-align: center; }

/* ── 4. 140+ and beyond (evergreen block) ────────────────── */
.xj-beyond{ display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); background: var(--xj-ever); color: #fff; }
.xj-beyond__media{ min-height: 100%; aspect-ratio: auto; }
.xj-beyond__copy{ padding: clamp(2.5rem, 6vw, 5.5rem) clamp(1.5rem, 5vw, 5rem); align-self: center; }
.xj-stat{
  font: 500 clamp(4rem, 3rem + 5vw, 7rem)/1 var(--display); letter-spacing: -.03em; color: #F1E6CC;
  margin-bottom: .75rem; font-variant-numeric: tabular-nums;
}
.xj-beyond__copy p:not(.xj-stat):not(.xj-eyebrow){ margin-top: .9rem; font-size: 1.0625rem; line-height: 1.7; color: rgba(255,255,255,.86); max-width: 52ch; }
.xj-beyond__copy .xj-beyond__note{
  margin-top: 1.5rem !important; padding-top: 1.1rem; border-top: 1px solid rgba(232,213,170,.45);
  font: 500 1.2rem/1.45 var(--display) !important; color: #fff !important;
}

/* ── 5. Moments + gallery ────────────────────────────────── */
.xj-moments{ padding-block: var(--chapter); }
.xj-moments__head{ max-width: 46rem; }
.xj-moments__head p{ margin-top: 1rem; font-size: 1.0625rem; line-height: 1.75; color: var(--text-mid); }
.xj .xj-gallery-wrap{ margin: clamp(2rem, 4vw, 3rem) 0 0; }
.xj-gallery{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: .75rem; aspect-ratio: 16 / 8;
}
.xj-gallery__item{ overflow: hidden; border-radius: var(--xj-radius); background: var(--xj-ivory-2); }
.xj-gallery__item--feature{ grid-row: 1 / span 2; }
.xj-gallery__item a{ display: block; width: 100%; height: 100%; cursor: zoom-in; }
.xj-gallery__item img{ transition: transform .5s var(--ease); }
.xj-gallery__item a:hover img{ transform: scale(1.03); }
.xj-gallery__item a:focus-visible{ outline: 3px solid var(--crimson); outline-offset: -3px; }
.xj-gallery__cap{ margin-top: .9rem; font-size: .9375rem; font-style: italic; color: var(--silver-tx); }

/* ── 6. Donation ─────────────────────────────────────────── */
.xj-donate{
  background: var(--xj-ivory-2); padding-block: clamp(3.5rem, 7vw, 6rem);
  border-top: 1px solid rgba(184,146,74,.35);
}
.xj-donate:focus{ outline: none; }
.xj-donate__grid{ display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.xj-donate__intro{ position: sticky; top: calc(var(--head-h) + 2rem); }
.xj-donate__intro p{ margin-top: 1rem; font-size: 1.0625rem; line-height: 1.7; color: var(--text-mid); max-width: 50ch; }
.xj-disclosure{
  margin-top: 1.75rem !important; padding: 1rem 1.1rem; background: rgba(255,255,255,.6);
  border-left: 2px solid var(--xj-ever); font-size: .9375rem !important; line-height: 1.6 !important; color: var(--text) !important;
}
.xj-form{ box-shadow: 0 30px 60px -38px rgba(16,36,63,.45); border-top: 3px solid var(--xj-ever); }
.xj-form .hlf-amount input:checked + span{ background: var(--xj-ever); border-color: var(--xj-ever); }
.xj-form .hlf-amount:hover span{ border-color: var(--xj-ever); }

/* ── 9. FAQ (shared .hlf-faq) ────────────────────────────── */
.xj-faq{ background: var(--paper); }

/* ── 10. Final CTA ───────────────────────────────────────── */
.xj-final{ position: relative; isolation: isolate; color: #fff; padding-block: clamp(5rem, 11vw, 9rem); overflow: hidden; }
.xj-final__media{ position: absolute; inset: 0; z-index: -2; }
.xj-final__scrim{ position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,23,41,.72), rgba(11,23,41,.86)); }
.xj-final__inner{ max-width: 44rem; text-align: center; display: grid; justify-items: center; }
.xj-final .h2{ max-width: 22ch; text-wrap: balance; }
.xj-final__pair{ margin-top: 1.1rem; font: 500 clamp(1.2rem, 1.05rem + .6vw, 1.5rem)/1.45 var(--display); color: #F1E6CC; }
.xj-final__inner > p:not(.xj-final__pair):not(.xj-final__note){ margin-top: 1rem; font-size: 1.0625rem; line-height: 1.7; color: rgba(255,255,255,.86); }
.xj-final .btn{ margin-top: 2rem; }
.xj-final__note{ margin-top: 1rem; font-size: .9688rem; color: rgba(255,255,255,.78); }

/* ── Thank-you page variant ──────────────────────────────── */
.xj-thanks{ max-width: 42rem; text-align: center; padding-block: clamp(3rem, 8vw, 5.5rem); }
.xj-thanks .xj-eyebrow{ justify-content: center; }
.xj-thanks__h{ font: 500 clamp(2rem, 1.5rem + 2.2vw, 2.9rem)/1.12 var(--display); letter-spacing: -.02em; color: var(--navy); text-wrap: balance; }
.xj-thanks__lead{ margin-top: 1.1rem; font-size: 1.1875rem; line-height: 1.6; color: var(--text); }
.xj-thanks p:not(.xj-eyebrow):not(.xj-thanks__lead){ margin-top: .85rem; font-size: 1.0625rem; line-height: 1.7; color: var(--text-mid); }
.xj-thanks .xj-thanks__receipt{ font-size: .9375rem !important; color: var(--silver-tx) !important; }
.xj-share{ margin-top: 2rem; display: grid; justify-items: center; gap: .3rem; }
.xj-btn-lg{ --bh: 3.6rem; padding-inline: 2rem; }
.xj-share__links a{ color: var(--crimson); text-decoration: underline; text-underline-offset: .15em; }
.xj-share__copied{ min-height: 1.4em; font-size: .9375rem; color: var(--xj-ever) !important; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 900px){
  .xj-hero__grid, .xj-split__grid, .xj-help__head, .xj-beyond, .xj-donate__grid{ grid-template-columns: minmax(0, 1fr); }
  /* Mobile: headline + CTA first, then the photo. */
  .xj-hero__media{ aspect-ratio: 4 / 3; }
  .xj-split--reverse .xj-split__media, .xj-why .xj-split__media{ order: 2; }
  .xj-beyond__media{ aspect-ratio: 16 / 10; }
  .xj-donate__intro{ position: static; }
  .xj-cards{ grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px){
  .xj-gallery{ grid-template-columns: 1fr 1fr; grid-template-rows: auto; aspect-ratio: auto; }
  .xj-gallery__item{ aspect-ratio: 1 / 1; }
  .xj-gallery__item--feature{ grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 10; }
}
@media (max-width: 560px){
  .xj-hero__cta .btn, .xj-cta-row .btn{ width: 100%; justify-content: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce){
  .xj-gallery__item img{ transition: none; }
  .xj-gallery__item a:hover img{ transform: none; }
}