/* ============================================
   The Voice of Mercy — Illuminated Edition
   Design System v2 · 2026-04-28
   ============================================ */

/* Reset */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ============================================
   Design Tokens
   ============================================ */
:root {
  /* Sacred gold scale */
  --gold: #c5a55a;
  --gold-light: #e8d5a3;
  --gold-bright: #f0c75e;
  --gold-deep: #9a7e3d;
  --gold-glow: rgba(197, 165, 90, 0.35);

  /* Warm darks */
  --dark: #0a0604;
  --dark-warm: #1a0d08;
  --dark-mahogany: #2b160d;

  /* Parchment / cream scale */
  --cream: #f7f0e3;
  --cream-warm: #f3eada;
  --cream-deep: #ebdfc6;
  --parchment: #f8f1e1;
  --parchment-shade: #e8dcc1;

  /* Liturgical reds */
  --burgundy: #6b1d2a;
  --burgundy-deep: #3d0f18;
  --burgundy-rich: #5a182a;
  --burgundy-soft: #8b3142;
  --rubric: #4a0f1a; /* old-manuscript red ink */

  /* Scene colors — sampled from the cover painting (gorge greens & hazy sky) */
  --sage: #7a8559;
  --sage-deep: #4f5938;
  --sage-light: #aab48a;
  --sky: #8a9da3;
  --sky-deep: #5f7176;

  /* Text colors */
  --text-primary: #2b1410;     /* dark warm brown — main body on cream */
  --text-secondary: #5a3528;   /* warm umber — secondary on cream */
  --text-muted: rgba(43, 20, 16, 0.55);
  --text-on-dark: #f3eada;
  --text-on-dark-muted: rgba(243, 234, 218, 0.65);

  /* Section divider gold gradients */
  --rule-gold: linear-gradient(90deg, transparent, var(--gold), transparent);
  --rule-gold-deep: linear-gradient(90deg, transparent, var(--gold-deep), transparent);
}

/* ============================================
   Parchment texture — used as repeating background
   ============================================ */
:root {
  --parchment-texture:
    url("data:image/svg+xml;utf8,<svg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'><filter id='paper'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.42 0 0 0 0 0.22 0 0 0 0.13 0'/></filter><rect width='100%25' height='100%25' filter='url(%23paper)'/></svg>");
  --noise-fine:
    url("data:image/svg+xml;utf8,<svg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ============================================
   Base
   ============================================ */
html {
  scroll-behavior: smooth;
}

body {
  background: var(--cream);
  background-image: var(--parchment-texture);
  background-size: 400px 400px;
  background-attachment: fixed;
  color: var(--text-primary);
  font-family: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--gold-glow);
  color: var(--burgundy-deep);
}

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

/* ============================================
   Typography utilities
   ============================================ */
.font-display {
  font-family: 'Cinzel', 'Trajan', serif;
}

.font-body {
  font-family: 'Cormorant Garamond', Georgia, serif;
}

.font-ui {
  font-family: 'Montserrat', system-ui, sans-serif;
}

/* ============================================
   Buttons
   ============================================ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--gold-deep), var(--gold), var(--gold-bright));
  background-size: 200% 100%;
  background-position: 0% 50%;
  color: var(--burgundy-deep);
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  padding: 1.05rem 2.6rem;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background-position 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.4s ease;
  text-decoration: none;
  box-shadow: 0 2px 12px rgba(154, 126, 61, 0.25);
}

.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.4) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary:hover {
  background-position: 100% 50%;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(154, 126, 61, 0.35);
}

.btn-primary:hover::before {
  transform: translateX(100%);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--burgundy);
  border: 1px solid var(--burgundy);
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  padding: 1rem 2.5rem;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  position: relative;
}

.btn-secondary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--burgundy);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

.btn-secondary:hover {
  color: var(--cream);
  border-color: var(--burgundy);
  transform: translateY(-2px);
}

.btn-secondary:hover::after {
  transform: scaleX(1);
}

/* On dark backgrounds */
.on-dark .btn-secondary,
.hero .btn-secondary {
  color: var(--gold);
  border-color: var(--gold);
}

.on-dark .btn-secondary::after,
.hero .btn-secondary::after {
  background: var(--gold);
}

.on-dark .btn-secondary:hover,
.hero .btn-secondary:hover {
  color: var(--burgundy-deep);
}

/* ============================================
   Keyframes
   ============================================ */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes gold-shimmer {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 200% center; }
}

@keyframes scroll-pulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.6); transform-origin: top; }
  50% { opacity: 0.85; transform: scaleY(1); }
}

@keyframes particle-float {
  0% { opacity: 0; transform: translateY(100vh) scale(0); }
  10% { opacity: 0.8; }
  90% { opacity: 0.3; }
  100% { opacity: 0; transform: translateY(-10vh) scale(1.5); }
}

@keyframes godray-drift {
  0%, 100% { transform: translate(0, 0) rotate(15deg); opacity: 0.18; }
  50% { transform: translate(20px, 10px) rotate(15deg); opacity: 0.28; }
}

@keyframes ornament-pulse {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50% { opacity: 0.75; transform: scale(1.05); }
}

/* ============================================
   Ornamental dividers — between sections
   ============================================ */
.ornament-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 4rem 2rem;
  position: relative;
  z-index: 2;
  background: transparent;
}

.ornament-divider::before,
.ornament-divider::after {
  content: '';
  flex: 0 1 200px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
  opacity: 0.55;
}

.ornament-divider-mark {
  font-family: 'Cinzel', serif;
  color: var(--gold);
  font-size: 1rem;
  letter-spacing: 0.3em;
  opacity: 0.7;
  animation: ornament-pulse 6s ease-in-out infinite;
}

/* On dark backgrounds */
.on-dark .ornament-divider::before,
.on-dark .ornament-divider::after {
  background: linear-gradient(90deg, transparent, var(--gold-light) 30%, var(--gold-light) 70%, transparent);
  opacity: 0.4;
}

.on-dark .ornament-divider-mark {
  color: var(--gold-light);
}

/* ============================================
   Hero — cathedral-at-dawn (dramatic, but lifted)
   ============================================ */
.hero {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--dark-mahogany);
  isolation: isolate;
  /* Clear the fixed nav pill and give the tall 3-line title breathing room.
     box-sizing keeps min-height:100vh honest with the padding; min-height
     (not height) lets the hero grow on short/mobile screens so the eyebrow
     is never clipped under the nav. */
  box-sizing: border-box;
  padding: 6rem 1.5rem 3rem;
}

