/* Koinonia Ministry International — v1.0 design system */

:root {
  --cream: #f5f8fb;
  --parchment: #e8eff6;
  --warm-white: #ffffff;
  --terracotta: #2c5282;
  --terracotta-deep: #1a365d;
  --sage: #3b6fa0;
  --sage-light: #6f9cc7;
  --amber: #4a90c2;
  --amber-soft: #cfe3f2;
  --deep-brown: #16233a;
  --warm-gray: #5b6b7c;
  --line: rgba(22, 35, 58, 0.12);
  --shadow: 0 24px 64px rgba(22, 35, 58, 0.08);
  --radius: 1rem;
  --font-display: "Fraunces", "Georgia", serif;
  --font-body: "Literata", "Georgia", serif;
  --max-width: 72rem;
  --nav-height: 4.5rem;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--deep-brown);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
}

input,
textarea,
[contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--terracotta);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--terracotta-deep);
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: 0.75rem 1rem;
  background: var(--deep-brown);
  color: var(--cream);
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/* ——— Navigation ——— */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--nav-height);
  background: rgba(255, 252, 248, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(44, 33, 24, 0.08);
  transition: box-shadow 0.3s ease, background 0.3s ease;
}

.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 5%,
    rgba(196, 146, 58, 0.45) 35%,
    rgba(92, 115, 85, 0.35) 50%,
    rgba(196, 146, 58, 0.45) 65%,
    transparent 95%
  );
  pointer-events: none;
}

.site-header.is-scrolled {
  box-shadow: 0 6px 28px rgba(44, 33, 24, 0.07);
  background: rgba(255, 252, 248, 0.97);
}

.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2.5rem);
  height: 100%;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2.5rem);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
  text-decoration: none;
  color: var(--deep-brown);
  line-height: 1.2;
}

.brand-logo {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: 0.625rem;
  box-shadow: 0 1px 2px rgba(44, 33, 24, 0.06);
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.brand-mark {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.brand-sub {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--sage-light);
}

.nav-center {
  flex: 1;
  min-width: 0;
  display: none;
  justify-content: center;
}

.nav-links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: clamp(1.25rem, 2.2vw, 2.25rem);
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
}

.nav-links a {
  text-decoration: none;
  color: var(--deep-brown);
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
  padding: 0.35rem 0;
  transition: color 0.2s ease;
}

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

.nav-actions {
  display: none;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
  margin-left: auto;
}

.nav-mobile-tools {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
  margin-left: auto;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.35rem;
  background: var(--terracotta);
  color: var(--warm-white) !important;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease;
}

.nav-cta:hover {
  background: var(--terracotta-deep);
  transform: translateY(-1px);
}

/* Language pills */
.lang-pills {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  padding: 0.1875rem;
  background: var(--parchment);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.lang-pill {
  min-width: 2.625rem;
  min-height: 2.25rem;
  padding: 0 0.625rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warm-gray);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.lang-pill:hover {
  color: var(--deep-brown);
}

.lang-pill.is-active {
  background: var(--warm-white);
  color: var(--deep-brown);
  box-shadow: 0 1px 3px rgba(44, 33, 24, 0.1);
}

.lang-pill:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 2px;
}

/* Legacy select — kept for fallback */
.lang-switcher {
  position: relative;
}

.lang-select {
  min-height: 2.75rem;
  min-width: 7.5rem;
  padding: 0.45rem 2rem 0.45rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--warm-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235c7355' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 0.85rem center;
  appearance: none;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--deep-brown);
  cursor: pointer;
}

.lang-select:focus {
  outline: 2px solid var(--sage);
  outline-offset: 2px;
}

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

.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--warm-white);
  cursor: pointer;
  flex-shrink: 0;
}

.menu-toggle span {
  display: block;
  width: 1.125rem;
  height: 2px;
  background: var(--deep-brown);
  border-radius: 1px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile drawer */
.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 98;
  background: rgba(44, 33, 24, 0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-nav-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobile-nav {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(21rem, 90vw);
  z-index: 99;
  padding: calc(var(--nav-height) + 0.5rem) 1.25rem 1.5rem;
  background: var(--warm-white);
  box-shadow: -12px 0 48px rgba(44, 33, 24, 0.14);
  transform: translateX(105%);
  visibility: hidden;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-nav.is-open {
  transform: translateX(0);
  visibility: visible;
}

.mobile-nav-header {
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}

.mobile-nav-eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage);
}

.mobile-nav-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--deep-brown);
}

.mobile-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

.mobile-nav-list li + li {
  margin-top: 0.375rem;
}

.mobile-nav-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--deep-brown);
  transition: background 0.2s ease, color 0.2s ease;
}

