/* =====================================================================
   CrossAIHub — CELESTIAL
   A single, authoritative visual identity. Heaven + Technology.
   Loaded LAST. This file wins the cascade on purpose.

   Built 2026-06-16 to end the per-page-CSS cascade war. It assumes the
   structural files (main.css, luminous.css, lumen-components.css,
   lumen-clean-identities.css, lumen-today.css, hymn-player.css,
   lumen-nav-dropdowns.css, lumen-rainbow-stripe.css) still provide
   layout for the current markup. Everything else was unlinked.

   Design language
   ---------------
   HEAVEN     warm cream daylight, navy night, gold leaf, halos,
              illuminated scripture, candle light, slow reverent motion.
   TECHNOLOGY glass panels, a faint engineering grid, mono where it earns
              it (scripture refs, kickers on AI pages, glossary terms),
              conic-gradient light, SVG draw-in, scroll reveals.

   Two modes
   ---------
   LIGHT (default) = "joy in the morning" — paper + cream + navy ink + gold.
   DARK  (html[data-theme="dark"]) = "the night vigil" — deep navy + gold.

   Mobile-first. AA contrast both modes. Honors prefers-reduced-motion.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1 · TOKENS  (override everything above)
   --------------------------------------------------------------------- */
:root {
  /* Brand law — immovable */
  --c-navy:        #0D1117;
  --c-navy-2:      #141B2E;
  --c-navy-3:      #1C2438;
  --c-gold:        #D4A843;
  --c-gold-deep:   #B8902C;
  --c-gold-lite:   #F2D98C;   /* gold-leaf highlight */
  --c-cream:       #E8E6E1;
  --c-cream-warm:  #F5F2EB;
  --c-paper:       #FBFAF6;

  /* Tech accents — used at low opacity for glow only, never as body text */
  --c-cyan:        #5BC8D6;
  --c-violet:      #8E8CFF;

  /* Semantic surface + ink (re-pointed per mode below) */
  --surface:        var(--c-paper);
  --surface-2:      var(--c-cream-warm);
  --surface-3:      #EFEBE0;
  --ink:            #161B26;
  --ink-soft:       #434A59;
  --ink-faint:      #6C7382;
  --hair:           rgba(13,17,23,0.10);
  --hair-strong:    rgba(13,17,23,0.16);
  --accent:         var(--c-gold);
  --accent-strong:  var(--c-gold-deep);
  --accent-ink:     var(--c-navy);      /* text that sits ON gold */
  --page-accent:    var(--c-gold);      /* JS may repoint per liturgical color */

  /* Glass */
  --glass:        rgba(255,255,255,0.55);
  --glass-brd:    rgba(255,255,255,0.70);
  --glass-blur:   14px;

  /* Halo / glow */
  --halo-1: rgba(212,168,67,0.55);
  --halo-2: rgba(212,168,67,0.00);
  --glow-cyan: rgba(91,200,214,0.14);
  --glow-violet: rgba(142,140,255,0.12);

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(13,17,23,.05), 0 6px 18px -10px rgba(13,17,23,.16);
  --shadow-2: 0 4px 10px rgba(13,17,23,.07), 0 22px 48px -22px rgba(13,17,23,.30);
  --shadow-gold: 0 10px 40px -16px rgba(212,168,67,.45);

  /* Type */
  --font-serif: "Cormorant Garamond","Cormorant",Georgia,serif;
  --font-sans:  "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-mono:  "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Fluid scale */
  --t-xs:   .75rem;
  --t-sm:   .875rem;
  --t-base: 1.02rem;
  --t-lg:   clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  --t-xl:   clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  --t-2xl:  clamp(2rem, 1.5rem + 2.4vw, 3rem);
  --t-3xl:  clamp(2.6rem, 1.8rem + 4vw, 4.4rem);

  /* Rhythm */
  --gap: clamp(1rem, .6rem + 1.6vw, 2rem);
  --pad-section: clamp(3.5rem, 2rem + 6vw, 7rem);
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --ring: 0 0 0 3px rgba(212,168,67,.35);

  --ease: cubic-bezier(.22,.61,.36,1);
  --t-fast: 160ms var(--ease);
  --t-med:  340ms var(--ease);
  --t-slow: 720ms var(--ease);
}