/* Bottom scrim — fades up from the lower edge so the subtitles and CTAs
   lift cleanly off the painting's busy lower detail. Above the video,
   below the hero content. */
.hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50%;
  background: linear-gradient(to bottom, transparent, rgba(10, 6, 4, 0.94));
  z-index: 1;
  pointer-events: none;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 1;
  filter: saturate(1.3) contrast(1.22) brightness(0.91) sepia(0.05);
}

/* Stained-glass color layer — warm radial diffusion */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 70% 50% at 25% 35%, rgba(107, 29, 42, 0.55) 0%, transparent 60%),
    radial-gradient(ellipse 50% 70% at 75% 55%, rgba(197, 165, 90, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse 100% 80% at 50% 110%, rgba(10, 6, 4, 0.95) 0%, transparent 65%),
    linear-gradient(170deg, var(--dark-warm) 0%, rgba(43, 22, 13, 0.7) 45%, var(--dark) 100%);
  pointer-events: none;
}

/* Stained-glass godrays — diagonal warm light shafts */
.hero-bg::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 60%;
  height: 140%;
  background: linear-gradient(110deg, transparent 40%, rgba(240, 199, 94, 0.10) 50%, transparent 60%);
  transform: rotate(15deg);
  animation: godray-drift 12s ease-in-out infinite;
  pointer-events: none;
}

.hero-bg::after {
  content: '';
  position: absolute;
  top: -10%;
  left: 10%;
  width: 50%;
  height: 130%;
  background: linear-gradient(105deg, transparent 45%, rgba(232, 213, 163, 0.08) 50%, transparent 55%);
  transform: rotate(8deg);
  animation: godray-drift 16s ease-in-out infinite reverse;
  pointer-events: none;
}

.hero-grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.06;
  background-image: var(--noise-fine);
  pointer-events: none;
}

.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2rem;
  max-width: 920px;
}

.hero-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.55em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 2.2rem;
  opacity: 0;
  animation: fade-up 1.4s ease 0.3s forwards;
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
}

.hero-eyebrow::before,
.hero-eyebrow::after {
  content: '';
  display: inline-block;
  width: 36px;
  height: 1px;
  background: var(--gold);
  opacity: 0.6;
}

.hero-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 400;
  letter-spacing: 0.16em;
  line-height: 1.05;
  color: var(--cream);
  margin-bottom: 0.4rem;
  opacity: 0;
  animation: fade-up 1.4s ease 0.6s forwards;
  text-shadow: 0 0 90px rgba(197, 165, 90, 0.35);
}

.hero-title-line {
  display: block;
  font-weight: 400;
}

.hero-title-accent {
  display: block;
  font-size: clamp(4.5rem, 16vw, 13rem);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: 0.06em;
  background: linear-gradient(135deg, var(--gold-light), var(--gold-bright), var(--gold), var(--gold-light));
  background-size: 250% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: fade-up 1.4s ease 0.6s forwards, gold-shimmer 5s ease-in-out infinite;
  opacity: 0;
  margin: 0.15em 0;
  filter: drop-shadow(0 0 24px rgba(197, 165, 90, 0.25));
}

/* Language-specific accent sizing — the gold word varies a lot in length:
   EN "MERCY" (5) · FR "MISÉRICORDE" (11) · HT "MIZÈRIKÒD" (9).
   The default above fits MERCY; longer words must scale down to fit. */
html[lang="fr"] .hero-title-accent {
  font-size: clamp(2.4rem, 9vw, 6.5rem);
  letter-spacing: 0.02em;
}

html[lang="ht"] .hero-title-accent {
  font-size: clamp(3rem, 11vw, 8.5rem);
  letter-spacing: 0.04em;
}

html[lang="es"] .hero-title-accent {
  /* "MISERICORDIA" — 12 letters, the longest accent word; size like French. */
  font-size: clamp(2.3rem, 8.5vw, 6rem);
  letter-spacing: 0.02em;
}

.hero-subtitle-fr {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.55rem;
  font-weight: 300;
  font-style: italic;
  color: rgba(232, 213, 163, 0.75);
  letter-spacing: 0.1em;
  margin-bottom: 0.4rem;
  opacity: 0;
  animation: fade-up 1.4s ease 0.9s forwards;
}

.hero-subtitle-ht {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-weight: 300;
  font-style: italic;
  color: rgba(232, 213, 163, 0.55);
  letter-spacing: 0.08em;
  margin-bottom: 1.2rem;
  opacity: 0;
  animation: fade-up 1.4s ease 1s forwards;
}

.hero-author {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: rgba(232, 220, 200, 0.6);
  margin-bottom: 2.8rem;
  opacity: 0;
  animation: fade-up 1.4s ease 1.1s forwards;
}

.hero-divider {
  width: 140px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 0 auto 2.8rem;
  opacity: 0;
  animation: fade-up 1.4s ease 1.2s forwards;
  position: relative;
}

.hero-divider::before {
  content: '✦';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--dark-mahogany);
  padding: 0 10px;
  color: var(--gold);
  font-size: 0.75rem;
}

.hero-ctas {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
  opacity: 0;
  animation: fade-up 1.4s ease 1.4s forwards;
}

.scroll-indicator {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  opacity: 0;
  animation: fade-up 1.4s ease 2s forwards;
}

.scroll-line {
  width: 1px;
  height: 60px;
  background: linear-gradient(180deg, var(--gold), transparent);
  margin: 0 auto;
  animation: scroll-pulse 2.4s ease-in-out infinite;
}

.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--gold-bright);
  border-radius: 50%;
  opacity: 0;
  animation: particle-float 9s ease-in-out infinite;
  box-shadow: 0 0 4px rgba(240, 199, 94, 0.6);
}

@media (max-width: 768px) {
  .hero-title { letter-spacing: 0.08em; }
  .hero-subtitle-fr { font-size: 1.2rem; }
  .hero-eyebrow { font-size: 0.6rem; letter-spacing: 0.35em; }
  .hero-eyebrow::before,
  .hero-eyebrow::after { width: 24px; }
}

/* ============================================
   Navigation — refined cream-translucent floating pill
   ============================================ */