.mobile-nav-list a::after {
  content: "→";
  flex-shrink: 0;
  font-size: 1rem;
  opacity: 0.35;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.mobile-nav-list a:hover,
.mobile-nav-list a:focus-visible {
  background: var(--parchment);
  color: var(--terracotta);
}

.mobile-nav-list a:hover::after,
.mobile-nav-list a:focus-visible::after {
  opacity: 0.7;
  transform: translateX(2px);
}

.mobile-nav-actions {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.mobile-nav-donate,
.mobile-nav-secondary {
  width: 100%;
  justify-content: center;
  text-align: center;
}

@media (min-width: 900px) {
  :root {
    --nav-height: 5rem;
  }

  .nav-center {
    display: flex;
  }

  .nav-actions {
    display: flex;
  }

  .nav-mobile-tools,
  .mobile-nav,
  .mobile-nav-backdrop {
    display: none !important;
  }
}

@media (min-width: 1100px) {
  .nav-links a {
    font-size: 0.96875rem;
  }

  .lang-pills--desktop .lang-pill {
    min-width: 2.875rem;
    font-size: 0.71875rem;
  }
}

@media (min-width: 900px) and (max-width: 1099px) {
  .nav-links {
    gap: 1rem;
  }

  .nav-links a {
    font-size: 0.875rem;
  }

  .nav-actions {
    gap: 0.75rem;
  }

  .nav-cta {
    padding: 0.6rem 1.1rem;
    font-size: 0.8125rem;
  }
}

@media (min-width: 1200px) {
  .nav-inner {
    max-width: 84rem;
  }
}

@media (max-width: 899px) {
  .nav-center,
  .nav-actions {
    display: none !important;
  }
}

/* ——— Layout ——— */

main {
  padding-top: var(--nav-height);
}

.section {
  padding: 5rem 1.5rem;
}

.section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.section-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 0.75rem;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 1.25rem;
  color: var(--deep-brown);
}

.section-lead {
  font-size: 1.1875rem;
  color: var(--warm-gray);
  max-width: 42rem;
  margin: 0 0 2.5rem;
}

.section--parchment {
  background: var(--parchment);
}

.section--sage {
  background: var(--sage);
  color: var(--cream);
}

.section--sage .section-label {
  color: var(--amber-soft);
}

.section--sage .section-title,
.section--sage .section-lead {
  color: var(--cream);
}

.section--sage a {
  color: var(--amber-soft);
}

/* ——— Hero video + intro ——— */

.hero-video {
  width: 100%;
  background: var(--deep-brown);
}

.hero-video__media {
  position: relative;
  width: 100%;
  min-height: min(75vh, 900px);
  overflow: hidden;
  background: var(--deep-brown);
}

.hero-video__player,
.hero-video__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.hero-video__fallback {
  display: none;
}

.hero-video.is-static .hero-video__player {
  display: none;
}

.hero-video.is-static .hero-video__fallback {
  display: block;
}

.hero-video__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(44, 33, 24, 0) 0%,
    rgba(44, 33, 24, 0) 65%,
    rgba(44, 33, 24, 0.45) 100%
  );
  pointer-events: none;
}

/* Hero social dock — icon-only, overlaid on video */
.hero-social {
  position: absolute;
  left: 50%;
  bottom: 0.85rem;
  z-index: 2;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.5rem;
  border-radius: 999px;
  background: rgba(44, 33, 24, 0.28);
  border: 1px solid rgba(255, 252, 248, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.hero-social__list {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hero-social__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  color: rgba(255, 252, 248, 0.72);
  text-decoration: none;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.hero-social__icon svg {
  width: 0.95rem;
  height: 0.95rem;
}

.hero-social__icon--btn {
  font-family: inherit;
}

.hero-social__icon:hover,
.hero-social__icon:focus-visible {
  color: var(--warm-white);
  background: rgba(255, 252, 248, 0.1);
  transform: translateY(-1px);
}

.hero-social__rule {
  width: 1px;
  height: 1rem;
  background: rgba(255, 252, 248, 0.18);
  flex-shrink: 0;
}

.hero-social__msg {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.5rem);
  transform: translateX(-50%);
  margin: 0;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--warm-white);
  background: rgba(44, 33, 24, 0.88);
  border: 1px solid rgba(255, 252, 248, 0.12);
}

/* Hero intro copy — below video */
.hero-intro {
  background:
    linear-gradient(180deg, var(--parchment) 0%, var(--cream) 100%);
  border-bottom: 1px solid var(--line);
}

.hero-intro__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 3.5rem 1.5rem 4rem;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 1.25rem;
}

.hero-eyebrow::before {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: var(--amber);
}

.hero-intro h1 {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 7vw, 4.75rem);
  font-weight: 500;
  line-height: 1.05;
  margin: 0 0 1.25rem;
  max-width: 16ch;
  color: var(--deep-brown);
}

.hero-tagline {
  font-size: clamp(1.125rem, 2.5vw, 1.375rem);
  max-width: 40rem;
  margin: 0 0 2.5rem;
  color: var(--warm-gray);
  font-style: italic;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .hero-video__player {
    display: none;
  }

  .hero-video__fallback {
    display: block;
  }
}

@media (max-width: 639px) {
  .social-ribbon__inner {
    flex-direction: column;
    align-items: stretch;
  }

  .social-ribbon__label {
    text-align: center;
  }

  .social-ribbon__actions {
    justify-content: center;
  }

  .social-ribbon__chip span:not(.social-ribbon__letter) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .social-ribbon__chip {
    padding: 0.55rem;
    width: 2.5rem;
    height: 2.5rem;
    justify-content: center;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--amber);
  color: var(--deep-brown);
  border-color: var(--amber);
}

.btn-primary:hover {
  background: var(--amber-soft);
  color: var(--deep-brown);
}

.btn-outline {
  background: transparent;
  color: var(--warm-white);
  border-color: rgba(255, 252, 248, 0.5);
}

.btn-outline:hover {
  background: rgba(255, 252, 248, 0.12);
  color: var(--warm-white);
}

.btn-outline-dark {
  background: transparent;
  color: var(--deep-brown);
  border-color: var(--sage);
}

.btn-outline-dark:hover {
  background: rgba(92, 115, 85, 0.1);
  color: var(--deep-brown);
}

.btn-sage {
  background: var(--sage);
  color: var(--cream);
  border-color: var(--sage);
}

.btn-sage:hover {
  background: var(--sage-light);
}

/* ——— Mission pillars ——— */

.pillars {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

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

@media (min-width: 1024px) {
  .pillars {
    grid-template-columns: repeat(4, 1fr);
  }
}

.pillar {
  padding: 2rem 1.5rem;
  background: var(--warm-white);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pillar:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.pillar-icon {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 1rem;
  color: var(--terracotta);
}

.pillar h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin: 0 0 0.75rem;
}

.pillar p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--warm-gray);
}

/* ——— Timeline ——— */

.timeline {
  position: relative;
  padding-left: 2rem;
  border-left: 2px solid var(--amber-soft);
}

.timeline-item {
  position: relative;
  padding-bottom: 3rem;
}

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

.timeline-item::before {
  content: "";
  position: absolute;
  left: calc(-2rem - 5px);
  top: 0.35rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--terracotta);
  box-shadow: 0 0 0 4px var(--parchment);
}

.timeline-year {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--terracotta);
  margin-bottom: 0.25rem;
}

