/**
 * Pulpit Studio — public stylesheet (1.19.0, the canon rewrite).
 *
 * One rule per component, in page order: tokens, section, navigation, heroes,
 * the single sermon, rails and cards, hubs, taxonomy pages, search and the
 * Scripture Index. Every value reads the Esselith suite tokens (--es-*) with
 * the suite's own values as fallbacks, so the plugin looks the same with or
 * without Esselith Core.
 *
 * Canon (signed off 2026-10-26):
 *   - Orange is a FILL with ink text, and only on the play buttons and the
 *     primary button. Active tabs, badges, tags, labels and hovers are teal or
 *     neutral.
 *   - Nothing below 13px. Eyebrows are 13px / 700 / uppercase / 0.14em.
 *   - Buttons are pills, sentence case, weight 600; hover lifts, nothing else.
 *   - Cards 14px corners, photos and the big poster 16px.
 *   - One dark hero: the deep-teal band (.ps-archive-hero) opens every hub.
 *
 * Theme defense is ONE block (section 2). Component rules carry a class plus
 * .ps-section where a theme's element rule could otherwise win; there are no
 * per-component override layers. Theme chrome (container width, sidebars,
 * page titles) lives in pulpit-studio-theme-compat.css.
 *
 * Fonts: no @import. Faces come from Esselith Core's self-hosted
 * 'esselith-fonts' (or the theme's copy); PHP adds a Google fallback only
 * when neither is present. Weights used: 400–700.
 *
 * JS hooks kept as-is: .ps-fade-in/.ps-anim/.is-visible, .ps-share-*,
 * .ps-chapter-*, .ps-audio-mode*, .ps-listening-*, .ps-sermons-grid,
 * .ps-filter-*, .ps-load-more, .ps-mobile-nav-*.
 */


/* ═════════════════════════════════════════════════════════════════════════
   1. TOKENS
   ═════════════════════════════════════════════════════════════════════════ */

:root {
    /* Brand slots — Core's token layer, else the suite reference palette.
       PHP's inline brand block (enqueue) can still override these three. */
    --ps-brand-primary:    var(--es-brand-primary, #ED8B00);
    --ps-brand-secondary:  var(--es-brand-secondary, #004F71);
    --ps-brand-accent:     var(--es-brand-accent, #2E3D48);

    --ps-brand-primary-light:   color-mix(in srgb, var(--ps-brand-primary) 75%, white);
    --ps-brand-primary-dark:    color-mix(in srgb, var(--ps-brand-primary) 80%, black);
    --ps-brand-primary-soft:    color-mix(in srgb, var(--ps-brand-primary) 8%, transparent);
    --ps-brand-secondary-dark:  color-mix(in srgb, var(--ps-brand-secondary) 80%, black);
    --ps-brand-secondary-soft:  color-mix(in srgb, var(--ps-brand-secondary) 8%, transparent);
    --ps-brand-secondary-wash:  color-mix(in srgb, var(--ps-brand-secondary) 16%, transparent);
    /* Pale teal for accents on the deep band (≈7:1 on --es-deep-b). */
    --ps-brand-secondary-pale:  color-mix(in srgb, var(--ps-brand-secondary) 30%, white);

    /* Light page */
    --ps-ink:            var(--es-ink, #071120);
    --ps-page-bg:        var(--es-page-bg, #F7F3EC);
    --ps-text:           var(--es-ink, #071120);
    --ps-text-dim:       rgba(7, 17, 32, 0.72);
    --ps-text-muted:     rgba(7, 17, 32, 0.62);   /* ≥4.5:1 on white and cream */
    --ps-border-soft:    rgba(7, 17, 32, 0.1);
    --ps-glass:          rgba(7, 17, 32, 0.04);
    --ps-pill-bg:        rgba(7, 17, 32, 0.05);
    --ps-card-bg:        #ffffff;

    /* Dark: the suite deep-teal band, with ink for placeholders and modals */
    --ps-deep-a:         var(--es-deep-a, #064058);
    --ps-deep-b:         var(--es-deep-b, #04293A);
    --ps-dark:           var(--es-ink, #071120);
    --ps-dark-2:         var(--es-deep-a, #064058);
    --ps-dark-3:         var(--es-deep-b, #04293A);
    --ps-text-on-dark:   var(--es-text-on-dark, #E8ECF5);
    --ps-text-dim-dark:  rgba(232, 236, 245, 0.78);
    --ps-border-dark:    rgba(232, 236, 245, 0.16);

    /* Geometry — the suite's shared corners (arc 5): small 8, card 16 */
    --ps-radius-sm:      var(--es-radius-sm, 8px);
    --ps-radius:         var(--es-radius-card, 16px);
    --ps-radius-lg:      var(--es-radius-card, 16px);

    /* Shadows — neutral only */
    --ps-shadow:         0 20px 60px rgba(7, 17, 32, 0.18);
    --ps-shadow-card:    0 4px 16px rgba(7, 17, 32, 0.06);
    --ps-shadow-lift:    0 14px 32px rgba(7, 17, 32, 0.12);

    /* Type */
    --ps-font-body:      var(--es-font-body, 'Montserrat', system-ui, -apple-system, sans-serif);
    --ps-font-accent:    var(--es-font-display, 'Playfair Display', Georgia, serif);
    --ps-fs-min:         0.8125rem;                 /* 13px — the floor */
    --ps-fs-eyebrow:     var(--es-eyebrow, 0.8125rem);
    --ps-fs-btn:         0.9375rem;                 /* 15px */
    --ps-fs-h1:          var(--es-h1-hero, clamp(2.5rem, 2.11rem + 1.66vw, 3.875rem));
    --ps-fs-h2:          var(--es-h2, clamp(1.625rem, 1.42rem + 0.88vw, 2.375rem));
    --ps-fs-lead:        var(--es-lead, 1.3125rem);
    --ps-tracking:       0.14em;
}


/* ═════════════════════════════════════════════════════════════════════════
   2. THEME DEFENSE — the one block
   ═════════════════════════════════════════════════════════════════════════
   Themes underline content links (some with a box-shadow or border-bottom),
   and Astra paints bare <button> hovers its accent colour. Every Pulpit link
   and button is styled by its component, so here we only strip those theme
   decorations. Component rules below set their own borders and shadows at
   higher specificity (.ps-section + class), so nothing here fights them. */

/* The share dialog and the phone Browse sheet are moved/rendered outside
   .ps-section (the sheet is appended to <body> by the script), so they're
   scoped by their own wrappers. */
:is(.ps-section, .ps-share-modal, .ps-mobile-nav-modal) a,
:is(.ps-section, .ps-share-modal, .ps-mobile-nav-modal) a:hover,
:is(.ps-section, .ps-share-modal, .ps-mobile-nav-modal) a:focus,
:is(.ps-section, .ps-share-modal, .ps-mobile-nav-modal) a:visited {
    text-decoration: none;
}

.ps-section :is(a, button):not([class*="ps-btn"]):not([class*="ps-cinematic-"]):not(.ps-card-link):not(.ps-next-step-item) {
    box-shadow: none;
}

:is(.ps-section, .ps-share-modal, .ps-mobile-nav-modal) button {
    background-image: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
}

/* Keyboard focus, everywhere in the plugin */
.ps-section :is(a, button, summary, select, input):focus-visible,
.ps-share-modal :is(a, button):focus-visible,
.ps-mobile-nav-modal :is(a, button):focus-visible {
    outline: 2px solid var(--ps-brand-secondary);
    outline-offset: 2px;
}

/* Visually-hidden text (screen readers + SEO keep it) */
.ps-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}


/* ═════════════════════════════════════════════════════════════════════════
   3. SECTION WRAPPER + atmosphere
   ═════════════════════════════════════════════════════════════════════════ */

.ps-section {
    position: relative;
    background: var(--ps-page-bg);
    color: var(--ps-text);
    padding: 48px 0 72px;
    overflow: hidden;
    font-family: var(--ps-font-body);
}

/* [ps_latest_sermon tone="dark"] — remaps the section tokens so the whole
   band flips together. */
.ps-section--dark {
    --ps-page-bg:     linear-gradient(165deg, var(--ps-deep-a), var(--ps-deep-b));
    --ps-text:        var(--ps-text-on-dark);
    --ps-text-dim:    var(--ps-text-dim-dark);
    --ps-text-muted:  rgba(232, 236, 245, 0.66);
    --ps-border-soft: rgba(232, 236, 245, 0.12);
    --ps-glass:       rgba(232, 236, 245, 0.06);
    --ps-pill-bg:     rgba(232, 236, 245, 0.08);
    --ps-card-bg:     rgba(255, 255, 255, 0.04);
    background: var(--ps-page-bg);
    color: var(--ps-text);
}

/* v1.25.0 (Roger's direction): Continue Listening cards are the white card on
   every band. On the deep teal they bring the light tokens back, so the
   series stays teal, the title ink and "View" teal — and the card stands out. */
.ps-section--dark .ps-listening-card {
    --ps-card-bg:     #ffffff;
    --ps-text:        var(--ps-ink);
    --ps-text-dim:    rgba(7, 17, 32, 0.72);
    --ps-text-muted:  rgba(7, 17, 32, 0.62);
    --ps-border-soft: rgba(7, 17, 32, 0.1);
    color: var(--ps-text);
}
.ps-section.ps-section--dark .ps-listening-card { border-color: transparent; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28); }
.ps-section.ps-section--dark .ps-listening-card:hover { border-color: rgba(255, 255, 255, 0.6); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.36); }

.ps-section--dark .ps-cinematic-hero {
    box-shadow: 0 0 0 1px rgba(232, 236, 245, 0.08),
                0 30px 80px rgba(0, 0, 0, 0.5);
}

.ps-section .ps-section-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .ps-section { padding: 32px 0 48px; }
    .ps-section .ps-section-inner { padding: 0 16px; }
}

.ps-section-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    /* 1.27.3 — the two faint glows, painted as backgrounds (same size, place and
       8% strength as the old .ps-orb circles). As elements they were blurred
       140px — re-rastered every frame, seconds of blocking time on a phone —
       and, unblurred, they counted as layout shift when the hero grew. */
    background:
        radial-gradient(140px circle at calc(100% - 50px) calc(10% + 200px), color-mix(in srgb, var(--ps-brand-secondary) 8%, transparent), transparent),
        radial-gradient(122px circle at 75px calc(100% - 75px), color-mix(in srgb, var(--ps-brand-accent) 8%, transparent), transparent);
}

.ps-grain {
    position: absolute;
    inset: 0;
    opacity: 0.03;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='5'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* 1.27.3 — the glows are painted by .ps-section-bg above; the old orb
   elements (still in saved markup) draw nothing. */
.ps-orb { display: none; }

.ps-orb-1 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, var(--ps-brand-secondary) 0%, transparent 70%);
    top: 10%; right: -150px;
}

.ps-orb-2 {
    width: 350px; height: 350px;
    background: radial-gradient(circle, var(--ps-brand-accent) 0%, transparent 70%);
    bottom: -100px; left: -100px;
}

.ps-single-sermon { padding: 40px 0 80px; }

.ps-taxonomy-section .ps-divider {
    margin-top: 32px;
    margin-bottom: 28px;
}


/* ═════════════════════════════════════════════════════════════════════════
   4. SHARED TYPE — eyebrows, dividers, section labels
   ═════════════════════════════════════════════════════════════════════════ */

.ps-eyebrow,
.ps-divider-label,
.ps-mobile-nav-eyebrow,
.ps-share-modal-eyebrow,
.ps-next-step-label span,
.ps-scripture-column-title,
.ps-speaker-bio-eyebrow,
.ps-filter-label,
.ps-index-jump-label,
.ps-section .ps-index-chapter-title {
    font-family: var(--ps-font-body);
    font-size: var(--ps-fs-eyebrow);
    font-weight: 700;
    letter-spacing: var(--ps-tracking);
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--ps-brand-secondary);
}

/* Eyebrow pill (hub heroes) */
.ps-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px;
    background: var(--ps-brand-secondary-soft);
    border: 1px solid var(--ps-border-soft);
    border-radius: 999px;
    margin-bottom: 20px;
}

/* 1.27.3 — the pulse animates only transform + opacity (a ring on ::after),
   so the browser runs it off the main thread. The old box-shadow keyframes
   repainted every frame and cost a throttled phone ~2.8s of blocking time
   on the Sermons page (Lighthouse TBT). Same look: a ring swelling ~8px out. */
.ps-pulse {
    position: relative;
    display: inline-block;
    width: 7px;
    height: 7px;
    background: var(--ps-brand-secondary);
    border-radius: 50%;
}
.ps-pulse::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: currentColor;
    opacity: 0;
    animation: ps-pulse 2.2s ease-out infinite;
}

@keyframes ps-pulse {
    0%   { transform: scale(1);   opacity: 0.5; }
    70%  { transform: scale(3.3); opacity: 0; }
    100% { transform: scale(3.3); opacity: 0; }
}

.ps-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 24px;
}

.ps-divider::before,
.ps-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ps-border-soft), transparent);
}