.nav-mockup {
  position: fixed;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0.85rem 2rem;
  background: rgba(247, 240, 227, 0.82);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(197, 165, 90, 0.4);
  border-radius: 100px;
  box-shadow:
    0 4px 20px rgba(43, 22, 13, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.5) inset;
  transition: background 0.4s, border-color 0.4s,
              transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Over-hero state — darker variant for legibility */
.nav-mockup.over-hero {
  background: rgba(26, 13, 8, 0.55);
  border-color: rgba(197, 165, 90, 0.25);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(197, 165, 90, 0.08) inset;
}

/* Hidden state — slides up out of the way while scrolling down */
.nav-mockup.nav-hidden {
  transform: translate(-50%, -250%);
}

.nav-logo {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--burgundy);
  letter-spacing: 0.22em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s;
}

.nav-mockup.over-hero .nav-logo {
  color: var(--gold);
}

.nav-links {
  display: flex;
  gap: 1.5rem;
}

.nav-links a {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.3s;
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-links a:hover {
  color: var(--burgundy);
}

.nav-links a:hover::after {
  transform: scaleX(1);
}

.nav-mockup.over-hero .nav-links a {
  color: rgba(232, 220, 200, 0.7);
}

.nav-mockup.over-hero .nav-links a:hover {
  color: var(--gold-light);
}

.nav-lang {
  display: flex;
  gap: 0.3rem;
  border-left: 1px solid rgba(107, 29, 42, 0.25);
  padding-left: 1rem;
}

.nav-mockup.over-hero .nav-lang {
  border-left-color: rgba(197, 165, 90, 0.25);
}

.lang-btn {
  padding: 0.25rem 0.55rem;
  border-radius: 4px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-muted);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  transition: all 0.3s;
}

.lang-btn.active {
  background: rgba(197, 165, 90, 0.2);
  color: var(--burgundy);
}

.lang-btn:hover {
  color: var(--burgundy);
}

.nav-mockup.over-hero .lang-btn {
  color: rgba(232, 220, 200, 0.5);
}

.nav-mockup.over-hero .lang-btn.active {
  background: rgba(197, 165, 90, 0.22);
  color: var(--gold);
}

.nav-mockup.over-hero .lang-btn:hover {
  color: var(--gold);
}

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--burgundy);
  transition: all 0.3s;
}

.nav-mockup.over-hero .nav-hamburger span {
  background: var(--gold);
}

.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  height: 100vh;
  background: var(--cream);
  background-image: var(--parchment-texture);
  background-size: 400px 400px;
  border-left: 1px solid rgba(197, 165, 90, 0.4);
  box-shadow: -10px 0 40px rgba(43, 22, 13, 0.15);
  z-index: 200;
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  padding: 5rem 2rem 2rem;
  gap: 1.5rem;
}

.nav-drawer.open {
  transform: translateX(0);
}

.nav-drawer a {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--burgundy-deep);
  text-decoration: none;
  letter-spacing: 0.12em;
  transition: color 0.3s;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(197, 165, 90, 0.25);
}

.nav-drawer a:hover {
  color: var(--gold-deep);
}

.nav-drawer-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: none;
  border: none;
  color: var(--burgundy);
  font-size: 1.8rem;
  cursor: pointer;
  line-height: 1;
}

.nav-drawer-lang {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(197, 165, 90, 0.25);
}

@media (max-width: 768px) {
  .nav-links,
  .nav-lang {
    display: none;
  }
  .nav-hamburger {
    display: flex;
  }
  .nav-mockup {
    padding: 0.7rem 1.4rem;
  }
}

/* ============================================
   Trust Bar — cream-toned, transitions hero into light
   ============================================ */
.trust-bar {
  /* trust-bar: dark continues the hero, then eases into the gold
     the Pillars section opens on (#f0e6cf) — no hard hero seam. */
  background: linear-gradient(180deg, var(--dark-warm) 0%, var(--dark-warm) 20%, #f0e6cf 78%, #f0e6cf 100%);
  position: relative;
  padding: 0;
}

.trust-bar-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.6rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  background: var(--cream-deep);
  background-image: var(--parchment-texture);
  background-size: 400px 400px;
  position: relative;
  border-top: 1px solid rgba(197, 165, 90, 0.4);
  border-bottom: 1px solid rgba(197, 165, 90, 0.4);
}

.trust-bar-inner::before,
.trust-bar-inner::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--rule-gold);
}

.trust-bar-inner::before { top: -1px; }
.trust-bar-inner::after { bottom: -1px; }

.trust-item {
  font-family: 'Cinzel', serif;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--burgundy);
}

.trust-divider {
  color: var(--gold);
  font-size: 0.7rem;
  opacity: 0.6;
}

@media (max-width: 768px) {
  .trust-bar-inner {
    flex-direction: column;
    gap: 0.8rem;
    padding: 1.4rem;
  }
  .trust-divider { display: none; }
  .trust-item { font-size: 0.6rem; text-align: center; }
}

/* ============================================
   Section: Four Pillars — illuminated cream
   ============================================ */
.section-pillars {
  padding: 7rem 2rem 5rem;
  position: relative;
  background: transparent;
  color: var(--text-primary);
}

.pillars-header {
  text-align: center;
  margin-bottom: 5rem;
  position: relative;
  z-index: 2;
}

.section-number {
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.5em;
  color: var(--gold-deep);
  text-transform: uppercase;
  margin-bottom: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.section-number::before,
.section-number::after {
  content: '';
  height: 1px;
  width: 50px;
  background: linear-gradient(90deg, transparent, var(--gold-deep));
}

.section-number::after {
  background: linear-gradient(90deg, var(--gold-deep), transparent);
}

/* Per-section accent rotation — section labels carry the painting's
   gorge-green and hazy-blue so the page isn't gold from top to bottom. */
.section-author .section-number,
.section-lives .section-number {
  color: var(--sage-deep);
}
.section-author .section-number::before,
.section-lives .section-number::before {
  background: linear-gradient(90deg, transparent, var(--sage-deep));
}
.section-author .section-number::after,
.section-lives .section-number::after {
  background: linear-gradient(90deg, var(--sage-deep), transparent);
}

.section-endorsements .section-number,
.section-ministry .section-number {
  color: var(--sky-deep);
}
.section-endorsements .section-number::before,
.section-ministry .section-number::before {
  background: linear-gradient(90deg, transparent, var(--sky-deep));
}
.section-endorsements .section-number::after,
.section-ministry .section-number::after {
  background: linear-gradient(90deg, var(--sky-deep), transparent);
}

.pillars-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  font-weight: 500;
  color: var(--burgundy-deep);
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
  line-height: 1.15;
}

