/* ==========================================================================
   USA Southern Territory - Our Priorities
   "ALL FOR JESUS"  ·  Priority year: October 2026 - September 2027
   our-priorities-l.css
   --------------------------------------------------------------------------
   All custom classes are namespaced `afj-` so nothing collides with the
   Zesty theme or Bootstrap.

   Priority colors:
     LOVE = red   ·   SERVE = blue   ·   DISCIPLE = gold
   Those three run through the whole page as accents.

   Grid rule: every card grid uses explicit column counts at each breakpoint
   so a row never ends with a single orphan card (no 3+1 or 4+2 wraps).
   ========================================================================== */

/* ---------- 1. Design tokens ---------------------------------------------- */
.afj {
  /* --------------------------------------------------------------------
     The three logo colours, sampled directly from
     Territorial-Priorities-Chart-02-USS.png:
      LOVE #ED3A43  ·  SERVE #142081  ·  DISCIPLE #FECA32
     Use these wherever the page refers to the priorities themselves.
     -------------------------------------------------------------------- */
  --afj-logo-red:   #ED3A43;
  --afj-logo-gold:  #FECA32;
  --afj-logo-blue:  #142081;

  /* LOVE - reds */
  --afj-red:          #B3272C;
  --afj-red-mid:      #C4323B;
  --afj-red-bright:   #ED3A43;
  --afj-red-deep:     #9E1F28;
  --afj-red-darkest:  #7F1B24;

  /* DISCIPLE - golds */
  --afj-gold:         #FECA32;
  --afj-gold-light:   #FDE3A0;
  --afj-gold-pale:    #FFF8E6;
  /* gold-deep carries gold-family TEXT on light surfaces. The logo gold is
     far too light to read (1.6:1 on white), so text uses this darkened
     version: 4.91:1 on #FFF, 4.51:1 on surface-alt, 4.60:1 on gold-pale. */
  --afj-gold-deep:    #8F6B12;

  /* SERVE - blues */
  --afj-navy:         #142081;
  --afj-navy-deep:    #0D1557;
  --afj-blue:         #2B3BC4;
  --afj-blue-pale:    #EEF0FF;

  /* Neutrals */
  --afj-ink:          #17171B;
  --afj-body:         #3F3F49;
  --afj-muted:        #62626F;
  --afj-surface:      #FFFFFF;
  --afj-surface-alt:  #F5F5F7;
  --afj-line:         #E2E2E8;

  /* Elevation */
  --afj-shadow-sm: 0 1px 2px rgba(23,23,27,.06), 0 2px 6px rgba(23,23,27,.05);
  --afj-shadow-md: 0 2px 6px rgba(23,23,27,.07), 0 12px 28px rgba(23,23,27,.09);
  --afj-shadow-lg: 0 6px 18px rgba(23,23,27,.10), 0 28px 60px rgba(23,23,27,.14);

  /* Geometry + rhythm */
  --afj-r-sm: 8px;
  --afj-r:    14px;
  --afj-r-lg: 22px;
  --afj-gap:  clamp(14px, 2vw, 24px);
  --afj-section: clamp(40px, 6vw, 84px);

  color: var(--afj-body);
}

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

.afj img { max-width: 100%; height: auto; }
.afj p { line-height: 1.7; }

.afj h2, .afj h3, .afj h4, .afj h5 {
  color: var(--afj-ink);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.afj a:focus-visible,
.afj button:focus-visible,
.afj [tabindex]:focus-visible {
  outline: 3px solid var(--afj-gold-deep);
  outline-offset: 3px;
  border-radius: 4px;
}
.afj-hero a:focus-visible,
.afj-hero button:focus-visible { outline-color: var(--afj-ink); }
.afj-prayer a:focus-visible,
.afj-set--graphite a:focus-visible,
.afj-set--graphite button:focus-visible { outline-color: var(--afj-gold); }

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

.afj-section { margin: var(--afj-section) 0; }

/* ---------- 2. Balanced grids --------------------------------------------- */
/* Explicit counts only - auto-fit is what leaves orphan cards. */
.afj-g { display: grid; gap: var(--afj-gap); margin: 0; padding: 0; list-style: none; grid-template-columns: 1fr; }

/* 3 items: 1 -> 3 (never 2+1) */
@media (min-width: 880px)  { .afj-g--3 { grid-template-columns: repeat(3, 1fr); } }

/* 4 items: 1 -> 2 -> 4 (never 3+1) */
@media (min-width: 600px)  { .afj-g--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .afj-g--4 { grid-template-columns: repeat(4, 1fr); } }

/* 6 items: 1 -> 2 -> 3 (never 4+2) */
@media (min-width: 620px)  { .afj-g--6 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .afj-g--6 { grid-template-columns: repeat(3, 1fr); } }

/* ---------- 2b. Jump navigation ------------------------------------------- */
/* The page is long by design. Keep the jump links in the page flow, below the
  CMS navigation, while allowing the row to scroll at every viewport width. */
.afj-nav {
  margin: clamp(24px, 3.2vw, 38px) auto var(--afj-section);
  /* Real gutters, so a chip never sits hard against the edge, and
     overflow:hidden so the scrolling row is clipped to the bar instead of
     bleeding past the section. The row itself still scrolls inside. */
  padding: .6rem clamp(12px, 2vw, 18px);
  max-width: 100%;
  overflow: hidden;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--afj-line);
  border-radius: var(--afj-r-lg);
  box-shadow: var(--afj-shadow-sm);
}
.afj-nav__list {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: .4rem;
  margin: 0;
  padding: 0 0 2px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  /* The chips need ~1230px for one row, so they overflow on most laptops and
     every phone. Fading the two edges is what signals there is more to reach:
     the scrollbar alone is easy to miss and a hidden one gives no clue at all.
     Where the row does fit, the chips are centred clear of the edges and the
     fade has nothing to act on, so it is invisible. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 18px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 18px), transparent 100%);
  /* Keep the scrollbar easy to find and drag on desktop. */
  scrollbar-width: auto;
  scrollbar-color: rgba(23,23,27,.3) transparent;
}
.afj-nav__list::-webkit-scrollbar { height: 8px; }
.afj-nav__list::-webkit-scrollbar-track { background: transparent; }
.afj-nav__list::-webkit-scrollbar-thumb {
  background: rgba(23,23,27,.25);
  border-radius: 999px;
}
.afj-nav__list::-webkit-scrollbar-thumb:hover { background: rgba(23,23,27,.45); }
.afj-nav__list > li { scroll-snap-align: center; }