.timeline-item h3 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  margin: 0 0 0.75rem;
}

.timeline-item p {
  margin: 0;
  color: var(--warm-gray);
}

/* ——— Split content ——— */

.split {
  display: grid;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
  }

  .split--reverse .split-media {
    order: 2;
  }
}

.split-media {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.split-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.split-media figcaption {
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  color: var(--warm-gray);
  background: var(--warm-white);
  border-top: 1px solid var(--line);
}

/* ——— Persecution stats ——— */

.stats-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  margin: 2.5rem 0;
}

.stat {
  text-align: center;
  padding: 1.75rem 1rem;
  background: rgba(255, 252, 248, 0.08);
  border-radius: var(--radius);
  border: 1px solid rgba(255, 252, 248, 0.15);
}

.stat-number {
  display: block;
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--amber-soft);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 0.875rem;
  opacity: 0.9;
}

.quote-block {
  margin: 2.5rem 0 0;
  padding: 2rem 2rem 2rem 2.5rem;
  border-left: 4px solid var(--amber);
  background: rgba(255, 252, 248, 0.06);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-style: italic;
  line-height: 1.5;
}

.quote-block cite {
  display: block;
  margin-top: 1rem;
  font-size: 0.9375rem;
  font-style: normal;
  opacity: 0.85;
}

/* ——— Bible project ——— */

.bible-highlight {
  display: grid;
  gap: 2.5rem;
  padding: 3rem;
  background: var(--warm-white);
  border-radius: calc(var(--radius) * 1.5);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

@media (min-width: 800px) {
  .bible-highlight {
    grid-template-columns: 280px 1fr;
    align-items: start;
  }
}

.bible-cover {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(44, 33, 24, 0.15);
}

.bible-cover img {
  width: 100%;
}

.bible-highlight h3 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  margin: 0 0 1rem;
}

.bible-highlight ul {
  margin: 1.5rem 0 0;
  padding-left: 1.25rem;
  color: var(--warm-gray);
}

.bible-highlight li + li {
  margin-top: 0.5rem;
}

/* ——— Video ——— */

.video-grid {
  display: grid;
  gap: 2rem;
}

@media (min-width: 800px) {
  .video-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.video-card {
  background: var(--warm-white);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
}

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  background: var(--deep-brown);
}

.video-wrapper iframe,
.video-wrapper video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  background: var(--deep-brown);
}

.video-card-body {
  padding: 1.25rem 1.5rem 1.5rem;
}

.video-card-body h3 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  margin: 0 0 0.5rem;
}

.video-card-body p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--warm-gray);
}

/* ——— Events ——— */

.events-list {
  display: grid;
  gap: 1.25rem;
}

.event-card {
  display: grid;
  gap: 0.5rem;
  padding: 1.5rem 1.75rem;
  background: var(--warm-white);
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

@media (min-width: 600px) {
  .event-card {
    grid-template-columns: auto 1fr;
    gap: 1.5rem;
    align-items: start;
  }
}

.event-icon {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--parchment);
  border-radius: 50%;
  color: var(--sage);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
}

.event-card h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin: 0 0 0.35rem;
}

.event-card p {
  margin: 0;
  color: var(--warm-gray);
  font-size: 0.9375rem;
}

/* ——— CTA ——— */

.cta-panel {
  text-align: center;
  padding: 4rem 2rem;
  background: linear-gradient(135deg, var(--terracotta) 0%, var(--terracotta-deep) 100%);
  border-radius: calc(var(--radius) * 1.5);
  color: var(--warm-white);
}

.cta-panel h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin: 0 0 1rem;
}

.cta-panel p {
  max-width: 32rem;
  margin: 0 auto 2rem;
  opacity: 0.92;
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.cta-panel .btn-primary {
  background: var(--amber);
}

.cta-panel .btn-outline {
  border-color: rgba(255, 252, 248, 0.6);
}

/* ——— Social & Share ——— */

.section--social {
  background:
    linear-gradient(165deg, rgba(92, 115, 85, 0.12) 0%, rgba(250, 247, 242, 0) 45%),
    linear-gradient(180deg, var(--parchment) 0%, var(--cream) 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.social-grid {
  display: grid;
  gap: 0.875rem;
  grid-template-columns: 1fr;
  margin-bottom: 2.5rem;
}

@media (min-width: 540px) {
  .social-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .social-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}

@media (min-width: 1200px) {
  .social-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.social-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.125rem;
  background: var(--warm-white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--deep-brown);
  box-shadow: 0 4px 20px rgba(44, 33, 24, 0.05);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.social-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(44, 33, 24, 0.1);
}

.social-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  color: var(--warm-white);
}

.social-card__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.social-card__icon--letter {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
}

.social-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1;
}

.social-card__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
}

.social-card__hint {
  font-size: 0.8125rem;
  color: var(--warm-gray);
  line-height: 1.35;
}

