/* =========================================================
   Disciple Parish — Celestial Church of Christ
   Stylesheet
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
  --navy: #10213f;
  --navy-deep: #0a1730;
  --gold: #c8a24a;
  --gold-light: #e3c780;
  --gold-deep: #6b5419;
  --ivory: #faf6ec;
  --white: #ffffff;
  --gray-bg: #f5f4f0;
  --text-dark: #1c2536;
  --text-muted: #5a6272;

  --font-heading: "Cinzel", serif;
  --font-body: "Inter", sans-serif;

  --max-width: 1180px;
  --radius: 14px;
  --shadow-soft: 0 18px 40px rgba(16, 33, 63, 0.12);
  --transition: 0.25s ease;
}

/* ---------- Reset ---------- */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-dark);
  background: var(--white);
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Navigation ---------- */
.site-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  background: var(--navy-deep);
  box-shadow: 0 2px 20px rgba(10, 23, 48, 0.18);
}

/* Homepage keeps the original transparent nav floating over the hero image */
body.page-home .site-header {
  position: absolute;
  background: transparent;
  box-shadow: none;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 22px 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-logo {
  height: 72px;
  width: 72px;
  object-fit: contain;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.brand-line--main {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--white);
  letter-spacing: 0.02em;
}

.brand-line--sub {
  font-size: 0.78rem;
  color: var(--ivory);
  letter-spacing: 0.04em;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 36px;
}

.nav-menu > li {
  position: relative;
}

.nav-menu > li > a:not(.nav-trigger) {
  color: var(--white);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  position: relative;
  padding-bottom: 4px;
}

.nav-menu > li > a:not(.nav-trigger)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--gold-light);
  transition: width var(--transition);
}

.nav-menu > li > a:not(.nav-trigger):hover::after,
.nav-menu > li > a:not(.nav-trigger):focus-visible::after {
  width: 100%;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.nav-toggle-bar {
  width: 100%;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 23, 48, 0.72) 0%,
    rgba(10, 23, 48, 0.55) 45%,
    rgba(10, 23, 48, 0.82) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 760px;
  padding: 140px 24px 80px;
  animation: fade-up 0.9s ease both;
}

.hero-eyebrow {
  font-family: var(--font-heading);
  color: var(--gold-light);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.85rem;
  margin: 0 0 18px;
}

.hero-heading {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--white);
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  letter-spacing: 0.06em;
  margin: 0 0 20px;
}

.hero-mission {
  color: var(--ivory);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto 40px;
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.hero-official-notice {
  margin: 28px auto 0;
  max-width: 520px;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: rgba(250, 246, 236, 0.75);
  line-height: 1.6;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 15px 34px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  border-radius: 999px;
  transition: transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
}

.btn-primary {
  background: var(--gold);
  color: var(--navy-deep);
  border: 1px solid var(--gold);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--gold-light);
  transform: translateY(-2px);
}

.btn-secondary {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.7);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}

.btn:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}

/* ---------- Section heading ---------- */
.section-heading {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  text-align: center;
  color: var(--navy);
  letter-spacing: 0.02em;
  margin: 0 0 26px;
}

.section-heading--light {
  color: var(--white);
}

/* ---------- Welcome ---------- */
.welcome {
  background: var(--white);
  padding: 100px 0;
}

.welcome--alt {
  background: var(--gray-bg);
}

.welcome-lead {
  max-width: 680px;
  margin: 0 auto 18px;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-dark);
  line-height: 1.7;
}

.welcome-body {
  max-width: 680px;
  margin: 0 auto 60px;
  text-align: center;
  color: var(--text-muted);
  line-height: 1.8;
}

/* ---------- Cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.card {
  background: var(--gray-bg);
  border-radius: var(--radius);
  padding: 38px 30px;
  box-shadow: var(--shadow-soft);
  height: 100%;
  border-top: 3px solid var(--gold);
}

.card-heading {
  font-family: var(--font-heading);
  color: var(--navy);
  font-size: 1.3rem;
  margin: 0 0 14px;
}

.card p {
  color: var(--text-muted);
  line-height: 1.75;
  margin: 0;
}

/* ---------- Worship ---------- */
.worship {
  background: var(--navy);
  padding: 100px 0;
}

.card-grid--dark .service-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(200, 162, 74, 0.35);
  border-radius: var(--radius);
  padding: 38px 30px;
  text-align: center;
  height: 100%;
}

.service-name {
  font-family: var(--font-heading);
  color: var(--gold-light);
  font-size: 1.2rem;
  margin: 0 0 16px;
}

.service-day {
  color: var(--white);
  font-weight: 600;
  margin: 0 0 6px;
  letter-spacing: 0.04em;
}

.service-time {
  color: var(--ivory);
  margin: 0;
  opacity: 0.85;
}

.service-description {
  color: var(--ivory);
  opacity: 0.85;
  line-height: 1.7;
  margin: 14px 0 0;
}

/* ---------- Connect ---------- */
.connect {
  background: var(--white);
  padding: 100px 0 110px;
}

.connect--tight {
  padding-top: 0;
}

.connect-list {
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid #e6e2d8;
}

.connect-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 4px;
  border-bottom: 1px solid #e6e2d8;
}

.connect-label {
  font-family: var(--font-heading);
  color: var(--navy);
  font-size: 0.95rem;
  letter-spacing: 0.03em;
}

.connect-value {
  color: var(--text-muted);
  font-size: 0.95rem;
}

.connect-link {
  transition: color var(--transition);
}

.connect-link:hover,
.connect-link:focus-visible {
  color: var(--gold);
}

/* ---------- Official Organization Information ---------- */
.official-info {
  background: var(--gray-bg);
  padding: 90px 0;
  border-top: 1px solid #e6e2d8;
}

.official-info-grid {
  max-width: 780px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px 40px;
}

.official-info-item dt {
  font-family: var(--font-heading);
  color: var(--navy);
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  margin: 0 0 6px;
}

.official-info-item dd {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.6;
  font-size: 0.95rem;
}

/* ---------- Footer ---------- */
.footer-line {
  font-size: 0.85rem;
  opacity: 0.85;
  margin: 0 0 6px;
}

.footer-link {
  color: var(--gold-light);
  transition: opacity var(--transition);
}

.footer-link:hover,
.footer-link:focus-visible {
  opacity: 0.75;
}
.site-footer {
  background: var(--navy-deep);
  color: var(--ivory);
  text-align: center;
  padding: 40px 24px;
}

.footer-name {
  font-family: var(--font-heading);
  font-size: 1rem;
  letter-spacing: 0.04em;
  margin: 0 0 8px;
}

.footer-copy {
  font-size: 0.8rem;
  opacity: 0.7;
  margin: 0;
}

/* ---------- Fade-in animation ---------- */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .card-grid {
    grid-template-columns: 1fr;
  }

  .official-info-grid {
    grid-template-columns: 1fr;
  }
}

/* Nav collapses to the hamburger menu at 1200px rather than the
   typical 760px tablet breakpoint: with 9 top-level items, the
   navbar's own 1180px max-width leaves no room for a horizontal
   menu below ~1200px without wrapping or clipping items. */
@media (max-width: 1200px) {
  .nav-toggle {
    display: flex;
  }

  .nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--navy-deep);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition);
  }

  .nav-menu.is-open {
    max-height: 80vh;
    overflow-y: auto;
  }

  .nav-menu li {
    width: 100%;
  }

  .nav-menu > li > a:not(.nav-trigger) {
    display: block;
    padding: 16px 24px;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
}

@media (max-width: 760px) {
  .hero-content {
    padding: 130px 20px 70px;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    max-width: 280px;
    margin: 0 auto;
  }

  .btn {
    text-align: center;
  }

  .connect-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

@media (max-width: 480px) {
  .brand-line--sub {
    display: none;
  }
}

/* =========================================================
   PHASE 2 ADDITIONS
   Multi-page navigation, homepage expansion sections,
   sub-page shell, forms, gallery, footer
   ========================================================= */

/* ---------- Nav dropdowns ---------- */
.nav-item--dropdown {
  display: flex;
  align-items: center;
}

.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  color: var(--white);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 4px 0;
}

.nav-caret {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--transition);
}

.nav-item--dropdown:hover .nav-caret,
.nav-item--dropdown:focus-within .nav-caret,
.nav-item--dropdown[data-open="true"] .nav-caret {
  transform: rotate(-135deg);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  min-width: 230px;
  background: var(--white);
  border-radius: 10px;
  box-shadow: var(--shadow-soft);
  padding: 10px;
  margin-top: 14px;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 60;
}

.nav-item--dropdown:hover .dropdown-menu,
.nav-item--dropdown:focus-within .dropdown-menu,
.nav-item--dropdown[data-open="true"] .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.dropdown-menu a {
  display: block;
  padding: 11px 14px;
  color: var(--navy);
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 8px;
  transition: background var(--transition), color var(--transition);
}

.dropdown-menu a:hover,
.dropdown-menu a:focus-visible {
  background: var(--gray-bg);
  color: var(--navy);
}

.nav-trigger:focus-visible,
.dropdown-menu a:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 2px;
}

/* ---------- Secondary button (for use on light backgrounds) ---------- */
.btn-outline {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--navy);
}

.btn-outline:hover,
.btn-outline:focus-visible {
  background: var(--navy);
  color: var(--white);
  transform: translateY(-2px);
}

.btn-outline--on-dark {
  border-color: rgba(255, 255, 255, 0.7);
  color: var(--white);
}

.btn-outline--on-dark:hover,
.btn-outline--on-dark:focus-visible {
  background: var(--white);
  color: var(--navy-deep);
}

.section-lead--light {
  color: var(--ivory);
}

.link-arrow {
  color: var(--navy);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.link-arrow::after {
  content: "\2192";
  transition: transform var(--transition);
}

.link-arrow:hover::after,
.link-arrow:focus-visible::after {
  transform: translateX(4px);
}

.link-arrow--light {
  color: var(--gold-light);
}

/* ---------- Inner-page header (replaces full hero on sub-pages) ---------- */
.page-header {
  background: var(--navy);
  padding: 70px 0 60px;
  text-align: center;
}

.page-header-eyebrow {
  font-family: var(--font-heading);
  color: var(--gold-light);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.8rem;
  margin: 0 0 14px;
}

.page-header-heading {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--white);
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  margin: 0;
  letter-spacing: 0.03em;
}

.page-header-lead {
  color: var(--ivory);
  max-width: 640px;
  margin: 18px auto 0;
  line-height: 1.75;
  opacity: 0.92;
}

/* Optional extras for page-headers that need more than eyebrow/heading/lead
   (currently only Offerings & Giving) — an intro paragraph and a featured
   scripture callout, both styled for the navy page-header background. */
.page-header-intro {
  max-width: 620px;
  margin: 22px auto 0;
  color: var(--ivory);
  opacity: 0.92;
  line-height: 1.8;
}

.page-header-verse {
  max-width: 480px;
  margin: 26px auto 0;
  padding: 18px 24px;
  border-left: 3px solid var(--gold-light);
  background: rgba(255, 255, 255, 0.06);
  text-align: left;
}

.page-header-verse p {
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--white);
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0 0 8px;
}

.page-header-verse cite {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold-light);
}

/* ---------- Generic section lead/body text (reused across pages) ---------- */
.section-lead {
  max-width: 680px;
  margin: 0 auto 18px;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-dark);
  line-height: 1.7;
}

.section-body {
  max-width: 680px;
  margin: 0 auto 30px;
  text-align: center;
  color: var(--text-muted);
  line-height: 1.8;
}

