/* ============================================================================
   brandos-overlay.css — BrandOS token bridge (additive, safe overlay)
   -------------------------------------------------------------------
   RULES:
   • MUST load LAST in the CSS cascade (after all theme-*.css / joy-*.css / lumen-*.css)
   • NEVER redefines existing tokens (--gold-*, --ink, --page-bg, --ff-serif, etc.)
   • ONLY adds NEW alias tokens under the `--brandos-*` and `--wax-*` prefixes
   • ONLY applies visual styling to elements that opt in via `.brandos-*` classes
     or `[data-brandos-*]` attributes
   • Existing pages, headings, links, and body text are UNCHANGED
   ========================================================================== */

:root {
  /* ---- BrandOS token aliases mapped to existing tokens where possible ---- */
  --brandos-parchment-cream:  var(--cream-200);          /* existing #FDFBF5 */
  --brandos-parchment-deep:   var(--cream-400);          /* existing #F7EFD6 */
  --brandos-chalice-gold:     var(--gold-400);           /* existing #D89412 */
  --brandos-chalice-gold-hi:  var(--gold-200);           /* existing #FFD24A */
  --brandos-ink-brown:        var(--ink);                /* existing #2A2D38 */
  --brandos-ink-soft:         var(--ink-soft);           /* existing #5A6173 */

  /* ---- BrandOS NEW colors additive to the existing palette ---- */
  --wax-burgundy:             #6B1F2E;                   /* new — for seal accents only */
  --wax-burgundy-deep:        #4A1520;
  --wax-burgundy-warm:        #7A2532;
  --chalice-gold-warm:        #B48748;                   /* warm gold for seal impression */
  --chalice-gold-glint:       #D6A868;

  /* ---- Motion durations (namespaced; do not touch existing) ---- */
  --brandos-dur-quick:   240ms;
  --brandos-dur-default: 480ms;
  --brandos-dur-slow:    800ms;
  --brandos-dur-breath:  8000ms;
  --brandos-dur-reveal:  2400ms;

  --brandos-ease-gentle:  cubic-bezier(0.4, 0, 0.4, 1);
  --brandos-ease-breath:  cubic-bezier(0.42, 0, 0.58, 1);
  --brandos-ease-morning: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* ---- Serif enhancement stack (optional, only for .brandos-wordmark) ---- */
  --brandos-ff-serif: "Source Serif 4", "Source Serif Pro", "Newsreader",
                      "EB Garamond", var(--ff-serif, Georgia), serif;
}

/* ---------- Opt-in wordmark class (for headers/footers that adopt it) ---- */
.brandos-wordmark {
  font-family: var(--brandos-ff-serif);
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.012em;
}

/* ---------- Wax-seal overlay element (opt-in via <span class="brandos-seal">) */
.brandos-seal {
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
}
.brandos-seal svg {
  display: block;
  filter: drop-shadow(0 2px 3px rgba(74, 21, 32, 0.30));
}

/* ---------- Optional footer signature block (opt-in via .brandos-signature) */
.brandos-signature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-family: var(--ff-sans, system-ui);
  font-size: 0.85rem;
  color: var(--ink-soft, #5A6173);
  text-align: center;
}

/* ---------- BrandOS motion classes (opt-in only) ---------- */
@keyframes brandos-breath {
  0%,   100% { transform: scale(1);     opacity: 1;   }
  25%, 50%   { transform: scale(1.015); opacity: 1;   }
  75%        { transform: scale(.985);  opacity: .92; }
}
@keyframes brandos-arrival {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes brandos-reveal {
  0%, 33%    { opacity: 0; transform: translateY(2%) scale(.94); }
  83%        { opacity: 1; transform: translateY(-.5%) scale(1.02); }
  100%       { opacity: 1; transform: none; }
}

.brandos-motion-breath   { animation: brandos-breath  var(--brandos-dur-breath)  var(--brandos-ease-breath)  infinite; }
.brandos-motion-arrival  { animation: brandos-arrival var(--brandos-dur-default) var(--brandos-ease-morning) both; }
.brandos-motion-reveal   { animation: brandos-reveal  var(--brandos-dur-reveal)  var(--brandos-ease-morning) both; }

/* ---------- Rule-engine denial state ----------
   When the client-side rule engine tags an opt-in overlay with data-brandos-blocked,
   the overlay is hidden. Existing site content is NEVER touched. */
[data-brandos-mark][data-brandos-blocked="true"] {
  display: none !important;
}

/* ---------- Scoped focus ring for BrandOS interactive overlays ---------- */
.brandos-focus:focus-visible {
  outline: 3px solid rgba(180, 135, 72, 0.35);
  outline-offset: 4px;
}

/* ============================================================================
   BrandOS Real Visual Layer — modifies EXISTING footer/nav elements to add
   sacred-modern branded presence. NO floating overlays. NO temporary markers.
   Enhances what visitors already see, gives CrossAIHub a distinct identity.
   ========================================================================== */

/* --- 1. Subtle chalice-gold accent bar under the site header --- */
.site-header {
  position: relative;
}
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(180, 135, 72, 0) 5%,
    rgba(180, 135, 72, 0.55) 30%,
    rgba(180, 135, 72, 0.55) 70%,
    rgba(180, 135, 72, 0) 95%,
    transparent 100%
  );
  pointer-events: none;
}

/* --- 2. Wordmark: subtle gold tint on the "AI" middle segment --- */
.wordmark__text .c-ai {
  color: #8E6832;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color 200ms ease;
}
.wordmark:hover .c-ai {
  color: #B48748;
}