.pillars-subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  font-style: italic;
  color: var(--text-secondary);
  max-width: 560px;
  margin: 0 auto;
}

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.pillar-card {
  padding: 3.2rem 2rem;
  text-align: center;
  position: relative;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: default;
}

.pillar-card:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 18%;
  height: 64%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(197, 165, 90, 0.45) 50%, transparent);
}

.pillar-card:hover {
  background: rgba(197, 165, 90, 0.07);
  transform: translateY(-8px);
}

.pillar-card:hover .pillar-number {
  color: var(--gold);
  text-shadow: 0 0 24px rgba(197, 165, 90, 0.4);
}

.pillar-number {
  font-family: 'Cinzel', serif;
  font-size: 4rem;
  font-weight: 300;
  color: rgba(154, 126, 61, 0.28);
  line-height: 1;
  margin-bottom: 1.4rem;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: 0.05em;
}

/* Pillar numerals pick up the scene palette across the four cards. */
.pillar-card:nth-child(2) .pillar-number { color: rgba(122, 133, 89, 0.40); }
.pillar-card:nth-child(3) .pillar-number { color: rgba(138, 157, 163, 0.42); }
.pillar-card:nth-child(2):hover .pillar-number { color: var(--sage); }
.pillar-card:nth-child(3):hover .pillar-number { color: var(--sky); }

.pillar-name {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--burgundy);
  margin-bottom: 1.2rem;
  text-transform: uppercase;
  line-height: 1.3;
}

.pillar-desc {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  font-style: italic;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Dedication — illuminated quote */
.dedication {
  max-width: 820px;
  margin: 5rem auto 0;
  text-align: center;
  padding: 3.5rem 3rem;
  position: relative;
  z-index: 2;
  background: rgba(247, 240, 227, 0.6);
  border: 1px solid rgba(197, 165, 90, 0.3);
}

.dedication::before {
  content: '"';
  font-family: 'Cinzel', serif;
  font-size: 9rem;
  color: rgba(197, 165, 90, 0.22);
  position: absolute;
  top: -2rem;
  left: 50%;
  transform: translateX(-50%);
  line-height: 1;
}

.dedication::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  background: var(--rule-gold);
}

.dedication-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.15rem, 2.5vw, 1.55rem);
  font-style: italic;
  color: var(--burgundy);
  line-height: 1.85;
  position: relative;
  max-width: 65ch;
  margin: 0 auto;
}

.dedication-attr {
  margin-top: 1.5rem;
  font-family: 'Cinzel', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

@media (max-width: 1024px) {
  .pillars-grid { grid-template-columns: repeat(2, 1fr); }
  .pillar-card:nth-child(2)::after { display: none; }
}

@media (max-width: 768px) {
  .pillars-grid { grid-template-columns: 1fr; }
  .pillar-card::after { display: none; }
  .section-pillars { padding: 4rem 1.5rem 3rem; }
  .dedication { padding: 2.5rem 1.8rem; }
}

/* ============================================
   Section: Author — dark editorial spread
   "A Great Traveler for God"  ·  rebuilt 2026-05-19
   ============================================ */
.section-author {
  position: relative;
  padding: 9rem 2rem 9.5rem;
  /* parchment seam in (from Pillars #ecdfc3) -> hold dark ->
     parchment seam out (to Endorsements #dae0d5) */
  background: linear-gradient(180deg,
    #ecdfc3 0%,
    var(--dark-mahogany) 13%,
    var(--dark) 47%,
    var(--dark-warm) 86%,
    #dae0d5 100%);
  color: var(--text-on-dark);
  overflow: hidden;
  isolation: isolate;
}

/* Warm radial light + grain — depth, an echo of the hero */
.author-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 48% at 30% 40%, rgba(107, 29, 42, 0.55) 0%, transparent 70%),
    radial-gradient(ellipse 50% 55% at 72% 62%, rgba(197, 165, 90, 0.16) 0%, transparent 66%);
}

.author-atmosphere::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--noise-fine);
  background-size: 256px 256px;
  opacity: 0.05;
}

/* Monumental ghost numeral */
.author-numeral {
  position: absolute;
  top: 6%;
  left: -0.07em;
  z-index: 0;
  font-family: 'Cinzel', serif;
  font-size: clamp(11rem, 28vw, 24rem);
  line-height: 0.8;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgba(197, 165, 90, 0.07);
  pointer-events: none;
  user-select: none;
}

.author-spread {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.04fr 1fr;
  gap: 5.5rem;
  align-items: center;
}

/* ---- Portrait + praying-hands backdrop ---- */
.author-gallery {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.author-portrait {
  margin: 0;
  position: relative;
  overflow: hidden;
  background: var(--dark-warm);
  box-shadow:
    0 0 0 1px rgba(197, 165, 90, 0.55),
    0 30px 64px rgba(0, 0, 0, 0.62);
}

.author-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  /* warm the cold studio backdrop into the liturgical palette */
  filter: sepia(0.42) saturate(1.35) contrast(1.06) brightness(1.04) hue-rotate(-8deg);
}

/* Vignette — melts the photo's cold edges into the section dark */
.author-portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 78% 78% at 50% 40%, transparent 46%, rgba(10, 6, 4, 0.82) 100%),
    linear-gradient(180deg, transparent 56%, rgba(10, 6, 4, 0.5) 100%);
}

.author-portrait--main {
  aspect-ratio: 4 / 5;
  width: min(420px, 78%);
  z-index: 1;
}

/* ---- Feature text ---- */
.author-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.7rem;
}

.author-eyebrow::before {
  content: '';
  width: 44px;
  height: 1px;
  background: var(--gold);
  opacity: 0.7;
}

.author-name {
  font-family: 'Cinzel', serif;
  font-size: clamp(2.9rem, 5.6vw, 4.7rem);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: 0.02em;
  color: var(--cream);
  margin-bottom: 1rem;
  text-shadow: 0 0 64px rgba(197, 165, 90, 0.3);
}

.author-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.5rem, 2.7vw, 2.2rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
  color: var(--gold-bright);
  margin-bottom: 2.5rem;
}