.afj-nav__list a {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  white-space: nowrap;
  padding: .45em .85em;
  font-size: .84rem;
  font-weight: 700;
  color: var(--afj-body);
  text-decoration: none;
  background: var(--afj-surface-alt);
  border: 1px solid var(--afj-line);
  border-radius: 999px;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.afj-nav__list a:hover,
.afj-nav__list a:focus-visible {
  background: var(--afj-ink);
  border-color: var(--afj-ink);
  color: #fff;
}
.afj-nav__list .material-symbols-outlined { font-size: 18px; color: var(--afj-red); }
.afj-nav__list a:hover .material-symbols-outlined,
.afj-nav__list a:focus-visible .material-symbols-outlined { color: var(--afj-gold); }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Section banner: a wide band above a section heading. Deliberately letterboxed
   to 5:2 rather than the photo's native 3:2 - a full-height photo at the top of
   three separate sections would add a lot of scrolling to an already long page.
   object-position is set per image so faces are not cropped out. */
.afj-banner {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 2;
  object-fit: cover;
  margin: 0 0 clamp(22px, 3vw, 34px);
  border-radius: var(--afj-r-lg);
  box-shadow: var(--afj-shadow-md);
  background: var(--afj-surface-alt);
}
@media (max-width: 640px) { .afj-banner { aspect-ratio: 16 / 9; } }

/* ---------- 3. Shared bits ------------------------------------------------ */
.afj-eyebrow {
  display: inline-block;
  font-size: clamp(.7rem, 1.1vw, .8rem);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--afj-gold-deep);
  margin: 0 0 .75rem;
}
.afj-eyebrow--onDark { color: var(--afj-gold); }

.afj-head {
  max-width: 64ch;
  margin: 0 auto clamp(22px, 3.5vw, 40px);
  text-align: center;
}
.afj-head h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-weight: 800;
  margin: 0 0 .6rem;
}
.afj-head p {
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  color: var(--afj-muted);
  margin: 0;
}

/* Tricolor divider - the three priorities, in logo order */
.afj-rule {
  width: 108px;
  height: 4px;
  margin: 0 auto 1.25rem;
  border: 0;
  border-radius: 4px;
  opacity: 1;
  background: linear-gradient(90deg,
    var(--afj-logo-red) 0%, var(--afj-logo-red) 33.33%,
    var(--afj-logo-blue) 33.33%, var(--afj-logo-blue) 66.66%,
    var(--afj-logo-gold) 66.66%, var(--afj-logo-gold) 100%);
}

.afj-lead {
  max-width: 68ch;
  margin: 0 auto 1.4rem;
  font-size: clamp(1.08rem, 1.6vw, 1.3rem);
  line-height: 1.75;
  color: var(--afj-body);
}
.afj-lead strong { color: var(--afj-red); }
.afj-prose {
  max-width: 68ch;
  margin: 0 auto 1.1rem;
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.8;
}

/* Buttons */
.afj-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .8em 1.6em;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .2s ease, background-color .2s ease,
              color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.afj-btn:hover { transform: translateY(-2px); text-decoration: none; }

.afj-btn--gold {
  background: var(--afj-gold);
  color: #3A2A00;
  border-color: var(--afj-gold);
  box-shadow: var(--afj-shadow-sm);
}
.afj-btn--gold:hover,
.afj-btn--gold:focus { background: #E5B844; border-color: #E5B844; color: #2C2000; }

.afj-btn--red {
  background: var(--afj-red);
  color: #fff;
  border-color: var(--afj-red);
  box-shadow: var(--afj-shadow-sm);
}
.afj-btn--red:hover,
.afj-btn--red:focus { background: var(--afj-red-darkest); border-color: var(--afj-red-darkest); color: #fff; }

.afj-btn--navy {
  background: var(--afj-navy);
  color: #fff;
  border-color: var(--afj-navy);
  box-shadow: var(--afj-shadow-sm);
}
.afj-btn--navy:hover,
.afj-btn--navy:focus { background: var(--afj-navy-deep); border-color: var(--afj-navy-deep); color: #fff; }

.afj-btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.7);
}
.afj-btn--ghost:hover,
.afj-btn--ghost:focus { background: #fff; color: var(--afj-navy-deep); border-color: #fff; }

.afj-btn--outline {
  background: transparent;
  color: var(--afj-red);
  border-color: var(--afj-red);
}
.afj-btn--outline:hover,
.afj-btn--outline:focus { background: var(--afj-red); color: #fff; }

.afj-btnRow {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
  margin-top: 1.5rem;
}

.afj .material-symbols-outlined,
.afj .material-icons { vertical-align: middle; line-height: 1; }

/* ---------- 4. Hero (light sand, editorial two-column) -------------------- */
.afj-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(34px, 4.6vw, 58px) clamp(20px, 4vw, 54px) clamp(30px, 4vw, 48px);
  border: 1px solid #E6DCC8;
  border-radius: var(--afj-r-lg);
  color: var(--afj-body);
  /* Light sand, built in layers so the panel has texture rather than sitting
     flat: a fine diagonal pinstripe, two soft highlights and a gentle edge
     vignette. No red, gold or blue anywhere in the backdrop - those belong
     to the priorities themselves. */
  background:
    repeating-linear-gradient(135deg,
      rgba(23,23,27,.028) 0 1px, rgba(23,23,27,0) 1px 10px),
    radial-gradient(60% 55% at 78% 12%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 62%),
    radial-gradient(70% 60% at 10% 92%, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 64%),
    radial-gradient(125% 110% at 50% 40%, rgba(120,98,58,0) 46%, rgba(120,98,58,.1) 100%),
    linear-gradient(135deg, #FDF9F1 0%, #F7F1E4 30%, #EFE7D6 56%, #F6F0E3 80%, #FCF8EF 100%);
  box-shadow: var(--afj-shadow-md);
}

/* Tricolour bar across the very top - LOVE / SERVE / DISCIPLE */
.afj-hero__tri {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  height: 8px;
  background: linear-gradient(90deg,
    var(--afj-logo-red) 0%, var(--afj-logo-red) 33.33%,
    var(--afj-logo-blue) 33.33%, var(--afj-logo-blue) 66.66%,
    var(--afj-logo-gold) 66.66%, var(--afj-logo-gold) 100%);
}

/* Two columns from desktop: wordmark on the left, logo on the right. */
.afj-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 3.6vw, 48px);
  align-items: center;
  text-align: center;
}
@media (min-width: 900px) {
  .afj-hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); text-align: left; }
}

.afj-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem 1.15rem;
  margin: 0 0 1.3rem;
  font-size: clamp(.68rem, 1.1vw, .8rem);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--afj-ink);
  background: #fff;
  border: 1px solid #E6DCC8;
  border-radius: 999px;
  box-shadow: var(--afj-shadow-sm);
}

/* ALL FOR JESUS - poster scale, one uniform all-caps lockup. Every word gets
   identical weight, size and colour: no word outranks another. The caps come
   from text-transform, so the markup stays in normal title case. */
.afj-hero__title {
  margin: 0;
  font-size: clamp(3rem, 10.5vw, 7.2rem);
  font-weight: 900;
  line-height: .84;
  letter-spacing: -0.025em;
  color: var(--afj-ink);
  text-transform: uppercase;
}
.afj-hero__title span { display: block; }