/* --- 3. Footer brand mark: replace plain cross with wax seal --- */
.footer-mark {
  position: relative;
  padding-left: 8px;
}
.footer-mark__icon {
  position: relative;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.footer-mark__icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/assets/svg/brandos/cross-wax-seal.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 2px 4px rgba(43, 36, 24, 0.20));
  z-index: 1;
}
.footer-mark__icon > svg {
  position: relative;
  z-index: 2;
  opacity: 0;                        /* hide the plain cross behind the seal */
}
.footer-mark__name {
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* --- 4. Footer verse: gold border-left + burgundy citation --- */
.footer-verse {
  border-left: 3px solid rgba(180, 135, 72, 0.6);
  padding-left: 16px;
  margin-left: 2px;
}
.footer-verse cite {
  color: #6B1F2E;
  font-style: normal;
  font-weight: 500;
}

/* --- 5. Footer signature: elevated tagline in wax burgundy --- */
.footer-signature em {
  color: #6B1F2E;
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.82em;
  font-weight: 500;
}

/* --- 6. Footer signoff: soft brand tint --- */
.footer-signoff {
  color: rgba(43, 36, 24, 0.75);
}

/* --- 7. Blockquote / verse callouts get subtle brand accent --- */
.cinematic-hero blockquote,
.foundations blockquote,
blockquote.footer-verse {
  border-left-color: rgba(180, 135, 72, 0.6);
}

/* --- 8. Section h2 headings: refined letter-spacing --- */
.foundations__h2,
.foundations h2 {
  letter-spacing: -0.005em;
}

/* ============================================================================
   BrandOS Complete Design System — sacred-modern identity across every page.
   Applied to real, live elements. NO structural HTML changes.
   ========================================================================== */

/* --- 11. Unified kicker/eyebrow identity (burgundy uppercase across the site) */
.cinematic-hero__kicker,
.foundations__kicker,
.hotd__kicker,
.house-support__eyebrow,
.card__kicker,
.eyebrow,
.section-eyebrow,
[class$="__kicker"] {
  color: #6B1F2E;
  letter-spacing: 0.14em;
  font-weight: 500;
}

/* --- 12. Hero em accent — chalice gold on "Joy in the Word" style emphasis */
html body .cinematic-hero__h1 em,
html body .cinematic-hero__h1 i {
  color: #8E6832;
  font-style: italic;
  font-weight: inherit;
}

/* --- 13. Hero lede: warmer ink color for premium reading */
.cinematic-hero__lede,
.hero__lede {
  color: rgba(43, 36, 24, 0.86);
}

/* --- 14. Section h2 refinement across all sections --- */
.foundations__h2,
.house-support__h2,
.hotd__title,
h2.section-title,
.section h2 {
  letter-spacing: -0.008em;
}

/* --- 15. Card family — subtle gold border-bottom on hover --- */
.foundations__card,
.vod-card,
.media-card,
.start-here__card,
.hotd,
.channel,
[class$="__card"] {
  border-bottom: 2px solid transparent;
  transition: border-color 260ms cubic-bezier(.2,.7,.3,1),
              transform 260ms cubic-bezier(.2,.7,.3,1),
              box-shadow 260ms cubic-bezier(.2,.7,.3,1);
}
.foundations__card:hover,
.vod-card:hover,
.media-card:hover,
.start-here__card:hover,
.channel:hover,
[class$="__card"]:hover {
  border-bottom-color: rgba(180, 135, 72, 0.7);
  transform: translateY(-1px);
}

/* --- 16. Scripture blockquotes across the site (unified pattern) --- */
blockquote:not(.footer-verse),
.scripture-quote,
.hotd__verse,
.foundations__verse,
[class$="__verse"]:not(.footer-verse) {
  border-left: 3px solid rgba(180, 135, 72, 0.55);
  padding-left: 1.1rem;
}
blockquote cite,
.scripture-quote cite,
.hotd__verse cite,
[class$="__verse"] cite {
  color: #6B1F2E;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.85em;
  display: block;
  margin-top: 0.5rem;
}

/* --- 17. Nav links — gold underline animates in on hover --- */
.site-nav a {
  position: relative;
  transition: color 220ms ease;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: -4px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent 0%, #B48748 40%, #B48748 60%, transparent 100%);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 240ms cubic-bezier(.2,.7,.3,1);
  pointer-events: none;
}
.site-nav a:hover::after,
.site-nav a:focus-visible::after,
.site-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

/* --- 18. Button focus rings — brand burgundy --- */
.btn:focus-visible,
button:focus-visible,
a.btn:focus-visible,
a.btn--gold:focus-visible {
  outline: 3px solid rgba(107, 31, 46, 0.35);
  outline-offset: 3px;
  border-radius: 6px;
}

/* --- 19. Gold divider refinement --- */
.divider-gold {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(180, 135, 72, 0.6) 30%,
    rgba(180, 135, 72, 0.6) 70%,
    transparent 100%
  );
  height: 1px;
  border: none;
}

/* --- 20. hr elements site-wide — brand-tinted --- */
hr:not(.divider-gold) {
  border: none;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(180, 135, 72, 0.35) 40%,
    rgba(180, 135, 72, 0.35) 60%,
    transparent 100%
  );
  margin: 2.5rem 0;
}

/* --- 21. HOTD (hymn of the day) enhanced brand presence --- */
.hotd__kicker { text-transform: uppercase; }
.hotd__title { font-family: inherit; }
.hotd__note--tomorrow {
  color: rgba(107, 31, 46, 0.75);
  font-style: italic;
  letter-spacing: 0.01em;
}

/* --- 22. Foundations section: brand identity --- */
.foundations__header {
  position: relative;
}
.foundations__lede {
  color: rgba(43, 36, 24, 0.82);
}

/* --- 23. house-support (donation section) refinement --- */
.house-support__inner {
  position: relative;
}
.house-support--minimal .house-support__h2 {
  letter-spacing: -0.005em;
}

/* --- 24. Content transitions: refined breathing between sections --- */
main > section + section,
.container + .container {
  padding-top: max(3rem, 4vh);
}

/* --- 25. Link accents in prose: burgundy on hover --- */
.container--prose a:not(.btn):hover,
main p a:not(.btn):hover {
  color: #6B1F2E;
  text-decoration-color: #B48748;
}

/* --- 26. Selection color across the site --- */
::selection {
  background: rgba(180, 135, 72, 0.28);
  color: #2B2418;
}

