/* =====================================================================
   THE CHRISTIAN KING
   Cinematic · editorial · old-world contemporary
   ===================================================================== */

:root {
  /* Backgrounds — deep, warm, cinematic */
  --bg:        #06060a;
  --bg-2:      #0a0a10;
  --bg-warm:   #0f0c08;
  --surface:   #11110d;
  --surface-2: #18170f;
  --surface-3: #1f1d14;
  --line:      #2a2820;
  --line-2:    #3a3624;

  /* Burnished gold — matched to the logo */
  --gold-deep:   #7a5e1a;
  --gold:        #c9962a;
  --gold-warm:   #d9a73e;
  --gold-bright: #e3b85d;
  --gold-pale:   #f1d489;
  --gold-soft:   rgba(201, 150, 42, 0.14);
  --gold-glow:   rgba(227, 184, 93, 0.32);

  /* Editorial accent — wax-seal crimson */
  --crimson: #8b1e2b;
  --parchment: #f5ead0;

  /* Text — warm whites, never icy */
  --text:    #ece6d8;
  --text-2:  #b8b1a0;
  --text-3:  #807a6c;

  /* Spacing & shape */
  --container: 1280px;
  --container-text: 760px;
  --radius:    4px;
  --radius-md: 10px;
  --radius-lg: 18px;

  --display: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --display-caps: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease: cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Subtle film grain over the whole page */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.7'/></svg>");
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color .2s var(--ease); }
button { font-family: inherit; cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

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

/* =========================================================
   TYPOGRAPHY
   ========================================================= */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.05;
  margin: 0 0 0.4em;
  color: var(--text);
}
h1 { font-size: clamp(3rem, 8vw, 6.5rem); font-weight: 500; }
h2 { font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 500; }
h3 { font-size: clamp(1.4rem, 2vw, 1.7rem); font-weight: 500; line-height: 1.2; }
h4 { font-size: 1rem; }

.italic { font-style: italic; }
.serif  { font-family: var(--display); }

/* Editorial gold inline — used inside large titles */
.text-gold {
  color: var(--gold-warm);
  background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 50%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

p { margin: 0 0 1rem; color: var(--text-2); }
strong { color: var(--text); font-weight: 600; }

/* Roman numeral marker — used as the visual anchor of each section */
.numeral {
  display: block;
  font-family: var(--display-caps);
  font-weight: 600;
  font-size: clamp(1.5rem, 2vw, 1.8rem);
  letter-spacing: 0.4em;
  color: var(--gold);
  margin-bottom: 12px;
}
.numeral::after {
  content: "·";
  display: inline-block;
  margin-left: 12px;
  color: var(--gold-deep);
}

/* "All-caps editorial label" — used for section eyebrows */
.label {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--display-caps);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
}
.label::before, .label::after {
  content: "";
  width: 32px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.label::after { background: linear-gradient(90deg, var(--gold), transparent); }
.label--center { justify-content: center; }

/* Horizontal ornamental divider with diamond center */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 36px auto;
  color: var(--gold);
}
.ornament span {
  height: 1px;
  width: 80px;
  background: linear-gradient(90deg, transparent, var(--gold-deep), var(--gold), var(--gold-deep), transparent);
}
.ornament::before, .ornament::after {
  content: "";
  width: 4px; height: 4px;
  background: var(--gold);
  transform: rotate(45deg);
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  font-family: var(--display-caps);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: all .25s var(--ease);
  position: relative;
  background: transparent;
}
.btn--sm { padding: 11px 22px; font-size: 0.7rem; }

.btn--gold {
  background: linear-gradient(180deg, var(--gold-pale) 0%, var(--gold-bright) 50%, var(--gold-warm) 100%);
  color: #14100a;
  border-color: var(--gold-bright);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    0 12px 30px -12px var(--gold-glow);
}
.btn--gold:hover {
  background: linear-gradient(180deg, #fbe4a3 0%, var(--gold-pale) 50%, var(--gold-bright) 100%);
  color: #0a0805;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    0 16px 38px -10px var(--gold-glow);
}

.btn--outline {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line-2);
}
.btn--outline:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
}

/* GIVE — crimson wax-seal · primary visual peak */
.btn--give {
  background: linear-gradient(180deg, #a82838 0%, #7a1f2b 60%, #5a141d 100%);
  color: var(--gold-pale);
  border: 1px solid #5a141d;
  font-weight: 700;
  padding-left: 30px;
  padding-right: 30px;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 200, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 12px 30px -10px rgba(139, 30, 43, 0.55);
  position: relative;
}
.btn--give::before {
  content: "✦";
  font-size: 0.9em;
  color: var(--gold-bright);
  margin-right: 6px;
  line-height: 1;
  transform: translateY(-1px);
  display: inline-block;
}
.btn--give:hover {
  background: linear-gradient(180deg, #c0334a 0%, #a82838 60%, #7a1f2b 100%);
  color: #fff5e0;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 200, 0.32),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 16px 38px -10px rgba(168, 40, 56, 0.7);
  transform: translateY(-1px);
}
.btn--give.btn--sm { padding-left: 18px; padding-right: 18px; }

/* Frame — alternate gold CTA, inked dark interior with double-rule */
.btn--frame {
  background: linear-gradient(180deg, #18170f 0%, #0f0e0a 100%);
  color: var(--gold-bright);
  border: 1px solid var(--gold);
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(227, 184, 93, 0.12),
    0 10px 26px -10px rgba(0, 0, 0, 0.7);
}
.btn--frame::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid var(--gold-deep);
  pointer-events: none;
  opacity: 0.5;
  transition: opacity .25s var(--ease);
}
.btn--frame:hover {
  background: linear-gradient(180deg, #221f15 0%, #15130d 100%);
  color: var(--gold-pale);
  border-color: var(--gold-bright);
  box-shadow:
    inset 0 1px 0 rgba(227, 184, 93, 0.2),
    0 14px 32px -10px var(--gold-glow);
}
.btn--frame:hover::after { opacity: 0.8; }

.btn--block { width: 100%; }

/* Link arrow (used inline) */
.arrow-link {
  font-family: var(--display-caps);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-bright);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}
.arrow-link::after {
  content: "";
  width: 28px; height: 1px;
  background: var(--gold);
  transition: width .25s var(--ease);
}
.arrow-link:hover { color: var(--gold-pale); }
.arrow-link:hover::after { width: 44px; }

/* =========================================================
   HEADER
   ========================================================= */
/* Announcement bar — pulsing gold dot + censorship line */
.announce {
  background: linear-gradient(90deg, rgba(201, 150, 42, 0.08), rgba(139, 30, 43, 0.06));
  border-bottom: 1px solid var(--line);
  font-family: var(--body);
  font-size: 0.85rem;
  color: var(--text-2);
}
.announce__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 24px;
  text-align: center;
  max-width: var(--container);
  margin: 0 auto;
}
.announce p { margin: 0; color: var(--text-2); }
.announce a {
  color: var(--gold-bright);
  font-weight: 600;
  margin-left: 4px;
  transition: color .2s var(--ease);
}
.announce a:hover { color: var(--gold-pale); }
.announce__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px var(--gold-glow);
  animation: announce-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes announce-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.85); }
}

.site-header {
  position: absolute;
  top: 30px; left: 0; right: 0;
  z-index: 50;
  transition: background .3s var(--ease), border-color .3s var(--ease), top .3s var(--ease), padding .3s var(--ease);
}
.site-header.is-stuck {
  position: fixed;
  top: 0;
  background: rgba(6, 6, 10, 0.85);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 18px 32px;
  gap: 24px;
}
.site-header.is-stuck .site-header__inner { padding: 12px 32px; }

.brand {
  display: inline-flex;
  align-items: center;
}
.brand__logo {
  height: 46px;
  width: auto;
  transition: height .3s var(--ease);
}
.site-header.is-stuck .brand__logo { height: 32px; }

.nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
}
.nav a {
  font-family: var(--display-caps);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-2);
  position: relative;
  padding: 4px 0;
}
.nav a:hover { color: var(--gold-bright); }
.nav a::after {
  content: "";
  position: absolute;
  left: 50%; right: 50%;
  bottom: -6px;
  height: 1px;
  background: var(--gold);
  transition: all .25s var(--ease);
}
.nav a:hover::after { left: 0; right: 0; }

.site-header__cta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: 1px solid var(--line-2);
  padding: 10px;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 0;
}
.nav-toggle span {
  width: 18px; height: 1.5px;
  background: var(--gold);
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Top-sheet mobile menu — drops from the top, covers ~half the screen.
   Sized to its content (no scroll); spacing kept tight so all links +
   CTA fit within roughly half the viewport. */
.mobile-nav {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 70;
  padding: 12px 26px 20px;
  background: rgba(6, 6, 10, 0.98);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line-2);
  box-shadow: 0 26px 60px -22px rgba(0, 0, 0, 0.85);
  gap: 0;
  animation: mobilenav-drop .28s var(--ease);
}
@keyframes mobilenav-drop {
  from { transform: translateY(-14px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.mobile-nav[hidden] { display: none; }
.mobile-nav a {
  font-family: var(--display-caps);
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
}
.mobile-nav__cta {
  display: flex;
  gap: 12px;
  margin-top: 14px;
}
.mobile-nav__cta .btn { flex: 1; }

/* Header row (Menu · Close) pinned to the top of the sheet */
.mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-2);
}
.mobile-nav__label {
  font-family: var(--display-caps);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* Clearly-labeled close button */
.mobile-nav__close {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--display-caps);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 7px 13px;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  color: var(--gold);
  cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.mobile-nav__close span { font-size: 1.15rem; line-height: 1; }
.mobile-nav__close:hover {
  color: var(--gold-bright);
  border-color: var(--gold);
  background: var(--gold-soft);
}

/* Dimmed backdrop behind the top sheet — tap to close */
.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 65;
  background: rgba(6, 6, 10, 0.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.mobile-nav-backdrop[hidden] { display: none; }

/* =========================================================
   HERO — cinematic title card
   ========================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 120px 24px 80px;
  overflow: hidden;
  isolation: isolate;
}
.hero__sky {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(227, 184, 93, 0.18), transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(139, 30, 43, 0.08), transparent 60%),
    linear-gradient(180deg, #08080d 0%, #0c0a08 50%, #060508 100%);
}
.hero__rays {
  position: absolute;
  inset: -10% 0 0 0;
  z-index: -2;
  background:
    conic-gradient(from 180deg at 50% 0%,
      transparent 0deg,
      transparent 80deg,
      rgba(227, 184, 93, 0.05) 95deg,
      transparent 110deg,
      transparent 130deg,
      rgba(227, 184, 93, 0.04) 145deg,
      transparent 160deg,
      transparent 200deg,
      rgba(227, 184, 93, 0.04) 215deg,
      transparent 230deg,
      transparent 250deg,
      rgba(227, 184, 93, 0.05) 265deg,
      transparent 280deg,
      transparent 360deg);
  mask-image: linear-gradient(180deg, black 0%, transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, black 0%, transparent 70%);
  opacity: 0.6;
}
.hero__vignette {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 70% 70% at 50% 60%, transparent 30%, rgba(0, 0, 0, 0.75) 100%);
  pointer-events: none;
}

.hero__inner {
  max-width: 900px;
  position: relative;
}

.hero__ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: var(--gold);
  font-size: 0.9rem;
  margin-bottom: 36px;
  opacity: 0.85;
}
.hero__ornament span {
  width: 70px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.hero__logo-stage {
  position: relative;
  margin-bottom: 28px;
  display: inline-block;
}
.hero__logo-stage::before {
  content: "";
  position: absolute;
  inset: -25% -8%;
  background: radial-gradient(ellipse at center, rgba(227, 184, 93, 0.28), transparent 65%);
  filter: blur(50px);
  z-index: -1;
}
.hero__logo {
  max-width: min(820px, 90vw);
  width: 100%;
  height: auto;
}

.hero__motto {
  margin: 0 0 44px;
  font-family: var(--display-caps);
  font-size: 0.72rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
}

.hero__title {
  font-size: clamp(2.6rem, 7vw, 6rem);
  font-weight: 400;
  line-height: 1;
  margin: 0 0 24px;
  letter-spacing: -0.015em;
}
.hero__title .italic {
  font-style: italic;
  color: var(--gold-bright);
  font-weight: 400;
}

.hero__sub {
  max-width: 600px;
  margin: 0 auto 48px;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: var(--text-2);
  line-height: 1.65;
}

.hero__form {
  max-width: 540px;
  margin: 0 auto;
}

.hero__counts {
  margin-top: 40px;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-family: var(--display-caps);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-3);
}
.hero__counts strong {
  color: var(--gold-bright);
  font-weight: 600;
  letter-spacing: 0.12em;
}
.hero__counts .dot {
  width: 3px; height: 3px;
  background: var(--gold-deep);
  border-radius: 50%;
}

.hero__scroll {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--display-caps);
  font-size: 0.65rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--text-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  animation: float 2.4s ease-in-out infinite;
}
.hero__scroll::after {
  content: "";
  width: 1px;
  height: 28px;
  background: linear-gradient(180deg, var(--gold), transparent);
}
@keyframes float {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 6px); }
}

/* =========================================================
   INPUT / SIGNUP — proclamation card
   ========================================================= */
.signup {
  position: relative;
}
.signup__field {
  display: flex;
  align-items: stretch;
  background: rgba(15, 14, 10, 0.7);
  border: 1px solid var(--line-2);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.signup__field:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 150, 42, 0.18);
}
.signup__field input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  padding: 16px 22px;
  outline: none;
  letter-spacing: 0.02em;
}
.signup__field input::placeholder { color: var(--text-3); }
.signup__field .btn {
  border: 0;
  padding-left: 28px;
  padding-right: 28px;
}
.signup__note {
  margin: 16px 0 0;
  font-family: var(--display-caps);
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: center;
}
.signup__note strong { color: var(--gold); letter-spacing: 0.15em; }

/* ---------------------------------------------------------------
   Kit embed — site overrides
   Hide the "Built with Kit" badge that Kit's embed appends below
   every form. Kept here (not in Kit's Custom CSS panel) so it's
   git-tracked and applies to every embed sitewide automatically.
   --------------------------------------------------------------- */
.formkit-form .formkit-powered-by-convertkit-container,
.formkit-form .formkit-powered-by-convertkit {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  visibility: hidden !important;
}

/* Kit reserves 56px of top padding for a form header/image we don't use,
   leaving empty white space above the email field. Tighten it sitewide. */
.formkit-form[data-style="clean"],
.formkit-form [data-style="clean"] {
  padding-top: 10px !important;
}

/* =========================================================
   MARQUEE TICKER
   ========================================================= */
.marquee {
  position: relative;
  overflow: hidden;
  background: #000;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
  display: flex;
  gap: 80px;
}
.marquee__track {
  display: flex;
  gap: 0;
  white-space: nowrap;
  animation: scroll 50s linear infinite;
  will-change: transform;
  font-family: var(--display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-style: italic;
  color: var(--gold-deep);
}
.marquee__track span { display: inline-flex; align-items: center; gap: 80px; padding-right: 80px; }
.marquee__track .star {
  color: var(--gold);
  font-style: normal;
  font-size: 0.6em;
}
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* =========================================================
   SECTIONS — editorial chapters
   ========================================================= */
.chapter {
  padding: clamp(80px, 12vw, 100px) 0;
  position: relative;
}
.chapter--warm { background: var(--bg-warm); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.chapter-head {
  margin-bottom: 0px;
  position: relative;
}
.chapter-head--center { text-align: center; max-width: 760px; margin-left: auto; margin-right: auto; }
.chapter-head__title {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  margin: 0 0 18px;
  line-height: 1.04;
}
.chapter-head__lede {
  font-family: var(--display);
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  font-style: italic;
  color: var(--text-2);
  line-height: 1.5;
  max-width: 620px;
}
.chapter-head--center .chapter-head__lede { margin-left: auto; margin-right: auto; }

/* =========================================================
   MISSION CHAPTER — editorial split with drop cap
   ========================================================= */
.mission {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(40px, 7vw, 100px);
  align-items: center;
}
.mission__visual {
  position: relative;
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(227, 184, 93, 0.2), transparent 60%),
    linear-gradient(180deg, #1a1610 0%, #0a0806 100%);
  border: 1px solid var(--line);
  overflow: hidden;
}
.mission__visual::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid var(--gold-deep);
  pointer-events: none;
}
.mission__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 250'><g stroke='%23c9962a' stroke-width='0.4' fill='none' opacity='0.5'><path d='M100 30 L100 220'/><path d='M70 70 Q100 80 130 70'/><path d='M70 100 Q100 110 130 100'/><circle cx='100' cy='40' r='3' fill='%23c9962a'/><circle cx='100' cy='40' r='8'/><path d='M85 50 L115 50'/><path d='M80 60 L120 60'/></g></svg>");
  background-size: 60%;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.7;
}
.mission__visual-label {
  position: absolute;
  bottom: 32px;
  left: 0; right: 0;
  text-align: center;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--gold-bright);
  z-index: 2;
}

.mission__copy .numeral { margin-bottom: 18px; }
.mission__copy h2 {
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  margin-bottom: 32px;
  line-height: 1.04;
}
.mission__copy h2 .italic { color: var(--gold-bright); }
.mission__copy p {
  font-family: var(--display);
  font-size: clamp(1.1rem, 1.4vw, 1.25rem);
  line-height: 1.65;
  color: var(--text);
}
.mission__copy .dropcap::first-letter {
  font-family: var(--display);
  font-weight: 600;
  font-size: 5.5em;
  float: left;
  line-height: 0.85;
  margin: 0.05em 0.1em 0 0;
  color: var(--gold-warm);
  font-style: normal;
}
.mission__copy .btn { margin-top: 20px; }

/* =========================================================
   TOPICS — heraldic crests
   ========================================================= */