.author-bio {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.18rem;
  line-height: 1.85;
  color: rgba(243, 234, 218, 0.82);
  max-width: 34rem;
}

.author-bio p + p {
  margin-top: 1.15rem;
}

/* Editorial drop-cap on the opening paragraph */
.author-bio p:first-of-type::first-letter {
  float: left;
  font-family: 'Cinzel', serif;
  font-size: 3.7rem;
  line-height: 0.78;
  font-weight: 600;
  color: var(--gold);
  margin: 0.34rem 0.62rem 0 0;
}

.author-declaration {
  position: relative;
  margin: 2.9rem 0 0;
  padding: 1.55rem 1.9rem;
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  line-height: 1.75;
  color: var(--gold-light);
  border: 1px solid rgba(197, 165, 90, 0.42);
  background: rgba(197, 165, 90, 0.05);
}

.author-declaration::before {
  content: '✦';
  position: absolute;
  top: -0.6rem;
  left: 1.5rem;
  padding: 0 0.55rem;
  background: var(--dark);
  color: var(--gold);
  font-size: 0.72rem;
}

@media (max-width: 1024px) {
  .author-spread {
    grid-template-columns: 1fr;
    gap: 3.8rem;
    max-width: 640px;
  }
  .author-numeral { font-size: clamp(8rem, 26vw, 13rem); top: 3%; }
}

@media (max-width: 560px) {
  .section-author { padding: 6rem 1.4rem 6.5rem; }
}

/* ============================================
   Section: Endorsements — manuscript pages
   ============================================ */
.section-endorsements {
  padding: 7rem 2rem;
  background: transparent;
  color: var(--text-primary);
  position: relative;
}

.endorsements-header {
  text-align: center;
  margin-bottom: 4.5rem;
}

.endorsements-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 500;
  color: var(--burgundy-deep);
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
}

/* Vatican Letter — featured dark gravitas card */
.vatican-card {
  max-width: 920px;
  margin: 0 auto 4rem;
  background: linear-gradient(135deg, var(--dark-warm), var(--dark-mahogany));
  position: relative;
  overflow: hidden;
  box-shadow:
    0 20px 60px rgba(43, 22, 13, 0.3),
    0 4px 16px rgba(43, 22, 13, 0.15);
  isolation: isolate;
}

.vatican-card::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(197, 165, 90, 0.45);
  pointer-events: none;
  z-index: 1;
}

.vatican-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--gold-bright), var(--gold), transparent);
}

.vatican-inner {
  padding: 3.5rem;
  color: var(--text-on-dark);
  position: relative;
  z-index: 2;
}

.vatican-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1.1rem;
  background: rgba(197, 165, 90, 0.12);
  border: 1px solid rgba(197, 165, 90, 0.4);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 1.6rem;
}

.vatican-from {
  font-family: 'Cinzel', serif;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--gold-bright);
  margin-bottom: 0.3rem;
  letter-spacing: 0.04em;
}

.vatican-role {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  color: rgba(232, 213, 163, 0.5);
  text-transform: uppercase;
  margin-bottom: 2rem;
}

.vatican-quote {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.35rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.75;
  color: rgba(243, 234, 218, 0.95);
  border-left: 3px solid var(--gold);
  padding-left: 2rem;
  margin-bottom: 1.5rem;
}

.vatican-date {
  font-family: 'Cinzel', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(197, 165, 90, 0.65);
  letter-spacing: 0.18em;
  text-align: right;
}

/* Endorsement cards — vellum on parchment */
.endorsements-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.8rem;
}

.endorsement-card {
  padding: 2.6rem;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(197, 165, 90, 0.3);
  position: relative;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(2px);
}

.endorsement-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--rule-gold);
  opacity: 0.5;
}

.endorsement-card:hover {
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.85);
  transform: translateY(-5px);
  box-shadow:
    0 24px 48px rgba(43, 22, 13, 0.1),
    0 0 0 1px rgba(197, 165, 90, 0.2);
}

.endorsement-card::before {
  content: '"';
  font-family: 'Cinzel', serif;
  font-size: 4.2rem;
  color: rgba(197, 165, 90, 0.18);
  position: absolute;
  top: 0.8rem;
  left: 1.6rem;
  line-height: 1;
}

.endorsement-quote {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-style: italic;
  color: var(--text-primary);
  line-height: 1.75;
  margin-bottom: 1.5rem;
  position: relative;
  padding-top: 0.5rem;
}

.endorsement-quote-large {
  font-family: 'Cinzel', serif;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  color: var(--burgundy);
  text-align: center;
  letter-spacing: 0.04em;
  padding-top: 1.5rem;
  padding-bottom: 0.5rem;
}

.endorsement-name {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--burgundy);
}

.endorsement-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.66rem;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.12em;
  margin-top: 0.3rem;
  text-transform: uppercase;
}

.endorsement-featured {
  grid-column: 1 / -1;
  padding: 3.2rem;
  background: linear-gradient(135deg, rgba(247, 240, 227, 0.9), rgba(243, 234, 218, 0.7));
  border: 1px solid rgba(197, 165, 90, 0.45);
}

.endorsement-featured .endorsement-quote {
  font-size: 1.2rem;
  max-width: 800px;
  line-height: 1.85;
}

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

@media (max-width: 768px) {
  .section-endorsements { padding: 4rem 1.5rem; }
  .vatican-inner { padding: 2.2rem; }
  .vatican-quote { font-size: 1.15rem; padding-left: 1.5rem; }
}

/* ============================================
   Section: Lives Changed — soft warm cream
   ============================================ */
.section-lives {
  padding: 7rem 2rem;
  background: linear-gradient(180deg, var(--cream-warm), var(--cream));
  position: relative;
  overflow: hidden;
  color: var(--text-primary);
}

.section-lives::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at 20% 25%, rgba(107, 29, 42, 0.16) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 75%, rgba(197, 165, 90, 0.18) 0%, transparent 55%);
  pointer-events: none;
}

.lives-header {
  text-align: center;
  margin-bottom: 5rem;
  position: relative;
  z-index: 1;
}

.lives-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 500;
  color: var(--burgundy-deep);
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
}

.lives-subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  font-style: italic;
  color: var(--text-secondary);
  max-width: 560px;
  margin: 0 auto;
}