/* --- 27. Print: keep enhancements but suppress decorative rules --- */
@media print {
  .site-header::after { display: none; }
  .footer-mark__icon::before { display: none; }
  .footer-mark__icon > svg { opacity: 1; }
  .site-nav a::after { display: none; }
  hr { background: #ccc; height: 1px; }
}

/* --- 28. Reduced-motion respect --- */
@media (prefers-reduced-motion: reduce) {
  .wordmark:hover .c-ai,
  .foundations__card,
  .vod-card,
  .media-card,
  .start-here__card,
  .channel,
  [class$="__card"],
  .site-nav a::after,
  .site-nav a {
    transition: none;
  }
  .foundations__card:hover,
  .vod-card:hover,
  .media-card:hover,
  .start-here__card:hover,
  [class$="__card"]:hover { transform: none; }
}

/* --- 29. Mobile refinements --- */
@media (max-width: 640px) {
  .cinematic-hero__kicker,
  .foundations__kicker,
  .hotd__kicker { font-size: 0.75rem; letter-spacing: 0.12em; }
  .site-nav a::after { display: none; }  /* nav is likely a hamburger on mobile */
}

/* ============================================================================
   CrossAIHub 2.0 — new-component style layer for Phase 3 homepage restructure.
   ========================================================================== */

/* --- 30. Today's rhythm section (verse + hymn combined) --- */
.today-rhythm {
  padding: clamp(3rem, 6vh, 5rem) 0;
  background: linear-gradient(180deg, #FDFBF5 0%, #FBF6E9 100%);
}
.today-rhythm__header {
  text-align: center;
  max-width: 44rem;
  margin: 0 auto 2.5rem;
}
.today-rhythm__kicker {
  color: #6B1F2E;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 500;
  margin-bottom: 0.75rem;
}
.today-rhythm__title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.008em;
  color: #2B2418;
  margin: 0 0 0.5rem;
}
.today-rhythm__lede {
  color: rgba(43, 36, 24, 0.72);
  font-size: 0.95rem;
  margin: 0;
}
.today-rhythm__grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: stretch;
}
.today-rhythm__col {
  background: #FFFEFB;
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 1px 3px rgba(43, 36, 24, 0.04),
              0 12px 32px -20px rgba(43, 36, 24, 0.08);
  border: 1px solid rgba(180, 135, 72, 0.14);
}
/* Reset the inner section's own background/padding so they compose neatly */
.today-rhythm__col > .vod-section,
.today-rhythm__col > .hotd {
  background: transparent;
  padding: 0;
  margin: 0;
}

/* --- 31. Five pathways section --- */
.pathways {
  padding: clamp(4rem, 8vh, 6.5rem) 0;
  background: #FDFBF5;
}
.pathways__header {
  text-align: center;
  max-width: 44rem;
  margin: 0 auto 3rem;
}
.pathways__kicker {
  color: #6B1F2E;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 500;
  margin-bottom: 0.75rem;
}
.pathways__title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.008em;
  color: #2B2418;
  margin: 0;
}
.pathways__grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  max-width: 84rem;
  margin: 0 auto;
}
/* Pathway card — the flagship new component */
.pathway-card {
  display: block;
  padding: 1.75rem 1.5rem 1.5rem;
  background: #FFFEFB;
  border: 1px solid rgba(180, 135, 72, 0.20);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(43, 36, 24, 0.04);
  transition: transform 260ms cubic-bezier(.2,.7,.3,1),
              border-color 260ms ease,
              box-shadow 260ms ease;
}
.pathway-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, #B48748 30%, #B48748 70%, transparent 100%);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 320ms cubic-bezier(.2,.7,.3,1);
}
.pathway-card:hover {
  transform: translateY(-3px);
  border-color: rgba(107, 31, 46, 0.35);
  box-shadow: 0 4px 8px rgba(43, 36, 24, 0.06),
              0 16px 36px -18px rgba(107, 31, 46, 0.20);
}
.pathway-card:hover::before {
  transform: scaleX(1);
}
.pathway-card:focus-visible {
  outline: 3px solid rgba(107, 31, 46, 0.35);
  outline-offset: 4px;
}
.pathway-card__mark {
  width: 44px;
  height: 44px;
  color: #B48748;
  margin-bottom: 1.25rem;
  transition: color 240ms ease, transform 320ms cubic-bezier(.2,.7,.3,1);
}
.pathway-card__mark svg {
  width: 100%;
  height: 100%;
  display: block;
}
.pathway-card:hover .pathway-card__mark {
  color: #6B1F2E;
  transform: scale(1.06);
}
.pathway-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.pathway-card__kicker {
  color: #6B1F2E;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 500;
}
.pathway-card__title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 500;
  color: #2B2418;
  margin: 0;
  letter-spacing: -0.005em;
  line-height: 1.28;
}
.pathway-card__note {
  color: rgba(43, 36, 24, 0.75);
  font-size: 0.925rem;
  line-height: 1.55;
  margin: 0;
}
.pathway-card__cta {
  color: #6B1F2E;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-top: 0.5rem;
  transition: transform 240ms ease;
  display: inline-block;
}
.pathway-card:hover .pathway-card__cta {
  transform: translateX(4px);
}

/* --- 32. Mobile refinements for new sections --- */
@media (max-width: 640px) {
  .today-rhythm__grid { gap: 1rem; }
  .today-rhythm__col { padding: 0.75rem; }
  .pathways { padding: 3rem 0; }
  .pathways__grid { gap: 1rem; }
  .pathway-card { padding: 1.5rem 1.25rem 1.25rem; }
  .pathway-card__mark { width: 36px; height: 36px; margin-bottom: 1rem; }
  .pathway-card__title { font-size: 1.2rem; }
}

/* ============================================================================
   PHASE 4 — Nav restructure: 30+ items → 6 pathways + utility icons.
   Applies to all 186 pages via bulk nav replacement.
   ========================================================================== */