.social-card__arrow {
  flex-shrink: 0;
  font-size: 1.125rem;
  opacity: 0.35;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.social-card:hover .social-card__arrow {
  opacity: 0.75;
  transform: translateX(3px);
}

.social-card--facebook .social-card__icon { background: #1877f2; }
.social-card--facebook:hover { border-color: rgba(24, 119, 242, 0.35); }

.social-card--x .social-card__icon { background: #0f1419; }
.social-card--x:hover { border-color: rgba(15, 20, 25, 0.25); }

.social-card--youtube .social-card__icon { background: #ff0000; }
.social-card--youtube:hover { border-color: rgba(255, 0, 0, 0.3); }

.social-card--rumble .social-card__icon { background: #85c742; color: #1a2e0a; }
.social-card--rumble:hover { border-color: rgba(133, 199, 66, 0.45); }

.social-card--bitchute .social-card__icon { background: #ef4137; }
.social-card--bitchute:hover { border-color: rgba(239, 65, 55, 0.35); }

.social-card--linkedin .social-card__icon { background: #0a66c2; }
.social-card--linkedin:hover { border-color: rgba(10, 102, 194, 0.35); }

.social-card--odysee .social-card__icon { background: #ef1970; }
.social-card--odysee:hover { border-color: rgba(239, 25, 112, 0.35); }

.share-panel {
  padding: 1.75rem 1.5rem;
  background: var(--warm-white);
  border: 2px solid var(--sage);
  border-radius: calc(var(--radius) + 0.25rem);
  box-shadow: var(--shadow);
}

.share-panel__title {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 500;
  color: var(--deep-brown);
}

.share-panel__lead {
  margin: 0 0 1.25rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--warm-gray);
  max-width: 42rem;
}

.share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--cream);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--deep-brown);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.share-btn svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.share-btn:hover {
  transform: translateY(-1px);
  background: var(--parchment);
}

.share-btn--primary {
  background: var(--sage);
  border-color: var(--sage);
  color: var(--warm-white);
}

.share-btn--primary:hover {
  background: #2c5580;
  border-color: #2c5580;
}

.share-btn--facebook:hover { border-color: #1877f2; color: #1877f2; }
.share-btn--x:hover { border-color: #0f1419; }
.share-btn--linkedin:hover { border-color: #0a66c2; color: #0a66c2; }

.share-url {
  margin: 1rem 0 0;
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--sage);
}

.share-msg {
  margin: 0.75rem 0 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--sage);
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 1.25rem;
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.625rem;
  height: 2.625rem;
  border-radius: 50%;
  background: rgba(255, 252, 248, 0.08);
  border: 1px solid rgba(255, 252, 248, 0.16);
  color: var(--cream);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.footer-social-link svg {
  width: 1.125rem;
  height: 1.125rem;
}

.footer-social-link:hover {
  transform: translateY(-2px);
  background: rgba(255, 252, 248, 0.16);
  color: var(--cream);
}

.footer-social-link--facebook:hover { border-color: #1877f2; background: #1877f2; }
.footer-social-link--x:hover { border-color: #fff; background: #0f1419; }
.footer-social-link--youtube:hover { border-color: #ff0000; background: #ff0000; }
.footer-social-link--rumble:hover { border-color: #85c742; background: #85c742; color: #1a2e0a; }
.footer-social-link--bitchute:hover { border-color: #ef4137; background: #ef4137; }
.footer-social-link--linkedin:hover { border-color: #0a66c2; background: #0a66c2; }
.footer-social-link--odysee:hover { border-color: #ef1970; background: #ef1970; }

/* ——— Footer ——— */

.site-footer {
  background: var(--deep-brown);
  color: rgba(255, 252, 248, 0.85);
  padding: 4rem 1.5rem 2rem;
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 700px) {
  .footer-inner {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

.footer-brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  color: inherit;
}

.footer-brand-logo {
  flex-shrink: 0;
  border-radius: 0.625rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.footer-brand .brand-mark {
  color: var(--cream);
  font-size: 1.25rem;
}

.footer-brand p {
  margin: 1rem 0 0;
  font-size: 0.9375rem;
  max-width: 28rem;
  opacity: 0.85;
}

.footer-col h4 {
  font-family: var(--font-display);
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber-soft);
  margin: 0 0 1rem;
}

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

.footer-col li + li {
  margin-top: 0.5rem;
}

.footer-col a {
  color: rgba(255, 252, 248, 0.85);
  text-decoration: none;
}

.footer-col a:hover {
  color: var(--amber-soft);
}

.footer-bottom {
  max-width: var(--max-width);
  margin: 3rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 252, 248, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: 0.8125rem;
  opacity: 0.7;
}

.footer-bottom a {
  color: inherit;
}

.footer-media-credit {
  width: 100%;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  opacity: 0.65;
  text-align: center;
}

.footer-media-credit a {
  color: rgba(232, 213, 184, 0.9);
}

/* ——— Animations ——— */

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

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

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .btn:hover,
  .pillar:hover {
    transform: none;
  }

  .bible-page-turn {
    animation: none !important;
  }
}

/* ——— Donate buttons ——— */

.btn-donate {
  background: var(--amber);
  color: var(--deep-brown);
  border-color: var(--amber);
}

.btn-donate:hover {
  background: #6aa8d6;
  color: var(--deep-brown);
}

.btn-donate-outline {
  background: transparent;
  color: var(--terracotta);
  border-color: var(--terracotta);
}

.btn-donate-outline:hover {
  background: var(--terracotta);
  color: var(--warm-white);
}

.nav-cta.btn-donate {
  background: var(--terracotta);
  color: var(--warm-white) !important;
  border: none;
}

.nav-cta.btn-donate:hover {
  background: var(--terracotta-deep);
}

.donate-inline {
  margin-top: 1.5rem;
}

/* ——— Bible Reader (Coming Soon preview) ——— */

.bible-reader-section {
  position: relative;
  overflow: hidden;
}

.bible-diligence-callout {
  margin-bottom: 2rem;
  padding: 1.75rem 2rem;
  background: linear-gradient(135deg, rgba(196, 146, 58, 0.14) 0%, rgba(166, 93, 63, 0.1) 100%);
  border: 1px solid rgba(196, 146, 58, 0.35);
  border-radius: var(--radius);
  border-left: 4px solid var(--amber);
}

.bible-diligence-callout__eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracotta);
}

.bible-diligence-callout__text {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--deep-brown);
}

.bible-reader-wrap {
  position: relative;
  border-radius: calc(var(--radius) * 1.5);
  border: 1px solid var(--line);
  background: var(--warm-white);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.coming-soon-ribbon {
  position: absolute;
  top: 1.25rem;
  right: -2.5rem;
  z-index: 5;
  transform: rotate(45deg);
  background: var(--terracotta);
  color: var(--warm-white);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.4rem 3rem;
  box-shadow: 0 4px 12px rgba(166, 93, 63, 0.35);
}

.bible-reader-header {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(180deg, var(--parchment) 0%, var(--cream) 100%);
  border-bottom: 1px solid var(--line);
}

.bible-reader-header h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin: 0;
}

.bible-reader-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sage);
  background: rgba(92, 115, 85, 0.12);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
}

.bible-reader-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
  animation: pulse-dot 2s ease infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

.bible-converted-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #1f7a4d;
  background: rgba(31, 122, 77, 0.12);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  margin-left: 0.5rem;
}

.bible-milestone-note {
  background: rgba(31, 122, 77, 0.08);
  border: 1px solid rgba(31, 122, 77, 0.25);
  color: #1f7a4d;
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.75rem 1.25rem;
  border-radius: 0.75rem;
  margin: 0 0 1.5rem;
}

.bible-panel--newversion {
  background: linear-gradient(135deg, #eaf6f0 0%, #dcf0e6 100%);
  border-bottom: 1px solid var(--line);
}

.bible-panel-label--converted {
  color: #1f7a4d;
}

.bible-newversion-note {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px dashed rgba(31, 122, 77, 0.3);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--warm-gray);
  font-style: italic;
}

.bible-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}

.bible-controls label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warm-gray);
}

.bible-controls select,
.bible-controls button {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--warm-white);
  color: var(--deep-brown);
  cursor: pointer;
}

.bible-controls button:hover {
  border-color: var(--sage);
  background: var(--parchment);
}

.bible-controls-spacer {
  flex: 1;
}

.bible-version-pills {
  display: inline-flex;
  gap: 0.35rem;
}

.bible-version-pill {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--warm-white);
  color: var(--warm-gray);
  cursor: pointer;
}

.bible-version-pill:hover {
  border-color: var(--sage);
}

.bible-version-pill.is-active {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--warm-white);
}

.bible-panels {
  display: grid;
  min-height: 20rem;
}

@media (min-width: 900px) {
  .bible-panels {
    grid-template-columns: 1fr 1fr;
  }
}

.bible-panel {
  padding: 2rem 1.75rem;
  position: relative;
}

.bible-panel--kralicka {
  background: linear-gradient(135deg, #eef4fa 0%, #e3edf7 100%);
  border-right: 1px solid var(--line);
}

.bible-panel--english {
  background: var(--warm-white);
}

.bible-panel-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 0.5rem;
}

.bible-chapter-title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  margin: 0 0 1.5rem;
  color: var(--deep-brown);
}

.bible-verse {
  margin: 0 0 0.875rem;
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--deep-brown);
}

