/* ============================================================================
 * luminous.css — purely additive visual upgrades for CrossAIHub.com
 * Inspired by: Activetheory, Mont-fort, Resend, Ellipsus, Reflect, Hubtown
 * NO content changes. NO existing-rule overrides without specificity bump.
 * ============================================================================ */

/* ─── 1. Custom cursor — DISABLED 2026-06-15 ──────────────────────────────
 * Per Yousef: keep the native mouse pointer visible at all times.
 * The previous "luminous cursor" effect replaced the system cursor with a
 * gold dot that only appeared while moving — leaving the cursor invisible
 * the rest of the time. We've reverted to the OS default arrow/pointer.
 *
 * The lumen-cursor / lumen-cursor__halo elements are also hidden, in case
 * the JS still creates them before its initCursor() call was removed.
 * ──────────────────────────────────────────────────────────────────────── */
.lumen-cursor,
.lumen-cursor__halo {
    display: none !important;
}

/* ─── 2. Magnetic buttons (subtle pull toward cursor on hover) ───────────── */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .btn,
    .cinematic-hero__cta a {
        will-change: transform;
        transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1),
                    box-shadow 280ms ease,
                    background-color 240ms ease;
    }
    .btn:hover {
        box-shadow: 0 14px 36px -16px rgba(212, 168, 67, 0.55),
                    0 4px 12px -4px rgba(13, 17, 23, 0.18);
    }
}

/* ─── 3. Gold dust particles container ──────────────────────────────────── */
.lumen-dust {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 1800ms ease-in;
}
.lumen-dust.is-on { opacity: 0.55; }
.cinematic-hero { position: relative; }
.cinematic-hero .lumen-dust { z-index: 1; }
.cinematic-hero__inner { position: relative; z-index: 3; }