.ps-divider-label { white-space: nowrap; }

/* Section labels are real <h2>s (v1.22.0, for the page outline): keep the
   eyebrow look. The theme pins every heading to the display face with
   !important, hence the one here. */
.ps-section h2.ps-divider-label {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--ps-font-body) !important;
    font-size: var(--ps-fs-eyebrow);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: var(--ps-tracking);
    text-transform: uppercase;
    color: var(--ps-brand-secondary);
}


/* ═════════════════════════════════════════════════════════════════════════
   5. BUTTONS
   ═════════════════════════════════════════════════════════════════════════
   .ps-btn-primary = orange fill, ink label (the one primary per screen).
   .ps-btn-ghost   = teal outline on light. Hover lifts; colours stay put. */

.ps-section .ps-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--es-btn-height, 48px);
    padding: 12px 24px;
    border: 2px solid transparent;
    border-radius: 999px;
    font-family: var(--ps-font-body);
    font-size: var(--ps-fs-btn);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ps-section .ps-btn:hover,
.ps-section .ps-btn:focus-visible {
    transform: translateY(-2px);
}

.ps-section .ps-btn-primary,
.ps-section .ps-btn-primary:hover,
.ps-section .ps-btn-primary:focus {
    background: var(--ps-brand-primary);
    border-color: var(--ps-brand-primary);
    color: var(--ps-ink);
}

.ps-section .ps-btn-ghost,
.ps-section .ps-btn-ghost:hover,
.ps-section .ps-btn-ghost:focus {
    background: transparent;
    border-color: var(--ps-brand-secondary);
    color: var(--ps-brand-secondary);
}

.ps-section .ps-btn-ghost:hover { box-shadow: var(--ps-shadow-card); }

.ps-section .ps-btn-ghost.ps-audio-mode-toggle[aria-pressed="true"] {
    background: var(--ps-brand-secondary);
    border-color: var(--ps-brand-secondary);
    color: #fff;
}

.ps-section--dark .ps-btn-ghost,
.ps-section--dark .ps-btn-ghost:hover,
.ps-section--dark .ps-btn-ghost:focus {
    border-color: rgba(255, 255, 255, 0.6);
    color: #fff;
}

.ps-single-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 28px auto 32px;
}

@media (max-width: 600px) {
    .ps-single-actions { gap: 8px; }
    .ps-section .ps-single-actions .ps-btn { padding: 10px 18px; font-size: var(--ps-fs-min); }
}


/* ═════════════════════════════════════════════════════════════════════════
   6. QUICK NAV (the tab bar) + mobile Browse sheet
   ═════════════════════════════════════════════════════════════════════════
   Light: neutral glass track, teal active tab with a white label.
   On the dark hero: white-glass track, white active tab with a deep label. */

.ps-quick-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin: 0 auto 44px;
    padding: 5px;
    background: var(--ps-glass);
    border: 1px solid var(--ps-border-soft);
    border-radius: 999px;
    max-width: fit-content;
}

.ps-section .ps-quick-nav-link {
    padding: 10px 20px;
    font-family: var(--ps-font-body);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ps-text-dim);
    border-radius: 999px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.ps-section .ps-quick-nav-link:hover {
    color: var(--ps-text);
    background: var(--ps-brand-secondary-soft);
}

.ps-section .ps-quick-nav-link.is-active {
    color: #fff;
    background: var(--ps-brand-secondary);
}

.ps-hub-section .ps-quick-nav { margin-bottom: 24px; }

@media (max-width: 768px) {
    .ps-quick-nav { display: none; }
}

.ps-section .ps-mobile-nav-trigger {
    display: none;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0 0 32px;
    padding: 14px 22px;
    background: var(--ps-card-bg);
    border: 1px solid var(--ps-border-soft);
    border-radius: 999px;
    color: var(--ps-text);
    font-family: var(--ps-font-body);
    font-size: var(--ps-fs-btn);
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--ps-shadow-card);
    transition: border-color 0.2s ease;
}

.ps-section .ps-mobile-nav-trigger:hover,
.ps-section .ps-mobile-nav-trigger:focus,
.ps-section .ps-mobile-nav-trigger.is-open {
    background: var(--ps-card-bg);
    border-color: var(--ps-brand-secondary);
    color: var(--ps-text);
}

.ps-mobile-nav-trigger svg { transition: transform 0.3s; }
.ps-mobile-nav-trigger.is-open svg { transform: rotate(180deg); }

@media (max-width: 768px) {
    .ps-section .ps-mobile-nav-trigger { display: flex; }
}

.ps-mobile-nav-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.25s, visibility 0.25s;
}

.ps-mobile-nav-modal.is-open {
    visibility: visible;
    opacity: 1;
}

.ps-mobile-nav-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 17, 32, 0.65);
    backdrop-filter: blur(4px);
}

.ps-mobile-nav-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 24px 24px 0 0;
    padding: 28px 22px 36px;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.25);
    text-align: left;
}

.ps-mobile-nav-modal.is-open .ps-mobile-nav-panel { transform: translateY(0); }

.ps-mobile-nav-modal .ps-mobile-nav-close,
.ps-share-modal .ps-share-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: none;
    color: rgba(7, 17, 32, 0.72);
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s;
}

.ps-mobile-nav-modal .ps-mobile-nav-close:hover,
.ps-share-modal .ps-share-close:hover {
    background: rgba(7, 17, 32, 0.05);
    color: var(--ps-ink);
}

.ps-mobile-nav-eyebrow {
    margin-bottom: 18px;
    text-align: center;
}

.ps-mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ps-mobile-nav-modal .ps-mobile-nav-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: rgba(7, 17, 32, 0.04);
    border: 1px solid transparent;
    border-radius: var(--ps-radius);
    color: var(--ps-ink);
    font-family: var(--ps-font-body);
    font-size: 1rem;
    font-weight: 600;
    transition: background-color 0.2s, border-color 0.2s;
}

.ps-mobile-nav-modal .ps-mobile-nav-item:hover {
    background: var(--ps-brand-secondary-soft);
    border-color: var(--ps-brand-secondary-wash);
}

.ps-mobile-nav-modal .ps-mobile-nav-item.is-active {
    background: var(--ps-brand-secondary);
    border-color: var(--ps-brand-secondary);
    color: #fff;
}

body.ps-mobile-nav-locked { overflow: hidden; }


/* ═════════════════════════════════════════════════════════════════════════
   7. HUB HERO — the dark band (All Messages + every hub page)
   ═════════════════════════════════════════════════════════════════════════ */

.ps-hero {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 36px;
    padding: 8px 0;
}

.ps-hero-title {
    font-family: var(--ps-font-accent);
    font-size: var(--ps-fs-h1);
    font-weight: 700;
    line-height: 1.05;
    color: var(--ps-text);
    margin: 0 0 18px;
}

.ps-hero-title em {
    color: inherit;
    font-style: italic;
    font-weight: 700;
}

.ps-hero-subtitle {
    font-family: var(--ps-font-body);
    font-size: var(--ps-fs-lead);
    line-height: 1.6;
    color: var(--ps-text-dim);
    margin: 0;
}

.ps-section.ps-section--has-hero { padding-top: 0; }
.ps-section.ps-section--has-hero > .ps-section-inner { padding-top: 64px; }
.ps-archive-section--hero.ps-section--has-hero > .ps-section-inner { padding-top: 72px; }

.ps-archive-hero {
    position: relative;
    /* Above .ps-section-bg (1) and .ps-section-inner (2): the mobile Browse
       sheet (position:fixed) renders inside this stacking context and must
       paint over the content below it. */
    z-index: 3;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(165deg, var(--ps-deep-a), var(--ps-deep-b));
    padding: 92px 24px 72px;
    text-align: center;
}

.ps-archive-hero--hub { padding: 80px 24px 56px; }

.ps-archive-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background-image:
        radial-gradient(ellipse 70% 60% at 12% 0%,   color-mix(in srgb, var(--ps-brand-secondary-pale) 18%, transparent), transparent 60%),
        radial-gradient(ellipse 80% 70% at 88% 115%, color-mix(in srgb, var(--ps-brand-secondary-pale) 24%, transparent), transparent 60%);
}

.ps-archive-hero-grain {
    position: absolute;
    inset: 0;
    opacity: 0.05;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='5'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.ps-archive-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1080px;
    margin: 0 auto;
}

/* Editable overline above the eyebrow (All Messages) */
.ps-archive-hero-kicker {
    margin: 0 0 20px;
    font-family: var(--ps-font-body);
    font-size: var(--ps-fs-eyebrow);
    font-weight: 600;
    letter-spacing: var(--ps-tracking);
    line-height: 1.9;
    text-transform: uppercase;
    color: var(--ps-text-dim-dark);
}

.ps-archive-hero-kicker-line { display: block; }

.ps-kicker-rule {
    display: inline-block;
    width: 34px;
    height: 1px;
    vertical-align: middle;
    margin: 0 14px 3px;
    background: rgba(232, 236, 245, 0.3);
}

.ps-archive-hero .ps-eyebrow {
    color: var(--ps-text-on-dark);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(232, 236, 245, 0.18);
}

.ps-archive-hero .ps-pulse { background: var(--ps-brand-secondary-pale); }
.ps-archive-hero .ps-hero-title { color: var(--ps-text-on-dark); }
.ps-archive-hero .ps-hero-title em { color: var(--ps-brand-secondary-pale); }

.ps-archive-hero .ps-hero-subtitle {
    color: var(--ps-text-dim-dark);
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

.ps-archive-hero .ps-quick-nav {
    margin: 40px auto 0;
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--ps-border-dark);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 40px rgba(0, 0, 0, 0.35);
}

.ps-section .ps-archive-hero .ps-quick-nav-link { color: var(--ps-text-dim-dark); }