.section-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 34px;
}

/* ---------- Responsive embeds (YouTube / Google Maps) ---------- */
.embed-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: var(--navy-deep);
}

.embed-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.embed-frame--map {
  aspect-ratio: 16 / 11;
}

.embed-caption {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 14px;
}

.embed-caption--light {
  color: var(--ivory);
  opacity: 0.75;
}

/* ---------- Community callout (member events, not church-sponsored) ---------- */
.community-card {
  max-width: 720px;
  margin: 0 auto;
  background: var(--gray-bg);
  border-radius: var(--radius);
  padding: 40px 36px;
  box-shadow: var(--shadow-soft);
  border-top: 3px solid var(--gold);
}

.community-flyer {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 22px;
}

.community-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
  background: rgba(200, 162, 74, 0.18);
  border: 1px solid rgba(200, 162, 74, 0.4);
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 18px;
}

.community-card h3 {
  font-family: var(--font-heading);
  color: var(--navy);
  font-size: 1.3rem;
  margin: 0 0 8px;
}

.community-presenter {
  color: var(--text-muted);
  font-style: italic;
  margin: 0 0 20px;
}

.community-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--text-dark);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ---------- Upcoming Events placeholder ---------- */
.events-panel {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  background: var(--gray-bg);
  border: 1px dashed rgba(16, 33, 63, 0.28);
  border-radius: var(--radius);
  padding: 56px 34px;
}

.events-panel p {
  color: var(--text-muted);
  line-height: 1.8;
  margin: 0 0 8px;
}

.events-panel .events-note {
  font-size: 0.82rem;
  opacity: 0.75;
}

/* ---------- Watch Live section ---------- */
.watch-live-section {
  background: var(--navy);
  padding: 100px 0;
}

.watch-live-inner {
  max-width: 860px;
  margin: 0 auto;
}

.watch-live-fallback {
  text-align: center;
  margin-top: 26px;
}

/* ---------- Intro banner (New to Celestial Church of Christ?) ---------- */
.intro-banner {
  background: var(--white);
  padding: 90px 0;
  text-align: center;
}

.intro-banner-inner {
  max-width: 700px;
  margin: 0 auto;
}

/* ---------- Our Faith preview grid ---------- */
.faith-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.faith-item {
  background: var(--gray-bg);
  border-radius: var(--radius);
  padding: 32px 22px;
  text-align: center;
  border-top: 3px solid var(--gold);
  height: 100%;
}

.faith-item h3 {
  font-family: var(--font-heading);
  color: var(--navy);
  font-size: 1.02rem;
  margin: 0 0 10px;
  line-height: 1.4;
}

.faith-item p {
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.65;
  margin: 0;
}

/* ---------- Recent Messages ---------- */
.messages-section {
  background: var(--gray-bg);
  padding: 100px 0;
}

.messages-inner {
  max-width: 860px;
  margin: 0 auto;
}

/* ---------- Prayer section ---------- */
.prayer-section {
  background: var(--navy-deep);
  padding: 100px 0;
  text-align: center;
  color: var(--ivory);
}

.prayer-section .section-heading {
  color: var(--white);
}

.prayer-lead {
  max-width: 560px;
  margin: 0 auto 34px;
  line-height: 1.8;
  opacity: 0.92;
}

/* ---------- Give section ---------- */
.give-section {
  background: var(--white);
  padding: 100px 0;
  text-align: center;
}

.give-inner {
  max-width: 620px;
  margin: 0 auto;
}

.give-note {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 20px;
  line-height: 1.6;
}

/* ---------- Visit Us ---------- */
.visit-section {
  background: var(--gray-bg);
  padding: 100px 0;
}

.visit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.visit-address {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text-dark);
  margin: 0 0 26px;
}

.visit-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* ---------- Content pages (About / New Here) ---------- */
.content-section {
  padding: 90px 0;
}

.content-section + .content-section {
  border-top: 1px solid #e6e2d8;
}

.content-section--alt {
  background: var(--gray-bg);
}

.content-list {
  max-width: 780px;
  margin: 0 auto;
  display: grid;
  gap: 30px;
}

.content-list-item h3 {
  font-family: var(--font-heading);
  color: var(--navy);
  font-size: 1.15rem;
  margin: 0 0 10px;
}

.scripture-ref {
  font-family: var(--font-body);
  font-weight: 400;
  font-style: italic;
  font-size: 0.8em;
  color: var(--text-muted);
}

.content-list-item p {
  color: var(--text-muted);
  line-height: 1.8;
  margin: 0 0 14px;
}

.content-list-item p:last-child {
  margin-bottom: 0;
}

.content-note {
  max-width: 780px;
  margin: 30px auto 0;
  padding: 18px 22px;
  background: rgba(200, 162, 74, 0.1);
  border: 1px solid rgba(200, 162, 74, 0.3);
  border-radius: 10px;
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.7;
}

/* ---------- Forms (Prayer Request) ---------- */
.form-card {
  max-width: 640px;
  margin: 0 auto;
  background: var(--gray-bg);
  border-radius: var(--radius);
  padding: 46px 40px;
  box-shadow: var(--shadow-soft);
}

.form-field {
  margin-bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-field label {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  color: var(--navy);
  letter-spacing: 0.02em;
}

.form-field input,
.form-field textarea {
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 12px 14px;
  border: 1px solid #d8d3c6;
  border-radius: 8px;
  background: var(--white);
  color: var(--text-dark);
  transition: border-color var(--transition);
}

.form-field input:focus-visible,
.form-field textarea:focus-visible {
  outline: none;
  border-color: var(--gold);
}

.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 26px;
}

.form-checkbox input {
  margin-top: 3px;
}

.form-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 10px;
  line-height: 1.6;
}

.form-status {
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: 8px;
  background: #eaf3ea;
  color: #2b5c34;
  font-size: 0.9rem;
  display: none;
}

.form-status.is-visible {
  display: block;
}

.form-status.is-error {
  background: #fbeaea;
  color: #7a2222;
}

/* ---------- Gallery ---------- */
.gallery-category {
  margin-bottom: 60px;
}

.gallery-category:last-child {
  margin-bottom: 0;
}

.gallery-category h3 {
  font-family: var(--font-heading);
  color: var(--navy);
  font-size: 1.2rem;
  margin: 0 0 18px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.gallery-placeholder {
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--gray-bg), #ece7da);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 14px;
  border: 1px dashed rgba(16, 33, 63, 0.2);
}

.gallery-item {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition);
}

.gallery-item:hover,
.gallery-item:focus-visible {
  transform: translateY(-3px);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Outreach Day banner + group photo (unequal aspect ratios, no forced crop) ---------- */
.outreach-photos {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 16px;
  align-items: start;
  margin: 30px 0;
}

.outreach-photo {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition);
}

.outreach-photo:hover,
.outreach-photo:focus-visible {
  transform: translateY(-3px);
}

.outreach-photo img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 700px) {
  .outreach-photos {
    grid-template-columns: 1fr;
  }
}

/* ---------- Footer (multi-page) ---------- */
.site-footer {
  background: var(--navy-deep);
  color: var(--ivory);
  padding: 64px 24px 34px;
  text-align: left;
}

.footer-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-col h4 {
  font-family: var(--font-heading);
  color: var(--gold-light);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 16px;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col a,
.footer-col p {
  font-size: 0.88rem;
  opacity: 0.85;
  margin: 0;
  line-height: 1.6;
}

.footer-col a {
  transition: opacity var(--transition), color var(--transition);
}

.footer-col a:hover,
.footer-col a:focus-visible {
  opacity: 1;
  color: var(--gold-light);
}

.footer-bottom {
  max-width: var(--max-width);
  margin: 30px auto 0;
  text-align: center;
}

.footer-name {
  font-family: var(--font-heading);
  font-size: 1rem;
  letter-spacing: 0.04em;
  margin: 0 0 10px;
}

.footer-copy {
  font-size: 0.8rem;
  opacity: 0.65;
  margin: 4px 0 0;
}

/* ---------- Organization Information (compact disclosure) ---------- */
.org-info {
  margin: 26px auto 0;
  max-width: 640px;
  text-align: left;
}

.org-info summary {
  cursor: pointer;
  text-align: center;
  display: block;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: var(--gold-light);
  list-style: none;
}

.org-info summary::-webkit-details-marker {
  display: none;
}

.org-info summary::after {
  content: "\2193  Show organization details";
  margin-left: 6px;
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.8;
}

.org-info[open] summary::after {
  content: "\2191  Hide organization details";
}

.org-info summary:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}

.org-info-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 30px;
  font-size: 0.78rem;
  padding: 20px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
}

.org-info-grid dt {
  color: var(--gold-light);
  margin: 0 0 3px;
  letter-spacing: 0.03em;
}

.org-info-grid dd {
  margin: 0;
  opacity: 0.85;
  line-height: 1.5;
}

/* ---------- Phase 2 responsive rules ---------- */
@media (max-width: 900px) {
  .faith-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .visit-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 1200px) {
  .dropdown-menu {
    position: static;
    min-width: 0;
    margin-top: 0;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition);
  }

  .nav-item--dropdown[data-open="true"] .dropdown-menu {
    max-height: 320px;
    overflow-y: auto;
    transform: none;
  }

  .dropdown-menu a {
    color: var(--ivory);
    padding: 14px 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
  }

  .dropdown-menu a:hover,
  .dropdown-menu a:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: var(--gold-light);
  }

  .nav-trigger {
    width: 100%;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .nav-item--dropdown {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 760px) {
  .page-header {
    padding: 50px 0 44px;
  }

  .form-card {
    padding: 34px 24px;
  }
}

@media (max-width: 560px) {
  .faith-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-col ul {
    align-items: center;
  }

  .org-info-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .visit-actions {
    justify-content: center;
  }
}

/* Nine top-level nav items need a bit less breathing room in the narrow
   band just above the 1200px hamburger breakpoint; large screens are
   unaffected, and narrower widths use the hamburger menu instead. */
@media (min-width: 1201px) and (max-width: 1280px) {
  .nav-menu {
    gap: 10px;
  }

  .nav-menu > li > a,
  .nav-trigger {
    font-size: 0.78rem;
    letter-spacing: 0;
  }

  .nav-trigger {
    gap: 4px;
  }
}

/* ---------- Secondary resource navigation (About/Worship information hub) ---------- */
.resource-nav {
  background: var(--gray-bg);
  border-bottom: 1px solid #e6e2d8;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.resource-nav-list {
  display: flex;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 14px 0;
  white-space: nowrap;
}

.resource-nav-list a {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  transition: background var(--transition), color var(--transition);
}

.resource-nav-list a:hover {
  background: rgba(200, 162, 74, 0.12);
  color: var(--navy);
}

.resource-nav-list a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.resource-nav-list a[aria-current="page"] {
  background: var(--navy);
  color: var(--gold-light);
}

/* ---------- Ranks reference layout (Leadership & Ranks) ---------- */
.rank-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: start;
  max-width: 900px;
  margin: 0 auto;
}

.rank-column-heading {
  font-family: var(--font-heading);
  color: var(--navy);
  font-size: 1.15rem;
  text-align: center;
  margin: 0 0 18px;
}

.rank-column-heading--prophetic {
  color: #3a5f80;
}