/* --- 34. Site header layout — wordmark left, nav center, utility right --- */
.site-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: 0.85rem clamp(1rem, 3vw, 2rem);
  max-width: 84rem;
  margin: 0 auto;
}
.site-header__inner > .wordmark {
  flex: 0 0 auto;
}
.site-header__inner > .site-nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}
.site-header__inner > .site-header__utility {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* --- 35. Primary nav list — 6 pathways --- */
.site-nav__list {
  display: flex;
  gap: clamp(0.75rem, 1.6vw, 1.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}
.site-nav__list > .nav-item > .nav-trigger,
.site-nav__list > li > a {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: #2B2418;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0.5rem 0.35rem;
  cursor: pointer;
  transition: color 200ms ease;
  position: relative;
}
.site-nav__list > .nav-item > .nav-trigger:hover,
.site-nav__list > li > a:hover {
  color: #6B1F2E;
}
.site-nav__list > .nav-item > .nav-trigger::after {
  content: "";
  display: inline-block;
  margin-left: 0.35rem;
  width: 5px;
  height: 5px;
  border: solid rgba(43, 36, 24, 0.4);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
  transition: transform 200ms ease, border-color 200ms ease;
  vertical-align: 2px;
}
.site-nav__list > .nav-item > .nav-trigger:hover::after,
.site-nav__list > .nav-item[aria-expanded="true"] > .nav-trigger::after {
  border-color: #6B1F2E;
}

/* --- 36. Dropdown nav-menu refinement --- */
.nav-menu {
  min-width: 240px;
  padding: 0.75rem 0;
  background: #FFFEFB;
  border: 1px solid rgba(180, 135, 72, 0.20);
  border-radius: 10px;
  box-shadow: 0 12px 40px -18px rgba(43, 36, 24, 0.30),
              0 2px 6px rgba(43, 36, 24, 0.04);
}
.nav-menu li a {
  display: block;
  padding: 0.55rem 1.1rem;
  color: #2B2418;
  text-decoration: none;
  font-size: 0.9rem;
  transition: background 160ms ease, color 160ms ease;
}
.nav-menu li a:hover,
.nav-menu li a:focus-visible {
  background: rgba(180, 135, 72, 0.10);
  color: #6B1F2E;
  outline: none;
}
.nav-menu__heading {
  padding: 0.5rem 1.1rem 0.25rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6B1F2E;
}

/* --- 37. Utility icons area (right side of header) --- */
.site-header__utility {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.utility-link {
  color: rgba(43, 36, 24, 0.68);
  text-decoration: none;
  padding: 0.35rem;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: color 200ms ease, background 200ms ease;
}
.utility-link:hover {
  color: #6B1F2E;
  background: rgba(180, 135, 72, 0.10);
}
.utility-link:focus-visible {
  outline: 2px solid rgba(107, 31, 46, 0.35);
  outline-offset: 2px;
}
.utility-link__label {
  font-size: 0.85rem;
  font-weight: 500;
}
@media (max-width: 900px) {
  .utility-link__label { display: none; }
}

/* --- 38. Mobile menu button (visible only on small screens) --- */
.site-header__menu {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 20px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.site-header__menu span {
  display: block;
  height: 2px;
  background: #2B2418;
  border-radius: 1px;
  transition: transform 200ms ease, opacity 200ms ease;
}

@media (max-width: 900px) {
  .site-nav { display: none; }
  .site-header__menu { display: flex; }
  .site-header__inner > .site-header__utility { gap: 0.5rem; }
}

/* ============================================================================
   PHASE 5 — Section-page unification.
   Every section page (/atlas, /learn, /hymnal, /tools, /find-a-verse,
   /devotionals, /sanctuary, /prayers, /iconography, /letters, /community)
   gets consistent hero typography, spacing, and content presentation via
   these CSS overrides. No HTML restructure — just visual normalization.
   ========================================================================== */

/* --- 40. Unified page-hero across all section pages --- */
.page-hero,
.section-hero,
.sanctuary-hero {
  padding: clamp(3rem, 8vh, 5.5rem) 0 clamp(2.5rem, 5vh, 4rem);
  text-align: center;
  background: linear-gradient(180deg, #FDFBF5 0%, #FBF6E9 100%);
  position: relative;
  border-bottom: 1px solid rgba(180, 135, 72, 0.15);
}
.page-hero__inner,
.section-hero__inner,
.sanctuary-hero__inner {
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2rem);
}
/* Kicker text above title on section pages */
.page-hero .kicker,
.page-hero__kicker,
.section-hero__kicker,
.page-hero p.eyebrow,
.page-hero__eyebrow {
  color: #6B1F2E;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 500;
  margin: 0 0 0.65rem;
  font-family: "Inter", system-ui, sans-serif;
}
/* Title on section pages */
.page-hero h1,
.section-hero h1,
.sanctuary-hero h1,
main > header h1 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 500;
  letter-spacing: -0.012em;
  color: #2B2418;
  margin: 0 0 0.75rem;
  line-height: 1.12;
}
/* Lede paragraph */
.page-hero .lede,
.page-hero__lede,
.section-hero__lede,
.page-hero p:not(.eyebrow):not(.kicker) {
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  color: rgba(43, 36, 24, 0.78);
  line-height: 1.6;
  max-width: 38rem;
  margin: 0.5rem auto 0;
}

/* --- 41. Main content prose containers on section pages --- */
main .container--prose,
main .prose,
article.prose {
  max-width: 42rem;
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 3vw, 2rem);
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.72;
  color: #2B2418;
}
main .container--prose h2,
main .prose h2,
article.prose h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.85rem;
  font-weight: 500;
  letter-spacing: -0.008em;
  margin-top: 2.5rem;
  margin-bottom: 0.5rem;
}
main .container--prose h3,
main .prose h3 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.4rem;
  font-weight: 500;
  margin-top: 1.75rem;
  margin-bottom: 0.35rem;
}
main .container--prose p,
main .prose p {
  margin: 0 0 1.1rem;
}
main .container--prose a:not(.btn),
main .prose a:not(.btn) {
  color: #6B1F2E;
  text-decoration-color: rgba(180, 135, 72, 0.6);
  text-underline-offset: 0.15em;
}
main .container--prose a:hover:not(.btn),
main .prose a:hover:not(.btn) {
  color: #4A1520;
  text-decoration-color: #B48748;
}

/* --- 42. Section-page sibling/related-pathway footer (before global footer) --- */
.related-pathways {
  padding: clamp(3rem, 6vh, 5rem) 0;
  background: #F6EFDF;
  border-top: 1px solid rgba(180, 135, 72, 0.20);
}
.related-pathways__inner {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2rem);
  text-align: center;
}
.related-pathways__kicker {
  color: #6B1F2E;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 500;
  margin-bottom: 0.6rem;
}
.related-pathways__title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  font-weight: 500;
  color: #2B2418;
  margin: 0 0 1.5rem;
}
.related-pathways__grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.related-pathways__link {
  padding: 0.85rem 1.1rem;
  background: #FFFEFB;
  border: 1px solid rgba(180, 135, 72, 0.22);
  border-radius: 8px;
  color: #2B2418;
  text-decoration: none;
  font-weight: 500;
  transition: border-color 200ms ease, transform 200ms ease, background 200ms ease;
}
.related-pathways__link:hover {
  border-color: rgba(107, 31, 46, 0.4);
  background: #FFFCF5;
  transform: translateY(-1px);
  color: #6B1F2E;
}