.ps-section .ps-archive-hero .ps-quick-nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.ps-section .ps-archive-hero .ps-quick-nav-link.is-active {
    color: var(--ps-deep-b);
    background: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.ps-section .ps-archive-hero :is(a, button):focus-visible { outline-color: #fff; }

.ps-section .ps-archive-hero .ps-mobile-nav-trigger {
    margin-top: 32px;
    margin-bottom: 0;
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--ps-border-dark);
    color: var(--ps-text-on-dark);
    box-shadow: none;
}

.ps-section .ps-archive-hero .ps-mobile-nav-trigger:hover,
.ps-section .ps-archive-hero .ps-mobile-nav-trigger:focus,
.ps-section .ps-archive-hero .ps-mobile-nav-trigger.is-open {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.6);
    color: var(--ps-text-on-dark);
}

@media (max-width: 768px) {
    .ps-archive-hero { padding: 64px 16px 48px; }
    .ps-archive-hero--hub { padding: 56px 16px 40px; }
    .ps-archive-hero .ps-hero-subtitle { font-size: 1.0625rem; }
    .ps-section.ps-section--has-hero > .ps-section-inner { padding-top: 40px; }
    .ps-archive-section--hero.ps-section--has-hero > .ps-section-inner { padding-top: 48px; }
}

/* The featured sermon inside the All Messages band */
.ps-archive-hero-featured {
    position: relative;
    z-index: 2;
    max-width: 1240px;
    margin: clamp(32px, 5vw, 56px) auto 0;
    padding: 0 16px;
}

.ps-section .ps-archive-hero .ps-latest-title-xl,
.ps-section .ps-archive-hero .ps-split-featured-title,
.ps-section .ps-archive-hero .ps-split-featured-title :is(.ps-title-main, .ps-title-sep) {
    color: var(--ps-text-on-dark);
}

.ps-archive-hero .ps-series-tag-sm { color: var(--ps-text-dim-dark); }
.ps-section .ps-archive-hero .ps-series-tag-link:hover { color: #fff; }

.ps-archive-hero .ps-latest-meta-line {
    color: var(--ps-text-dim-dark);
    border-top-color: rgba(232, 236, 245, 0.14);
    border-bottom-color: rgba(232, 236, 245, 0.14);
}

.ps-archive-hero .ps-latest-excerpt-center { color: var(--ps-text-dim-dark); }

.ps-archive-hero .ps-divider::before,
.ps-archive-hero .ps-divider::after {
    background: linear-gradient(90deg, transparent, rgba(232, 236, 245, 0.18), transparent);
}


/* ═════════════════════════════════════════════════════════════════════════
   8. FEATURED SERMON — heading block + cinematic poster
   ═════════════════════════════════════════════════════════════════════════ */

.ps-latest-heading-block {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.ps-series-tag-sm {
    display: inline-block;
    font-family: var(--ps-font-body);
    font-size: var(--ps-fs-eyebrow);
    font-weight: 700;
    letter-spacing: var(--ps-tracking);
    text-transform: uppercase;
    color: var(--ps-brand-secondary);
}

.ps-section .ps-series-tag-link { transition: color 0.2s ease; }
.ps-section .ps-series-tag-link:hover { color: var(--ps-brand-secondary-dark); }
.ps-section--dark .ps-series-tag-sm { color: var(--ps-text-dim-dark); }
.ps-section.ps-section--dark .ps-series-tag-link:hover { color: #fff; }

.ps-section .ps-latest-title-xl {
    font-family: var(--ps-font-accent);
    font-style: normal;
    font-size: var(--ps-fs-h1);
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
    text-transform: none;
    color: var(--ps-text);
}

@media (max-width: 768px) {
    .ps-section .ps-latest-title-xl { font-size: clamp(1.6rem, 7vw, 2.4rem); }
}

.ps-section .ps-archive-featured-heading .ps-latest-title-xl { font-size: var(--ps-fs-h2); }

.ps-section .ps-split-featured-title {
    display: block;
    text-align: center;
    text-wrap: balance;
    color: var(--ps-text);
}

.ps-section .ps-split-featured-title :is(.ps-title-main, .ps-title-sep) { color: var(--ps-text); }

/* The title is a link: it keeps the title's colour, not the theme's link teal */
.ps-section .ps-split-featured-title a,
.ps-section .ps-split-featured-title a:hover,
.ps-section .ps-latest-title-xl a { color: inherit; }
.ps-split-featured-title .ps-title-sep { font-style: normal; }

.ps-split-featured-title .ps-title-week {
    color: inherit;
    font-style: normal;
    font-family: inherit;
    font-weight: inherit;
}

.ps-latest-meta-line {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 20px;
    font-family: var(--ps-font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--ps-text-dim);
    padding: 14px 0;
    border-top: 1px solid var(--ps-border-soft);
    border-bottom: 1px solid var(--ps-border-soft);
    width: 100%;
    max-width: 720px;
}

.ps-latest-meta-line span + span::before {
    content: '\2022';
    margin-right: 20px;
    color: var(--ps-text-muted);
}

/* Phones: the line wraps, and a dot would start the second row on its own */
@media (max-width: 600px) {
    .ps-latest-meta-line { gap: 4px 16px; }
    .ps-latest-meta-line span + span::before { content: none; }
}

.ps-latest-excerpt-center {
    font-family: var(--ps-font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ps-text-dim);
    margin: 6px 0 0;
    max-width: 680px;
    text-wrap: balance;
}

.ps-featured-divider { margin: 32px 0 24px; }
.ps-featured-sermon { margin-bottom: 56px; }
.ps-featured-sermon .ps-latest-heading-block { margin-bottom: 28px; }

/* — The poster — */
.ps-cinematic-hero {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    min-height: clamp(420px, 42vw, 560px);
    background-color: var(--ps-dark);
    background-size: cover;
    background-position: center;
    border-radius: var(--ps-radius-lg);
    overflow: hidden;
    box-shadow:
        0 34px 90px rgba(7, 17, 32, 0.2),
        0 10px 26px rgba(7, 17, 32, 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.ps-cinematic-hero.no-art,
.ps-cinematic-hero--cool.no-art {
    background:
        radial-gradient(ellipse at 20% 30%, color-mix(in srgb, var(--ps-brand-secondary-pale) 22%, transparent) 0%, transparent 55%),
        linear-gradient(135deg, var(--ps-deep-a) 0%, var(--ps-deep-b) 100%);
}

.ps-cinematic-hero--warm.no-art {
    background:
        radial-gradient(ellipse at 20% 30%, color-mix(in srgb, var(--ps-brand-accent) 55%, transparent) 0%, transparent 55%),
        linear-gradient(135deg, #142231 0%, var(--ps-dark) 100%);
}

.ps-cinematic-hero--warm.has-art::before,
.ps-cinematic-hero--cool.has-art::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: overlay;
    background: radial-gradient(ellipse at top left, color-mix(in srgb, var(--ps-brand-secondary) 40%, transparent) 0%, transparent 60%);
}

.ps-cinematic-full-link {
    position: absolute;
    inset: 0;
    z-index: 4;
    text-indent: -9999px;
    overflow: hidden;
}

.ps-cinematic-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(7, 17, 32, 0.2) 0%, rgba(7, 17, 32, 0.45) 45%, rgba(7, 17, 32, 0.85) 100%);
    pointer-events: none;
}

.ps-cinematic-vignette {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: radial-gradient(ellipse at center, transparent 35%, rgba(7, 17, 32, 0.4) 100%);
    pointer-events: none;
}

/* The overlay passes the pointer through to the full-card link; its own
   links and buttons take it back. */
.ps-cinematic-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    padding: 36px 44px 40px;
    color: #fff;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    pointer-events: none;
}

.ps-cinematic-content :is(a, button) { pointer-events: auto; }

.ps-cinematic-now-playing {
    position: relative;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(7, 17, 32, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    color: var(--ps-text-on-dark);
    font-family: var(--ps-font-body);
    font-size: var(--ps-fs-eyebrow);
    font-weight: 700;
    letter-spacing: var(--ps-tracking);
    text-transform: uppercase;
    backdrop-filter: blur(6px);
}

.ps-cinematic-lockup-title {
    position: relative;
    z-index: 5;
    font-family: var(--ps-font-accent);
    font-weight: 700;
    line-height: 0.92;
    letter-spacing: -0.015em;
    margin: 4px 0;
    color: #fff;
    display: flex;
    flex-direction: column;
}

.ps-section .ps-cinematic-lockup-title span {
    display: block;
    font-size: clamp(2.6rem, 6.5vw, 5.4rem);
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

/* Second line of the lockup: italic, still white (orange is for the play
   button only). */
.ps-section .ps-cinematic-lockup-title span:last-child:not(:only-child) { font-style: italic; }

/* No series: the lockup falls back to the (longer) sermon title */
.ps-section .ps-cinematic-content--fallback-title .ps-cinematic-lockup-title span {
    font-size: clamp(1.5rem, 3.2vw, 2.4rem);
    line-height: 1.05;
    letter-spacing: -0.005em;
}

.ps-cinematic-content--fallback-title {
    gap: 10px;
    padding-right: 28%;
}

.ps-cinematic-tagline {
    font-family: var(--ps-font-body);
    font-size: 0.95rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.82);
    max-width: 560px;
    margin: 4px 0 8px;
}

.ps-cinematic-actions {
    position: relative;
    z-index: 6;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
    pointer-events: auto;
}

.ps-section .ps-cinematic-primary,
.ps-section .ps-cinematic-secondary {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 24px;
    border: 2px solid transparent;
    border-radius: 999px;
    font-family: var(--ps-font-body);
    font-size: var(--ps-fs-btn);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ps-section .ps-cinematic-primary:hover,
.ps-section .ps-cinematic-secondary:hover,
.ps-section .ps-cinematic-primary:focus-visible,
.ps-section .ps-cinematic-secondary:focus-visible {
    transform: translateY(-2px);
}

.ps-section .ps-cinematic-primary,
.ps-section .ps-cinematic-primary:hover,
.ps-section .ps-cinematic-primary:visited {
    background: var(--ps-brand-primary);
    border-color: var(--ps-brand-primary);
    color: var(--ps-ink);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.ps-section .ps-cinematic-secondary,
.ps-section .ps-cinematic-secondary:hover,
.ps-section .ps-cinematic-secondary:visited {
    background: rgba(7, 17, 32, 0.35);
    border-color: rgba(255, 255, 255, 0.6);
    color: #fff;
    backdrop-filter: blur(6px);
}

.ps-cinematic-arrow { transition: transform 0.2s; }
.ps-cinematic-primary:hover .ps-cinematic-arrow { transform: translateX(3px); }

.ps-cinematic-badges {
    position: absolute;
    top: 22px;
    right: 22px;
    z-index: 4;
    display: flex;
    gap: 6px;
}

/* Artwork with its own title (--art-fit): hug the art's 16:9 so the whole
   graphic shows, no crop and no letterbox. v1.25.0 — on every screen (it was
   phones only; wide screens cut ~9% off the top and bottom). */
.ps-section .ps-cinematic-hero--art-fit {
    min-height: 0;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* v1.25.0 — square or extra-wide art: shown whole on the deep teal. */
/* v1.26.0 (Roger) — the artwork at full strength: no dark wash or vignette,
   nothing printed over it (the play button and Video/Audio badges stay). */
.ps-section .ps-cinematic-hero--art-fit .ps-cinematic-scrim,
.ps-section .ps-cinematic-hero--art-fit .ps-cinematic-vignette { display: none; }
/* The series line and "Browse all messages" (homepage) sit just under the poster. */
.ps-cinematic-below {
    max-width: 1100px;
    margin: 20px auto 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 20px;
    text-align: center;
}
.ps-cinematic-below-tagline {
    margin: 0;
    flex: 1 1 100%;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ps-text-dim);
}

.ps-section .ps-cinematic-hero--odd-art {
    background-size: contain;
    background-repeat: no-repeat;
    background-color: var(--ps-deep-b);
}

/* Below 1024 the section heading above the poster already says "This
   Week's Message"; the on-art pill would repeat it. */
@media (max-width: 1023.98px) {
    .ps-cinematic-hero .ps-cinematic-now-playing { display: none; }
}

@media (max-width: 768px) {
    .ps-cinematic-hero { min-height: 380px; border-radius: var(--ps-radius); }
    .ps-archive-hero-featured { padding: 0; }
    .ps-cinematic-content { padding: 22px 24px 26px; }
    .ps-section .ps-cinematic-lockup-title span { font-size: clamp(2.2rem, 9vw, 3rem); }
    .ps-cinematic-content--fallback-title { padding-right: 24px; }
    .ps-section .ps-cinematic-content--fallback-title .ps-cinematic-lockup-title span { font-size: clamp(1.3rem, 5.5vw, 1.9rem); }
    .ps-cinematic-tagline { font-size: 0.9rem; }
    .ps-cinematic-actions { gap: 8px; }
    .ps-section .ps-cinematic-primary,
    .ps-section .ps-cinematic-secondary { padding: 10px 18px; font-size: 0.875rem; }
}

@media (max-width: 480px) {
    .ps-cinematic-actions { flex-direction: column; align-items: stretch; }
    .ps-section .ps-cinematic-primary,
    .ps-section .ps-cinematic-secondary { justify-content: center; }
}

/* Touch: iOS mis-hit-tests the pass-through overlay inside this filtered
   poster, so drop the full-card link and let the overlay take taps. */
@media (hover: none) {
    .ps-cinematic-full-link { display: none; }
    .ps-cinematic-content { pointer-events: auto; }
}

/* — Play orbit: frosted ring + rotating label + the orange play disc — */
.ps-section .ps-play-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140px;
    height: 140px;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.ps-section .ps-play-orbit:hover { transform: translate(-50%, -50%) scale(1.06); }

.ps-play-orbit::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 50%;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow:
        0 0 0 8px rgba(255, 255, 255, 0.06),
        0 18px 50px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
    transition: background 0.25s, border-color 0.25s;
}

.ps-play-orbit:hover::before {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.5);
}

.ps-play-orbit-text {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: ps-orbit-spin 14s linear infinite;
}

/* SVG units — the 8px text scales with the 140px orbit's viewBox. */
.ps-section .ps-play-orbit-text text {
    fill: rgba(255, 255, 255, 0.82);
    font-family: var(--ps-font-body);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.ps-play-orbit-icon {
    position: relative;
    z-index: 1;
    width: 70px;
    height: 70px;
    background: var(--ps-brand-primary);
    color: var(--ps-ink);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.35);
}

.ps-play-orbit-icon svg {
    width: 28px;
    height: 28px;
    margin-left: 2px; /* optical centring for the triangle */
}

@keyframes ps-orbit-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Below 1024 the rotating label goes (it gapped and crowded); the ring
   tightens to a slim halo around the disc. */
@media (max-width: 1023.98px) {
    .ps-play-orbit-text { display: none; }
}

@media (max-width: 1023.98px) and (min-width: 601px) {
    .ps-section .ps-play-orbit { width: 84px; height: 84px; }
    .ps-play-orbit-icon { width: 60px; height: 60px; }
    .ps-play-orbit-icon svg { width: 26px; height: 26px; }
}

@media (max-width: 600px) and (orientation: landscape) {
    .ps-section .ps-play-orbit { width: 72px; height: 72px; }
    .ps-play-orbit-icon { width: 60px; height: 60px; }
}

/* Portrait phones: a compact chip bottom-right, centred on the Browse
   pill's line; the content keeps clear of it. */
@media (max-width: 600px) and (orientation: portrait) {
    .ps-section .ps-play-orbit {
        top: auto;
        left: auto;
        right: 14px;
        bottom: 22px;
        transform: none;
        width: 48px;
        height: 48px;
    }
    .ps-section .ps-play-orbit:hover { transform: none; }
    .ps-cinematic-hero .ps-cinematic-content { padding-right: 72px; }
    .ps-play-orbit::before { display: none; }
    .ps-play-orbit-icon {
        width: 48px;
        height: 48px;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.38), 0 6px 18px rgba(0, 0, 0, 0.35);
    }
    .ps-play-orbit-icon svg { width: 20px; height: 20px; }
}


/* ═════════════════════════════════════════════════════════════════════════
   9. SINGLE SERMON — video, chapters, key points, transcript, questions
   ═════════════════════════════════════════════════════════════════════════ */

.ps-latest-video-hero {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto 32px;
    border-radius: var(--ps-radius-lg);
    box-shadow: var(--ps-shadow);
    overflow: hidden;
}

.ps-video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: var(--ps-radius-lg);
    background: #000;
}

.ps-video-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.ps-video-placeholder {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    background: linear-gradient(135deg, var(--ps-deep-a), var(--ps-deep-b));
    border-radius: var(--ps-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.ps-video-placeholder svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 600px) {
    .ps-latest-video-hero { margin-left: -8px; margin-right: -8px; }
}

/* Audio mode: the iframe keeps playing, out of sight */
.ps-video-wrapper.ps-audio-mode {
    padding-bottom: 0;
    height: 200px;
    background: linear-gradient(135deg, var(--ps-deep-a), var(--ps-deep-b));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 14px;
    color: var(--ps-text-on-dark);
}

.ps-video-wrapper.ps-audio-mode iframe {
    width: 1px !important;
    height: 1px !important;
    opacity: 0;
    pointer-events: none;
}

.ps-audio-mode::before {
    content: 'Audio only';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--ps-font-accent);
    font-size: 1.75rem;
    font-weight: 700;
    z-index: 2;
}

/* — Audio player (audio-only sermons) — a deep-teal listening card —
   The native <audio controls> shows until the script enhances it. */
.ps-latest-video-hero--audio {
    max-width: 760px;
    box-shadow: var(--ps-shadow);
}

.ps-audio-player {
    /* One height for all three states (native player before the script,
       the custom controls, "isn't available"), so the page below never
       jumps (v1.22.0, layout shift). */
    min-height: 188px;
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 28px;
    align-items: center;
    padding: 24px;
    background: linear-gradient(165deg, var(--ps-deep-a), var(--ps-deep-b));
    border-radius: var(--ps-radius-lg);
    color: var(--ps-text-on-dark);
}

.ps-audio-art {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    border-radius: var(--ps-radius);
    background: rgba(255, 255, 255, 0.06) center / cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.ps-audio-art span {
    font-family: var(--ps-font-accent);
    font-size: 4.5rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.2);
}

.ps-audio-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.ps-audio-eyebrow {
    font-family: var(--ps-font-body);
    font-size: var(--ps-fs-eyebrow);
    font-weight: 700;
    letter-spacing: var(--ps-tracking);
    text-transform: uppercase;
    color: var(--ps-text-dim-dark);
}

.ps-audio-el { width: 100%; }
.ps-audio-player.is-enhanced .ps-audio-el { display: none; }

.ps-audio-unavailable {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ps-text-on-dark);
}