/* ─── 4. Draw-on-scroll cross divider ──────────────────────────────────── */
.section-divider__mark svg line,
.footer-mark__icon svg line,
.footer-signature__icon svg line {
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    transition: stroke-dashoffset 1400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.section-divider.is-drawn .section-divider__mark svg line,
.lumen-cross.is-drawn svg line { stroke-dashoffset: 0; }

/* ─── 5. Verse band — slow drift on idle + subtle gold glow ─────────────── */
@keyframes lumen-verse-glow {
    0%, 100% { text-shadow: 0 0 0 transparent; }
    50%      { text-shadow: 0 0 24px rgba(212, 168, 67, 0.16); }
}
@media (prefers-reduced-motion: no-preference) {
    .verse-band__line {
        animation: lumen-verse-glow 8s ease-in-out infinite;
    }
}

/* ─── 6. Section reveal — softer + staggered for [data-reveal] children ── */
@media (prefers-reduced-motion: no-preference) {
    [data-reveal] > * {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
                    transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
    }
    [data-reveal].is-revealed > *           { opacity: 1; transform: none; }
    [data-reveal].is-revealed > *:nth-child(1) { transition-delay: 0ms;   }
    [data-reveal].is-revealed > *:nth-child(2) { transition-delay: 90ms;  }
    [data-reveal].is-revealed > *:nth-child(3) { transition-delay: 180ms; }
    [data-reveal].is-revealed > *:nth-child(4) { transition-delay: 270ms; }
    [data-reveal].is-revealed > *:nth-child(5) { transition-delay: 360ms; }
    [data-reveal].is-revealed > *:nth-child(6) { transition-delay: 450ms; }
}

/* ─── 7. Page-load fade-in (Ellipsus / Reflect pattern) ──────────────────── */
@keyframes lumen-page-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
.lumen-loaded main {
    animation: lumen-page-in 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ─── 8. Soft underline on text links (Mont-fort) ───────────────────────── */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    main a:not(.btn):not(.site-mark):not(.footer-mark) {
        position: relative;
        background-image: linear-gradient(currentColor, currentColor);
        background-position: 0 100%;
        background-repeat: no-repeat;
        background-size: 0 1px;
        transition: background-size 360ms cubic-bezier(0.22, 1, 0.36, 1),
                    color 240ms ease;
    }
    main a:not(.btn):not(.site-mark):not(.footer-mark):hover {
        background-size: 100% 1px;
    }
}

/* ─── 9. Sticky header gentle scroll shadow ──────────────────────────────── */
.site-header {
    transition: box-shadow 360ms ease, background-color 360ms ease;
}
.lumen-scrolled .site-header {
    box-shadow: 0 2px 28px -10px rgba(13, 17, 23, 0.12);
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
}

/* ─── 11. Icon-only top nav with hover tooltips ─────────────────────────────
 * Added 2026-06-15 per Yousef — desktop nav links now render as icons.
 * The visible page name appears as a small tooltip on hover/focus.
 * Native cursor (arrow → pointer on hover) is preserved.
 * Mobile nav (≤900px) keeps text labels; this only applies to .site-nav--icons.
 * ──────────────────────────────────────────────────────────────────────── */
.site-nav--icons .site-nav__list {
    display: flex;
    gap: 0.45rem;
    align-items: center;
}
.site-nav--icons a.nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 2026-06-15 20:30 — Yousef: bigger icons throughout */
    width: 48px;
    height: 48px;
    border-radius: 11px;
    color: var(--ink-soft, #2a3441);
    text-decoration: none;
    background: transparent;
    border: 1px solid transparent;
    transition: color 220ms ease,
                background 220ms ease,
                border-color 220ms ease,
                transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    -webkit-tap-highlight-color: transparent;
}
.site-nav--icons a.nav-icon svg {
    display: block;
    width: 26px;
    height: 26px;
    stroke: currentColor;
}
.site-nav--icons a.nav-icon:hover,
.site-nav--icons a.nav-icon:focus-visible {
    color: var(--gold-deep, #b9892f);
    background: rgba(212, 168, 67, 0.10);
    border-color: rgba(212, 168, 67, 0.28);
    transform: translateY(-1px);
}
.site-nav--icons a.nav-icon[aria-current="page"] {
    color: var(--gold-deep, #b9892f);
    background: rgba(212, 168, 67, 0.08);
}

/* "Listen Now · Hymns" CTA icon — first item, slightly brighter gold so it draws the eye. */
.site-nav--icons a.nav-icon--cta {
    color: var(--gold-deep, #b9892f);
    background: rgba(212, 168, 67, 0.10);
    border-color: rgba(212, 168, 67, 0.32);
    margin-right: 0.4rem;
}
.site-nav--icons a.nav-icon--cta:hover,
.site-nav--icons a.nav-icon--cta:focus-visible {
    background: rgba(212, 168, 67, 0.20);
    border-color: rgba(212, 168, 67, 0.55);
    box-shadow: 0 6px 18px -8px rgba(212, 168, 67, 0.55);
    transform: translateY(-1px) scale(1.04);
}
/* Soft slow pulse — invites a click without being noisy. Suppressed while playing. */
@media (prefers-reduced-motion: no-preference) {
    @keyframes lumen-cta-pulse {
        0%, 100% { box-shadow: 0 0 0 0 rgba(212, 168, 67, 0.35); }
        50%      { box-shadow: 0 0 0 6px rgba(212, 168, 67, 0); }
    }
    .site-nav--icons a.nav-icon--cta:not(.is-playing) {
        animation: lumen-cta-pulse 3.2s ease-in-out infinite;
    }
}

/* ─── 11b. Nav radio — play/pause swap + waveform equaliser ────────────────
 * Added 2026-06-15 — clicking the gold play icon starts the hymn playlist
 * inline (no nav-away) and the five gold bars below ripple in time.
 * ──────────────────────────────────────────────────────────────────────── */
.site-nav--icons .nav-radio-cell {
    display: inline-flex;
    align-items: center;
}

/* Play/pause icon swap */
.nav-icon--cta .nav-icon__pause { display: none; }
.nav-icon--cta.is-playing .nav-icon__play { display: none; }
.nav-icon--cta.is-playing .nav-icon__pause { display: block; }

/* While playing, keep the CTA visually active (gold fill, no scale-down on release). */
.nav-icon--cta.is-playing {
    color: var(--gold-deep, #b9892f);
    background: rgba(212, 168, 67, 0.18);
    border-color: rgba(212, 168, 67, 0.50);
    box-shadow: 0 6px 22px -10px rgba(212, 168, 67, 0.55);
}

/* Equaliser — 5 vertical bars next to the icon, collapsed when idle.
 * Heights are driven by real audio frequency data from nav-radio.js
 * (Web Audio API analyser). Each bar reads its --bar-h CSS variable.
 *
 * Brand-palette gradient (NOT gold): sage → sky → peach → rose → lavender.
 * These five hues come straight from joy-palette-extended.css. */
.lumen-radio-wave {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    height: 22px;
    width: 0;
    margin-left: 0;
    overflow: hidden;
    opacity: 0;
    transition: width 360ms cubic-bezier(0.22, 1, 0.36, 1),
                margin-left 360ms cubic-bezier(0.22, 1, 0.36, 1),
                opacity 280ms ease;
}
.nav-radio-cell.is-playing .lumen-radio-wave {
    width: 32px;
    margin-left: 8px;
    opacity: 1;
}
.lumen-radio-wave > span {
    --bar-h: 14%;
    display: block;
    width: 3px;
    height: var(--bar-h);
    min-height: 2px;
    border-radius: 2px;
    transform-origin: bottom;
    /* 2026-06-15 — slower, gentler animation curve; bars feel like they're singing along, not jittering. */
    transition: height 150ms cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 1px 3px -1px rgba(13, 17, 23, 0.18);
    will-change: height;
}
/* Each bar carries a different brand colour. Subtle vertical gradient adds depth. */
.lumen-radio-wave > span:nth-child(1) {
    background: linear-gradient(180deg, var(--jp-sage-400, #87A862) 0%, var(--jp-sage-300, #A8C385) 100%);
}
.lumen-radio-wave > span:nth-child(2) {
    background: linear-gradient(180deg, var(--jp-sky-400, #92BFE6) 0%, var(--jp-sky-300, #BDD9F2) 100%);
}
.lumen-radio-wave > span:nth-child(3) {
    background: linear-gradient(180deg, var(--jp-peach-300, #FFBA92) 0%, var(--jp-peach-200, #FFD4B8) 100%);
}
.lumen-radio-wave > span:nth-child(4) {
    background: linear-gradient(180deg, var(--jp-rose-400, #DB7A82) 0%, var(--jp-rose-300, #F09BA1) 100%);
}
.lumen-radio-wave > span:nth-child(5) {
    background: linear-gradient(180deg, #8E7AC8 0%, #B7A6E0 100%); /* lavender (sits next to rose) */
}

/* Reduced motion: hold bars steady at their last height, no smoothing animation. */
@media (prefers-reduced-motion: reduce) {
    .lumen-radio-wave > span {
        transition: none;
        --bar-h: 12%;
    }
}
.site-nav--icons a.nav-icon[aria-current="page"]::before {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold-deep, #b9892f);
}

/* CSS tooltip (::after) suppressed — replaced by the floating tooltip
 * managed in nav-tooltips.js for proper viewport-aware positioning.
 * 2026-06-15 18:37 — CSS rule kept here only as a no-op safety net. */
.site-nav--icons a.nav-icon[data-tip]::after { content: none !important; display: none !important; }

/* Floating tooltip — fixed-positioned, never clipped by overflow parents. */
.lumen-floating-tip {
    position: fixed;
    background: rgba(8, 12, 20, 0.96);
    color: #fff;
    font-family: var(--sans, system-ui, sans-serif);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 7px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 180ms ease, transform 180ms ease;
    z-index: 99999;
    box-shadow: 0 8px 20px -6px rgba(13, 17, 23, 0.55);
    border: 1px solid rgba(212, 168, 67, 0.30);
}
.lumen-floating-tip.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.social-bar__link[data-tip]::after { content: none !important; display: none !important; }
/* Reduced motion: keep tooltip but skip the slide-in transform */
@media (prefers-reduced-motion: reduce) {
    .site-nav--icons a.nav-icon { transition: color 0ms, background 0ms; }
    .site-nav--icons a.nav-icon[data-tip]::after {
        transition: opacity 120ms ease;
        transform: translateX(-50%);
    }
}

/* ─── 12. Clean hero backgrounds (no big photos) ───────────────────────────
 * Added 2026-06-15 per Yousef — replace the photo-heavy heroes with the
 * cream + soft-sun look (store-hero style) on every page.
 *
 * Approach: hide the .cinematic-hero__media <img> and any page-hero
 * background-image; paint a soft brand-cream gradient with a subtle
 * gold radial in the top-right corner — calm, uniform, no photos.
 * ──────────────────────────────────────────────────────────────────────── */
.cinematic-hero__media,
.cinematic-hero__media img,
.cinematic-hero__media picture,
.cinematic-hero__media video {
    display: none !important;
}
.cinematic-hero {
    background:
        radial-gradient(circle at 88% 18%, rgba(244, 215, 122, 0.32) 0%, transparent 52%),
        linear-gradient(180deg, var(--jp-cream-200, #FDFBF5) 0%, var(--jp-cream-300, #FBF6E9) 100%) !important;
}
.cinematic-hero .lumen-dust {
    /* lighter dust over the clean wash */
    opacity: 0.35 !important;
}

/* page-hero partial — kill the inline background-image and use the same wash. */
.page-hero[style*="background-image"] {
    background-image: none !important;
    background:
        radial-gradient(circle at 92% 12%, rgba(244, 215, 122, 0.28) 0%, transparent 48%),
        linear-gradient(180deg, var(--jp-cream-200, #FDFBF5) 0%, var(--jp-cream-300, #FBF6E9) 100%) !important;
}
.page-hero {
    /* Ensure default state matches the partial-overrides above */
    background-color: var(--jp-cream-200, #FDFBF5);
}
.page-hero::before,
.page-hero::after {
    /* hide any darkening overlay the original used to make text readable on photos */
    background: transparent !important;
    opacity: 0 !important;
}
.page-hero__title,
.page-hero__lede,
.page-hero__kicker {
    color: var(--jp-ink, #2a3441) !important;
    text-shadow: none !important;
}

/* SPA loading hint — very subtle dim while a page is being fetched. */
html.is-spa-loading main {
    opacity: 0.78;
    transition: opacity 220ms ease;
}

/* ─── 14. Podcast nav icon + picker ──────────────────────────────────────
 * Added 2026-06-15 — second CTA next to the hymn radio. Looks like a mic.
 * Dropdown caret opens a season + episode picker.
 * ──────────────────────────────────────────────────────────────────────── */
.nav-icon--podcast {
    color: var(--jp-navy, #1d3557);
    background: rgba(29, 53, 87, 0.07);
    border-color: rgba(29, 53, 87, 0.20);
}
.nav-icon--podcast:hover,
.nav-icon--podcast:focus-visible {
    background: rgba(29, 53, 87, 0.16);
    border-color: rgba(29, 53, 87, 0.42);
    box-shadow: 0 6px 18px -8px rgba(29, 53, 87, 0.45);
    color: var(--jp-navy, #1d3557);
}
.nav-icon--podcast.is-playing {
    color: var(--jp-navy, #1d3557);
    background: rgba(29, 53, 87, 0.18);
    border-color: rgba(29, 53, 87, 0.50);
    box-shadow: 0 6px 22px -10px rgba(29, 53, 87, 0.55);
}
/* Shuffle button — sits next to the picker toggle. */
.nav-icon__shuffle {
    appearance: none;
    border: 1px solid transparent;
    background: rgba(13, 17, 23, 0.06);
    color: var(--jp-ink-soft, #5b6577);
    width: 24px;
    height: 22px;
    margin-left: 4px;
    border-radius: 5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.nav-icon__shuffle:hover,
.nav-icon__shuffle:focus-visible {
    background: rgba(212, 168, 67, 0.18);
    border-color: rgba(212, 168, 67, 0.45);
    color: var(--gold-deep, #b9892f);
}
.nav-icon__shuffle[aria-pressed="true"] {
    color: var(--gold-deep, #b9892f);
    background: rgba(212, 168, 67, 0.22);
    border-color: rgba(212, 168, 67, 0.60);
    box-shadow: inset 0 0 0 1px rgba(212, 168, 67, 0.30);
}

/* Picker toggle (▾ caret) — bigger, clearer, brand-coloured per parent CTA. */
.nav-icon__picker-toggle {
    appearance: none;
    border: 1px solid transparent;
    background: rgba(13, 17, 23, 0.06);
    color: var(--gold-deep, #b9892f);
    width: 18px;
    height: 22px;
    margin-left: 4px;
    border-radius: 5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 180ms ease, color 180ms ease, transform 180ms ease, border-color 180ms ease;
}
.nav-icon__picker-toggle:hover,
.nav-icon__picker-toggle:focus-visible {
    background: rgba(212, 168, 67, 0.18);
    border-color: rgba(212, 168, 67, 0.45);
    color: var(--gold-deep, #b9892f);
}
.nav-radio-cell--podcast .nav-icon__picker-toggle {
    color: var(--jp-navy, #1d3557);
    background: rgba(29, 53, 87, 0.08);
}
.nav-radio-cell--podcast .nav-icon__picker-toggle:hover,
.nav-radio-cell--podcast .nav-icon__picker-toggle:focus-visible {
    background: rgba(29, 53, 87, 0.20);
    border-color: rgba(29, 53, 87, 0.45);
}
.nav-icon__picker-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}
.nav-icon__picker-toggle svg {
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
    stroke-width: 2.2;
}

/* Picker heading (for hymn picker — no season tabs needed) */
.lumen-picker__heading {
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-deep, #b9892f);
    padding: 6px 10px 10px;
    border-bottom: 1px solid rgba(13, 17, 23, 0.06);
    margin-bottom: 6px;
}

/* Podcast wave is more subtle than the hymn wave — narration is
   spoken word, so a softer, smaller equaliser feels honest. */
.lumen-radio-wave--podcast {
    height: 14px !important;
}
.nav-radio-cell--podcast.is-playing .lumen-radio-wave {
    width: 24px !important;
}
.lumen-radio-wave--podcast > span {
    width: 2px !important;
    --bar-h: 18%;
}

/* Wave colours for the podcast equaliser — same gradient palette
   but slightly cooler tilt to differentiate from the hymn radio. */
.lumen-radio-wave--podcast > span:nth-child(1) {
    background: linear-gradient(180deg, #5C8DB5 0%, #92BFE6 100%);
}
.lumen-radio-wave--podcast > span:nth-child(2) {
    background: linear-gradient(180deg, var(--jp-sage-400, #87A862) 0%, var(--jp-sage-300, #A8C385) 100%);
}
.lumen-radio-wave--podcast > span:nth-child(3) {
    background: linear-gradient(180deg, var(--jp-peach-300, #FFBA92) 0%, var(--jp-peach-200, #FFD4B8) 100%);
}
.lumen-radio-wave--podcast > span:nth-child(4) {
    background: linear-gradient(180deg, var(--jp-rose-400, #DB7A82) 0%, var(--jp-rose-300, #F09BA1) 100%);
}
.lumen-radio-wave--podcast > span:nth-child(5) {
    background: linear-gradient(180deg, #8E7AC8 0%, #B7A6E0 100%);
}

/* Picker — season tabs + episode list */
.lumen-picker {
    position: fixed;
    width: 300px;
    max-height: 70vh;
    overflow: auto;
    background: var(--jp-cream-100, #FFFEFB);
    border: 1px solid rgba(13, 17, 23, 0.10);
    border-radius: 12px;
    box-shadow: 0 12px 36px -10px rgba(13, 17, 23, 0.25);
    z-index: 200;
    padding: 8px;
    animation: lumen-picker-in 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes lumen-picker-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.lumen-picker__tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
    padding: 4px;
    background: rgba(29, 53, 87, 0.04);
    border-radius: 8px;
}
.lumen-picker__tab {
    flex: 1;
    appearance: none;
    border: none;
    background: transparent;
    padding: 7px 8px;
    border-radius: 6px;
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--jp-ink-soft, #5b6577);
    cursor: pointer;
    transition: background 180ms ease, color 180ms ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lumen-picker__tab:hover {
    background: rgba(29, 53, 87, 0.08);
    color: var(--jp-ink, #2a3441);
}
.lumen-picker__tab[aria-pressed="true"] {
    background: var(--jp-navy, #1d3557);
    color: #fff;
    box-shadow: 0 4px 10px -4px rgba(29, 53, 87, 0.40);
}
.lumen-picker__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.lumen-picker__item {
    appearance: none;
    border: none;
    background: transparent;
    padding: 9px 10px;
    border-radius: 7px;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--sans);
    transition: background 160ms ease;
}
.lumen-picker__item:hover {
    background: rgba(212, 168, 67, 0.10);
}
.lumen-picker__item[aria-current="true"] {
    background: rgba(212, 168, 67, 0.16);
}
.lumen-picker__num {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: var(--gold-deep, #b9892f);
    flex-shrink: 0;
    min-width: 36px;
    font-weight: 600;
}
.lumen-picker__title {
    font-size: 0.85rem;
    color: var(--jp-ink, #2a3441);
    line-height: 1.3;
}

/* ─── 16. Header actions (Search / Login / Pray) — left of icon nav ────────
 * Added 2026-06-15 20:00 per Yousef. Tech-flavored squared buttons that sit
 * between the brand and the icon strip.
 * ──────────────────────────────────────────────────────────────────────── */
.site-header__actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0.65rem 0 1rem;
}
.site-action {
    appearance: none;
    border: 1px solid rgba(212, 168, 67, 0.30);
    background: rgba(212, 168, 67, 0.06);
    color: var(--ink-soft, #2a3441);
    width: 38px;
    height: 38px;
    padding: 0 9px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--sans, system-ui, sans-serif);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    transition: background 180ms ease,
                color 180ms ease,
                border-color 180ms ease,
                transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 220ms ease;
    position: relative;
    overflow: visible;
}
.site-action::before,
.site-action::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border-style: solid;
    border-color: rgba(212, 168, 67, 0.65);
    transition: border-color 220ms ease;
    pointer-events: none;
}
.site-action::before {
    top: -2px;
    left: -2px;
    border-width: 1.5px 0 0 1.5px;
}
.site-action::after {
    bottom: -2px;
    right: -2px;
    border-width: 0 1.5px 1.5px 0;
}
.site-action:hover,
.site-action:focus-visible {
    color: var(--gold-deep, #b9892f);
    background: rgba(212, 168, 67, 0.18);
    border-color: rgba(212, 168, 67, 0.65);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -6px rgba(212, 168, 67, 0.45),
                0 0 0 2px rgba(212, 168, 67, 0.10);
}
.site-action:hover::before,
.site-action:hover::after,
.site-action:focus-visible::before,
.site-action:focus-visible::after { border-color: var(--gold-deep, #b9892f); }

.site-action--pray {
    width: auto;
    padding: 0 13px 0 11px;
    background: linear-gradient(180deg, rgba(212, 168, 67, 0.15), rgba(212, 168, 67, 0.08));
    color: var(--gold-deep, #b9892f);
    border-color: rgba(212, 168, 67, 0.55);
}
.site-action--pray:hover,
.site-action--pray:focus-visible {
    background: linear-gradient(180deg, rgba(212, 168, 67, 0.30), rgba(212, 168, 67, 0.18));
    box-shadow: 0 8px 22px -6px rgba(212, 168, 67, 0.55),
                0 0 0 2px rgba(212, 168, 67, 0.16);
}
.site-action__label { display: inline; }
@media (max-width: 720px) {
    .site-action__label { display: none; }
    .site-action--pray { width: 38px; padding: 0; }
}

/* ─── 17. Tech-styled icon nav — corner brackets + cleaner geometry ─────── */
.site-nav--icons a.nav-icon {
    border: 1px solid rgba(212, 168, 67, 0.18);
    background: rgba(212, 168, 67, 0.03);
}
.site-nav--icons a.nav-icon::before,
.site-nav--icons a.nav-icon::after {
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    border-style: solid;
    border-color: rgba(212, 168, 67, 0.40);
    transition: border-color 220ms ease;
    pointer-events: none;
}
.site-nav--icons a.nav-icon::before {
    top: -2px;
    left: -2px;
    border-width: 1.2px 0 0 1.2px;
}
.site-nav--icons a.nav-icon::after {
    bottom: -2px;
    right: -2px;
    border-width: 0 1.2px 1.2px 0;
}
.site-nav--icons a.nav-icon:hover::before,
.site-nav--icons a.nav-icon:hover::after,
.site-nav--icons a.nav-icon:focus-visible::before,
.site-nav--icons a.nav-icon:focus-visible::after,
.site-nav--icons a.nav-icon[aria-current="page"]::before,
.site-nav--icons a.nav-icon[aria-current="page"]::after { border-color: var(--gold-deep, #b9892f); }

/* ─── 20. Massive serif typography for hero titles (Cuberto/Bible inspired) */
.cinematic-hero__h1,
.page-hero__title,
.rp-hero__h1,
.store-hero__h1,
h1.massive {
    font-size: clamp(2.6rem, 7vw, 5.6rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.012em !important;
    font-weight: 500 !important;
}
.cinematic-hero__h1 em,
.page-hero__title em,
.rp-hero__h1 em,
.store-hero__h1 em { font-style: italic; color: var(--gold-deep, #b9892f); }

/* ─── 21. Subtle grid pattern background in hero (Vercel inspired) ──────── */
.cinematic-hero::before,
.page-hero::before,
.store-hero::before,
.rp-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(212, 168, 67, 0.28) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212, 168, 67, 0.28) 1px, transparent 1px);
    background-size: 56px 56px;
    background-position: center top;
    mask-image: radial-gradient(ellipse at 50% 35%, rgba(0,0,0,1) 45%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 35%, rgba(0,0,0,1) 45%, transparent 85%);
    pointer-events: none;
    z-index: 1;
    opacity: 1;
}
.cinematic-hero,
.page-hero,
.store-hero,
.rp-hero { position: relative; }
.cinematic-hero__inner,
.page-hero__inner,
.store-hero__inner,
.rp-hero__inner { position: relative; z-index: 3; }

/* ─── 22. Glow pulse on CTAs (Railway inspired) ─────────────────────────── */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .btn:hover,
    .cinematic-hero__cta a:hover,
    .lumen-modal__cta:hover {
        animation: lumen-cta-glow 1.6s ease-in-out infinite;
    }
    @keyframes lumen-cta-glow {
        0%, 100% { box-shadow: 0 6px 18px -6px rgba(212, 168, 67, 0.45),
                                0 0 0 0 rgba(212, 168, 67, 0); }
        50%      { box-shadow: 0 10px 28px -6px rgba(212, 168, 67, 0.65),
                                0 0 0 6px rgba(212, 168, 67, 0.08); }
    }
}

/* ─── 23. Liturgical-season brand mark in hero (rotates slowly) ─────────── */
.lumen-liturgy-mark {
    position: absolute;
    top: 50%;
    right: 4%;
    width: clamp(220px, 28vw, 380px);
    height: clamp(220px, 28vw, 380px);
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 2;
    opacity: 0.72;
    filter: drop-shadow(0 0 60px rgba(212, 168, 67, 0.45));
}
@media (prefers-reduced-motion: no-preference) {
    .lumen-liturgy-mark { animation: lumen-mark-spin 60s linear infinite; }
    @keyframes lumen-mark-spin {
        from { transform: translateY(-50%) rotate(0deg); }
        to   { transform: translateY(-50%) rotate(360deg); }
    }
}
.lumen-liturgy-mark svg { width: 100%; height: 100%; display: block; }
@media (max-width: 720px) {
    .lumen-liturgy-mark { opacity: 0.18; right: -20%; }
}

/* ─── 25. Wave 3 — dark mode + page transition + globe + animated icons ── */

/* 2026-06-15 21:11 — DARK MODE REMOVED per Yousef (contrast issues).
 * Rules below are scoped to a non-existent selector so they never apply.
 * Will revisit with proper a11y palette later. */
html.__dm_disabled[data-theme="dark"] {
    --jp-cream-100: #0E1A26;
    --jp-cream-200: #0B141E;
    --jp-cream-300: #11202F;
    --jp-cream-400: #182B3D;
    --jp-ink: #F2E9C9;
    --jp-ink-soft: #C8BDA0;
    --gold-deep: #E8C067;
    --jp-gold-400: #F4D77A;
    --jp-gold-300: #E8C067;
    color-scheme: dark;
}
html[data-theme="dark"] body { background: #0E1A26; color: #F2E9C9; }
html[data-theme="dark"] .cinematic-hero,
html[data-theme="dark"] .page-hero,
html[data-theme="dark"] .store-hero,
html[data-theme="dark"] .rp-hero {
    background:
        radial-gradient(circle at 88% 18%, rgba(244, 215, 122, 0.18) 0%, transparent 52%),
        linear-gradient(180deg, #0E1A26 0%, #11202F 100%) !important;
    color: #F2E9C9;
}
html[data-theme="dark"] .social-bar { background: linear-gradient(180deg, #0B141E, #0E1A26); }
html[data-theme="dark"] .site-action { color: #F2E9C9; background: rgba(212, 168, 67, 0.10); border-color: rgba(232, 192, 103, 0.42); }
html[data-theme="dark"] .nav-icon { color: #F2E9C9 !important; }
html[data-theme="dark"] .lumen-modal__panel { background: #11202F; border-color: rgba(232, 192, 103, 0.45); color: #F2E9C9; }
html[data-theme="dark"] .lumen-modal__title { color: #F4D77A; }
html[data-theme="dark"] .lumen-pray__verse-text,
html[data-theme="dark"] .lumen-pray__prayer p { color: #F2E9C9; }
html[data-theme="dark"] .lumen-modal__label input,
html[data-theme="dark"] .lumen-pray__textarea,
html[data-theme="dark"] .lumen-search-input { background: #0B141E; color: #F2E9C9; border-color: rgba(232, 192, 103, 0.30); }
html[data-theme="dark"] .lumen-search-item { color: #F2E9C9; }
html[data-theme="dark"] .lumen-search-item:hover { background: rgba(232, 192, 103, 0.18); }
html[data-theme="dark"] .footer-col p,
html[data-theme="dark"] .site-footer p,
html[data-theme="dark"] .site-footer a,
html[data-theme="dark"] .site-footer .footer-mark__name {
    color: #F2E9C9 !important;
}
html[data-theme="dark"] .site-footer { background: linear-gradient(180deg, #0E1A26, #0B141E) !important; }

.__dm_disabled_lumen-theme-toggle {
    position: relative;
    width: 40px; height: 40px;
    border-radius: 10px;
    appearance: none;
    border: 1px solid rgba(212, 168, 67, 0.25);
    background: transparent;
    color: var(--jp-ink-soft, #5b6577);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.lumen-theme-toggle:hover { background: rgba(212, 168, 67, 0.14); color: var(--gold-deep, #b9892f); border-color: rgba(212, 168, 67, 0.55); }
.lumen-theme-toggle__moon { display: none; }
html[data-theme="dark"] .lumen-theme-toggle__sun { display: none; }
html[data-theme="dark"] .lumen-theme-toggle__moon { display: block; color: #F4D77A; }

/* Page transition curtain — gold cross draws on every internal link click
 * Timing per Yousef 2026-06-15 21:25:
 *   • 2 s fade-in
 *   • 1 s hold steady
 *   • 2 s fade-out
 * Total: 5 s. The JS adds .is-active for 3 s (2 s in + 1 s hold), then
 * removes it; the 2 s fade-out runs automatically via the transitions below. */
.lumen-page-curtain {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(13, 17, 23, 0);
    pointer-events: none;
    z-index: 99997;
    transition: background 2000ms ease, backdrop-filter 2000ms ease;
}
.lumen-page-curtain.is-active {
    background: rgba(13, 17, 23, 0.72);
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    pointer-events: auto;
}
.lumen-page-curtain__cross {
    width: clamp(120px, 18vw, 240px);
    height: clamp(120px, 18vw, 240px);
    color: var(--gold-deep, #D4A843);
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 2000ms ease, transform 2000ms cubic-bezier(0.22, 1, 0.36, 1);
    filter: drop-shadow(0 0 28px rgba(212, 168, 67, 0.65));
}
.lumen-page-curtain__cross line {
    stroke: currentColor;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    transition: stroke-dashoffset 1600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lumen-page-curtain.is-active .lumen-page-curtain__cross {
    opacity: 1;
    transform: scale(1);
}
.lumen-page-curtain.is-active .lumen-page-curtain__cross line {
    stroke-dashoffset: 0;
}
.lumen-page-curtain.is-active .lumen-page-curtain__cross line:nth-child(2) {
    transition-delay: 400ms;
}

/* Globe — rotating wireframe sphere with light arcs in heroes */
.lumen-globe {
    position: absolute;
    bottom: 4%;
    left: 4%;
    width: clamp(180px, 22vw, 280px);
    height: clamp(180px, 22vw, 280px);
    pointer-events: none;
    z-index: 2;
    opacity: 0.42;
    color: var(--gold-deep, #b9892f);
    filter: drop-shadow(0 0 24px rgba(212, 168, 67, 0.25));
}
.lumen-globe svg { width: 100%; height: 100%; display: block; }
.lumen-globe__frame { opacity: 0.55; }
.lumen-globe__dot { fill: var(--gold-deep, #b9892f); }
.lumen-globe__arc,
.lumen-globe__arc2 {
    stroke: url(#lumen-globe-arc);
    stroke-width: 1.8;
    stroke-dasharray: 200;
    stroke-dashoffset: 0;
    fill: none;
}
@media (prefers-reduced-motion: no-preference) {
    .lumen-globe__spin {
        transform-origin: 100px 100px;
        animation: lumen-globe-spin 24s linear infinite;
    }
    .lumen-globe__frame ellipse:nth-child(2) { animation: lumen-globe-tilt 18s ease-in-out infinite; transform-origin: 100px 100px; }
    .lumen-globe__arc  { animation: lumen-globe-arc 7s ease-in-out infinite; }
    .lumen-globe__arc2 { animation: lumen-globe-arc 9s ease-in-out infinite -3s; }
    @keyframes lumen-globe-spin { from { transform: rotateZ(0); } to { transform: rotateZ(360deg); } }
    @keyframes lumen-globe-tilt { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(0.75); } }
    @keyframes lumen-globe-arc {
        0%   { stroke-dashoffset:  200; opacity: 0; }
        20%  { opacity: 1; }
        80%  { opacity: 1; }
        100% { stroke-dashoffset: -200; opacity: 0; }
    }
}
@media (max-width: 720px) {
    .lumen-globe { opacity: 0.22; left: -10%; bottom: -8%; width: 60vw; height: 60vw; }
}

/* Resend-style animated micro-motion on nav icons */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .site-nav--icons a.nav-icon svg {
        transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
        transform-origin: center;
    }
    .site-nav--icons a.nav-icon:hover svg {
        transform: translateY(-2px) rotate(-2deg) scale(1.06);
    }
    /* Each nth icon gets a unique flourish */
    .site-nav--icons li:nth-child(8n+1) a.nav-icon:hover svg { transform: translateY(-3px) scale(1.08); }
    .site-nav--icons li:nth-child(8n+2) a.nav-icon:hover svg { transform: rotate(8deg) scale(1.08); }
    .site-nav--icons li:nth-child(8n+3) a.nav-icon:hover svg { transform: rotate(-6deg) scale(1.06); }
    .site-nav--icons li:nth-child(8n+4) a.nav-icon:hover svg { transform: translateY(-2px) rotate(2deg) scale(1.10); }
    .site-nav--icons li:nth-child(8n+5) a.nav-icon:hover svg { transform: scale(1.16); }
    .site-nav--icons li:nth-child(8n+6) a.nav-icon:hover svg { transform: translateX(2px) scale(1.06); }
    .site-nav--icons li:nth-child(8n+7) a.nav-icon:hover svg { transform: translateX(-2px) scale(1.06); }
    .site-nav--icons li:nth-child(8n+8) a.nav-icon:hover svg { transform: rotate(360deg) scale(1.04); transition-duration: 700ms; }
}

/* ─── 24. Wave 2 — cursor spotlight, 3D tilt cards, verse smart tooltip ─── */
.has-spotlight { overflow: hidden; }
.lumen-spotlight {
    position: absolute;
    top: 0; left: 0;
    width: 360px; height: 360px;
    margin: -180px 0 0 -180px;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(212, 168, 67, 0.28) 0%,
        rgba(212, 168, 67, 0.12) 40%,
        transparent 75%);
    filter: blur(8px);
    opacity: 0;
    transition: opacity 280ms ease;
    z-index: 2;
    mix-blend-mode: screen;
}

.has-tilt { transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1); transform-style: preserve-3d; will-change: transform; }

.lumen-verse-ref {
    color: var(--gold-deep, #b9892f);
    border-bottom: 1px dotted rgba(212, 168, 67, 0.55);
    cursor: help;
    transition: color 180ms ease, border-bottom-color 180ms ease;
}
.lumen-verse-ref:hover { color: var(--jp-rose-400, #DB7A82); border-bottom-color: var(--jp-rose-400, #DB7A82); }
.lumen-verse-tip {
    position: fixed;
    width: 340px;
    background: var(--jp-cream-100, #FFFEFB);
    border: 1px solid rgba(212, 168, 67, 0.40);
    border-radius: 10px;
    box-shadow: 0 14px 30px -10px rgba(13, 17, 23, 0.32);
    padding: 12px 14px;
    z-index: 99998;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 200ms ease, transform 200ms ease;
    pointer-events: none;
}
.lumen-verse-tip.is-visible { opacity: 1; transform: translateY(0); }
.lumen-verse-tip__text {
    font-family: var(--serif, serif);
    font-style: italic;
    font-size: 1.02rem;
    line-height: 1.45;
    color: var(--jp-ink, #2a3441);
}
.lumen-verse-tip__ref {
    margin-top: 6px;
    font-family: var(--sans);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-deep, #b9892f);
    font-weight: 700;
}

/* Easter egg gold mist storm (kept for code reuse but no longer triggered automatically) */
.lumen-mist-storm {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 99999;
    opacity: 0;
    transition: opacity 600ms ease;
}
.lumen-mist-storm.is-on { opacity: 1; }
.lumen-mist-storm__bit {
    position: absolute;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: rgba(212, 168, 67, 0.85);
    box-shadow: 0 0 10px rgba(212, 168, 67, 0.65);
}

/* ─── 19. Modals (Search / Login / Pray) ────────────────────────────────── */
.lumen-modal {
    position: fixed;
    inset: 0;
    z-index: 99998;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 8vh 1rem 2rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 220ms ease;
}
.lumen-modal.is-open { opacity: 1; pointer-events: auto; }
.lumen-modal__scrim {
    position: absolute;
    inset: 0;
    background: rgba(8, 12, 20, 0.55);
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
}
.lumen-modal__panel {
    position: relative;
    width: min(640px, 100%);
    background: var(--jp-cream-100, #FFFEFB);
    border: 1px solid rgba(212, 168, 67, 0.32);
    border-radius: 14px;
    box-shadow: 0 30px 60px -20px rgba(8, 12, 20, 0.55);
    padding: 18px 22px 22px;
    transform: translateY(-12px) scale(0.98);
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lumen-modal.is-open .lumen-modal__panel { transform: translateY(0) scale(1); }
.lumen-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.lumen-modal__title {
    font-family: var(--sans);
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-deep, #b9892f);
    font-weight: 700;
}
.lumen-modal__close {
    appearance: none;
    border: 1px solid rgba(13, 17, 23, 0.10);
    background: transparent;
    width: 32px; height: 32px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--jp-ink-soft, #5b6577);
    transition: background 180ms ease, color 180ms ease;
}
.lumen-modal__close:hover {
    background: rgba(212, 168, 67, 0.12);
    color: var(--gold-deep);
}
.lumen-modal__lede { color: var(--jp-ink-soft, #5b6577); margin-bottom: 14px; }
.lumen-modal__form { display: flex; flex-direction: column; gap: 10px; }
.lumen-modal__label {
    display: flex; flex-direction: column; gap: 6px;
    font-size: 0.74rem; letter-spacing: 0.10em; text-transform: uppercase;
    color: var(--jp-ink-soft, #5b6577); font-weight: 600;
}
.lumen-modal__label input,
.lumen-pray__textarea,
.lumen-search-input {
    appearance: none;
    border: 1px solid rgba(13, 17, 23, 0.18);
    background: var(--jp-cream-200, #FDFBF5);
    border-radius: 9px;
    padding: 11px 14px;
    font-family: var(--serif, Cormorant Garamond, serif);
    font-size: 1.05rem;
    color: var(--jp-ink, #2a3441);
    transition: border-color 180ms ease, box-shadow 180ms ease;
    width: 100%;
    box-sizing: border-box;
}
.lumen-modal__label input:focus,
.lumen-pray__textarea:focus,
.lumen-search-input:focus {
    outline: none;
    border-color: var(--gold-deep, #b9892f);
    box-shadow: 0 0 0 3px rgba(212, 168, 67, 0.18);
}
.lumen-modal__cta {
    appearance: none;
    border: 1px solid var(--gold-deep, #b9892f);
    background: var(--gold-deep, #b9892f);
    color: #fff;
    border-radius: 9px;
    padding: 11px 18px;
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
    align-self: flex-start;
    margin-top: 8px;
}
.lumen-modal__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -8px rgba(212, 168, 67, 0.55);
}
.lumen-form-msg { color: var(--jp-sage-400, #87A862); font-size: 0.92rem; }
.lumen-modal__fineprint { color: var(--jp-ink-soft, #5b6577); font-size: 0.78rem; margin-top: 12px; }
body.lumen-modal-open { overflow: hidden; }

/* Search results */
.lumen-search-input { font-size: 1.15rem; padding: 14px 16px; }
.lumen-search-results { margin-top: 10px; max-height: 50vh; overflow: auto; }
.lumen-search-section-title {
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-deep, #b9892f);
    padding: 12px 4px 6px;
    font-weight: 700;
}
.lumen-search-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--jp-ink, #2a3441);
    transition: background 160ms ease;
}
.lumen-search-item:hover { background: rgba(212, 168, 67, 0.12); }
.lumen-search-item__kicker {
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-deep, #b9892f);
    font-weight: 700;
}
.lumen-search-item__title { font-family: var(--serif); font-size: 1.05rem; }
.lumen-search-item__sub { color: var(--jp-ink-soft); font-size: 0.84rem; }
.lumen-search-empty { color: var(--jp-ink-soft, #5b6577); padding: 20px 12px; }
.lumen-search-hint { color: var(--jp-ink-soft, #5b6577); font-size: 0.72rem; padding: 10px 4px 0; }
.lumen-search-hint kbd {
    background: rgba(13, 17, 23, 0.06);
    border: 1px solid rgba(13, 17, 23, 0.12);
    border-radius: 4px;
    padding: 1px 5px;
    font-family: var(--mono, monospace);
}

/* Pray */
.lumen-pray__verse {
    text-align: center;
    padding: 14px 8px 18px;
    background: linear-gradient(180deg, rgba(212, 168, 67, 0.12), rgba(212, 168, 67, 0.04));
    border-radius: 10px;
    margin-bottom: 14px;
}
.lumen-pray__verse-text {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.4rem;
    line-height: 1.35;
    color: var(--jp-ink, #2a3441);
}
.lumen-pray__verse-ref {
    margin-top: 6px;
    font-size: 0.78rem;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--gold-deep, #b9892f);
    font-weight: 700;
}
.lumen-pray__prayer p {
    font-family: var(--serif);
    font-size: 1.08rem;
    line-height: 1.6;
    color: var(--jp-ink, #2a3441);
    margin: 0 0 14px 0;
}
.lumen-pray__attribution {
    font-family: var(--sans);
    font-size: 0.72rem !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-deep, #b9892f);
    font-weight: 700;
    margin-top: 8px !important;
}
.lumen-pray__private summary {
    cursor: pointer;
    font-family: var(--sans);
    font-size: 0.78rem;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--gold-deep, #b9892f);
    font-weight: 700;
    margin-bottom: 10px;
}
.lumen-pray__textarea {
    font-family: var(--serif);
    font-size: 1.05rem;
    resize: vertical;
    min-height: 80px;
}
.lumen-pray__history-title {
    margin-top: 14px;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--jp-ink-soft, #5b6577);
    font-weight: 700;
}
.lumen-pray__history {
    list-style: none;
    padding: 0;
    margin: 8px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.lumen-pray__history li {
    background: rgba(13, 17, 23, 0.04);
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 0.92rem;
    color: var(--jp-ink-soft, #5b6577);
    display: flex;
    gap: 8px;
    align-items: baseline;
}
.lumen-pray__history time {
    color: var(--gold-deep, #b9892f);
    font-size: 0.74rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* 2026-06-15 20:51 — labels above the radio + podcast icons (Facebook style) */
.nav-radio-cell--labeled {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding-top: 2px;
}
.nav-radio-cell__label {
    font-family: var(--sans, system-ui, sans-serif);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--gold-deep, #b9892f);
    margin-left: 4px;
    line-height: 1;
    user-select: none;
}
.nav-radio-cell--podcast .nav-radio-cell__label { color: var(--jp-navy, #1d3557); }
.nav-radio-cell--labeled > a,
.nav-radio-cell--labeled > button,
.nav-radio-cell--labeled > .lumen-radio-wave { display: inline-flex; vertical-align: middle; }
.nav-radio-cell--labeled > .lumen-radio-wave + a + button { /* layout fix */ }
.nav-radio-cell--labeled {
    display: inline-flex;
}
.nav-radio-cell--labeled > a.nav-icon--cta { display: inline-flex !important; }
/* Wrap controls so they sit on one row below the label */
.nav-radio-cell--labeled::after { content: ''; display: block; flex-basis: 100%; }

/* Facebook-style icon motion: subtle bounce on hover, color brightening, pop-up tip */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .nav-radio-cell--labeled a.nav-icon--cta:hover {
        transform: translateY(-3px) scale(1.06);
    }
    .nav-radio-cell--labeled .nav-radio-cell__label {
        transition: color 200ms ease, text-shadow 200ms ease;
    }
    .nav-radio-cell--labeled:hover .nav-radio-cell__label {
        text-shadow: 0 0 12px rgba(212, 168, 67, 0.55);
    }
}

/* ─── 18. Social bar 2-row layout — radios under brand, platforms on right */
.social-bar__radios {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: -0.4rem;
}
.social-bar__inner {
    justify-content: space-between !important;
    padding: 0.25rem 1rem;
    box-sizing: border-box;
}
.social-bar__platforms {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}
@media (max-width: 680px) {
    .social-bar__inner {
        flex-direction: column;
        gap: 0.25rem;
        padding-bottom: 0.5rem;
    }
}

/* ─── 13. Top verse marquee — directly under the social bar ────────────────
 * Added 2026-06-15 — KJV verse band lives at the top of every page now.
 * 17:35 refresh — darker background + cream text for high contrast.
 * ──────────────────────────────────────────────────────────────────────── */
.lumen-marquee-band--top {
    padding: 0.55rem 0 !important;
    border: none !important;
    background: linear-gradient(180deg,
        #11202F 0%,
        #0E1A26 100%) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    position: relative;
    z-index: 5;
}
/* 2026-06-15 20:00 — full bleed edge-to-edge + larger readable text per Yousef.
 * The marquee is now appended to <body> after the header (not inside .container)
 * so it spans the entire viewport width without padding tricks. */
.lumen-marquee-band--top,
.lumen-marquee-band--top > .lumen-marquee-band__track,
.lumen-marquee-band--top .container {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.lumen-marquee-band--top .lumen-marquee-band__track {
    font-size: 1.10rem !important;
    color: var(--jp-cream-200, #FDFBF5) !important;
    gap: 3.5rem !important;
    animation-duration: 80s !important;
    font-weight: 500 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    letter-spacing: 0.01em;
}
.lumen-marquee-band--top .lumen-marquee-band__track > span::before {
    content: "✦" !important;
    margin-right: 0.65em !important;
    color: var(--gold-deep, #D4A843) !important;
}

/* ─── 15. Social bar — between icon nav and verse marquee ──────────────────
 * Added 2026-06-15 per Yousef — replaces the /connect/ page. Icons link
 * directly to YouTube, FB, IG, TikTok, X, Spotify, Apple Podcasts, email.
 * ──────────────────────────────────────────────────────────────────────── */
.social-bar {
    /* 2026-06-15 18:37 — full viewport width, breaks out of any parent constraint */
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    box-sizing: border-box;
    background: linear-gradient(180deg,
        var(--jp-cream-100, #FFFEFB) 0%,
        var(--jp-cream-200, #FDFBF5) 100%);
    border-top: 1px solid rgba(212, 168, 67, 0.18);
    border-bottom: 1px solid rgba(13, 17, 23, 0.06);
    padding: 0.35rem 0;
}
/* Marquee anchored after social-bar — same width-breakout so it spans the full viewport. */
.lumen-marquee-band--top {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}

/* 2026-06-15 20:51 — flowing brand-rainbow stripes wrap the verse marquee
 * (top + bottom). The gradient slides horizontally so the colours flow. */
.lumen-marquee-band--top::before,
.lumen-marquee-band--top::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg,
        var(--jp-cream-300, #FBF6E9),
        var(--jp-gold-300, #E8C067),
        var(--jp-peach-300, #FFBA92),
        var(--jp-coral, #F4A78B),
        var(--jp-rose-300, #F09BA1),
        #B7A6E0,
        var(--jp-sky-300, #BDD9F2),
        var(--jp-sage-300, #A8C385),
        var(--jp-gold-400, #D4A843),
        var(--jp-cream-300, #FBF6E9));
    background-size: 200% 100%;
    background-repeat: repeat-x;
    z-index: 6;
}
.lumen-marquee-band--top::before { top: 0; }
.lumen-marquee-band--top::after  { bottom: 0; }
@media (prefers-reduced-motion: no-preference) {
    .lumen-marquee-band--top::before,
    .lumen-marquee-band--top::after {
        animation: lumen-rainbow-flow 18s linear infinite;
    }
    .lumen-marquee-band--top::after { animation-direction: reverse; animation-duration: 22s; }
    @keyframes lumen-rainbow-flow {
        from { background-position:    0% 0; }
        to   { background-position: -200% 0; }
    }
}
.social-bar__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    max-width: none !important;
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
}
.social-bar__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 2026-06-15 20:30 — bigger social icons */
    width: 40px;
    height: 40px;
    border-radius: 10px;
    color: var(--jp-ink-soft, #5b6577);
    background: transparent;
    transition: color 200ms ease, background 200ms ease, transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
    text-decoration: none;
}
.social-bar__link:hover,
.social-bar__link:focus-visible {
    color: var(--gold-deep, #b9892f);
    background: rgba(212, 168, 67, 0.12);
    transform: translateY(-1px);
}
/* Social link tooltips handled by floating tooltip JS (nav-tooltips.js).
 * CSS rule kept inert. */
.social-bar__link[data-tip]::after { content: none !important; display: none !important; }

/* ─── 10. Hero image gentle Ken-Burns drift (Hubtown-like depth) ────────── */
@media (prefers-reduced-motion: no-preference) {
    .cinematic-hero__media img {
        animation: lumen-ken-burns 28s ease-in-out infinite alternate;
        transform-origin: 50% 60%;
        will-change: transform;
    }
    @keyframes lumen-ken-burns {
        from { transform: scale(1.04) translate3d(0, 0, 0); }
        to   { transform: scale(1.10) translate3d(-1.5%, -1.0%, 0); }
    }
}