.topics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.crest {
  position: relative;
  padding: 50px 36px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
  background: var(--bg);
  transition: background .3s var(--ease);
  overflow: hidden;
}
.crest::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top, var(--gold-soft), transparent 60%);
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.crest:hover { background: var(--bg-warm); }
.crest:hover::before { opacity: 1; }
.crest > * { position: relative; z-index: 1; }

.crest__shield {
  width: 72px;
  height: 86px;
  margin: 0 auto 22px;
  position: relative;
  display: grid;
  place-items: center;
  color: var(--gold);
}
.crest__shield svg { width: 100%; height: 100%; }
.crest__shield .crest__num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--display-caps);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--gold-bright);
  margin-top: -4px;
}
.crest h3 {
  font-size: 1.5rem;
  margin-bottom: 10px;
  letter-spacing: 0.005em;
}
.crest p {
  font-family: var(--display);
  font-size: 1.02rem;
  font-style: italic;
  color: var(--text-2);
  margin: 0 0 20px;
  line-height: 1.5;
}
.crest__count {
  font-family: var(--display-caps);
  font-size: 0.68rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-deep);
  display: inline-block;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* =========================================================
   THE GUIDE — lead magnet (book mockup + signup)
   ========================================================= */
.guide {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 7vw, 110px);
  align-items: center;
}
.guide__visual {
  position: relative;
  perspective: 1400px;
  display: grid;
  place-items: center;
}
.book {
  position: relative;
  width: clamp(240px, 32vw, 360px);
  aspect-ratio: 3 / 4.2;
  transform: rotateY(-14deg) rotateX(4deg);
  transition: transform .5s var(--ease);
  transform-style: preserve-3d;
}
.guide__visual:hover .book { transform: rotateY(-8deg) rotateX(2deg); }
.book__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid var(--gold-deep);
  display: block;
}
.book__cover {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(227, 184, 93, 0.18), transparent 60%),
    linear-gradient(180deg, #15110a 0%, #080604 100%);
  border: 1px solid var(--gold-deep);
  padding: 44px 36px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow:
    -12px 0 0 -7px rgba(0,0,0,0.4),
    14px 24px 70px -10px rgba(0,0,0,0.9),
    inset 4px 0 0 rgba(255,255,255,0.04),
    inset 0 0 40px rgba(201, 150, 42, 0.06);
}
.book__cover::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid var(--gold-deep);
  pointer-events: none;
}
.book__cover::after {
  content: "";
  position: absolute;
  left: 8px; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--gold-deep), transparent);
}
.book__crest {
  width: 56px;
  height: 64px;
  margin: 8px auto 0;
  color: var(--gold);
}
.book__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.7rem;
  line-height: 1.1;
  color: var(--gold-bright);
  text-align: center;
  margin: auto 0;
}
.book__title em {
  display: block;
  font-style: italic;
  font-weight: 400;
  font-size: 0.85em;
  margin-top: 8px;
  color: var(--gold-pale);
}
.book__brand {
  font-family: var(--display-caps);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-align: center;
  color: var(--gold-deep);
}

.guide__copy h2 {
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  margin-bottom: 20px;
  line-height: 1.05;
}
.guide__copy h2 .italic { color: var(--gold-bright); }
.guide__copy > p {
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  font-style: italic;
  color: var(--text-2);
  margin-bottom: 28px;
  line-height: 1.5;
}
.guide__list {
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
}
.guide__list li {
  padding: 14px 0 14px 32px;
  position: relative;
  border-bottom: 1px solid var(--line);
  font-size: 1rem;
  color: var(--text);
}
.guide__list li:last-child { border-bottom: 0; }
.guide__list li::before {
  content: "✦";
  position: absolute;
  left: 0; top: 14px;
  color: var(--gold);
  font-size: 0.9rem;
}

/* =========================================================
   ARTICLES — editorial magazine grid
   ========================================================= */
.editorial {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: start;
}
.feature {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
}
.feature__thumb {
  aspect-ratio: 16 / 11;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(227, 184, 93, 0.32), transparent 55%),
    linear-gradient(135deg, rgba(139, 30, 43, 0.12), transparent 50%),
    linear-gradient(180deg, #1a160e 0%, #0a0805 100%);
  position: relative;
  border-bottom: 1px solid var(--gold-deep);
}
.feature__tag {
  position: absolute;
  top: 22px; left: 22px;
  font-family: var(--display-caps);
  font-size: 0.68rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(6,6,10,0.65);
  border: 1px solid var(--gold-deep);
  padding: 6px 14px;
}
.feature__body { padding: 36px 36px 40px; }
.feature__num {
  display: block;
  font-family: var(--display-caps);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  color: var(--gold-deep);
  margin-bottom: 14px;
}
.feature h3 {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  margin: 0 0 14px;
  line-height: 1.1;
}
.feature p {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--text-2);
  margin: 0 0 22px;
}
.feature__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--display-caps);
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-3);
}
.feature__meta .dot { width: 3px; height: 3px; background: var(--gold-deep); border-radius: 50%; }

.story-list { display: grid; gap: 0; }
.story {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  align-items: start;
  gap: 24px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left .25s var(--ease);
}
.story:first-child { border-top: 1px solid var(--line); }
.story:hover { padding-left: 8px; }
.story__num {
  font-family: var(--display);
  font-style: italic;
  font-size: 2rem;
  color: var(--gold);
  line-height: 1;
  font-weight: 400;
}
.story__tag {
  display: block;
  font-family: var(--display-caps);
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 6px;
}
.story h4 {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.25;
  margin: 0 0 6px;
  color: var(--text);
}
.story__meta {
  font-family: var(--display-caps);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
  padding-top: 12px;
}

/* =========================================================
   VIDEO GALLERY
   ========================================================= */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.cine {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #0a0805;
  display: block;
}
.cine--wide { aspect-ratio: 16 / 10; grid-column: span 2; }
.cine__thumb {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(227, 184, 93, 0.35), transparent 55%),
    linear-gradient(135deg, rgba(139, 30, 43, 0.1), transparent 60%),
    linear-gradient(180deg, #1a1610 0%, #08060c 100%);
  transition: transform .6s var(--ease);
}
.cine:hover .cine__thumb { transform: scale(1.06); }
.cine__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.85) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
  gap: 12px;
}
.cine__tag {
  font-family: var(--display-caps);
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  align-self: flex-start;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--gold-deep);
}
.cine__title {
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--text);
  margin: 0;
}
.cine--wide .cine__title { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.cine__time {
  position: absolute;
  top: 22px; right: 22px;
  font-family: var(--display-caps);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--gold-pale);
  background: rgba(0,0,0,0.7);
  padding: 4px 10px;
}
.cine__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 70px; height: 70px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--gold-bright);
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.cine:hover .cine__play {
  transform: translate(-50%, -50%) scale(1.08);
  background: rgba(201, 150, 42, 0.18);
}
.cine__play svg { width: 24px; height: 24px; margin-left: 4px; }

/* =========================================================
   FELLOWSHIP — community
   ========================================================= */
.fellowship {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.fellow {
  background: var(--bg);
  padding: 40px 28px;
  text-align: center;
  transition: background .3s var(--ease);
}
.fellow:hover { background: var(--bg-warm); }
.fellow__icon {
  width: 48px; height: 48px;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
  color: var(--gold-bright);
  border: 1px solid var(--gold-deep);
  border-radius: 50%;
}
.fellow__icon svg { width: 22px; height: 22px; }
.fellow h3 {
  font-size: 1.4rem;
  margin-bottom: 8px;
}
.fellow p {
  font-family: var(--display);
  font-style: italic;
  font-size: 0.96rem;
  color: var(--text-2);
  margin: 0 0 18px;
}
.fellow .arrow-link { font-size: 0.66rem; }
.fellow .arrow-link::after { width: 20px; }

/* Single-card variant — centered, fixed width */
.fellowship--single {
  grid-template-columns: 1fr;
  max-width: 340px;
  margin: 0 auto;
  background: none;
  border: 1px solid var(--line);
}

/* =========================================================
   PRAYER-WALL CTA BAND
   ========================================================= */
.wall-cta {
  position: relative;
  padding: clamp(64px, 9vw, 110px) 24px;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg-warm);
  border-top: 1px solid var(--line);
}
.wall-cta__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 70% 70% at 50% 0%, rgba(227, 184, 93, 0.12), transparent 62%),
    radial-gradient(ellipse 50% 60% at 50% 100%, rgba(139, 30, 43, 0.08), transparent 60%);
}
.wall-cta__inner { max-width: 680px; margin: 0 auto; }
.wall-cta__icon {
  width: 60px; height: 60px;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
  color: var(--gold-bright);
  border: 1px solid var(--gold-deep);
  border-radius: 50%;
}
.wall-cta__icon svg { width: 30px; height: 30px; }
.wall-cta h2 {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  margin: 16px 0 18px;
  line-height: 1.05;
}
.wall-cta h2 .italic { color: var(--gold-bright); }
.wall-cta__lede {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: var(--text-2);
  margin: 0 auto 32px;
  max-width: 560px;
}
.wall-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

/* =========================================================
   SUPPORT THE MISSION
   ========================================================= */
.support {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 60px;
  align-items: start;
}
.support__copy h2 {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  margin-bottom: 24px;
}
.support__copy h2 .italic { color: var(--gold-bright); }
.support__copy > p {
  font-family: var(--display);
  font-size: clamp(1.1rem, 1.4vw, 1.25rem);
  font-style: italic;
  color: var(--text);
  margin-bottom: 28px;
  line-height: 1.55;
}
.support__methods {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 28px 0 16px;
  background: var(--line);
  border: 1px solid var(--line);
}
.support-method {
  padding: 18px;
  background: var(--bg);
  text-align: center;
  font-family: var(--display-caps);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.support-method:hover { background: var(--bg-warm); color: var(--gold-bright); }
.support__fine {
  font-family: var(--display-caps);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-3);
}
.support__card {
  position: relative;
  padding: 44px 36px 36px;
  background: linear-gradient(180deg, var(--surface), var(--bg));
  border: 1px solid var(--line-2);
}
.support__card::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid var(--gold-deep);
  pointer-events: none;
}
.support__card h3 {
  font-size: 1.8rem;
  margin-bottom: 18px;
  text-align: center;
}
.support__card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
}
.support__card li {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  font-style: italic;
  color: var(--text);
}
.support__card li:last-child { border-bottom: 0; }
.support__card .btn { margin-top: 8px; }

/* Merch tiles inside support */
.wares {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  margin-top: 80px;
}
.ware {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  display: block;
  background: var(--bg-warm);
}
.ware__thumb {
  position: absolute;
  inset: 0;
  transition: transform .5s var(--ease);
}
.ware__thumb--apparel {
  background:
    radial-gradient(ellipse at 30% 50%, rgba(227, 184, 93, 0.22), transparent 60%),
    linear-gradient(135deg, #1a1610, #06050a);
}
.ware__thumb--coffee {
  background: #08060c;
}
.ware__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ware:hover .ware__thumb { transform: scale(1.05); }
.ware__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 36px;
  gap: 8px;
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.85) 100%);
}
.ware__label {
  font-family: var(--display-caps);
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
}
.ware__title {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--text);
  margin: 0;
}
.ware__title em { font-style: italic; color: var(--gold-bright); }
.ware__cta {
  margin-top: 6px;
  font-family: var(--display-caps);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-bright);
}

/* =========================================================
   FINAL CTA
   ========================================================= */
.decree {
  position: relative;
  padding: clamp(100px, 14vw, 180px) 24px;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  border-top: 1px solid var(--line);
}
.decree__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(227, 184, 93, 0.22), transparent 60%),
    radial-gradient(ellipse 60% 60% at 50% 100%, rgba(139, 30, 43, 0.1), transparent 60%),
    linear-gradient(180deg, #0a0806 0%, #060508 100%);
}
.decree__inner { max-width: 760px; margin: 0 auto; }
.decree h2 {
  font-size: clamp(2.4rem, 5.5vw, 4.5rem);
  margin: 30px 0 18px;
  line-height: 1.02;
}
.decree h2 .italic { color: var(--gold-bright); }
.decree p {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: var(--text-2);
  margin-bottom: 36px;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background: #000;
  border-top: 1px solid var(--line);
}
.site-footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 2fr;
  gap: 80px;
  padding: 90px 32px 50px;
}
.site-footer__logo {
  height: 54px;
  width: auto;
  margin-bottom: 24px;
}
.site-footer__brand p {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--text-2);
  max-width: 380px;
  margin-bottom: 28px;
  line-height: 1.55;
}
.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  width: fit-content;
}
.socials a {
  width: 44px; height: 44px;
  border-right: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--text-2);
  transition: color .25s var(--ease), background .25s var(--ease);
}
.socials a:first-child { border-left: 1px solid var(--line); }
.socials a:hover { color: var(--gold-bright); background: var(--bg-warm); }
.socials svg { width: 17px; height: 17px; }

.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.site-footer__cols h4 {
  font-family: var(--display-caps);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.site-footer__cols a {
  display: block;
  font-family: var(--display);
  font-size: 1rem;
  color: var(--text-2);
  padding: 7px 0;
}
.site-footer__cols a:hover { color: var(--gold-bright); }

.site-footer__bottom {
  border-top: 1px solid var(--line);
  padding: 26px 0;
}
.site-footer__bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--display-caps);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-3);
}
.site-footer__bottom-inner p { margin: 0; }

/* =========================================================
   POPUP
   ========================================================= */
.popup {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
}
.popup[hidden] { display: none; }
.popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: fadeIn .25s var(--ease);
}
.popup__card {
  position: relative;
  max-width: 560px;
  width: 100%;
  padding: 56px 44px 44px;
  background: linear-gradient(180deg, #15110a 0%, #0a0805 100%);
  border: 1px solid var(--gold-deep);
  text-align: center;
  animation: popIn .3s var(--ease);
}
.popup__card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid var(--gold-deep);
  pointer-events: none;
}
.popup__close {
  position: absolute;
  top: 18px; right: 18px;
  width: 38px; height: 38px;
  background: transparent;
  border: 1px solid var(--line-2);
  display: grid;
  place-items: center;
  color: var(--text-2);
  z-index: 2;
}
.popup__close:hover { color: var(--gold-bright); border-color: var(--gold); }
.popup__close svg { width: 16px; height: 16px; }
.popup__card h3 {
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  margin: 14px 0 12px;
}
.popup__card h3 .italic { color: var(--gold-bright); }
.popup__sub {
  font-family: var(--display);
  font-style: italic;
  color: var(--text-2);
  margin-bottom: 28px;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn  { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal].in { opacity: 1; transform: translateY(0); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
  .nav { display: none; }
  .nav-toggle { display: flex; }
  .site-header__inner { grid-template-columns: 1fr auto; }
  .site-header__cta .btn--outline,
  .site-header__cta .btn--frame { display: none; }

  .mission { grid-template-columns: 1fr; gap: 50px; }
  .mission__visual { aspect-ratio: 16/9; order: -1; }
  .mission__visual::after { background-size: 30%; }
  .topics { grid-template-columns: repeat(2, 1fr); }
  .guide { grid-template-columns: 1fr; gap: 60px; }
  .guide__visual { order: -1; }
  .editorial { grid-template-columns: 1fr; gap: 24px; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .cine--wide { grid-column: span 2; }
  .fellowship { grid-template-columns: repeat(2, 1fr); }
  .support { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .wares { grid-template-columns: 1fr; }

  .site-footer__inner { grid-template-columns: 1fr; gap: 50px; padding: 70px 32px 40px; }
}

@media (max-width: 720px) {
  .container { padding: 0 22px; }
  .announce { font-size: 0.78rem; }
  .announce__inner { padding: 8px 18px; }

  .site-header { top: 58px; }
  .site-header__inner { padding: 14px 22px; }
  /* Subscribe/Give live in the drawer on mobile — keep the header row to search + menu so it fits */
  .site-header__cta .btn--gold,
  .site-header__cta .btn--give { display: none; }
  .brand__logo { height: 42px; }
  .site-header.is-stuck .brand__logo { height: 32px; }

  .topics { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .cine--wide { grid-column: span 1; aspect-ratio: 4/5; }
  .fellowship { grid-template-columns: 1fr; }
  .support__methods { grid-template-columns: repeat(2, 1fr); }
  .site-footer__cols { grid-template-columns: repeat(2, 1fr); }

  /* Keep all 8 social icons on one row — equal cells fill the width so none wrap */
  .socials { width: 100%; flex-wrap: nowrap; }
  .socials a { flex: 1; width: auto; height: 40px; }

  .hero { padding-top: 140px; }
  .hero__est { margin-bottom: 32px; }
  .hero__est::before, .hero__est::after { width: 36px; }
  .hero__title { font-size: clamp(2.2rem, 8vw, 3.4rem); }
  .signup__field { flex-direction: column; gap: 1px; background: transparent; border: 0; }
  .signup__field input { background: rgba(15,14,10,0.7); border: 1px solid var(--line-2); }
  .signup__field:focus-within { box-shadow: none; }
  .signup__field .btn { padding: 18px; }

  .story { grid-template-columns: auto 1fr; }
  .story__meta { grid-column: 1 / -1; padding-top: 8px; padding-left: 84px; }

  .marquee__track { font-size: 1.5rem; gap: 0; }
  .marquee__track span { gap: 50px; padding-right: 50px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .marquee__track { animation: none; }
}

/* =====================================================================
   SUBPAGES — Start · About · Article
   ===================================================================== */

/* Subpage hero */
.subhero {
  position: relative;
  padding: clamp(140px, 16vw, 200px) 24px clamp(60px, 8vw, 100px);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.subhero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(227, 184, 93, 0.18), transparent 60%),
    radial-gradient(ellipse 50% 50% at 50% 100%, rgba(139, 30, 43, 0.06), transparent 60%),
    linear-gradient(180deg, #0a0806 0%, #060508 100%);
}
.subhero__inner {
  max-width: 820px;
  margin: 0 auto;
  position: relative;
}
.subhero h1 {
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  margin: 18px 0 22px;
  line-height: 1.04;
}
.subhero h1 .italic { color: var(--gold-bright); }
.subhero__lede {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
  color: var(--text-2);
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.55;
}

/* Breadcrumbs */
.crumbs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  font-family: var(--display-caps);
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 30px;
}
.crumbs a { color: var(--gold); }
.crumbs a:hover { color: var(--gold-bright); }
.crumbs__sep { color: var(--line-2); }

/* ============ PATH — Roman-numeral step cards ============ */
.path {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin: 0;
  background: var(--line);
  border: 1px solid var(--line);
}
.path-step {
  position: relative;
  background: var(--bg);
  padding: 56px 36px 44px;
  text-align: center;
  transition: background .3s var(--ease);
}
.path-step:hover { background: var(--bg-warm); }
.path-step__num {
  width: 64px; height: 64px;
  margin: 0 auto 26px;
  border: 1px solid var(--gold-deep);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--display-caps);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--gold-bright);
  position: relative;
}
.path-step__num::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--gold-deep);
  border-radius: 50%;
  opacity: 0.5;
}
.path-step h3 {
  font-size: 1.5rem;
  margin-bottom: 12px;
}
.path-step h3 .italic { color: var(--gold-bright); }
.path-step p {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--text-2);
  margin-bottom: 24px;
  line-height: 1.5;
}