.ps-audio-unavailable[hidden],
.ps-audio-player.is-unavailable .ps-audio-eyebrow { display: none; }

.ps-audio-controls {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
}

.ps-audio-controls[hidden] { display: none; }

.ps-section .ps-audio-play {
    width: 60px;
    height: 60px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--ps-brand-primary);
    color: var(--ps-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease;
}

.ps-section .ps-audio-play:hover { transform: scale(1.05); }
.ps-audio-icon-play { margin-left: 3px; }
.ps-audio-icon-pause,
.ps-audio-player.is-playing .ps-audio-icon-play { display: none; }
.ps-audio-player.is-playing .ps-audio-icon-pause { display: block; }

.ps-audio-track { min-width: 0; }

.ps-section .ps-audio-seek {
    --ps-seek: 0%;
    width: 100%;
    height: 22px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.ps-audio-seek::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, #fff var(--ps-seek), rgba(255, 255, 255, 0.22) var(--ps-seek));
}

.ps-audio-seek::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, #fff var(--ps-seek), rgba(255, 255, 255, 0.22) var(--ps-seek));
}

.ps-audio-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin-top: -5px;
    border-radius: 50%;
    background: #fff;
    border: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.ps-audio-seek::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 0;
}

.ps-section .ps-audio-seek:focus-visible { outline-color: #fff; }

.ps-audio-times {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: var(--ps-fs-min);
    font-variant-numeric: tabular-nums;
    color: var(--ps-text-dim-dark);
}

.ps-audio-tools {
    display: flex;
    gap: 6px;
}

.ps-section .ps-audio-skip,
.ps-section .ps-audio-speed {
    min-width: 44px;
    height: 44px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-family: var(--ps-font-body);
    font-size: 0.875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.ps-section .ps-audio-skip:hover,
.ps-section .ps-audio-speed:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.6);
    color: #fff;
}

.ps-section .ps-audio-player :is(button):focus-visible { outline-color: #fff; }

@media (max-width: 680px) {
    .ps-audio-player {
        grid-template-columns: 64px minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        align-content: start;
        gap: 14px 16px;
        padding: 18px;
        min-height: 236px;
    }
    .ps-audio-unavailable { grid-column: 1 / -1; align-self: center; }
    .ps-audio-art span { font-size: 1.75rem; }
    /* art + label share the top row; the controls span the card below */
    .ps-audio-body { display: contents; }
    .ps-audio-eyebrow { grid-column: 2; align-self: center; }
    .ps-audio-controls,
    .ps-audio-el { grid-column: 1 / -1; }
    .ps-audio-controls { grid-template-columns: auto minmax(0, 1fr); }
    .ps-audio-tools { grid-column: 1 / -1; justify-content: center; }
}

/* — Chapter markers (a <details> accordion) — */
.ps-chapter-markers { margin: 0 0 34px; }

.ps-chapter-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.ps-chapter-item { margin: 0; }
.ps-chapter-details[open] .ps-chapter-list { margin-top: 10px; }

.ps-section .ps-chapter-button {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 18px;
    background: var(--ps-card-bg);
    border: 1px solid var(--ps-border-soft);
    border-radius: var(--ps-radius);
    color: var(--ps-text);
    font-family: var(--ps-font-body);
    font-size: 0.9375rem;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s, transform 0.2s;
}

.ps-section .ps-chapter-button:hover {
    border-color: var(--ps-brand-secondary);
    background: var(--ps-brand-secondary-soft);
    color: var(--ps-text);
    transform: translateX(2px);
}

.ps-chapter-time,
.ps-chapter-count {
    flex: 0 0 auto;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ps-brand-secondary);
    background: var(--ps-brand-secondary-soft);
}

.ps-chapter-time {
    padding: 4px 10px;
    border-radius: var(--ps-radius-sm);
    min-width: 72px;   /* every chip the same width, so labels line up */
    text-align: center;
}

.ps-chapter-count {
    padding: 2px 9px;
    border-radius: 999px;
}

.ps-chapter-label { flex: 1; font-weight: 500; }

.ps-chapter-arrow {
    flex: 0 0 auto;
    color: var(--ps-text-muted);
    transition: transform 0.2s, color 0.2s;
    font-size: 1.1rem;
}

.ps-chapter-button:hover .ps-chapter-arrow {
    color: var(--ps-brand-secondary);
    transform: translateX(2px);
}