/* DARK — the night vigil */
html[data-theme="dark"] {
  --surface:     #0B0F17;
  --surface-2:   #111726;
  --surface-3:   #161E30;
  --ink:         #ECE7DC;
  --ink-soft:    #C3C9D6;
  --ink-faint:   #8C94A6;
  --hair:        rgba(232,230,225,0.12);
  --hair-strong: rgba(232,230,225,0.20);
  --accent-ink:  var(--c-navy);
  --glass:       rgba(22,30,48,0.55);
  --glass-brd:   rgba(212,168,67,0.22);
  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 8px 22px -12px rgba(0,0,0,.6);
  --shadow-2: 0 6px 16px rgba(0,0,0,.45), 0 28px 60px -24px rgba(0,0,0,.7);
  --halo-1: rgba(212,168,67,0.45);
  --glow-cyan: rgba(91,200,214,0.20);
  --glow-violet: rgba(142,140,255,0.18);
  color-scheme: dark;
}

/* ---------------------------------------------------------------------
   2 · BASE
   --------------------------------------------------------------------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background:
    radial-gradient(1200px 700px at 80% -10%, var(--glow-cyan), transparent 60%),
    radial-gradient(900px 600px at -10% 8%, var(--glow-violet), transparent 55%),
    var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--t-med), color var(--t-med);
}

h1,h2,h3 {
  font-family: var(--font-serif);
  color: var(--ink);
  line-height: 1.08;
  letter-spacing: .005em;
  font-weight: 500;
  text-wrap: balance;
}
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); }
h1 em, h2 em, h3 em { color: var(--accent-strong); font-style: italic; }
html[data-theme="dark"] h1 em,
html[data-theme="dark"] h2 em,
html[data-theme="dark"] h3 em { color: var(--c-gold-lite); }

p { color: var(--ink-soft); }

a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: .18em; transition: color var(--t-fast), text-decoration-color var(--t-fast); }
a:hover { color: var(--accent-strong); }
html[data-theme="dark"] a:hover { color: var(--c-gold-lite); }

::selection { background: rgba(212,168,67,.30); color: var(--ink); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: 6px;
}

/* mono where it earns it */
cite, .section__kicker, .kicker, .foundations__kicker,
.scripture-frame cite, code, kbd, .verse-band__ref {
  font-family: var(--font-mono);
  font-style: normal;
  letter-spacing: .02em;
}

/* ---------------------------------------------------------------------
   3 · GOLD-LEAF WORDMARK  (header, hero, footer)
   --------------------------------------------------------------------- */
.site-mark__name,
.cinematic-hero__logo span:last-child,
.footer-mark__name {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: .01em;
  background: linear-gradient(100deg,
      var(--c-gold-deep) 0%, var(--c-gold) 22%, var(--c-gold-lite) 42%,
      var(--c-gold) 60%, var(--c-gold-deep) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: leafSweep 9s linear infinite;
}
.site-mark__name .ai,
.cinematic-hero__logo .ai,
.footer-mark__name .ai { -webkit-text-fill-color: transparent; }
@keyframes leafSweep { to { background-position: 220% 0; } }

/* ---------------------------------------------------------------------
   4 · HEADER + NAV  (glass, sticky, gold active)
   --------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 200;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--hair);
  box-shadow: 0 1px 0 rgba(212,168,67,.12);
}
.site-mark__icon svg rect { fill: var(--c-navy); }
html[data-theme="dark"] .site-mark__icon svg rect { fill: #0a0e16; stroke: rgba(212,168,67,.3); }

/* social bar — thin gold-lit rule */
.social-bar { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); background: color-mix(in srgb, var(--surface-2) 70%, transparent); }