@media (max-width: 900px) {
  .rank-columns {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ---- Rank chains (reuses .flow-step / .flow-arrow) ---- */
.flow-step--prophetic {
  border-color: rgba(58, 95, 128, 0.35);
  background: rgba(58, 95, 128, 0.07);
}

.flow-step.evangelist-level {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.evangelist-level-divider {
  width: 36px;
  height: 1px;
  background: rgba(200, 162, 74, 0.4);
  margin: 2px auto;
}

/* ---- Rank convergence marker ---- */
.rank-convergence {
  max-width: 640px;
  margin: 40px auto 0;
  text-align: center;
  padding: 24px 28px;
  border: 1px dashed rgba(200, 162, 74, 0.5);
  border-radius: var(--radius);
  background: rgba(200, 162, 74, 0.06);
}

.rank-convergence-arrows {
  display: block;
  font-size: 1.3rem;
  color: var(--gold);
  margin-bottom: 8px;
  letter-spacing: 0.3em;
}

.rank-convergence-label {
  font-family: var(--font-heading);
  color: var(--navy);
  font-size: 0.95rem;
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rank-convergence-note {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.75;
  margin: 0;
}

/* ---- Clergy / non-clergy comparison ---- */
.clergy-level {
  max-width: 640px;
  margin: 0 auto 22px;
  background: var(--gray-bg);
  border-top: 3px solid var(--navy);
  border-radius: var(--radius);
  padding: 28px 30px;
}

.clergy-level:last-of-type {
  margin-bottom: 0;
}

.clergy-level-heading {
  font-family: var(--font-heading);
  color: var(--navy);
  text-align: center;
  font-size: 1rem;
  letter-spacing: 0.02em;
  margin: 0 0 20px;
}

.clergy-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

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

.clergy-col:first-child {
  border-right: 1px solid #e6e2d8;
}

.clergy-col-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 8px;
}

.clergy-col-title {
  display: block;
  color: var(--navy);
  font-weight: 600;
  line-height: 1.4;
}

.clergy-col-abbr {
  display: block;
  color: var(--text-muted);
  font-size: 0.82rem;
  margin-top: 4px;
}

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

  .clergy-col:first-child {
    border-right: none;
    border-bottom: 1px solid #e6e2d8;
    padding-bottom: 16px;
  }
}

/* ---- Three-up explanatory grid (reuses .faith-item) ---- */
.faith-grid--three {
  grid-template-columns: repeat(3, 1fr);
}

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

/* ---- Five-up explanatory grid (reuses .faith-item) ---- */
.faith-grid--five {
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1000px) {
  .faith-grid--five {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 700px) {
  .faith-grid--five {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .faith-grid--five {
    grid-template-columns: 1fr;
  }
}

/* ---------- About Disciple Parish (storytelling page, scoped) ---------- */
.story-copy {
  max-width: 700px;
  margin: 0 auto;
}

.story-text {
  color: var(--text-dark);
  font-size: 1.05rem;
  line-height: 1.85;
  margin: 0 0 22px;
}

.story-text:last-child {
  margin-bottom: 0;
}

.story-text--short {
  margin-bottom: 8px;
  font-weight: 500;
}

.story-text--light {
  color: var(--ivory);
  opacity: 0.92;
}

.story-standalone {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--navy);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  text-align: center;
  line-height: 1.5;
  margin: 42px auto;
  max-width: 560px;
  padding-top: 26px;
  position: relative;
}

.story-standalone::before {
  content: "";
  display: block;
  width: 50px;
  height: 2px;
  background: var(--gold);
  margin: 0 auto 22px;
}

.story-standalone--name {
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  color: var(--gold);
}

.story-standalone--light {
  color: var(--gold-light);
}

.story-standalone--light::before {
  background: var(--gold-light);
}

/* ---- Timeline ---- */
.story-timeline {
  list-style: none;
  margin: 50px auto 0;
  padding: 0;
  display: flex;
  position: relative;
  max-width: 900px;
}

.story-timeline::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 16.6%;
  right: 16.6%;
  height: 2px;
  background: rgba(200, 162, 74, 0.4);
}

.story-timeline-item {
  flex: 1;
  position: relative;
  text-align: center;
  padding: 30px 16px 0;
}

.story-timeline-dot {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--gold);
  z-index: 2;
}

.story-timeline-date {
  font-family: var(--font-heading);
  color: var(--gold);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.story-timeline-title {
  font-family: var(--font-heading);
  color: var(--navy);
  font-size: 1.1rem;
  margin: 0 0 10px;
}

.story-timeline-desc {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0 auto;
  max-width: 220px;
}

@media (max-width: 760px) {
  .story-timeline {
    flex-direction: column;
    max-width: 480px;
  }

  .story-timeline::before {
    top: 0;
    bottom: 0;
    left: 8px;
    right: auto;
    width: 2px;
    height: auto;
  }

  .story-timeline-item {
    text-align: left;
    padding: 0 0 36px 34px;
  }

  .story-timeline-item:last-child {
    padding-bottom: 0;
  }

  .story-timeline-dot {
    top: 4px;
    left: 0;
    transform: none;
  }

  .story-timeline-desc {
    max-width: none;
    margin-left: 0;
  }
}

/* ---- Conclusion ---- */
.story-conclusion {
  background: var(--navy);
  padding: 100px 0 110px;
}

.story-final {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--gold-light);
  text-align: center;
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.6;
  max-width: 620px;
  margin: 56px auto 0;
  padding-top: 40px;
  border-top: 1px solid rgba(227, 199, 128, 0.3);
}

/* ---------- Holy Mary's Day: intercession flow ---------- */
.flow-steps {
  max-width: 420px;
  margin: 40px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style: none;
  padding: 0;
}

.flow-step {
  width: 100%;
  background: var(--gray-bg);
  border: 1px solid rgba(200, 162, 74, 0.35);
  border-radius: var(--radius);
  padding: 18px 24px;
  text-align: center;
  font-family: var(--font-heading);
  color: var(--navy);
  font-size: 1rem;
}

.flow-arrow {
  color: var(--gold);
  font-size: 1.4rem;
  line-height: 1;
  margin: 10px 0;
}

/* ---------- Bible Lessons ---------- */
.lessons-month-nav {
  background: var(--gray-bg);
  border-bottom: 1px solid #e6e2d8;
  position: sticky;
  top: 0;
  z-index: 10;
}

.lessons-month-list {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 0;
  scrollbar-width: thin;
}

.lessons-month-btn {
  flex: 0 0 auto;
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
}

.lessons-month-btn:hover {
  background: rgba(200, 162, 74, 0.12);
  color: var(--navy);
}

.lessons-month-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.lessons-month-btn[aria-selected="true"] {
  background: var(--navy);
  color: var(--gold-light);
  border-color: var(--navy);
}

.lessons-month-heading {
  font-family: var(--font-heading);
  color: var(--navy);
  text-align: center;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  margin: 0 0 40px;
}

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

.lesson-card {
  background: var(--white);
  border: 1px solid #e6e2d8;
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 26px 24px;
  position: relative;
}

.lesson-card--upcoming {
  border-top-color: var(--navy);
}

.lesson-card-badge {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--gold-light);
  font-family: var(--font-heading);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lesson-card-date {
  font-family: var(--font-heading);
  color: var(--text-muted);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.lesson-card-service {
  font-family: var(--font-heading);
  color: var(--navy);
  font-size: 1.15rem;
  margin: 0 0 4px;
}

.lesson-card-time {
  color: var(--text-muted);
  font-size: 0.88rem;
  margin: 0 0 6px;
}

.lesson-card-designation {
  display: inline-block;
  margin-bottom: 14px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(200, 162, 74, 0.14);
  border: 1px solid rgba(200, 162, 74, 0.4);
  color: var(--navy);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}

.lesson-card-readings {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e6e2d8;
  display: grid;
  gap: 12px;
}

.lesson-label {
  display: block;
  font-family: var(--font-heading);
  color: var(--gold);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 4px;
}

.lesson-ref {
  display: block;
  color: var(--navy);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.4;
  overflow-wrap: break-word;
}

.lesson-ref--empty {
  color: var(--text-muted);
  font-weight: 400;
}

.lessons-source {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.lessons-source-label {
  font-family: var(--font-heading);
  color: var(--gold);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.lessons-source-name {
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0 0 26px;
}

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

@media (max-width: 640px) {
  .lessons-grid {
    grid-template-columns: 1fr;
  }

  .lessons-month-nav {
    position: static;
  }
}

/* =========================================================
   Leadership & Ranks — hub + interactive rank flow (pass 2)
   ========================================================= */

/* ---- Key takeaway / closing orientation line ---- */
.section-key-takeaway {
  max-width: 640px;
  margin: 26px auto 0;
  text-align: center;
  font-family: var(--font-heading);
  color: var(--navy);
  font-size: 1.05rem;
  line-height: 1.6;
  padding-top: 22px;
  border-top: 1px solid #e6e2d8;
}

/* ---- Hub: two prominent choice cards (Men's / Women's Ranks) ---- */
.hub-cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 860px;
  margin: 36px auto 0;
}

.hub-cta-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--gray-bg);
  border-radius: var(--radius);
  border-top: 4px solid var(--gold);
  box-shadow: var(--shadow-soft);
  padding: 44px 32px;
  transition: transform var(--transition), box-shadow var(--transition);
}

.hub-cta-card:hover,
.hub-cta-card:focus-within {
  transform: translateY(-3px);
}

.hub-cta-eyebrow {
  font-family: var(--font-heading);
  color: var(--gold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.75rem;
  margin: 0 0 12px;
}

.hub-cta-heading {
  font-family: var(--font-heading);
  color: var(--navy);
  font-size: 1.5rem;
  margin: 0 0 12px;
}

.hub-cta-desc {
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0 0 26px;
}

/* ---- Rank flow: breadcrumb reuses .resource-nav / .resource-nav-list ---- */

/* ---- Rank flow shell: track (left/center) + detail panel (right) ---- */
.rank-flow-shell {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 44px;
  align-items: start;
  max-width: 980px;
  margin: 36px auto 0;
}

.rank-flow-track-col {
  min-width: 0;
}

.rank-detail-panel {
  position: sticky;
  top: 140px;
  background: var(--gray-bg);
  border: 1px solid #e6e2d8;
  border-radius: var(--radius);
  padding: 26px 24px;
}

.rank-detail-panel-eyebrow {
  font-family: var(--font-heading);
  color: var(--gold-deep);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.68rem;
  margin: 0 0 10px;
}

.rank-detail-panel-title {
  font-family: var(--font-heading);
  color: var(--navy);
  font-size: 1.15rem;
  margin: 0 0 14px;
  line-height: 1.3;
}

.rank-detail-panel-placeholder {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.7;
  margin: 0;
}

@media (max-width: 1023px) {
  .rank-flow-shell {
    display: block;
  }

  .rank-detail-panel {
    display: none;
  }
}

/* ---- Rank ladder: the primary continuous flow ---- */
.ladder-direction {
  text-align: center;
  font-family: var(--font-heading);
  color: var(--gold-deep);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 22px;
}

.rank-ladder {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 0 0 30px;
  list-style: none;
}

.rank-ladder::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, rgba(200, 162, 74, 0.3), var(--gold));
}

.rank-tier {
  position: relative;
  margin-bottom: 14px;
}

.rank-tier::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 24px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--gold);
  z-index: 1;
}

.rank-tier:last-child {
  margin-bottom: 0;
}

.rank-tier--peak::before {
  border-color: var(--navy);
  background: var(--gold);
}

/* Node interactivity: <details>/<summary> reset + affordance */
.rank-node-details {
  display: block;
}

.rank-node-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  list-style: none;
  cursor: pointer;
  padding: 12px 16px;
  text-align: center;
  color: var(--navy);
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.35;
  transition: background var(--transition), border-color var(--transition);
}