/* Chapter + transcript toggles share one look */
.ps-chapter-toggle,
.ps-transcript-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    list-style: none;
    color: var(--ps-text);
    font-family: var(--ps-font-body);
    font-size: 1rem;
    font-weight: 600;
    transition: background-color 0.15s, color 0.15s;
}

.ps-chapter-toggle {
    padding: 16px 22px;
    background: var(--ps-card-bg);
    border: 1px solid var(--ps-border-soft);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow-card);
}

.ps-transcript-toggle { padding: 18px 26px; }

.ps-chapter-toggle::-webkit-details-marker,
.ps-transcript-toggle::-webkit-details-marker { display: none; }

.ps-chapter-toggle:hover,
.ps-transcript-toggle:hover {
    background: var(--ps-brand-secondary-soft);
    color: var(--ps-text);
}

.ps-chapter-toggle-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ps-chapter-toggle-icon,
.ps-transcript-toggle-icon {
    flex: 0 0 auto;
    color: var(--ps-brand-secondary);
    transition: transform 0.3s ease;
}

.ps-chapter-details[open] .ps-chapter-toggle-icon,
.ps-transcript-details[open] .ps-transcript-toggle-icon { transform: rotate(180deg); }

/* — Content column — */
.ps-single-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 920px;
    margin: 0 auto;
}

/* — Key points — */
.ps-key-points-section { margin-bottom: 36px; }

.ps-key-points-heading {
    margin: 0 0 20px;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--ps-text);
    max-width: 62ch;
}

.ps-key-points-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ps-key-point {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 20px 24px;
    background: var(--ps-card-bg);
    border: 1px solid var(--ps-border-soft);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow-card);
}

.ps-key-point-number {
    flex: 0 0 auto;
    font-family: var(--ps-font-accent);
    font-size: 1.6rem;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    color: var(--ps-brand-secondary);
    min-width: 40px;
}

.ps-key-point-text {
    flex: 1;
    font-family: var(--ps-font-body);
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--ps-text);
    padding-top: 4px;
}

/* — Transcript — */
.ps-transcript-section { margin-bottom: 36px; }

.ps-transcript-details {
    background: var(--ps-card-bg);
    border: 1px solid var(--ps-border-soft);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow-card);
    overflow: hidden;
}

.ps-transcript-details[open] .ps-transcript-toggle { border-bottom: 1px solid var(--ps-border-soft); }

.ps-transcript-content {
    padding: 28px 32px;
    font-family: var(--ps-font-body);
    font-size: 1rem;
    line-height: 1.75;
    color: var(--ps-text-dim);
}

.ps-transcript-content p { margin: 0 0 1.2em; }
.ps-transcript-content p:last-child { margin-bottom: 0; }

/* — Discussion questions — */
.ps-discussion-section {
    margin-bottom: 36px;
    padding: 32px 36px;
    background: linear-gradient(135deg, var(--ps-brand-secondary-soft), transparent 70%);
    border: 1px solid var(--ps-border-soft);
    border-radius: var(--ps-radius);
}

.ps-discussion-intro {
    font-family: var(--ps-font-accent);
    font-style: italic;
    color: var(--ps-text-dim);
    margin: 0 0 16px;
    font-size: 1.05rem;
}

.ps-discussion-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: ps-q;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ps-discussion-item {
    counter-increment: ps-q;
    position: relative;
    padding: 14px 18px 14px 56px;
    background: var(--ps-card-bg);
    border: 1px solid var(--ps-border-soft);
    border-radius: var(--ps-radius-sm);
    font-family: var(--ps-font-body);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ps-text);
}

.ps-discussion-item::before {
    content: counter(ps-q, decimal-leading-zero);
    position: absolute;
    left: 16px;
    top: 14px;
    font-family: var(--ps-font-accent);
    font-style: italic;
    font-weight: 700;
    color: var(--ps-brand-secondary);
    font-size: 1.1rem;
}

@media (max-width: 600px) {
    .ps-discussion-section { padding: 22px 18px; }
    .ps-key-point { padding: 16px 18px; gap: 14px; }
}

/* — Scripture references in meta (linker on): quiet until hovered — */
.ps-section a.ps-scripture-link,
a.ps-scripture-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.ps-section a.ps-scripture-link:hover,
.ps-section a.ps-scripture-link:focus-visible,
a.ps-scripture-link:hover {
    color: var(--ps-brand-secondary);
    border-bottom-color: var(--ps-brand-secondary);
}

/* On the deep-teal band teal would vanish into the ground: orange there
   (≈6:1 on --es-deep-b; signed off by Roger 2026-10-27). */
.ps-section :is(.ps-archive-hero, .ps-section--dark, .ps-cinematic-hero) a.ps-scripture-link:hover,
.ps-section :is(.ps-archive-hero, .ps-cinematic-hero) a.ps-scripture-link:focus-visible,
.ps-section.ps-section--dark a.ps-scripture-link:hover,
.ps-section.ps-section--dark a.ps-scripture-link:focus-visible {
    color: var(--ps-brand-primary);
    border-bottom-color: var(--ps-brand-primary);
}


/* ═════════════════════════════════════════════════════════════════════════
   10. NEXT STEPS ("Keep going" cards)
   ═════════════════════════════════════════════════════════════════════════ */

.ps-next-step-wrap { margin: 48px auto 0; overflow: visible; }

.ps-next-step-label {
    text-align: center;
    margin-bottom: 18px;
}

.ps-next-step-label span {
    display: inline-block;
    padding: 6px 16px;
    background: var(--ps-brand-secondary-soft);
    border: 1px solid var(--ps-border-soft);
    border-radius: 999px;
}

.ps-next-step-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    overflow: visible;
}

.ps-section .ps-next-step-item {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 24px;
    background: var(--ps-card-bg);
    border: 1px solid var(--ps-border-soft);
    border-radius: var(--ps-radius);
    color: var(--ps-text);
    box-shadow: var(--ps-shadow-card);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease, border-color 0.2s ease;
}

.ps-section .ps-next-step-item:hover {
    z-index: 5;
    border-color: var(--ps-brand-secondary);
    box-shadow: var(--ps-shadow-lift);
    transform: translateY(-3px);
}

.ps-next-step-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ps-brand-secondary-soft);
    color: var(--ps-brand-secondary);
    border-radius: var(--ps-radius-sm);
}

.ps-next-step-icon svg { width: 22px; height: 22px; }

.ps-next-step-copy {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ps-next-step-copy strong {
    font-family: var(--ps-font-body);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ps-text);
}

.ps-next-step-copy small {
    font-size: var(--ps-fs-min);
    color: var(--ps-text-dim);
}

.ps-next-step-arrow {
    flex: 0 0 auto;
    color: var(--ps-brand-secondary);
    font-size: 1.2rem;
    transition: transform 0.2s;
}

.ps-next-step-item:hover .ps-next-step-arrow { transform: translateX(4px); }

@media (max-width: 768px) {
    .ps-next-step-bar { grid-template-columns: 1fr; }
}


/* ═════════════════════════════════════════════════════════════════════════
   11. CONTINUE LISTENING (the related-sermon rail)
   ═════════════════════════════════════════════════════════════════════════ */

.ps-continue-listening {
    margin: 64px auto 0;
    max-width: 1100px;
}

.ps-listening-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 26px;
}

.ps-listening-header h2 {
    font-family: var(--ps-font-accent);
    font-size: var(--ps-fs-h2);
    font-weight: 700;
    color: var(--ps-text);
    margin: 0 0 6px;
}

.ps-listening-header p {
    color: var(--ps-text-dim);
    margin: 0;
    font-size: var(--ps-fs-lead);
}

.ps-listening-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ps-section .ps-listening-arrow {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    background: var(--ps-card-bg);
    border: 1px solid var(--ps-border-soft);
    color: var(--ps-text-dim);
    cursor: pointer;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.ps-section .ps-listening-arrow:hover {
    background: var(--ps-brand-secondary);
    color: #fff;
    border-color: var(--ps-brand-secondary);
}

.ps-drag-label {
    font-size: var(--ps-fs-min);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--ps-tracking);
    color: var(--ps-text-muted);
}

.ps-listening-rail-wrap {
    overflow: hidden;
    margin: 0 -8px;
}

.ps-listening-rail {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 8px 8px 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.ps-listening-rail::-webkit-scrollbar { display: none; }
.ps-listening-rail.is-dragging { scroll-behavior: auto; cursor: grabbing; }

/* Fixed card width: the theme compat's article rule must not stretch it. */
.ps-section .ps-listening-card {
    flex: 0 0 220px;
    width: 220px;
    max-width: 220px;
    border-radius: var(--ps-radius);
    overflow: hidden;
    background: var(--ps-card-bg);
    border: 1px solid var(--ps-border-soft);
    box-shadow: var(--ps-shadow-card);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease, border-color 0.25s ease;
}

@media (max-width: 640px) {
    .ps-section .ps-listening-card { flex-basis: 190px; width: 190px; max-width: 190px; }
}

.ps-section .ps-listening-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--ps-shadow-lift);
    border-color: var(--ps-brand-secondary);
}

.ps-listening-card-link {
    display: block;
    color: inherit;
}

.ps-listening-art {
    position: relative;
    isolation: isolate;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    background-color: var(--ps-dark-2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ps-listening-initial {
    font-family: var(--ps-font-accent);
    font-size: 3rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.15);
    z-index: 2;
}

.ps-listening-art-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.45));
    z-index: 4;
}

.ps-listening-badges {
    position: absolute;
    bottom: 8px;
    left: 8px;
    display: flex;
    gap: 5px;
    z-index: 4;
}

.ps-listening-body { padding: 14px 16px 16px; }

.ps-listening-series,
.ps-card-series {
    display: block;
    font-family: var(--ps-font-body);
    font-size: var(--ps-fs-min);
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.35;
    text-transform: uppercase;
    color: var(--ps-brand-secondary);
    margin-bottom: 6px;
}

.ps-listening-title {
    font-family: var(--ps-font-body);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ps-text);
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ps-listening-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: var(--ps-fs-min);
    color: var(--ps-text-dim);
    margin-bottom: 16px;
}

.ps-listening-footer,
.ps-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--ps-border-soft);
    font-size: var(--ps-fs-min);
    color: var(--ps-text-muted);
}

.ps-listening-footer strong {
    color: var(--ps-brand-secondary);
    font-weight: 700;
}


/* ═════════════════════════════════════════════════════════════════════════
   12. BADGES (Video / Audio on artwork)
   ═════════════════════════════════════════════════════════════════════════ */

.ps-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-family: var(--ps-font-body);
    font-size: var(--ps-fs-min);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    color: #fff;
    backdrop-filter: blur(8px);
}

.ps-badge-video { background: rgba(7, 17, 32, 0.72); }
.ps-badge-audio { background: var(--ps-brand-secondary); }


/* ═════════════════════════════════════════════════════════════════════════
   13. SHARE MODAL
   ═════════════════════════════════════════════════════════════════════════ */

.ps-share-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.25s, visibility 0.25s;
}

.ps-share-modal.is-open {
    visibility: visible;
    opacity: 1;
}

.ps-share-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 17, 32, 0.7);
    backdrop-filter: blur(6px);
}

.ps-share-panel {
    position: relative;
    z-index: 1;
    width: calc(100% - 32px);
    max-width: 480px;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%) scale(0.95);
    background: #fff;
    color: var(--ps-ink);
    border-radius: var(--ps-radius-lg);
    padding: 36px 32px 28px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ps-share-modal.is-open .ps-share-panel { transform: translateY(-50%) scale(1); }