.lives-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  position: relative;
  z-index: 1;
}

.life-card {
  padding: 2.8rem 2.3rem;
  background: rgba(250, 245, 235, 0.82);
  border: 1px solid rgba(197, 165, 90, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 10px 32px rgba(26, 13, 8, 0.16);
  position: relative;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.life-card:hover {
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.85);
  transform: translateY(-7px);
  box-shadow:
    0 22px 50px rgba(43, 22, 13, 0.1),
    0 0 0 1px rgba(197, 165, 90, 0.25);
}

.life-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 1.5rem;
  right: 1.5rem;
  height: 1px;
  background: var(--rule-gold);
  opacity: 0.55;
}

.life-icon {
  font-size: 1.7rem;
  margin-bottom: 1.5rem;
  color: var(--gold-deep);
  letter-spacing: 0.1em;
  line-height: 1;
}

.life-story {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-style: italic;
  color: var(--text-primary);
  line-height: 1.85;
}

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

@media (max-width: 768px) {
  .lives-grid { grid-template-columns: 1fr; }
  .section-lives { padding: 4rem 1.5rem; }
}

/* ============================================
   Section: Excerpt — illuminated manuscript page
   ============================================ */
.section-excerpt {
  padding: 7rem 2rem;
  background: transparent;
  color: var(--text-primary);
  position: relative;
}

.excerpt-container {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(197, 165, 90, 0.3);
  padding: 4rem 3rem;
}

.excerpt-container::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
}

.excerpt-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  line-height: 2;
  color: var(--burgundy);
  position: relative;
  padding: 2rem 0;
  font-style: italic;
}

.excerpt-text::before,
.excerpt-text::after {
  content: '';
  display: block;
  width: 80px;
  height: 1px;
  background: var(--gold);
  margin: 0 auto 2.2rem;
  opacity: 0.7;
}

.excerpt-text::after {
  margin: 2.2rem auto 0;
}

.excerpt-highlight {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 1.65rem;
  font-style: normal;
  font-weight: 600;
  color: var(--burgundy-deep);
  margin: 1.2rem 0;
  letter-spacing: 0.03em;
  line-height: 1.4;
  text-shadow: 0 0 30px rgba(107, 29, 42, 0.1);
}

.btn-read-more {
  margin-top: 2rem;
}

.excerpts-expanded {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.excerpts-expanded.open {
  max-height: 2400px;
}

.excerpt-additional {
  text-align: left;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(197, 165, 90, 0.3);
}

.excerpt-additional h3 {
  font-family: 'Cinzel', serif;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--burgundy);
  margin-bottom: 1rem;
  letter-spacing: 0.06em;
}

.excerpt-additional p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  color: var(--text-primary);
  line-height: 1.85;
  margin-bottom: 1rem;
  font-style: normal;
}

.psalm-text {
  font-style: italic;
  text-align: center;
  color: var(--burgundy) !important;
}

/* ============================================
   Section: Ministry — warm cream with retreat warmth
   ============================================ */
.section-ministry {
  padding: 7rem 2rem;
  background: var(--cream-warm);
  background-image: var(--parchment-texture);
  background-size: 400px 400px;
  position: relative;
  overflow: hidden;
  color: var(--text-primary);
}

.section-ministry::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 0% 50%, rgba(197, 165, 90, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 50%, rgba(107, 29, 42, 0.06) 0%, transparent 50%);
  pointer-events: none;
}

.ministry-header {
  text-align: center;
  margin-bottom: 4rem;
  position: relative;
  z-index: 1;
}

.ministry-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 500;
  color: var(--burgundy-deep);
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
}

.ministry-layout {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid rgba(197, 165, 90, 0.4);
  background: rgba(255, 255, 255, 0.55);
  position: relative;
  z-index: 1;
  box-shadow: 0 16px 48px rgba(43, 22, 13, 0.1);
}

.ministry-card {
  padding: 4rem 3rem;
  position: relative;
}

.ministry-card:first-child {
  border-right: 1px solid rgba(197, 165, 90, 0.4);
}

.ministry-card-title {
  font-family: 'Cinzel', serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--burgundy);
  letter-spacing: 0.1em;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.ministry-card-title::before {
  content: '✦';
  color: var(--gold);
  font-size: 0.8rem;
}

.ministry-card-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  color: var(--text-primary);
  line-height: 1.85;
}

.ministry-cta {
  text-align: center;
  margin-top: 3rem;
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .ministry-layout { grid-template-columns: 1fr; }
  .ministry-card:first-child { border-right: none; border-bottom: 1px solid rgba(197, 165, 90, 0.4); }
  .ministry-card { padding: 2.5rem 2rem; }
  .section-ministry { padding: 4rem 1.5rem; }
  .section-excerpt { padding: 4rem 1.5rem; }
  .excerpt-container { padding: 2.8rem 1.6rem; }
  .excerpt-text { font-size: 1.2rem; }
  .excerpt-highlight { font-size: 1.35rem; }
}

/* ============================================
   Section: Buy — refined cards with gilt edges
   ============================================ */
.section-buy {
  padding: 7rem 2rem;
  /* Jewel-tone culmination: carry the ministry nave's dark down into the
     seam at top, then open into a warm sanctuary glow — burgundy upper-left,
     gold lower-right — over a deepened parchment. Keeps the dark featured
     e-book card popping while lifting the whole storefront out of flat pale. */
  background:
    radial-gradient(ellipse at 16% 30%, rgba(107, 29, 42, 0.14), transparent 52%),
    radial-gradient(ellipse at 84% 76%, rgba(197, 165, 90, 0.30), transparent 56%),
    linear-gradient(180deg, rgba(43, 22, 13, 0.32) 0%, var(--cream-deep) 13%, var(--cream-warm) 100%);
  color: var(--text-primary);
  position: relative;
}

.buy-header {
  text-align: center;
  margin-bottom: 4rem;
}

.buy-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 500;
  color: var(--burgundy-deep);
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
}

.buy-availability {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-style: italic;
  color: var(--text-secondary);
  max-width: 560px;
  margin: 0 auto;
}

.buy-grid {
  /* eBook + Audiobook 2026-05-18 — print editions (softcover/hardcover) stay
     commented out in index.html; restore to repeat(3, 1fr) / 920px to re-enable. */
  max-width: 680px;
  margin: 0 auto 4rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}