.rank-node-summary::-webkit-details-marker {
  display: none;
}

.rank-node-summary:hover {
  background: rgba(200, 162, 74, 0.1);
}

.rank-node-summary:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: -2px;
}

.rank-node-caret {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--gold-deep);
  border-bottom: 1.5px solid var(--gold-deep);
  transform: rotate(45deg);
  transition: transform var(--transition);
}

details[open] > .rank-node-summary .rank-node-caret {
  transform: rotate(-135deg);
}

.rank-node-summary.is-selected {
  background: rgba(200, 162, 74, 0.16);
  box-shadow: inset 4px 0 0 var(--gold);
  font-weight: 700;
}

.rank-tier--peak .rank-node-summary {
  color: var(--gold-light);
}

.rank-tier--peak.rank-tier-single > .rank-node-details {
  background: var(--navy);
  border-color: var(--navy);
  border-radius: 10px;
}

.rank-tier--peak .rank-node-caret {
  border-color: var(--gold-light);
}

.rank-tier--peak .rank-tier-col-label {
  color: var(--gold-light);
}

.rank-tier-single > .rank-node-details {
  background: var(--gray-bg);
  border: 1px solid #e6e2d8;
  border-radius: 10px;
}

.rank-tier-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: #e6e2d8;
  border: 1px solid #e6e2d8;
  border-radius: 10px;
  overflow: hidden;
}

.rank-tier-pair > .rank-node-details {
  background: var(--gray-bg);
}

.rank-tier-col-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 3px;
}

.rank-node-summary-inner {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Detail body: rendered inline on mobile, cloned into the side panel on desktop */
.rank-detail-body {
  padding: 4px 18px 18px;
  text-align: left;
}

.rank-tier-pair .rank-detail-body {
  padding: 0 14px 16px;
}

.rank-detail-nav {
  display: grid;
  gap: 8px;
  margin: 0 0 10px;
}

.rank-detail-nav div {
  display: flex;
  gap: 6px;
  font-size: 0.85rem;
}

.rank-detail-nav dt {
  font-family: var(--font-heading);
  color: var(--gold-deep);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex: 0 0 auto;
  padding-top: 2px;
}

.rank-detail-nav dd {
  margin: 0;
  color: var(--navy);
  font-weight: 600;
}

.rank-detail-note {
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.65;
  margin: 8px 0 0;
}

.rank-detail-note:first-child {
  margin-top: 0;
}

.rank-tier--peak .rank-detail-nav dt {
  color: var(--gold-light);
}

.rank-tier--peak .rank-detail-nav dd,
.rank-tier--peak .rank-detail-note {
  color: var(--ivory);
  opacity: 0.9;
}

/* Small always-visible caption attached to specific tiers (not hidden behind a click) */
.rank-flow-caption {
  max-width: 560px;
  margin: 14px auto 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-style: italic;
  line-height: 1.6;
}

.rank-flow-caption--emphasis {
  color: var(--navy);
  font-style: normal;
  font-weight: 500;
}

.content-note--aside {
  max-width: 610px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 18px;
  margin-bottom: 18px;
}

/* ---- Historical & exceptional block (Supreme Evangelist / Pastor) ---- */
.rank-exceptional-block {
  max-width: 610px;
  margin: 34px auto 0;
}

.rank-exceptional-label {
  text-align: center;
  font-family: var(--font-heading);
  color: var(--gold-deep);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 16px;
}

.rank-exceptional-card {
  padding: 24px 26px;
  border-radius: var(--radius);
  margin-bottom: 16px;
}

.rank-exceptional-card:last-child {
  margin-bottom: 0;
}

.rank-exceptional-card--historical {
  background: rgba(200, 162, 74, 0.08);
  border: 1px solid rgba(200, 162, 74, 0.35);
}

.rank-exceptional-card--office {
  background: var(--gray-bg);
  border: 1px solid #e6e2d8;
}

.rank-exceptional-card h3 {
  font-family: var(--font-heading);
  color: var(--navy);
  font-size: 1.05rem;
  margin: 0 0 10px;
}

.rank-exceptional-card p {
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.7;
  margin: 0 0 10px;
}

.rank-exceptional-card p:last-child {
  margin-bottom: 0;
}

.historical-badge--office {
  background: rgba(16, 33, 63, 0.06);
  border-color: rgba(16, 33, 63, 0.2);
  color: var(--text-muted);
}

/* ---- Related-path branch card (Prophetic / Prophetess line) ---- */
.rank-branch {
  max-width: 560px;
  margin: 48px auto 0;
  padding: 32px 30px;
  border: 1px solid rgba(58, 95, 128, 0.3);
  background: rgba(58, 95, 128, 0.05);
  border-radius: var(--radius);
}

.rank-branch-heading {
  font-family: var(--font-heading);
  color: #3a5f80;
  text-align: center;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  margin: 0 0 12px;
}

.rank-branch-intro {
  color: var(--text-dark);
  font-size: 0.92rem;
  line-height: 1.7;
  text-align: center;
  margin: 0 0 26px;
}

.rank-branch .flow-steps {
  margin-top: 0;
}

.rank-branch .flow-step {
  border-color: rgba(58, 95, 128, 0.35);
  background: rgba(58, 95, 128, 0.08);
  padding: 0;
}

.rank-branch .flow-step .rank-node-summary {
  padding: 14px 20px;
}

.rank-branch .flow-step .rank-detail-body {
  text-align: center;
}

/* Continuation/orientation node (e.g. Higher Female Orders) — signals "not an ordinary rank" */
.flow-step--orientation {
  border-style: dashed;
}

.rank-detail-subseq {
  margin: 12px 0;
  padding: 12px;
  background: rgba(58, 95, 128, 0.06);
  border-radius: 8px;
  text-align: center;
  font-family: var(--font-heading);
  color: var(--navy);
  font-size: 0.85rem;
  line-height: 1.5;
}

.rank-detail-subseq-arrow {
  display: block;
  color: var(--gold-deep);
  font-size: 1rem;
  margin: 2px 0;
}

.rank-branch-connector {
  margin: 22px auto 0;
  max-width: 460px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.7;
}

.rank-branch-connector a {
  color: #3a5f80;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- Church Worker concept card intro handled by .faith-item ---- */

/* ---- Rank vs. Office comparison ---- */
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 30px;
  max-width: 920px;
  margin: 34px auto 0;
  align-items: start;
}

.compare-col {
  border-radius: var(--radius);
  padding: 32px 28px;
  height: 100%;
}

.compare-col--rank {
  background: rgba(200, 162, 74, 0.08);
  border: 1px solid rgba(200, 162, 74, 0.35);
}

.compare-col--office {
  background: var(--gray-bg);
  border: 1px solid #e6e2d8;
}

.compare-col-heading {
  font-family: var(--font-heading);
  color: var(--navy);
  font-size: 1.05rem;
  margin: 0 0 8px;
  text-align: center;
}

.compare-col-sub {
  color: var(--text-muted);
  font-size: 0.86rem;
  line-height: 1.6;
  text-align: center;
  margin: 0 0 22px;
}

.compare-chip-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.compare-chip {
  background: var(--white);
  border: 1px solid rgba(200, 162, 74, 0.4);
  border-radius: 8px;
  padding: 10px 14px;
  text-align: center;
  color: var(--navy);
  font-weight: 600;
  font-size: 0.92rem;
}

.compare-office-list {
  display: grid;
  gap: 16px;
  margin: 0;
}

.compare-office-item dt {
  font-family: var(--font-heading);
  color: var(--navy);
  font-size: 0.92rem;
  margin: 0 0 4px;
}

.compare-office-item dd {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.6;
}

/* ---- Historical / exceptional title badge ---- */
.historical-badge {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(200, 162, 74, 0.14);
  border: 1px solid rgba(200, 162, 74, 0.4);
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .compare-grid {
    grid-template-columns: 1fr;
  }

  .hub-cta-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
  }
}

@media (max-width: 560px) {
  .rank-tier-pair {
    grid-template-columns: 1fr;
  }

  .rank-tier-pair > .rank-node-details:first-child {
    border-bottom: 1px solid #e6e2d8;
  }
}

/* =========================================================
   Offerings & Giving — Interactive Giving Guide
   Adapted from the Leadership & Ranks component language
   (border/radius/spacing/color tokens, selected states,
   mobile inline expansion) without modifying any .rank-*
   rule above. Forms of giving are not sequential, so this
   uses a tile grid instead of a ladder.

   The desktop detail panel sits FULL WIDTH BENEATH the grid
   rather than in a sticky side column — an intentional,
   approved divergence from the side-panel pattern used by
   rank-flow.js / practice-explorer.js on the sibling
   Leadership & Ranks and Life as a Celestian pages.

   Specificity note: any custom-typography text block nested
   inside .giving-detail-body/.giving-detail-panel-body (the
   callout, the Ope reflection lines, the mini-compare cells)
   is written as a non-<p> element (div/blockquote/h4). That
   sidesteps the generic ".giving-detail-body p" rule below
   entirely instead of fighting it on specificity — the same
   reason .giving-detail-verse already uses <blockquote>.
   ========================================================= */

.giving-guide-intro {
  max-width: 640px;
  margin: 0 auto 32px;
  text-align: center;
}

/* ---- Shell: tile grid, with the shared detail panel stacked beneath ---- */
.giving-guide-shell {
  max-width: 980px;
  margin: 0 auto;
}

.giving-guide-track {
  min-width: 0;
}

.giving-detail-panel {
  margin-top: 32px;
  background: var(--gray-bg);
  border: 1px solid #e6e2d8;
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 32px 36px;
}

.giving-detail-panel-eyebrow {
  font-family: var(--font-heading);
  color: var(--gold-deep);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.68rem;
  margin: 0 0 10px;
}

.giving-detail-panel-title {
  font-family: var(--font-heading);
  color: var(--navy);
  font-size: 1.3rem;
  margin: 0 0 16px;
  line-height: 1.3;
}

.giving-detail-panel-placeholder {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.7;
  margin: 0;
}

.giving-detail-panel-body {
  max-width: 720px;
}

@media (max-width: 1023px) {
  .giving-detail-panel {
    display: none;
  }
}

/* ---- Tile grid: 3 columns desktop / 2 tablet / 1 mobile ---- */
.giving-tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.giving-node-details {
  display: block;
}

.giving-node-details > .giving-node-summary {
  background: var(--gray-bg);
  border: 1px solid #e6e2d8;
  border-radius: 10px;
  height: 100%;
}

.giving-node-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  list-style: none;
  cursor: pointer;
  padding: 24px 18px;
  text-align: center;
  transition: background var(--transition), box-shadow var(--transition);
}

.giving-node-summary::-webkit-details-marker {
  display: none;
}

.giving-node-summary:hover {
  background: rgba(200, 162, 74, 0.1);
}

.giving-node-summary:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: -2px;
}

.giving-node-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: rgba(200, 162, 74, 0.12);
  color: var(--gold-deep);
}

.giving-node-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.giving-node-icon--mark {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}

.giving-node-name {
  font-family: var(--font-heading);
  color: var(--navy);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.02em;
}