/* ============================================================================
   PHASE 6 — Component consolidation.
   Card variants unified. All cards inherit shared foundation; variants
   only differ in size/emphasis.
   ========================================================================== */

/* --- 43. Base card foundation (applies to all card-like elements) --- */
.foundations__card,
.vod-card,
.media-card,
.start-here__card,
.channel,
.hotd {
  background: #FFFEFB;
  border-radius: 10px;
  border: 1px solid rgba(180, 135, 72, 0.14);
  transition: transform 260ms cubic-bezier(.2,.7,.3,1),
              box-shadow 260ms cubic-bezier(.2,.7,.3,1),
              border-color 260ms ease;
}
.foundations__card:hover,
.vod-card:hover,
.media-card:hover,
.start-here__card:hover,
.channel:hover {
  transform: translateY(-2px);
  border-color: rgba(180, 135, 72, 0.35);
  box-shadow: 0 6px 12px rgba(43, 36, 24, 0.05),
              0 20px 40px -22px rgba(43, 36, 24, 0.14);
}

/* ============================================================================
   PHASE 7 — Mobile-first refinements.
   Ensures every new component reads well on phones.
   ========================================================================== */

@media (max-width: 900px) {
  .site-header__inner { padding: 0.75rem 1rem; gap: 0.75rem; }
  .site-nav__list { gap: 0.5rem; }
}
@media (max-width: 720px) {
  .site-nav__list > .nav-item > .nav-trigger { font-size: 0.85rem; padding: 0.35rem 0.2rem; }
  .today-rhythm__grid { grid-template-columns: 1fr; gap: 1rem; }
  .pathways__grid { grid-template-columns: 1fr; gap: 0.85rem; }
  .pathway-card { padding: 1.35rem 1.15rem 1.15rem; }
  .pathway-card__title { font-size: 1.15rem; }
  .related-pathways__grid { grid-template-columns: 1fr 1fr; }
  .page-hero, .section-hero, .sanctuary-hero { padding: 2.5rem 1rem 2rem; }
}
@media (max-width: 480px) {
  .related-pathways__grid { grid-template-columns: 1fr; }
  main .container--prose { padding: 1.25rem 1rem; font-size: 1rem; }
  main .container--prose h2 { font-size: 1.5rem; }
}

/* ============================================================================
   PHASE 8 — BrandOS final polish.
   Small, purposeful identity touches. No decorative noise.
   ========================================================================== */

/* --- 44. Wordmark cross icon: subtle wax-color transition on hover --- */
.wordmark:hover .wordmark__cross {
  color: #6B1F2E;
  transition: color 240ms ease;
}
.wordmark .wordmark__cross {
  color: currentColor;
  transition: color 240ms ease;
}