.bible-verse-num {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--terracotta);
  margin-right: 0.35rem;
}

@keyframes bible-turn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.bible-page-turn {
  animation: bible-turn 0.45s ease;
}

.bible-nav-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--line);
  background: var(--parchment);
}

.bible-nav-row button {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0.625rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--warm-white);
  color: var(--deep-brown);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.bible-nav-row button:hover {
  background: var(--cream);
  border-color: var(--sage);
}

.bible-notify {
  padding: 1.75rem 1.5rem;
  background: var(--sage);
  color: var(--cream);
  display: grid;
  gap: 1rem;
}

@media (min-width: 700px) {
  .bible-notify {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}

.bible-notify h4 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  margin: 0 0 0.35rem;
}

.bible-notify p {
  margin: 0;
  font-size: 0.9375rem;
  opacity: 0.9;
}

.bible-notify-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bible-notify-form input[type="email"] {
  flex: 1;
  min-width: 12rem;
  padding: 0.625rem 1rem;
  border: none;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
}

.bible-notify-form button {
  padding: 0.625rem 1.25rem;
  border: none;
  border-radius: 999px;
  background: var(--amber);
  color: var(--deep-brown);
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
}

.bible-notify-form button:hover {
  background: var(--amber-soft);
}

/* Turnstile sits on its own row so it never squeezes the email field. With
   data-appearance="interaction-only" it is usually zero-height and invisible. */
.bible-notify-form .cf-turnstile {
  flex-basis: 100%;
}

.bible-notify-form .cf-turnstile:empty {
  display: none;
}

.bible-notify-msg {
  grid-column: 1 / -1;
  font-size: 0.875rem;
  color: var(--amber-soft);
  margin: 0;
}

/* ---- Contact card (Get Involved) ---- */
.contact-card {
  margin-top: 1.5rem;
  display: grid;
  gap: 0;
  background: var(--warm-white);
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: var(--shadow);
}

@media (min-width: 820px) {
  .contact-card {
    grid-template-columns: 0.85fr 1.15fr;
  }
}

.contact-card__intro {
  padding: 2.5rem 2rem;
  background: linear-gradient(155deg, var(--terracotta-deep), var(--sage));
  color: var(--cream);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.contact-card__eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--amber-soft);
}

.contact-card__intro h3 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  line-height: 1.12;
  margin: 0;
}

.contact-card__intro p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(245, 248, 251, 0.88);
}

.contact-card__mail {
  margin-top: auto;
  align-self: flex-start;
  color: var(--warm-white);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  padding-bottom: 0.15rem;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.contact-card__mail:hover {
  color: var(--amber-soft);
  border-color: var(--amber-soft);
}

.contact-form {
  padding: 2.5rem 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.1rem;
  align-content: start;
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.contact-field--full {
  grid-column: 1 / -1;
}

.contact-field label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--warm-gray);
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  background: var(--cream);
  color: var(--deep-brown);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.contact-form textarea {
  resize: vertical;
  min-height: 7.5rem;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(91, 107, 124, 0.7);
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--amber);
  background: var(--warm-white);
  box-shadow: 0 0 0 3px rgba(74, 144, 194, 0.18);
}

/* Honeypot — hidden from humans, tempting to bots. Never remove. */
.contact-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form .cf-turnstile {
  grid-column: 1 / -1;
}

.contact-submit {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 0.85rem 2rem;
  border: none;
  border-radius: 999px;
  background: var(--terracotta);
  color: var(--warm-white);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  box-shadow: 0 10px 24px rgba(44, 82, 130, 0.25);
}

.contact-submit:hover {
  background: var(--terracotta-deep);
  transform: translateY(-1px);
}

.contact-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.contact-msg {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--terracotta-deep);
}