.giving-node-orientation {
  font-family: var(--font-heading);
  color: var(--gold-deep);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.giving-node-summary.is-selected {
  background: rgba(200, 162, 74, 0.16);
  box-shadow: inset 4px 0 0 var(--gold);
}

.giving-node-summary.is-selected .giving-node-name {
  color: var(--navy);
}

/* Detail body: rendered inline on mobile. On desktop, only the INNER html of
   .giving-detail-body is cloned into .giving-detail-panel-body (see
   giving-guide.js), so it arrives without the .giving-detail-body ancestor
   class. Every rule below is written to work identically in both places:
   plain paragraphs are matched generically (excluding the labeled/scripture
   variants so there is no specificity fight), and the labeled variants are
   simple standalone classes that need no ancestor at all. */
.giving-detail-body {
  padding: 0 20px 22px;
  text-align: left;
}

.giving-detail-body p:not(.giving-detail-label):not(.giving-scripture-refs),
.giving-detail-panel-body p:not(.giving-detail-label):not(.giving-scripture-refs) {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.75;
  margin: 0 0 14px;
}

.giving-detail-body p:last-child,
.giving-detail-panel-body p:last-child {
  margin-bottom: 0;
}

.giving-detail-label {
  display: block;
  font-family: var(--font-heading);
  color: var(--gold-deep);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 18px 0 8px;
}

.giving-detail-label:first-child {
  margin-top: 0;
}

/* Named subsection within an unusually long detail body (currently only
   Thanks Offering — Ope and First Fruits use these). */
.giving-subheading {
  font-family: var(--font-heading);
  color: var(--navy);
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  margin: 26px 0 12px;
}

.giving-detail-body > .giving-subheading:first-child,
.giving-detail-panel-body > .giving-subheading:first-child {
  margin-top: 0;
}

/* Reference-only scripture line (no per-verse gloss supplied) */
.giving-scripture-refs {
  display: block;
  font-family: var(--font-heading);
  color: var(--navy);
  font-weight: 600;
  font-size: 0.9rem;
  margin: 0 0 14px;
}

.giving-detail-verse {
  margin: 0 0 14px;
  padding: 12px 16px;
  border-left: 3px solid var(--gold);
  background: rgba(200, 162, 74, 0.08);
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--navy);
  font-size: 0.92rem;
  line-height: 1.6;
}

.giving-detail-verse cite {
  display: block;
  margin-top: 6px;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--gold-deep);
  text-transform: uppercase;
}

/* Important theological qualification (Seed's guardrail, First Fruits'
   distinction) — navy-bordered, distinct from a scripture quote. Its own
   paragraphs are intentionally left to inherit the generic muted-paragraph
   styling above; only the container needs its own rule. */
.giving-detail-qualifier {
  margin: 0 0 14px;
  padding: 14px 16px;
  border-left: 3px solid var(--navy);
  background: rgba(16, 33, 63, 0.05);
  border-radius: 0 8px 8px 0;
}

/* Short standout statement — used both inside a card's detail body and
   within ordinary content sections (Give According to What God Has Given
   You, Designated Giving, Seed's guardrail lines). Deliberately a <div>,
   never a <p> — see the specificity note above. */
.giving-callout {
  margin: 0 0 14px;
  padding: 16px 20px;
  background: rgba(200, 162, 74, 0.1);
  border-radius: var(--radius);
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--navy);
  font-size: 1rem;
  line-height: 1.6;
}

.giving-callout--on-dark {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ivory);
}

/* ---- Ope: "When Should I Give Thanks?" reflection prompts — read as a
   litany, not an FAQ list. ---- */
.ope-reflection-list {
  display: grid;
  gap: 16px;
  margin: 0 0 20px;
  padding: 20px 0 0;
  border-top: 1px solid rgba(200, 162, 74, 0.3);
}

.ope-reflection-item {
  text-align: center;
}

.ope-reflection-question {
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--navy);
  font-size: 0.98rem;
  line-height: 1.6;
  margin: 0 0 4px;
}

.ope-reflection-answer {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--gold-deep);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.75rem;
}

/* ---- Ope: "The One Who Returned" (Luke 17:11–19) ---- */
.ope-display {
  margin: 20px 0;
  padding: 26px 22px;
  background: var(--navy);
  border-radius: var(--radius);
  text-align: center;
  font-family: var(--font-heading);
  color: var(--white);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.5;
}

/* ---- First Fruits vs. Tithe mini-comparison ---- */
.giving-mini-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 20px 0;
}

.giving-mini-compare-item {
  background: var(--gray-bg);
  border-radius: var(--radius);
  border-top: 3px solid var(--gold);
  padding: 20px 18px;
  text-align: center;
}

.giving-mini-compare-label {
  display: block;
  font-family: var(--font-heading);
  color: var(--gold-deep);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.7rem;
  margin: 0 0 10px;
}

.giving-mini-compare-question {
  color: var(--text-muted);
  font-size: 0.86rem;
  margin: 0 0 8px;
}

.giving-mini-compare-answer {
  font-family: var(--font-heading);
  color: var(--navy);
  font-weight: 700;
  font-size: 0.98rem;
}

@media (max-width: 560px) {
  .giving-mini-compare {
    grid-template-columns: 1fr;
  }
}

/* Below the desktop panel breakpoint, tiles expand INLINE via native
   <details> (see giving-guide.js) and any one of them can become very
   tall. A CSS Grid row does not reliably track a <details> element's
   expanded height for auto-sizing purposes once it grows this much
   (verified in testing: the row freezes at a stale size and later
   content overlaps it) — so grid is dropped in favor of plain block
   stacking here, which has no such row-sizing step to get wrong. This
   also means every card gets its own full-width row below desktop,
   which keeps the longer cards (Ope, First Fruits, Seed) readable
   rather than cramped into a forced two-up layout. */
@media (max-width: 1023px) {
  .giving-guide-shell {
    max-width: 640px;
  }

  .giving-tile-grid {
    display: block;
  }

  .giving-node-details + .giving-node-details {
    margin-top: 16px;
  }

  .giving-detail-panel {
    padding: 26px 22px;
  }
}

/* ---- The Poor Widow (Luke 21:1–4) ---- */
.widow-feature {
  max-width: 760px;
  margin: 0 auto;
  background: var(--navy);
  border-radius: var(--radius);
  padding: 52px 44px;
  text-align: center;
}

.widow-feature-eyebrow {
  font-family: var(--font-heading);
  color: var(--gold-light);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.75rem;
  margin: 0 0 18px;
}

.widow-feature-display {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--white);
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  line-height: 1.35;
  margin: 0 0 16px;
}

.widow-feature-ref {
  font-family: var(--font-body);
  color: var(--gold-light);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 28px;
}

.widow-feature-body {
  max-width: 560px;
  margin: 0 auto;
  text-align: left;
}

.widow-feature-body p {
  color: var(--ivory);
  opacity: 0.92;
  line-height: 1.8;
  margin: 0 0 14px;
}

.widow-feature-body p:last-child {
  margin-bottom: 0;
}

.widow-feature .giving-callout--on-dark {
  margin: 26px auto;
  max-width: 480px;
}

.widow-feature-closing {
  max-width: 560px;
  margin: 10px auto 0;
  text-align: center;
}

.widow-feature-closing p {
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--white);
  font-size: 1.05rem;
  line-height: 1.7;
  margin: 0 0 10px;
}

.widow-feature-closing p:last-child {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .widow-feature {
    padding: 40px 26px;
  }

  .widow-feature-body {
    text-align: center;
  }
}

/* ---- Generic small eyebrow label above a section heading, for a
   light-background section (Designated Giving, Give Online) — the
   navy page-header uses .page-header-eyebrow instead. ---- */
.content-eyebrow {
  font-family: var(--font-heading);
  color: var(--gold-deep);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.75rem;
  text-align: center;
  margin: 0 0 12px;
}

/* ---- Generic scripture pull-quote for ordinary (light-background)
   content sections — Giving Is Worship, What Is an Offering?, Give
   According to What God Has Given You, Heart Behind Every Gift. ---- */
.scripture-quote {
  max-width: 560px;
  margin: 24px auto 0;
  padding: 20px 26px;
  border-left: 3px solid var(--gold);
  background: rgba(200, 162, 74, 0.06);
  text-align: left;
}

.scripture-quote p {
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--navy);
  font-size: 1.05rem;
  line-height: 1.65;
  margin: 0 0 8px;
}

.scripture-quote cite {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.scripture-quote + .scripture-quote {
  margin-top: 16px;
}

/* ---- Quick Comparison ---- */
.comparison-table-wrap {
  max-width: 900px;
  margin: 0 auto;
  overflow-x: auto;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.comparison-table th,
.comparison-table td {
  padding: 16px 20px;
  text-align: left;
  vertical-align: top;
}

.comparison-table thead th {
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.comparison-table tbody tr:nth-child(even) {
  background: var(--gray-bg);
}

.comparison-table tbody td:first-child {
  font-family: var(--font-heading);
  color: var(--navy);
  font-weight: 700;
  white-space: nowrap;
}

.comparison-table tbody td {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
  border-bottom: 1px solid #e6e2d8;
}

.comparison-table tbody tr:last-child td {
  border-bottom: none;
}

@media (max-width: 700px) {
  .comparison-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .comparison-table,
  .comparison-table tbody,
  .comparison-table tr,
  .comparison-table td {
    display: block;
    width: 100%;
  }

  .comparison-table tr {
    padding: 18px 20px;
    border-bottom: 1px solid #e6e2d8;
  }

  .comparison-table tbody tr:nth-child(even) {
    background: var(--gray-bg);
  }

  .comparison-table tbody td:first-child {
    white-space: normal;
  }

  .comparison-table td {
    padding: 4px 0;
    border-bottom: none;
  }

  .comparison-table td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-heading);
    color: var(--gold-deep);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.66rem;
    margin-top: 10px;
  }

  .comparison-table td:first-child::before {
    margin-top: 0;
  }
}

/* ---- Designated Giving: max-width tweak on top of .giving-callout ---- */
.designated-giving-note {
  max-width: 680px;
  margin: 24px auto 0;
}

/* ---- Heart Behind Every Gift: six short contrast statements ---- */
.giving-contrast-list {
  max-width: 560px;
  margin: 30px auto 34px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
  text-align: center;
}

.giving-contrast-list li {
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--navy);
  font-size: 1.05rem;
  line-height: 1.5;
}