/* Tricolour rule under the lockup */
.afj-hero__underline {
  display: block;
  width: min(290px, 68%);
  height: 9px;
  margin: clamp(18px, 2.4vw, 26px) auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg,
    var(--afj-logo-red) 0%, var(--afj-logo-red) 33.33%,
    var(--afj-logo-blue) 33.33%, var(--afj-logo-blue) 66.66%,
    var(--afj-logo-gold) 66.66%, var(--afj-logo-gold) 100%);
}
@media (min-width: 900px) { .afj-hero__underline { margin-left: 0; } }

.afj-hero__sub {
  max-width: 44ch;
  margin: clamp(18px, 2.2vw, 26px) auto 0;
  font-size: clamp(1.05rem, 1.6vw, 1.26rem);
  font-weight: 500;
  line-height: 1.6;
  color: var(--afj-body);
}
.afj-hero__sub strong { color: var(--afj-ink); font-weight: 800; }
@media (min-width: 900px) { .afj-hero__sub { margin-left: 0; } }

/* The Territorial Priorities logo, framed on its own white card. */
.afj-hero__logo {
  display: block;
  margin: 0 auto;
  padding: clamp(16px, 2.2vw, 26px);
  background: #fff;
  border: 1px solid #E4D9C3;
  border-radius: var(--afj-r-lg);
  box-shadow: var(--afj-shadow-md);
}
.afj-hero__logo img { display: block; width: 100%; height: auto; }

.afj-hero__verse {
  position: relative;
  z-index: 1;
  margin: clamp(16px, 2vw, 22px) 0 0;
  padding: 1.25rem 1.5rem;
  font-size: clamp(1rem, 1.35vw, 1.1rem);
  font-style: italic;
  line-height: 1.75;
  color: var(--afj-ink);
  background: #fff;
  border: 1px solid #E4D9C3;
  border-left: 4px solid var(--afj-ink);
  border-radius: var(--afj-r-sm);
  box-shadow: var(--afj-shadow-sm);
  text-align: left;
}
.afj-hero__verse cite {
  display: block;
  margin-top: .6rem;
  font-style: normal;
  font-weight: 700;
  font-size: .82em;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--afj-muted);
}