/* ============ READING LIST — editorial index ============ */
.reading-list {
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.reading-list a {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: baseline;
  gap: 32px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left .25s var(--ease), background .25s var(--ease);
}
.reading-list a:hover {
  padding-left: 12px;
  background: linear-gradient(90deg, var(--gold-soft), transparent);
}
.reading-list__num {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 2.4rem;
  color: var(--gold);
  line-height: 1;
}
.reading-list__title {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
}
.reading-list__meta {
  font-family: var(--display-caps);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}

/* ============ ABOUT — editorial split ============ */
.editorial-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(50px, 7vw, 100px);
  align-items: start;
}
.editorial-split .numeral { margin-bottom: 18px; }
.editorial-split h2 {
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  margin-bottom: 24px;
  line-height: 1.05;
}
.editorial-split h2 .italic { color: var(--gold-bright); }
.editorial-split p {
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.65;
  color: var(--text);
}

/* Values — minimal framed tiles */
.values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.value {
  padding: 44px 32px;
  background: var(--bg);
  text-align: center;
  transition: background .3s var(--ease);
}
.value:hover { background: var(--bg-warm); }
.value__num {
  font-family: var(--display-caps);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  color: var(--gold-deep);
  margin-bottom: 14px;
}
.value h3 {
  font-size: 1.4rem;
  margin-bottom: 12px;
}
.value h3 .italic { color: var(--gold-bright); }
.value p {
  font-family: var(--display);
  font-style: italic;
  font-size: 0.98rem;
  color: var(--text-2);
  margin: 0;
}

/* Statement of Faith — illuminated cards */
.faith {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-width: 820px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
}
.faith-article {
  position: relative;
  padding: 36px 0 36px 48px;
  border-bottom: 1px solid var(--line);
}
.faith-article::before {
  content: "";
  position: absolute;
  left: 0; top: 44px;
  width: 24px; height: 1px;
  background: var(--gold);
}
.faith-article__num {
  font-family: var(--display-caps);
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
  display: block;
}
.faith-article h3 {
  font-size: 1.5rem;
  margin-bottom: 12px;
}
.faith-article h3 .italic { color: var(--gold-bright); }
.faith-article p {
  font-family: var(--display);
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 14px;
}
.faith-article__ref {
  font-family: var(--display-caps);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* Statement of Faith — link CTA */
.chapter-head__cta { margin-top: 32px; }

/* The Christian King — profile */
.profile {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) 1.15fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}
.profile__media {
  margin: 0;
  position: relative;
}
.profile__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
}
.profile__media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px rgba(227, 184, 93, 0.12);
  pointer-events: none;
}
.profile__body p {
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.7;
  color: var(--text);
  margin: 0 0 20px;
}
.profile__body p:last-child { margin-bottom: 0; }

/* ============ ARTICLE PAGE ============ */
.article-header {
  position: relative;
  padding: clamp(140px, 16vw, 200px) 24px clamp(40px, 5vw, 60px);
  text-align: center;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
}
.article-header__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 50% at 50% 30%, rgba(227, 184, 93, 0.15), transparent 60%),
    linear-gradient(180deg, #0a0806 0%, #06050a 100%);
}
.article-header__inner { max-width: 860px; margin: 0 auto; }
.article-header__tag {
  display: inline-block;
  font-family: var(--display-caps);
  font-size: 0.68rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold-deep);
  padding: 8px 18px;
  margin-bottom: 28px;
}
/* Wrapper for one-or-more category chips on an article. Holds the bottom
   spacing so each chip can sit margin-free in a centered, wrapping row. */
.article-header__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 28px;
}
.article-header__tags .article-header__tag { margin-bottom: 0; }
a.article-header__tag {
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
a.article-header__tag:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
  background: rgba(227, 184, 93, 0.08);
}
.article-header h1 {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  margin-bottom: 30px;
  line-height: 1.06;
}
.article-header h1 .italic { color: var(--gold-bright); }
.article-header__meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  font-family: var(--display-caps);
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-3);
  flex-wrap: wrap;
}
.article-header__meta strong { color: var(--gold); font-weight: 600; letter-spacing: 0.18em; }
.article-header__meta .sep { width: 4px; height: 4px; background: var(--gold-deep); border-radius: 50%; }

.article-hero-frame {
  position: relative;
  max-width: 1100px;
  margin: 60px auto 0;
  padding: 0 24px;
}
.article-hero-frame__inner {
  aspect-ratio: 21 / 9;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(227, 184, 93, 0.32), transparent 55%),
    linear-gradient(135deg, rgba(139, 30, 43, 0.12), transparent 50%),
    linear-gradient(180deg, #1a1610 0%, #0a0805 100%);
  border: 1px solid var(--gold-deep);
  position: relative;
}
.article-hero-frame__inner::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid var(--gold-deep);
  opacity: 0.5;
  pointer-events: none;
}

/* Prose */
.prose {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(34px, 4.5vw, 0px) 0px clamp(60px, 8vw, 100px);
  /* edit */
  /* padding: clamp(34px, 4.5vw, 54px) 24px clamp(60px, 8vw, 100px); */
  font-family: var(--display);
  font-size: 1.3rem;
  line-height: 1.75;
  color: var(--text);
}
.prose > * + * { margin-top: 1.3em; }
.prose p { color: var(--text); }
/* Safeguard: a paragraph that escapes a definition box keeps a leftover
   definition__* class as a direct child of .prose. The .definition-scoped
   rules below no longer match it, so it falls back to body text — this makes
   that explicit and immune to any future stray class. */
.prose > p { font-size: 1.3rem; }
.prose .dropcap::first-letter {
  font-family: var(--display);
  font-weight: 600;
  font-size: 5em;
  float: left;
  line-height: 0.85;
  margin: 0.05em 0.12em 0 0;
  color: var(--gold-warm);
  font-style: normal;
}
.prose h2 {
  font-family: var(--display);
  font-size: 1.9rem;
  font-weight: 500;
  /* margin-top: 2.4em; */
  margin-bottom: 0.5em;
  line-height: 1.15;
}
.prose h2 .italic { color: var(--gold-bright); }
.prose h2::before {
  content: "";
  display: block;
  width: 60px;
  height: 1px;
  background: var(--gold);
  margin-bottom: 24px;
}
/* Subheading — set in Cinzel caps with a short gold tick so it reads as a
   structural heading, not inline gold-highlighted serif text (which shares the
   body font + gold colour). Distinct from h2 on every axis: caps vs serif,
   smaller, and a leading inline rule rather than h2's rule-above. */
.prose h3 {
  font-family: var(--display-caps);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-top: 2em;
  margin-bottom: 0.7em;
  line-height: 1.35;
}
.prose h3::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 1px;
  vertical-align: middle;
  background: var(--gold);
  margin-right: 14px;
  margin-bottom: 4px;
}
.prose h3 .italic { color: var(--gold-bright); font-style: italic; }
.prose a {
  color: var(--gold-bright);
  border-bottom: 1px solid rgba(227, 184, 93, 0.4);
}
.prose a:hover { border-bottom-color: var(--gold-bright); }
.prose strong { color: var(--text); font-weight: 600; font-family: inherit; }
.prose .italic { font-style: italic; color: var(--gold-bright); }
.prose .gold { color: var(--gold-bright); }
/* Combined inline styles: bold/italic nested inside a gold span, an italic-gold
   span, or a link keep that gold colour instead of reverting to body text. */
.prose .gold strong, .prose .gold em,
.prose .italic strong, .prose .italic em,
.prose a strong, .prose a em { color: inherit; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li { margin-bottom: 0.5em; color: var(--text); }

.scripture {
  margin: 2.4em -24px;
  padding: 36px 40px;
  background: linear-gradient(135deg, rgba(227, 184, 93, 0.06), transparent 70%);
  border-top: 1px solid var(--gold-deep);
  border-bottom: 1px solid var(--gold-deep);
  font-family: var(--display);
  text-align: center;
}
.scripture__verse {
  font-size: 1.45rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--text);
  margin: 0 0 18px;
  letter-spacing: -0.005em;
}
.scripture__verse::before { content: "“"; color: var(--gold); margin-right: 4px; font-size: 1.4em; line-height: 0; vertical-align: -0.3em; }
.scripture__verse::after  { content: "”"; color: var(--gold); margin-left: 0; font-size: 1.4em; line-height: 0; vertical-align: -0.3em; }
.scripture__ref {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: var(--display-caps);
  text-transform: uppercase;
  color: var(--gold);
}
.scripture__ref-cite {
  font-size: 1.02rem;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--gold);
}
.scripture__ref-version {
  font-size: 0.62rem;
  letter-spacing: 0.34em;
  font-weight: 600;
  color: var(--gold-deep);
}

.callout {
  margin: 2em 0;
  padding: 26px 32px;
  background: var(--surface);
  border-left: 3px solid var(--gold);
}
.callout p {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--text-2);
}
.callout strong { color: var(--gold-bright); font-family: var(--display); font-style: normal; }
.callout .callout__heading {
  margin: 0 0 8px;
  font-family: var(--display-caps);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-bright);
  font-style: normal;
  font-weight: 600;
}

/* Definition box — word + lexicon source + meaning. Distinct from .callout:
   a full thin gold border with a small "Definition" eyebrow label. */
.definition {
  margin: 2.2em 0;
  padding: 24px 30px;
  background: linear-gradient(135deg, rgba(227, 184, 93, 0.05), transparent 70%), var(--surface);
  border: 1px solid var(--gold-deep);
}
.definition::before {
  content: "Definition";
  display: block;
  font-family: var(--display-caps);
  font-size: 0.6rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
  opacity: 0.85;
}
.definition .definition__word {
  margin: 0 0 4px;
  font-family: var(--display);
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text);
}
.definition .definition__word .italic { color: var(--gold-bright); font-style: italic; }
.definition .definition__source {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--gold-bright);
  line-height: 1.2;
}
.definition .definition__text {
  margin: 0;
  font-family: var(--display);
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--text-2);
}
/* Second and later lexicon entries get a hairline divider above their name. */
.definition .definition__word + .definition__source,
.definition .definition__text + .definition__source {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--gold-deep);
}
/* Editor-only "+ Add lexicon" control is stripped on save; hide it if it ever
   slips through to a published page. */
.definition__add { display: none; }

/* Expandable "Details" bar — supplementary content tucked away until the reader
   clicks it. Native <details>; collapsed by default on the live page (the editor
   strips the `open` attribute on save). Deliberately subtle: a thin gold rule top
   and bottom with a small uppercase label and a chevron that turns when opened. */
.expand {
  margin: 1.8em 0;
  border-top: 1px solid var(--gold-deep);
  border-bottom: 1px solid var(--gold-deep);
}
.expand > .expand__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 10px;
  font-family: var(--display-caps);
  font-size: 0.75rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-bright);
  transition: color .2s var(--ease);
}
.expand > .expand__summary::-webkit-details-marker { display: none; }
.expand > .expand__summary::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .2s var(--ease);
}
.expand[open] > .expand__summary::before { transform: rotate(45deg); }
.expand > .expand__summary:hover { color: var(--gold); }
.expand__body { padding: 2px 2px 20px; }
.expand__body > :first-child { margin-top: 0; }
.expand__body > :last-child { margin-bottom: 0; }

/* Inline signup inside article */
.inline-signup {
  max-width: 720px;
  margin: clamp(50px, 7vw, 80px) auto;
  padding: 50px 40px 44px;
  position: relative;
  background: linear-gradient(180deg, #15110a 0%, #0a0805 100%);
  border: 1px solid var(--gold-deep);
  text-align: center;
}
.inline-signup::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid var(--gold-deep);
  opacity: 0.5;
  pointer-events: none;
}
.inline-signup > * { position: relative; }
.inline-signup h3 {
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  margin: 12px 0 12px;
}
.inline-signup h3 .italic { color: var(--gold-bright); }
.inline-signup p {
  font-family: var(--display);
  font-style: italic;
  color: var(--text-2);
  margin-bottom: 28px;
  font-size: 1.05rem;
}

/* Inline donate block at end of articles */
.inline-donate {
  max-width: 720px;
  margin: clamp(8px, 1.5vw, 20px) auto clamp(50px, 7vw, 80px);
  padding: 44px 40px 40px;
  position: relative;
  background: linear-gradient(180deg, #15110a 0%, #0a0805 100%);
  border: 1px solid var(--gold-deep);
  text-align: center;
}
.inline-donate::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid var(--gold-deep);
  opacity: 0.5;
  pointer-events: none;
}
.inline-donate > * { position: relative; }
.inline-donate h3 {
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  margin: 12px 0 12px;
}
.inline-donate h3 .italic { color: var(--gold-bright); }
.inline-donate p {
  font-family: var(--display);
  font-style: italic;
  color: var(--text-2);
  margin-bottom: 28px;
  font-size: 1.05rem;
}
.inline-donate .btn--give {
  padding-top: 16px;
  padding-bottom: 16px;
}

/* Tighten the prose-to-donate gap by trimming the prose's bottom padding when followed by the donate block */
.prose:has(+ .inline-donate) { padding-bottom: clamp(20px, 3vw, 40px); }

/* Related articles */
.related-section {
  background: var(--bg-warm);
  padding: clamp(80px, 10vw, 120px) 0;
  border-top: 1px solid var(--line);
}
.related-section h2 {
  text-align: center;
  margin-bottom: 60px;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
}
.related-section h2 .italic { color: var(--gold-bright); }

/* Responsive */
@media (max-width: 1024px) {
  .path { grid-template-columns: 1fr; }
  .editorial-split { grid-template-columns: 1fr; gap: 40px; }
  .profile { grid-template-columns: 1fr; gap: 36px; max-width: 600px; }
  .profile__media { max-width: 420px; margin: 0 auto; }
  .values { grid-template-columns: 1fr; }
  .reading-list a { grid-template-columns: 56px 1fr auto; gap: 22px; }
  .reading-list__num { font-size: 1.9rem; }
}
@media (max-width: 720px) {
  .reading-list a {
    grid-template-columns: 50px 1fr;
    padding: 22px 0;
  }
  .reading-list__meta { grid-column: 2; padding-top: 4px; }
  .article-header__meta { gap: 8px; font-size: 0.6rem; }
  .scripture { margin: 1.8em -22px; padding: 28px 24px; }
  .scripture__verse { font-size: 1.2rem; }
  .inline-signup { padding: 36px 24px 32px; }
  .inline-donate { padding: 32px 24px 28px; }
  .prose { font-size: 1.14rem; }
  .prose .dropcap::first-letter { font-size: 4em; }
  .faith-article { padding-left: 32px; }
  .faith-article::before { top: 40px; width: 16px; }
}

/* =====================================================================
   TOPIC LANDING PAGE
   ===================================================================== */

/* Asymmetric subhero with topic crest */
.topic-hero {
  position: relative;
  padding: clamp(140px, 16vw, 200px) 0 clamp(60px, 7vw, 90px);
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--line);
}
.topic-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 50% at 30% 30%, rgba(227, 184, 93, 0.22), transparent 60%),
    radial-gradient(ellipse 50% 50% at 90% 100%, rgba(139, 30, 43, 0.08), transparent 60%),
    linear-gradient(180deg, #0a0806 0%, #060508 100%);
}
.topic-hero__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  position: relative;
}
.topic-hero__crest {
  position: relative;
  width: clamp(120px, 14vw, 180px);
  aspect-ratio: 60 / 72;
  flex-shrink: 0;
  color: var(--gold);
  filter: drop-shadow(0 12px 40px rgba(201, 150, 42, 0.25));
}
.topic-hero__crest svg { width: 100%; height: 100%; }
.topic-hero__crest-num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--display-caps);
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--gold-bright);
  padding-bottom: 8%;
}
.topic-hero__content { min-width: 0; }
.topic-hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  margin: 14px 0 22px;
  line-height: 1.02;
}
.topic-hero h1 .italic { color: var(--gold-bright); }
.topic-hero__lede {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--text-2);
  max-width: 600px;
  line-height: 1.55;
  margin: 0 0 28px;
}
.topic-hero__stats {
  display: flex;
  align-items: center;
  gap: 24px;
  font-family: var(--display-caps);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-3);
  padding-top: 24px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.topic-hero__stats strong {
  color: var(--gold-bright);
  font-weight: 600;
  letter-spacing: 0.12em;
  font-family: var(--display-caps);
}
.topic-hero__stats .sep { width: 3px; height: 3px; background: var(--gold-deep); border-radius: 50%; }

/* Position statement */
.position {
  padding: clamp(70px, 9vw, 110px) 0;
  background: var(--bg-warm);
  border-bottom: 1px solid var(--line);
}
.position__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.position p {
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  font-style: italic;
  line-height: 1.55;
  color: var(--text);
  margin: 0;
}
.position p em {
  font-style: normal;
  color: var(--gold-bright);
}
.position .ornament { margin: 28px auto 0; }