/* ---- Heart of Giving: restrained pull-quote ---- */
.giving-heart-quote {
  max-width: 620px;
  margin: 0 auto 30px;
  padding: 28px 32px;
  border-left: 3px solid var(--gold);
  background: rgba(200, 162, 74, 0.06);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.giving-heart-quote p {
  font-family: var(--font-heading);
  color: var(--navy);
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.7;
  margin: 0 0 10px;
}

.giving-heart-quote cite {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.giving-principles-list {
  max-width: 520px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  text-align: center;
}

.giving-principles-list li {
  font-family: var(--font-heading);
  color: var(--navy);
  font-size: 0.98rem;
}

/* ---- Give Online CTA ---- */
.give-cta {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.give-cta .btn {
  margin-top: 8px;
}

/* =========================================================
   Life as a Celestian — Practice Explorer
   Its own identity: five independent group shells (not one
   flowchart, not one flat tile grid). Reuses the site's design
   tokens/spacing/radius/border language established by Leadership
   & Ranks and Offerings & Giving, but every selector below is a
   fresh "practice-" namespace — no .rank-*/.giving-* rule is
   touched or depended upon.
   ========================================================= */

.practice-group {
  margin-bottom: 8px;
}

.practice-group-intro {
  max-width: 640px;
  margin: 0 auto 30px;
  text-align: center;
  color: var(--text-muted);
  line-height: 1.7;
}

/* ---- Shell: tile grid (left/center) + sticky detail panel (right) ---- */
.practice-shell {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items: start;
  max-width: 900px;
  margin: 0 auto;
}

.practice-track {
  min-width: 0;
}

.practice-detail-panel {
  position: sticky;
  top: 140px;
  background: var(--gray-bg);
  border: 1px solid #e6e2d8;
  border-radius: var(--radius);
  padding: 26px 24px;
}

.practice-detail-panel-eyebrow {
  font-family: var(--font-heading);
  color: var(--gold-deep);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.68rem;
  margin: 0 0 10px;
}

.practice-detail-panel-title {
  font-family: var(--font-heading);
  color: var(--navy);
  font-size: 1.1rem;
  margin: 0 0 14px;
  line-height: 1.35;
}

.practice-detail-panel-placeholder {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.7;
  margin: 0;
}

@media (max-width: 1023px) {
  .practice-shell {
    display: block;
  }

  .practice-detail-panel {
    display: none;
  }
}

/* ---- Tile grid ---- */
.practice-tile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.practice-node-details {
  display: block;
}

.practice-node-details > .practice-node-summary {
  background: var(--gray-bg);
  border: 1px solid #e6e2d8;
  border-radius: 10px;
}

.practice-node-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  cursor: pointer;
  padding: 18px 20px;
  text-align: center;
  min-height: 64px;
  transition: background var(--transition), box-shadow var(--transition);
}

.practice-node-summary::-webkit-details-marker {
  display: none;
}

.practice-node-summary:hover {
  background: rgba(200, 162, 74, 0.1);
}

.practice-node-summary:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: -2px;
}

.practice-node-name {
  font-family: var(--font-heading);
  color: var(--navy);
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.4;
}

.practice-node-summary.is-selected {
  background: rgba(200, 162, 74, 0.16);
  box-shadow: inset 4px 0 0 var(--gold);
}

/* Detail body: rendered inline on mobile. On desktop, only the INNER html
   of .practice-detail-body is cloned into .practice-detail-panel-body, so
   it arrives without the .practice-detail-body ancestor class — every rule
   below is written to work identically in both places (see the same
   pattern already used for .giving-detail-body / .giving-detail-panel-body). */
.practice-detail-body {
  padding: 0 20px 22px;
  text-align: left;
}

.practice-detail-body p:not(.practice-detail-label):not(.practice-scripture-refs):not(.practice-reflection),
.practice-detail-panel-body p:not(.practice-detail-label):not(.practice-scripture-refs):not(.practice-reflection),
.explorer-panel-body p:not(.practice-detail-label):not(.practice-scripture-refs):not(.practice-reflection) {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.75;
  margin: 0 0 14px;
}

.practice-detail-body p:last-child,
.practice-detail-panel-body p:last-child,
.explorer-panel-body p:last-child {
  margin-bottom: 0;
}

.practice-detail-label {
  display: block;
  font-family: var(--font-heading);
  color: var(--gold-deep);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 18px 0 8px;
}

.practice-detail-label:first-child {
  margin-top: 0;
}

.practice-scripture-refs {
  display: block;
  font-family: var(--font-heading);
  color: var(--navy);
  font-weight: 600;
  font-size: 0.9rem;
  margin: 0 0 14px;
}

/* Featured Scripture: quoted verse text */
.practice-detail-verse {
  margin: 0 0 14px;
  padding: 12px 16px;
  border-left: 3px solid var(--gold);
  background: rgba(200, 162, 74, 0.08);
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--navy);
  font-size: 0.92rem;
  line-height: 1.6;
}

.practice-detail-verse cite {
  display: block;
  margin-top: 6px;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--gold-deep);
  text-transform: uppercase;
}

/* Important theological qualification/understanding — navy-bordered, distinct from a scripture quote */
.practice-detail-qualifier {
  margin: 0 0 14px;
  padding: 14px 16px;
  border-left: 3px solid var(--navy);
  background: rgba(16, 33, 63, 0.05);
  color: var(--text-dark);
  font-size: 0.88rem;
  line-height: 1.7;
}

/* Short reflective closing line within "What It Means for Me" */
.practice-reflection {
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--navy);
  font-size: 0.94rem;
  line-height: 1.6;
}

@media (max-width: 760px) {
  .practice-shell {
    max-width: 640px;
  }
}

@media (max-width: 560px) {
  .practice-tile-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Understanding Celestial Order: four-way explanation grid ---- */
.practice-explain-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 820px;
  margin: 34px auto 0;
}

.practice-explain-item {
  background: var(--gray-bg);
  border-radius: var(--radius);
  padding: 26px 24px;
  border-top: 3px solid var(--gold);
}

.practice-explain-item h3 {
  font-family: var(--font-heading);
  color: var(--navy);
  font-size: 1rem;
  letter-spacing: 0.02em;
  margin: 0 0 10px;
}

.practice-explain-item p {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.7;
  margin: 0;
}

@media (max-width: 700px) {
  .practice-explain-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Final section: spiritual conclusion, not a blockquote ---- */
.practice-heart-list {
  max-width: 480px;
  margin: 28px auto 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  text-align: center;
}

.practice-heart-list li {
  font-family: var(--font-heading);
  color: var(--navy);
  font-size: 1.02rem;
}

/* ---- Supporting teachings: restrained secondary treatment beneath a
   group's interactive tiles. Deliberately quiet — no tiles, no panel,
   no new navigation. ---- */
.practice-supporting {
  max-width: 700px;
  margin: 34px auto 0;
  padding-top: 28px;
  border-top: 1px solid #e6e2d8;
}

.practice-supporting + .practice-supporting {
  margin-top: 30px;
}

.practice-supporting-heading {
  font-family: var(--font-heading);
  color: var(--gold-deep);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.72rem;
  margin: 0 0 14px;
  text-align: center;
}

/* Small eyebrow label on a Holy Rites & Sacred Observances entry (e.g. "Annual Observance") */
.content-list-item p.observance-eyebrow {
  color: var(--gold-deep);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.68rem;
  margin: 0 0 8px;
}

/* Reusing the practice- label/scripture/reflection classes inside .content-list-item
   (Holy Rites & Sacred Observances) needs to out-specify the existing sitewide
   .content-list-item p rule without touching it. */
.content-list-item p.practice-detail-label {
  color: var(--gold-deep);
}

.content-list-item p.practice-scripture-refs,
.content-list-item p.practice-reflection {
  color: var(--navy);
}

.practice-supporting-body p:not(.practice-detail-label):not(.practice-scripture-refs):not(.practice-reflection) {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.75;
  margin: 0 0 12px;
}

.practice-supporting-body p:last-child {
  margin-bottom: 0;
}

.practice-closing-statement {
  max-width: 680px;
  margin: 40px auto 0;
  padding: 40px 36px;
  background: var(--navy);
  border-radius: var(--radius);
  text-align: center;
}

.practice-closing-statement p {
  font-family: var(--font-heading);
  color: var(--ivory);
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.6;
  margin: 0 0 16px;
}

.practice-closing-statement cite {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-light);
}

/* =========================================================
   Order of Service — coming-soon guide panels
   Reuses the .hub-cta-card visual language (gray-bg, gold top
   border, shadow, radius) and the existing .historical-badge
   pill treatment for the "Coming Soon" status, since a static
   (non-clickable) card is a close cousin of the hub choice card.
   ========================================================= */
.service-guide-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 860px;
  margin: 36px auto 0;
}

.service-guide-card {
  background: var(--gray-bg);
  border-radius: var(--radius);
  border-top: 4px solid var(--gold);
  box-shadow: var(--shadow-soft);
  padding: 40px 32px;
  text-align: center;
}

.service-guide-title {
  font-family: var(--font-heading);
  color: var(--navy);
  font-size: 1.35rem;
  margin: 14px 0 14px;
}

.service-guide-desc {
  color: var(--text-muted);
  line-height: 1.75;
  margin: 0;
}

@media (max-width: 760px) {
  .service-guide-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
  }
}

/* =========================================================
   Life as a Celestian — Living It Out / At Disciple Parish /
   One Church (page expansion)

   Deliberately distinct from the .practice-* explorer above:
   no tiles, no shared panel, no icons/badges. Three narrative
   beats carry the section rhythm instead —
     navy (chapter transition) -> white (In the House of God,
     numbered editorial principles) -> ivory (At Disciple
     Parish, guidance rows) -> navy (closing chapter) —
   so the shift from "teaching" to "practice" reads visually
   without ever being labeled "Part II" in the copy.
   ========================================================= */

/* ---- Chapter transition: dark, quiet, deliberately spacious ---- */
.content-section.chapter-transition {
  background: var(--navy);
  text-align: center;
  padding: 110px 0 100px;
  border-top: none; /* overrides the sitewide .content-section + .content-section rule: a hairline seam would fight the background shift that already signals the chapter change */
}

.chapter-transition-eyebrow {
  font-family: var(--font-heading);
  color: var(--gold-light);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.8rem;
  margin: 0 0 20px;
}

.chapter-transition-eyebrow::before {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  background: var(--gold);
  margin: 0 auto 22px;
}

.chapter-transition-heading {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--white);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin: 0 0 22px;
}

.chapter-transition-body {
  max-width: 560px;
  margin: 0 auto;
  color: var(--ivory);
  opacity: 0.92;
  line-height: 1.85;
}

/* ---- In the House of God: scripture as a typographic moment, not a card ---- */
.chapter-scripture-moment {
  max-width: 620px;
  margin: 44px auto 0;
  padding: 0;
  border: none;
  background: none;
  text-align: center;
}

.chapter-scripture-moment::before {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--gold);
  margin: 0 auto 26px;
}

.chapter-scripture-moment p {
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--navy);
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  line-height: 1.55;
  margin: 0 0 14px;
}

.chapter-scripture-moment cite {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* ---- Rank structure orientation: three related concepts as a quiet
   editorial row (hairline dividers, no cards/icons), not a feature grid.
   Deliberately lighter and shorter than the rank-progression links below. ---- */
.rank-concepts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  max-width: 940px;
  margin: 48px auto 0;
  padding-top: 36px;
  border-top: 1px solid #e6e2d8;
}

.rank-concept {
  padding: 0 32px;
  border-left: 1px solid #e6e2d8;
  text-align: center;
}

.rank-concept:first-child {
  padding-left: 0;
  border-left: none;
}

.rank-concept:last-child {
  padding-right: 0;
}

.rank-concept-heading {
  font-family: var(--font-heading);
  color: var(--navy);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0 0 12px;
}

.rank-concept-body {
  color: var(--text-muted);
  font-size: 0.93rem;
  line-height: 1.75;
  margin: 0;
}

@media (max-width: 760px) {
  .rank-concepts {
    grid-template-columns: 1fr;
    max-width: 480px;
    border-top: none;
    padding-top: 0;
  }

  .rank-concept {
    padding: 0 0 28px;
    margin-bottom: 28px;
    border-left: none;
    border-bottom: 1px solid #e6e2d8;
  }

  .rank-concept:first-child {
    padding-left: 0;
  }

  .rank-concept:last-child {
    padding-right: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
  }
}

/* ---- Six editorial principles: numbered rows that flow across two
   columns on desktop (CSS multi-column, not a grid), so each principle
   keeps its own natural height instead of being forced into a uniform
   card. Numbers are typographic, not icon badges. ---- */