/* ---------- 5. The arc: three priorities into one ------------------------- */
.afj-arc__step {
  --accent: var(--afj-muted);
  position: relative;
  padding: clamp(20px, 2.6vw, 28px);
  background: var(--afj-surface);
  /* A border, not a ::before bar: borders follow border-radius exactly, so
     the colour can never square off past the rounded corner. */
  border: 1px solid var(--afj-line);
  border-top: 5px solid var(--accent);
  border-radius: var(--afj-r);
  box-shadow: var(--afj-shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.afj-arc__step:hover { transform: translateY(-3px); box-shadow: var(--afj-shadow-md); }
.afj-arc__step--love     { --accent: var(--afj-red); background: linear-gradient(180deg, #FFF4F4 0%, #fff 55%); }
.afj-arc__step--serve    { --accent: var(--afj-navy); background: linear-gradient(180deg, var(--afj-blue-pale) 0%, #fff 55%); }
.afj-arc__step--disciple { --accent: var(--afj-gold); background: linear-gradient(180deg, var(--afj-gold-pale) 0%, #fff 55%); }

.afj-arc__step--now {
  --accent: var(--afj-logo-gold);
  color: #fff;
  border-color: transparent;
  border-top-color: var(--afj-logo-gold);
  /* Starts at red-deep so the gold label holds 4.89:1 across the sweep. */
  background: linear-gradient(145deg, var(--afj-red-deep) 0%, var(--afj-red-darkest) 100%);
  box-shadow: var(--afj-shadow-md);
}
.afj-arc__step--now .afj-arc__word { color: #fff; }
.afj-arc__step--now .afj-arc__note { color: rgba(255,255,255,.93); }
.afj-arc__step--now .afj-arc__when { color: var(--afj-gold); }

.afj-arc__when {
  display: block;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--afj-muted);
}
.afj-arc__word {
  display: block;
  margin: .4rem 0 .5rem;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 900;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--accent);
}
.afj-arc__step--serve .afj-arc__word { color: var(--afj-navy); }
.afj-arc__step--disciple .afj-arc__word { color: var(--afj-gold-deep); }
.afj-arc__note {
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--afj-body);
}

/* ---------- 6. Scripture cards -------------------------------------------- */
/* Cards cycle the three logo colors so the grid reads as a set. */
.afj-verse {
  --accent: var(--afj-red);
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.8vw, 30px);
  background: var(--afj-surface);
  border: 1px solid var(--afj-line);
  border-top: 5px solid var(--accent);
  border-radius: var(--afj-r);
  box-shadow: var(--afj-shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.afj-verse:hover { transform: translateY(-3px); box-shadow: var(--afj-shadow-md); }
/* Radical followers get a complementary green; the other cards match their priorities. */
.afj-verse:nth-child(1) { --accent: #2F6B55; }
.afj-verse:nth-child(2) { --accent: var(--afj-red); }
.afj-verse:nth-child(3) { --accent: var(--afj-navy); }
.afj-verse:nth-child(4) { --accent: var(--afj-gold); }

.afj-verse__ref {
  align-self: flex-start;
  margin-bottom: .9rem;
  padding: .32rem .85rem;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  border-radius: 999px;
}
.afj-verse:nth-child(4) .afj-verse__ref { background: var(--afj-gold-deep); }

.afj-verse blockquote {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.7;
  color: var(--afj-ink);
}
.afj-verse__cite {
  margin: auto 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--afj-line);
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--afj-muted);
}

/* Standalone logo mark, used inside a section rather than the hero. */
.afj-logoMark {
  max-width: 460px;
  margin: 0 auto clamp(26px, 3.4vw, 40px);
  padding: clamp(14px, 2vw, 22px);
  background: #fff;
  border: 1px solid var(--afj-line);
  border-radius: var(--afj-r-lg);
  box-shadow: var(--afj-shadow-sm);
}
.afj-logoMark img { display: block; width: 100%; height: auto; }

/* ---------- 7. The three priorities --------------------------------------- */
/* No accent bar: each card is topped by its own campaign image, which
   already carries the colour. The priority colour still reads through the
   icon, the heading and the wash behind the body text. */
.afj-pillar {
  --accent: var(--afj-red);
  --wash: #FFF4F4;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: #fff;
  border: 1px solid var(--afj-line);
  border-radius: var(--afj-r-lg);
  box-shadow: var(--afj-shadow-sm);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.afj-pillar:hover,
.afj-pillar:focus-within { transform: translateY(-4px); box-shadow: var(--afj-shadow-md); }
.afj-pillar--love     { --accent: var(--afj-red);  --wash: #FFF4F4; }
.afj-pillar--serve    { --accent: var(--afj-navy); --wash: var(--afj-blue-pale); }
.afj-pillar--disciple { --accent: var(--afj-gold); --wash: var(--afj-gold-pale); }

/* These three are 16:9 title cards with centred wording, so the frame is
   locked to 16/9. Any other ratio would crop the words off the edges.
   object-fit:cover then fills it exactly, with no crop at all. */
.afj-pillar__media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--wash);
}
/* Fallback for engines without aspect-ratio: a padding box of the same shape */
@supports not (aspect-ratio: 16 / 9) {
  .afj-pillar__media { height: auto; }
}

.afj-pillar__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: clamp(22px, 2.8vw, 32px);
  background: linear-gradient(180deg, var(--wash) 0%, #fff 46%);
}

.afj-pillar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-bottom: 1.1rem;
  border-radius: 18px;
  color: #fff;
  background: var(--accent);
  box-shadow: var(--afj-shadow-sm);
}
.afj-pillar--serve .afj-pillar__icon { background: var(--afj-navy); }
.afj-pillar--disciple .afj-pillar__icon { background: var(--afj-gold-deep); }
.afj-pillar__icon .material-symbols-outlined { font-size: 31px; }

.afj-pillar__name {
  margin: 0 0 .2rem;
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  font-weight: 900;
  letter-spacing: -0.015em;
  color: var(--accent);
  text-transform: uppercase;
}
.afj-pillar--serve .afj-pillar__name { color: var(--afj-navy); }
.afj-pillar--disciple .afj-pillar__name { color: var(--afj-gold-deep); }

.afj-pillar__areas {
  margin: 0 0 1rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--afj-muted);
}
.afj-pillar__verse {
  margin: 0 0 1rem;
  font-size: .98rem;
  font-style: italic;
  line-height: 1.65;
  color: var(--afj-ink);
}
.afj-pillar__verse cite {
  display: block;
  margin-top: .4rem;
  font-style: normal;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
.afj-pillar--serve .afj-pillar__verse cite { color: var(--afj-navy); }
.afj-pillar--disciple .afj-pillar__verse cite { color: var(--afj-gold-deep); }

.afj-pillar__quote {
  margin: auto 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--afj-line);
  font-size: .98rem;
  line-height: 1.65;
  color: var(--afj-body);
}

/* ---------- 8. Reflection journey ----------------------------------------- */
/* The step number is an absolutely-positioned badge hanging 16px above each
   card, so these rows need more room than the default grid gap: at the
   12-24px default the badge crowded the card above it. Rows get their own
   generous gap, columns keep the normal one. */
.afj-journey {
  counter-reset: afj-j;
  margin-top: clamp(22px, 2.6vw, 30px);
  row-gap: clamp(32px, 3.6vw, 42px);
  column-gap: var(--afj-gap);
}
.afj-journey > li {
  --accent: var(--afj-red);
  counter-increment: afj-j;
  position: relative;
  padding: clamp(22px, 2.8vw, 30px);
  padding-top: clamp(36px, 4vw, 44px);
  background: var(--afj-surface);
  border: 1px solid var(--afj-line);
  border-radius: var(--afj-r);
  box-shadow: var(--afj-shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.afj-journey > li:hover { transform: translateY(-3px); box-shadow: var(--afj-shadow-md); }
/* Be All In is complementary; Love / Serve / Disciple match their priority colors. */
.afj-journey > li:nth-child(1) { --accent: #2F6B55; }
.afj-journey > li:nth-child(2) { --accent: var(--afj-red); }
.afj-journey > li:nth-child(3) { --accent: var(--afj-navy); }
.afj-journey > li:nth-child(4) { --accent: var(--afj-gold-deep); }

.afj-journey > li::before {
  content: counter(afj-j);
  position: absolute;
  top: -16px;
  left: clamp(20px, 2.8vw, 28px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 1.1rem;
  font-weight: 900;
  color: #fff;
  background: var(--accent);
  border: 3px solid var(--afj-surface);
  border-radius: 50%;
}
.afj-journey h3 {
  margin: 0 0 .5rem;
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--accent);
}
.afj-journey__read {
  margin: 0 0 .7rem;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--afj-muted);
}
.afj-journey__ask {
  margin: 0;
  padding-top: .85rem;
  border-top: 1px solid var(--afj-line);
  font-size: .96rem;
  font-style: italic;
  line-height: 1.65;
  color: var(--afj-body);
}

/* ---------- 9. Supporting cards ------------------------------------------- */
.afj-card {
  --accent: var(--afj-gold);
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.6vw, 30px);
  background: var(--afj-surface);
  border: 1px solid var(--afj-line);
  border-top: 5px solid var(--accent);
  border-radius: var(--afj-r);
  box-shadow: var(--afj-shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.afj-card:hover { transform: translateY(-3px); box-shadow: var(--afj-shadow-md); }
.afj-card:nth-child(4n+1) { --accent: var(--afj-red); }
.afj-card:nth-child(4n+2) { --accent: var(--afj-gold); }
.afj-card:nth-child(4n+3) { --accent: var(--afj-navy); }
.afj-card:nth-child(4n+4) { --accent: var(--afj-red-bright); }

.afj-card h3 {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 .7rem;
  font-size: 1.14rem;
  font-weight: 800;
}
.afj-card h3 .material-symbols-outlined { color: var(--accent); font-size: 25px; }
.afj-card:nth-child(4n+2) h3 .material-symbols-outlined { color: var(--afj-gold-deep); }
.afj-card p { margin: 0; font-size: .97rem; color: var(--afj-body); }
.afj-card__link {
  margin-top: auto;
  padding-top: 1rem;
  font-weight: 700;
  font-size: .95rem;
  color: var(--afj-red);
  text-decoration: none;
}
.afj-card__link:hover { text-decoration: underline; }

/* Photo cards: the image is full-bleed, so padding moves to an inner body.
   No accent bar either - the photo carries the top of the card, the same
   rule the pillar cards follow. */
.afj-card--photo {
  padding: 0;
  overflow: hidden;
  border-top: 1px solid var(--afj-line);
}
.afj-card--photo .afj-card__media {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--afj-surface-alt);
}
.afj-card--photo .afj-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: clamp(20px, 2.4vw, 26px);
}

/* These are 3:2 photographs, shorter than the 4:5 campaign slides. */
.afj-photos .afj-rail__item img { height: clamp(190px, 28vw, 260px); }
.afj-photos .afj-railHint { color: var(--afj-muted); }
.afj-photos .afj-rail::-webkit-scrollbar-track { background: rgba(23,23,27,.08); }
.afj-photos .afj-rail::-webkit-scrollbar-thumb { background: rgba(23,23,27,.3); }

/* Prayer circle photo */
.afj .afj-prayer__photo {
  display: block;
  width: 100%;
  max-width: 900px;
  margin: clamp(20px, 2.6vw, 28px) auto 0;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--afj-r);
  box-shadow: var(--afj-shadow-md);
}

/* ---------- 10. Share row ------------------------------------------------- */
.afj-share {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 3.8vw, 48px) clamp(20px, 3vw, 40px);
  text-align: center;
  /* Cool stone rather than the gold-tinted white it had: the centennial band
     directly below is cream, and the two were reading as one long warm block.
     Texture comes from a fine cross-hatch plus two soft highlights, so the
     panel has a surface instead of being flat fill. */
  background:
    repeating-linear-gradient(45deg,  rgba(23,23,27,.022) 0 1px, rgba(23,23,27,0) 1px 9px),
    repeating-linear-gradient(-45deg, rgba(23,23,27,.018) 0 1px, rgba(23,23,27,0) 1px 9px),
    radial-gradient(60% 55% at 15% 10%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 62%),
    radial-gradient(65% 55% at 88% 92%, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 64%),
    linear-gradient(150deg, #F2F3F6 0%, #E9EBF0 45%, #EFF0F4 75%, #E6E8EE 100%);
  border: 1px solid #DCDEE6;
  border-radius: var(--afj-r-lg);
  box-shadow: var(--afj-shadow-sm);
}
/* tricolour keyline, matching the other feature panels */
.afj-share::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg,
    var(--afj-logo-red) 0%, var(--afj-logo-red) 33.33%,
    var(--afj-logo-blue) 33.33%, var(--afj-logo-blue) 66.66%,
    var(--afj-logo-gold) 66.66%, var(--afj-logo-gold) 100%);
}
.afj-share > * { position: relative; z-index: 1; }

/* --afj-gold-deep reaches only 3.86:1 on this stone, so these two go darker. */
.afj-share .afj-eyebrow { color: #6E5210; }

.afj-shareBtns {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: center;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
/* An author rule that sets display beats the UA stylesheet's
   [hidden] { display: none }, so anything hidden in here must say so
   explicitly or it will show up anyway. */
.afj-shareBtns [hidden] { display: none !important; }

.afj-shareBtns a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .7em 1.3em;
  font-size: .95rem;
  font-weight: 700;
  color: var(--afj-ink);
  background: var(--afj-surface);
  border: 1px solid var(--afj-line);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease,
              border-color .2s ease, transform .2s ease;
}
.afj-shareBtns a:hover {
  background: var(--afj-red);
  border-color: var(--afj-red);
  color: #fff;
  transform: translateY(-2px);
}
.afj-shareBtns .material-symbols-outlined { font-size: 20px; }
/* visible edge against the stone panel */
.afj-share .afj-shareBtns a { border-color: #C9CCD7; }

/* ---------- 11. Slide-series panels --------------------------------------
   Two carousel sections, built like the LOVE panel they replace: a full
   width colour panel carrying a heading and a horizontal rail. They are
   deliberately unlike each other and neither is red - one warm and light,
   one deep and cool - so the page does not read as two of the same thing.
   ------------------------------------------------------------------------ */
.afj-set {
  position: relative;
  overflow: hidden;
  padding: clamp(30px, 4vw, 54px) clamp(20px, 3.5vw, 44px) clamp(26px, 3.4vw, 42px);
  text-align: center;
  border-radius: var(--afj-r-lg);
  background-size: 300% 300%;
  animation: afj-iridescent 18s ease infinite;
  box-shadow: var(--afj-shadow-lg);
}
.afj-set > * { position: relative; z-index: 1; }

/* LOVE / SERVE / DISCIPLE keyline across the top of each panel */
.afj-set__tri {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  height: 7px;
  background: linear-gradient(90deg,
    var(--afj-logo-red) 0%, var(--afj-logo-red) 33.33%,
    var(--afj-logo-blue) 33.33%, var(--afj-logo-blue) 66.66%,
    var(--afj-logo-gold) 66.66%, var(--afj-logo-gold) 100%);
}

.afj-set h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  font-weight: 900;
  margin: 0 0 .7rem;
}
.afj-set__tag {
  display: inline-block;
  padding: .36rem 1.05rem;
  margin: 0 0 1rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-radius: 999px;
}
.afj-set__lead {
  max-width: 68ch;
  margin: 0 auto;
  font-size: clamp(1.05rem, 1.6vw, 1.26rem);
  line-height: 1.7;
}
.afj-set__close {
  max-width: 66ch;
  margin: clamp(18px, 2.4vw, 26px) auto 0;
  font-size: clamp(1rem, 1.4vw, 1.14rem);
  line-height: 1.7;
}

/* --- How Much Is All?  (warm, light, ink type) --- */
.afj-set--amber {
  color: #3A2A00;
  background-image:
    radial-gradient(60% 50% at 85% 6%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(135deg, #FFE39B 0%, #FFD36B 28%, var(--afj-logo-gold) 55%, #F0AE1C 80%, #DC9A12 100%);
}
.afj-set--amber h2 { color: #2E2100; }
.afj-set--amber .afj-set__lead,
.afj-set--amber .afj-set__close { color: #3A2A00; }
.afj-set--amber .afj-set__lead strong,
.afj-set--amber .afj-set__close strong { color: #1F1600; }
.afj-set--amber .afj-set__tag { color: #fff; background: var(--afj-red); }
.afj-set--amber .afj-railHint { color: #4A3600; }
.afj-set--amber .afj-rail::-webkit-scrollbar-track { background: rgba(58,42,0,.16); }
.afj-set--amber .afj-rail::-webkit-scrollbar-thumb { background: rgba(58,42,0,.5); }

/* --- What Does God Require?  (deep neutral graphite, white type)
   Neutral on purpose: the six slides in this rail run red, navy, gold and
   cream, so a coloured panel fought them. Graphite also keeps it clear of
   the blue already used by the prayer and social panels. --- */
.afj-set--graphite {
  color: #fff;
  background-image:
    radial-gradient(62% 52% at 86% 6%, rgba(254,202,50,.2) 0%, rgba(254,202,50,0) 58%),
    radial-gradient(58% 50% at 10% 96%, rgba(237,58,67,.14) 0%, rgba(237,58,67,0) 60%),
    linear-gradient(135deg, #22242C 0%, #2E313C 26%, #1C1E25 54%, #292C36 78%, #191B21 100%);
}
.afj-set--graphite h2 { color: #fff; }
.afj-set--graphite .afj-set__lead,
.afj-set--graphite .afj-set__close { color: rgba(255,255,255,.94); }
.afj-set--graphite .afj-set__lead strong,
.afj-set--graphite .afj-set__close strong { color: #fff; }
.afj-set--graphite .afj-set__tag { color: #22242C; background: var(--afj-logo-gold); }
.afj-set--graphite .afj-railHint { color: rgba(255,255,255,.9); }

/* The slides are 4:5 portrait cards, so give the rail a little more height. */
.afj-set .afj-rail__item img { height: clamp(300px, 52vw, 440px); }

.afj-hashtag {
  display: inline-block;
  margin-top: 1rem;
  padding: .6rem 1.4rem;
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  font-weight: 900;
  letter-spacing: .02em;
  color: var(--afj-gold);
  /* .45 scrim keeps the gold at ~6:1 even over the brightest red */
  background: rgba(0,0,0,.45);
  border: 1px dashed rgba(242,199,93,.6);
  border-radius: 999px;
}

/* ---------- 12. Image rail + lightbox ------------------------------------- */
.afj-railHint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  margin: 1.2rem 0 .6rem;
  font-size: .85rem;
  color: rgba(255,255,255,.92);
}
.afj-rail {
  display: flex;
  gap: 14px;
  padding: 6px 2px 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.afj-rail::-webkit-scrollbar { height: 8px; }
.afj-rail::-webkit-scrollbar-track { background: rgba(255,255,255,.2); border-radius: 4px; }
.afj-rail::-webkit-scrollbar-thumb { background: var(--afj-gold); border-radius: 4px; }
.afj-rail::-webkit-scrollbar-thumb:hover { background: #fff; }

.afj-rail__item {
  flex: 0 0 auto;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  border-radius: var(--afj-r);
  cursor: zoom-in;
  scroll-snap-align: center;
  transition: transform .25s ease;
}
.afj-rail__item img {
  display: block;
  height: clamp(220px, 34vw, 340px);
  width: auto;
  border-radius: var(--afj-r);
  box-shadow: var(--afj-shadow-md);
}
.afj-rail__item:hover,
.afj-rail__item:focus-visible { transform: scale(1.03); }

.afj-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10,8,9,.94);
}
.afj-lightbox.is-open { display: flex; }
.afj-lightbox img {
  max-width: min(94vw, 1400px);
  max-height: 84vh;
  border-radius: var(--afj-r);
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.afj-lightbox__btn {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--afj-ink);
  background: rgba(255,255,255,.92);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.afj-lightbox__btn:hover { background: #fff; transform: scale(1.08); }
.afj-lightbox__close { top: 20px; right: 20px; }
.afj-lightbox__prev  { top: 50%; left: 20px;  transform: translateY(-50%); }
.afj-lightbox__next  { top: 50%; right: 20px; transform: translateY(-50%); }
.afj-lightbox__prev:hover { transform: translateY(-50%) scale(1.08); }
.afj-lightbox__next:hover { transform: translateY(-50%) scale(1.08); }
.afj-lightbox__count {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  padding: .35rem .9rem;
  font-size: .85rem;
  font-weight: 600;
  color: #fff;
  background: rgba(255,255,255,.16);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

/* ---------- 13. Centennial feature (light + celebratory) ------------------ */
.afj-cent {
  position: relative;
  overflow: hidden;
  padding: clamp(32px, 4.5vw, 62px) clamp(20px, 3.5vw, 48px);
  border-radius: var(--afj-r-lg);
  /* Warm cream rather than near-black: this is a celebration, and the page
     needed light between the red and navy panels. */
  background:
    radial-gradient(70% 55% at 85% 4%, rgba(43,59,196,.1) 0%, rgba(43,59,196,0) 58%),
    radial-gradient(75% 60% at 10% 100%, rgba(179,39,44,.1) 0%, rgba(179,39,44,0) 60%),
    linear-gradient(165deg, #FFFCF4 0%, var(--afj-gold-pale) 55%, #FDEFD0 100%);
  border: 1px solid var(--afj-gold-light);
  box-shadow: var(--afj-shadow-md);
}
.afj-cent::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 7px;
  background: linear-gradient(90deg,
    var(--afj-red) 0%, var(--afj-red) 33.33%,
    var(--afj-gold) 33.33%, var(--afj-gold) 66.66%,
    var(--afj-navy) 66.66%, var(--afj-navy) 100%);
}
.afj-cent > * { position: relative; z-index: 1; }
.afj-cent h2 { color: var(--afj-red-darkest); }
.afj-cent .afj-head p { color: var(--afj-body); }


/* The official Centennial Celebration lockup. It already carries the 100,
   the theme and the event name, so the hand-built numeral it replaced is gone. */
.afj-centLogo {
  max-width: min(560px, 86%);
  margin: 0 auto clamp(14px, 1.8vw, 20px);
}
.afj-centLogo img { display: block; width: 100%; height: auto; }
.afj-centLogo figcaption {
  margin-top: .25rem;
  text-align: center;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--afj-gold-deep);
}

.afj-cent__intro {
  max-width: 68ch;
  margin: 0 auto 1.6rem;
  text-align: center;
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.75;
  color: var(--afj-body);
}

.afj-cent__quote {
  max-width: 62ch;
  margin: 0 auto 1.9rem;
  padding: 1.4rem 1.6rem;
  text-align: left;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  font-style: italic;
  line-height: 1.75;
  color: var(--afj-ink);
  background: #fff;
  border-left: 5px solid var(--afj-red);
  border-radius: var(--afj-r-sm);
  box-shadow: var(--afj-shadow-sm);
}
.afj-cent__quote cite {
  display: block;
  margin-top: .7rem;
  font-style: normal;
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--afj-red);
}

.afj-cent__when {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .6rem clamp(14px, 2.4vw, 30px);
  max-width: 760px;
  margin: 0 auto clamp(24px, 3.5vw, 36px);
  padding: 1.1rem 1.3rem;
  background: var(--afj-navy);
  border-radius: var(--afj-r);
  box-shadow: var(--afj-shadow-sm);
}
.afj-cent__when div {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: clamp(.95rem, 1.4vw, 1.08rem);
  font-weight: 700;
  color: #fff;
}
.afj-cent__when .material-symbols-outlined { color: var(--afj-gold); font-size: 23px; }

.afj-cent__list li {
  --accent: var(--afj-red);
  display: flex;
  gap: .75rem;
  padding: 1.1rem 1.2rem;
  font-size: .97rem;
  line-height: 1.6;
  color: var(--afj-body);
  background: #fff;
  border: 1px solid var(--afj-line);
  border-left: 4px solid var(--accent);
  border-radius: var(--afj-r-sm);
  box-shadow: var(--afj-shadow-sm);
  text-align: left;
}
.afj-cent__list li:nth-child(3n+2) { --accent: var(--afj-gold); }
.afj-cent__list li:nth-child(3n+3) { --accent: var(--afj-navy); }
.afj-cent__list strong { display: block; color: var(--afj-ink); margin-bottom: .2rem; }
.afj-cent__list .material-symbols-outlined { color: var(--accent); font-size: 23px; flex: 0 0 auto; }
.afj-cent__list li:nth-child(3n+2) .material-symbols-outlined { color: var(--afj-gold-deep); }

/* ---------- 13b. Article links -------------------------------------------- */
.afj-reads {
  display: grid;
  gap: 10px;
  max-width: 760px;
  margin: clamp(16px, 2.2vw, 22px) auto 0;
  padding: 0;
  list-style: none;
}
.afj-reads__lead {
  max-width: 68ch;
  margin: clamp(22px, 3vw, 32px) auto 0;
  text-align: center;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  /* red, not gold-deep: gold-deep only reaches 4.31:1 on the cream panel */
  color: var(--afj-red);
}
.afj-reads a {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .9rem 1.1rem;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--afj-line);
  border-left: 4px solid var(--afj-red);
  border-radius: var(--afj-r-sm);
  box-shadow: var(--afj-shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.afj-reads a:hover { transform: translateY(-2px); box-shadow: var(--afj-shadow-md); }
.afj-reads__text { display: flex; flex-direction: column; min-width: 0; }
.afj-reads__title {
  font-size: .99rem;
  font-weight: 800;
  line-height: 1.4;
  color: var(--afj-ink);
}
.afj-reads a:hover .afj-reads__title { color: var(--afj-red); }
.afj-reads__meta {
  margin-top: .15rem;
  font-size: .8rem;
  color: var(--afj-muted);
}
.afj-reads__icon { color: var(--afj-red); flex: 0 0 auto; }
.afj-reads__go { margin-left: auto; color: var(--afj-muted); flex: 0 0 auto; font-size: 20px; }

/* On the blue prayer panel */
.afj-reads--onDark { margin-bottom: .5rem; }
.afj-reads--onDark a {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.22);
  border-left: 4px solid var(--afj-gold);
  box-shadow: none;
}
.afj-reads--onDark a:hover { background: rgba(255,255,255,.17); }
.afj-reads--onDark .afj-reads__title,
.afj-reads--onDark a:hover .afj-reads__title { color: #fff; }
.afj-reads--onDark .afj-reads__meta { color: rgba(255,255,255,.8); }
.afj-reads--onDark .afj-reads__icon,
.afj-reads--onDark .afj-reads__go { color: var(--afj-gold); }

/* ---------- 14. Prayer initiative (blue) ---------------------------------- */
.afj-prayer {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 4vw, 56px) clamp(20px, 3.5vw, 48px);
  color: #fff;
  border-radius: var(--afj-r-lg);
  background:
    radial-gradient(65% 55% at 85% 6%, rgba(242,199,93,.26) 0%, rgba(242,199,93,0) 58%),
    radial-gradient(60% 50% at 8% 95%, rgba(236,59,67,.24) 0%, rgba(236,59,67,0) 60%),
    linear-gradient(150deg, var(--afj-blue) 0%, var(--afj-navy) 45%, var(--afj-navy-deep) 100%);
  box-shadow: var(--afj-shadow-lg);
  text-align: center;
}
.afj-prayer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 7px;
  background: linear-gradient(90deg,
    var(--afj-red-bright) 0%, var(--afj-red-bright) 33.33%,
    var(--afj-gold) 33.33%, var(--afj-gold) 66.66%,
    #6D7BF0 66.66%, #6D7BF0 100%);
}
.afj-prayer > * { position: relative; z-index: 1; }
.afj-prayer h2, .afj-prayer h3 { color: #fff; }
.afj-prayer h2 { font-size: clamp(1.5rem, 3vw, 2.3rem); font-weight: 800; margin: 0 0 .6rem; }
.afj-prayer p { color: rgba(255,255,255,.95); max-width: 70ch; margin-inline: auto; }

/* The "24/7" digits are a fixed red-to-navy-to-gold gradient in every
   colour variant - only the word PRAYER changes. The navy digits would all
   but disappear on this blue panel, so the lockup sits on a white holder. */
.afj-prayerLogo {
  max-width: 400px;
  margin: 0 auto clamp(18px, 2.4vw, 26px);
  padding: clamp(16px, 2.2vw, 22px) clamp(20px, 3vw, 30px);
  background: #fff;
  border-radius: var(--afj-r);
  box-shadow: var(--afj-shadow-md);
}
.afj-prayerLogo img { display: block; width: 100%; height: auto; }

.afj-prayer__slogan {
  margin: 1.3rem 0 .3rem;
  font-size: clamp(1.15rem, 2.6vw, 1.8rem);
  font-weight: 900;
  letter-spacing: .02em;
  color: var(--afj-gold);
  text-transform: uppercase;
}
.afj-prayer__tag {
  margin: 0;
  font-size: clamp(.95rem, 1.5vw, 1.1rem);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
}

.afj-prayer__verse {
  max-width: 58ch;
  margin: 1.9rem auto;
  padding: 1.3rem 1.5rem;
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  font-style: italic;
  line-height: 1.75;
  color: #fff;
  background: rgba(0,0,0,.26);
  border-left: 4px solid var(--afj-gold);
  border-radius: var(--afj-r-sm);
  text-align: left;
}
.afj-prayer__verse cite {
  display: block;
  margin-top: .6rem;
  font-style: normal;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--afj-gold);
}

.afj-prayer__ways li {
  display: flex;
  gap: .75rem;
  padding: 1.05rem 1.2rem;
  font-size: .96rem;
  line-height: 1.6;
  color: rgba(255,255,255,.95);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--afj-r-sm);
  text-align: left;
}
.afj-prayer__ways strong { display: block; color: #fff; margin-bottom: .2rem; }
.afj-prayer__ways .material-symbols-outlined { color: var(--afj-gold); font-size: 23px; flex: 0 0 auto; }

/* ---------- 15. Generic panels -------------------------------------------- */
.afj-panel {
  padding: clamp(24px, 3.4vw, 42px) clamp(18px, 3vw, 38px);
  border-radius: var(--afj-r-lg);
  box-shadow: var(--afj-shadow-sm);
  text-align: center;
}
.afj-panel--gold {
  background: linear-gradient(150deg, #FFF1CE 0%, var(--afj-gold-light) 55%, var(--afj-gold) 100%);
  border: 1px solid var(--afj-gold-light);
}
.afj-panel--navy  {
  background:
    radial-gradient(60% 50% at 88% 8%, rgba(242,199,93,.2) 0%, rgba(242,199,93,0) 58%),
    linear-gradient(150deg, var(--afj-blue) 0%, var(--afj-navy) 50%, var(--afj-navy-deep) 100%);
}

.afj-panel--gold h2, .afj-panel--gold h3 { color: #3A2A00; }
.afj-panel--gold p { color: #4A3600; }
.afj-panel--navy h2, .afj-panel--navy h3 { color: #fff; }
.afj-panel--navy p { color: rgba(255,255,255,.94); }

.afj-panel__logo { max-width: 300px; margin: 0 auto 1rem; }

.afj-embed { position: relative; width: 100%; overflow: hidden; border-radius: var(--afj-r); }
.afj-embed--4x3 { padding-top: 75%; }
.afj-embed--4x3 iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Third-party portal embed.
   The Ministry Toolkit app has its own fixed header and an inner scrolling
   region. At 600px the app was also taller than the frame, so the iframe
   DOCUMENT scrolled too and you got two bars stacked inside the embed.
   Giving the frame a viewport-relative height lets the app fit, so only its
   own inner scroller remains. */
.afj-embed--portal {
  display: block;
  width: 100%;
  height: min(80vh, 900px);
  min-height: 540px;
  border: 0;
  border-radius: 10px;
  background: #fff;
  /* belt and braces alongside scrolling="no" */
  overflow: hidden;
}
@media (max-width: 575.98px) { .afj-embed--portal { height: 72vh; min-height: 440px; } }

.afj-embed--audio {
  border-radius: var(--afj-r);
  overflow: hidden;
  background: #F5F5F5;
  box-shadow: var(--afj-shadow-sm);
}
.afj-embed--audio + .afj-embed--audio { margin-top: 1rem; }

.afj-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(10px, 2.4vw, 26px);
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}
.afj-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.26);
  transition: background-color .2s ease, transform .2s ease, border-color .2s ease;
}
.afj-social a:hover {
  background: var(--afj-gold);
  border-color: var(--afj-gold);
  transform: translateY(-3px);
}
.afj-social svg { width: 30px; height: 30px; fill: #fff; transition: fill .2s ease; }
.afj-social a:hover svg { fill: var(--afj-navy-deep); }

/* Resource list - compact rows.
   The three artworks are a square badge, a landscape photo and a wide
   wordmark. Each sits in an identical square panel, letterboxed with
   object-fit:contain, so the mismatch stops showing.
   The panel has a DEFINITE width and height and the image is sized
   width:100%/height:100%, which is what guarantees it cannot overflow -
   max-height:100% alone left the image at natural size in some engines and
   it painted straight over the body text. overflow:hidden backs it up. */
.afj-resList {
  display: grid;
  gap: var(--afj-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.afj-resItem {
  --accent: var(--afj-logo-red);
  --tint: #FDF2F2;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(14px, 2.4vw, 22px);
  overflow: hidden;
  padding: clamp(12px, 1.8vw, 16px);
  background: var(--afj-surface);
  border: 1px solid var(--afj-line);
  border-left: 6px solid var(--accent);
  border-radius: var(--afj-r);
  box-shadow: var(--afj-shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.afj-resItem:hover { transform: translateY(-3px); box-shadow: var(--afj-shadow-md); }
.afj-resItem--love     { --accent: var(--afj-logo-red);  --tint: #FDF2F2; }
.afj-resItem--serve    { --accent: var(--afj-logo-blue); --tint: var(--afj-blue-pale); }
.afj-resItem--disciple { --accent: var(--afj-logo-gold); --tint: var(--afj-gold-pale); }
.afj-resItem--all      { --accent: var(--afj-muted); --tint: var(--afj-surface-alt); }

.afj-resItem__thumb {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: clamp(88px, 24vw, 132px);
  height: clamp(88px, 24vw, 132px);
  padding: 10px;
  overflow: hidden;
  background: var(--tint);
  border-radius: var(--afj-r-sm);
  line-height: 0;
}
.afj-resItem__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.afj-resItem__body { display: flex; flex-direction: column; min-width: 0; }
.afj-resItem__kind {
  margin: 0 0 .25rem;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--afj-muted);
}
.afj-resItem__body h3 { margin: 0 0 .3rem; font-size: clamp(1.02rem, 1.6vw, 1.22rem); font-weight: 800; }
.afj-resItem__body h3 a { color: var(--afj-ink); text-decoration: none; }
.afj-resItem__body h3 a:hover { color: var(--afj-red); text-decoration: underline; }
.afj-resItem__body > p { margin: 0; font-size: .94rem; line-height: 1.6; color: var(--afj-body); }
.afj-resItem__go {
  align-self: flex-start;
  margin-top: .7rem;
  font-weight: 700;
  font-size: .92rem;
  color: var(--afj-red);
  text-decoration: none;
}
.afj-resItem__go:hover { text-decoration: underline; }

/* ---------- 15b. Disclosure (keeps tall embeds off the scroll) ------------ */
.afj-disclose {
  background: var(--afj-surface);
  border: 1px solid var(--afj-line);
  border-radius: var(--afj-r);
  overflow: hidden;
  box-shadow: var(--afj-shadow-sm);
}
.afj-disclose > summary {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: clamp(14px, 2vw, 18px) clamp(16px, 2.2vw, 22px);
  font-size: clamp(.98rem, 1.4vw, 1.08rem);
  font-weight: 800;
  color: var(--afj-ink);
  background: var(--afj-surface-alt);
  cursor: pointer;
  list-style: none;
}
.afj-disclose > summary::-webkit-details-marker { display: none; }
.afj-disclose > summary:hover { background: #EDEDF1; }
.afj-disclose > summary .material-symbols-outlined {
  color: var(--afj-red);
  transition: transform .25s ease;
}
.afj-disclose[open] > summary .afj-disclose__chev { transform: rotate(180deg); }
.afj-disclose__hint {
  margin-left: auto;
  font-size: .8rem;
  font-weight: 600;
  color: var(--afj-muted);
}
/* On the blue prayer panel */
.afj-disclose--onDark {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
  box-shadow: none;
  text-align: left;
}
.afj-disclose--onDark > summary {
  color: #fff;
  background: rgba(255,255,255,.1);
}
.afj-disclose--onDark > summary:hover { background: rgba(255,255,255,.18); }
.afj-disclose--onDark > summary .material-symbols-outlined { color: var(--afj-gold); }
.afj-disclose--onDark .afj-disclose__hint { color: rgba(255,255,255,.8); }

.afj-disclose__body { padding: clamp(14px, 2vw, 20px); }

/* ---------- 16. Motion / responsive / print ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .afj-set { animation: none; }
  .afj *,
  .afj *::before,
  .afj *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .afj-rail { scroll-behavior: auto; }
}

@media (max-width: 575.98px) {
  .afj { --afj-section: 34px; --afj-gap: 12px; }
  .afj-hero { border-radius: var(--afj-r); }
  /* the logo card is the tallest thing in the hero on a phone */
  .afj-hero__logo { max-width: 268px; padding: 12px; }
  .afj-disclose__hint { display: none; }
  .afj-btnRow .afj-btn { width: 100%; justify-content: center; }
  .afj-lightbox__prev { left: 8px; }
  .afj-lightbox__next { right: 8px; }
  .afj-hero__verse,
  .afj-prayer__verse,
  .afj-cent__quote { text-align: center; }
}

@media print {
  .afj-hero,
  .afj-set,
  .afj-cent,
  .afj-prayer,
  .afj-panel--navy,
  .afj-panel--gold {
    animation: none;
    color: #000;
    background: none;
    box-shadow: none;
    border: 1px solid #999;
  }
  .afj-hero__title,
  .afj-hero__sub,
  .afj-hero__verse,
  .afj-cent h2,
  .afj-prayer h2,
  .afj-prayer p,
  .afj-prayer__verse,
  .afj-prayer__ways li,
  .afj-set h2,
  .afj-set__lead,
  .afj-panel--navy p { color: #000; }
  .afj-lightbox,
  .afj-railHint,
  .afj-share,
  .afj-social { display: none !important; }
  .afj-rail { flex-wrap: wrap; overflow: visible; }
}