/* Audiobook "coming soon" card: "Coming Soon" sits in the price slot but is
   not a price, so it needs a smaller size; the CTA reads quieter than the
   e-book's solid-gold buy button. */
.buy-price-soon {
  font-size: 1.5rem;
}

.buy-btn-soon {
  opacity: 0.8;
}

.buy-card {
  padding: 3.2rem 2rem;
  text-align: center;
  border: 1px solid rgba(197, 165, 90, 0.4);
  background: rgba(250, 245, 235, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.buy-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 24px 56px rgba(43, 22, 13, 0.12),
    0 0 0 1px var(--gold);
  z-index: 1;
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.85);
}

.buy-card.featured {
  background: linear-gradient(135deg, var(--dark-warm), var(--dark-mahogany));
  color: var(--text-on-dark);
  border-color: var(--gold);
  transform: scaleY(1.04);
  z-index: 1;
  box-shadow:
    0 18px 48px rgba(43, 22, 13, 0.25),
    0 0 0 1px rgba(197, 165, 90, 0.4);
}

.buy-card.featured::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
}

.buy-card.featured:hover {
  transform: scaleY(1.04) translateY(-8px);
  background: linear-gradient(135deg, var(--dark-mahogany), var(--dark-warm));
}

.buy-format {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 1.5rem;
}

.buy-card.featured .buy-format {
  color: var(--gold-bright);
}

.buy-price {
  font-family: 'Cinzel', serif;
  font-size: 2.8rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
  color: var(--burgundy-deep);
  letter-spacing: 0.02em;
}

.buy-card.featured .buy-price {
  color: var(--gold-light);
}

.buy-detail {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  font-style: italic;
  color: var(--text-secondary);
  margin-bottom: 2rem;
}

.buy-card.featured .buy-detail {
  color: rgba(232, 213, 163, 0.55);
}

.buy-btn {
  display: inline-block;
  padding: 0.85rem 2.2rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  border: 1px solid var(--gold-deep);
  color: var(--burgundy);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background: none;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.buy-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

.buy-btn:hover {
  border-color: var(--gold);
  color: var(--burgundy-deep);
  transform: translateY(-2px);
}

.buy-btn:hover::before {
  transform: scaleX(1);
}

.buy-card.featured .buy-btn {
  background: linear-gradient(135deg, var(--gold), var(--gold-bright));
  color: var(--burgundy-deep);
  border: none;
  font-weight: 700;
}

.buy-card.featured .buy-btn::before {
  display: none;
}

.buy-card.featured .buy-btn:hover {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-light));
  box-shadow: 0 8px 24px rgba(240, 199, 94, 0.3);
}

/* Vatican reminder — quoted in buy section */
.vatican-reminder {
  max-width: 720px;
  margin: 0 auto 3rem;
  text-align: center;
  padding: 2.2rem;
  position: relative;
}

.vatican-reminder::before,
.vatican-reminder::after {
  content: '✦';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  font-size: 0.8rem;
  opacity: 0.7;
}

.vatican-reminder::before { left: 0; }
.vatican-reminder::after { right: 0; }

.vatican-reminder p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  font-style: italic;
  color: var(--burgundy);
  line-height: 1.65;
  margin-bottom: 0.6rem;
}

.vatican-reminder span {
  font-family: 'Cinzel', sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* Donate section */
.donate-section {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: 4rem 3rem;
  border: 1px solid rgba(197, 165, 90, 0.4);
  background: linear-gradient(135deg, rgba(247, 240, 227, 0.8), rgba(243, 234, 218, 0.6));
  position: relative;
  box-shadow: 0 12px 40px rgba(43, 22, 13, 0.08);
}

.donate-section::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 20%;
  right: 20%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
}

.donate-title {
  font-family: 'Cinzel', serif;
  font-size: 1.7rem;
  font-weight: 500;
  color: var(--burgundy-deep);
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
}

.donate-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-style: italic;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 2rem;
}

.donate-amount-row {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  font-family: 'Cinzel', serif;
  font-size: 1.6rem;
  color: var(--burgundy-deep);
}

.donate-input {
  width: 110px;
  padding: 0.6rem 0.8rem;
  font-family: 'Cinzel', serif;
  font-size: 1.5rem;
  text-align: center;
  border: 1px solid var(--gold-deep);
  background: rgba(255, 255, 255, 0.85);
  color: var(--burgundy-deep);
  border-radius: 4px;
  transition: border-color 0.3s, background 0.3s;
}

.donate-input:focus {
  outline: none;
  border-color: var(--gold);
  background: white;
}

@media (max-width: 1024px) {
  .buy-title { font-size: 2rem; }
  .ministry-title { font-size: 2rem; }
}

@media (max-width: 768px) {
  .buy-grid { grid-template-columns: 1fr; max-width: 400px; }
  .buy-card.featured { transform: none; order: -1; }
  .buy-card.featured:hover { transform: translateY(-6px); }
  .section-buy { padding: 4rem 1.5rem; }
  .donate-section { padding: 3rem 2rem; }
}

/* ============================================
   Footer — closing punctuation, dark mahogany
   ============================================ */