.ps-share-modal-eyebrow {
    text-align: center;
    margin-bottom: 8px;
}

.ps-share-modal-title {
    font-family: var(--ps-font-accent);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ps-ink);
    text-align: center;
    margin: 0 0 24px;
    line-height: 1.3;
}

.ps-share-modal-icons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.ps-share-modal .ps-share-modal-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 10px;
    background: rgba(7, 17, 32, 0.04);
    border: 1px solid rgba(7, 17, 32, 0.1);
    border-radius: var(--ps-radius);
    color: var(--ps-ink);
    cursor: pointer;
    font-family: var(--ps-font-body);
    font-size: var(--ps-fs-min);
    font-weight: 600;
    transition: transform 0.2s, border-color 0.2s, background-color 0.2s;
}

.ps-share-modal .ps-share-modal-btn:hover {
    background: var(--ps-brand-secondary-soft);
    border-color: var(--ps-brand-secondary);
    color: var(--ps-ink);
    transform: translateY(-2px);
}

.ps-share-modal .ps-share-modal-btn.copied {
    background: var(--ps-brand-secondary);
    border-color: var(--ps-brand-secondary);
    color: #fff;
}


/* ═════════════════════════════════════════════════════════════════════════
   14. FADE-IN (JS adds .ps-anim right before observing; without JS the
       content simply stays visible)
   ═════════════════════════════════════════════════════════════════════════ */

.ps-fade-in.ps-anim {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.ps-fade-in.is-visible {
    opacity: 1;
    transform: none; /* not translateY(0): a resting transform confuses iOS hit-testing */
}

@media (prefers-reduced-motion: reduce) {
    .ps-fade-in,
    .ps-fade-in.ps-anim {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .ps-play-orbit-text,
    .ps-pulse,
    .ps-pulse::after { animation: none; }
}


/* ═════════════════════════════════════════════════════════════════════════
   15. FILTER BAR (Advanced Search: Speaker / Series / Book / Year + Reset)
   ═════════════════════════════════════════════════════════════════════════ */

.ps-section .ps-filter-bar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr auto;
    gap: 12px;
    align-items: end;
    padding: 18px 20px;
    background: var(--ps-card-bg);
    border: 1px solid var(--ps-border-soft);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow-card);
    margin-bottom: 32px;
}

.ps-filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.ps-section .ps-filter-label {
    margin: 0;
    padding: 0;
    color: var(--ps-text-dim);
}

.ps-section select.ps-filter-select {
    width: 100%;
    height: auto;
    min-height: 46px;
    padding: 11px 36px 11px 14px;
    box-sizing: border-box;
    background-color: var(--ps-glass);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23596070' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    border: 1px solid var(--ps-border-soft);
    border-radius: var(--ps-radius-sm);
    color: var(--ps-text);
    font-family: var(--ps-font-body);
    font-size: 0.9375rem;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none;
    transition: border-color 0.2s, background-color 0.2s;
}

.ps-section select.ps-filter-select:hover,
.ps-section select.ps-filter-select:focus {
    border-color: var(--ps-brand-secondary);
    background-color: var(--ps-card-bg);
    outline: none;
}

.ps-section select.ps-filter-select:focus { box-shadow: 0 0 0 3px var(--ps-brand-secondary-wash); }

.ps-filter-select option,
.ps-filter-select optgroup {
    background: #fff;
    color: var(--ps-ink);
}

.ps-filter-select optgroup {
    font-weight: 700;
    font-style: normal;
    color: var(--ps-brand-secondary);
}

.ps-section button.ps-filter-reset {
    min-height: 46px;
    padding: 11px 22px;
    background: transparent;
    border: 1px solid var(--ps-border-soft);
    border-radius: 999px;
    color: var(--ps-text-dim);
    font-family: var(--ps-font-body);
    font-size: var(--ps-fs-btn);
    font-weight: 600;
    box-shadow: none;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, transform 0.2s;
}

.ps-section button.ps-filter-reset:hover,
.ps-section button.ps-filter-reset:focus {
    background: transparent;
    border-color: var(--ps-brand-secondary);
    color: var(--ps-brand-secondary);
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .ps-section .ps-filter-bar { grid-template-columns: 1fr 1fr; }
    .ps-section button.ps-filter-reset { grid-column: span 2; }
}

@media (max-width: 480px) {
    .ps-section .ps-filter-bar { grid-template-columns: 1fr; padding: 14px; }
    .ps-section button.ps-filter-reset { grid-column: auto; }
}


/* ═════════════════════════════════════════════════════════════════════════
   16. SERMON GRID + CARDS
   ═════════════════════════════════════════════════════════════════════════ */

.ps-grid {
    display: grid;
    gap: 22px;
    margin-bottom: 40px;
}

.ps-cols-3 { grid-template-columns: repeat(3, 1fr); }
.ps-cols-2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 968px) {
    .ps-cols-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .ps-cols-3, .ps-cols-2 { grid-template-columns: 1fr; }
}

.ps-grid.ps-loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.2s;
}

/* Sermon, series and speaker cards share one shell and one hover. */
.ps-section :is(.ps-card, .ps-series-card, .ps-speaker-card) {
    position: relative;
    background: var(--ps-card-bg);
    border: 1px solid var(--ps-border-soft);
    border-radius: var(--ps-radius);
    overflow: hidden;
    box-shadow: var(--ps-shadow-card);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.ps-section :is(.ps-card, .ps-series-card, .ps-speaker-card):hover {
    transform: translateY(-4px);
    border-color: var(--ps-brand-secondary);
    box-shadow: var(--ps-shadow-lift);
}

.ps-section :is(.ps-card-link, .ps-series-card-link, .ps-speaker-card-link) {
    display: block;
    color: inherit;
}

/* Artwork tiles (sermon + series): art is a background image; with none,
   a deep tile carries the initial. */
.ps-card-image,
.ps-series-card-image {
    position: relative;
    isolation: isolate;
    aspect-ratio: 16 / 9; /* v1.25.0 — the artwork's own shape (16:10 cut ~5% off each side) */
    background-size: cover;
    background-position: center;
    background-color: var(--ps-dark-2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Card artwork is a real <img> (srcset + lazy, v1.22.0) filling its tile;
   the tint (::before, 1) and the scrim (3) layer above it. */
.ps-section .ps-art-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    z-index: 0;
    border-radius: 0;
}
/* v1.25.0 — art that isn't 16:9 (a square logo, a wide banner) is shown whole
   on the tile's deep teal instead of cut to fill. */
.ps-section .ps-art-img.is-odd-shape { object-fit: contain; }

/* Colour variety for art-less tiles: a hash picks warm (slate) or cool
   (teal); the wash sits between the art (0) and the scrim (3). */
.ps-card--warm .ps-card-image,
.ps-listening-card--warm .ps-listening-art { background-color: #142231; }

.ps-card--cool .ps-card-image,
.ps-listening-card--cool .ps-listening-art { background-color: var(--ps-deep-b); }

.ps-card--warm .ps-card-image::before,
.ps-listening-card--warm .ps-listening-art::before,
.ps-card--cool .ps-card-image::before,
.ps-listening-card--cool .ps-listening-art::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.ps-card--warm .ps-card-image::before,
.ps-listening-card--warm .ps-listening-art::before {
    background:
        radial-gradient(ellipse at top left, color-mix(in srgb, var(--ps-brand-accent) 60%, transparent) 0%, transparent 70%),
        linear-gradient(165deg, color-mix(in srgb, var(--ps-brand-accent) 30%, transparent) 0%, transparent 55%);
}

.ps-card--cool .ps-card-image::before,
.ps-listening-card--cool .ps-listening-art::before {
    background:
        radial-gradient(ellipse at top left, color-mix(in srgb, var(--ps-brand-secondary) 55%, transparent) 0%, transparent 70%),
        linear-gradient(165deg, color-mix(in srgb, var(--ps-brand-secondary) 25%, transparent) 0%, transparent 55%);
}

.ps-card-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.55));
    z-index: 3;
}

.ps-card-initial,
.ps-series-card-initial {
    font-family: var(--ps-font-accent);
    font-size: 4.5rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.18);
    z-index: 2;
}

.ps-series-card-initial { font-size: 5rem; }

/* Play disc — orange, appears on hover, right of centre so the initial
   stays visible. */
.ps-card-play {
    position: absolute;
    top: 65%;
    right: 14%;
    transform: translate(50%, -50%) scale(0.7);
    width: 56px;
    height: 56px;
    background: var(--ps-brand-primary);
    color: var(--ps-ink);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}

.ps-card-play svg { margin-left: 2px; }

.ps-card:hover .ps-card-play {
    opacity: 1;
    transform: translate(50%, -50%) scale(1);
}

@media (max-width: 480px) {
    .ps-card-play { right: 22%; }
}

.ps-card-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 4;
    display: flex;
    gap: 6px;
}

.ps-card-body { padding: 18px 20px 20px; }
.ps-card-series { margin-bottom: 8px; }

.ps-card-title {
    font-family: var(--ps-font-body);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ps-text);
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Meta pills: speaker + book neutral, the passage teal */
.ps-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    font-size: var(--ps-fs-min);
    color: var(--ps-text-dim);
    margin-bottom: 14px;
    min-height: 1.5em;
}

.ps-card-meta-item.ps-meta-scripture {
    color: var(--ps-brand-secondary);
    font-weight: 600;
}

.ps-card-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-family: var(--ps-font-body);
    font-size: var(--ps-fs-min);
    font-weight: 500;
    line-height: 1.4;
    background: var(--ps-pill-bg);
    border: 1px solid rgba(7, 17, 32, 0.06);
    color: var(--ps-text-dim);
    white-space: nowrap;
}

.ps-card-pill--scripture {
    background: var(--ps-brand-secondary-soft);
    border-color: var(--ps-brand-secondary-wash);
    color: var(--ps-brand-secondary);
    font-weight: 700;
}

.ps-card-watch {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--ps-brand-secondary);
    font-weight: 700;
    transition: gap 0.2s;
}

.ps-card:hover .ps-card-watch { gap: 9px; }

/* — Block heading row (Library + Series blocks): title left, "see all" right — */
.ps-block-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 24px;
    margin: 0 0 24px;
}

.ps-section h2.ps-block-title {
    margin: 0;
    font-family: var(--ps-font-accent);
    font-size: var(--ps-fs-h2);
    font-weight: 700;
    line-height: 1.15;
    color: var(--ps-text);
}

.ps-section .ps-block-more {
    margin-left: auto;
    font-family: var(--ps-font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ps-brand-secondary);
}

.ps-section .ps-block-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.ps-block .ps-series-grid { margin-top: 0; }
.ps-section.ps-block { padding: 56px 0; }

@media (max-width: 768px) {
    .ps-section.ps-block { padding: 40px 0; }
}

/* — Grid / List switch + the compact list view — */
.ps-view-toggle {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    width: fit-content;
    margin: 0 0 16px auto;
    padding: 4px;
    background: var(--ps-glass);
    border: 1px solid var(--ps-border-soft);
    border-radius: 999px;
}

.ps-view-toggle[hidden] { display: none; }

.ps-section .ps-view-toggle button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ps-text-dim);
    font-family: var(--ps-font-body);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.ps-section .ps-view-toggle button:hover { color: var(--ps-text); background: var(--ps-brand-secondary-soft); }