/* Filter chip bar */
.filter-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(6, 6, 10, 0.92);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
  margin-bottom: 60px;
}
.filter-bar__inner {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.filter-bar__label {
  font-family: var(--display-caps);
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-3);
  padding-right: 8px;
  border-right: 1px solid var(--line);
  margin-right: 6px;
}
.chip {
  font-family: var(--display-caps);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--line-2);
  padding: 9px 16px;
  cursor: pointer;
  transition: all .2s var(--ease);
  white-space: nowrap;
}
.chip:hover {
  border-color: var(--gold-deep);
  color: var(--gold-bright);
}
.chip.is-active {
  background: linear-gradient(180deg, var(--gold-warm) 0%, var(--gold) 70%, var(--gold-deep) 100%);
  border-color: var(--gold);
  color: #1a1208;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 6px 18px -6px var(--gold-glow);
}
.chip__count {
  margin-left: 8px;
  opacity: 0.5;
  letter-spacing: 0.05em;
}
.chip.is-active .chip__count { opacity: 0.7; }

/* Library grid */
.library {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.entry {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .35s var(--ease), border-color .25s var(--ease);
  position: relative;
}
.entry:hover {
  transform: translateY(-4px);
  border-color: var(--gold-deep);
}
.entry[hidden] { display: none; }
.entry--feature {
  grid-column: span 2;
  grid-row: span 2;
}
.entry__thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(227, 184, 93, 0.28), transparent 55%),
    linear-gradient(135deg, rgba(139, 30, 43, 0.1), transparent 50%),
    linear-gradient(180deg, #1a1610 0%, #08060c 100%);
  border-bottom: 1px solid var(--gold-deep);
}
.entry--feature .entry__thumb { aspect-ratio: 16 / 9; }
.entry__num {
  position: absolute;
  bottom: 18px;
  right: 22px;
  font-family: var(--display);
  font-style: italic;
  font-size: 2.4rem;
  color: var(--gold);
  line-height: 1;
  opacity: 0.85;
}
.entry__tag {
  position: absolute;
  top: 18px;
  left: 18px;
  font-family: var(--display-caps);
  font-size: 0.64rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(6, 6, 10, 0.7);
  border: 1px solid var(--gold-deep);
  padding: 5px 12px;
}
.entry__body {
  padding: 26px 28px 30px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.entry--feature .entry__body { padding: 36px 36px 40px; }
.entry__label {
  font-family: var(--display-caps);
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 12px;
}
.entry h3 {
  font-size: 1.3rem;
  margin: 0 0 12px;
  line-height: 1.2;
}
.entry--feature h3 {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1.08;
  margin-bottom: 16px;
}
.entry h3 .italic { color: var(--gold-bright); }
.entry__excerpt {
  font-family: var(--display);
  font-style: italic;
  font-size: 1rem;
  color: var(--text-2);
  margin: 0 0 18px;
  line-height: 1.5;
  flex: 1;
}
.entry--feature .entry__excerpt { font-size: 1.1rem; }
.entry__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--display-caps);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-3);
  padding-top: 14px;
  border-top: 1px solid var(--line);
  margin-top: auto;
}
.entry__meta .sep { width: 3px; height: 3px; background: var(--gold-deep); border-radius: 50%; }

.library-empty {
  display: none;
  text-align: center;
  padding: 80px 24px;
  grid-column: 1 / -1;
  color: var(--text-3);
  font-family: var(--display);
  font-style: italic;
  font-size: 1.2rem;
}
.library-empty.is-shown { display: block; }

.library-loading {
  text-align: center;
  padding: 80px 24px;
  font-family: var(--display-caps);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
}
.library-loading::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--gold-glow);
  margin-right: 10px;
  vertical-align: middle;
  animation: announce-pulse 1.6s ease-in-out infinite;
}

/* Filter bar with embedded search field (articles index) */
.filter-bar--search .filter-bar__inner {
  flex-wrap: wrap;
  gap: 12px;
}
.filter-bar__search {
  flex: 1 1 280px;
  display: flex;
  align-items: center;
  background: rgba(15, 14, 10, 0.7);
  border: 1px solid var(--line-2);
  padding: 0 14px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.filter-bar__search:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 150, 42, 0.15);
}
.filter-bar__search svg {
  width: 14px; height: 14px;
  color: var(--gold);
  flex-shrink: 0;
}
.filter-bar__search input {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--text);
  font-family: var(--body);
  font-size: 0.92rem;
  padding: 10px 12px;
  outline: none;
}
.filter-bar__search input::placeholder { color: var(--text-3); }
.filter-bar__sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display-caps);
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-3);
}
.filter-bar__sort select {
  background: rgba(15, 14, 10, 0.7);
  color: var(--gold-bright);
  border: 1px solid var(--line-2);
  font-family: var(--display-caps);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 8px 28px 8px 12px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23c9962a' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.filter-bar__sort select:focus { border-color: var(--gold-deep); }

/* Group by category — used when sort = "by category" */
.library-section {
  margin-bottom: 56px;
}
.library-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.library-section__title {
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 500;
  margin: 0;
  color: var(--text);
}
.library-section__title .italic { color: var(--gold-bright); }
.library-section__count {
  font-family: var(--display-caps);
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-3);
}

@media (max-width: 720px) {
  .filter-bar--search .filter-bar__inner {
    padding: 0 22px;
    overflow: visible;
    flex-wrap: wrap;
  }
  .filter-bar__search { flex-basis: 100%; }
  .filter-bar__sort { flex-basis: 100%; justify-content: space-between; }
}

/* Related topics row */
.related-topics {
  padding: clamp(70px, 9vw, 110px) 0;
  background: var(--bg-warm);
  border-top: 1px solid var(--line);
}
.related-topics__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--line);
  border: 1px solid var(--line);
}
.related-topic {
  background: var(--bg);
  padding: 36px 28px;
  text-align: center;
  transition: background .25s var(--ease);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.related-topic + .related-topic { border-left: 1px solid var(--line); }
.related-topic:hover { background: var(--bg-warm); }
.related-topic__shield {
  width: 44px;
  height: 52px;
  color: var(--gold);
}
.related-topic h3 {
  font-size: 1.2rem;
  margin: 0;
}
.related-topic span {
  font-family: var(--display-caps);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

@media (max-width: 1024px) {
  .topic-hero__inner { grid-template-columns: 1fr; text-align: center; }
  .topic-hero__crest { margin: 0 auto; }
  .topic-hero__lede { margin-left: auto; margin-right: auto; }
  .topic-hero__stats { justify-content: center; }
  .library { grid-template-columns: repeat(2, 1fr); }
  .entry--feature { grid-column: span 2; grid-row: span 1; }
  .related-topics__grid { grid-template-columns: repeat(2, 1fr); }
  .related-topic + .related-topic { border-left: 0; }
  .related-topic:nth-child(odd):not(:first-child) { border-left: 0; }
}
@media (max-width: 720px) {
  .library { grid-template-columns: 1fr; }
  .entry--feature { grid-column: span 1; }
  .filter-bar__inner { justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; padding: 0 22px; }
  .filter-bar__label { display: none; }
  .related-topics__grid { grid-template-columns: 1fr; }
  .topic-hero h1 { font-size: clamp(2rem, 8vw, 3rem); }
}

/* =====================================================================
   CONTACT PAGE
   ===================================================================== */

.contact-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}

.contact-form-wrap .numeral { margin-bottom: 14px; }
.contact-form-wrap > h2 {
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  margin-bottom: 16px;
  line-height: 1.06;
}
.contact-form-wrap > h2 .italic { color: var(--gold-bright); }
.contact-form-wrap > p {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: var(--text-2);
  margin-bottom: 40px;
  line-height: 1.55;
}

.contact-form,
.pw-form {
  display: grid;
  gap: 22px;
  max-width: none;
  margin: 0;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-field label {
  font-family: var(--display-caps);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  background: rgba(15, 14, 10, 0.7);
  border: 1px solid var(--line-2);
  color: var(--text);
  font-family: var(--body);
  font-size: 1rem;
  padding: 14px 16px;
  outline: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  border-radius: 0;
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--text-3); }
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 150, 42, 0.18);
}
.form-field textarea {
  resize: vertical;
  min-height: 160px;
  font-family: var(--body);
  line-height: 1.6;
}

/* Custom select arrow */
.select-wrap { position: relative; }
.select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.form-field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 40px;
  cursor: pointer;
}
.form-field select option {
  background: var(--bg);
  color: var(--text);
}

.contact-form .btn,
.pw-form .btn { margin-top: 14px; padding-top: 18px; padding-bottom: 18px; }
.contact-form__note {
  font-family: var(--display-caps);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: center;
  margin: 0;
}

/* Sidebar */
.contact-sidebar {
  position: sticky;
  top: 110px;
}
.contact-sidebar__inner {
  position: relative;
  padding: 44px 36px 40px;
  background: linear-gradient(180deg, var(--surface), var(--bg));
  border: 1px solid var(--line-2);
}
.contact-sidebar__inner::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid var(--gold-deep);
  pointer-events: none;
}
.contact-sidebar h3 {
  font-size: 0.7rem;
  font-family: var(--display-caps);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin: 0 0 14px;
}
.contact-sidebar h3:not(:first-of-type) {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.contact-sidebar p {
  font-family: var(--display);
  font-size: 1.02rem;
  font-style: italic;
  color: var(--text-2);
  margin: 0 0 8px;
  line-height: 1.5;
}
.contact-sidebar strong {
  color: var(--gold-bright);
  font-style: normal;
  font-family: var(--body);
  font-weight: 600;
}
.contact-emails {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}
.contact-emails li {
  font-family: var(--display);
  font-size: 0.98rem;
  color: var(--text-2);
}
.contact-emails__label {
  display: block;
  font-family: var(--display-caps);
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 4px;
  font-style: normal;
}
.contact-emails a {
  color: var(--gold-bright);
  border-bottom: 1px solid rgba(227, 184, 93, 0.3);
}
.contact-emails a:hover {
  color: var(--gold-pale);
  border-bottom-color: var(--gold-bright);
}

/* Channel cards */
.contact-channels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.channel-card {
  background: var(--bg);
  padding: 40px 28px;
  text-align: center;
  transition: background .3s var(--ease);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.channel-card:hover { background: var(--bg-warm); }
.channel-card__icon {
  width: 52px; height: 52px;
  border: 1px solid var(--gold-deep);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--gold-bright);
}
.channel-card__icon svg { width: 22px; height: 22px; }
.channel-card h3 {
  font-size: 1.3rem;
  margin: 0;
}
.channel-card h3 .italic { color: var(--gold-bright); }
.channel-card p {
  font-family: var(--display);
  font-style: italic;
  font-size: 0.96rem;
  color: var(--text-2);
  margin: 0;
  flex: 1;
}
.channel-card__email {
  font-family: var(--display-caps);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 4px;
  width: 100%;
  word-break: break-all;
}

/* Before you write */
.before-write {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
}
.before-link {
  display: block;
  padding: 28px 30px;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color .25s var(--ease), transform .25s var(--ease), background .25s var(--ease);
}
.before-link:hover {
  border-color: var(--gold-deep);
  background: var(--bg-warm);
  transform: translateY(-2px);
}
.before-link h3 {
  font-size: 1.2rem;
  margin: 0 0 10px;
}
.before-link h3 .italic { color: var(--gold-bright); }
.before-link p {
  font-family: var(--display);
  font-size: 0.96rem;
  font-style: italic;
  color: var(--text-2);
  margin: 0 0 14px;
  line-height: 1.5;
}
.before-link .arrow-link { font-size: 0.66rem; }
.before-link .arrow-link::after { width: 20px; }

@media (max-width: 1024px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-sidebar { position: static; }
  .contact-channels { grid-template-columns: repeat(2, 1fr); }
  .before-write { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .form-row { grid-template-columns: 1fr; }
  .contact-channels { grid-template-columns: 1fr; }
  .contact-sidebar__inner { padding: 32px 24px 28px; }
}

/* =====================================================================
   LINK HUB  (contact page — Linktree-style channel directory)
   ===================================================================== */
.contact-solo {
  max-width: 660px;
  margin: 0 auto;
}
.contact-solo .contact-form { max-width: none; }

.link-hub {
  max-width: 940px;
  margin: 0 auto;
}
.link-hub__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.link-hub__group-head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 52px 0 24px;
}
.link-hub__group-head .label { margin: 0; white-space: nowrap; }
.link-hub__group-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-2), transparent);
}

.link-row {
  --brand: var(--gold);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.link-row:hover {
  border-color: var(--brand);
  background: var(--bg-warm);
  transform: translateY(-2px);
}
.link-row__icon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  color: var(--brand);
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.02);
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.link-row:hover .link-row__icon {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 14%, transparent);
}
.link-row__icon svg { width: 21px; height: 21px; }
.link-row__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.link-row__name {
  font-family: var(--display-caps);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 600;
}
.link-row__handle {
  font-family: var(--display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--text-2);
  line-height: 1.2;
}
.link-row__arrow {
  flex: 0 0 auto;
  color: var(--text-3);
  font-size: 1.1rem;
  line-height: 1;
  transition: color .25s var(--ease), transform .25s var(--ease);
}
.link-row:hover .link-row__arrow {
  color: var(--brand);
  transform: translateX(4px);
}

@media (max-width: 720px) {
  .link-hub__grid { grid-template-columns: 1fr; }
  .link-hub__group-head { margin: 40px 0 20px; }
  .link-row { padding: 14px 16px; gap: 14px; }
  .link-row__icon { width: 42px; height: 42px; }
}

/* =====================================================================
   ARTICLE SIGNATURE — editable end-note that blends into the article body
   ===================================================================== */
/* The signature flows straight on from the article body — no rule, no break —
   so it reads as the article's closing paragraphs. It inherits the same .prose
   typography (display face, 1.3rem, 1.75 line-height) and paragraph rhythm. */
.article-signature {
  max-width: 720px;
  margin: 1.3em auto 0;            /* exactly one paragraph-gap below the body */
  padding: 0 0 clamp(10px, 8vw, 10px);
  font-family: var(--display);
  font-size: 1.3rem;
  line-height: 1.75;
  color: var(--text);
}
.article-signature > * + * { margin-top: 1.3em; }
.article-signature p { margin: 0; color: var(--text); }
/* Toolbar inline colours inside the signature (mirrors .prose) so the Gold and
   Italic-gold buttons render in the preview and the published article. Bold/
   italic nested in a gold span (or link) inherit the gold instead of body text. */
.article-signature .gold { color: var(--gold-bright); }
.article-signature .italic { font-style: italic; color: var(--gold-bright); }
.article-signature .gold strong, .article-signature .gold em,
.article-signature .italic strong, .article-signature .italic em,
.article-signature a strong, .article-signature a em { color: inherit; }
.article-signature a {
  color: var(--gold-bright);
  border-bottom: 1px solid rgba(227, 184, 93, 0.4);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.article-signature a:hover {
  color: var(--gold-bright);
  border-bottom-color: var(--gold-bright);
}
/* Closing sign-off line (e.g. "— The Christian King"). */
.article-signature p:last-child {
  margin-top: 1.5em;
  font-style: italic;
  color: var(--gold-bright);
}

/* When a signature follows the body, drop the body's large end padding so the
   two render as one continuous column (the signature carries the end padding). */
.prose:has(+ .article-signature) { padding-bottom: 0; }

/* In the dashboard preview the signature sits alone on the admin surface — no
   body above it, so no leading gap and no trailing padding. */
.nl-preview .article-signature { margin-top: 0; padding-bottom: 0; }

/* =====================================================================
   CONTACT FORM — validation states & success panel
   ===================================================================== */
.form-field input.is-error,
.form-field textarea.is-error,
.form-field select.is-error {
  border-color: var(--crimson);
  box-shadow: 0 0 0 3px rgba(139, 30, 43, 0.22);
}
.field-error {
  display: block;
  margin-top: 7px;
  font-size: 0.82rem;
  line-height: 1.35;
  color: #e8808d;
}
.form-banner {
  margin: 0 0 4px;
  padding: 13px 18px;
  font-size: 0.92rem;
  line-height: 1.4;
  border: 1px solid var(--crimson);
  background: rgba(139, 30, 43, 0.14);
  color: #f0b3ba;
}

.contact-success {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  padding: 60px 36px;
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, var(--surface), var(--bg));
}
.contact-success__mark {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  margin: 0 auto 22px;
  border: 1px solid var(--gold-deep);
  border-radius: 50%;
  color: var(--gold-bright);
  font-size: 1.7rem;
}
.contact-success h3 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin: 0 0 12px;
}
.contact-success p {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.12rem;
  color: var(--text-2);
  margin: 0 auto;
  max-width: 420px;
  line-height: 1.5;
}

/* =====================================================================
   SEARCH RESULTS PAGE
   ===================================================================== */

/* Search hero — extends subhero */
.search-hero {
  position: relative;
  padding: clamp(140px, 16vw, 200px) 0 clamp(40px, 6vw, 70px);
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--line);
}
.search-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(227, 184, 93, 0.18), transparent 60%),
    linear-gradient(180deg, #0a0806 0%, #060508 100%);
}
.search-hero__inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.search-hero h1 {
  font-size: clamp(2rem, 5vw, 3.6rem);
  margin: 18px 0 36px;
  line-height: 1.06;
}
.search-hero h1 .italic { color: var(--gold-bright); }
.search-hero h1 .italic::before { content: "“"; opacity: 0.7; }
.search-hero h1 .italic::after  { content: "”"; opacity: 0.7; }