/* icon nav */
.nav-icon { color: var(--ink-soft); border-radius: 12px; transition: color var(--t-fast), background var(--t-fast), transform var(--t-fast); }
.nav-icon:hover { color: var(--accent-strong); background: rgba(212,168,67,.10); transform: translateY(-1px); }
.nav-icon[aria-current="page"] { color: var(--accent-strong); }
.nav-icon[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: -2px; translate: -50% 0;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
.site-action { color: var(--ink-soft); }
.site-action:hover { color: var(--accent-strong); }
.site-action--pray { background: var(--accent); color: var(--accent-ink); border-radius: var(--radius-pill); }
.site-action--pray:hover { background: var(--accent-strong); }

/* nav dropdown panel — glass */
.nav-dropdown__menu {
  background: var(--surface);
  border: 1px solid var(--hair-strong);
  border-radius: 16px;
  box-shadow: var(--shadow-2);
}
.nav-dropdown__menu a { color: var(--ink-soft); border-radius: 8px; }
.nav-dropdown__menu a:hover { color: var(--accent-strong); background: rgba(212,168,67,.10); }

/* theme toggle (injected) */
.lumen-theme-toggle { color: var(--ink-soft); }
.lumen-theme-toggle:hover { color: var(--accent-strong); }

/* ---------------------------------------------------------------------
   5 · CINEMATIC HERO
   --------------------------------------------------------------------- */
/* The hero is its own dark "night sky" stage. The original markup relied on
   a dawn photo (.cinematic-hero__media) that clean-reset.js strips, and
   luminous.css leaves the background transparent — which dropped white text
   onto the light page. Force a cinematic celestial backdrop regardless. */
.cinematic-hero {
  position: relative; isolation: isolate;
  min-height: clamp(78vh, 70vh, 90vh);
  display: grid; place-items: center; overflow: clip;
  background:
    radial-gradient(55% 45% at 50% 30%, rgba(212,168,67,.20), transparent 62%),
    radial-gradient(130% 95% at 50% -10%, #1a2540, transparent 70%),
    linear-gradient(180deg, #0D1117 0%, #070A12 100%) !important;
}
.cinematic-hero__media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.cinematic-hero__veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(70% 60% at 50% 28%, rgba(212,168,67,.22), transparent 60%),
    linear-gradient(180deg, rgba(7,10,16,.50) 0%, rgba(7,10,16,.66) 55%, rgba(7,10,16,.92) 100%);
}
/* engineering grid — the "technology" whisper */
.cinematic-hero__grid {
  position: absolute; inset: 0; z-index: 1; opacity: .5;
  background-image:
    linear-gradient(rgba(212,168,67,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,168,67,.08) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(75% 70% at 50% 35%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(75% 70% at 50% 35%, #000 30%, transparent 78%);
}
.cinematic-hero__inner { position: relative; z-index: 3; text-align: center; max-width: 56rem; padding: 0 1.4rem; color: var(--c-cream); }
.cinematic-hero__logo { display: inline-flex; align-items: center; gap: .55rem; font-size: 1.05rem; margin-bottom: 1.6rem; }
.cinematic-hero__logo svg { width: 26px; height: 26px; }
.cinematic-hero__kicker {
  font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .32em; text-transform: uppercase;
  color: var(--c-gold-lite); margin-bottom: 1.1rem;
}
.cinematic-hero__h1 { color: #fff; font-size: var(--t-3xl); margin: 0 0 1.2rem; text-shadow: 0 2px 40px rgba(0,0,0,.5); }
.cinematic-hero__h1 em { color: var(--c-gold-lite); }
.cinematic-hero__lede { color: rgba(255,255,255,.86); font-size: var(--t-lg); max-width: 40rem; margin: 0 auto 2rem; }
.cinematic-hero__cta { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.cinematic-hero__scroll { position: absolute; bottom: 1.4rem; left: 50%; translate: -50% 0; z-index: 3; color: rgba(255,255,255,.6); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; }
.cinematic-hero__scroll::after { content:""; display:block; width:1px; height:34px; margin:.5rem auto 0; background:linear-gradient(var(--c-gold),transparent); animation: scrollPulse 2.4s var(--ease) infinite; }
@keyframes scrollPulse { 0%,100%{opacity:.3;transform:scaleY(.6)} 50%{opacity:1;transform:scaleY(1)} }

/* ---------------------------------------------------------------------
   6 · SECTION SYSTEM
   --------------------------------------------------------------------- */
.section { padding: var(--pad-section) 0; position: relative; }
.section--paper, .section--light { background: var(--surface); }
.section--cream { background: var(--surface-2); }
.section--cream-deep { background: var(--surface-3); }
.section--dark, .section--navy {
  background:
    radial-gradient(900px 500px at 80% -20%, rgba(212,168,67,.10), transparent 60%),
    linear-gradient(180deg, var(--c-navy) 0%, var(--c-navy-2) 100%);
  color: var(--c-cream);
}
.section--dark h1,.section--dark h2,.section--dark h3,
.section--navy h1,.section--navy h2,.section--navy h3 { color: #fff; }
.section--dark p,.section--navy p { color: rgba(232,230,225,.84); }

.section__kicker, .kicker, .foundations__kicker, .section-title + .section-lede ~ .kicker {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin: 0 0 .8rem;
  display: inline-flex; align-items: center; gap: .55rem;
}
.section__kicker::before, .foundations__kicker::before {
  content: ""; width: 26px; height: 1px; background: linear-gradient(90deg, var(--accent), transparent);
}
html[data-theme="dark"] .section__kicker,
html[data-theme="dark"] .foundations__kicker { color: var(--c-gold-lite); }

.section__title, .section-title, .foundations__h2, .tech-character__h2 {
  font-family: var(--font-serif); font-weight: 500; color: var(--ink);
  font-size: var(--t-2xl); margin: 0 0 .7rem; letter-spacing: .005em;
}
.section--dark .section__title, .section--dark .section-title { color: #fff; }

.section__lede, .section-lede {
  font-size: var(--t-lg); color: var(--ink-faint); max-width: 42rem; line-height: 1.6;
}
.section--dark .section__lede, .section--dark .section-lede { color: rgba(232,230,225,.78); }

.section__grid { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .section__grid { grid-template-columns: repeat(2, 1fr); }
  .section__col--full { grid-column: 1 / -1; }
  .section__col--third { grid-column: span 1; }
}
@media (min-width: 960px) {
  .section__grid:has(.section__col--third) { grid-template-columns: repeat(3, 1fr); }
}

/* luminous section divider */
.section-divider { display: grid; place-items: center; padding: 1.4rem 0; }
.section-divider::before, .section-divider::after { content:""; }
.section-divider__mark { color: var(--accent); position: relative; display:grid; place-items:center; }
.section-divider__mark::before, .section-divider__mark::after {
  content:""; position:absolute; top:50%; width: clamp(40px, 18vw, 150px); height:1px;
  background: linear-gradient(90deg, transparent, var(--accent));
}
.section-divider__mark::before { right: 130%; }
.section-divider__mark::after { left: 130%; transform: scaleX(-1); }
.section-divider__mark svg { width: 22px; height: 22px; filter: drop-shadow(0 0 8px rgba(212,168,67,.5)); }

/* ---------------------------------------------------------------------
   7 · SCRIPTURE — illuminated
   --------------------------------------------------------------------- */
.scripture-frame {
  position: relative;
  font-family: var(--font-serif);
  font-size: var(--t-lg);
  font-style: italic;
  line-height: 1.55;
  color: var(--ink);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--surface));
  border: 1px solid var(--hair);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: clamp(1.2rem,3vw,2rem) clamp(1.4rem,4vw,2.4rem);
  margin: 1.6rem 0;
  box-shadow: var(--shadow-1);
}
.scripture-frame::before {
  content: "\201C"; position: absolute; top: -.1em; left: .2em;
  font-size: 4rem; line-height: 1; color: var(--accent); opacity: .28; font-family: var(--font-serif);
}
.scripture-frame p { color: var(--ink); margin: 0 0 .5rem; }
.scripture-frame cite {
  display: block; font-family: var(--font-mono); font-style: normal;
  font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-strong); margin-top: .6rem;
}
html[data-theme="dark"] .scripture-frame cite { color: var(--c-gold-lite); }

/* verse band */
.verse-band {
  text-align: center; padding: clamp(2.6rem,6vw,4.4rem) 1.4rem;
  background:
    radial-gradient(60% 120% at 50% 0%, rgba(212,168,67,.10), transparent 70%),
    var(--surface-2);
  border-block: 1px solid var(--hair);
}
.verse-band__line { font-family: var(--font-serif); font-style: italic; font-size: var(--t-xl); color: var(--ink); max-width: 44rem; margin: 0 auto .7rem; }
.verse-band__ref { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .22em; text-transform: uppercase; color: var(--accent-strong); }

/* ---------------------------------------------------------------------
   8 · UNIFIED CARD SHELL  (every card type wears one glass shell)
   --------------------------------------------------------------------- */
.card, .ethics-card, .lesson-card, .media-card, .stack-card, .altar-card,
.rp-season-card, .shop-product-card, .shop-category-card, .hymnal-card,
.discern-card, .week-card, .vod-card, .tool-card, .story-card, .store-card,
.share-card, .saint-card, .quiz-card, .prayer-wall-card, .prayer-card,
.icon-card, .hfh-card, .glossary-card, .gallery-card, .father-card,
.exam-card, .cpb-card, .color-card, .cat-card, .cal-card, .workflow-card,
.word-card, .lumen-today__card, .store-featured__card, .feature-card {
  position: relative;
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  padding: clamp(1.2rem, 3vw, 1.8rem);
  box-shadow: var(--shadow-1);
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
  overflow: hidden;
}
/* gold top-edge light */
.card::before, .ethics-card::before, .lesson-card::before, .media-card::before,
.altar-card::before, .rp-season-card::before, .shop-product-card::before,
.shop-category-card::before, .hymnal-card::before, .discern-card::before,
.tool-card::before, .story-card::before, .saint-card::before, .prayer-card::before,
.icon-card::before, .hfh-card::before, .glossary-card::before, .gallery-card::before,
.father-card::before, .exam-card::before, .cpb-card::before, .workflow-card::before,
.word-card::before, .quiz-card::before, .lumen-today__card::before, .feature-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--page-accent), transparent);
  opacity: .7;
}
.card:hover, .ethics-card:hover, .lesson-card:hover, .media-card:hover, .stack-card:hover,
.altar-card:hover, .rp-season-card:hover, .shop-product-card:hover, .shop-category-card:hover,
.hymnal-card:hover, .discern-card:hover, .tool-card:hover, .story-card:hover, .store-card:hover,
.saint-card:hover, .quiz-card:hover, .prayer-card:hover, .icon-card:hover, .hfh-card:hover,
.glossary-card:hover, .gallery-card:hover, .father-card:hover, .exam-card:hover, .cpb-card:hover,
.workflow-card:hover, .word-card:hover, .feature-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--hair));
  box-shadow: var(--shadow-2);
}
/* ethics yes/no accents */
.ethics-card--yes { border-left: 3px solid #5BA672; }
.ethics-card--no  { border-left: 3px solid #C77B6B; }

.card__kicker { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing:.2em; text-transform:uppercase; color: var(--accent-strong); }
.card__title { font-family: var(--font-serif); color: var(--ink); }
.card__lede { color: var(--ink-faint); }

/* ---------------------------------------------------------------------
   9 · BUTTONS
   --------------------------------------------------------------------- */
.btn, .btn--primary, .btn--gold {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-sans); font-weight: 600; font-size: var(--t-sm);
  letter-spacing: .01em; line-height: 1; text-decoration: none;
  padding: .85em 1.5em; border-radius: var(--radius-pill);
  border: 1px solid transparent; cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.btn--gold, .btn--primary {
  background: linear-gradient(120deg, var(--c-gold), var(--c-gold-deep));
  color: var(--c-navy);
  box-shadow: var(--shadow-gold);
}
.btn--gold:hover, .btn--primary:hover { transform: translateY(-2px); color: var(--c-navy); box-shadow: 0 16px 46px -14px rgba(212,168,67,.6); }
.btn--ghost {
  background: color-mix(in srgb, var(--surface) 30%, transparent);
  color: currentColor;
  border: 1px solid rgba(255,255,255,.35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.cinematic-hero .btn--ghost { color: #fff; border-color: rgba(255,255,255,.4); }
.btn--ghost:hover { border-color: var(--c-gold); color: var(--c-gold-lite); transform: translateY(-2px); }

/* ---------------------------------------------------------------------
   10 · HOME blocks (today strip, tech-character, foundations)
   --------------------------------------------------------------------- */
.lumen-today { padding: var(--pad-section) 0; background: var(--surface); }
.lumen-today__inner { max-width: 68rem; margin: 0 auto; padding: 0 1.4rem; }
.lumen-today__kicker { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing:.28em; text-transform:uppercase; color: var(--accent-strong); }
.lumen-today__heading { font-family: var(--font-serif); font-size: var(--t-2xl); color: var(--ink); margin:.4rem 0 1.6rem; }
.lumen-today__grid { display:grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 760px){ .lumen-today__grid { grid-template-columns: repeat(3,1fr); } }
.lumen-today__note { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-faint); margin-top: 1.2rem; }

.tech-character { padding: var(--pad-section) 0; background: var(--surface-2); }
.tech-character__inner { max-width: 68rem; margin: 0 auto; padding: 0 1.4rem; display: grid; gap: var(--gap); align-items: center; }
@media (min-width: 860px){ .tech-character__inner { grid-template-columns: 1.1fr .9fr; } }
.tech-character__copy { color: var(--ink-soft); font-size: var(--t-lg); }
.tech-character__verse { font-family: var(--font-serif); font-style: italic; font-size: var(--t-lg); color: var(--ink); }
.tech-character__ref { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing:.2em; text-transform:uppercase; color: var(--accent-strong); }
.tech-character__diagram svg { filter: drop-shadow(0 8px 30px rgba(212,168,67,.25)); }

.foundations__kicker { color: var(--accent-strong) !important; }

/* ---------------------------------------------------------------------
   11 · AI / TECHNOLOGY pages — lean modern + neon whisper
   --------------------------------------------------------------------- */
body[data-section^="ai-"] .section,
body[data-section="tech-stack"] .section,
body[data-section="prompts"] .section,
body[data-section="how-we-use-ai"] .section,
body[data-section="why-crossaihub"] .section,
body[data-section="kids-ai-quiz"] .section {
  --page-accent: var(--c-cyan);
}
body[data-section^="ai-"] .section::before,
body[data-section="tech-stack"] .section::before,
body[data-section="prompts"] .section::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background-image:
    linear-gradient(rgba(91,200,214,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,200,214,.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(120% 80% at 50% 0%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000, transparent 75%);
}
body[data-section^="ai-"] .section > *,
body[data-section="tech-stack"] .section > *,
body[data-section="prompts"] .section > * { position: relative; z-index: 1; }
/* on tech pages the kicker glows cyan */
body[data-section^="ai-"] .section__kicker,
body[data-section="tech-stack"] .section__kicker,
body[data-section="prompts"] .section__kicker { color: #2C8C99; }
html[data-theme="dark"] body[data-section^="ai-"] .section__kicker,
html[data-theme="dark"] body[data-section="tech-stack"] .section__kicker { color: var(--c-cyan); }
body[data-section^="ai-"] .card:hover { border-color: rgba(91,200,214,.5); box-shadow: 0 22px 48px -22px rgba(91,200,214,.4); }
/* glossary terms / prompt snippets read as code */
.glossary-card__term, .word-card__word, .prompt-card__text, code, pre {
  font-family: var(--font-mono);
}

/* ---------------------------------------------------------------------
   12 · SOBER pages — reverence first, no neon
   --------------------------------------------------------------------- */
body[data-section="in-memoriam"] .section,
body[data-section="prayer-wall"] .section,
body[data-section="confession-companion"] .section,
body[data-section="candles"] .section {
  --page-accent: var(--c-gold);
}
body[data-section="in-memoriam"] body,
body[data-section="in-memoriam"] .section--paper { background: var(--surface); }
body[data-section="in-memoriam"] .card::before,
body[data-section="prayer-wall"] .card::before,
body[data-section="confession-companion"] .card::before { opacity: .3; }
body[data-section="in-memoriam"] .section__title,
body[data-section="confession-companion"] .section__title { letter-spacing: .01em; }
.memoriam-row { border-bottom: 1px solid var(--hair); }

/* ---------------------------------------------------------------------
   13 · JS-INJECTED DECORATIVES (style the ones still mounted)
   --------------------------------------------------------------------- */
/* scroll-progress halo (lumen-phase-a) */
.lumen-halo { position: fixed; right: 18px; bottom: 18px; z-index: 90; width: 46px; height: 46px; opacity: .9; pointer-events: none; }
.lumen-halo__track { stroke: var(--hair); }
.lumen-halo__ring { stroke: var(--accent); filter: drop-shadow(0 0 4px rgba(212,168,67,.6)); }

/* first-load cross-rising (lumen-phase-c) */
.lumen-cross-rising { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; background: var(--c-navy); }
.lumen-cross-rising svg { width: 120px; height: 120px; color: var(--c-gold); filter: drop-shadow(0 0 30px rgba(212,168,67,.6)); }

/* accent picker (lumen-phase-c) */
.lumen-accent-picker__toggle { background: var(--surface); border: 1px solid var(--hair-strong); color: var(--accent); box-shadow: var(--shadow-1); }
.lumen-accent-picker { background: var(--surface); border: 1px solid var(--hair-strong); border-radius: 14px; box-shadow: var(--shadow-2); }

/* candle wall (lumen-phase-c) */
.candle-wall { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(48px,1fr)); }
.candle-wall__candle { background: transparent; border: 0; cursor: pointer; transition: transform var(--t-fast); }
.candle-wall__candle:hover { transform: translateY(-2px); }
.candle-wall__candle.is-lit { filter: drop-shadow(0 0 10px rgba(212,168,67,.8)); }

/* first-visit greeting toast (lumen-phase-a) */
.lumen-greeting { background: var(--surface); color: var(--ink); border: 1px solid var(--hair-strong); border-radius: 14px; box-shadow: var(--shadow-2); }

/* signature ribbon (lumen-25) — leave to rainbow-stripe.css, just spacing */
.lumen-signature-ribbon { margin-top: 0; }

/* verse marquee band (joy-awwwards) */
.lumen-marquee-band { background: var(--c-navy); border-block: 1px solid rgba(212,168,67,.2); overflow: clip; }
.lumen-marquee-band__track { color: var(--c-gold-lite); font-family: var(--font-serif); font-style: italic; }

/* soft grain + dust (joy-awwwards / luminous) — keep subtle */
.lumen-grain { opacity: .03; pointer-events: none; }
.lumen-dust { opacity: .5; }

/* preloader (joy-awwwards) — on-brand */
.lumen-preloader { background: var(--c-navy); display: grid; place-items: center; }
.lumen-preloader svg, .lumen-preloader__mark { color: var(--c-gold); }
html.lumen-loaded .lumen-preloader { opacity: 0; visibility: hidden; }

/* tilt wrapper neutral */
.lumen-tilt__inner { transform-style: preserve-3d; }

/* ---------------------------------------------------------------------
   14 · SCROLL REVEAL
   --------------------------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity var(--t-slow), transform var(--t-slow); }
[data-reveal].is-revealed, .no-js [data-reveal] { opacity: 1; transform: none; }
.section-divider__mark svg, .lumen-cross { transition: opacity var(--t-slow); }

/* ---------------------------------------------------------------------
   15 · FOOTER  (keep rainbow stripe from lumen-rainbow-stripe.css)
   --------------------------------------------------------------------- */
.disclaimer-strip { background: var(--surface-3); border-top: 1px solid var(--hair); }
.disclaimer-strip p { color: var(--ink-faint); font-size: var(--t-sm); }
.site-footer {
  background: linear-gradient(180deg, var(--c-navy-2), var(--c-navy));
  color: var(--c-cream);
  border-top: 1px solid rgba(212,168,67,.22);
}
.site-footer h4 { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--c-gold); }
.site-footer a { color: rgba(232,230,225,.78); text-decoration: none; }
.site-footer a:hover { color: var(--c-gold-lite); }
.footer-verse { font-family: var(--font-serif); font-style: italic; color: rgba(232,230,225,.9); }
.footer-verse cite { display:block; font-family: var(--font-mono); font-style: normal; font-size: var(--t-xs); letter-spacing:.12em; color: var(--c-gold); margin-top:.5rem; }
.signoff { font-family: var(--font-serif); font-style: italic; font-size: var(--t-lg); color: var(--c-gold-lite); text-align:center; }
.footer-bless, .footer-meta, .footer-signature em { color: rgba(232,230,225,.7); }
.footer-signature em { font-family: var(--font-serif); }
.footer-mark__icon svg { color: var(--c-gold); }

/* ---------------------------------------------------------------------
   16 · DARK-MODE structural patches (components that hardcode light)
   --------------------------------------------------------------------- */
html[data-theme="dark"] .verse-band { background: radial-gradient(60% 120% at 50% 0%, rgba(212,168,67,.12), transparent 70%), var(--surface-2); }
html[data-theme="dark"] .scripture-frame { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, var(--surface-2)), var(--surface-2)); }
html[data-theme="dark"] .btn--ghost { color: var(--ink); border-color: var(--hair-strong); }
html[data-theme="dark"] .nav-dropdown__menu { background: var(--surface-2); }
html[data-theme="dark"] .lumen-greeting,
html[data-theme="dark"] .lumen-accent-picker,
html[data-theme="dark"] .lumen-accent-picker__toggle { background: var(--surface-2); }
html[data-theme="dark"] .disclaimer-strip { background: #0a0e16; }

/* ---------------------------------------------------------------------
   17 · MOTION SAFETY
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .site-mark__name, .footer-mark__name, .cinematic-hero__logo span:last-child {
    animation: none; background-position: 0 0;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------
   17b · ORPHAN GUARD — neutralize any decorative element whose stylesheet
   was unlinked in the consolidation, so a static-positioned leftover can
   never become an in-flow grid/flex item and balloon a layout again.
   --------------------------------------------------------------------- */
.tech-neural-bg, .sacred-pillars, .sacred-scanline, .sacred-verse-rain,
.tech-grid-bg, .tech-particles, .sacred-rays, .sacred-glow, .joy-orbs,
.cinematic-hero > canvas, .cinematic-hero > .lumen-id {
  position: absolute !important;
  inset: 0; width: 100%; height: 100%;
  z-index: 1; pointer-events: none;
}
/* the deprecated tech/sacred canvases are fully replaced by the celestial
   hero veil + grid + dust — hide them outright to keep the hero clean. */
.tech-neural-bg, .sacred-pillars, .sacred-scanline, .sacred-verse-rain { display: none !important; }

/* ---------------------------------------------------------------------
   18 · MOBILE polish
   --------------------------------------------------------------------- */
@media (max-width: 560px) {
  .cinematic-hero { min-height: 86vh; }
  .cinematic-hero__cta { flex-direction: column; align-items: stretch; }
  .cinematic-hero__cta .btn { justify-content: center; }
  .section { padding: clamp(2.6rem, 8vw, 3.6rem) 0; }
}