/* --- 45. Skip link elegant styling --- */
.skip-link {
  background: #6B1F2E;
  color: #F6EFDF;
  padding: 0.6rem 1rem;
  border-radius: 4px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* --- 46. Reduced motion respect --- */
@media (prefers-reduced-motion: reduce) {
  .wordmark:hover .c-ai,
  .foundations__card,
  .vod-card,
  .media-card,
  .start-here__card,
  .channel,
  [class$="__card"],
  .site-nav a::after,
  .site-nav a,
  .wordmark .wordmark__cross,
  .pathway-card,
  .pathway-card__mark,
  .pathway-card__cta,
  .pathway-card::before,
  .related-pathways__link,
  .utility-link { transition: none; }
  .foundations__card:hover,
  .vod-card:hover,
  .media-card:hover,
  .start-here__card:hover,
  [class$="__card"]:hover,
  .pathway-card:hover,
  .related-pathways__link:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pathway-card,
  .pathway-card__mark,
  .pathway-card__cta,
  .pathway-card::before { transition: none; }
  .pathway-card:hover { transform: none; }
  .pathway-card:hover .pathway-card__mark { transform: none; }
  .pathway-card:hover .pathway-card__cta { transform: none; }
}

/* ============================================================================
   CROSSAIHUB 3.0 — PHASE 3.1 FOUNDATION LAYER (2026-07-07)
   ---------------------------------------------------------------------------
   Contract: this block DEFINES the 3.0 design tokens and utility classes
   without APPLYING them to any existing component. Existing 2.0 rules above
   remain in force. Later phases (3.3+) opt components in explicitly.

   Ratified in:
     • CROSSAIHUB_3_HOME_ARCHITECTURE_MASTERPLAN.md
     • CROSSAIHUB_3_IMPLEMENTATION_BLUEPRINT.md §3

   Scope of this phase:
     ✓ Color tokens (parchment · ink · wax burgundy · gold — sanctuary deep)
     ✓ Typography rhythm (three faces · major-third rem scale · 68ch prose)
     ✓ Spacing ladder (4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128 px)
     ✓ Border / shadow / motion / focus / responsive VARIABLES only
     ✗ No component styling
     ✗ No structural HTML change
     ✗ No existing 2.0 rule modified
   ========================================================================== */

:root {

  /* ── 3.0 Palette (ratified — retire coral/rose/sky in later phases) ── */
  --ch3-parchment-1:         #FDFBF5;   /* page background */
  --ch3-parchment-2:         #F6EFDF;   /* card / table surface */
  --ch3-parchment-3:         #EAE2CB;   /* recessed alcove */
  --ch3-sanctuary-deep:      #3C2E1B;   /* iconography / atlas dim bg */

  --ch3-ink:                 #2B2418;   /* body text — never #000 */
  --ch3-ink-soft:            rgba(43, 36, 24, 0.72);  /* secondary text */
  --ch3-ink-whisper:         rgba(43, 36, 24, 0.42);  /* metadata, small caps */

  --ch3-wax-burgundy:        #6B1F2E;   /* kicker, citation, wax seal */
  --ch3-wax-burgundy-warm:   #7A2532;   /* burgundy hover state */

  --ch3-chalice-gold:        #B48748;   /* rules, borders, small cross */
  --ch3-chalice-gold-glint:  #D6A868;   /* rare highlight — one per view */

  /* ── 3.0 Typography families (loaded via existing Google Fonts link) ── */
  --ch3-ff-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ch3-ff-body:    "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ch3-ff-mono:    "IBM Plex Mono", "SF Mono", Consolas, monospace;

  /* ── 3.0 Type scale — major-third rem ladder ── */
  --ch3-fs-000: 0.75rem;    /* small caps, footnote */
  --ch3-fs-100: 0.875rem;   /* metadata */
  --ch3-fs-200: 1rem;       /* body */
  --ch3-fs-300: 1.25rem;    /* lede */
  --ch3-fs-400: 1.5rem;     /* h3 */
  --ch3-fs-500: 2rem;       /* h2 */
  --ch3-fs-600: 3rem;       /* h1 */
  --ch3-fs-700: 4.5rem;     /* hero display */

  /* ── 3.0 Line heights ── */
  --ch3-lh-body:    1.65;
  --ch3-lh-prose:   1.72;   /* long reading, ≤ 68ch */
  --ch3-lh-display: 1.15;

  --ch3-tracking-kicker: 0.14em;

  /* ── 3.0 Prose column rule (68 characters, inviolable) ── */
  --ch3-prose-column-max: 42rem;

  /* ── 3.0 Spacing ladder (rem equivalents of 4/8/12/16/24/32/48/64/96/128) ── */
  --ch3-s-1:  0.25rem;   /* 4px  */
  --ch3-s-2:  0.5rem;    /* 8px  */
  --ch3-s-3:  0.75rem;   /* 12px */
  --ch3-s-4:  1rem;      /* 16px */
  --ch3-s-5:  1.5rem;    /* 24px */
  --ch3-s-6:  2rem;      /* 32px */
  --ch3-s-7:  3rem;      /* 48px */
  --ch3-s-8:  4rem;      /* 64px */
  --ch3-s-9:  6rem;      /* 96px */
  --ch3-s-10: 8rem;      /* 128px */

  /* ── 3.0 Borders ── */
  --ch3-border-hair:    1px solid rgba(180, 135, 72, 0.20);
  --ch3-scripture-rule: 3px solid rgba(180, 135, 72, 0.55);
  --ch3-rule-gold-h:    linear-gradient(90deg,
                          transparent 0%,
                          rgba(180, 135, 72, 0.35) 30%,
                          rgba(180, 135, 72, 0.35) 70%,
                          transparent 100%);

  /* ── 3.0 Shadows (warm only — never neutral gray) ── */
  --ch3-shadow-none:  none;
  --ch3-shadow-warm:  0 4px 8px rgba(43, 36, 24, 0.06),
                      0 16px 36px -18px rgba(107, 31, 46, 0.20);

  /* ── 3.0 Motion (only 4 durations allowed site-wide) ── */
  --ch3-motion-breath-duration:    6000ms;
  --ch3-motion-breath-curve:       ease-in-out;
  --ch3-motion-underline-duration: 240ms;
  --ch3-motion-underline-curve:    cubic-bezier(0.2, 0.7, 0.3, 1);
  --ch3-motion-card-duration:      260ms;
  --ch3-motion-card-curve:         cubic-bezier(0.2, 0.7, 0.3, 1);
  --ch3-motion-arrow-duration:     200ms;
  --ch3-motion-arrow-curve:        cubic-bezier(0.2, 0.7, 0.3, 1);

  /* ── 3.0 Focus ring ── */
  --ch3-focus-ring:    3px solid rgba(107, 31, 46, 0.35);
  --ch3-focus-offset:  3px;

  /* ── 3.0 Responsive breakpoints (reference — used by later @media queries) ── */
  --ch3-bp-mobile:  480px;
  --ch3-bp-tablet:  900px;
}

/* ── Reduced motion — disable the four site-wide motions gracefully ── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ch3-motion-breath-duration:    0ms;
    --ch3-motion-underline-duration: 0ms;
    --ch3-motion-card-duration:      0ms;
    --ch3-motion-arrow-duration:     0ms;
  }
}

/* ============================================================================
   3.0 Utility classes — AVAILABLE but not yet APPLIED by Phase 3.1.
   Later phases opt components in explicitly. Present here so that any
   component author can preview the 3.0 look by adding `class="ch3-*"` to a
   test element without touching production markup.
   ========================================================================== */

.ch3-prose {
  max-width: var(--ch3-prose-column-max);
  font-family: var(--ch3-ff-body);
  font-size: var(--ch3-fs-200);
  line-height: var(--ch3-lh-prose);
  color: var(--ch3-ink);
  margin-inline: auto;
  padding-inline: var(--ch3-s-4);
}

.ch3-display {
  font-family: var(--ch3-ff-display);
  font-weight: 500;
  line-height: var(--ch3-lh-display);
  letter-spacing: -0.008em;
  color: var(--ch3-ink);
}

.ch3-kicker {
  font-family: var(--ch3-ff-body);
  font-size: var(--ch3-fs-000);
  font-weight: 500;
  color: var(--ch3-wax-burgundy);
  letter-spacing: var(--ch3-tracking-kicker);
  text-transform: uppercase;
}

.ch3-scripture {
  border-left: var(--ch3-scripture-rule);
  padding-left: var(--ch3-s-5);
  font-family: var(--ch3-ff-display);
  font-style: italic;
  font-size: var(--ch3-fs-300);
  color: var(--ch3-ink);
  line-height: var(--ch3-lh-prose);
}
.ch3-scripture cite,
.ch3-citation {
  display: block;
  font-family: var(--ch3-ff-body);
  font-style: normal;
  font-weight: 500;
  font-size: var(--ch3-fs-000);
  color: var(--ch3-wax-burgundy);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: var(--ch3-s-2);
}

.ch3-rule-gold {
  height: 1px;
  border: 0;
  background: var(--ch3-rule-gold-h);
  margin: var(--ch3-s-6) auto;
  width: 240px;
}

/* Phase 3.1 END */

/* ========================================================================
   CROSSAIHUB 3.0 — PHASE 3.2 ROOM SHELL (2026-07-07)
   Additive overlay. Restyles nav (front-door ribbon) + footer (Exit Blessing)
   + mobile hamburger (small door) using ONLY the Phase 3.1 tokens.
   Wordmark "AI" tint applied here per the Phase 3.2 brief. All 2.0 layout
   survives underneath — this layer wins by specificity + last-declared order.
   ==================================================================== */

/* -------- 1. FRONT DOOR RIBBON — .site-header ----------------------- */
.site-header {
  background: var(--ch3-parchment-1);
  border-bottom: 1px solid rgba(180, 135, 72, 0.18);
  box-shadow: 0 1px 0 0 rgba(180, 135, 72, 0.06);
  padding-top: var(--ch3-s-3);
  padding-bottom: var(--ch3-s-3);
}
.site-header__inner {
  max-width: 76rem;
  padding-left: var(--ch3-s-5);
  padding-right: var(--ch3-s-5);
}

/* -------- 2. WORDMARK AS DOOR PLATE --------------------------------- */
.wordmark {
  color: var(--ch3-ink);
  font-family: var(--ch3-ff-display);
  letter-spacing: 0.008em;
}
.wordmark__cross {
  color: var(--ch3-wax-burgundy);
}
.wordmark__text {
  font-family: var(--ch3-ff-display);
  font-weight: 500;
  letter-spacing: 0.008em;
}
.wordmark__text .c-cross,
.wordmark__text .c-hub {
  color: var(--ch3-ink);
  -webkit-text-fill-color: var(--ch3-ink);
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
}
.wordmark__text .c-ai {
  color: var(--ch3-wax-burgundy) !important;
  -webkit-text-fill-color: var(--ch3-wax-burgundy) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
          background-clip: initial !important;
  font-style: italic;
  font-weight: 500;
}

/* -------- 3. NAV RIBBON — quiet doorbell buttons -------------------- */
.site-nav__list {
  gap: var(--ch3-s-6);
}
.nav-item .nav-trigger {
  font-family: var(--ch3-ff-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ch3-ink-soft);
  letter-spacing: 0.01em;
  padding: var(--ch3-s-2) 0;
  background: transparent;
  border: 0;
  transition: color var(--ch3-motion-underline-duration) var(--ch3-motion-underline-curve);
  position: relative;
  cursor: pointer;
}
.nav-item .nav-trigger::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: var(--ch3-chalice-gold);
  transform: translateX(-50%);
  transition: width var(--ch3-motion-underline-duration) var(--ch3-motion-underline-curve);
}
.nav-item .nav-trigger:hover,
.nav-item .nav-trigger:focus-visible,
.nav-item .nav-trigger[aria-expanded="true"] {
  color: var(--ch3-ink);
}
.nav-item .nav-trigger:hover::after,
.nav-item .nav-trigger:focus-visible::after,
.nav-item .nav-trigger[aria-expanded="true"]::after {
  width: 100%;
}
.nav-item .nav-trigger:focus-visible {
  outline: var(--ch3-focus-ring);
  outline-offset: 4px;
  border-radius: 3px;
}