.search-form {
  max-width: 640px;
  margin: 0 auto 24px;
}
.search-field {
  position: relative;
  display: flex;
  align-items: stretch;
  background: rgba(15, 14, 10, 0.75);
  border: 1px solid var(--gold-deep);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.search-field:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 150, 42, 0.18);
}
.search-field__icon {
  display: grid;
  place-items: center;
  padding-left: 22px;
  color: var(--gold);
}
.search-field__icon svg { width: 18px; height: 18px; }
.search-field input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: var(--body);
  font-size: 1.05rem;
  padding: 18px 20px;
  outline: none;
  letter-spacing: 0.005em;
}
.search-field input::placeholder { color: var(--text-3); }
.search-field button { border: 0; }
.search-summary {
  font-family: var(--display-caps);
  font-size: 0.68rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0;
}
.search-summary strong {
  color: var(--gold-bright);
  font-weight: 600;
  letter-spacing: 0.18em;
}
.search-summary .sep {
  display: inline-block;
  width: 3px; height: 3px;
  background: var(--gold-deep);
  border-radius: 50%;
  vertical-align: middle;
  margin: 0 12px;
}

/* Results list */
.results {
  display: grid;
  gap: 0;
  max-width: 880px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
}
.result {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  align-items: start;
  gap: 28px;
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left .25s var(--ease), background .25s var(--ease);
}
.result[hidden] { display: none; }
.result:hover {
  padding-left: 12px;
  background: linear-gradient(90deg, var(--gold-soft), transparent);
}
.result__type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--display-caps);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold-deep);
  padding: 5px 9px 5px 7px;
  white-space: nowrap;
}
.result__type svg { width: 13px; height: 13px; }

.result__body { min-width: 0; }
.result__crumbs {
  display: block;
  font-family: var(--display-caps);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 8px;
}
.result__crumbs a { color: var(--gold); }
.result__crumbs a:hover { color: var(--gold-bright); }
.result__crumbs .sep { opacity: 0.5; margin: 0 6px; }

.result h3 {
  font-family: var(--display);
  font-size: clamp(1.35rem, 2vw, 1.65rem);
  font-weight: 500;
  margin: 0 0 8px;
  line-height: 1.22;
  color: var(--text);
}
.result h3 .italic { color: var(--gold-bright); }
.result h3 a:hover { color: var(--gold-bright); }
.result__excerpt {
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--text-2);
  margin: 0 0 12px;
  line-height: 1.55;
}
.result__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--display-caps);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-3);
}
.result__meta .dot {
  width: 3px; height: 3px; background: var(--gold-deep); border-radius: 50%;
}

.result__aside {
  font-family: var(--display-caps);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
  padding-top: 4px;
}

/* Highlighted match */
.results mark {
  background: rgba(227, 184, 93, 0.15);
  color: var(--gold-pale);
  font-weight: 600;
  padding: 0 3px;
  border-bottom: 1px solid var(--gold);
  border-radius: 0;
}

/* Empty state */
.search-empty {
  display: none;
  text-align: center;
  padding: 80px 24px;
  max-width: 640px;
  margin: 0 auto;
}
.search-empty.is-shown { display: block; }
.search-empty h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  margin-bottom: 16px;
}
.search-empty h2 .italic { color: var(--gold-bright); }
.search-empty p {
  font-family: var(--display);
  font-style: italic;
  color: var(--text-2);
  font-size: 1.1rem;
  margin-bottom: 28px;
}

/* Related searches — gold pill cloud */
.related-searches {
  padding: clamp(50px, 7vw, 80px) 0;
  background: var(--bg-warm);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.related-searches h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  margin-bottom: 8px;
}
.related-searches h2 .italic { color: var(--gold-bright); }
.related-searches p {
  font-family: var(--display);
  font-style: italic;
  color: var(--text-3);
  font-size: 1rem;
  margin-bottom: 32px;
}
.related-cloud {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 720px;
  margin: 0 auto;
}
.related-cloud a {
  font-family: var(--display-caps);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--line-2);
  padding: 9px 16px;
  transition: all .2s var(--ease);
}
.related-cloud a:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
  background: var(--bg-warm);
}

@media (max-width: 720px) {
  .result {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 24px 0;
  }
  .result__aside { padding-top: 0; }
  .search-field input { font-size: 1rem; padding: 14px 16px; }
  .search-field__icon { padding-left: 16px; }
}

/* =====================================================================
   SEARCH TRIGGER + OVERLAY
   ===================================================================== */

/* Icon button in header */
.search-trigger {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--gold-bright);
  cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
  padding: 0;
  flex-shrink: 0;
}
.search-trigger:hover {
  border-color: var(--gold);
  background: rgba(201, 150, 42, 0.06);
  color: var(--gold-pale);
}
.search-trigger svg { width: 15px; height: 15px; }

/* Keyboard hint kbd inside overlay */
.search-trigger__kbd {
  display: inline-block;
  font-family: var(--body);
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-3);
  margin-left: 8px;
  padding: 2px 6px;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  vertical-align: middle;
}

/* Full-screen overlay */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(6, 6, 10, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: clamp(80px, 12vh, 140px) 24px 40px;
  overflow-y: auto;
  animation: searchOverlayFade .2s var(--ease);
}
.search-overlay[hidden] { display: none; }
.search-overlay__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 50% at 50% 30%, rgba(227, 184, 93, 0.12), transparent 60%);
  pointer-events: none;
}
.search-overlay__inner {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  animation: searchOverlaySlide .3s var(--ease);
}
.search-overlay__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--text-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease);
  z-index: 1;
}
.search-overlay__close:hover {
  color: var(--gold-bright);
  border-color: var(--gold);
}
.search-overlay__close svg { width: 16px; height: 16px; }

.search-overlay__label {
  font-family: var(--display-caps);
  font-size: 0.72rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.search-overlay__label::before,
.search-overlay__label::after {
  content: "";
  width: 50px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.search-overlay__label::after {
  background: linear-gradient(90deg, var(--gold), transparent);
}

.search-overlay h2 {
  font-size: clamp(1.8rem, 4.2vw, 3rem);
  margin: 0 0 36px;
  line-height: 1.06;
}
.search-overlay h2 .italic { color: var(--gold-bright); }

.search-overlay__form .search-field {
  border: 1px solid var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 150, 42, 0.12);
}
.search-overlay__form .search-field input {
  padding: 20px 22px;
  font-size: 1.1rem;
}
.search-overlay__hints {
  margin: 36px 0 0;
  font-family: var(--display-caps);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-3);
  line-height: 2.4;
}
.search-overlay__hints span {
  display: inline-block;
  margin-right: 10px;
}
.search-overlay__hints a {
  display: inline-block;
  color: var(--gold-bright);
  border: 1px solid var(--gold-deep);
  padding: 6px 14px;
  margin: 0 4px 8px;
  letter-spacing: 0.22em;
  transition: all .2s var(--ease);
}
.search-overlay__hints a:hover {
  background: rgba(201, 150, 42, 0.08);
  border-color: var(--gold);
  color: var(--gold-pale);
}

@keyframes searchOverlayFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes searchOverlaySlide { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 720px) {
  .search-overlay { padding-top: clamp(60px, 10vh, 100px); }
  .search-overlay__form .search-field input { padding: 16px 18px; font-size: 1rem; }
  .search-overlay__hints a { padding: 5px 10px; font-size: 0.6rem; }
}

/* =====================================================================
   DONATE PAGE
   ===================================================================== */

/* Give card — framed double-border like contact sidebar */
.give-card {
  max-width: 620px;
  margin: 0 auto;
  padding: 50px 44px 44px;
  position: relative;
  background: linear-gradient(180deg, var(--surface), var(--bg));
  border: 1px solid var(--gold-deep);
}
.give-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid var(--gold-deep);
  opacity: 0.5;
  pointer-events: none;
}
.give-card > * { position: relative; }
.give-card__label {
  font-family: var(--display-caps);
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 16px;
  text-align: center;
}

/* Frequency segmented toggle */
.freq-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: rgba(15, 14, 10, 0.6);
  border: 1px solid var(--line-2);
  padding: 4px;
  gap: 4px;
  margin-bottom: 28px;
}
.freq-toggle button {
  padding: 14px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--display-caps);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-2);
  font-weight: 500;
  transition: background .25s var(--ease), color .25s var(--ease), font-weight .25s var(--ease);
}
.freq-toggle button:hover:not(.is-active) { color: var(--gold-bright); }
.freq-toggle button.is-active {
  background: linear-gradient(180deg, var(--gold-warm) 0%, var(--gold) 70%, var(--gold-deep) 100%);
  color: #14100a;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
}

/* Amount grid */
.amount-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
.amount-btn {
  padding: 22px 12px;
  background: rgba(15, 14, 10, 0.5);
  border: 1px solid var(--line-2);
  color: var(--text);
  cursor: pointer;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 500;
  transition: all .2s var(--ease);
}
.amount-btn:hover {
  border-color: var(--gold-deep);
  color: var(--gold-bright);
  background: rgba(15, 14, 10, 0.7);
}
.amount-btn.is-selected {
  border-color: var(--gold);
  color: var(--gold-bright);
  background: rgba(201, 150, 42, 0.1);
  box-shadow: inset 0 0 0 1px var(--gold);
}

/* Custom amount input */
.custom-amount {
  position: relative;
  margin-bottom: 24px;
}
.custom-amount input {
  width: 100%;
  background: rgba(15, 14, 10, 0.5);
  border: 1px solid var(--line-2);
  color: var(--text);
  font-family: var(--body);
  font-size: 1.1rem;
  padding: 16px 18px 16px 38px;
  outline: none;
  transition: border-color .2s var(--ease);
  border-radius: 0;
  text-align: center;
}
.custom-amount input::placeholder { color: var(--text-3); }
.custom-amount input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 150, 42, 0.18);
}
.custom-amount::before {
  content: "$";
  position: absolute;
  top: 50%;
  left: 18px;
  transform: translateY(-50%);
  color: var(--gold);
  font-family: var(--display);
  font-size: 1.3rem;
  pointer-events: none;
}

.give-card .btn { padding-top: 18px; padding-bottom: 18px; }
.give-card__note {
  margin: 18px 0 0;
  font-family: var(--display-caps);
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: center;
}
.give-card__note strong { color: var(--gold); }

/* Payment methods grid */
.methods-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  max-width: 960px;
  margin: 0 auto;
}
.method-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  background: var(--bg);
  text-align: center;
  transition: background .25s var(--ease);
}
.method-tile:hover { background: var(--bg-warm); }
.method-tile__icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--gold-bright);
  transition: color .25s var(--ease);
}
.method-tile__icon svg { width: 32px; height: 32px; }

/* Official brand colours revealed on hover/focus — icons stay gold by default */
.method-tile:hover .method-tile__icon,
.method-tile:focus-visible .method-tile__icon {
  color: var(--brand, var(--gold-bright));
}
.method-tile--stripe  { --brand: #635BFF; }
.method-tile--cashapp { --brand: #00D54B; }
.method-tile--venmo   { --brand: #3D95CE; }
.method-tile--paypal  { --brand: #59B7EA; } /* lighter PayPal blue for dark bg */
.method-tile--zelle   { --brand: #A452F0; } /* lighter Zelle purple for dark bg */
.method-tile--bitcoin { --brand: #F7931A; }
.method-tile--patreon { --brand: #FF424D; }
.method-tile--bmc     { --brand: #FFDD00; }
.method-tile--kofi    { --brand: #FF5E5B; }
.method-tile h3 {
  font-family: var(--display);
  font-size: 1.2rem;
  margin: 0;
  font-weight: 500;
}
.method-tile p {
  font-family: var(--display-caps);
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0;
}

/* Compact variant — square tiles for narrower columns (e.g. index section VII) */
.methods-grid--compact { max-width: none; margin: 28px 0 16px; }
.methods-grid--compact .method-tile { aspect-ratio: 1; padding: 14px 10px; gap: 8px; }
.methods-grid--compact .method-tile__icon { width: 34px; height: 34px; }
.methods-grid--compact .method-tile__icon svg { width: 28px; height: 28px; }
.methods-grid--compact .method-tile h3 { font-size: 1rem; line-height: 1.2; }

.mail-note {
  text-align: center;
  font-family: var(--display);
  font-style: italic;
  font-size: 1rem;
  color: var(--text-2);
  margin: 40px auto 0;
  max-width: 640px;
}
.mail-note strong { color: var(--gold-bright); font-style: normal; font-family: var(--body); font-weight: 600; }

/* Allocation bar */
.allocation {
  max-width: 820px;
  margin: 0 auto 70px;
}
.allocation-bar {
  display: flex;
  height: 44px;
  border: 1px solid var(--gold-deep);
  overflow: hidden;
  margin-bottom: 24px;
}
.allocation-bar > span {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display-caps);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: #14100a;
}
.allocation-bar__production {
  background: linear-gradient(180deg, var(--gold-pale), var(--gold-bright));
  flex: 40;
}
.allocation-bar__research {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  flex: 25;
}
.allocation-bar__hosting {
  background: linear-gradient(180deg, var(--gold), var(--gold-warm));
  flex: 20;
}
.allocation-bar__outreach {
  background: linear-gradient(180deg, var(--gold-warm) 0%, var(--gold-deep) 100%);
  flex: 15;
  color: var(--gold-pale);
}

.allocation-legend {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.allocation-legend > div {
  text-align: center;
}
.allocation-legend strong {
  display: block;
  color: var(--gold-bright);
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: 0;
  margin-bottom: 4px;
  line-height: 1;
}
.allocation-legend span {
  font-family: var(--display-caps);
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* Impact grid */
.impact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.impact-tile {
  position: relative;
  padding: 36px 24px 30px;
  background: var(--surface);
  border: 1px solid var(--line);
  text-align: center;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.impact-tile:hover {
  border-color: var(--gold-deep);
  transform: translateY(-3px);
}
.impact-tile__amount {
  font-family: var(--display);
  font-size: clamp(2.2rem, 3.4vw, 2.8rem);
  font-weight: 500;
  color: var(--gold-bright);
  display: block;
  margin-bottom: 10px;
  line-height: 1;
}
.impact-tile__amount sup {
  font-size: 0.5em;
  vertical-align: 0.85em;
  margin-right: 1px;
  color: var(--gold);
}
.impact-tile h3 {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 500;
  margin: 0 0 8px;
  line-height: 1.25;
}
.impact-tile h3 .italic { color: var(--gold-bright); }
.impact-tile p {
  font-family: var(--display-caps);
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0;
}

/* Other ways to give */
.other-ways {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.other-way {
  background: var(--bg);
  padding: 44px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  transition: background .25s var(--ease);
}
.other-way:hover { background: var(--bg-warm); }
.other-way__icon {
  width: 52px; height: 52px;
  border: 1px solid var(--gold-deep);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--gold-bright);
}
.other-way__icon svg { width: 24px; height: 24px; }
.other-way h3 {
  font-size: 1.4rem;
  margin: 0;
}
.other-way h3 .italic { color: var(--gold-bright); }
.other-way p {
  font-family: var(--display);
  font-style: italic;
  font-size: 1rem;
  color: var(--text-2);
  margin: 0;
  flex: 1;
}
.other-way .arrow-link { font-size: 0.66rem; }
.other-way .arrow-link::after { width: 22px; }

/* FAQ */
.faq {
  max-width: 780px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
}
.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 32px 0;
}
.faq-item h3 {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 500;
  margin: 0 0 14px;
  display: flex;
  align-items: baseline;
  gap: 5px;
  line-height: 1.25;
}
.faq-item h3 .italic { color: var(--gold-bright); }
.faq-item h3::before {
  content: "Q.";
  font-family: var(--display-caps);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 0.32em;
  flex-shrink: 0;
}
.faq-item p {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.08rem;
  color: var(--text);
  margin: 0;
  padding-left: 40px;
  line-height: 1.55;
}
.faq-item p a { color: var(--gold-bright); border-bottom: 1px solid rgba(227, 184, 93, 0.3); }
.faq-item p a:hover { color: var(--gold-pale); }

@media (max-width: 1024px) {
  .impact-grid { grid-template-columns: repeat(2, 1fr); }
  .other-ways { grid-template-columns: 1fr; }
  .allocation-legend { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 720px) {
  .give-card { padding: 36px 24px 30px; }
  .amount-grid { grid-template-columns: repeat(2, 1fr); }
  .methods-grid { grid-template-columns: repeat(2, 1fr); }
  .impact-grid { grid-template-columns: 1fr; }
  .allocation-bar > span { font-size: 0.56rem; letter-spacing: 0.15em; }
  .faq-item p { padding-left: 0; }
  .faq-item h3 { flex-direction: column; gap: 6px; }
}

/* =====================================================================
   ADMIN — login, dashboard, editor
   ===================================================================== */

/* Shared admin body (no public header) */
.admin-body {
  min-height: 100vh;
  min-height: 100svh;
  background: var(--bg);
  /* `clip` (not `hidden`) prevents the body from becoming a scroll container,
     which would break `position: sticky` on the editor toolbar. */
  overflow-x: clip;
}

/* =============== LOGIN =============== */
.login-page {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 40px 24px;
  position: relative;
  isolation: isolate;
}
.login-page__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 50% at 50% 30%, rgba(227, 184, 93, 0.18), transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 100%, rgba(139, 30, 43, 0.08), transparent 60%),
    linear-gradient(180deg, #0a0806 0%, #060508 100%);
}
.login-page__inner {
  width: 100%;
  max-width: 460px;
  text-align: center;
}
.login-page__logo {
  height: 64px;
  width: auto;
  margin: 0 auto 36px;
  display: block;
}
.login-card {
  position: relative;
  padding: 50px 44px 40px;
  background: linear-gradient(180deg, var(--surface), var(--bg));
  border: 1px solid var(--gold-deep);
  text-align: left;
}
.login-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid var(--gold-deep);
  opacity: 0.5;
  pointer-events: none;
}
.login-card > * { position: relative; }
.login-card__label {
  font-family: var(--display-caps);
  font-size: 0.68rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 14px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.login-card__label::before, .login-card__label::after {
  content: ""; width: 30px; height: 1px;
  background: var(--gold); opacity: 0.6;
}
.login-card h1 {
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  margin: 0 0 28px;
  line-height: 1.1;
  text-align: center;
}
.login-card h1 .italic { color: var(--gold-bright); }

.login-card .form-field {
  margin-bottom: 18px;
}
.login-card .form-field input { padding: 14px 16px; }

.login-card__remember {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display-caps);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 8px 0 28px;
  cursor: pointer;
}
.login-card__remember input { accent-color: var(--gold); }

.login-card__error {
  margin: 0 0 18px;
  padding: 12px 16px;
  background: rgba(139, 30, 43, 0.18);
  border: 1px solid var(--crimson);
  color: var(--gold-pale);
  font-family: var(--display-caps);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  display: none;
}
.login-card__error.is-shown { display: block; }

.login-card__hint {
  margin: 18px 0 0;
  text-align: center;
  font-family: var(--display);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--text-3);
}
.login-card__hint code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--gold-bright);
  background: rgba(201, 150, 42, 0.08);
  padding: 2px 8px;
  border: 1px solid var(--gold-deep);
  font-style: normal;
  font-size: 0.85rem;
}
.login-page__foot {
  margin-top: 28px;
  font-family: var(--display-caps);
  font-size: 0.6rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* =============== ADMIN LAYOUT =============== */
.admin {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
  min-height: 100svh;
}

.admin-side {
  background: #000;
  border-right: 1px solid var(--line);
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow-y: auto;
}
.admin-side__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.admin-side__brand img {
  height: 36px;
  width: auto;
}
.admin-side__user {
  padding: 14px 16px;
  background: rgba(15, 14, 10, 0.6);
  border: 1px solid var(--line);
}
.admin-side__user-label {
  display: block;
  font-family: var(--display-caps);
  font-size: 0.58rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 4px;
}
.admin-side__user-name {
  display: block;
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--gold-bright);
  font-weight: 500;
}

.admin-nav {
  display: grid;
  gap: 2px;
}
.admin-nav__heading {
  font-family: var(--display-caps);
  font-size: 0.6rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 12px 4px 8px;
}
.admin-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  font-family: var(--display-caps);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-2);
  border: 1px solid transparent;
  transition: all .2s var(--ease);
}
.admin-nav a:hover {
  color: var(--gold-bright);
  background: rgba(201, 150, 42, 0.06);
}
.admin-nav a.is-active {
  color: var(--gold-bright);
  background: rgba(201, 150, 42, 0.08);
  border-color: var(--gold-deep);
}
.admin-nav svg { width: 16px; height: 16px; flex-shrink: 0; }
.admin-nav__count {
  margin-left: auto;
  font-family: var(--body);
  font-size: 0.65rem;
  color: var(--text-3);
  letter-spacing: 0.04em;
}
.admin-nav a.is-active .admin-nav__count { color: var(--gold); }

.admin-side__foot {
  margin-top: auto;
  display: grid;
  gap: 8px;
}
.admin-side__foot a,
.admin-side__foot button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-family: var(--display-caps);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: left;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.admin-side__foot a:hover,
.admin-side__foot button:hover {
  color: var(--gold-bright);
  border-color: var(--gold-deep);
}
.admin-side__foot svg { width: 14px; height: 14px; }

/* Main content */
.admin-main { background: var(--bg); min-width: 0; }
.admin-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 40px;
  border-bottom: 1px solid var(--line);
  background: rgba(10, 9, 6, 0.5);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.admin-topbar__crumbs {
  font-family: var(--display-caps);
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-3);
}
.admin-topbar__crumbs strong {
  color: var(--gold-bright);
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 500;
  display: block;
  margin-top: 4px;
  letter-spacing: 0;
  text-transform: none;
}
.admin-topbar__actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.admin-content { padding: 36px 40px 80px; }

/* Stat tiles */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: 40px;
}
.stat-tile {
  background: var(--bg);
  padding: 28px 26px;
  transition: background .25s var(--ease);
}
.stat-tile:hover { background: var(--bg-warm); }
.stat-tile__label {
  font-family: var(--display-caps);
  font-size: 0.6rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 10px;
}
.stat-tile__value {
  font-family: var(--display);
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  color: var(--gold-bright);
  font-weight: 500;
  line-height: 1;
  margin: 0 0 6px;
}
.stat-tile__sub {
  font-family: var(--display);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--text-3);
  margin: 0;
}
.stat-tile__label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.stat-tile__edit {
  background: transparent;
  border: 1px solid var(--text-3);
  color: var(--text-3);
  border-radius: 999px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.stat-tile__edit:hover {
  color: var(--gold-bright);
  border-color: var(--gold-bright);
}
.stat-tile__editform {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 6px;
  align-items: center;
}
.stat-tile__editform input[type="number"] {
  flex: 1 1 140px;
  min-width: 120px;
  background: var(--bg);
  border: 1px solid var(--text-3);
  color: var(--text-1);
  font-family: var(--display);
  font-size: 1.1rem;
  padding: 8px 10px;
  border-radius: 2px;
}
.stat-tile__editform input[type="number"]:focus {
  outline: none;
  border-color: var(--gold-bright);
}
.stat-tile__value.is-editing { opacity: 0.4; }

/* Articles table */
.admin-section { margin-bottom: 56px; }
.admin-section__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 18px;
}
.admin-section__title {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 500;
  margin: 0;
  color: var(--text);
}
.admin-section__title .italic { color: var(--gold-bright); }
.admin-section__head .arrow-link { font-size: 0.62rem; }

.articles-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line);
}
.articles-table th {
  font-family: var(--display-caps);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(15, 14, 10, 0.4);
}
.articles-table td {
  padding: 18px 18px;
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  font-size: 1rem;
  color: var(--text);
  vertical-align: middle;
}
.articles-table tr:hover td { background: rgba(201, 150, 42, 0.04); }
.articles-table tr:last-child td { border-bottom: 0; }
.articles-table__title {
  font-weight: 500;
  color: var(--text);
}
.articles-table__title a { color: var(--text); }
.articles-table__title a:hover { color: var(--gold-bright); }
.articles-table__meta {
  font-family: var(--display-caps);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
}
.articles-table__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.articles-table__actions button,
.articles-table__actions a {
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--text-2);
  font-family: var(--display-caps);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 6px 12px;
  cursor: pointer;
  transition: all .2s var(--ease);
}
.articles-table__actions button:hover,
.articles-table__actions a:hover {
  color: var(--gold-bright);
  border-color: var(--gold);
}
.articles-table__actions .danger:hover {
  color: var(--gold-pale);
  border-color: var(--crimson);
  background: rgba(139, 30, 43, 0.18);
}