.conduct-principles {
  list-style: none;
  margin: 60px 0 0;
  padding: 0;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

.conduct-principle {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  padding-bottom: 34px;
  margin-bottom: 34px;
  border-bottom: 1px solid #e6e2d8;
}

.conduct-principle:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.conduct-principle-number {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.03em;
  margin: 0 0 10px;
}

.conduct-principle-statement {
  font-family: var(--font-heading);
  color: var(--navy);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 12px;
}

.conduct-principle-body p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.8;
  margin: 0 0 12px;
}

.conduct-principle-body p:last-child {
  margin-bottom: 0;
}

.conduct-principle-body .practice-reflection {
  margin-top: 14px;
}

@media (min-width: 900px) {
  .conduct-principles {
    column-count: 2;
    column-gap: 64px;
  }
}

/* ---- At Disciple Parish: horizontal guidance rows, not cards.
   A distinct ivory background (not the sitewide --alt gray already
   used for rhythm elsewhere on this page) marks this as its own
   visual chapter. ---- */
.parish-guidance {
  background: var(--ivory);
}

.parish-guidance-rows {
  max-width: 900px;
  margin: 48px auto 0;
  border-bottom: 1px solid rgba(200, 162, 74, 0.35);
}

.parish-guidance-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  padding: 34px 0;
  border-top: 1px solid rgba(200, 162, 74, 0.35);
}

.parish-guidance-title {
  font-family: var(--font-heading);
  color: var(--navy);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0;
}

.parish-guidance-content p {
  color: var(--text-muted);
  line-height: 1.8;
  margin: 0 0 12px;
}

.parish-guidance-content p:last-child {
  margin-bottom: 0;
}

@media (max-width: 700px) {
  .parish-guidance-row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 28px 0;
  }
}

/* ---- Closing chapter: the page's actual conclusion, not a CTA box ---- */
.content-section.chapter-closing {
  background: var(--navy);
  text-align: center;
  padding: 100px 0;
  border-top: none; /* same rationale as .chapter-transition above */
}

.chapter-closing-eyebrow {
  font-family: var(--font-heading);
  color: var(--gold-light);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.8rem;
  margin: 0 0 22px;
}

.chapter-closing-heading {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--white);
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.3;
  margin: 0 0 36px;
}

.chapter-closing-body {
  max-width: 620px;
  margin: 0 auto;
}

.chapter-closing-body p {
  color: var(--ivory);
  opacity: 0.9;
  line-height: 1.85;
  margin: 0 0 16px;
}

.chapter-closing-body p:last-child {
  margin-bottom: 0;
}

.chapter-closing-links {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 40px;
}

/* =========================================================
   Life as a Celestian — Unified Practice Explorer
   Built by practice-explorer.js from the existing .practice-group
   markup. On desktop: persistent sticky navigator (left) + one
   dynamic reading panel (right). On mobile/tablet: a sticky
   compact selector that opens the same navigator as a panel.

   .explorer-legacy-hide-* below is only applied once JS has
   successfully built the new explorer (body.js-explorer-ready) —
   without JS, the original per-category tile grids stay exactly
   as they always were.
   ========================================================= */

.explorer-section .section-lead {
  margin-bottom: 8px;
}

/* ---- Legacy per-category sections: hide what the new explorer
   now covers, keep whatever it doesn't (supplementary notes). ---- */
body.js-explorer-ready .explorer-legacy-hide-shell .practice-group-intro,
body.js-explorer-ready .explorer-legacy-hide-shell .practice-shell {
  display: none;
}

body.js-explorer-ready .explorer-legacy-hide-all {
  display: none;
}

/* ---- Mobile/tablet sticky selector bar (hidden on desktop) ---- */
.explorer-mobile-bar {
  display: none;
}

.explorer-mobile-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 14px 18px;
  background: var(--white);
  border: 1px solid #e6e2d8;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  text-align: left;
  cursor: pointer;
}

.explorer-mobile-labels {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.explorer-mobile-category {
  font-family: var(--font-heading);
  color: var(--gold-deep);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.66rem;
}

.explorer-mobile-topic {
  font-family: var(--font-heading);
  color: var(--navy);
  font-weight: 700;
  font-size: 0.98rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.explorer-mobile-chevron {
  flex: 0 0 auto;
  color: var(--gold-deep);
  transition: transform var(--transition);
}

.explorer-mobile-toggle[aria-expanded="true"] .explorer-mobile-chevron {
  transform: rotate(180deg);
}

.explorer-mobile-toggle:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 2px;
}

/* ---- Shell layout ---- */
.explorer-shell {
  max-width: 1080px;
  margin: 40px auto 0;
}

/* ---- Navigator: editorial table of contents, not tabs/pills/cards ---- */
.explorer-nav {
  margin: 0 0 28px;
}

.explorer-category + .explorer-category {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid #e6e2d8;
}

.explorer-category-name {
  font-family: var(--font-heading);
  color: var(--gold-deep);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.68rem;
  margin: 0 0 10px;
}

.explorer-topic-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.explorer-topic-link {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  padding: 9px 0 9px 14px;
  font-family: var(--font-heading);
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.4;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}

.explorer-topic-link:hover {
  color: var(--navy);
  background: rgba(200, 162, 74, 0.06);
}

.explorer-topic-link:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 2px;
}

.explorer-topic-link.is-active {
  color: var(--navy);
  font-weight: 700;
  border-left-color: var(--gold);
  background: rgba(200, 162, 74, 0.1);
}

/* ---- Reading panel ---- */
.explorer-panel {
  min-width: 0;
}

.explorer-panel-category {
  font-family: var(--font-heading);
  color: var(--gold-deep);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.68rem;
  margin: 0 0 10px;
}

.explorer-panel-title {
  font-family: var(--font-heading);
  color: var(--navy);
  font-size: 1.35rem;
  line-height: 1.3;
  margin: 0 0 22px;
}

.explorer-panel-title:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 4px;
}

.explorer-panel-body {
  max-width: 640px;
}

.explorer-panel-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid #e6e2d8;
  max-width: 640px;
}

.explorer-panel-prev,
.explorer-panel-next {
  background: none;
  border: none;
  padding: 8px 0;
  font-family: var(--font-heading);
  color: var(--navy);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.explorer-panel-next {
  text-align: right;
  margin-left: auto;
}

.explorer-panel-prev:hover,
.explorer-panel-next:hover {
  color: var(--gold-deep);
}

.explorer-panel-prev:focus-visible,
.explorer-panel-next:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 2px;
}

/* ---- Desktop: sticky sidebar + panel side by side ---- */
@media (min-width: 1024px) {
  .explorer-shell {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 56px;
    align-items: start;
  }

  .explorer-nav {
    position: sticky;
    top: var(--explorer-sticky-offset, 100px);
    max-height: calc(100vh - var(--explorer-sticky-offset, 100px) - 32px);
    overflow-y: auto;
    margin: 0;
    padding-right: 4px;
  }
}

/* ---- Below desktop: sticky compact selector + popover navigator.
   .explorer-shell is the positioning context (position: relative)
   so the absolutely-positioned nav anchors right at the shell's own
   top edge — which, in normal flow, sits immediately below the
   sticky mobile bar (the bar is a separate, preceding sibling, not
   an ancestor, so the nav cannot anchor to the bar directly). When
   the nav is closed it is taken out of flow entirely, so the panel
   underneath renders at that same top edge as if the nav were not
   there; when open, the nav floats over the panel as a dropdown. ---- */
@media (max-width: 1023px) {
  .explorer-mobile-bar {
    display: block;
    position: sticky;
    top: var(--explorer-sticky-offset, 70px);
    z-index: 20;
    margin-bottom: 24px;
  }

  .explorer-shell {
    position: relative;
  }

  .explorer-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 15;
    margin: 0;
    padding: 18px 20px;
    background: var(--white);
    border: 1px solid #e6e2d8;
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    max-height: 60vh;
    overflow-y: auto;
  }

  .explorer-nav.is-open {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .explorer-mobile-chevron {
    transition: none;
  }
}

/* =========================================================
   About Celestial Church of Christ — 1947 origin story
   The strongest visual feature of the page: an alternating
   vertical timeline (desktop) that collapses to a single
   left-aligned column (mobile), with the September 29 Divine
   Order entry breaking out as a full-width emphasis panel.
   ========================================================= */

.origin-timeline {
  position: relative;
  max-width: 980px;
  margin: 48px auto 0;
}

.origin-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: rgba(200, 162, 74, 0.35);
  transform: translateX(-50%);
}

.origin-timeline-item {
  position: relative;
  width: 50%;
  padding: 0 48px 56px;
}

.origin-timeline-item:nth-child(odd) {
  margin-left: 0;
  text-align: right;
}

.origin-timeline-item:nth-child(even) {
  margin-left: 50%;
  text-align: left;
}

.origin-timeline-marker {
  position: absolute;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--gold);
  z-index: 2;
}

.origin-timeline-item:nth-child(odd) .origin-timeline-marker {
  right: -8px;
}

.origin-timeline-item:nth-child(even) .origin-timeline-marker {
  left: -8px;
}

.origin-timeline-date {
  font-family: var(--font-heading);
  color: var(--gold-deep);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.78rem;
  margin: 0 0 6px;
}

.origin-timeline-title {
  font-family: var(--font-heading);
  color: var(--navy);
  font-size: 1.2rem;
  margin: 0 0 12px;
}

.origin-timeline-content p {
  color: var(--text-muted);
  line-height: 1.75;
  margin: 0 0 12px;
  font-size: 0.94rem;
}

.origin-timeline-content p:last-child {
  margin-bottom: 0;
}

.origin-timeline-word {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.1em;
  color: var(--gold-deep);
  text-transform: uppercase;
}

.origin-timeline-quote {
  margin: 0 0 12px;
  padding: 10px 16px;
  border-left: 3px solid var(--gold);
  background: rgba(200, 162, 74, 0.06);
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--navy);
}

.origin-timeline-item:nth-child(odd) .origin-timeline-quote {
  border-left: none;
  border-right: 3px solid var(--gold);
}

/* Emphasis item (the Divine Order): full-width, breaks the
   alternating rail, dark panel to mark it as the page's central
   moment. */
.origin-timeline-item--emphasis {
  width: 100%;
  margin-left: 0;
  text-align: center;
  padding: 0 0 56px;
}

.origin-timeline-item--emphasis .origin-timeline-marker {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
  background: var(--gold);
  border-color: var(--navy);
}

.origin-timeline-item--emphasis .origin-timeline-content {
  max-width: 640px;
  margin: 0 auto;
  background: var(--navy);
  border-radius: var(--radius);
  padding: 44px 40px;
}

.origin-timeline-item--emphasis .origin-timeline-date {
  color: var(--gold-light);
}

.origin-timeline-item--emphasis .origin-timeline-title {
  color: var(--white);
  font-size: 1.5rem;
}

.origin-timeline-item--emphasis .origin-timeline-content p {
  color: var(--ivory);
  opacity: 0.92;
}

.origin-timeline-callout {
  margin-top: 20px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--white);
  font-size: 1.1rem;
}

@media (max-width: 860px) {
  .origin-timeline::before {
    left: 20px;
  }

  .origin-timeline-item,
  .origin-timeline-item:nth-child(odd),
  .origin-timeline-item:nth-child(even) {
    width: 100%;
    margin-left: 0;
    text-align: left;
    padding: 0 0 44px 52px;
  }

  .origin-timeline-item:nth-child(odd) .origin-timeline-marker,
  .origin-timeline-item:nth-child(even) .origin-timeline-marker {
    left: 12px;
    right: auto;
  }

  .origin-timeline-item:nth-child(odd) .origin-timeline-quote {
    border-right: none;
    border-left: 3px solid var(--gold);
  }

  .origin-timeline-item--emphasis .origin-timeline-content {
    padding: 32px 24px;
  }
}