/* Dropdown menus reshaped as parchment cards */
.nav-menu {
  background: var(--ch3-parchment-1);
  border: 1px solid rgba(180, 135, 72, 0.22);
  border-radius: 4px;
  box-shadow: var(--ch3-shadow-warm);
  padding: var(--ch3-s-4);
}
.nav-menu li a {
  color: var(--ch3-ink-soft);
  font-family: var(--ch3-ff-body);
  font-size: 0.92rem;
  padding: var(--ch3-s-2) var(--ch3-s-3);
  border-radius: 3px;
  transition: color var(--ch3-motion-underline-duration) var(--ch3-motion-underline-curve),
              background var(--ch3-motion-underline-duration) var(--ch3-motion-underline-curve);
}
.nav-menu li a:hover,
.nav-menu li a:focus-visible {
  color: var(--ch3-wax-burgundy);
  background: rgba(180, 135, 72, 0.06);
}
.nav-menu__heading {
  font-family: var(--ch3-ff-body);
  font-size: var(--ch3-fs-000);
  font-weight: 600;
  letter-spacing: var(--ch3-kicker-tracking);
  text-transform: uppercase;
  color: var(--ch3-ink-whisper);
  padding: var(--ch3-s-2) var(--ch3-s-3);
  margin-bottom: var(--ch3-s-2);
  border-bottom: 1px solid rgba(180, 135, 72, 0.14);
}

/* Utility icons — smaller, softer */
.site-header__utility {
  gap: var(--ch3-s-3);
}
.utility-link {
  color: var(--ch3-ink-whisper);
  transition: color var(--ch3-motion-underline-duration) var(--ch3-motion-underline-curve);
}
.utility-link:hover,
.utility-link:focus-visible {
  color: var(--ch3-wax-burgundy);
}

/* -------- 4. HAMBURGER — small side door ---------------------------- */
.site-header__menu {
  background: transparent;
  border: 1px solid rgba(180, 135, 72, 0.22);
  border-radius: 3px;
  padding: 8px 10px;
  width: 40px;
  height: 40px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--ch3-motion-underline-duration) var(--ch3-motion-underline-curve),
              background var(--ch3-motion-underline-duration) var(--ch3-motion-underline-curve);
}
.site-header__menu span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ch3-ink);
  margin: 3px auto;
  transition: transform var(--ch3-motion-underline-duration) var(--ch3-motion-underline-curve),
              opacity var(--ch3-motion-underline-duration) var(--ch3-motion-underline-curve);
  border-radius: 1px;
}
.site-header__menu:hover,
.site-header__menu:focus-visible {
  border-color: var(--ch3-wax-burgundy);
  background: rgba(180, 135, 72, 0.05);
}
.site-header__menu[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(4.5px) rotate(45deg);
}
.site-header__menu[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.site-header__menu[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-4.5px) rotate(-45deg);
}

/* -------- 5. MOBILE — nav collapses into small door ---------------- */
@media (max-width: 899px) {
  .site-nav {
    display: none;
    order: 3;
    width: 100%;
    margin-top: var(--ch3-s-4);
  }
  .site-header[data-menu-open="true"] .site-nav,
  .site-header .site-nav[data-open="true"] {
    display: block;
  }
  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: var(--ch3-s-2);
  }
  .nav-item {
    border-bottom: 1px solid rgba(180, 135, 72, 0.12);
    padding-bottom: var(--ch3-s-2);
  }
  .nav-item:last-child { border-bottom: 0; }
  .nav-item .nav-trigger {
    display: block;
    text-align: left;
    padding: var(--ch3-s-3) 0;
    font-size: 1.05rem;
  }
  .nav-menu {
    position: static;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding: 0 0 var(--ch3-s-3) var(--ch3-s-3);
    background: transparent;
  }
  .site-header__menu {
    display: inline-flex;
  }
  .site-header__utility {
    order: 2;
  }
  .site-header__inner {
    flex-wrap: wrap;
    row-gap: var(--ch3-s-2);
  }
}