/* Status badges */
.badge {
  display: inline-block;
  font-family: var(--display-caps);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid;
}
.badge--published {
  color: var(--gold-bright);
  border-color: var(--gold);
  background: rgba(201, 150, 42, 0.08);
}
.badge--draft {
  color: var(--text-3);
  border-color: var(--line-2);
}
.badge--scheduled {
  color: #b08eef;
  border-color: rgba(139, 92, 246, 0.5);
  background: rgba(139, 92, 246, 0.08);
}

/* Empty state */
.admin-empty {
  text-align: center;
  padding: 60px 24px;
  border: 1px dashed var(--line-2);
  color: var(--text-3);
}
.admin-empty h3 {
  font-family: var(--display);
  font-size: 1.4rem;
  margin: 0 0 8px;
  color: var(--text);
}
.admin-empty p {
  font-family: var(--display);
  font-style: italic;
  margin: 0 0 24px;
}

/* Activity feed */
.activity {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
}
.activity__item {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 18px;
  padding: 16px 20px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.activity__item:last-child { border-bottom: 0; }
.activity__when {
  font-family: var(--display-caps);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.activity__text {
  font-family: var(--display);
  color: var(--text);
  font-size: 0.98rem;
}
.activity__text strong { color: var(--gold-bright); font-weight: 500; }
.activity__type {
  font-family: var(--display-caps);
  font-size: 0.56rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 4px 10px;
  border: 1px solid var(--line-2);
}

/* =============== EDITOR =============== */
.editor {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 0;
  min-height: calc(100vh - 60px);
}
.editor-main {
  padding: 40px 50px 80px;
  border-right: 1px solid var(--line);
  min-width: 0;
}
.editor-title {
  width: 100%;
  background: transparent;
  border: 0;
  font-family: var(--display);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 500;
  color: var(--text);
  outline: none;
  padding: 8px 0;
  margin-bottom: 14px;
  line-height: 1.1;
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease);
}
.editor-title:focus { border-bottom-color: var(--gold-deep); }
.editor-title::placeholder { color: var(--text-3); font-style: italic; }

.editor-excerpt {
  width: 100%;
  background: transparent;
  border: 0;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--text-2);
  outline: none;
  resize: none;
  padding: 8px 0;
  margin-bottom: 28px;
  line-height: 1.5;
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease);
}
.editor-excerpt:focus { border-bottom-color: var(--gold-deep); }
.editor-excerpt::placeholder { color: var(--text-3); }

/* WYSIWYG toolbar */
.editor-toolbar {
  position: sticky;
  top: var(--tck-topbar-h, 82px);
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 10px 12px;
  background: rgba(15, 14, 10, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  /* Keep a real bottom border so the box stays closed once the toolbar sticks
     and the body scrolls under it. The -1px margin overlaps the body's top
     border so the two read as a single line while at rest. */
  margin-bottom: -1px;
}
/* Optional two-row layout: each row spans the full toolbar width so the parent
   (still a wrapping flex row) breaks it onto its own line. Toolbars without
   __row children — the page & prayer editors — are unaffected. */
.editor-toolbar__row {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.editor-toolbar__row + .editor-toolbar__row {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.editor-toolbar__group {
  display: flex;
  gap: 2px;
  padding-right: 8px;
  margin-right: 4px;
  border-right: 1px solid var(--line);
}
.editor-toolbar__group:last-child { border-right: 0; padding-right: 0; }
/* A group flagged last-in-row also drops its trailing divider. */
.editor-toolbar__group--row-end { border-right: 0; padding-right: 0; margin-right: 0; }
/* Article editor (two-row toolbar): dissolve the group boxes so every button is a
   direct flex child of its row. The row then wraps button-by-button — left-packed
   at natural width — and a newly added tool flows onto that row's lines. The flat
   page & prayer toolbars (no __row) keep their grouped dividers, unaffected. */
.editor-toolbar__row .editor-toolbar__group { display: contents; }

.tb-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-2);
  padding: 6px 10px;
  cursor: pointer;
  font-family: var(--display-caps);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: all .15s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  font-weight: 600;
}
.tb-btn:hover {
  color: var(--gold-bright);
  background: rgba(201, 150, 42, 0.06);
  border-color: var(--gold-deep);
}
.tb-btn:active { transform: translateY(1px); }
.tb-btn svg { width: 14px; height: 14px; }
.tb-btn--text {
  font-family: var(--display);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  min-width: 32px;
  justify-content: center;
  font-style: normal;
}
.tb-btn--text .italic-mark { font-style: italic; color: var(--gold-bright); }
.tb-btn--text .gold-mark { color: var(--gold-bright); font-weight: 600; }

/* Contenteditable body — looks like the published article */
.editor-body {
  width: 100%;
  /* Match the published article's reading column: 720px text measure (796 outer
     minus the 38px side padding), centred — so line wrapping mirrors the live
     page. The .prose typography below is kept in sync value-for-value. */
  max-width: 796px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  /* Own stacking context so the hover handles (× delete / move arrows) below stay
     contained — they can no longer paint above the sticky toolbar (z-5) or topbar
     (z-10), which sit in an ancestor context. They tuck behind the chrome when a
     block scrolls under it. */
  isolation: isolate;
  background: rgba(10, 9, 6, 0.4);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--display);
  font-size: 1.3rem;
  line-height: 1.75;
  padding: 32px 38px;
  outline: none;
  min-height: 480px;
  transition: border-color .2s var(--ease);
  cursor: text;
}
/* Mirror .prose's flow spacing: a uniform 1.3em gap between consecutive blocks,
   with framed blocks (scripture/callout/etc.) overriding via their own margins. */
.editor-body > * + * { margin-top: 1.3em; }
.editor-body:focus { border-color: var(--gold-deep); }
.editor-body.is-empty::before {
  content: attr(data-placeholder);
  color: var(--text-3);
  font-style: italic;
  position: absolute;
  top: 32px;
  left: 38px;
  pointer-events: none;
}

/* Article element styling inside the editor */
/* No explicit margin — inter-block spacing comes from `.editor-body > * + *`
   above, exactly like `.prose p` on the published page. */
.editor-body p {
  color: var(--text);
}
.editor-body .dropcap::first-letter {
  font-family: var(--display);
  font-weight: 600;
  font-size: 5em;
  float: left;
  line-height: 0.85;
  margin: 0.05em 0.12em 0 0;
  color: var(--gold-warm);
  font-style: normal;
}
.editor-body h2 {
  font-family: var(--display);
  font-size: 1.9rem;
  font-weight: 500;
  margin-bottom: 0.5em;
  line-height: 1.15;
  color: var(--text);
}
.editor-body h2::before {
  content: "";
  display: block;
  width: 60px;
  height: 1px;
  background: var(--gold);
  margin-bottom: 24px;
}
.editor-body h2 .italic { color: var(--gold-bright); font-style: italic; }
.editor-body h3 {
  font-family: var(--display-caps);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 2em;
  margin-bottom: 0.7em;
  line-height: 1.35;
  color: var(--gold-bright);
}
.editor-body h3::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 1px;
  vertical-align: middle;
  background: var(--gold);
  margin-right: 14px;
  margin-bottom: 4px;
}
.editor-body h3 .italic { font-style: italic; }
.editor-body .scripture {
  margin: 2.4em -24px;
  padding: 36px 40px;
  background: linear-gradient(135deg, rgba(227, 184, 93, 0.06), transparent 70%);
  border-top: 1px solid var(--gold-deep);
  border-bottom: 1px solid var(--gold-deep);
  text-align: center;
  font-family: var(--display);
}
.editor-body .scripture__verse {
  font-size: 1.45rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--text);
  margin: 0 0 18px;
  letter-spacing: -0.005em;
}
.editor-body .scripture__verse::before { content: "“"; color: var(--gold); margin-right: 4px; font-size: 1.4em; line-height: 0; vertical-align: -0.3em; }
.editor-body .scripture__verse::after  { content: "”"; color: var(--gold); margin-left: 0; font-size: 1.4em; line-height: 0; vertical-align: -0.3em; }
.editor-body .scripture__ref {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: var(--display-caps);
  text-transform: uppercase;
  color: var(--gold);
}
.editor-body .scripture__ref-cite {
  font-size: 1.02rem;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--gold);
}
.editor-body .scripture__ref-version {
  font-size: 0.62rem;
  letter-spacing: 0.34em;
  font-weight: 600;
  color: var(--gold-deep);
}
.editor-body .callout {
  margin: 2em 0;
  padding: 26px 32px;
  background: var(--surface);
  border-left: 3px solid var(--gold);
}
.editor-body .callout p {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--text-2);
}
.editor-body .callout strong {
  color: var(--gold-bright);
  font-family: var(--display);
  font-style: normal;
}
.editor-body .callout .callout__heading {
  margin: 0 0 8px;
  font-family: var(--display-caps);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-bright);
  font-style: normal;
  font-weight: 600;
}
.editor-body .definition {
  margin: 2.2em 0;
  padding: 24px 30px;
  background: linear-gradient(135deg, rgba(227, 184, 93, 0.05), transparent 70%), var(--surface);
  border: 1px solid var(--gold-deep);
}
.editor-body .definition::before {
  content: "Definition";
  display: block;
  font-family: var(--display-caps);
  font-size: 0.6rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
  opacity: 0.85;
}
.editor-body .definition .definition__word {
  margin: 0 0 4px;
  font-family: var(--display);
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text);
}
.editor-body .definition .definition__word .italic { color: var(--gold-bright); font-style: italic; }
.editor-body .definition .definition__source {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--gold-bright);
  line-height: 1.2;
}
.editor-body .definition .definition__text {
  margin: 0;
  font-family: var(--display);
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--text-2);
}
/* Safeguard (mirror of the .prose rule): a paragraph that escapes a definition
   box in the editor renders as full-size body text, not box-internal sizing. */
.editor-body > p { font-size: 1.3rem; }
.editor-body .definition .definition__word + .definition__source,
.editor-body .definition .definition__text + .definition__source {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--gold-deep);
}
.editor-body .definition__add {
  display: inline-flex;
  align-items: center;
  margin-top: 16px;
  padding: 6px 12px;
  background: transparent;
  border: 1px dashed var(--gold-deep);
  color: var(--gold);
  font-family: var(--display-caps);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease);
}
.editor-body .definition__add:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
  background: rgba(227, 184, 93, 0.06);
}
/* Expandable "Details" bar inside the editor. Held open (admin.js sets `open`)
   so its content is visible and editable; the summary stays clickable for
   editing its label but does not collapse the box (a click guard prevents it). */
.editor-body .expand {
  margin: 1.8em 0;
  border-top: 1px solid var(--gold-deep);
  border-bottom: 1px solid var(--gold-deep);
}
.editor-body .expand > .expand__summary {
  list-style: none;
  cursor: text;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 10px;
  font-family: var(--display-caps);
  font-size: 0.75rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-bright);
}
.editor-body .expand > .expand__summary::-webkit-details-marker { display: none; }
.editor-body .expand > .expand__summary::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.editor-body .expand__body { padding: 2px 2px 20px; }
.editor-body .expand__body > :first-child { margin-top: 0; }
.editor-body a {
  color: var(--gold-bright);
  border-bottom: 1px solid rgba(227, 184, 93, 0.4);
}
.editor-body a:hover { border-bottom-color: var(--gold-bright); }
.editor-body strong { color: var(--text); font-weight: 600; font-family: inherit; }
.editor-body em { font-style: italic; }
.editor-body .italic { font-style: italic; color: var(--gold-bright); }
.editor-body .gold { color: var(--gold-bright); }
/* Combined inline styles (see .prose above): keep gold on nested bold/italic. */
.editor-body .gold strong, .editor-body .gold em,
.editor-body .italic strong, .editor-body .italic em,
.editor-body a strong, .editor-body a em { color: inherit; }
.editor-body ul, .editor-body ol { padding-left: 1.4em; }
.editor-body li { color: var(--text); margin-bottom: 0.5em; }
.editor-body hr {
  border: 0;
  height: 1px;
  background: var(--gold-deep);
  width: 80px;
  margin: 2em auto;
}
.editor-body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 2em auto;
  border: 1px solid var(--gold-deep);
}