.footer {
  padding: 5rem 2rem 4rem;
  /* footer opens on the gold the Buy section closes on (#e8dab0),
     then descends through warm cliff-brown into the dark — dusk
     falling, no hard gold-on-black seam. The fade completes inside
     the top padding, so footer content still sits on the dark. */
  background: linear-gradient(180deg, #e8dab0 0%, #6b3f24 5%, var(--dark-warm) 13%, var(--dark) 100%);
  text-align: center;
  border-top: 1px solid rgba(197, 165, 90, 0.25);
  position: relative;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 30%;
  right: 30%;
  height: 1px;
  background: var(--rule-gold);
}

.footer-logo {
  font-family: 'Cinzel', serif;
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.24em;
  margin-bottom: 1.8rem;
}

.footer-info {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  color: rgba(232, 213, 163, 0.5);
  letter-spacing: 0.12em;
  line-height: 2.2;
}

.footer-info a {
  color: rgba(232, 213, 163, 0.65);
  text-decoration: none;
  transition: color 0.3s;
}

.footer-info a:hover {
  color: var(--gold);
}

.footer-langs {
  margin-top: 1.5rem;
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.footer-langs span {
  color: rgba(232, 213, 163, 0.25);
}

.footer-langs .lang-btn {
  color: rgba(232, 213, 163, 0.45);
  font-size: 0.7rem;
}

.footer-langs .lang-btn:hover {
  color: var(--gold);
}

.footer-langs .lang-btn.active {
  color: var(--gold);
  background: none;
}

.footer-cross {
  margin-top: 2.5rem;
  font-size: 1.7rem;
  color: rgba(197, 165, 90, 0.35);
}

/* ============================================================
   PALETTE — Hero-painting color extension  (locked in 2026-05-18)
   ============================================================
   The page is one continuous color river drawn from the hero
   painting (gorge greens, hazy sky-blue, warm gold valley light).
   Each section's gradient STARTS on the exact color the section
   above ENDED on — the shared "seam" colors below are the blend
   of the two adjacent sections, so there are no hard horizontal
   edges. Each section still holds its own identity color through
   its middle. These rules intentionally come last so they win
   the cascade over the section backgrounds defined earlier.

   Seam colors: B #ecdfc3 · C #dae0d5 · D #d6dfd3 · E #e0dfc6
                F #e0dfcf · G #ced9da
   ------------------------------------------------------------ */

/* I — The Book: warm gold valley-floor light  (gold -> seam B). */
.section-pillars {
  background: linear-gradient(180deg, #f0e6cf 0%, #ecdfc3 100%);
}

/* II — The Author: now a dark editorial spread — its background is
   defined in the "Section: Author" block above (rebuilt 2026-05-19).
   The dark gradient still carries the seam colors at its top/bottom
   edges (#ecdfc3 in, #dae0d5 out), so the color river is unbroken. */

/* III — Voices of Affirmation: holds sky-blue, eases to the
   green boundary  (seam C -> sky -> seam D). */
.section-endorsements {
  background: linear-gradient(180deg, #dae0d5 0%, #d8e1e2 35%, #d8e1e2 70%, #d6dfd3 100%);
}
.endorsement-card {
  border-color: rgba(138, 157, 163, 0.5);   /* sky */
}

/* IV — Lives Changed: arrives at the blue/green seam, settles
   into green, eases to parchment  (seam D -> sage -> seam E). */
.section-lives {
  background: linear-gradient(180deg, #d6dfd3 0%, #d4ddc4 38%, #d4ddc4 70%, #e0dfc6 100%);
}
.life-card {
  border-color: rgba(122, 133, 89, 0.5);    /* sage */
}

/* V — An Excerpt: warm parchment, a breath between greens
   (seam E -> parchment -> seam F). */
.section-excerpt {
  background: linear-gradient(180deg, #e0dfc6 0%, #ede2c8 45%, #e0dfcf 100%);
}

/* VI — The Ministry: sage rising into sky  (seam F -> sage -> seam G). */
.section-ministry {
  background: linear-gradient(180deg, #e0dfcf 0%, #d3ddd6 38%, #cdd9da 100%);
}

/* VII — Get the Book: sky settling back to a warm gold CTA
   (seam G -> sky -> gold). */
.section-buy {
  background: linear-gradient(180deg, #ced9da 0%, #d0dadb 22%, #e8dab0 100%);
}

/* Trust-bar band: sage-sky stone (background-color only, so the
   parchment texture set earlier is kept). */
.trust-bar-inner {
  background-color: #d6ddd6;
  border-top-color: rgba(95, 113, 118, 0.4);
  border-bottom-color: rgba(95, 113, 118, 0.4);
}

/* ============================================
   Reduced motion — must remain at end
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================
   Cathedral imagery — Z-Image Turbo assets (2026-05-19)
   Each asset is a decorative layer painted OVER the color
   river, so the seam gradients above stay unbroken.
   ============================================ */

/* I — The Book: Agnus Dei medallion crowning "Four Dimensions of Mercy" */
.pillars-medallion {
  display: block;
  width: 160px;
  height: 160px;
  margin: 0 auto 2.2rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 40%;
  border: 2px solid var(--gold);
  box-shadow:
    0 0 0 7px rgba(197, 165, 90, 0.12),
    0 14px 36px rgba(43, 20, 16, 0.28);
}

/* III — Endorsements: the rose window expansive behind the whole
   section — frosted endorsement cards keep the text readable */
.section-endorsements::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('../assets/cathedral-rose.jpg') center 28% / cover no-repeat;
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 88%, transparent 100%);
  pointer-events: none;
}
.endorsements-header,
.vatican-card,
.endorsements-grid {
  position: relative;
  z-index: 1;
}

/* V — An Excerpt: descending dove watermark behind the divine voice */
.section-excerpt::before {
  content: '';
  position: absolute;
  top: 3%;
  left: 50%;
  transform: translateX(-50%);
  width: min(540px, 86vw);
  height: 540px;
  background: url('../assets/cathedral-dove.jpg') center top / contain no-repeat;
  opacity: 0.62;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse at 50% 40%, #000 0%, transparent 72%);
  pointer-events: none;
  z-index: 0;
}
.excerpt-container {
  z-index: 1;
}

/* IV — Lives Changed: a sea of votive candles behind the testimonies —
   each flame a soul touched by mercy. Painted full-bleed over the cream,
   masked top + bottom so the color river stays unbroken, and warm enough
   to lift this once-palest section into the cathedral's jewel-tone. */
.section-lives::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('../assets/cathedral-candles.jpg') center 52% / cover no-repeat;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
  pointer-events: none;
}

/* VI — The Ministry: the cathedral nave rising behind the mission */
.section-ministry::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('../assets/cathedral-nave.jpg') center 26% / cover no-repeat;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 32%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 32%, #000 100%);
  pointer-events: none;
}

/* II — The Author: the praying hands from Joseph's tie — a faint
   watermark behind the words, offset right, kept readable */
.author-feature {
  position: relative;
}
.author-feature > *:not(.author-prayer) {
  position: relative;
  z-index: 1;
}
.author-prayer {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: -16%;
  transform: translateY(-50%);
  width: min(460px, 86%);
  aspect-ratio: 1024 / 1280;
  background: url('../assets/praying-hands.jpg') center / contain no-repeat;
  -webkit-mask-image: radial-gradient(ellipse 66% 62% at 50% 50%, #000 28%, transparent 82%);
  mask-image: radial-gradient(ellipse 66% 62% at 50% 50%, #000 28%, transparent 82%);
  opacity: 0.29;
  pointer-events: none;
}