@media (max-width: 560px) {
  .contact-card__intro,
  .contact-form {
    padding: 1.75rem 1.25rem;
  }

  .contact-form {
    grid-template-columns: 1fr;
  }

  .contact-submit {
    width: 100%;
    justify-self: stretch;
    text-align: center;
  }
}

.bible-reader-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 2rem;
}

.bible-reader-foot p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--warm-gray);
  max-width: 32rem;
}

.media-credit {
  font-size: 0.875rem;
  color: var(--warm-gray);
}

.split-heading {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin: 0 0 1rem;
}

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

.mt-section {
  margin-top: 2.5rem;
}

.mt-section-lg {
  margin-top: 4rem;
}

.quote-block--mission {
  border-color: var(--terracotta);
  background: var(--parchment);
  color: var(--deep-brown);
  margin-bottom: 3rem;
}

.quote-block--heritage {
  border-color: var(--terracotta);
  background: var(--warm-white);
  color: var(--deep-brown);
}

.heritage-principles-lead {
  text-align: center;
  max-width: 38rem;
  margin: 0 auto 2rem;
  color: var(--warm-gray);
}

.heritage-pillars .pillar h4 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  margin: 0 0 0.75rem;
  color: var(--deep-brown);
}

.heritage-prose p {
  max-width: 48rem;
  color: var(--warm-gray);
  line-height: 1.75;
}

.heritage-prose p + p {
  margin-top: 1.25rem;
}

.connection-grid .event-card h4 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  margin: 0 0 0.5rem;
}

body.nav-open {
  overflow: hidden;
}

/* ——— Mobile & touch ——— */

html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

.btn,
.nav-cta,
.menu-toggle,
.lang-pill,
.share-btn,
.social-card,
.social-ribbon__share,
.social-ribbon__chip,
.bible-controls select,
.bible-controls button,
.bible-nav-row button,
.bible-notify-form button,
.bible-notify-form input[type="email"] {
  min-height: 44px;
}