.ps-section .ps-view-toggle button[aria-pressed="true"] {
    background: var(--ps-brand-secondary);
    color: #fff;
}

.ps-sermons-grid.is-list {
    grid-template-columns: 1fr;
    gap: 10px;
}

.ps-section .ps-sermons-grid.is-list .ps-card:hover { transform: translateY(-2px); }

.ps-sermons-grid.is-list .ps-card-link {
    display: grid;
    grid-template-columns: 176px minmax(0, 1fr);
}

.ps-sermons-grid.is-list .ps-card-image { aspect-ratio: auto; min-height: 110px; height: 100%; }
.ps-sermons-grid.is-list .ps-card-initial { font-size: 2.5rem; }
.ps-sermons-grid.is-list .ps-card-badges { display: none; }
.ps-sermons-grid.is-list .ps-card-play { width: 44px; height: 44px; top: 50%; right: 50%; }

.ps-sermons-grid.is-list .ps-card-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "series foot" "title foot" "meta foot";
    align-items: center;
    column-gap: 24px;
    padding: 14px 22px;
}

.ps-sermons-grid.is-list .ps-card-series { grid-area: series; margin-bottom: 2px; }
.ps-sermons-grid.is-list .ps-card-title { grid-area: title; margin: 0 0 6px; -webkit-line-clamp: 1; }
.ps-sermons-grid.is-list .ps-card-meta { grid-area: meta; margin: 0; min-height: 0; }

.ps-sermons-grid.is-list .ps-card-footer {
    grid-area: foot;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    padding: 0;
    border: 0;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .ps-sermons-grid.is-list .ps-card-link { grid-template-columns: 96px minmax(0, 1fr); }
    .ps-sermons-grid.is-list .ps-card-image { min-height: 96px; }
    .ps-sermons-grid.is-list .ps-card-play { display: none; }
    .ps-sermons-grid.is-list .ps-card-body {
        grid-template-columns: 1fr;
        grid-template-areas: "series" "title" "meta" "foot";
        padding: 12px 14px;
    }
    .ps-sermons-grid.is-list .ps-card-title { -webkit-line-clamp: 2; font-size: 1rem; }
    .ps-sermons-grid.is-list .ps-card-footer {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-top: 8px;
    }
}

/* — Load more — */
.ps-load-more-wrap {
    display: flex;
    justify-content: center;
    margin: 32px 0;
}

.ps-section .ps-load-more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 30px;
    background: var(--ps-card-bg);
    border: 2px solid var(--ps-brand-secondary);
    border-radius: 999px;
    color: var(--ps-brand-secondary);
    font-family: var(--ps-font-body);
    font-size: var(--ps-fs-btn);
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--ps-shadow-card);
    transition: transform 0.2s, box-shadow 0.2s;
}

.ps-section .ps-load-more:hover,
.ps-section .ps-load-more:focus {
    background: var(--ps-card-bg);
    border-color: var(--ps-brand-secondary);
    color: var(--ps-brand-secondary);
    transform: translateY(-2px);
    box-shadow: var(--ps-shadow-lift);
}

.ps-load-more.is-loading { pointer-events: none; opacity: 0.7; }
.ps-load-more-icon { transition: transform 0.2s; }
.ps-load-more:hover .ps-load-more-icon { transform: translateY(2px); }

/* — Empty state — */
.ps-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--ps-text-dim);
    font-family: var(--ps-font-body);
    font-size: 1rem;
    background: var(--ps-glass);
    border: 1px dashed var(--ps-border-soft);
    border-radius: var(--ps-radius);
}


/* ═════════════════════════════════════════════════════════════════════════
   17. HUB GRIDS — Series, By Scripture, By Speaker
   ═════════════════════════════════════════════════════════════════════════ */

/* — Series — */
.ps-series-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 32px;
}

@media (max-width: 968px) {
    .ps-series-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .ps-series-grid { grid-template-columns: 1fr; }
}

.ps-series-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.65));
    z-index: 2;
}

/* v1.26.1 (Roger) — cards with real artwork show it untinted, like the
   feature poster: no warm/teal wash and no dark bottom fade. The badges and
   play button carry their own backing. Art-less tiles keep their colour. */
.ps-card-image:has(.ps-art-img)::before,
.ps-listening-art:has(.ps-art-img)::before,
.ps-card-image:has(.ps-art-img) .ps-card-image-overlay,
.ps-listening-art:has(.ps-art-img) .ps-listening-art-shade,
.ps-series-card-image:has(.ps-art-img) .ps-series-card-overlay { display: none; }

/* Message count on the art: dark glass, readable on any artwork */
.ps-series-card-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    padding: 4px 12px;
    background: rgba(7, 17, 32, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    color: #fff;
    font-family: var(--ps-font-body);
    font-size: var(--ps-fs-min);
    font-weight: 600;
    line-height: 1.4;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.ps-series-card-body { padding: 20px 22px 22px; }

.ps-series-card-title {
    font-family: var(--ps-font-accent);
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--ps-text);
    margin: 0 0 8px;
    line-height: 1.3; /* Playfair's glyphs overflow a 1.15 box at some zooms */
    letter-spacing: -0.005em;
}

.ps-series-card-excerpt {
    font-family: var(--ps-font-body);
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--ps-text-dim);
    margin: 0 0 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ps-series-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--ps-font-body);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ps-brand-secondary);
    transition: gap 0.2s;
}

.ps-series-card:hover .ps-series-card-cta { gap: 10px; }

/* — By Scripture — */
.ps-scripture-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-top: 32px;
}

@media (max-width: 768px) {
    .ps-scripture-columns { grid-template-columns: 1fr; gap: 22px; }
}

.ps-scripture-column {
    background: var(--ps-card-bg);
    border: 1px solid var(--ps-border-soft);
    border-radius: var(--ps-radius);
    padding: 28px 28px 18px;
    box-shadow: var(--ps-shadow-card);
}

.ps-section .ps-scripture-column-title {
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ps-border-soft);
}

.ps-scripture-book-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
    row-gap: 2px;
}

@media (max-width: 500px) {
    .ps-scripture-book-list { grid-template-columns: 1fr; }
}

.ps-scripture-book-list li { margin: 0; }

.ps-section .ps-scripture-book-link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 4px;
    border-bottom: 1px solid transparent;
    color: var(--ps-text);
    font-family: var(--ps-font-body);
    font-size: 0.9375rem;
    transition: color 0.2s, padding-left 0.2s;
}

.ps-section .ps-scripture-book-link:hover {
    color: var(--ps-brand-secondary);
    padding-left: 6px;
}

.ps-scripture-book-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Count chips (books, index) and the speaker message count */
.ps-scripture-book-count,
.ps-index-book-count,
.ps-speaker-card-count {
    flex: 0 0 auto;
    font-family: var(--ps-font-body);
    font-size: var(--ps-fs-min);
    font-weight: 700;
    color: var(--ps-brand-secondary);
    background: var(--ps-brand-secondary-soft);
    border-radius: 999px;
}

.ps-scripture-book-count {
    padding: 2px 9px;
    min-width: 26px;
    text-align: center;
}

.ps-scripture-empty {
    font-family: var(--ps-font-body);
    font-size: 0.9375rem;
    color: var(--ps-text-muted);
    margin: 0;
    padding: 12px 0;
}

/* — By Speaker — */
.ps-speaker-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 32px;
}

@media (max-width: 1050px) {
    .ps-speaker-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .ps-speaker-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .ps-speaker-grid { grid-template-columns: 1fr; max-width: 320px; margin-left: auto; margin-right: auto; }
}

.ps-speaker-card-photo,
.ps-speaker-bio-photo {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--ps-glass);
    overflow: hidden;
}

/* The photo overlays the always-present initial tile */
.ps-speaker-card-photo img,
.ps-speaker-bio-photo img {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ps-speaker-card-photo img { transition: transform 0.4s ease; }
.ps-speaker-card:hover .ps-speaker-card-photo img { transform: scale(1.04); }

.ps-speaker-card-photo--placeholder,
.ps-speaker-bio-photo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--ps-deep-a), var(--ps-deep-b));
}

.ps-speaker-card-photo--placeholder span,
.ps-speaker-bio-photo--placeholder span {
    font-family: var(--ps-font-accent);
    font-size: 4rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.22);
}

.ps-speaker-bio-photo--placeholder span { font-size: 5rem; }

.ps-speaker-card-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 26px;
    height: 26px;
    background: var(--ps-brand-secondary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.ps-speaker-card-body {
    padding: 16px 18px 18px;
    text-align: center;
}

.ps-speaker-card-name {
    font-family: var(--ps-font-body);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ps-text);
    margin: 0 0 4px;
    line-height: 1.25;
}

.ps-speaker-card-title {
    font-family: var(--ps-font-body);
    font-size: 0.875rem;
    color: var(--ps-text-dim);
    margin: 0 0 10px;
    line-height: 1.4;
    min-height: 1.4em;
}

.ps-speaker-card-count {
    display: inline-block;
    padding: 4px 12px;
}


/* ═════════════════════════════════════════════════════════════════════════
   18. TAXONOMY PAGES — series intro, speaker bio, book hero
   ═════════════════════════════════════════════════════════════════════════ */

/* Shared stat pill ("12 messages") */
.ps-series-intro-stats,
.ps-book-hero-stats {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: var(--ps-brand-secondary-soft);
    border: 1px solid var(--ps-border-soft);
    border-radius: 999px;
    font-family: var(--ps-font-body);
    font-size: 0.875rem;
    color: var(--ps-text-dim);
}

.ps-series-intro-stats strong,
.ps-book-hero-stats strong,
.ps-speaker-bio-stats strong {
    color: var(--ps-brand-secondary);
    font-weight: 700;
    margin-right: 2px;
}

/* — Series intro — */
.ps-series-intro {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 36px;
    padding: 16px 0;
}

.ps-series-intro-stats { margin-top: 18px; }

/* — Speaker bio — */
.ps-speaker-bio {
    display: grid;
    grid-template-columns: minmax(220px, 320px) 1fr;
    gap: 40px;
    align-items: start;
    margin: 0 auto 48px;
    max-width: 1100px;
    padding: 36px 40px;
    background: var(--ps-card-bg);
    border: 1px solid var(--ps-border-soft);
    border-radius: var(--ps-radius-lg);
    box-shadow: var(--ps-shadow-card);
}

.ps-speaker-bio-photo { border-radius: var(--ps-radius-lg); }

.ps-speaker-bio-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ps-speaker-bio-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 4px 12px;
    background: var(--ps-brand-secondary-soft);
    border: 1px solid var(--ps-border-soft);
    border-radius: 999px;
    color: var(--ps-brand-secondary);
    font-family: var(--ps-font-body);
    font-size: var(--ps-fs-min);
    font-weight: 600;
}

.ps-speaker-bio-name {
    font-family: var(--ps-font-accent);
    font-size: var(--ps-fs-h1);
    font-weight: 700;
    line-height: 1.05;
    color: var(--ps-text);
    margin: 0;
}

.ps-speaker-bio-title {
    font-family: var(--ps-font-body);
    font-size: var(--ps-fs-lead);
    color: var(--ps-text-dim);
    margin: 0;
    font-weight: 500;
}

.ps-speaker-bio-stats {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 0;
    border-top: 1px solid var(--ps-border-soft);
    border-bottom: 1px solid var(--ps-border-soft);
    font-family: var(--ps-font-body);
    font-size: 0.875rem;
    color: var(--ps-text-dim);
}

.ps-speaker-bio-stats strong { margin-right: 4px; }