/* Same for the public article prose */
.prose img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 2em auto;
  border: 1px solid var(--gold-deep);
}

/* Subtle block hover hints */
.editor-body h2,
.editor-body h3,
.editor-body .scripture,
.editor-body .callout,
.editor-body .definition,
.editor-body .expand {
  position: relative;
  transition: outline-color .2s var(--ease);
  outline: 1px dashed transparent;
  outline-offset: 4px;
}
.editor-body h2:hover,
.editor-body h3:hover,
.editor-body .scripture:hover,
.editor-body .callout:hover,
.editor-body .definition:hover,
.editor-body .expand:hover {
  outline-color: var(--gold-deep);
}

/* Editor-only close button on Scripture / Callout / Definition boxes. Hidden on
   public pages (stripped from the saved body); inside the editor it sits in the
   box's top-right corner and fades in on hover. */
.box-remove { display: none; }
.editor-body .box-remove,
.editor-body .newsletter-block__remove {
  position: absolute;
  top: -11px;
  right: -11px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: rgba(220, 38, 38, 0.9);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 1.35rem;
  line-height: 1;
  /* Pin the × to one consistent font and neutralise inherited text styling. The
     button otherwise inherits the host block's font (Cormorant on most blocks,
     Cinzel on h3) and that font's glyph metrics, so the × landed off-centre by a
     different amount per block. A fixed sans glyph centres identically everywhere. */
  font-family: Arial, system-ui, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  font-style: normal;
  cursor: pointer;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s var(--ease), transform .1s var(--ease), background .15s var(--ease);
}
.editor-body h2:hover > .box-remove,
.editor-body h3:hover > .box-remove,
.editor-body .scripture:hover > .box-remove,
.editor-body .callout:hover > .box-remove,
.editor-body .definition:hover > .box-remove,
.editor-body .expand:hover > .box-remove,
.editor-body .newsletter-block:hover > .newsletter-block__remove,
.editor-body .box-remove:hover,
.editor-body .newsletter-block__remove:hover {
  opacity: 1;
  pointer-events: auto;
}
.editor-body .box-remove:hover,
.editor-body .newsletter-block__remove:hover {
  background: rgb(185, 28, 28);
  transform: scale(1.1);
}

/* Editor-only reorder handle (move up / down). Mirror of the × delete handle:
   it sits in the block's top-left corner and fades in on hover. Hidden on
   public pages (stripped from the saved body). */
.block-move { display: none; }
.editor-body .block-move {
  position: absolute;
  top: -11px;
  left: -11px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  z-index: 11;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s var(--ease);
}
.editor-body .block-move__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 16px;
  background: var(--gold-deep);
  color: #fff;
  cursor: pointer;
  transition: background .15s var(--ease), transform .1s var(--ease);
}
.editor-body .block-move__btn:first-child { border-radius: 6px 6px 0 0; }
.editor-body .block-move__btn:last-child  { border-radius: 0 0 6px 6px; }
.editor-body .block-move__btn:hover { background: var(--gold); transform: scale(1.06); }
.editor-body .block-move__btn svg { width: 12px; height: 12px; }

.editor-body .scripture:hover > .block-move,
.editor-body .callout:hover > .block-move,
.editor-body .definition:hover > .block-move,
.editor-body .expand:hover > .block-move,
.editor-body .ref-bar:hover > .block-move,
.editor-body .ref-card:hover > .block-move,
.editor-body .newsletter-block:hover > .block-move,
.editor-body .img-block:hover > .block-move,
.editor-body .block-move:hover {
  opacity: 1;
  pointer-events: auto;
}

/* Editor-only wrapper around a top-level image so it can carry the reorder
   handle (a bare void <img> cannot). getCleanBody() unwraps it to <img>, so it
   never reaches the public page. */
.img-block { display: contents; }
.editor-body .img-block {
  display: block;
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin: 1.5em auto;
}
.editor-body .img-block > img { margin: 0; }

/* Reorderable blocks need a positioning context for the corner handle.
   (.scripture / .callout / .definition / .expand are already position:relative;
   .newsletter-block sets its own.) */
.editor-body .ref-bar,
.editor-body .ref-card { position: relative; }

.editor-help {
  margin: 16px 0 0;
  font-family: var(--display-caps);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
}
.editor-help code {
  font-family: ui-monospace, monospace;
  background: rgba(201, 150, 42, 0.06);
  color: var(--gold-bright);
  padding: 1px 6px;
  border: 1px solid var(--gold-deep);
  letter-spacing: 0;
  font-size: 0.72rem;
}

@media (max-width: 720px) {
  .editor-toolbar { top: 0; padding: 8px; }
  .tb-btn { padding: 5px 8px; font-size: 0.56rem; }
  /* Mirror the published page's mobile prose sizing (see .prose @720). The
     Scripture bleed is clamped to the editor's 20px side padding so it sits flush
     with the panel edge instead of overflowing it. */
  .editor-body { padding: 22px 20px; font-size: 1.14rem; }
  .editor-body .dropcap::first-letter { font-size: 4em; }
  .editor-body .scripture { margin: 1.8em -20px; padding: 28px 24px; }
  .editor-body .scripture__verse { font-size: 1.2rem; }
}

/* Draft preview banner — replaces the announce bar on the public article page */
.draft-banner {
  position: relative;
  z-index: 60;
  background: linear-gradient(90deg, #6b1622, #8b1e2b, #6b1622);
  border-bottom: 1px solid var(--gold-deep);
  color: var(--gold-pale);
  font-family: var(--display-caps);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.draft-banner a {
  color: var(--gold-bright);
  border-bottom: 1px solid var(--gold-deep);
  padding-bottom: 1px;
  margin-left: 4px;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.draft-banner a:hover {
  color: #fff5e0;
  border-color: var(--gold-bright);
}
.draft-banner__close {
  background: transparent;
  border: 1px solid rgba(241, 212, 137, 0.4);
  color: var(--gold-pale);
  padding: 3px 9px;
  font-family: inherit;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  cursor: pointer;
}
.draft-banner__close:hover { border-color: var(--gold-bright); color: #fff; }

/* When the draft banner is showing, hide the public announce bar
   (the draft notice already serves the announce role for this view) */
body.has-draft-banner .announce { display: none; }

@media (max-width: 720px) {
  .draft-banner {
    font-size: 0.58rem;
    letter-spacing: 0.22em;
    padding: 8px 16px;
    gap: 10px;
    flex-wrap: wrap;
  }
}

.editor-side {
  padding: 40px 32px 80px;
  display: grid;
  gap: 28px;
  align-content: start;
}
.editor-side h3 {
  font-family: var(--display-caps);
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin: 0 0 12px;
}
.editor-side .form-field { margin-bottom: 14px; }
.editor-side .form-field label {
  font-size: 0.6rem;
  letter-spacing: 0.22em;
}
.editor-side .form-field input,
.editor-side .form-field select,
.editor-side .form-field textarea {
  padding: 10px 12px;
  font-size: 0.92rem;
}
.editor-side__group {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.editor-side__group:last-child { border-bottom: 0; padding-bottom: 0; }

.editor-save-status {
  font-family: var(--display-caps);
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 8px;
}
.editor-save-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-3);
}
.editor-save-status.is-saving { color: var(--gold); }
.editor-save-status.is-saving::before { background: var(--gold); animation: announce-pulse 1s infinite; }
.editor-save-status.is-saved { color: var(--gold-bright); }
.editor-save-status.is-saved::before { background: var(--gold-bright); }

/* Responsive admin */
@media (max-width: 960px) {
  .admin { grid-template-columns: 1fr; }
  .admin-side {
    position: relative;
    height: auto;
    flex-direction: row;
    overflow-x: auto;
    flex-wrap: wrap;
    padding: 16px;
    gap: 12px;
  }
  .admin-side__foot { margin-top: 0; }
  .admin-nav { display: flex; flex-wrap: wrap; }
  .admin-content { padding: 24px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .editor { grid-template-columns: 1fr; }
  .editor-main { padding: 24px; }
  .editor-side { padding: 24px; border-top: 1px solid var(--line); }
  .articles-table { display: block; overflow-x: auto; }
  .admin-topbar { padding: 16px 20px; flex-wrap: wrap; gap: 12px; }
}

/* =====================================================================
   NEWSLETTERS — placeholder visual in editor + admin list/edit pages
   ===================================================================== */

/* Inline placeholder block (data-newsletter contenteditable=false). Visible
   only inside the editor — hidden on public pages so the brief moment before
   the swap-in completes shows nothing rather than placeholder text. Static
   /article/<slug>.html files never include the placeholder (PHP swaps it on
   render) so this only matters for the dynamic ?id= path. */
.newsletter-block { display: none; }
.editor-body .newsletter-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 2em 0;
  padding: 28px 24px;
  border: 1px dashed var(--gold-deep);
  background: linear-gradient(180deg, rgba(201, 150, 42, 0.06), rgba(201, 150, 42, 0.02));
  text-align: center;
  user-select: none;
  cursor: default;
  position: relative;
}
.editor-body .newsletter-block::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(201, 150, 42, 0.18);
  pointer-events: none;
}
.newsletter-block__icon {
  font-size: 1.4rem;
  color: var(--gold);
  line-height: 1;
}
.newsletter-block__label {
  font-family: var(--display-caps);
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-bright);
  font-weight: 600;
}
.newsletter-block__hint {
  font-family: var(--display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--text-2);
}
/* Public-page hide. Inside the editor the × delete button shares the exact
   .box-remove rules above (hidden until block hover, 22px, centred large glyph)
   so it looks and behaves identically to every other block's delete button. */
.newsletter-block__remove {
  display: none;
}

/* Optional badge/image add-ons rendered inside .inline-signup */
.inline-signup--nl { position: relative; }
.inline-signup__badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: #14100a;
  font-family: var(--display-caps);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 2px;
  font-weight: 700;
}
.inline-signup__image {
  display: block;
  max-width: 200px;
  height: auto;
  margin: 0 auto 20px;
  border: 1px solid var(--gold-deep);
}
.inline-signup__cta {
  display: flex;
  justify-content: center;
  margin: 8px 0;
}

/* List view — newsletter cards */
.nl-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 20px;
  margin-top: 8px;
}
.nl-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 26px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  position: relative;
  transition: border-color .2s var(--ease);
}
.nl-card:hover { border-color: var(--gold-deep); }
.nl-card.is-active {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(201, 150, 42, 0.05), transparent);
}
.nl-card.is-active::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(201, 150, 42, 0.25);
  pointer-events: none;
}
.nl-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.nl-card__head h3 {
  font-family: var(--display);
  font-size: 1.3rem;
  margin: 0;
  color: var(--text);
}
.nl-card__label {
  font-family: var(--display-caps);
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0;
}
.nl-card__heading {
  font-family: var(--display);
  font-style: italic;
  color: var(--text);
  font-size: 1.05rem;
  margin: 0;
  line-height: 1.4;
}
.nl-card__heading em { color: var(--gold-bright); font-style: italic; }
.nl-card__desc {
  font-size: 0.92rem;
  color: var(--text-2);
  margin: 0;
  line-height: 1.55;
}
.nl-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.nl-card__meta {
  font-family: var(--display-caps);
  font-size: 0.56rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-3);
}
.nl-card__actions {
  display: flex;
  gap: 8px;
}

/* Edit view — preview pane */
.nl-preview {
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 24px 20px;
  border-radius: 2px;
}
.nl-preview .inline-signup {
  margin: 0;
  padding: 24px 18px;
}
.nl-preview .inline-signup h3 {
  font-size: 1.3rem;
  margin: 0 0 10px;
}
.nl-preview .inline-signup p {
  font-size: 0.95rem;
}
.nl-preview .signup__field {
  flex-direction: column;
  gap: 6px;
  border: 0;
  background: transparent;
}
.nl-preview .signup__field input,
.nl-preview .signup__field button {
  width: 100%;
}
.nl-preview .signup__field input {
  background: rgba(15, 14, 10, 0.7);
  border: 1px solid var(--line-2);
  padding: 10px 14px;
  font-size: 0.9rem;
}

/* Kit embed stub — shown in the newsletter editor preview in lieu of
   actually executing the Kit <script> on every keystroke. */
.nl-kit-stub {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 16px;
  background: rgba(201, 150, 42, 0.06);
  border: 1px dashed var(--line-2);
  margin: 8px 0 0;
}
.nl-kit-stub__icon {
  font-family: var(--display);
  font-size: 1.1rem;
  color: var(--gold);
}
.nl-kit-stub__label {
  font-family: var(--display-caps);
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-2);
}
.nl-kit-stub__uid {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--gold-bright);
}
.nl-kit-stub__warn {
  font-family: var(--body);
  font-size: 0.75rem;
  color: var(--crimson);
}
.nl-kit-stub--empty {
  background: transparent;
  border-style: dotted;
  opacity: 0.65;
}

/* ============================================================
   RADIO PAGE
   ============================================================ */
.chapter--tight { padding-top: 36px; }

.radio-player {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.radio-player__stage {
  border: 1px solid var(--line-2);
  background: #000;
  overflow: hidden;
}
.radio-player__stage > [data-widget] {
  display: block;
  background: #000;
}
.radio-player__frame {
  width: 100%;
  border-top: 1px solid var(--line-2);
  background: #000;
  padding: 16px;
  display: flex;
  align-items: center;
}

/* Custom live-stream player */
.player {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}

/* "Press Play" hint — centered, nudges toward the button, retires after first play */
.player__hint {
  position: absolute;
  left: 50%;
  top: 50%;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  pointer-events: none;
  white-space: nowrap;
  font-family: var(--display-caps);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-bright);
  animation: player-hint-nudge 1.4s ease-in-out infinite;
}
.player__hint svg { width: 18px; height: 18px; }
.player[data-played="true"] .player__hint,
.player[data-state="loading"] .player__hint,
.player[data-state="playing"] .player__hint {
  display: none;
}
@keyframes player-hint-nudge {
  0%, 100% { transform: translate(-50%, -50%); }
  50%      { transform: translate(calc(-50% - 6px), -50%); }
}
.player__btn {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: #06060a;
  background: linear-gradient(180deg, var(--gold-pale) 0%, var(--gold-bright) 50%, var(--gold-warm) 100%);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.player__btn:hover { transform: scale(1.06); box-shadow: 0 0 0 4px var(--gold-soft); }
.player__btn:active { transform: scale(0.98); }
.player__icon { width: 22px; height: 22px; display: none; }
.player[data-state="paused"]  .player__icon--play    { display: block; }
.player[data-state="playing"] .player__icon--pause   { display: block; }
.player[data-state="loading"] .player__icon--spinner { display: block; animation: player-spin .8s linear infinite; }
@keyframes player-spin { to { transform: rotate(360deg); } }

/* LIVE indicator */
.player__live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display-caps);
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-2);
  transition: color .2s var(--ease);
}
.player__live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #555;
  transition: background .2s var(--ease);
}
.player[data-state="playing"] .player__live { color: var(--text); }
.player[data-state="playing"] .player__live-dot {
  background: #e0463b;
  animation: player-live 1.6s ease-out infinite;
}
@keyframes player-live {
  0%   { box-shadow: 0 0 0 0 rgba(224, 70, 59, 0.55); }
  100% { box-shadow: 0 0 0 7px rgba(224, 70, 59, 0); }
}

/* Volume + mute (pushed to the right) */
.player__vol {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.player__mute {
  flex: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--text-2);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  transition: color .2s var(--ease);
}
.player__mute:hover { color: var(--gold-bright); }
.player__icon--vol, .player__icon--muted { width: 20px; height: 20px; }
.player .player__icon--vol   { display: block; }
.player[data-muted="true"] .player__icon--vol   { display: none; }
.player[data-muted="true"] .player__icon--muted { display: block; }
.player__vol-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 96px;
  height: 4px;
  border-radius: 2px;
  background: var(--line-2);
  cursor: pointer;
}
.player__vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--gold-bright);
  cursor: pointer;
}
.player__vol-slider::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border: none;
  border-radius: 50%;
  background: var(--gold-bright);
  cursor: pointer;
}
@media (max-width: 480px) {
  .player { gap: 12px; }
  .player__vol-slider { width: 64px; }
}
/* Narrow screens: give the centered hint room by holding back the LIVE
   badge + volume until the stream has played once */
@media (max-width: 600px) {
  .player:not([data-played="true"]) .player__live,
  .player:not([data-played="true"]) .player__vol {
    opacity: 0;
    visibility: hidden;
  }
}
.radio-player__app {
  text-align: center;
  padding: 36px 28px;
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, var(--surface), var(--bg));
}
.radio-player__app h2 {
  margin: 0 0 10px;
}
.radio-player__app p {
  max-width: 440px;
  margin: 0 auto 24px;
  color: var(--text-2);
}
.radio-player__download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.radio-player__app .signup__note {
  margin-top: 16px;
}

/* Radio banner — compact, centered section VIII */
.radio-banner {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  background:
    radial-gradient(ellipse at 50% 50%, rgba(201, 150, 42, 0.14), transparent 65%),
    linear-gradient(135deg, var(--surface-2), var(--bg));
}
.radio-banner__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 64px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}
.radio-banner .numeral { margin: 0; }
.radio-banner__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display-caps);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin: 0;
}
.radio-banner__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e0463b;
  animation: player-live 1.6s ease-out infinite;
}
.radio-banner__title {
  font-family: var(--display);
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  line-height: 1.04;
  margin: 0;
}
.radio-banner__title .italic { color: var(--gold-bright); }
.radio-banner__sub {
  margin: 0;
  color: var(--text-2);
  font-size: 0.98rem;
  max-width: 520px;
}
.radio-banner .btn { margin-top: 16px; }

