/* =====================================================================
   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, 160px) 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: 70px;
  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);
}

/* =========================================================
   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: 4px;
  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;
}
.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;
}
.prose h3 {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 500;
  margin-top: 1.8em;
  margin-bottom: 0.4em;
  color: var(--gold-bright);
}
.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); }
.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; }

/* 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 {
  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 { 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; }
}

/* =====================================================================
   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);
}
.method-tile__icon svg { width: 32px; height: 32px; }
.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(4, 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(4, 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: 16px;
  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);
  border-bottom: 0;
  margin-bottom: 0;
}
.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; }

.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%;
  position: relative;
  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.7;
  padding: 32px 38px;
  outline: none;
  min-height: 480px;
  transition: border-color .2s var(--ease);
  cursor: text;
}
.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 */
.editor-body p {
  margin: 0 0 1.25em;
  color: var(--text);
}
.editor-body p:last-child { margin-bottom: 0; }
.editor-body .dropcap::first-letter {
  font-family: var(--display);
  font-weight: 600;
  font-size: 4.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.6rem;
  font-weight: 500;
  margin: 0.3em 0 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: 20px;
}
.editor-body h2 .italic { color: var(--gold-bright); font-style: italic; }
.editor-body h3 {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 500;
  margin: 1.4em 0 0.4em;
  color: var(--gold-bright);
}
.editor-body h3 .italic { font-style: italic; }
.editor-body .scripture {
  margin: 1.6em -8px;
  padding: 22px 26px;
  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.2rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--text);
  margin: 0 0 12px;
}
.editor-body .scripture__verse::before { content: "“"; color: var(--gold); margin-right: 4px; }
.editor-body .scripture__verse::after  { content: "”"; color: var(--gold); margin-left: 0; }
.editor-body .scripture__ref {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-family: var(--display-caps);
  text-transform: uppercase;
  color: var(--gold);
}
.editor-body .scripture__ref-cite {
  font-size: 0.9rem;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--gold);
}
.editor-body .scripture__ref-version {
  font-size: 0.56rem;
  letter-spacing: 0.34em;
  font-weight: 600;
  color: var(--gold-deep);
}
.editor-body .callout {
  margin: 1.5em 0;
  padding: 18px 24px;
  background: var(--surface);
  border-left: 3px solid var(--gold);
}
.editor-body .callout p {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-size: 1rem;
  color: var(--text-2);
}
.editor-body .callout strong {
  color: var(--gold-bright);
  font-style: normal;
}
.editor-body .callout .callout__heading {
  margin: 0 0 8px;
  font-family: var(--display-caps);
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-bright);
  font-style: normal;
  font-weight: 600;
}
.editor-body .definition {
  margin: 1.5em 0;
  padding: 18px 24px;
  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.58rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
  opacity: 0.85;
}
.editor-body .definition .definition__word {
  margin: 0 0 4px;
  font-family: var(--display);
  font-size: 1.4rem;
  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 10px;
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--gold-bright);
  line-height: 1.2;
}
.editor-body .definition .definition__text {
  margin: 0;
  font-family: var(--display);
  font-size: 1rem;
  line-height: 1.55;
  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: 16px;
  padding-top: 16px;
  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);
}
.editor-body a {
  color: var(--gold-bright);
  border-bottom: 1px solid rgba(227, 184, 93, 0.35);
}
.editor-body a:hover { color: var(--gold-pale); }
.editor-body strong { color: var(--text); font-weight: 600; }
.editor-body em { font-style: italic; }
.editor-body .italic { font-style: italic; color: var(--gold-bright); }
.editor-body .gold { color: var(--gold-bright); }
.editor-body ul, .editor-body ol { padding-left: 1.5em; margin: 1em 0; }
.editor-body li { color: var(--text); margin-bottom: 0.4em; }
.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: 1.5em 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 {
  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 {
  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 {
  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: 0.95rem;
  line-height: 1;
  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 .scripture:hover > .box-remove,
.editor-body .callout:hover > .box-remove,
.editor-body .definition:hover > .box-remove,
.editor-body .box-remove:hover {
  opacity: 1;
  pointer-events: auto;
}
.editor-body .box-remove:hover {
  background: rgb(185, 28, 28);
  transform: scale(1.1);
}

.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; }
  .editor-body { padding: 22px 20px; }
}

/* 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);
}
.newsletter-block__remove {
  display: none;
}
.editor-body .newsletter-block__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  background: rgba(220, 38, 38, 0.85);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
  transition: background 0.15s, transform 0.1s;
}
.editor-body .newsletter-block__remove:hover {
  background: rgb(185, 28, 28);
  transform: scale(1.1);
}

/* 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 */
.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; }