@media (max-width: 899px) {
  :root {
    --nav-height: 4rem;
  }

  .section {
    padding: 3.5rem 1.125rem;
  }

  .section-title {
    font-size: clamp(1.75rem, 7vw, 2.35rem);
  }

  .section-lead {
    font-size: 1.0625rem;
    margin-bottom: 2rem;
  }

  .nav-inner {
    padding: 0 1rem;
  }

  .brand-mark {
    font-size: 1rem;
  }

  .brand-sub {
    font-size: 0.625rem;
  }

  .hero-video__media {
    min-height: min(68vh, 640px);
  }

  .hero-intro__inner {
    padding: 3rem 1.125rem 3.5rem;
  }

  .hero-intro h1 {
    font-size: clamp(2.25rem, 10vw, 3.25rem);
    max-width: none;
  }

  .hero-tagline {
    font-size: 1.0625rem;
    margin-bottom: 2rem;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .hero-social {
    bottom: 0.65rem;
    max-width: calc(100% - 1.5rem);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .hero-social::-webkit-scrollbar {
    display: none;
  }

  .hero-social__icon {
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
  }

  .quote-block {
    padding: 1.5rem 1.25rem 1.5rem 1.5rem;
    font-size: 1.125rem;
  }

  .timeline {
    padding-left: 1.5rem;
    margin-top: 2.5rem !important;
  }

  .timeline-item::before {
    left: calc(-1.5rem - 5px);
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .stat {
    padding: 1.25rem 0.75rem;
  }

  .stat-number {
    font-size: 2rem;
  }

  .split-media {
    margin-bottom: 0.5rem;
  }

  .split-media figcaption {
    font-size: 0.75rem;
    line-height: 1.5;
  }

  .bible-highlight {
    padding: 1.5rem;
    grid-template-columns: 1fr;
  }

  .bible-cover {
    max-width: 16rem;
    margin: 0 auto;
  }

  .bible-diligence-callout {
    padding: 1.25rem 1.125rem;
  }

  .coming-soon-ribbon {
    top: 0.75rem;
    right: -2.75rem;
    font-size: 0.625rem;
    padding: 0.35rem 2.75rem;
  }

  .bible-reader-header {
    padding: 1rem 1.125rem;
    flex-direction: column;
    align-items: flex-start;
  }

  .bible-reader-header .btn {
    width: 100%;
    justify-content: center;
  }

  .bible-controls {
    padding: 0.875rem 1.125rem;
  }

  .bible-controls label {
    flex: 1 1 calc(50% - 0.375rem);
    min-width: 8.5rem;
  }

  .bible-controls select,
  .bible-controls button {
    width: 100%;
  }

  .bible-controls-spacer {
    display: none;
  }

  .bible-controls button[data-toggle-english] {
    flex: 1 1 100%;
  }

  .bible-panel {
    padding: 1.5rem 1.125rem;
  }

  .bible-panel--kralicka {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }

  .bible-chapter-title {
    font-size: 1.2rem;
  }

  .bible-verse {
    font-size: 1rem;
    line-height: 1.75;
  }

  .bible-nav-row {
    flex-direction: column;
    padding: 0.875rem 1.125rem;
  }

  .bible-nav-row button {
    width: 100%;
  }

  .bible-notify {
    padding: 1.25rem 1.125rem;
  }

  .bible-notify-form {
    flex-direction: column;
  }

  .bible-notify-form input[type="email"],
  .bible-notify-form button {
    width: 100%;
  }

  .bible-reader-foot {
    flex-direction: column;
    align-items: stretch;
  }

  .bible-reader-foot .btn {
    width: 100%;
    justify-content: center;
  }

  .cta-panel {
    padding: 2.5rem 1.25rem;
  }

  .cta-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-actions .btn {
    width: 100%;
  }

  .site-footer {
    padding: 3rem 1.125rem 1.5rem;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .donate-inline .btn,
  .text-center .btn {
    width: 100%;
    justify-content: center;
  }
}

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

  .pillar {
    padding: 1.5rem 1.25rem;
  }

  .pillars[style*="grid-template-columns: 1fr"] {
    grid-template-columns: 1fr !important;
  }
}



/* ===========================================================================
   AegisAble™ contrast remediation — WCAG 1.4.3 Contrast (Minimum)
   ---------------------------------------------------------------------------
   Measured on the built site with `aegisable scan`. Each ratio below is the
   worst case: for text over a gradient, the least-contrasting gradient stop.
   Hues are preserved — every replacement is a darker or lighter step of the
   same blue, so the palette reads the same.

       .brand-sub                            2.82:1  ->  needs 4.5:1
       .footer-media-credit                  3.48:1
       .footer-media-credit a                3.00:1
       .bible-diligence-callout__eyebrow     2.64:1
       .bible-diligence-callout__text        1.34:1
       .bible-reader-badge                   3.95:1
       .bible-converted-badge                3.93:1
       .contact-card__eyebrow                4.01:1
   =========================================================================== */

/* --sage-light is a background elsewhere, so the text use gets its own step
   rather than shifting the token and changing fills. */
.brand-sub {
  color: #2f6ea8;
}

/* The footer sits on --deep-brown (#16233a). 0.65 opacity dropped the credit
   below the minimum; the link needed a lighter step as well. */
.footer-media-credit {
  opacity: 0.88;
  color: #c3d3e6;
}

.footer-media-credit a {
  color: #dbe7f4;
}

/* The callout sits on a light gradient. --terracotta was fine on white but not
   against the gradient's lightest stop. */
.bible-diligence-callout__eyebrow {
  color: #1f4a75;
}

.bible-diligence-callout__text {
  color: #16233a;
}

/* Badges: tinted pill backgrounds over a gradient. Darkening the text keeps the
   tint while clearing the minimum. */
.bible-reader-badge {
  color: #24567f;
  background: rgba(44, 82, 130, 0.14);
}

.bible-converted-badge {
  color: #14603a;
  background: rgba(20, 96, 58, 0.14);
}

/* --amber-soft on the contact card's gradient. A deeper tint of the same hue. */
.contact-card__eyebrow {
  color: #e4f0fa;
}

/* AegisAble™ — WCAG 2.4.7 Focus Visible.
   The two teaching videos are keyboard reachable (they have controls), but a
   focused <video> element itself showed no indicator: the browser only styles
   the controls inside it. */
/* :focus is used rather than :focus-visible — Chromium does not reliably apply
   :focus-visible to a <video> reached by Tab, so the indicator never rendered. */
video:focus,
video:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
}

/* ===========================================================================
   AegisAble™ — findings from the full display-condition matrix
   ---------------------------------------------------------------------------
   These only appear once animations are disabled. Scroll-reveal elements sit at
   opacity 0 by default, so a scanner (and axe) cannot measure them; under
   `prefers-reduced-motion` they render at their final opacity and the real
   contrast becomes visible. The failures were always there — every user with
   reduced motion enabled has been seeing them.

       --amber-soft (#cfe3f2) as text on --sage (#3b6fa0)   4.01:1, needs 4.5:1
       .lang-pill targets partially obscured at 200% zoom    8px gap, needs 24px
   =========================================================================== */

/* #eef5fb on --sage measures 4.81:1. --amber-soft is still used for fills and
   borders elsewhere, so only the text uses move. */
.section--sage .section-label,
.section--sage .stat-label,
.section--sage .section-lead,
.persecution .section-label,
.persecution .stat-label {
  color: #eef5fb;
}

/* WCAG 2.5.8 Target Size. At 200% zoom the language pills sat 8px apart, so the
   24px minimum circles overlapped. Spacing them clears the exception without
   changing their size at normal zoom. */
.lang-pill {
  min-height: 2.5rem;
}

.lang-switch,
.lang-pills {
  gap: 0.5rem;
}

/* Remaining reduced-motion contrast near-misses. Ratios computed against each
   element's actual measured background. */

/* #ffffff on #4b7aa7 = 4.53:1 (was #dee9f3 at 3.67:1) */
.persecution .stat-label,
.section--sage .stat-label {
  color: #ffffff;
}

/* #ffffff on #4777a5 = 4.72:1 (quote 4.42:1, citation 3.69:1) */
.quote-block--persecution,
.quote-block--persecution cite,
.quote-block--persecution span {
  color: #ffffff;
}

/* The donate button was #cfe3f2 on #4a90c2 at 2.62:1. White alone only reaches
   3.46:1 there, so the fill moves to the deeper brand blue: 7.97:1. */
.btn-donate {
  background: var(--terracotta);
  color: #ffffff;
}

.btn-donate:hover {
  background: var(--terracotta-deep);
  color: #ffffff;
}

/* #1a6b43 on #e4eeed = 5.50:1 (was #1f7a4d at 4.49:1) */
.bible-milestone-note,
.bible-milestone-note strong,
.bible-milestone-note em {
  color: #1a6b43;
}

/* #eef5fb on #3b6fa0 = 4.81:1 (was #e2eaf2 at 4.35:1) */
.bible-notify-body,
[data-i18n="bibleReader.notifyBody"] {
  color: #eef5fb;
}

/* Matched by data-i18n rather than by class ancestry: these elements sit inside
   scroll-reveal wrappers whose opacity blends the text toward its background,
   so the ratio must have headroom rather than sit at the threshold. Pure white
   on each measured background clears it in every intermediate state. */
.stat-label,
[data-i18n="persecution.stat1Label"],
[data-i18n="persecution.stat2Label"],
[data-i18n="persecution.stat3Label"],
[data-i18n="persecution.quoteComenius"],
[data-i18n="persecution.quoteComeniusCite"],
.quote-block--persecution cite,
[data-i18n="bibleReader.notifyBody"] {
  color: #ffffff;
}

/* Root cause of the remaining near-misses: the section background itself is too
   light. Pure white on #4777a5 is only 4.72:1, so any scroll-reveal opacity
   blend drops it under 4.5 — chasing the text colour cannot fix that. Deepening
   the section blue gives real headroom: white on #2f5f8a is 6.72:1, and the
   blue identity is unchanged. */
.section--sage,
.persecution {
  background: #2f5f8a;
}

/* At 200% zoom the footer reflows onto the light page background instead of the
   dark footer panel, leaving light-on-light. Pin the footer's own surface and
   text so reflow cannot strand them. */
.site-footer {
  background: var(--deep-brown);
  color: #e8eff6;
}

.site-footer h4,
.site-footer a,
.footer-media-credit,
.footer-media-credit a {
  color: #e8eff6;
}

/* #ffffff on #3b6891 = 5.9:1, clear of any reveal-opacity blend. */
.quote-block--persecution cite,
[data-i18n$="Cite"] {
  color: #ffffff;
}

/* WCAG 2.5.8 — the language pills still overlapped at 200% zoom and under the
   text-spacing override. A larger target plus real spacing satisfies it. */
.lang-pill {
  min-width: 3rem;
  min-height: 2.75rem;
}

.lang-switch,
.lang-pills {
  gap: 0.75rem;
}

/* ===========================================================================
   AegisAble™ — remaining findings at 200% zoom and under reduced motion
   ---------------------------------------------------------------------------
   At 200% zoom the layout reflows and several light-on-dark elements land over
   the cream page background, leaving light-on-light at 1.08:1. The durable fix
   is to give each of those elements its own opaque surface rather than relying
   on a parent that reflow can move out from under them.
   =========================================================================== */

/* Hero social ribbon: overlays the video at normal zoom, can land on the cream
   background once the layout reflows. Its own scrim guarantees the ratio. */
.hero-social {
  background: rgba(22, 35, 58, 0.82);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
}

.hero-social a,
.hero-social button,
[data-i18n="social.label"] {
  color: #ffffff;
}

/* Footer: pin the surface so reflow cannot strand its text on the page
   background. Every descendant inherits a colour that passes on it. */
.site-footer,
.site-footer .footer-inner,
.site-footer > * {
  background-color: var(--deep-brown);
}

.site-footer,
.site-footer h4,
.site-footer p,
.site-footer li,
.site-footer a,
.site-footer [data-i18n],
[data-i18n="footer.connectHeading"] {
  color: #e8eff6;
}

/* Donate buttons carry their own fill, so they read correctly wherever the
   layout puts them. #ffffff on --terracotta is 7.97:1. */
.btn-donate,
[data-donate] {
  background: var(--terracotta);
  color: #ffffff;
  border-color: var(--terracotta);
}

.btn-donate:hover,
[data-donate]:hover {
  background: var(--terracotta-deep);
  color: #ffffff;
  border-color: var(--terracotta-deep);
}

/* The BrandHub credit link sits in the footer. */
.site-footer a[href*="brandhub.agency"] {
  color: #ffffff;
}

/* Mission pull-quote citation: near-white on parchment at 1.13:1 once the
   reveal animation is disabled and it renders at full opacity. */
.quote-block--mission cite,
[data-i18n="mission.verseCite"] {
  color: #16233a;
}

/* WCAG 2.5.8 Target Size. Still overlapping at 200% zoom — the pills need real
   size as well as spacing. */
.lang-pill {
  min-width: 3.25rem;
  min-height: 3rem;
}

.lang-switch,
.lang-pills {
  gap: 1rem;
}

/* Last two findings.

   1. WCAG 2.5.8 — under the text-spacing override the language pills grew
      taller than their row, so vertically adjacent targets overlapped at
      23.2px. Removing the fixed row height lets the row grow with the text.
   2. WCAG 1.4.3 — "Stay Connected" is a .section-label over the hero video.
      Its own scrim guarantees legibility whatever frame is playing. */

.lang-switch,
.lang-pills {
  height: auto;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 0.75rem;
}

.lang-pill {
  height: auto;
  line-height: 1.4;
  padding-block: 0.5rem;
}

[data-i18n="social.label"],
.hero-social .section-label {
  color: #ffffff;
  background: rgba(22, 35, 58, 0.85);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}

/* The pills still overlapped vertically under the text-spacing override: the
   row itself was constrained. Give each pill a target of at least 24px in both
   directions with real separation that survives any line-height the user sets. */
.lang-switch,
.lang-pills {
  height: auto !important;
  min-height: 0;
  gap: 1rem;
  row-gap: 1rem;
  padding: 0.25rem;
}

.lang-pill {
  min-height: 2.75rem !important;
  height: auto !important;
  margin: 0.25rem;
}

/* Root cause of the remaining target-size failure: the header row is a fixed
   --nav-height, so when the user increases text spacing (WCAG 1.4.12) the
   contents grow past it and adjacent targets overlap — only 21px of clear space
   remained around each language pill. A fixed height must become a minimum. */
.site-header,
.nav-inner {
  height: auto;
  min-height: var(--nav-height);
  flex-wrap: wrap;
  row-gap: 0.5rem;
  padding-block: 0.5rem;
}

/* The nav links widen under the text-spacing override and grow into the
   language pills, so the two sets of targets overlap. Separation that scales
   with the text keeps them apart (WCAG 2.5.8 spacing exception). */
.nav-inner {
  gap: 1.5rem;
}

.nav-links {
  gap: 1.25rem;
  flex-wrap: wrap;
  row-gap: 0.5rem;
}

.lang-switch,
.lang-pills {
  margin-inline-start: 1rem;
  flex-shrink: 0;
}

/* .brand-sub at 4.49:1 against the header's translucent surface — one hundredth
   under the minimum. #24557f gives it real headroom (5.6:1) and is a darker
   step of the same blue. */
.brand-sub,
[data-i18n="brand.sub"] {
  color: #24557f;
}

/* Accessibility statement section */
.a11y-list { margin: 0 0 1.2em; padding-left: 1.2em; list-style: disc; }
.a11y-list li { line-height: 1.7; color: var(--warm-gray); margin-bottom: .5em; }
#accessibility h3 {
  font-family: var(--font-display); font-size: 1.25rem;
  margin: 1.6em 0 .5em; color: var(--deep-brown);
}
#accessibility a { color: var(--terracotta-deep); text-decoration: underline; }
#accessibility .a11y-note { font-size: .9rem; color: var(--warm-gray); margin-top: 1.8em; }