/* ============================================================
   Donorbox form — framed to complement the editorial gold style.
   NOTE: the form itself renders inside a cross-origin Donorbox
   iframe, so its internal fields/colors are set in the Donorbox
   dashboard. These rules style the frame around it.
   ============================================================ */
.support__donorbox {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 26px 26px;
  background: linear-gradient(180deg, var(--surface), var(--bg));
  border: 1px solid var(--line-2);
  box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.85);
}
/* Inset gold hairline frame — matches .support__card */
.support__donorbox::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid var(--gold-deep);
  pointer-events: none;
  z-index: 1;
}
.support__donorbox-label {
  margin: 4px 0 22px;
}
/* Light panel behind the form so the embedded widget reads cleanly
   on the dark page regardless of the form's own background */
.support__donorbox-form {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 14px;
  background: var(--parchment);
  border: 1px solid var(--gold-deep);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}
.support__donorbox-fine {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-top: 20px;
}

@media (max-width: 720px) {
  .support__donorbox { padding: 22px 16px 18px; }
  .support__donorbox-form { padding: 10px; }
}

/* ============================================================
   Donate page — Donorbox form framed in the dark + gold theme.
   The form renders inside a cross-origin Donorbox iframe, so its
   internal fields/colors are set in the Donorbox dashboard; these
   rules style the frame around it to match the page.
   ============================================================ */
.donorbox-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
  padding: 34px 30px 28px;
  background: linear-gradient(180deg, var(--surface), var(--bg));
  border: 1px solid var(--line-2);
  box-shadow: 0 36px 80px -36px rgba(0, 0, 0, 0.9);
}
/* Inset gold hairline frame — the site's signature double border */
.donorbox-wrap::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid var(--gold-deep);
  pointer-events: none;
  z-index: 1;
}
.donorbox-wrap__label {
  margin: 4px 0 24px;
}
/* Dark inset stage the form sits on, with a soft gold glow ring */
.donorbox-wrap__form {
  position: relative;
  z-index: 2;
  width: fit-content;
  max-width: 100%;
  display: flex;
  justify-content: center;
  padding: 16px;
  background: var(--bg-2);
  border: 1px solid var(--gold-deep);
  border-radius: var(--radius);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.5),
    0 0 36px -18px var(--gold-glow);
}
.donorbox-wrap__note {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-top: 22px;
}

@media (max-width: 720px) {
  .donorbox-wrap { padding: 24px 16px 20px; }
  .donorbox-wrap__form { padding: 10px; }
}

/* =====================================================================
   PRAYERS — single prayer page (an illuminated "prayer sheet")
   ===================================================================== */
.prayer-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 70px) 24px clamp(50px, 7vw, 90px);
}

/* Intro lede that sits in the article-style header, under the title */
.prayer-intro {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.5;
  color: var(--text-2);
  margin: 18px auto 4px;
  max-width: 620px;
}

/* Scripture reference — a centered gilt rule above the sheet */
.prayer-scripture {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 auto clamp(26px, 4vw, 40px);
  padding: 12px 22px;
  max-width: max-content;
  font-family: var(--display-caps);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-bright);
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}
.prayer-scripture__icon { color: var(--gold); font-size: 0.7rem; }

/* The prayer sheet — a framed, faintly-gilded panel */
.prayer-sheet {
  position: relative;
  padding: clamp(34px, 6vw, 64px) clamp(26px, 5vw, 56px);
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(227, 184, 93, 0.06), transparent 70%),
    linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  border: 1px solid var(--line-2);
  box-shadow: 0 40px 80px -50px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(227, 184, 93, 0.04);
}
/* Hairline inset frame */
.prayer-sheet::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(201, 150, 42, 0.18);
  pointer-events: none;
}
/* Gilt corner ornaments */
.prayer-sheet__corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1px solid var(--gold);
  opacity: 0.55;
  pointer-events: none;
}
.prayer-sheet__corner--tl { top: 4px; left: 4px; border-right: 0; border-bottom: 0; }
.prayer-sheet__corner--tr { top: 4px; right: 4px; border-left: 0; border-bottom: 0; }
.prayer-sheet__corner--bl { bottom: 4px; left: 4px; border-right: 0; border-top: 0; }
.prayer-sheet__corner--br { bottom: 4px; right: 4px; border-left: 0; border-top: 0; }

/* The prayer text — reuse .prose typography but unframe its padding/width */
.prayer-sheet .prayer-body.prose {
  max-width: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
  text-align: left;
}
.prayer-sheet .prayer-body.prose > * + * { margin-top: 1.15em; }
.prayer-sheet .prayer-body.prose p { color: var(--text); }
/* Lead the prayer with a gilded drop-initial on the first paragraph */
.prayer-sheet .prayer-body.prose > p:first-of-type::first-letter {
  font-family: var(--display);
  font-weight: 600;
  font-size: 3.1em;
  line-height: 0.8;
  float: left;
  margin: 0.05em 0.12em 0 0;
  color: var(--gold-bright);
  text-align: left;
}

/* "Amen" ornament that closes the sheet */
.prayer-amen {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: clamp(28px, 4vw, 44px);
  font-family: var(--display-caps);
  font-size: 0.82rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
}
.prayer-amen span {
  display: block;
  width: clamp(40px, 12vw, 90px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.prayer-amen span:last-child { background: linear-gradient(90deg, var(--gold), transparent); }

/* Copy / Share / Back actions under the sheet */
.article-actions {
  display: flex;
  justify-content: center;
  margin: clamp(14px, 2vw, 20px) 0 clamp(26px, 4vw, 40px);
}

.prayer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(26px, 4vw, 40px);
}

/* List card: prayer entries lead with their scripture ref in gold */
.entry--prayer .entry__label { color: var(--gold); }

@media (max-width: 600px) {
  .prayer-sheet .prayer-body.prose > p:first-of-type::first-letter { font-size: 2.6em; }
}

/* =====================================================================
   TOPIC → SUBTOPIC → ARTICLE taxonomy
   ===================================================================== */

/* --- Subtopic cards on the topic landing page --- */
.subtopic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.subtopic-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 30px 28px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.subtopic-card:hover {
  border-color: var(--gold-deep);
  background: var(--bg-warm);
  transform: translateY(-2px);
}
.subtopic-card__shield {
  width: 34px;
  height: 41px;
  color: var(--gold);
}
.subtopic-card h3 {
  font-size: 1.3rem;
  margin: 0;
}
.subtopic-card__blurb {
  font-family: var(--display);
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--text-2);
  margin: 0;
}
.subtopic-card__count {
  margin-top: auto;
  font-family: var(--display-caps);
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* --- Custom-link cards on a subtopic page --- */
.link-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.link-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 26px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.link-card:hover { border-color: var(--gold-deep); background: var(--bg-warm); }
.link-card h3 { font-size: 1.12rem; margin: 0; }
.link-card__note {
  font-family: var(--display);
  font-size: 0.98rem;
  color: var(--text-2);
  margin: 0;
}
.link-card__cue {
  margin-top: 4px;
  font-family: var(--display-caps);
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

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

/* --- Editor: subtopic checkbox list --- */
.subtopic-checks {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
}
.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--text);
  cursor: pointer;
}
.check-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--gold);
  flex: 0 0 auto;
}

/* --- Admin: subtopic manager (topics.html) --- */
.select-wrap--inline { display: inline-block; min-width: 200px; }
.select-wrap--inline select { width: 100%; }

.tp-cards {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 760px;
}
.tp-card {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  padding: 20px 22px;
}
.tp-card__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.tp-card__order { display: flex; gap: 4px; }
.tp-arrow {
  width: 28px;
  height: 28px;
  border: 1px solid var(--line-2);
  background: var(--bg);
  color: var(--text-2);
  cursor: pointer;
  border-radius: 2px;
  line-height: 1;
}
.tp-arrow:hover:not([disabled]) { border-color: var(--gold-deep); color: var(--gold); }
.tp-arrow[disabled] { opacity: 0.35; cursor: default; }
.tp-card__slug {
  flex: 1 1 auto;
  font-size: 0.72rem;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tp-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tp-link {
  display: grid;
  grid-template-columns: 1fr 1.4fr auto;
  gap: 8px;
  align-items: center;
}
.tp-link-remove {
  width: 32px;
  height: 32px;
  border: 1px solid var(--line-2);
  background: var(--bg);
  color: var(--text-3);
  cursor: pointer;
  border-radius: 2px;
}
.tp-link-remove:hover { border-color: var(--gold-deep); color: var(--gold); }
.tp-card__foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}
@media (max-width: 600px) {
  .tp-link { grid-template-columns: 1fr; }
}

/* --- Page card thumbnail (when a card has an image) --- */
.subtopic-card__thumb {
  display: block;
  width: 100%;
  height: 140px;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--line-2);
  margin-bottom: 4px;
}

/* --- Page editor: Cards panel --- */
.card-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.card-row {
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.card-row__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-row__n {
  font-family: var(--display-caps);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  color: var(--gold-deep);
}
.card-row__move { display: flex; gap: 4px; }
.card-row input,
.card-row textarea,
.card-row select { width: 100%; }
.card-row__target {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* --- Manage topics: page tree --- */
.mt-tree {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 860px;
}
.mt-node {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  padding: 10px 14px;
}
.mt-node__main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.mt-node__title {
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mt-node__cards {
  font-size: 0.72rem;
  color: var(--text-3);
  white-space: nowrap;
}
.mt-node__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
@media (max-width: 720px) {
  .mt-node { flex-direction: column; align-items: stretch; }
  .card-row__target { grid-template-columns: 1fr; }
}

/* All-topics manage view: one section per topic */
.mt-topic { margin-bottom: 34px; max-width: 860px; }
.mt-topic__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-2);
}
.mt-topic__title { font-family: var(--display); font-size: 1.5rem; margin: 0; }

/* =====================================================================
   Inline references — bars & cards placed in a page/article body
   ===================================================================== */
.ref-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 20px;
  margin: 6px 0;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--gold);
  color: var(--text);
  text-decoration: none;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.ref-bar:hover { background: var(--bg-warm); border-left-color: var(--gold-bright); color: var(--text); }
.ref-bar__title { flex: 1 1 auto; font-family: var(--display); font-size: 1.1rem; font-weight: 600; }
.ref-bar__cue { color: var(--gold); flex: 0 0 auto; font-size: 1.1rem; }

.ref-card {
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 16px 20px;
  margin: 8px 0;
  background: var(--surface);
  border: 1px solid var(--line-2);
  color: var(--text);
  text-decoration: none;
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.ref-card:hover { border-color: var(--gold-deep); background: var(--bg-warm); transform: translateY(-1px); color: var(--text); }
.ref-card__media {
  flex: 0 0 auto;
  width: 96px;
  height: 72px;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--line-2);
}
.ref-card__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; }
.ref-card__title { font-family: var(--display); font-size: 1.25rem; font-weight: 600; }
.ref-card__blurb { font-family: var(--display); color: var(--text-2); font-size: 1rem; line-height: 1.4; }
/* Override .prose link styling (gold text + 0.4 underline) so the reference
   keeps its own full box border (incl. the bottom edge) and dark text. */
.prose a.ref-bar { border-bottom: 1px solid var(--line-2); color: var(--text); }
.prose a.ref-card { border-bottom: 1px solid var(--line-2); color: var(--text); }
.prose a.ref-bar:hover { border-bottom-color: var(--line-2); color: var(--text); }
.prose a.ref-card:hover { border-bottom-color: var(--line-2); color: var(--text); }
.prose a.ref-bar .ref-bar__cue { color: var(--gold); }

/* Per-reference remove button — only visible inside the editor */
.ref-remove { display: none; }
.editor-body .ref-bar__cue { display: none; }
.editor-body .ref-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  color: var(--text-3);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.editor-body .ref-remove:hover { color: var(--gold); border-color: var(--gold); }
.editor-body .ref-bar, .editor-body .ref-card { cursor: default; }

/* Reference picker modal (admin) */
.ref-picker {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(6, 6, 10, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8vh 20px;
}
.ref-picker__panel {
  width: 100%;
  max-width: 560px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  max-height: 80vh;
}
.ref-picker__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-2);
}
.ref-picker__head strong { font-family: var(--display); font-size: 1.1rem; }
.ref-picker__style { margin-left: auto; display: flex; gap: 12px; font-size: 0.85rem; color: var(--text-2); }
.ref-picker__style label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.ref-picker__close { background: none; border: 0; color: var(--text-2); font-size: 22px; line-height: 1; cursor: pointer; }
.ref-picker__close:hover { color: var(--gold); }
.ref-picker__search {
  margin: 14px 18px 8px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--line-2);
  color: var(--text);
  border-radius: 2px;
}
.ref-picker__list { overflow-y: auto; padding: 0 10px 12px; }
.ref-picker__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.ref-picker__item:hover { background: var(--bg-warm); }
.ref-picker__tag {
  flex: 0 0 auto;
  font-family: var(--display-caps);
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 3px 7px;
  border: 1px solid var(--line-2);
  color: var(--text-3);
}
.ref-picker__tag--article { color: var(--gold-deep); border-color: var(--gold-deep); }
.ref-picker__title { flex: 1 1 auto; }
.ref-picker__empty { padding: 18px; color: var(--text-3); text-align: center; }

/* Link picker — adds a URL row above the shared .ref-picker search/list */
.link-picker__url-row {
  display: flex;
  gap: 8px;
  margin: 16px 18px 6px;
}
.link-picker__url {
  flex: 1 1 auto;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--line-2);
  color: var(--text);
  border-radius: 2px;
}
.link-picker__url-row .btn { flex: 0 0 auto; }
.link-picker .ref-picker__search { margin-top: 4px; }

/* Text input paired with an inline action button (e.g. footer Button URL) */
.input-with-action { display: flex; gap: 8px; align-items: stretch; }
.input-with-action input { flex: 1 1 auto; }
.input-with-action .btn { flex: 0 0 auto; white-space: nowrap; }


/* ============================================================
   Prayer wall (pray.html) — public submission + moderated feed
   ============================================================ */
.form-field__opt {
  font-weight: 400;
  color: var(--text-3);
  font-size: 0.85em;
  letter-spacing: 0;
  text-transform: none;
}

/* "Post anonymously" toggle row */
.pw-anon {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Sits in the .pw-form grid (22px gap); pull up so it reads as a sub-option
     of the name/location row above — ~11px effective spacing. */
  margin: -11px 0 0;
  font-size: 0.92rem;
  color: var(--text-2);
  cursor: pointer;
}
.pw-anon input { width: 16px; height: 16px; accent-color: var(--gold); cursor: pointer; }

/* The wall feed */
.pw-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}
.pw-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 24px 24px 18px;
  transition: border-color .25s var(--ease);
}
.pw-card:hover { border-color: var(--gold-deep); }
.pw-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin-bottom: 12px;
}
.pw-card__name {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--gold-bright);
  line-height: 1;
}
.pw-card__loc {
  font-size: 0.82rem;
  color: var(--text-3);
}
.pw-card__loc::before { content: "· "; }
.pw-card__when {
  margin-left: auto;
  font-family: var(--display-caps);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
.pw-card__msg {
  flex: 1;
  font-family: var(--body, "Cormorant Garamond"), serif;
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-line;
  margin: 0 0 18px;
}
.pw-card__foot {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

/* 🙏 "I prayed" tally button */
.pw-pray {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 7px 14px;
  font-family: var(--display-caps);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
  cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.pw-pray:hover { border-color: var(--gold); color: var(--gold-bright); }
.pw-pray__icon { font-size: 1rem; line-height: 1; }
.pw-pray__count {
  min-width: 1.4em;
  text-align: center;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.14);
  color: var(--gold-bright);
  font-size: 0.7rem;
}
.pw-pray.is-prayed,
.pw-pray:disabled {
  border-color: var(--gold-deep);
  color: var(--gold-bright);
  cursor: default;
  opacity: 0.9;
}
.pw-pray:disabled:hover { background: transparent; }

.pw-success .contact-success__mark { font-size: 2.4rem; }

@media (max-width: 600px) {
  .pw-wall { grid-template-columns: 1fr; }
  .pw-card__when { margin-left: 0; width: 100%; }
}

/* ============================================================
   Multi-select checkbox list (editor: Categories / Topics)
   ============================================================ */
.check-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--line, rgba(255,255,255,0.12));
  border-radius: 4px;
  padding: 6px;
}
.check-list__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1.2;
  transition: background 0.12s ease;
}
.check-list__item:hover { background: rgba(255,255,255,0.05); }
.check-list__item input[type="checkbox"] {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  accent-color: var(--gold, #c9a44a);
  cursor: pointer;
  margin: 0;
}
.check-list__label { flex: 1 1 auto; }
.check-list__item.is-primary .check-list__label { color: var(--gold, #c9a44a); }
.check-list__badge {
  flex: 0 0 auto;
  font-family: var(--display-caps);
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold, #c9a44a);
  border: 1px solid var(--gold-deep, #8a6d2f);
  border-radius: 2px;
  padding: 2px 6px;
}

/* ============================================================
   Multi-category card tags — wrap several tags where the design
   previously showed one. The wrapper carries the positioning the
   single tag used to have; the tags themselves flow inline.
   ============================================================ */
.entry__tags,
.feature__tags {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  z-index: 1;
}
.entry__tags { top: 18px; left: 18px; right: 18px; }
.feature__tags { top: 22px; left: 22px; right: 22px; }
.entry__tags .entry__tag,
.feature__tags .feature__tag {
  position: static;
  top: auto;
  left: auto;
}
.story__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}
.story__tags .story__tag { display: inline-block; }