/* -------- 6. EXIT BLESSING FOOTER — .site-footer.ch3-exit-blessing -- */
.site-footer.ch3-exit-blessing {
  background: var(--ch3-parchment-2);
  color: var(--ch3-ink);
  padding: var(--ch3-s-9) var(--ch3-s-5) var(--ch3-s-7);
  border-top: 1px solid rgba(180, 135, 72, 0.18);
  margin-top: var(--ch3-s-9);
  font-family: var(--ch3-ff-body);
  text-align: center;
}
.ch3-blessing-inner {
  max-width: 42rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ch3-s-4);
}

/* Coffee Bench — soft italic, warm, no CTAs */
.ch3-coffee-bench {
  font-family: var(--ch3-ff-body);
  font-style: italic;
  font-size: 0.98rem;
  line-height: var(--ch3-lh-prose);
  color: var(--ch3-ink-soft);
  max-width: 34rem;
  margin: 0 auto var(--ch3-s-4);
}
.ch3-coffee-bench a {
  color: var(--ch3-wax-burgundy);
  text-decoration: none;
  border-bottom: 1px solid rgba(107, 31, 46, 0.22);
  transition: color var(--ch3-motion-underline-duration) var(--ch3-motion-underline-curve),
              border-color var(--ch3-motion-underline-duration) var(--ch3-motion-underline-curve);
}
.ch3-coffee-bench a:hover,
.ch3-coffee-bench a:focus-visible {
  color: var(--ch3-wax-burgundy-warm);
  border-color: var(--ch3-wax-burgundy);
}
.ch3-coffee-bench__more {
  font-style: normal;
}

/* Wax seal — natural end of the journey. CSS-only medallion */
.ch3-blessing-mark {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 32%, var(--ch3-wax-burgundy-warm) 0%, var(--ch3-wax-burgundy) 60%, #4d1621 100%);
  box-shadow: inset 2px 3px 6px rgba(255, 255, 255, 0.14),
              inset -2px -3px 6px rgba(0, 0, 0, 0.30),
              0 4px 12px rgba(107, 31, 46, 0.22);
  position: relative;
  margin: var(--ch3-s-3) auto;
}
.ch3-blessing-mark::before,
.ch3-blessing-mark::after {
  content: "";
  position: absolute;
  background: var(--ch3-chalice-gold-glint);
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.35));
}
.ch3-blessing-mark::before {
  /* vertical bar of cross */
  width: 6px;
  height: 44px;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 1px;
}
.ch3-blessing-mark::after {
  /* horizontal bar of cross */
  width: 30px;
  height: 6px;
  top: 42px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 1px;
}

/* Exit blessing text — the last line the visitor reads */
.ch3-blessing-text {
  font-family: var(--ch3-ff-display);
  font-size: var(--ch3-fs-400);
  font-style: italic;
  color: var(--ch3-ink);
  line-height: var(--ch3-lh-display);
  margin: 0;
  max-width: 30rem;
}
.ch3-scripture-citation {
  font-family: var(--ch3-ff-body);
  font-size: var(--ch3-fs-000);
  color: var(--ch3-ink-whisper);
  letter-spacing: 0.06em;
  margin: 0 0 var(--ch3-s-4);
}

/* Signature line */
.ch3-signature {
  font-family: var(--ch3-ff-display);
  font-size: 0.95rem;
  color: var(--ch3-ink-soft);
  margin: 0;
}
.ch3-signoff {
  font-family: var(--ch3-ff-body);
  font-size: 0.82rem;
  color: var(--ch3-ink-whisper);
  letter-spacing: 0.02em;
  margin: var(--ch3-s-2) 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--ch3-s-2);
}
.ch3-signoff a {
  color: var(--ch3-ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--ch3-motion-underline-duration) var(--ch3-motion-underline-curve),
              border-color var(--ch3-motion-underline-duration) var(--ch3-motion-underline-curve);
}
.ch3-signoff a:hover,
.ch3-signoff a:focus-visible {
  color: var(--ch3-wax-burgundy);
  border-bottom-color: var(--ch3-wax-burgundy);
}
.ch3-signoff__sep {
  opacity: 0.4;
}

/* No-track badge — kept, softened */
.site-footer.ch3-exit-blessing .no-track-badge {
  margin-top: var(--ch3-s-5);
  color: var(--ch3-ink-whisper);
  font-size: 0.78rem;
  background: transparent;
  border: 0;
  padding: var(--ch3-s-2) var(--ch3-s-3);
  text-decoration: none;
  border-radius: 3px;
  transition: color var(--ch3-motion-underline-duration) var(--ch3-motion-underline-curve);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.site-footer.ch3-exit-blessing .no-track-badge:hover,
.site-footer.ch3-exit-blessing .no-track-badge:focus-visible {
  color: var(--ch3-wax-burgundy);
}

/* Mobile footer tuning */
@media (max-width: 480px) {
  .site-footer.ch3-exit-blessing {
    padding: var(--ch3-s-7) var(--ch3-s-4) var(--ch3-s-5);
  }
  .ch3-blessing-text {
    font-size: 1.35rem;
  }
  .ch3-signoff {
    font-size: 0.75rem;
  }
}

/* Reduced motion — remove all Room-shell transitions */
@media (prefers-reduced-motion: reduce) {
  .site-header, .wordmark, .nav-trigger, .nav-trigger::after,
  .nav-menu li a, .utility-link, .site-header__menu,
  .site-header__menu span, .ch3-coffee-bench a, .ch3-signoff a,
  .site-footer.ch3-exit-blessing .no-track-badge {
    transition: none !important;
  }
}

/* Phase 3.2 END — Room shell active site-wide. Interior rooms (homepage,
   Sacred/Study/Times rooms) remain 2.0 until Phase 3.3+. */