/* ---- The Name Revealed: three language forms ---- */
.name-reveal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 900px;
  margin: 32px auto;
}

.name-reveal-item {
  background: var(--gray-bg);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 28px 20px;
  text-align: center;
}

.name-reveal-text {
  font-family: var(--font-heading);
  color: var(--navy);
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0 0 10px;
  line-height: 1.4;
}

.name-reveal-lang {
  color: var(--gold-deep);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.72rem;
  margin: 0;
}

@media (max-width: 760px) {
  .name-reveal-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- One Church, Many Parishes: emphasis row ---- */
.one-church-emphasis {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin-top: 40px;
}

.one-church-emphasis span {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(1.05rem, 2.6vw, 1.4rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 8px 28px;
  border-right: 1px solid rgba(200, 162, 74, 0.4);
}

.one-church-emphasis span:last-child {
  border-right: none;
}

@media (max-width: 640px) {
  .one-church-emphasis {
    flex-direction: column;
  }

  .one-church-emphasis span {
    border-right: none;
    border-bottom: 1px solid rgba(200, 162, 74, 0.4);
    padding: 10px 0;
  }

  .one-church-emphasis span:last-child {
    border-bottom: none;
  }
}

/* ---- Understanding Celestial Worship: reflective question list ---- */
.worship-questions {
  max-width: 620px;
  margin: 28px auto;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.worship-questions li {
  font-family: var(--font-heading);
  color: var(--navy);
  font-style: italic;
  font-size: 1rem;
  padding-left: 22px;
  position: relative;
}

.worship-questions li::before {
  content: "\2014";
  position: absolute;
  left: 0;
  color: var(--gold);
}

/* =========================================================
   Order of Service — hub directory
   (/worship/order-of-service/)
   ========================================================= */

.hub-directory {
  max-width: 640px;
  margin: 0 auto;
  border-top: 1px solid #e6e2d8;
}

.hub-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 4px;
  border-bottom: 1px solid #e6e2d8;
  color: inherit;
  transition: background var(--transition);
}

a.hub-row:hover,
a.hub-row:focus-visible {
  background: rgba(200, 162, 74, 0.06);
}

a.hub-row:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: -2px;
}

.hub-row--muted {
  opacity: 0.72;
}

.hub-row-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(200, 162, 74, 0.12);
  color: var(--gold-deep);
  margin-top: 2px;
}

.hub-row-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hub-row-body {
  flex: 1 1 auto;
  min-width: 0;
}

.hub-row-title {
  font-family: var(--font-heading);
  color: var(--navy);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 3px;
}

.hub-row-subtitle {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
}

.hub-row-aside {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 8px;
  white-space: nowrap;
}

.hub-row-status {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.hub-row-action {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--gold-deep);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.hub-row-action svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--transition);
}

a.hub-row:hover .hub-row-action svg,
a.hub-row:focus-visible .hub-row-action svg {
  transform: translateX(3px);
}

/* =========================================================
   Order of Service — shared step/timeline system
   Used by both /worship/order-of-service/weekday/ (Wednesday &
   Friday) and /worship/order-of-service/sunday/. Class names below
   still read "weekday-*" for the intro/rail/layout shell, but the
   system is shared — see the note above order-of-service.js.
   ========================================================= */

/* ---- Compact page intro (deliberately not the standard dark
   .page-header band — this page is a dense reference, not a hero) ---- */
.weekday-intro {
  padding: 48px 0 36px;
  text-align: center;
  border-bottom: 1px solid #e6e2d8;
}

.weekday-intro-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--gold-deep);
  margin-bottom: 14px;
}

.weekday-intro-icon svg {
  width: 40px;
  height: 40px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.weekday-intro-heading {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--navy);
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  letter-spacing: 0.01em;
  margin: 0 0 10px;
}

.weekday-intro-days {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 20px;
}

.weekday-intro-lead {
  max-width: 620px;
  margin: 0 auto;
  color: var(--text-muted);
  line-height: 1.75;
}

/* ---- Rail + reading column layout ---- */
.weekday-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  max-width: 900px;
  margin: 0 auto;
  align-items: start;
}

@media (min-width: 1024px) {
  .weekday-layout {
    grid-template-columns: 210px 1fr;
    gap: 56px;
    max-width: 1080px;
  }
}

/* Mobile/tablet: a single <details> acts as "Jump to Section".
   Desktop: the same element is forced open, its summary hidden,
   and it becomes a quiet sticky rail — no duplicated markup. */
.weekday-rail {
  margin: 32px 0 0;
}

.weekday-rail-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  padding: 12px 16px;
  border: 1px solid #e6e2d8;
  border-radius: 8px;
  background: var(--gray-bg);
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
}

.weekday-rail-summary::-webkit-details-marker {
  display: none;
}

.weekday-rail-summary:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 2px;
}

.weekday-rail-summary svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.weekday-rail-nav {
  padding: 6px 4px 6px 20px;
  position: relative;
}

.weekday-rail-nav::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: #e6e2d8;
}

.weekday-rail-item {
  display: block;
  position: relative;
  padding: 9px 0 9px 16px;
  color: var(--text-muted);
  font-size: 0.86rem;
  line-height: 1.4;
  transition: color var(--transition);
}

.weekday-rail-item::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 15px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--white);
  border: 1.5px solid var(--gold);
}

.weekday-rail-item:hover,
.weekday-rail-item:focus-visible {
  color: var(--navy);
}

.weekday-rail-item:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 2px;
}

.weekday-rail-item.is-active {
  color: var(--navy);
  font-weight: 600;
}

.weekday-rail-item.is-active::before {
  background: var(--gold);
}

.weekday-rail-item-range {
  display: block;
  font-size: 0.74rem;
  color: #9a9382;
}

@media (min-width: 1024px) {
  /* A closed <details> excludes its non-summary content from layout
     at the rendering-engine level — no CSS override on the child can
     defeat this. order-of-service.js sets the real `open` property
     on this element at this breakpoint; without JS, it still works
     as an honest, native, closed-by-default disclosure the visitor
     can click open. */
  .weekday-rail-summary {
    display: none;
  }

  .weekday-rail {
    position: sticky;
    top: 110px;
    margin: 0;
  }

  .weekday-rail-nav {
    padding-left: 20px;
  }
}

/* ---- Reading column ---- */
.weekday-reading {
  min-width: 0;
  padding: 40px 0 0;
}

@media (min-width: 1024px) {
  .weekday-reading {
    padding-top: 4px;
  }
}

.step-movement {
  scroll-margin-top: 110px;
}

.step-movement + .step-movement {
  margin-top: 52px;
  padding-top: 40px;
  border-top: 1px solid #e6e2d8;
}

.step-movement-heading {
  font-family: var(--font-heading);
  color: var(--gold-deep);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 4px;
}

.step-movement-range {
  color: #9a9382;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--font-body);
  font-size: 0.78rem;
}

.step-list {
  position: relative;
  list-style: none;
  margin: 26px 0 0;
  padding: 0 0 0 40px;
}

.step-list::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: #e6e2d8;
}

.step {
  position: relative;
  scroll-margin-top: 110px;
}

.step + .step {
  margin-top: 34px;
}

.step-marker {
  position: absolute;
  left: -40px;
  top: 1px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--white);
  border: 1.5px solid var(--gold);
  color: var(--navy);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.step-title {
  font-family: var(--font-heading);
  color: var(--navy);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 2px 0 8px;
}

.step-instruction {
  color: var(--text-dark);
  line-height: 1.75;
  margin: 0;
}

.step-instruction + .step-instruction {
  margin-top: 10px;
}

.step-response {
  margin: 10px 0 0;
  color: var(--text-dark);
  line-height: 1.7;
  font-style: italic;
}

.step-response-label {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-right: 8px;
}

.step-subaction + .step-subaction {
  margin-top: 18px;
}

.step-subaction-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 5px;
}

.step-holy-name {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--navy);
}

.step-crossref {
  margin: 10px 0 0;
  font-size: 0.88rem;
}

/* ---- Small educational note: lighter than a disclosure, for a
   one-line aside that doesn't warrant its own "Learn the Meaning"
   control (Sunday page). ---- */
.step-note {
  margin: 10px 0 0;
  color: var(--text-muted);
  font-size: 0.86rem;
  line-height: 1.7;
}

/* ---- Directional sequence (Sunday Seven Hallelujahs): generalizes
   the day-diff row pattern to four equal items. No per-direction
   color coding — the four directions carry no distinct meaning. ---- */
.step-directions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  margin-top: 14px;
}

.step-direction-item {
  flex: 1 1 130px;
  padding-left: 12px;
  border-left: 2px solid var(--gold);
}

.step-direction-compass {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 2px;
}

.step-direction-count {
  color: var(--navy);
  font-weight: 600;
  font-size: 0.94rem;
}

/* ---- Day differences: thin accent rule, never color alone ---- */
.step-day-diff {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 12px;
}

.step-day-diff-item {
  flex: 1 1 200px;
  padding-left: 12px;
  border-left: 2px solid var(--gold);
}

.step-day-diff-item--power {
  border-left-color: #3a5f80;
}

.step-day-diff-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 2px;
}

.step-day-diff-item--power .step-day-diff-label {
  color: #3a5f80;
}

.step-day-diff-value {
  color: var(--navy);
  font-weight: 600;
  font-size: 0.94rem;
}

/* ---- "Learn the Meaning" disclosure: understated, full-width bar ---- */
.step-disclosure {
  margin-top: 14px;
}

.step-disclosure-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  padding: 10px 14px;
  border: 1px solid rgba(200, 162, 74, 0.3);
  border-radius: 8px;
  background: rgba(200, 162, 74, 0.06);
  color: var(--gold-deep);
  font-size: 0.88rem;
  font-weight: 600;
  transition: background var(--transition), border-color var(--transition);
}

.step-disclosure[open] > .step-disclosure-summary {
  border-radius: 8px 8px 0 0;
}

.step-disclosure-summary::-webkit-details-marker {
  display: none;
}

.step-disclosure-summary:hover {
  background: rgba(200, 162, 74, 0.11);
}

.step-disclosure-summary:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 2px;
}

.step-disclosure-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.step-disclosure-question {
  flex: 1 1 auto;
}

.step-disclosure-chevron {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s ease;
}

.step-disclosure[open] > .step-disclosure-summary .step-disclosure-chevron {
  transform: rotate(180deg);
}

.step-disclosure:not([open]) > .step-disclosure-body-wrap,
.step-disclosure[open] > .step-disclosure-body-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}

.step-disclosure[open] > .step-disclosure-body-wrap {
  grid-template-rows: 1fr;
}

.step-disclosure-body {
  overflow: hidden;
  min-height: 0;
}

.step-disclosure-body-inner {
  padding: 14px 16px 16px;
  background: var(--ivory);
  border: 1px solid rgba(200, 162, 74, 0.3);
  border-top: none;
  border-radius: 0 0 8px 8px;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.75;
}

.step-disclosure-body-inner p {
  margin: 0 0 12px;
}

.step-disclosure-body-inner p:last-child {
  margin-bottom: 0;
}

.step-disclosure-body-inner strong {
  color: var(--navy);
}

@media (max-width: 560px) {
  .step-list {
    padding-left: 34px;
  }

  .step-list::before {
    left: 11px;
  }

  .step-marker {
    left: -34px;
    width: 24px;
    height: 24px;
    font-size: 0.74rem;
  }
}