.ps-speaker-bio-text {
    font-family: var(--ps-font-body);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--ps-text-dim);
}

.ps-speaker-bio-text p:first-child { margin-top: 0; }
.ps-speaker-bio-text p:last-child  { margin-bottom: 0; }

.ps-speaker-bio-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ps-speaker-bio-links li { margin: 0; }

.ps-speaker-bio-profile { margin: 4px 0 0; }

.ps-section .ps-speaker-bio-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--ps-border-soft);
    border-radius: 999px;
    color: var(--ps-text);
    font-family: var(--ps-font-body);
    font-size: 0.875rem;
    font-weight: 600;
    transition: border-color 0.2s, color 0.2s;
}

.ps-section .ps-speaker-bio-links a:hover {
    border-color: var(--ps-brand-secondary);
    color: var(--ps-brand-secondary);
}

@media (max-width: 768px) {
    .ps-speaker-bio {
        grid-template-columns: 1fr;
        padding: 24px 22px;
        gap: 22px;
        text-align: center;
    }
    .ps-speaker-bio-photo { max-width: 240px; margin: 0 auto; }
    .ps-speaker-bio-content { align-items: center; }
    .ps-speaker-bio-badge,
    .ps-speaker-bio-eyebrow { align-self: center; }
    .ps-speaker-bio-stats,
    .ps-speaker-bio-links { justify-content: center; }
}

/* — Book hero — */
.ps-book-hero {
    text-align: center;
    max-width: 780px;
    margin: 0 auto 48px;
    padding: 20px 0;
}

.ps-book-hero-testament {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.ps-book-hero-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    background: var(--ps-brand-secondary);
    color: #fff;
    border-radius: 999px;
    font-family: var(--ps-font-body);
    font-size: var(--ps-fs-eyebrow);
    font-weight: 700;
    letter-spacing: var(--ps-tracking);
    text-transform: uppercase;
}

.ps-book-hero-order {
    font-family: var(--ps-font-body);
    font-size: var(--ps-fs-min);
    color: var(--ps-text-muted);
}

.ps-book-hero-name {
    font-family: var(--ps-font-accent);
    font-size: var(--ps-fs-h1);
    font-weight: 700;
    line-height: 1;
    color: var(--ps-text);
    margin: 0 0 18px;
}

.ps-book-hero-overview {
    font-family: var(--ps-font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--ps-text-dim);
    margin: 0 auto 18px;
    max-width: 640px;
}

.ps-book-hero-overview p:first-child { margin-top: 0; }
.ps-book-hero-overview p:last-child  { margin-bottom: 0; }

.ps-book-hero-stats { margin-top: 6px; }

@media (max-width: 600px) {
    .ps-book-hero-testament {
        flex-direction: column;
        gap: 8px;
        margin-bottom: 14px;
    }
}


/* ═════════════════════════════════════════════════════════════════════════
   19. PASSAGE SEARCH + SCRIPTURE INDEX
   ═════════════════════════════════════════════════════════════════════════ */

.ps-find {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 720px;
    margin: 8px auto 12px;
    padding: 6px 6px 6px 18px;
    background: var(--ps-card-bg);
    border: 1px solid var(--ps-border-soft);
    border-radius: 999px;
    box-shadow: var(--ps-shadow-card);
}

.ps-find:focus-within {
    border-color: var(--ps-brand-secondary);
    box-shadow: 0 0 0 3px var(--ps-brand-secondary-wash), var(--ps-shadow-card);
}

.ps-find-icon {
    flex: 0 0 auto;
    color: var(--ps-text-muted);
}

.ps-section .ps-find-input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    padding: 10px 0;
    font-family: var(--ps-font-body);
    font-size: 1rem;
    color: var(--ps-text);
}

.ps-section .ps-find-input:focus-visible { outline: 0; }

/* Search is the page's primary action: orange fill, ink label, lift only.
   (The theme pins submit buttons orange with !important; these match it.) */
.ps-section .ps-find-btn,
.ps-section .ps-find-btn:hover,
.ps-section .ps-find-btn:focus-visible {
    flex: 0 0 auto;
    border: 0;
    border-radius: 999px;
    padding: 11px 24px;
    background: var(--ps-brand-primary);
    color: var(--ps-ink);
    font-family: var(--ps-font-body);
    font-weight: 600;
    font-size: var(--ps-fs-btn);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.ps-section .ps-find-btn:hover,
.ps-section .ps-find-btn:focus-visible { transform: translateY(-1px); }

@media (max-width: 560px) {
    .ps-find { padding-left: 14px; }
    .ps-section .ps-find-btn { padding: 10px 16px; }
    .ps-find-input::placeholder { font-size: 0.875rem; }
}

.ps-find-results { margin: 28px 0 8px; }
.ps-find-grid { margin-bottom: 28px; }

.ps-find-none,
.ps-find-more {
    max-width: 720px;
    margin: 20px auto;
    text-align: center;
    font-family: var(--ps-font-body);
    color: var(--ps-text-dim);
}

.ps-find-none p {
    margin: 0 0 6px;
    font-size: 1.05rem;
}

.ps-section .ps-find-more a,
.ps-section .ps-index-cta-link {
    color: var(--ps-brand-secondary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ps-index-cta {
    text-align: center;
    margin: 4px 0 24px;
    font-family: var(--ps-font-body);
    font-size: 0.95rem;
}

.ps-section .ps-index-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* — The index page — */
.ps-index-toolbar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 8px 0 20px;
}

.ps-index-views {
    display: inline-flex;
    padding: 4px;
    border-radius: 999px;
    background: var(--ps-glass);
    border: 1px solid var(--ps-border-soft);
}

.ps-section .ps-index-view {
    padding: 8px 18px;
    border-radius: 999px;
    font-family: var(--ps-font-body);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ps-text-dim);
}

.ps-section .ps-index-view.is-active {
    background: var(--ps-brand-secondary);
    color: #fff;
}

.ps-section .ps-index-print {
    border: 1px solid var(--ps-border-soft);
    background: var(--ps-card-bg);
    color: var(--ps-brand-secondary);
    border-radius: 999px;
    padding: 8px 18px;
    font-family: var(--ps-font-body);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
}

.ps-index-jump {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 28px;
    font-family: var(--ps-font-body);
}

.ps-index-jump-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
}

.ps-index-jump-label { margin-right: 6px; }

.ps-section .ps-index-jump a {
    font-size: 0.875rem;
    color: var(--ps-text);
    padding: 3px 10px;
    border: 1px solid var(--ps-border-soft);
    border-radius: 999px;
    background: var(--ps-card-bg);
}

.ps-section .ps-index-jump a:hover {
    border-color: var(--ps-brand-secondary);
    color: var(--ps-brand-secondary);
}

.ps-index-books {
    display: grid;
    gap: 18px;
}

.ps-index-book {
    background: var(--ps-card-bg);
    border: 1px solid var(--ps-border-soft);
    border-radius: var(--ps-radius);
    padding: 22px 26px 16px;
    box-shadow: var(--ps-shadow-card);
    scroll-margin-top: 96px;
}

.ps-index-book-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--ps-border-soft);
}

.ps-section .ps-index-book-name {
    margin: 0;
    font-family: var(--ps-font-accent);
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--ps-text);
}

.ps-index-book-count { padding: 2px 10px; }

.ps-index-chapters { margin: 0; }

.ps-index-chapter {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 6px 14px;
    align-items: baseline;
    padding: 9px 0;
    border-bottom: 1px solid var(--ps-border-soft);
}

.ps-index-chapter:last-child { border-bottom: 0; }

.ps-index-chapter dt {
    font-family: var(--ps-font-body);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ps-text-dim);
}

.ps-index-chapter dd {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ps-section .ps-index-chip {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 999px;
    font-family: var(--ps-font-body);
    font-size: 0.875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ps-brand-secondary);
    background: var(--ps-brand-secondary-soft);
    transition: background-color 0.15s ease;
}

.ps-section .ps-index-chip:hover,
.ps-section .ps-index-chip:focus-visible {
    background: var(--ps-brand-secondary-wash);
    color: var(--ps-brand-secondary);
}

@media (max-width: 560px) {
    .ps-index-book { padding: 18px 16px 12px; }
    .ps-index-chapter { grid-template-columns: 1fr; gap: 6px; }
}

/* Full view: one row per sermon */
.ps-section .ps-index-chapter-title { margin: 16px 0 4px; }

.ps-index-rows {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ps-index-row {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr) 170px 110px;
    gap: 4px 16px;
    align-items: baseline;
    margin: 0;
    padding: 8px 0;
    border-bottom: 1px solid var(--ps-border-soft);
    font-family: var(--ps-font-body);
    font-size: 0.9375rem;
    color: var(--ps-text-dim);
}

.ps-index-ref {
    font-weight: 700;
    color: var(--ps-text);
    font-variant-numeric: tabular-nums;
}

.ps-section .ps-index-title {
    color: var(--ps-brand-secondary);
    font-weight: 600;
}

.ps-section .ps-index-title:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ps-index-date {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
    /* Reference, then title, then speaker ↔ date on one line */
    .ps-index-row { grid-template-columns: 1fr auto; }
    .ps-index-ref,
    .ps-section .ps-index-title { grid-column: 1 / -1; }
    .ps-index-speaker,
    .ps-index-date { font-size: 0.875rem; }
}

/* Print: only the index, ink on white, books flowing on. Site chrome and
   the page's hero and controls are removed (display:none, so page 1 starts
   at the top); visibility:hidden catches anything a theme adds. */
@media print {
    body:has(.ps-index-section) * { visibility: hidden !important; }
    .ps-index-section .ps-index-books,
    .ps-index-section .ps-index-books * { visibility: visible !important; }
    body:has(.ps-index-section) > header,
    body:has(.ps-index-section) > footer,
    body:has(.ps-index-section) header[class*="site-header"],
    body:has(.ps-index-section) footer[class*="site-footer"],
    body:has(.ps-index-section) #wpadminbar,
    .ps-index-section .ps-archive-hero,
    .ps-index-section .ps-section-bg,
    .ps-index-section .ps-section-inner > :not(.ps-index-books) { display: none !important; }
    html:has(.ps-index-section) { margin-top: 0 !important; } /* admin-bar offset */
    body:has(.ps-index-section) main,
    .ps-section.ps-index-section,
    .ps-section.ps-index-section > .ps-section-inner {
        padding: 0 !important;
        margin: 0 !important;
        max-width: none !important;
        background: #fff !important;
    }
    .ps-index-book {
        box-shadow: none !important;
        border: 0 !important;
        padding: 0 0 12px !important;
    }
    /* Books flow on; a heading never ends a page alone */
    .ps-index-book-head,
    .ps-section .ps-index-chapter-title { break-after: avoid; }
    .ps-index-book + .ps-index-book { margin-top: 18pt !important; }
    .ps-index-row {
        color: #000 !important;
        break-inside: avoid;
        font-size: 9.5pt;
        padding: 3pt 0 !important;
        grid-template-columns: 1.3in minmax(0, 1fr) 1.3in 1.05in !important;
    }
    .ps-index-date { white-space: nowrap; }
    .ps-section .ps-index-chapter-title { margin: 8pt 0 2pt !important; }
    .ps-section .ps-index-book-name { font-size: 15pt !important; }
    .ps-section .ps-index-title,
    .ps-section .ps-index-chip,
    .ps-index-ref,
    .ps-section .ps-index-book-name,
    .ps-section .ps-index-chapter-title,
    .ps-index-book-count { color: #000 !important; background: none !important; }
}