/* Let's Pray — Catholic daylight: cream, sky, gold, Marian blue */
:root {
  --bg: #f7f3ea;
  --bg-mid: #eef4fa;
  --bg-elevated: #ffffff;
  --bg-card: #fffdf8;
  --border: rgba(184, 148, 42, 0.28);
  --border-soft: rgba(42, 69, 112, 0.12);
  --text: #1e2a3a;
  --text-muted: #5a6678;
  --ivory: #2a4570;
  --heading: #1a2f4d;
  --accent: #c9a227;
  --accent-deep: #9a7a1a;
  --accent-soft: rgba(201, 162, 39, 0.18);
  --accent-glow: rgba(201, 162, 39, 0.28);
  --marian: #4a6fa5;
  --marian-deep: #2a4570;
  --marian-soft: rgba(74, 111, 165, 0.12);
  --rose: #c47878;
  --rose-muted: rgba(196, 120, 120, 0.16);
  --danger: #b85c5c;
  --live: #c45c5c;
  --live-glow: rgba(196, 92, 92, 0.28);
  --ok: #4a8a68;
  --radius: 16px;
  --font-display: "Cormorant Garamond", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --shadow: 0 12px 36px rgba(42, 69, 112, 0.1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(135, 180, 230, 0.45), transparent 55%),
    radial-gradient(ellipse 50% 40% at 0% 90%, rgba(201, 162, 39, 0.14), transparent 50%),
    radial-gradient(ellipse 45% 35% at 100% 85%, rgba(201, 123, 140, 0.12), transparent 50%),
    linear-gradient(180deg, #fbf8f1 0%, #eef4fb 48%, #f5efe4 100%);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent-deep);
  text-decoration: none;
}
a:hover {
  color: var(--marian-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

img, svg {
  max-width: 100%;
  display: block;
}

.wrap {
  width: min(920px, calc(100% - 2.5rem));
  margin: 0 auto;
}

.sacred-rail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  padding: 0.5rem 0 0;
  opacity: 1;
}
.sacred-rail img,
.sacred-rail .motif {
  width: 36px;
  height: auto;
  opacity: 0.95;
  filter: drop-shadow(0 4px 10px rgba(42, 69, 112, 0.15));
}
.sacred-rail .motif-lg {
  width: 48px;
}

/* Nav */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(14px);
  background: rgba(255, 252, 246, 0.88);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 20px rgba(42, 69, 112, 0.05);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--heading);
  text-decoration: none;
  font-family: var(--font-script, "Great Vibes", cursive);
  font-weight: 400;
  font-size: 1.55rem;
  letter-spacing: 0.02em;
  line-height: 1.1;
}
.brand:hover {
  text-decoration: none;
  color: var(--marian-deep);
}

.brand-mark {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  background: url("/img/crucifix.svg") center / contain no-repeat;
  filter: drop-shadow(0 2px 6px var(--accent-glow));
}

/* Home/nav brand: sunset silhouette prayer photo + light script title */
.brand.brand-pray {
  position: relative;
  gap: 0;
  padding: 0.28rem 0.95rem 0.38rem;
  min-height: 2.55rem;
  border-radius: 12px;
  overflow: hidden;
  color: #fffdf8;
  background:
    linear-gradient(90deg, rgba(8, 6, 10, 0.55) 0%, rgba(8, 6, 10, 0.28) 45%, rgba(8, 6, 10, 0.45) 100%),
    url("/img/nav-pray-sunset.jpg?v=sunset1") center 42% / cover no-repeat;
  box-shadow:
    0 1px 0 rgba(255, 248, 240, 0.18) inset,
    0 6px 16px rgba(42, 69, 112, 0.18);
  border: 1px solid rgba(255, 248, 230, 0.28);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.85),
    0 0 10px rgba(0, 0, 0, 0.45);
}
.brand.brand-pray:hover {
  color: #fffdf8;
  filter: brightness(1.06);
  text-decoration: none;
}
.brand.brand-pray .brand-pray-text {
  position: relative;
  z-index: 1;
  white-space: nowrap;
  font-family: var(--font-script, "Great Vibes", cursive);
  font-size: 1.55rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.nav-end {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}

.nav-status {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.nav-status .badge {
  font-family: var(--font-body);
  font-size: 0.68rem;
  padding: 0.32rem 0.72rem;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(42, 69, 112, 0.08);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nav-links a {
  color: var(--text-muted);
  text-decoration: none;
  padding: 0.28rem 0.72rem;
  border-radius: 999px;
  font-family: var(--font-script, "Great Vibes", cursive);
  font-size: 1.22rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.15;
  transition: color 0.15s, background 0.15s;
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--marian-deep);
  background: var(--marian-soft);
  text-decoration: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.68rem 1.3rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s, background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.btn:active {
  transform: scale(0.98);
}
.btn-primary {
  background: linear-gradient(135deg, #e0c35a, var(--accent));
  color: #2a2208;
  box-shadow: 0 8px 22px var(--accent-glow);
}
.btn-primary:hover {
  filter: brightness(1.04);
}
.btn-ghost {
  background: rgba(255, 255, 255, 0.7);
  border-color: var(--border);
  color: var(--heading);
}
.btn-ghost:hover {
  background: var(--marian-soft);
  border-color: rgba(74, 111, 165, 0.35);
}
.btn-danger {
  background: #fff;
  border-color: rgba(184, 92, 92, 0.4);
  color: var(--danger);
}
.btn-danger:hover {
  background: var(--rose-muted);
}
.btn-live {
  background: linear-gradient(135deg, #d88888, var(--live));
  color: #fff;
  box-shadow: 0 8px 22px var(--live-glow);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.badge-live {
  background: rgba(196, 92, 92, 0.14);
  color: #a04040;
  border: 1px solid rgba(196, 92, 92, 0.35);
}
.badge-offline {
  background: var(--marian-soft);
  color: var(--marian-deep);
  border: 1px solid rgba(74, 111, 165, 0.25);
}
.badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.badge-live .badge-dot {
  animation: pulse 1.4s ease-in-out infinite;
  box-shadow: 0 0 8px currentColor;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.85); }
}

/* Hero */
.hero {
  padding: 3.25rem 0 2.5rem;
  text-align: center;
  position: relative;
  overflow: visible;
}
.hero-art {
  width: min(160px, 40vw);
  margin: 0 auto 1.25rem;
  opacity: 1;
  filter: drop-shadow(0 10px 24px rgba(74, 111, 165, 0.2));
}

.hero-kicker {
  color: var(--marian);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
  font-weight: 650;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.6rem, 6.5vw, 3.85rem);
  letter-spacing: -0.01em;
  line-height: 1.08;
  margin: 0 0 0.9rem;
  color: var(--heading);
}
.hero .tagline {
  color: var(--text-muted);
  max-width: 30rem;
  margin: 0 auto 1.75rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
  padding: 0.5rem 0 3.5rem;
}
.card {
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.95), var(--bg-card));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem 1.4rem 1.5rem;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.65;
}
.card-icon {
  width: 42px;
  height: 42px;
  margin-bottom: 0.85rem;
  opacity: 1;
}
.card h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  margin: 0 0 0.45rem;
  color: var(--heading);
  font-weight: 600;
}
.card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* Player */
.player-shell {
  background:
    linear-gradient(160deg, rgba(232, 242, 252, 0.9), #fffdf8);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  padding: 1.85rem;
  box-shadow: var(--shadow);
  position: relative;
}
.player-shell .corner-cross {
  position: absolute;
  top: 1rem;
  right: 1.1rem;
  width: 22px;
  opacity: 0.7;
}
.player-shell h2 {
  font-family: var(--font-display);
  margin: 0 0 0.35rem;
  font-size: 1.75rem;
  color: var(--heading);
  font-weight: 600;
}
.player-meta {
  color: var(--text-muted);
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
}
.player-shell audio {
  width: 100%;
  margin-top: 0.5rem;
  border-radius: 8px;
}
.live-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--text-muted);
}
.live-empty .empty-art {
  width: 72px;
  margin: 0 auto 1.25rem;
  opacity: 0.9;
}
.live-empty h2 {
  font-family: var(--font-display);
  color: var(--heading);
  margin-bottom: 0.5rem;
  font-size: 1.75rem;
}

.page-head {
  padding: 1.25rem 0 1.5rem;
  text-align: center;
}
.page-head .page-motif {
  width: 56px;
  margin: 0 auto 1rem;
  opacity: 0.95;
}
.page-head h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 2.7rem);
  margin: 0 0 0.4rem;
  color: var(--heading);
  font-weight: 600;
}
.page-head p {
  margin: 0 auto;
  color: var(--text-muted);
  max-width: 34rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
}

/* Full-bleed page banners (Episodes / Schedule / About / Live) */
.page-banner {
  width: 100%;
  max-width: none;
  height: clamp(160px, 24vw, 280px);
  overflow: hidden;
  line-height: 0;
  background: #1a1510;
  margin: 0;
  padding: 0;
}
.page-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.page-banner--episodes img {
  object-position: center 40%;
}
.page-banner--schedule img {
  object-position: center 38%;
}
.page-banner--about img {
  object-position: center 55%;
}
/* Live only: max zoom-out — height approaches baked 3:2 photo aspect
   so object-fit:cover can show nearly the full image (exact fit at 66.67vw)
   while still filling the banner box edge-to-edge (no letterbox). */
.page-banner--live {
  /* Holy Bible photo is 4:3 (2048×1536): 75vw shows the whole photo full-bleed; capped at 960px on wide screens,
     where cover trims top/bottom only (uniform scale, never stretched). */
  height: min(75vw, 960px);
  min-height: 260px;
}
.page-banner--live img {
  /* keep "Holy Bible" lettering (~44% down), crucifix (~47–72%) and beads in view when the cap crops */
  object-position: center 42%;
}



.episode-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-bottom: 4rem;
}
.episode {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.3rem 1.4rem;
  box-shadow: var(--shadow);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.episode:hover {
  border-color: rgba(201, 162, 39, 0.5);
  box-shadow: 0 10px 28px rgba(201, 162, 39, 0.12);
}
.episode-top {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}
.episode h2 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  margin: 0;
  color: var(--heading);
  font-weight: 600;
}
.episode-date {
  color: var(--marian);
  font-size: 0.85rem;
  white-space: nowrap;
  font-weight: 650;
}
.episode-desc {
  color: var(--text-muted);
  margin: 0 0 1rem;
  font-size: 0.95rem;
}
.episode audio {
  width: 100%;
}

.form-grid {
  display: grid;
  gap: 1rem;
}
label {
  display: block;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}
input[type="text"],
input[type="password"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="email"],
input[type="tel"],
input[type="color"],
textarea,
select {
  width: 100%;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  color: var(--text);
  padding: 0.72rem 0.95rem;
  font-family: var(--font-body);
  font-size: 1rem;
}
textarea {
  min-height: 100px;
  resize: vertical;
}
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: rgba(201, 162, 39, 0.65);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.35rem;
}
.admin-section {
  margin-bottom: 1.5rem;
}
.admin-section h2 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  margin: 0 0 1rem;
  color: var(--heading);
  font-weight: 600;
}
.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.25rem;
}
.status-line {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: 0.75rem;
}
.status-line.ok { color: var(--ok); }
.status-line.err { color: var(--danger); }

.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(135, 180, 230, 0.5), transparent),
    radial-gradient(ellipse 40% 30% at 100% 100%, rgba(201, 162, 39, 0.18), transparent),
    #f7f3ea;
}
.login-card {
  width: min(400px, 100%);
  background: #fffdf8;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  padding: 2.1rem 1.85rem;
  box-shadow: var(--shadow);
  text-align: center;
}
.login-card .login-art {
  width: 64px;
  margin: 0 auto 1rem;
  opacity: 1;
}
.login-card h1 {
  font-family: var(--font-display);
  font-size: 1.85rem;
  margin: 0 0 0.35rem;
  color: var(--heading);
  font-weight: 600;
}
.login-card .sub {
  color: var(--text-muted);
  margin: 0 0 1.5rem;
  font-size: 0.95rem;
  text-align: left;
}
.login-card .form-grid {
  text-align: left;
}
.login-card .btn {
  width: 100%;
  margin-top: 0.5rem;
}
.login-note {
  margin-top: 1.25rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.footer {
  border-top: 1px solid var(--border-soft);
  padding: 1.5rem 0 2.5rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
}
.footer-motifs {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  margin-bottom: 0.75rem;
}
.footer-motifs img {
  width: 22px;
  opacity: 0.75;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Audience counters */
.audience-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: center;
  margin: 1rem 0 0.25rem;
}
.audience-stats.audience-left {
  justify-content: flex-start;
}
.audience-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 7.5rem;
  padding: 0.65rem 1rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.audience-label {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 650;
}
.audience-value {
  font-family: var(--font-display);
  font-size: 1.55rem;
  color: var(--accent-deep);
  font-weight: 600;
  line-height: 1.2;
  margin-top: 0.15rem;
}

/* Schedule agenda */
.schedule-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding-bottom: 2rem;
}
.schedule-item {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 1rem;
  align-items: start;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem;
  box-shadow: var(--shadow);
}
.schedule-when {
  text-align: center;
  padding: 0.5rem 0.35rem;
  border-radius: 12px;
  background: rgba(201, 162, 39, 0.12);
  border: 1px solid rgba(201, 162, 39, 0.3);
}
.schedule-day {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--heading);
  font-weight: 600;
  line-height: 1.1;
}
.schedule-time {
  font-size: 0.75rem;
  color: var(--accent-deep);
  margin-top: 0.35rem;
  font-weight: 650;
}
.schedule-item h3 {
  font-family: var(--font-display);
  margin: 0 0 0.3rem;
  font-size: 1.3rem;
  color: var(--heading);
  font-weight: 600;
}
.schedule-item p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}
.schedule-tz {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: -0.5rem 0 1.25rem;
}
.home-schedule-teaser {
  margin: 0 auto 3rem;
  max-width: 640px;
}
.home-schedule-teaser .card {
  text-align: left;
}
.home-schedule-teaser h2 {
  font-family: var(--font-display);
  margin: 0 0 0.75rem;
  font-size: 1.5rem;
  color: var(--heading);
}
.teaser-slot {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 0.95rem;
}
.teaser-slot:last-of-type {
  border-bottom: none;
}
.teaser-slot strong {
  color: var(--heading);
  font-family: var(--font-display);
  font-size: 1.05rem;
}
.teaser-meta {
  color: var(--marian);
  font-size: 0.85rem;
  font-weight: 650;
}

.subscribe-card {
  margin-bottom: 2.5rem;
}
.subscribe-card h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin: 0 0 0.4rem;
  color: var(--heading);
  font-weight: 600;
}
.consent-row {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  font-size: 0.92rem;
  color: var(--text-muted);
}
.consent-row input {
  width: auto;
  margin-top: 0.25rem;
  accent-color: var(--accent);
}
.consent-row label {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--text-muted);
  margin: 0;
}
.sub-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.sub-table th,
.sub-table td {
  text-align: left;
  padding: 0.55rem 0.4rem;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
}
.sub-table th {
  color: var(--text-muted);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.notify-log {
  max-height: 220px;
  overflow: auto;
  font-size: 0.8rem;
  color: var(--text-muted);
  background: #f3f7fb;
  border-radius: 10px;
  padding: 0.75rem;
  border: 1px solid var(--border-soft);
}
.notify-log div {
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--border-soft);
}

@media (max-width: 600px) {
  .wrap { width: calc(100% - 1.5rem); }
  .hero { padding-top: 2.25rem; }
  .episode-top { flex-direction: column; gap: 0.25rem; }
  .sacred-rail { gap: 1.1rem; }
  .schedule-item {
    grid-template-columns: 1fr;
  }
  .schedule-when {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    padding: 0.55rem 0.75rem;
  }
  .schedule-time { margin-top: 0; }
}

/* Let's Pray — viewport-fit hero + body-wrapping white rosary */
:root {
  --font-hero: "EB Garamond", "Cormorant Garamond", "Palatino Linotype", Palatino, Georgia, serif;
  --font-script: "Great Vibes", "Allura", cursive;
  --header-h: 3.65rem;
}

/* Hero fills with Divine Mercy via cover (no stretch). Body only holds fallback tone. */
body.has-jesus-wallpaper {
  background-color: #2e282c;
  background-image: none;
}

/* Cover wallpaper layer: fills hero edge-to-edge, preserves aspect, crops painted margins */
.hero-wallpaper {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #2e282c;
}
.hero-wallpaper picture,
.hero-wallpaper img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}
.hero-wallpaper img {
  object-fit: cover;           /* fill hero; natural aspect, no stretch */
  object-position: center 28%; /* more crown room above halo for calligraphy */
  transform: none;
  user-select: none;
}



@media (max-aspect-ratio: 4 / 5) {
  .hero-wallpaper img {
    object-position: center 12%;
  }
}

/* Viewport-locked hero: wallpaper + title + Jesus + rosary + key UI in one screen */
body.has-jesus-wallpaper .hero.hero-viewport {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 0;
  height: calc(100dvh - var(--header-h));
  max-height: calc(100dvh - var(--header-h));
  min-height: 0;
  overflow: hidden;
  text-align: center;
  box-sizing: border-box;
}

.hero-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: stretch;
  z-index: 2;
}
.hero-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(30, 24, 28, 0.42) 0%, rgba(30, 24, 28, 0.08) 22%, transparent 38%),
    linear-gradient(180deg, rgba(30, 24, 28, 0.28) 0%, transparent 16%, transparent 78%, rgba(30, 24, 28, 0.22) 100%);
}

/* Body-shaped rosary: crowns head, wraps shoulders + full figure to feet */
.hero-stage .rosary-white-loop {
  position: absolute;
  /* Body loop: crowns head, wraps shoulders + figure; sideways cross drifts right */
  top: 1%;
  left: 50%;
  width: min(88vw, 62rem);
  height: 102%;
  max-width: none;
  transform: translateX(-44%);
  object-fit: contain;
  object-position: center top;
  pointer-events: none;
  z-index: 6;
  overflow: visible;
  filter:
    drop-shadow(0 0 5px rgba(255, 255, 255, 0.65))
    drop-shadow(0 0 12px rgba(220, 230, 248, 0.42))
    drop-shadow(0 0 18px rgba(180, 198, 230, 0.28))
    drop-shadow(0 5px 14px rgba(26, 47, 77, 0.16));
}

/* Title: centered ABOVE head — clear gap, no overlap with hair/halo */
.hero-title-frame {
  position: relative;
  z-index: 8;
  display: grid;
  place-items: center;
  width: 100%;
  margin: 0;
  padding: 0.15rem 0 0;
  pointer-events: none;
  grid-row: 1;
}

.hero-title-frame .rosary-loop {
  display: none;
}

.hero-title-frame .hero-pray-title,
.hero-title-frame h1.hero-pray-title {
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  line-height: 0;
  text-align: center;
  color: transparent;
}

body.has-jesus-wallpaper .hero-title-script {
  display: block;
  width: min(58vw, 28rem);
  max-width: 100%;
  height: auto;
  /* Crown band only — clear gap above halo/hairline, never on the face */
  max-height: clamp(2.6rem, 6vh, 4.0rem);
  object-fit: contain;
  object-position: center center;
  margin: 0.55rem auto 0.15rem;
  filter:
    drop-shadow(0 2px 3px rgba(28, 18, 12, 0.7))
    drop-shadow(0 0 12px rgba(245, 239, 230, 0.35))
    drop-shadow(0 0 22px rgba(232, 213, 163, 0.24));
}

/* Side mission panels — LEFT of figure so chest/rays stay clear; right reserved for crucifix */
.hero-side-panels {
  grid-row: 2;
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(12rem, 18rem) 1fr minmax(13rem, 20rem);
  gap: clamp(0.35rem, 1.2vw, 1rem);
  align-items: center;
  min-height: 0;
  padding: 0.25rem clamp(0.75rem, 2.5vw, 2rem);
  pointer-events: none;
}

.hero-side {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  align-items: stretch;
  max-height: 100%;
}

.hero-side-left {
  justify-self: start;
  align-self: center;
}

.hero-side-right {
  justify-self: end;
  align-self: end;
  align-items: flex-end;
  text-align: right;
  gap: 0.4rem;
  padding-bottom: 0.15rem;
}
body.has-jesus-wallpaper .hero-side-right .audience-stats {
  margin: 0;
  gap: 0.35rem;
  justify-content: flex-end;
}
body.has-jesus-wallpaper .hero-side-right .audience-pill {
  min-width: 5.25rem;
  padding: 0.3rem 0.55rem;
  border-radius: 10px;
  background: rgba(255, 252, 246, 0.88);
}
body.has-jesus-wallpaper .hero-side-right .audience-label { font-size: 0.55rem; }
body.has-jesus-wallpaper .hero-side-right .audience-value { font-size: 1.05rem; margin-top: 0; }
body.has-jesus-wallpaper .hero-side-right .hero-actions {
  margin: 0;
  gap: 0.4rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}
body.has-jesus-wallpaper .hero-side-right .hero-actions .btn {
  padding: 0.4rem 0.85rem;
  font-size: 0.84rem;
}

.hero-figure-clear {
  min-width: 0;
  pointer-events: none;
}

body.has-jesus-wallpaper .hero-kicker {
  display: none;
}

body.has-jesus-wallpaper .hero-side [data-status-badge] {
  margin: 0;
  align-self: flex-start;
}

body.has-jesus-wallpaper .hero .tagline,
body.has-jesus-wallpaper .hero .secondary-tagline {
  color: #1a2f4d;
  background: rgba(255, 252, 246, 0.90);
  border: 1px solid rgba(201, 162, 39, 0.28);
  border-radius: 12px;
  padding: 0.55rem 0.75rem;
  max-width: none;
  margin: 0;
  text-align: left;
  font-size: clamp(0.82rem, 1.35vw, 0.95rem);
  line-height: 1.35;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 20px rgba(42, 69, 112, 0.10);
}

body.has-jesus-wallpaper .hero .secondary-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(0.8rem, 1.25vw, 0.92rem);
  color: var(--text-muted);
}

/* Foot band: smaller Matthew quote + stats/actions below/beside feet */
.hero-foot {
  grid-row: 3;
  position: relative;
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.28rem;
  padding: 0.1rem 0.5rem 0.55rem;
  pointer-events: none;
}

.hero-foot > * {
  pointer-events: auto;
}

.scripture {
  margin: 0;
  max-width: 34rem;
  padding: 1.1rem 1.35rem;
  background: rgba(255, 252, 246, 0.88);
  border: 1px solid rgba(201, 162, 39, 0.4);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(42, 69, 112, 0.12);
  backdrop-filter: blur(8px);
}
.scripture p {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  line-height: 1.4;
  color: var(--heading);
}
.scripture cite {
  display: block;
  margin-top: 0.55rem;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--marian);
}

body.has-jesus-wallpaper .scripture-foot {
  max-width: min(20rem, 58%);
  padding: 0.22rem 0.6rem 0.26rem;
  margin: 0 auto;
  border-radius: 8px;
  background: rgba(255, 252, 246, 0.82);
  box-shadow: 0 4px 12px rgba(42, 69, 112, 0.10);
}
body.has-jesus-wallpaper .scripture-foot p {
  font-size: clamp(0.62rem, 0.95vw, 0.74rem);
  line-height: 1.22;
}
body.has-jesus-wallpaper .scripture-foot cite {
  margin-top: 0.12rem;
  font-size: 0.54rem;
  letter-spacing: 0.05em;
}

body.has-jesus-wallpaper .hero-foot .audience-stats {
  margin: 0.1rem 0 0;
  gap: 0.4rem;
}
body.has-jesus-wallpaper .hero-foot .audience-pill {
  min-width: 5.5rem;
  padding: 0.35rem 0.65rem;
  border-radius: 10px;
}
body.has-jesus-wallpaper .hero-foot .audience-label {
  font-size: 0.58rem;
}
body.has-jesus-wallpaper .hero-foot .audience-value {
  font-size: 1.15rem;
  margin-top: 0;
}


body.has-jesus-wallpaper .hero-foot .hero-actions {
  margin: 0.1rem 0 0;
  gap: 0.45rem;
}
body.has-jesus-wallpaper .hero-foot .hero-actions .btn {
  padding: 0.45rem 0.95rem;
  font-size: 0.88rem;
}

/* Compact laptop / box desktop (~1280×800) */
@media (max-height: 820px) {
  .hero-wallpaper img {
    object-position: center 28%;
    transform: none;
  }
  body.has-jesus-wallpaper .hero-title-script {
    max-height: clamp(2.5rem, 5.8vh, 3.8rem);
    margin-top: 0.15rem;
  }
  .hero-stage .rosary-white-loop {
    top: 0;
    height: 104%;
    width: min(90vw, 58rem);
  }
  .hero-side-panels {
    grid-template-columns: minmax(11rem, 16rem) 1fr minmax(12rem, 18rem);
  }
}

@media (max-height: 700px) {
  body.has-jesus-wallpaper .hero-title-script {
    max-height: clamp(2.6rem, 6.5vh, 3.8rem);
  }
  body.has-jesus-wallpaper .scripture-foot {
    max-width: min(22rem, 72%);
  }
}

@media (max-width: 900px) {
  .hero-side-panels {
    grid-template-columns: minmax(9.5rem, 13.5rem) 1fr minmax(11rem, 16rem);
  }
  .hero-stage .rosary-white-loop {
    width: min(78vw, 42rem);
  }
}

@media (max-width: 640px) {
  body.has-jesus-wallpaper .hero.hero-viewport {
    height: auto;
    max-height: none;
    min-height: calc(100dvh - var(--header-h));
    overflow: visible;
    padding-bottom: 1rem;
  }
  .hero-stage {
    grid-template-rows: auto auto auto;
  }
  .hero-side-panels {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .hero-figure-clear {
    display: none;
  }
  .hero-side-left,
  .hero-side-right {
    max-width: 22rem;
    margin: 0 auto;
    align-items: center;
    text-align: center;
    justify-self: center;
  }
  body.has-jesus-wallpaper .hero-side-right .audience-stats,
  body.has-jesus-wallpaper .hero-side-right .hero-actions {
    justify-content: center;
  }
  body.has-jesus-wallpaper .hero .tagline,
  body.has-jesus-wallpaper .hero .secondary-tagline {
    text-align: center;
  }
  .hero-stage .rosary-white-loop {
    width: min(92vw, 36rem);
    top: 6%;
    height: 88%;
    transform: translateX(-50%);
    opacity: 0.95;
  }
  body.has-jesus-wallpaper .hero-title-script {
    width: min(88vw, 28rem);
    max-height: clamp(3.2rem, 10vh, 5rem);
  }
}


/* Wallpapers: rosary-Bible (live default); Mary / red-rosary via ?wallpaper= */
body.wallpaper-red-rosary {
  background-color: #1a0508;
}
body.wallpaper-red-rosary .hero-wallpaper {
  background: #1a0508;
}
body.wallpaper-red-rosary .hero-wallpaper img {
  object-position: center 42%;
}
/* Title above focal crucifix: strong contrast on dense red/silver beads */
body.wallpaper-red-rosary .hero-title-script {
  margin-top: 0.45rem;
  max-height: clamp(2.8rem, 6.8vh, 4.4rem);
  filter:
    drop-shadow(0 1px 0 rgba(255, 248, 240, 0.35))
    drop-shadow(0 2px 4px rgba(10, 2, 4, 0.95))
    drop-shadow(0 0 12px rgba(10, 2, 4, 0.85))
    drop-shadow(0 0 22px rgba(10, 2, 4, 0.55));
}
/* Photo is already a dense rosary close-up — hide SVG overlay to avoid double-up */
body.wallpaper-red-rosary .hero-stage .rosary-white-loop {
  display: none;
}
body.wallpaper-red-rosary .hero-stage::before {
  background:
    linear-gradient(90deg, rgba(12, 4, 6, 0.42) 0%, rgba(12, 4, 6, 0.12) 20%, transparent 36%),
    linear-gradient(270deg, rgba(12, 4, 6, 0.38) 0%, rgba(12, 4, 6, 0.10) 18%, transparent 34%),
    linear-gradient(180deg, rgba(12, 4, 6, 0.45) 0%, rgba(12, 4, 6, 0.16) 14%, transparent 28%, transparent 78%, rgba(12, 4, 6, 0.22) 100%);
}

body.wallpaper-mary {
  background-color: #050508;
}
body.wallpaper-mary .hero-wallpaper {
  background: #050508;
}
/* Tall Mary: fill hero with cover-like presence but keep crown→robes/hands.
   Soft black side falloff (no stretch). Rosary overlay hidden. */
body.wallpaper-mary .hero-wallpaper img {
  /* Fill hero edge-to-edge (no stretch); tall asset + position keeps crown→robes.
     Soft black side falloff comes from the photo itself. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  transform: none;
  object-fit: cover;
  object-position: center 40%;
}
body.wallpaper-mary .hero-title-frame {
  padding-top: 0.1rem;
}
body.wallpaper-mary .hero-title-script {
  /* Much bigger than default; kept in black band ABOVE crown */
  width: min(96vw, 58rem);
  max-height: clamp(5.8rem, 15vh, 10.5rem);
  margin-top: 0.05rem;
  margin-bottom: 0;
  filter:
    drop-shadow(0 2px 4px rgba(8, 6, 10, 0.95))
    drop-shadow(0 0 16px rgba(245, 239, 230, 0.36))
    drop-shadow(0 0 28px rgba(232, 213, 163, 0.24));
}
/* No rosary beads on Mary wallpaper */
body.wallpaper-mary .hero-stage .rosary-white-loop {
  display: none !important;
}
body.wallpaper-mary .hero-stage::before {
  background:
    linear-gradient(90deg, rgba(5, 5, 8, 0.78) 0%, rgba(5, 5, 8, 0.35) 12%, transparent 30%),
    linear-gradient(270deg, rgba(5, 5, 8, 0.78) 0%, rgba(5, 5, 8, 0.35) 12%, transparent 30%),
    linear-gradient(180deg, rgba(5, 5, 8, 0.62) 0%, rgba(5, 5, 8, 0.22) 14%, transparent 28%, transparent 84%, rgba(5, 5, 8, 0.32) 100%);
}

body.wallpaper-rosary-bible {
  background-color: #f2ece3;
}
body.wallpaper-rosary-bible .hero-wallpaper {
  background: #f2ece3;
}
/* Deep Marian-blue calligraphy PNG on cream Bible pages (also readable on wood beads) */
body.wallpaper-rosary-bible .hero-title-script {
  /* Push the Marian-blue calligraphy forward as the hero focal point. */
  width: min(94vw, 50rem);
  margin-top: 0.18rem;
  max-height: clamp(7rem, 18vh, 10rem);
  filter:
    brightness(1.6)
    saturate(1.85)
    contrast(1.12)
    drop-shadow(0 0 1px rgba(255, 252, 245, 1))
    drop-shadow(0 1px 1px rgba(255, 250, 240, 0.72))
    drop-shadow(0 2px 5px rgba(12, 20, 40, 0.56))
    drop-shadow(0 3px 16px rgba(12, 20, 40, 0.34));
}
/* Photo already includes wooden rosary — hide SVG overlay to avoid double-up */
body.wallpaper-rosary-bible .hero-stage .rosary-white-loop {
  display: none !important;
}
/* Light vignette only — keep Bible pages readable, aid banner contrast */
body.wallpaper-rosary-bible .hero-stage::before {
  background:
    linear-gradient(90deg, rgba(42, 28, 18, 0.18) 0%, rgba(42, 28, 18, 0.05) 18%, transparent 34%),
    linear-gradient(270deg, rgba(42, 28, 18, 0.14) 0%, rgba(42, 28, 18, 0.04) 16%, transparent 32%),
    linear-gradient(180deg, rgba(42, 28, 18, 0.22) 0%, rgba(42, 28, 18, 0.08) 12%, transparent 26%, transparent 82%, rgba(42, 28, 18, 0.14) 100%);
}

/* Cover fill; bias toward wooden crucifix + beads (lower-left / center of photo) */


body.wallpaper-rosary-bible .hero-wallpaper img {
  object-fit: cover;
  object-position: center center;
  width: 100%;
  height: 100%;
}



@media (max-height: 820px) {
  body.wallpaper-red-rosary .hero-wallpaper img {
    object-position: center 40%;
  }
  body.wallpaper-red-rosary .hero-title-script {
    margin-top: 0.28rem;
  }
  body.wallpaper-mary .hero-wallpaper img {
    object-position: center 38%;
  }
  body.wallpaper-mary .hero-title-script {
    margin-top: 0.02rem;
    max-height: clamp(5.2rem, 13.5vh, 9rem);
  }
  body.wallpaper-rosary-bible .hero-wallpaper img {
  object-fit: cover;
  object-position: center center;
  width: 100%;
  height: 100%;
}
  body.wallpaper-rosary-bible .hero-title-script {
    margin-top: 0.12rem;
    max-height: clamp(7rem, 18vh, 10rem);
  }
}

@media (max-aspect-ratio: 4 / 5) {
  body.wallpaper-red-rosary .hero-wallpaper img {
    object-position: center 38%;
  }
  body.wallpaper-mary .hero-wallpaper img {
    object-fit: cover;
    object-position: center 30%;
  }
  body.wallpaper-rosary-bible .hero-wallpaper img {
  object-fit: cover;
  object-position: center center;
  width: 100%;
  height: 100%;
}
}

/* Psalm 23 turquoise rosary (live default). Rosary-bible kept above; switch via body class / ?wallpaper=rosary-bible */
body.wallpaper-psalm23 {
  background-color: #f1eee6;
}
body.wallpaper-psalm23 .hero-wallpaper {
  background: #f1eee6;
}
body.wallpaper-psalm23 .hero-title-script {
  width: min(94vw, 50rem);
  margin-top: 0.18rem;
  max-height: clamp(7rem, 18vh, 10rem);
  filter:
    brightness(1.6)
    saturate(1.85)
    contrast(1.12)
    drop-shadow(0 0 1px rgba(255, 252, 245, 1))
    drop-shadow(0 0 5px rgba(255, 252, 245, 0.9)) /* soft cream halo lifts title off black print + crucifix */
    drop-shadow(0 1px 1px rgba(255, 250, 240, 0.72))
    drop-shadow(0 2px 5px rgba(12, 20, 40, 0.56))
    drop-shadow(0 3px 16px rgba(12, 20, 40, 0.34));
}
body.wallpaper-psalm23 .hero-stage .rosary-white-loop {
  display: none !important;
}
body.wallpaper-psalm23 .hero-stage::before {
  background:
    linear-gradient(90deg, rgba(30, 40, 48, 0.16) 0%, rgba(30, 40, 48, 0.04) 18%, transparent 34%),
    linear-gradient(270deg, rgba(30, 40, 48, 0.12) 0%, rgba(30, 40, 48, 0.03) 16%, transparent 32%),
    linear-gradient(180deg, rgba(30, 40, 48, 0.18) 0%, rgba(30, 40, 48, 0.06) 12%, transparent 26%, transparent 82%, rgba(30, 40, 48, 0.12) 100%);
}
/* Cover, natural aspect; anchor near top so crucifix + "The Divine Shepherd" + "23" survive short wide windows */
body.wallpaper-psalm23 .hero-wallpaper img {
  object-fit: cover;
  object-position: center 8%;
  width: 100%;
  height: 100%;
}
@media (max-height: 820px) {
  body.wallpaper-psalm23 .hero-wallpaper img {
    object-position: center 8%;
  }
  body.wallpaper-psalm23 .hero-title-script {
    margin-top: 0.12rem;
    max-height: clamp(7rem, 18vh, 10rem);
  }
}
@media (max-aspect-ratio: 4 / 5) {
  body.wallpaper-psalm23 .hero-wallpaper img {
    object-position: center top;
  }
}

/* —— Home one-screen: hero only (no below-fold scroll) —— */
html:has(body.page-home.has-jesus-wallpaper) {
  height: 100%;
  overflow: hidden;
}
body.page-home.has-jesus-wallpaper {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}
body.page-home.has-jesus-wallpaper .home-below-fold {
  display: none !important;
}
body.page-home.has-jesus-wallpaper .site-header {
  /* Keep header in flow; hero already subtracts --header-h */
  position: sticky;
}
body.page-home.has-jesus-wallpaper .nav {
  padding: 0.55rem 0;
}
body.page-home.has-jesus-wallpaper {
  --header-h: 3.55rem;
}

/* Audience stats sit at bottom of the hero viewport */
body.has-jesus-wallpaper .hero-foot-stats {
  width: 100%;
  display: flex;
  justify-content: center;
  pointer-events: auto;
}
body.has-jesus-wallpaper .hero-foot .audience-stats {
  margin: 0.15rem 0 0;
  gap: 0.45rem;
}
body.has-jesus-wallpaper .hero-foot .audience-pill {
  min-width: 6.25rem;
  padding: 0.32rem 0.7rem;
  border-radius: 10px;
  background: rgba(255, 252, 246, 0.90);
  border: 1px solid rgba(201, 162, 39, 0.32);
  box-shadow: 0 6px 16px rgba(42, 69, 112, 0.12);
  backdrop-filter: blur(8px);
}
body.has-jesus-wallpaper .hero-foot .audience-label {
  font-size: 0.56rem;
}
body.has-jesus-wallpaper .hero-foot .audience-value {
  font-size: 1.12rem;
  margin-top: 0;
}

/* Right rail: optional live CTA */
body.has-jesus-wallpaper .hero-side-right {
  align-self: end;
  align-items: stretch;
  text-align: left;
  /* Sit toward bottom-right, just above visitor-stats foot band */
  padding-bottom: 0.35rem;
  margin-bottom: 0.15rem;
  justify-self: end;
  width: 100%;
  max-width: 20rem;
}
body.has-jesus-wallpaper .hero-side-right .hero-actions:empty,
body.has-jesus-wallpaper .hero-side-right .hero-actions:not(:has(a:not([style*="display: none"]):not([style*="display:none"]))) {
  /* keep live CTA space when shown; otherwise collapse visually via JS display */
}

@media (max-width: 720px) {
  .nav-end {
    width: 100%;
    justify-content: space-between;
  }
  .brand.brand-pray {
    font-size: 1.35rem;
    padding: 0.22rem 0.75rem 0.3rem;
  }
  .brand.brand-pray .brand-pray-text {
    font-size: 1.35rem;
  }
  .nav-links a {
    font-size: 1.05rem;
    padding: 0.22rem 0.5rem;
  }
}



/* —— HOME Reflection Corner (bottom-right hero; Sacred Heart photo) —— */
.reflection-widget {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  /* Same width; ~45% shorter (~55% of prior tall card) */
  min-height: clamp(9.5rem, 28vh, 15.5rem);
  max-height: min(36vh, 16.5rem);
  aspect-ratio: 1.3 / 1;
  border-radius: 14px;
  overflow: hidden;
  isolation: isolate;
  /* Mission-card–like frame + animated gold rim (beam lives in border box) */
  border: 3px solid transparent;
  background:
    conic-gradient(
      from var(--glisten-angle, 0deg),
      rgba(158, 120, 36, 0.55) 0deg,
      rgba(176, 138, 42, 0.5) 220deg,
      rgba(201, 162, 39, 0.45) 280deg,
      rgba(232, 213, 163, 0.55) 305deg,
      rgba(255, 240, 185, 0.95) 322deg,
      rgba(255, 252, 242, 1) 334deg,
      rgba(255, 236, 170, 0.95) 346deg,
      rgba(201, 162, 39, 0.55) 356deg,
      rgba(158, 120, 36, 0.55) 360deg
    ) border-box;
  box-shadow:
    0 1px 0 rgba(255, 252, 246, 0.55) inset,
    0 0 0 1px rgba(255, 248, 235, 0.45),
    0 0 18px rgba(201, 162, 39, 0.3),
    0 10px 24px rgba(28, 18, 12, 0.26);
  animation: reflection-glisten-spin 6s linear infinite;
  pointer-events: auto;
  cursor: pointer;
  transform: scale(1);
  transform-origin: bottom right;
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    z-index 0s linear 0.28s;
  z-index: 6;
  will-change: transform;
}

/* ~2× enlarge; anchored bottom-right — grows up/left, does not jump */

/* Keep expanded Reflection Corner above foot stats / mid-hero layers */
.hero-side-panels:has(.reflection-widget.is-expanded) {
  z-index: 50;
}
.hero-side-right:has(.reflection-widget.is-expanded) {
  z-index: 50;
}

.reflection-widget.is-expanded {
  transform: scale(2);
  z-index: 40;
  cursor: default;
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    z-index 0s;
  box-shadow:
    0 1px 0 rgba(255, 252, 246, 0.65) inset,
    0 0 0 1px rgba(255, 248, 235, 0.5),
    0 0 22px rgba(201, 162, 39, 0.36),
    0 14px 32px rgba(28, 18, 12, 0.34);
}

/* Mission-style soft top gold accent */
.reflection-widget::after {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 2px;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 39, 0.78), transparent);
}

/* Animated rim angle (Chrome/Safari @property) */
@property --glisten-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes reflection-glisten-spin {
  to { --glisten-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .reflection-widget {
    animation: none;
    background:
      linear-gradient(rgba(201, 162, 39, 0.72), rgba(201, 162, 39, 0.72)) border-box;
  }
}


.reflection-widget__toggle {
  position: absolute;
  inset: 0;
  z-index: 3;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.reflection-widget__toggle:focus-visible {
  outline: 2px solid rgba(232, 213, 163, 0.95);
  outline-offset: -3px;
}

.reflection-widget__close {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  z-index: 5;
  width: 1.55rem;
  height: 1.55rem;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(201, 162, 39, 0.55);
  background: rgba(18, 12, 8, 0.62);
  color: #f8efd4;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(255, 248, 235, 0.25),
    0 4px 12px rgba(10, 6, 4, 0.45);
  -webkit-tap-highlight-color: transparent;
}
.reflection-widget__close[hidden] {
  display: none !important;
}
.reflection-widget__close:hover,
.reflection-widget__close:focus-visible {
  background: rgba(28, 18, 12, 0.78);
  border-color: rgba(232, 213, 163, 0.85);
  outline: none;
}
.reflection-widget__close:focus-visible {
  box-shadow:
    0 0 0 2px rgba(232, 213, 163, 0.9),
    0 4px 12px rgba(10, 6, 4, 0.45);
}

.reflection-widget__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.reflection-widget__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Fill whole card; head + Sacred Heart + figure in crop */
  object-position: 54% 22%;
}

.reflection-widget__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Soft full-bleed veil — picture stays visible underneath */
  background:
    linear-gradient(180deg,
      rgba(28, 18, 12, 0.14) 0%,
      rgba(36, 24, 16, 0.12) 30%,
      rgba(22, 14, 10, 0.22) 55%,
      rgba(18, 12, 8, 0.34) 78%,
      rgba(14, 10, 6, 0.42) 100%),
    radial-gradient(ellipse 75% 65% at 50% 40%,
      rgba(255, 248, 235, 0.06),
      transparent 68%);
}

.reflection-widget__body {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.42rem;
  text-align: center;
  /* No solid bottom band — text floats, centered on whole card */
  background: transparent;
  box-sizing: border-box;
}

.reflection-widget__label {
  margin: 0;
  font-family: var(--font-script, "Great Vibes", cursive);
  font-size: clamp(1.15rem, 2.1vw, 1.5rem);
  line-height: 1.08;
  letter-spacing: 0.015em;
  color: #f8efd4;
  text-shadow:
    0 1px 0 rgba(28, 18, 12, 0.7),
    0 2px 10px rgba(10, 6, 4, 0.75),
    0 0 18px rgba(10, 6, 4, 0.55),
    0 0 14px rgba(201, 162, 39, 0.4);
}

.reflection-widget__quote {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.38rem;
  max-width: 95%;
}
.reflection-widget__quote p {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(0.78rem, 1.22vw, 0.98rem);
  line-height: 1.34;
  color: #fffaf0;
  text-shadow:
    0 1px 2px rgba(10, 6, 4, 0.9),
    0 2px 12px rgba(10, 6, 4, 0.7),
    0 0 8px rgba(10, 6, 4, 0.5);
}
.reflection-widget__quote cite {
  display: block;
  margin: 0;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.58rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f0dfa8;
  text-shadow:
    0 1px 3px rgba(10, 6, 4, 0.85),
    0 2px 8px rgba(10, 6, 4, 0.55);
}

body.has-jesus-wallpaper .hero-side-right .hero-actions {
  margin-top: 0.45rem;
  justify-content: center;
}

@media (max-height: 820px) {
  .reflection-widget {
    min-height: clamp(8.5rem, 24vh, 13.5rem);
    max-height: min(32vh, 14.5rem);
  }
  .reflection-widget__body {
    padding: 0.6rem 0.85rem;
    gap: 0.36rem;
  }
  .reflection-widget__label {
    font-size: clamp(1.05rem, 1.9vw, 1.32rem);
  }
}

@media (max-width: 640px) {
  body.has-jesus-wallpaper .hero-side-right {
    max-width: 22rem;
    margin: 0 auto;
  }
  .reflection-widget {
    min-height: 11rem;
    max-height: none;
    aspect-ratio: 1.3 / 1;
  }
}

/* Prayer intentions — warm sacred cards */
.intention-panel {
  margin-top: 1rem;
  padding: 1.15rem 1.2rem 1.25rem;
  border-radius: 14px;
  background:
    radial-gradient(ellipse 70% 60% at 10% 0%, rgba(201, 162, 39, 0.14), transparent 55%),
    radial-gradient(ellipse 50% 50% at 100% 100%, rgba(74, 111, 165, 0.1), transparent 50%),
    linear-gradient(165deg, #fffef9 0%, #f7f1e4 55%, #f3eade 100%);
  border: 1px solid rgba(201, 162, 39, 0.38);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 8px 22px rgba(42, 69, 112, 0.07);
}
.intention-panel[hidden] { display: none !important; }

.intention-kicker {
  font-family: var(--font-script, "Great Vibes", cursive);
  font-size: 1.55rem;
  color: var(--marian-deep);
  line-height: 1.15;
  margin: 0 0 0.2rem;
  letter-spacing: 0.01em;
}
.intention-lead {
  margin: 0 0 0.95rem;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}
.intention-lead strong {
  color: var(--heading);
  font-weight: 600;
}

.schedule-item {
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.schedule-item.is-open {
  border-color: rgba(201, 162, 39, 0.55);
  box-shadow:
    0 0 0 3px rgba(201, 162, 39, 0.12),
    var(--shadow);
}
.schedule-item-body {
  min-width: 0;
}
.schedule-item-actions {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.btn-intention {
  background: linear-gradient(180deg, #f4e7b8 0%, #e8d48a 100%);
  color: #3a2f0a;
  border: 1px solid rgba(154, 122, 26, 0.45);
  font-weight: 650;
  box-shadow: 0 2px 8px rgba(201, 162, 39, 0.25);
}
.btn-intention:hover {
  filter: brightness(1.04);
  text-decoration: none;
  color: #2a2208;
}
.btn-intention[aria-expanded="true"] {
  background: linear-gradient(180deg, #e8d48a 0%, #dcc46e 100%);
}

.intention-public-list {
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.intention-public-list li {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  background: rgba(255, 253, 248, 0.85);
  border: 1px solid rgba(74, 111, 165, 0.14);
  font-size: 0.9rem;
  color: var(--text);
}
.intention-public-list .int-candle {
  flex-shrink: 0;
  width: 0.55rem;
  height: 0.55rem;
  margin-top: 0.45rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe9a8, #c9a227 55%, #9a7a1a);
  box-shadow: 0 0 8px rgba(201, 162, 39, 0.55);
}
.intention-public-list .int-who {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--marian-deep);
  font-size: 0.95rem;
}
.intention-public-list .int-text {
  color: var(--text-muted);
  font-style: italic;
}

.intention-form .consent-row label {
  font-size: 0.88rem;
}
.intention-thanks {
  display: none;
  text-align: center;
  padding: 1.1rem 0.75rem 0.4rem;
}
.intention-thanks.is-visible { display: block; }
.intention-thanks .thanks-script {
  font-family: var(--font-script, "Great Vibes", cursive);
  font-size: 2rem;
  color: var(--marian-deep);
  margin: 0 0 0.35rem;
  line-height: 1.1;
}
.intention-thanks p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.intentions-hero-card {
  position: relative;
  overflow: hidden;
  margin-bottom: 1.5rem;
  padding: 1.35rem 1.4rem 1.4rem;
  background:
    radial-gradient(ellipse 60% 80% at 0% 0%, rgba(201, 162, 39, 0.16), transparent 55%),
    radial-gradient(ellipse 50% 60% at 100% 100%, rgba(74, 111, 165, 0.12), transparent 50%),
    linear-gradient(145deg, #fffdf8 0%, #f8f2e6 100%);
  border: 1px solid rgba(201, 162, 39, 0.35);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.intentions-hero-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 39, 0.75), transparent);
}
.intentions-hero-card .script-line {
  font-family: var(--font-script, "Great Vibes", cursive);
  font-size: 1.85rem;
  color: var(--marian-deep);
  margin: 0 0 0.35rem;
  line-height: 1.15;
}
.intentions-hero-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
  max-width: 38rem;
}

.admin-intention-day {
  margin-bottom: 1.15rem;
  padding: 1rem 1.05rem;
  border-radius: 14px;
  background: linear-gradient(165deg, #fffef9, #f6f0e3);
  border: 1px solid rgba(201, 162, 39, 0.3);
}
.admin-intention-day h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin: 0 0 0.25rem;
  color: var(--heading);
}
.admin-intention-day .day-meta {
  font-size: 0.82rem;
  color: var(--marian);
  font-weight: 650;
  margin-bottom: 0.75rem;
}
.admin-intention-row {
  display: flex;
  justify-content: space-between;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 0.65rem 0;
  border-top: 1px solid var(--border-soft);
}
.admin-intention-row:first-of-type { border-top: none; }
.admin-intention-row .int-name {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--marian-deep);
}
.admin-intention-row .int-body {
  font-style: italic;
  color: var(--text);
  margin: 0.15rem 0 0.25rem;
}
.admin-intention-row .int-flags {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.admin-intention-row.is-hidden {
  opacity: 0.55;
}
.badge-soft {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: var(--marian-soft);
  color: var(--marian-deep);
  margin-right: 0.25rem;
}
.badge-soft.warn {
  background: rgba(201, 162, 39, 0.2);
  color: var(--accent-deep);
}
.badge-soft.muted {
  background: rgba(90, 102, 120, 0.12);
  color: var(--text-muted);
}

.schedule-page-head p {
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

/* —— HOME Mission card (left hero; cream / gold / Marian) —— */
.mission-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: 100%;
  padding: 0.85rem 0.95rem 0.95rem;
  border-radius: 14px;
  background:
    radial-gradient(ellipse 70% 55% at 0% 0%, rgba(201, 162, 39, 0.18), transparent 55%),
    radial-gradient(ellipse 55% 50% at 100% 100%, rgba(74, 111, 165, 0.12), transparent 55%),
    linear-gradient(165deg, rgba(255, 253, 248, 0.96) 0%, rgba(248, 242, 230, 0.94) 100%);
  border: 1.5px solid rgba(201, 162, 39, 0.55);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 0 0 1px rgba(255, 248, 235, 0.45),
    0 0 18px rgba(201, 162, 39, 0.22),
    0 10px 24px rgba(42, 69, 112, 0.12);
  backdrop-filter: blur(10px);
  text-align: left;
}
.mission-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 39, 0.8), transparent);
}
.mission-card__label {
  margin: 0;
  font-family: var(--font-script, "Great Vibes", cursive);
  font-size: clamp(1.45rem, 2.4vw, 1.85rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: var(--marian-deep);
  text-shadow: 0 1px 0 rgba(255, 252, 246, 0.8);
}
.mission-card__text {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(0.82rem, 1.3vw, 0.96rem);
  line-height: 1.4;
  color: #1a2f4d;
}
.mission-card__join {
  margin: 0.1rem 0 0;
  padding-top: 0.4rem;
  border-top: 1px solid rgba(201, 162, 39, 0.28);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(0.76rem, 1.15vw, 0.88rem);
  line-height: 1.35;
  color: var(--text-muted);
}
.mission-card__join[hidden] {
  display: none !important;
  border: 0;
  padding: 0;
  margin: 0;
}

@media (max-width: 640px) {
  .mission-card {
    text-align: center;
    max-width: 22rem;
  }
  .mission-card__join {
    border-top-color: rgba(201, 162, 39, 0.22);
  }
}

/* —— About page —— */
.about-main {
  padding: 1.5rem 0 3.5rem;
}
.about-page-head p {
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
}
.about-card {
  position: relative;
  overflow: hidden;
  margin: 0 auto 1.5rem;
  padding: 1.6rem 1.55rem 1.45rem;
  max-width: 40rem;
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse 60% 70% at 0% 0%, rgba(201, 162, 39, 0.16), transparent 55%),
    radial-gradient(ellipse 50% 55% at 100% 100%, rgba(74, 111, 165, 0.14), transparent 50%),
    linear-gradient(145deg, #fffdf8 0%, #f8f2e6 55%, #f3ebe0 100%);
  border: 1px solid rgba(201, 162, 39, 0.38);
  box-shadow: var(--shadow);
}
.about-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 39, 0.75), transparent);
}
.about-card__script {
  margin: 0 0 0.35rem;
  font-family: var(--font-script, "Great Vibes", cursive);
  font-size: clamp(1.85rem, 3.2vw, 2.35rem);
  line-height: 1.1;
  color: var(--marian-deep);
  text-align: center;
}
.about-card__gold-line {
  width: 4.5rem;
  height: 2px;
  margin: 0 auto 1.1rem;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 39, 0.85), transparent);
  border-radius: 2px;
}
.about-bio p {
  margin: 0 0 0.95rem;
  color: var(--text);
  font-size: 1.02rem;
  line-height: 1.65;
  font-family: var(--font-display);
}
.about-bio p:last-child {
  margin-bottom: 0;
}
.about-bio em {
  color: var(--text-muted);
  font-style: italic;
}
.about-podcast-note {
  padding: 0.85rem 1rem;
  margin: 0.15rem 0 1rem;
  border-radius: 12px;
  background: rgba(255, 252, 245, 0.72);
  border: 1px solid rgba(201, 162, 39, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.about-podcast-note strong {
  display: inline;
  color: var(--marian-deep);
  font-weight: 600;
}
.about-card__note {
  margin: 1.15rem 0 0;
  text-align: center;
  font-size: 0.82rem;
}
.about-links {
  max-width: 40rem;
  margin: 0 auto;
  text-align: center;
}
.about-links__title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  margin: 0 0 0.65rem;
  color: var(--heading);
}
.about-links__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  color: var(--text-muted);
  font-size: 0.98rem;
}
.about-links__list a {
  font-weight: 600;
  color: var(--marian-deep);
}

/* —— Site-wide header: rosary bead bar, no logo, centered menu (header-beads2) ——
   Photo: Keith's portrait rotated 90° ccw (flipped 180° from header-rosary1), cropped tight into the densest
   two-strand bead band (source box x0–1500, y1325–1460 of the 4000×2256 rotated frame) so no marble edges show;
   uniformly upscaled 1.6× to 2400×216 (exact 1500:135 ratio).
   background-size: cover only (uniform scale, never stretched). */
.site-header {
  --site-header-h: 7rem;
  position: sticky;
  top: 0;
  background:
    linear-gradient(180deg, rgba(255, 252, 246, 0.10) 0%, rgba(255, 252, 246, 0) 40%, rgba(40, 30, 20, 0.10) 100%),
    url("/img/header-rosary-beads.jpg?v=header-beads2") center center / cover no-repeat,
    #eeebe6;
  backdrop-filter: none;
  border-bottom: 1px solid rgba(184, 148, 42, 0.45);
  box-shadow: 0 4px 18px rgba(42, 69, 112, 0.14);
}
.site-header .nav,
body.page-home.has-jesus-wallpaper .site-header .nav {
  position: relative;
  justify-content: center;
  min-height: var(--site-header-h);
  padding: 0.5rem 0;
}
.site-header .nav-end {
  justify-content: center;
  width: auto;
}
/* Frosted cream pill just behind the link group — beads stay the main visual everywhere else */
.site-header .nav-links {
  justify-content: center;
  gap: 0.15rem;
  padding: 0.22rem 0.4rem;
  border-radius: 999px;
  background: rgba(255, 252, 246, 0.80);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
  backdrop-filter: blur(6px) saturate(1.1);
  border: 1px solid rgba(201, 162, 39, 0.45);
  box-shadow: 0 4px 14px rgba(30, 20, 10, 0.22), 0 1px 0 rgba(255, 255, 255, 0.7) inset;
}
.site-header .nav-links a {
  color: #24344f;
}
.site-header .nav-links a:hover,
.site-header .nav-links a.active {
  color: #fffdf8;
  background: #2a4570;
}
/* OFFLINE/LIVE pill: pinned to the right edge of the bar, out of the centering flow */
.site-header .nav-status {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.site-header .nav-status .badge {
  background: rgba(255, 252, 246, 0.88);
  box-shadow: 0 3px 10px rgba(30, 20, 10, 0.22);
}
body.page-home.has-jesus-wallpaper {
  --header-h: 7rem;
}

/* Home title on Psalm 23: deep royal Marian blue PNG (same 990×390 art, same box), crisp cream rim + warm gold glow */
body.wallpaper-psalm23 .hero-title-script {
  filter:
    drop-shadow(0 0 1.2px rgba(255, 253, 247, 1))
    drop-shadow(0 0 1.2px rgba(255, 253, 247, 1))
    drop-shadow(0 0 2.5px rgba(255, 248, 230, 1))
    drop-shadow(0 0 10px rgba(255, 226, 150, 0.9))
    drop-shadow(0 3px 6px rgba(10, 18, 40, 0.5));
}

@media (max-width: 720px) {
  .site-header {
    --site-header-h: 5.75rem;
  }
  .site-header .nav,
  body.page-home.has-jesus-wallpaper .site-header .nav {
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.45rem 0;
  }
  .site-header .nav-end {
    width: auto;
    flex-direction: column;
    gap: 0.3rem;
  }
  .site-header .nav-links {
    border-radius: 18px;
    padding: 0.2rem 0.3rem;
  }
  .site-header .nav-status {
    position: static;
    transform: none;
  }
}

/* ===================== ROUND 3 (Keith, Oct 10) =====================
   Rule: NO STRETCHING. Every photo is uniform scale + crop (cover) only.
   --bar-h is the shared height of the header bar AND every page photo banner. */
:root {
  --bar-h: clamp(170px, 29vh, 236px);
}

/* —— Shared header: Keith's wooden rosary (IMG20261010092016) ——
   Photo rotated 90° ccw (crucifix right, Mary medal upright), cropped x0–4000 / y440–1880 of the rotated
   4000×2256 frame: whole rosary in the lower 69.5%, the real marble slab above it in the top 30.5% (menu zone).
   Both sides are extended with real marble patches from the same slab (feathered), giving a 7680×640 (12:1) strip.
   background-size: cover on a bar ≤12:1 = height-fit, i.e. the whole rosary is always shown at a uniform scale. */
.site-header,
body.page-home.has-jesus-wallpaper .site-header {
  position: relative;
  top: auto;
  z-index: 40;
  height: var(--bar-h);
  min-height: 0;
  padding: 0;
  background:
    linear-gradient(180deg, rgba(255, 252, 246, 0.06) 0%, rgba(255, 252, 246, 0) 30%, rgba(40, 30, 20, 0.06) 100%),
    url("/img/header-rosary-full.jpg?v=round3") center top / cover no-repeat,
    #e6e7ea;
  border-bottom: 1px solid rgba(184, 148, 42, 0.55);
  box-shadow: 0 4px 18px rgba(30, 20, 10, 0.22);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  flex: 0 0 auto;
}
.site-header .nav,
body.page-home.has-jesus-wallpaper .site-header .nav {
  height: calc(var(--bar-h) * 0.305);   /* the marble menu zone above the beads */
  min-height: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.site-header .nav-end {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  width: auto;
}
.site-header .nav-links {
  flex-wrap: nowrap;
  gap: 0.2rem;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255, 252, 246, 0.86);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
  backdrop-filter: blur(6px) saturate(1.1);
  border: 1px solid rgba(201, 162, 39, 0.55);
  box-shadow: 0 4px 14px rgba(30, 20, 10, 0.25), 0 1px 0 rgba(255, 255, 255, 0.7) inset;
}
.site-header .nav-links a {
  font-size: clamp(29px, calc(var(--bar-h) * 0.135), 32px);   /* was 19.5px → ~1.5–1.6× */
  line-height: 1.1;
  padding: 0.14em 0.58em 0.18em;
  color: #1f2f4c;
  white-space: nowrap;
}
.site-header .nav-links a:hover,
.site-header .nav-links a.active {
  color: #fffdf8;
  background: #2a4570;
}
.site-header .nav-status {
  position: static;
  transform: none;
}
.site-header .nav-status .badge {
  font-size: clamp(16px, calc(var(--bar-h) * 0.075), 18px);   /* was 10.9px → ~1.6× */
  padding: 0.5em 1.05em;
  gap: 0.55em;
  background: rgba(255, 252, 246, 0.92);
  border: 1px solid rgba(201, 162, 39, 0.55);
  box-shadow: 0 4px 12px rgba(30, 20, 10, 0.25);
}
.site-header .nav-status .badge-dot { width: 0.6em; height: 0.6em; }
/* status now lives in the header on every page; hide the duplicate page-head badge */
.page-head > [data-status-badge] { display: none !important; }

/* —— Page photo banners: same height as the header bar, full width, cover —— */
.page-banner,
.page-banner--live {
  height: var(--bar-h);
  min-height: 0;
  flex: 0 0 auto;
}
.page-banner img { object-fit: cover; width: 100%; height: 100%; }
.page-banner--episodes img { object-position: center 45%; }
.page-banner--schedule img { object-position: center 36%; }   /* Jesus' whole face incl. beard; crown is already cropped in the source */
.page-banner--about img { object-position: center 50%; }
/* Live: Pietà band from Mary's veil top to below Jesus' head (src y100–2280 of 6656×4437), both faces whole;
   extended left with the real wall and right with the mirrored tapestry into a 7200×600 (12:1) strip.
   cover on a ≤12:1 box = height-fit, centred on the statue — uniform scale only. */
.page-banner--live { background: #2a2219; }
.page-banner--live img { object-position: center center; }

/* —— Fit-to-screen pages: header + banner + body panel; the page never scrolls —— */
html:has(body.fit-page) { height: 100%; overflow: hidden; }
body.fit-page {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body.fit-page .page-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
body.fit-page .footer { margin-top: 0; padding: 0.6rem 0 0.8rem; }

/* —— Live page: Psalm 23 turquoise rosary (IMG_3005) wallpaper behind the body panel ——
   2048×1536 EXIF-rotated; cover = width-fit at desktop (whole photo width, nothing zoomed in beyond fill). */
body.page-live { background: #efe9dc; }
body.page-live .page-scroll {
  background: url("/img/wallpaper-live-psalm23.jpg?v=round3") center 30% / cover no-repeat #efe9dc;
}
body.page-live .live-main { padding: 0.9rem 0 0.6rem; }
body.page-live .page-head {
  padding: 0.55rem 1.2rem 0.65rem;
  margin: 0 auto 0.75rem;
  max-width: 40rem;
  border-radius: 16px;
  background: rgba(255, 252, 246, 0.86);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  box-shadow: 0 6px 20px rgba(30, 20, 10, 0.18);
}
body.page-live .page-head h1 { margin: 0 0 0.2rem; }
body.page-live .page-head p { margin: 0 auto 0.35rem; }
body.page-live .player-shell {
  max-width: 40rem;
  margin: 0 auto;
  padding: 1rem 1.4rem;
  background: rgba(255, 252, 246, 0.9);
}
body.page-live .player-shell .empty-art { width: 48px; height: 48px; margin-bottom: 0.3rem; }
body.page-live .player-shell h2 { margin: 0 0 0.25rem; }
body.page-live .player-shell p[style*="margin-top:1.5rem"] { margin-top: 0.7rem !important; }
body.page-live .footer { background: rgba(255, 252, 246, 0.82); }

/* —— Tighter page heads so content starts above the fold —— */
body.fit-page .page-head { padding-top: 0.9rem; padding-bottom: 0.6rem; }
body.fit-page .page-head h1 { margin-bottom: 0.3rem; }

/* —— HOME: sunset prayer wallpaper (pexels-welma-alves-santos) —— */
body.page-home.has-jesus-wallpaper { --header-h: var(--bar-h); }
body.wallpaper-sunset { background-color: #1b1622; }
body.wallpaper-sunset .hero-wallpaper { background: #1b1622; }
body.wallpaper-sunset .hero-wallpaper img {
  object-fit: cover;
  object-position: 62% 22%;   /* praying woman (right of centre) + sun + dock rail */
  width: 100%;
  height: 100%;
}
body.wallpaper-sunset .hero-stage .rosary-white-loop { display: none !important; }
body.wallpaper-sunset .hero-stage::before {
  background:
    linear-gradient(180deg, rgba(10, 8, 20, 0.30) 0%, rgba(10, 8, 20, 0.08) 30%, transparent 55%, rgba(10, 8, 20, 0.25) 100%);
}
/* Bold gold "Let's Pray": thickened script, cream→gold→amber fill, dark rim, warm glow */
body.wallpaper-sunset .hero-title-script {
  width: min(92vw, 46rem);
  max-height: clamp(7.5rem, 31vh, 15.5rem);
  height: auto;
  object-fit: contain;
  margin: 0.35rem auto 0;
  filter:
    drop-shadow(0 0 2px rgba(255, 236, 170, 0.95))
    drop-shadow(0 0 10px rgba(255, 196, 70, 0.85))
    drop-shadow(0 0 26px rgba(255, 170, 40, 0.6))
    drop-shadow(0 4px 8px rgba(10, 6, 2, 0.6));
}
/* Cards stay readable over the darker photo */
body.wallpaper-sunset .mission-card {
  background: rgba(255, 252, 246, 0.95);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}
body.wallpaper-sunset .reflection-widget { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); }
body.wallpaper-sunset .hero-foot .audience-pill {
  background: rgba(255, 252, 246, 0.95);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

/* —— Phone: rosary spans the full width; taller marble zone on top for the wrapped menu —— */
@media (max-width: 720px) {
  :root { --bar-h: calc(100vw * 615 / 1200); }   /* phone strip 1200×615 shown width-fit (uniform) */
  .site-header,
  body.page-home.has-jesus-wallpaper .site-header {
    background:
      url("/img/header-rosary-full-phone.jpg?v=round3") center bottom / cover no-repeat,
      #e6e7ea;
  }
  .site-header .nav,
  body.page-home.has-jesus-wallpaper .site-header .nav {
    height: calc(var(--bar-h) * 0.5);
    flex-direction: row;
    gap: 0;
    padding: 0 6px;
  }
  .site-header .nav-end {
    flex-direction: column;
    gap: 4px;
    flex-wrap: nowrap;
  }
  .site-header .nav-links {
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 16px;
    padding: 2px 4px;
    row-gap: 0;
    max-width: calc(100vw - 12px);
  }
  .site-header .nav-links a { font-size: 22px; padding: 0.08em 0.45em 0.12em; }
  .site-header .nav-status .badge { font-size: 12px; padding: 0.3em 0.8em; }
  body.wallpaper-sunset .hero-title-script { width: min(94vw, 24rem); max-height: 9rem; }
}

/* Live desktop: welcome card + player side by side so the room fits on one screen */
@media (min-width: 900px) {
  body.page-live .live-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    max-width: 62rem;
  }
  body.page-live .page-head,
  body.page-live .player-shell { margin: 0; max-width: none; }
}

/* Login fits short laptop screens without scrolling */
.login-page { box-sizing: border-box; min-height: 100dvh; }
@media (max-height: 740px) {
  .login-page { padding: 0.75rem; }
  .login-card { padding: 1.2rem 1.6rem; }
  .login-card .brand { margin-bottom: 0.4rem !important; }
  .login-card .sub { margin-bottom: 0.9rem; }
  .login-note { margin-top: 0.7rem; }
}

/* ===================== ROUND 4 (Keith, Oct 10) =====================
   NO STRETCHING: photos are uniform scale + crop (cover) only.
   Rosary banner on HOME only; other pages get a slim cream menu bar above their own photo banner. */

/* —— Other pages: slim cream bar with the same enlarged pill + OFFLINE badge, centred —— */
body:not(.page-home) .site-header {
  height: auto;
  background: linear-gradient(180deg, #fffdf8 0%, #f6efe0 100%);
  border-bottom: 1px solid rgba(184, 148, 42, 0.55);
  box-shadow: 0 3px 12px rgba(30, 20, 10, 0.14);
}
body:not(.page-home) .site-header .nav {
  height: auto;
  padding: 7px 8px;
}

/* —— HOME: rosary banner, exactly the photo-banner height (--bar-h), full width ——
   home-banner-rosary.jpg = Keith's IMG20261010092016 rotated 90° ccw (crucifix right, medal upright),
   crop x0–3960 / y640–1960 of the 4000×2256 frame (3:1), beads run edge to edge.
   cover on a ≥3:1 box = width-fit, vertically centred on the beads (uniform scale). */
body.page-home .site-header,
body.page-home.has-jesus-wallpaper .site-header {
  height: var(--bar-h);
  background: url("/img/home-banner-rosary.jpg?v=round4") center 50% / cover no-repeat #d9d2c4;
}

/* —— HOME title: ~67% of round 3, centred between banner and window bottom —— */
@media (min-width: 641px) {
  body.wallpaper-sunset .hero-title-frame {
    position: absolute;
    inset: 0;
    padding: 0;
    display: grid;
    place-items: center;
    z-index: 8;
  }
  body.wallpaper-sunset .hero-title-frame .hero-pray-title { width: auto; }
  body.wallpaper-sunset .hero-title-script {
    width: auto;
    max-width: 90vw;
    height: clamp(5rem, 20.8vh, 10.4rem);   /* round 3: clamp(7.5rem, 31vh, 15.5rem) → ×0.67 */
    max-height: none;
    margin: 0 auto;
  }
  /* keep the side cards / counters in their old rows now the title no longer takes row 1 */
  body.wallpaper-sunset .hero-stage { grid-template-rows: 0 1fr auto; }
}
/* separation from the bright sunset: soft dark vignette just behind the title + darker amber rim */
body.wallpaper-sunset .hero-pray-title { position: relative; isolation: isolate; }
body.wallpaper-sunset .hero-pray-title::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%; top: 50%;
  width: 135%; height: 150%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(28, 14, 6, 0.55) 0%, rgba(28, 14, 6, 0.32) 50%, rgba(28, 14, 6, 0) 100%);
  pointer-events: none;
}
body.wallpaper-sunset .hero-title-script {
  filter:
    drop-shadow(0 0 1px rgba(70, 34, 6, 0.95))
    drop-shadow(0 0 2px rgba(90, 44, 8, 0.9))
    drop-shadow(0 0 7px rgba(255, 200, 80, 0.75))
    drop-shadow(0 0 18px rgba(255, 170, 40, 0.5))
    drop-shadow(0 3px 6px rgba(10, 6, 2, 0.7));
}

@media (max-width: 720px) {
  body.page-home .site-header,
  body.page-home.has-jesus-wallpaper .site-header {
    background: url("/img/home-banner-rosary-phone.jpg?v=round4b") center center / cover no-repeat #d9d2c4;
  }
  body:not(.page-home) .site-header .nav { height: auto; padding: 5px 6px; }
}
@media (max-width: 640px) {
  body.wallpaper-sunset .hero-title-script { width: min(63vw, 16rem); max-height: none; height: auto; }   /* round 3: min(94vw, 24rem) */
}

/* —— HOME: menu pill + OFFLINE badge centred over the rosary banner (both axes), badge right after the pill —— */
body.page-home .site-header .nav,
body.page-home.has-jesus-wallpaper .site-header .nav {
  height: 100%;
  align-items: center;
  justify-content: center;
}
@media (max-width: 720px) {
  body.page-home .site-header .nav,
  body.page-home.has-jesus-wallpaper .site-header .nav { height: 100%; }
}

/* ===================== ROUND 5 (Keith, Oct 10) — HOME only =====================
   Rosary banner removed from home (img/home-banner-rosary*.jpg kept on disk).
   Menu pill + OFFLINE badge float at the very top, centred, same sizes; the sunset wallpaper
   fills the whole window behind them (cover = uniform scale + crop, never stretched). */
body.page-home.has-jesus-wallpaper {
  --header-h: 0px;
  /* bottom edge of the menu row: 12px top margin + pill (1.42 × link font + 8px padding/border) */
  --home-menu-b: calc(12px + 8px + 1.42 * clamp(29px, calc(var(--bar-h) * 0.135), 32px));
}
body.page-home .site-header,
body.page-home.has-jesus-wallpaper .site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: auto;
  background: none;
  border-bottom: 0;
  box-shadow: none;
  z-index: 40;
  pointer-events: none;          /* only the pill + badge take clicks */
}
body.page-home .site-header .nav-links,
body.page-home .site-header .nav-status { pointer-events: auto; }
body.page-home .site-header .nav,
body.page-home.has-jesus-wallpaper .site-header .nav {
  height: auto;
  padding: 12px 8px 0;
  align-items: center;
  justify-content: center;
}
body.page-home.has-jesus-wallpaper .hero.hero-viewport {
  height: 100dvh;
  max-height: 100dvh;
}
/* a touch more shade at the very top so the cream pill sits cleanly on the sky */
body.page-home.wallpaper-sunset .hero-stage::before {
  background:
    linear-gradient(180deg, rgba(10, 8, 20, 0.34) 0%, rgba(10, 8, 20, 0.10) 16%, transparent 45%, rgba(10, 8, 20, 0.25) 100%);
}

/* —— Title back to round-3 size (uniform scale), centred in the area below the menu —— */
@media (min-width: 641px) {
  body.page-home.wallpaper-sunset .hero-title-frame {
    inset: var(--home-menu-b) 0 0 0;
  }
  body.page-home.wallpaper-sunset .hero-title-script {
    height: clamp(7.5rem, 31vh, 15.5rem);   /* = round 3 */
    width: auto;
    max-width: 90vw;
  }
}
@media (max-width: 720px) {
  body.page-home .site-header .nav,
  body.page-home.has-jesus-wallpaper .site-header .nav { height: auto; padding: 10px 6px 0; }
}
@media (max-width: 640px) {
  body.page-home.has-jesus-wallpaper .hero.hero-viewport { height: auto; max-height: none; min-height: 100dvh; }
  body.page-home.has-jesus-wallpaper .hero-stage { padding-top: 128px; min-height: 100dvh; box-sizing: border-box; }
  body.page-home.wallpaper-sunset .hero-title-script { width: min(94vw, 24rem); }   /* = round 3 */
}
/* stronger separation now the title sits higher over the bright sky */
body.page-home.wallpaper-sunset .hero-pray-title::before {
  background: radial-gradient(closest-side, rgba(28, 14, 6, 0.62) 0%, rgba(28, 14, 6, 0.36) 50%, rgba(28, 14, 6, 0) 100%);
}
/* Reflection card drops to the bottom-right corner (beside the centred counters) so the full-size title
   never touches it at 1280 wide; Mission stays vertically centred on the left. */
@media (min-width: 641px) {
  body.page-home.wallpaper-sunset .hero-side-panels { grid-row: 2 / 4; grid-column: 1; padding-bottom: 12px; }
  body.page-home.wallpaper-sunset .hero-side-right { padding-bottom: 0; margin-bottom: 0; }
  body.page-home.wallpaper-sunset .hero-foot { grid-row: 3; grid-column: 1; }
}
/* collapse the hidden "Listen live" slot so the Reflection card sits on the 12px bottom margin; it reappears when live */
body.page-home.wallpaper-sunset .hero-side-right .hero-actions:not(:has(a:not([style*="display: none"]):not([style*="display:none"]))) { display: none; }

/* ===================== ROUND 6 (Keith, Oct 10) — HOME only =====================
   1) "Let's Pray" title ~85% of round 5 (uniform scale), vivid polished gold PNG + slow shine sweep.
   2) Reflection = corner of an old leather book tucked into the bottom-right corner (pure CSS/SVG).
   3) Click / Enter / Space opens the [data-rbook] dialog: 3D cover swing + 4 page flips, then the open
      book grows to full size (js/reflection-book.js). No image is ever stretched (cover/contain only). */

/* —— 1. Title —— */
@media (min-width: 641px) {
  body.page-home.wallpaper-sunset .hero-title-script {
    height: clamp(6.375rem, 26.35vh, 13.175rem);   /* round 5 clamp(7.5rem, 31vh, 15.5rem) × 0.85 */
    width: auto;
    max-width: 90vw;
  }
}
@media (max-width: 640px) {
  body.page-home.wallpaper-sunset .hero-title-script { width: min(79.9vw, 20.4rem); height: auto; }   /* round 5 min(94vw, 24rem) × 0.85 */
}
body.page-home.wallpaper-sunset .hero-pray-title { line-height: 0; }
body.page-home.wallpaper-sunset .hero-title-script {
  display: block;
  filter:
    drop-shadow(0 0 1px rgba(64, 26, 2, 0.95))
    drop-shadow(0 0 2px rgba(84, 36, 4, 0.9))
    drop-shadow(0 0 6px rgba(255, 214, 90, 0.85))
    drop-shadow(0 0 16px rgba(255, 176, 30, 0.6))
    drop-shadow(0 0 34px rgba(255, 150, 10, 0.35))
    drop-shadow(0 3px 6px rgba(10, 6, 2, 0.7));
}
/* dark backing glow a touch deeper so the brighter gold never washes out over the sun */
body.page-home.wallpaper-sunset .hero-pray-title::before {
  background: radial-gradient(closest-side, rgba(26, 12, 4, 0.66) 0%, rgba(26, 12, 4, 0.4) 50%, rgba(26, 12, 4, 0) 100%);
}
/* polished-gold shine: a soft light band sweeps across the letters every ~8s (masked to the script) */
body.page-home.wallpaper-sunset .hero-pray-title::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  -webkit-mask: url("/img/lets-pray-title-gold-vivid.png?v=round6") center / contain no-repeat;
          mask: url("/img/lets-pray-title-gold-vivid.png?v=round6") center / contain no-repeat;
  background: linear-gradient(105deg, transparent 0 40%, rgba(255, 255, 240, 0) 43%, rgba(255, 255, 244, 0.5) 50%, rgba(255, 255, 240, 0) 57%, transparent 60% 100%);
  background-size: 320% 100%;
  background-repeat: no-repeat;
  background-position: 120% 0;
  mix-blend-mode: screen;
  animation: lp-title-shine 8s ease-in-out 3s infinite;
}
@keyframes lp-title-shine {
  0% { background-position: 120% 0; }
  24%, 100% { background-position: -20% 0; }
}
@media (prefers-reduced-motion: reduce) {
  body.page-home.wallpaper-sunset .hero-pray-title::after { animation: none; opacity: 0; }
}

/* —— 2. Book corner (closed) —— */
:root { --marble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.007 0.026' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='2.2 0 0 0 0  2.2 0 0 0 0  2.2 0 0 0 0  0 0 0 0 1'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='table' tableValues='0.93 0.42 0.2 0.16 0.29 0.16 0.12'/%3E%3CfeFuncG type='table' tableValues='0.88 0.56 0.33 0.27 0.44 0.27 0.2'/%3E%3CfeFuncB type='table' tableValues='0.76 0.76 0.52 0.44 0.65 0.44 0.36'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='300' height='300' filter='url%28%23m%29'/%3E%3C/svg%3E"); }   /* Marian-blue marbled endpaper (SVG turbulence) */
@property --peel { syntax: "<number>"; inherits: true; initial-value: 2.7; }
.book-corner-dock {
  position: absolute;
  inset: 0;
  overflow: hidden;              /* the book runs off the right + bottom screen edges; no scroll */
  pointer-events: none;
  z-index: 7;
}
.book-corner {
  --peel: 2.7;
  --leather: #5c1a22;
  --gold: #d9b052;
  position: absolute;
  right: -4.5em;
  bottom: -5em;
  width: 23em;
  height: 18.5em;
  font-size: clamp(12px, 2vh, 16px);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  pointer-events: auto;
  cursor: pointer;
  transform: rotate(-5deg);
  transform-origin: 100% 100%;
  filter: drop-shadow(-0.35em -0.15em 0.8em rgba(0, 0, 0, 0.55)) drop-shadow(0 0 1.2em rgba(255, 190, 80, 0.18));
  transition: transform 0.35s cubic-bezier(.3, .7, .4, 1), filter 0.35s ease, --peel 0.35s cubic-bezier(.3, .7, .4, 1), opacity 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}
.book-corner:hover,
.book-corner:focus-visible {
  --peel: 3.9;
  transform: translate(-0.25em, -0.4em) rotate(-5.6deg);
  filter: drop-shadow(-0.5em -0.3em 1.1em rgba(0, 0, 0, 0.6)) drop-shadow(0 0 1.5em rgba(255, 190, 80, 0.32));
}
.book-corner:focus-visible { outline: none; }
.book-corner:focus-visible .bc-cover { box-shadow: 0 0 0 0.16em #fff3c8, 0 0 0 0.32em rgba(42, 69, 112, 0.9), inset 0.12em 0.12em 0 rgba(255, 220, 200, 0.18); }
.book-corner.is-away { opacity: 0; pointer-events: none; transition: opacity 0.12s ease; }
.book-corner > span { position: absolute; display: block; }
/* leather grain shared by both boards */
.bc-back,
.bc-cover,
.rbook .rbook__board,
.rbook .rbook__cover-front,
.rbook .rbook__cover-back {
  background-color: var(--leather, #5c1a22);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 18% 12%, rgba(255, 200, 170, 0.22), rgba(255, 200, 170, 0) 55%),
    radial-gradient(80% 70% at 85% 90%, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0) 70%);
}
.bc-back {
  inset: 0;
  border-radius: 0.55em 0 0 0;
  --leather: #3d1214;
  box-shadow: inset 0.08em 0.08em 0 rgba(255, 210, 190, 0.18);
}
/* page block: stacked cream page edges along the head (top) and fore-edge (left), mitred at the corner */
.bc-pages {
  left: 0.34em;
  top: 0.34em;
  right: 0;
  bottom: 0;
  border-radius: 0.3em 0 0 0;
  background:
    repeating-linear-gradient(180deg, rgba(120, 90, 50, 0) 0 1.1em, rgba(120, 90, 50, 0.08) 1.1em 1.16em),
    linear-gradient(135deg, #f3e8cc, #e7d6ae);
}
.bc-pages::before,
.bc-pages::after {
  content: "";
  position: absolute;
}
.bc-pages::before {           /* head: page lines run horizontally */
  left: 0; right: 0; top: 0; height: 0.98em;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0.98em 100%);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(120, 80, 30, 0.18)),
    repeating-linear-gradient(180deg, #f8f0dc 0 1.6px, #d8c69c 1.6px 2.5px);
}
.bc-pages::after {            /* fore-edge: page lines run vertically */
  left: 0; top: 0; bottom: 0; width: 0.98em;
  clip-path: polygon(0 0, 100% 0.98em, 100% 100%, 0 100%);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.25), rgba(120, 80, 30, 0.22)),
    repeating-linear-gradient(90deg, #f6eed8 0 1.6px, #d3c093 1.6px 2.5px);
}
/* Marian-blue silk ribbon bookmark slipping out of the head */
.bc-ribbon {
  left: 8.2em;
  top: -1.5em;
  width: 0.95em;
  height: 3.2em;
  background: linear-gradient(90deg, #22385e, #4a6fa5 45%, #6d8fc2 55%, #2a4570);
  clip-path: polygon(0 0, 50% 0.55em, 100% 0, 100% 100%, 0 100%);
  box-shadow: 0 0 0.3em rgba(0, 0, 0, 0.4);
  transform: rotate(4deg);
  transform-origin: 50% 100%;
}
.bc-cover {
  left: 1.3em;
  top: 1.3em;
  right: 0;
  bottom: 0;
  border-radius: 0.35em 0 0 0;
  clip-path: polygon(calc(var(--peel) * 1em) 0, 100% 0, 100% 100%, 0 100%, 0 calc(var(--peel) * 1em));
  box-shadow: inset 0.12em 0.12em 0 rgba(255, 220, 200, 0.18), inset 0.5em 0.5em 1.2em rgba(0, 0, 0, 0.25);
}
/* gold-tooled double rule, inset from the cover edge (its corner is cut by the curling dog-ear) */
.bc-tool {
  position: absolute;
  left: 0.95em;
  top: 0.95em;
  right: -2em;
  bottom: -2em;
  border: 0.12em solid var(--gold);
  outline: 0.06em solid rgba(217, 176, 82, 0.75);
  outline-offset: 0.26em;
  box-shadow: inset 0 0 0 0.42em rgba(0, 0, 0, 0), inset 0.05em 0.05em 0 rgba(255, 240, 190, 0.35);
  opacity: 0.92;
}
.bc-label {
  position: absolute;
  left: 1.6em;
  top: 1.9em;
  width: 15em;
  height: 9.3em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.18em;
}
.bc-cross { width: 0.95em; height: 1.33em; fill: var(--gold); filter: drop-shadow(0 0.05em 0.04em rgba(0, 0, 0, 0.6)); }
.bc-title {
  font-family: var(--font-script, "Great Vibes", cursive);
  font-size: 2.85em;
  line-height: 1.05;
  padding: 0 0.15em;
  background: linear-gradient(180deg, #fff6cf 0%, #f3cf6a 38%, #d9a530 62%, #b47a18 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0.03em 0 rgba(30, 6, 4, 0.9)) drop-shadow(0 0 0.18em rgba(255, 200, 90, 0.35));
}
.bc-rule {
  width: 7.5em;
  height: 0.6em;
  background:
    linear-gradient(var(--gold), var(--gold)) center / 100% 0.08em no-repeat,
    radial-gradient(circle, var(--gold) 0 0.16em, transparent 0.17em) center / 0.6em 0.6em no-repeat;
  opacity: 0.9;
  -webkit-mask: linear-gradient(90deg, transparent, #000 25% 75%, transparent);
          mask: linear-gradient(90deg, transparent, #000 25% 75%, transparent);
}
.bc-cite {
  font-family: var(--font-body);
  font-size: 0.66em;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #e7c56f;
  text-shadow: 0 0.08em 0.08em rgba(20, 4, 2, 0.8);
}
/* dog-ear: the cover's corner curls back, showing its marbled Marian-blue endpaper + leather turn-in */
.bc-flapwrap {
  left: 1.3em;
  top: 1.3em;
  width: calc(var(--peel) * 1em);
  height: calc(var(--peel) * 1em);
  filter: drop-shadow(0.2em 0.26em 0.22em rgba(30, 10, 0, 0.5));
  pointer-events: none;
}
.bc-flap {
  position: absolute;
  inset: 0;
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
  border-bottom-right-radius: 48%;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 0.45) 52%, rgba(255, 255, 255, 0) 64%, rgba(0, 0, 0, 0.18) 85%, rgba(0, 0, 0, 0.32) 100%),
    var(--marble) 0 0 / 9em 9em,
    #2a4570;
  box-shadow: inset -0.32em -0.32em 0 #4a141a, inset -0.38em -0.38em 0 rgba(217, 176, 82, 0.8);
}
/* page under the curled corner: a few faint text lines */
.bc-pages { box-shadow: none; }

/* sit on the page's bottom-right corner; keep any "Listen live" button above the book */
@media (min-width: 641px) {
  body.page-home.wallpaper-sunset .hero-side-right { padding-bottom: calc(13.6 * clamp(12px, 2vh, 16px) + 14px); }
}

/* phone: smaller corner; counters lift a little so the book has the bottom-right corner to itself */
@media (max-width: 640px) {
  .book-corner { font-size: 10.5px; }
  body.page-home.wallpaper-sunset .hero-foot-stats { transform: translateY(-36px); }
}

/* —— 3. Opened book dialog —— */
html.rbook-open, html.rbook-open body { overflow: hidden; }
.rbook {
  --ph: min(82dvh, 660px, calc(90vw / 1.52));
  --pw: calc(var(--ph) * 0.74);
  --leather: #5c1a22;
  --gold: #d9b052;
  position: fixed;
  inset: 0;
  z-index: 300;
  overflow: hidden;
}
.rbook[hidden] { display: none; }
.rbook__backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(36, 20, 10, 0.6), rgba(8, 5, 3, 0.86));
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  cursor: pointer;
}
.rbook__stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.rbook__book {
  position: relative;
  width: calc(var(--pw) * 2);
  height: var(--ph);
  font-size: calc(var(--ph) / 40);
  perspective: 2600px;
  transform-origin: 50% 50%;
  pointer-events: auto;
  filter: drop-shadow(0 1.4em 2em rgba(0, 0, 0, 0.55));
}
.rbook__board {
  position: absolute;
  left: 50%;
  right: -0.7em;
  top: -0.7em;
  bottom: -0.7em;
  --leather: #4a1419;
  border-radius: 0 0.45em 0.45em 0;
  z-index: 0;
}
.rbook__page--verse,
.rbook__face {
  background:
    radial-gradient(130% 100% at 50% 45%, rgba(255, 252, 240, 0) 60%, rgba(150, 110, 50, 0.16) 100%),
    linear-gradient(90deg, rgba(110, 76, 30, 0.26), rgba(110, 76, 30, 0.06) 7%, rgba(110, 76, 30, 0) 14%),
    #f6eedb;
}
.rbook__page--verse {
  position: absolute;
  left: 50%;
  top: 0;
  width: 50%;
  height: 100%;
  z-index: 1;
  box-sizing: border-box;
  padding: 3.2em 3.4em 3em 3.8em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 0 0.25em 0.25em 0;
  /* page-block edges on the fore-edge */
  box-shadow: 1px 0 0 #dccaa2, 2px 0 0 #f3e9d1, 3px 0 0 #d6c398, 4px 0 0 #efe3c6, 5px 0 0 #cfba8c;
}
.rbook__leaf {
  position: absolute;
  left: 50%;
  top: 0;
  width: 50%;
  height: 100%;
  transform-origin: 0 50%;
  transform-style: preserve-3d;
}
.rbook__leaf[data-leaf="0"] { z-index: 10; }
.rbook__leaf[data-leaf="1"] { z-index: 9; }
.rbook__leaf[data-leaf="2"] { z-index: 8; }
.rbook__leaf[data-leaf="3"] { z-index: 7; }
.rbook__leaf[data-leaf="4"] { z-index: 6; }
.rbook__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border-radius: 0 0.25em 0.25em 0;
}
.rbook__face--back {
  transform: rotateY(180deg);
  border-radius: 0.25em 0 0 0.25em;
  background:
    radial-gradient(130% 100% at 50% 45%, rgba(255, 252, 240, 0) 60%, rgba(150, 110, 50, 0.16) 100%),
    linear-gradient(270deg, rgba(110, 76, 30, 0.26), rgba(110, 76, 30, 0.06) 7%, rgba(110, 76, 30, 0) 14%),
    #f6eedb;
}
.rbook__shade {
  position: absolute;
  inset: 0;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(40, 20, 5, 0.75), rgba(40, 20, 5, 0.2));
}
.rbook__face--back .rbook__shade { background: linear-gradient(270deg, rgba(40, 20, 5, 0.75), rgba(40, 20, 5, 0.2)); }
/* cover leaf is the full board size (overhangs the pages) */
.rbook__leaf--cover {
  top: -0.7em;
  width: calc(50% + 0.7em);
  height: calc(100% + 1.4em);
}
.rbook__cover-front {
  border-radius: 0 0.45em 0.45em 0;
  box-shadow: inset 0.5em 0 0.8em rgba(0, 0, 0, 0.35), inset -0.08em 0.08em 0 rgba(255, 220, 200, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
}
.rbook__cover-tool {
  position: absolute;
  inset: 1.8em 1.8em 1.8em 2.4em;
  border: 0.16em solid var(--gold);
  outline: 0.07em solid rgba(217, 176, 82, 0.75);
  outline-offset: 0.4em;
}
.rbook__cover-cross { width: 2.1em; height: 2.94em; fill: var(--gold); position: relative; }
.rbook__cover-title {
  position: relative;
  font-family: var(--font-script, "Great Vibes", cursive);
  font-size: 4.6em;
  line-height: 1.1;
  padding: 0 0.2em;
  background: linear-gradient(180deg, #fff6cf 0%, #f3cf6a 38%, #d9a530 62%, #b47a18 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.rbook__cover-back {
  border-radius: 0.45em 0 0 0.45em;
}
.rbook__cover-back::before {          /* marbled Marian-blue endpaper inside the leather turn-in */
  content: "";
  position: absolute;
  inset: 0.7em 0 0.7em 0.7em;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0) 30%),
    var(--marble) 0 0 / 14em 14em,
    #2a4570;
  box-shadow: inset -1.2em 0 1.2em rgba(0, 0, 0, 0.25);
}
.rbook__gutter { display: none; }
/* blank leaves carry faint lines of print so the flipping pages read as a real book */
.rbook__leaf:not(.rbook__leaf--cover) .rbook__face:not(.rbook__photo-page)::before {
  content: "";
  position: absolute;
  inset: 3.4em 3.2em 3.6em 3.6em;
  background: repeating-linear-gradient(180deg, rgba(70, 50, 30, 0.075) 0 0.34em, rgba(0, 0, 0, 0) 0.34em 0.98em);
  -webkit-mask: linear-gradient(90deg, #000 0 88%, transparent 100%);
          mask: linear-gradient(90deg, #000 0 88%, transparent 100%);
}
.rbook__leaf:not(.rbook__leaf--cover) .rbook__face--back:not(.rbook__photo-page)::before { inset: 3.4em 3.6em 3.6em 3.2em; }

/* Sacred Heart photo page (back of the last flipped leaf) — cover crop, uniform scale */
.rbook__photo {
  position: absolute;
  inset: 2.4em 2.6em 2.4em 2.2em;
  margin: 0;
  border: 0.14em solid #c9a34a;
  outline: 0.06em solid rgba(201, 163, 74, 0.7);
  outline-offset: 0.35em;
  overflow: hidden;
  box-shadow: 0 0.2em 0.8em rgba(60, 35, 10, 0.3);
  background: #3a2626;
}
.rbook__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
/* verse page typesetting */
.rbook__cross { width: 1.5em; height: 2.1em; fill: #b88a2c; }
.rbook__title {
  margin: 0.15em 0 0;
  font-family: var(--font-script, "Great Vibes", cursive);
  font-weight: 400;
  font-size: 4.4em;
  line-height: 1.05;
  color: var(--marian-deep, #2a4570);
  text-shadow: 0 0.02em 0 rgba(255, 255, 255, 0.6);
}
.rbook__orn {
  display: block;
  width: 11em;
  height: 1em;
  margin: 0.6em auto 1.1em;
  background:
    linear-gradient(#b88a2c, #b88a2c) left center / 42% 0.09em no-repeat,
    linear-gradient(#b88a2c, #b88a2c) right center / 42% 0.09em no-repeat,
    linear-gradient(45deg, transparent 38%, #b88a2c 38% 62%, transparent 62%) center / 0.62em 0.62em no-repeat;
}
.rbook__orn--end { margin: 1.4em auto 0; width: 6em; }
.rbook__quote { margin: 0; }
.rbook__quote p {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2.05em;
  line-height: 1.42;
  color: #3b2a1a;
}
.rbook__quote cite {
  display: block;
  margin-top: 1.1em;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 700;
  font-size: 0.86em;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #9a7224;
}
.rbook__close {
  position: absolute;
  top: max(10px, calc(50% - var(--ph) / 2 - 54px));
  right: max(10px, calc(50% - var(--pw) - 56px));
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1.5px solid rgba(217, 176, 82, 0.9);
  background: rgba(255, 250, 238, 0.96);
  color: #2a4570;
  font-size: 28px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  pointer-events: auto;
  z-index: 20;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.rbook__close:hover { background: #fff; }
.rbook__close:focus-visible { outline: 3px solid #f3cf6a; outline-offset: 2px; }
.rbook__reader { display: none; }

@media (max-width: 640px) {
  .rbook { --ph: min(56dvh, calc(92vw / 1.52)); }
  .rbook__close { top: 18px; right: 18px; }
  .rbook__reader {
    position: absolute;
    inset: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 10px;
    border: 0.5rem solid #5c1a22;
    background: #f6eedb;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), inset 0 0 0 2px #d9b052;
    opacity: 0;
    pointer-events: none;
    box-sizing: border-box;
  }
  .rbook.is-read .rbook__reader { opacity: 1; pointer-events: auto; }
  .rbook.is-read .rbook__book { visibility: hidden; }
  .rbook__reader-photo { flex: 1 1 52%; min-height: 0; margin: 0; overflow: hidden; border-bottom: 2px solid #d9b052; }
  .rbook__reader-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
  .rbook__reader-text {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 20px 18px;
    text-align: center;
    font-size: 11px;
  }
  .rbook__reader-text .rbook__title { font-size: 4em; margin-top: 0; }
  .rbook__reader-text .rbook__cross { display: block; margin: 0 auto; }
  .rbook__reader-text .rbook__orn { margin: 0.4em auto 0.8em; }
  .rbook__reader-text .rbook__quote p { font-size: 1.95em; }
}

/* ===================== ROUND 7 (Keith, Oct 10) — "My Mission" page =====================
   Mission card removed from home; its exact text (settings tagline + secondaryTagline) now lives on /mission.
   Banner: rosary + cross on the open Bible (img/wallpaper-rosary-bible.jpg, 1920×2880) — cover = uniform scale + crop only. */
.page-banner--mission { background: #3a2a1c; }
.page-banner--mission img { object-position: center 57%; }

body.page-mission .page-scroll {
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 60% 50% at 50% 40%, rgba(201, 162, 39, 0.10), transparent 70%);
}
body.page-mission .mission-main {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.4rem 0;
}
.mission-page-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 38rem;
  margin: 0 auto;
  padding: 1.7rem 2.2rem 1.5rem;
  text-align: center;
  border-radius: var(--radius, 18px);
  background:
    radial-gradient(ellipse 60% 70% at 0% 0%, rgba(201, 162, 39, 0.16), transparent 55%),
    radial-gradient(ellipse 50% 55% at 100% 100%, rgba(74, 111, 165, 0.14), transparent 50%),
    linear-gradient(145deg, #fffdf8 0%, #f8f2e6 55%, #f3ebe0 100%);
  border: 1.5px solid rgba(201, 162, 39, 0.5);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 0 22px rgba(201, 162, 39, 0.18),
    0 12px 30px rgba(42, 69, 112, 0.14);
}
.mission-page-card::before {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 39, 0.8), transparent);
}
.mission-page-card__script {
  margin: 0 0 0.3rem;
  font-family: var(--font-script, "Great Vibes", cursive);
  font-weight: 400;
  font-size: clamp(2.3rem, 4.2vw, 3.1rem);
  line-height: 1.1;
  color: var(--marian-deep);
  text-shadow: 0 1px 0 rgba(255, 252, 246, 0.8);
}
.mission-page-card__gold-line {
  width: 5.5rem;
  height: 2px;
  margin: 0 auto 1.1rem;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 39, 0.9), transparent);
  border-radius: 2px;
}
.mission-page-card__text {
  margin: 0 auto;
  max-width: 30rem;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.7vw, 1.3rem);
  line-height: 1.6;
  color: #1a2f4d;
}
.mission-page-card__join {
  margin: 1rem auto 0;
  max-width: 30rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(201, 162, 39, 0.32);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(0.98rem, 1.4vw, 1.1rem);
  line-height: 1.55;
  color: var(--text-muted);
}
.mission-page-card__join[hidden] { display: none !important; }
.mission-page-card__cross {
  display: block;
  margin: 1rem auto 0;
  fill: rgba(201, 162, 39, 0.85);
}
@media (max-width: 640px) {
  .mission-page-card { padding: 1.3rem 1.2rem 1.2rem; }
}

/* ===================== ROUND 7 — HOME: "Reflection Corner" book corner, 1.4× bigger =====================
   Same −5° tilt, still tucked into the bottom-right and running off both edges (dock clips; no scroll).
   Whole widget is em-based, so scaling font-size scales everything uniformly. */
.book-corner { font-size: clamp(15.6px, 2.6vh, 20.8px); }          /* was clamp(12px, 2vh, 16px) → ×1.3 */
.bc-label { top: 1.45em; height: 9.5em; gap: 0.1em; }
.bc-title {
  max-width: 6.2em;                   /* "Reflection" fits one line; "Corner" drops to a second line */
  text-align: center;
  font-size: 2.6em;
  line-height: 0.98;
  text-wrap: balance;
  background-size: 100% 0.98em;       /* gold gradient repeats per line instead of spanning both */
  background-repeat: repeat-y;
}
.rbook__cover-title { font-size: 3.6em; line-height: 1; text-align: center; max-width: 6em; text-wrap: balance; }
/* keep a "Listen live" button (when live) above the taller book */
@media (min-width: 641px) {
  body.page-home.wallpaper-sunset .hero-side-right { padding-bottom: calc(13.6 * clamp(15.6px, 2.6vh, 20.8px) + 14px); }
}
@media (max-width: 640px) {
  .book-corner { font-size: 14.2px; }                                  /* was 10.5px → ×1.35 */
}
/* short laptop windows: tighten the My Mission panel so card + footer fit without inner scroll */
@media (min-width: 641px) and (max-height: 720px) {
  body.page-mission .mission-main { padding: 0.55rem 0; }
  .mission-page-card { padding: 1.05rem 2.2rem 0.95rem; }
  .mission-page-card__gold-line { margin-bottom: 0.75rem; }
  .mission-page-card__join { margin-top: 0.7rem; padding-top: 0.65rem; }
  .mission-page-card__cross { margin-top: 0.6rem; }
}

/* ===================== ROUND 8 (Keith, Oct 10) — HOME: "Upcoming Prayer Sessions" strip =====================
   Sits just under the menu pill + OFFLINE badge, centred, a touch narrower than them (width set by JS: --ups-w).
   Height = 1.5625 × the menu pill (round 9: was 1.25×; pill = 8px + 1.42 × link font).  Same leather, double gold rule, gold script,
   gold cross, cream page edges and Marian-blue ribbon as the Reflection Corner book — no opening animation.
   Pure CSS (no images), so nothing can stretch. */
body.page-home.has-jesus-wallpaper {
  --home-pill-h: calc(8px + 1.42 * clamp(29px, calc(var(--bar-h) * 0.135), 32px));
  --ups-h: calc(1.5625 * var(--home-pill-h));   /* round 9: was 1.25×pill (~66px) → ~1.25× again (~82px) */
}
body.page-home .site-header .ups {
  --leather: #5c1a22;
  --gold: #d9b052;
  position: relative;
  box-sizing: border-box;
  width: var(--ups-w, min(1040px, calc(100vw - 24px)));
  max-width: calc(100vw - 24px);
  height: var(--ups-h, 80px);
  margin: 9px auto 0;
  font-size: calc(var(--ups-h, 80px) / 5.2);      /* ≈15.4px at 80px tall; everything inside is em-based */
  border-radius: 0.5em;
  pointer-events: auto;
  color: #f3e3b5;
  background-color: var(--leather);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(70% 140% at 12% 0%, rgba(255, 200, 170, 0.20), rgba(255, 200, 170, 0) 60%),
    radial-gradient(60% 140% at 92% 100%, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0) 70%);
  box-shadow:
    inset 0.1em 0.1em 0 rgba(255, 220, 200, 0.18),
    inset 0 -0.3em 0.8em rgba(0, 0, 0, 0.3),
    0 0.35em 1em rgba(0, 0, 0, 0.5),
    0 0 1.2em rgba(255, 190, 80, 0.16);
}
/* double gold-tooled frame */
body.page-home .site-header .ups::before,
body.page-home .site-header .ups::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 3;
  border-radius: 0.3em;
}
body.page-home .site-header .ups::before { inset: 0.32em; border: 0.11em solid var(--gold); opacity: 0.92; box-shadow: inset 0.05em 0.05em 0 rgba(255, 240, 190, 0.3); }
body.page-home .site-header .ups::after  { inset: 0.6em; border: 0.06em solid rgba(217, 176, 82, 0.7); border-radius: 0.2em; }
/* cream page edges peeking out under the leather, like the book's page block */
.ups-edge {
  position: absolute;
  left: 0.9em; right: 0.9em;
  bottom: -0.42em;
  height: 0.5em;
  z-index: -1;
  border-radius: 0 0 0.25em 0.25em;
  background:
    linear-gradient(180deg, rgba(120, 80, 30, 0.25), rgba(255, 255, 255, 0.2)),
    repeating-linear-gradient(180deg, #f8f0dc 0 1.4px, #d3c093 1.4px 2.3px);
  box-shadow: 0 0.15em 0.35em rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
/* Marian-blue silk ribbon hanging from the bottom edge, under the label */
.ups-ribbon {
  position: absolute;
  left: 3.1em;
  bottom: -2.3em;
  width: 0.85em;
  height: 3em;
  z-index: -2;
  background: linear-gradient(90deg, #22385e, #4a6fa5 45%, #6d8fc2 55%, #2a4570);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 0.45em), 0 100%);
  box-shadow: 0 0 0.3em rgba(0, 0, 0, 0.4);
  transform: rotate(-4deg);
  pointer-events: none;
}
.ups-inner {
  position: absolute;
  inset: 0.6em;
  display: flex;
  align-items: stretch;
  border-radius: 0.2em;
}
.ups-label {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.45em;
  padding: 0 1em 0 0.85em;
  text-decoration: none;
  border-right: 0.08em solid rgba(217, 176, 82, 0.75);
}
.ups-cross { width: 0.95em; height: 1.33em; flex: 0 0 auto; fill: var(--gold); filter: drop-shadow(0 0.05em 0.04em rgba(0, 0, 0, 0.6)); }
.ups-label-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-script, "Great Vibes", cursive);
  font-size: 1.78em;
  line-height: 0.88;
  white-space: nowrap;
}
.ups-label-text > span {
  padding: 0 0.12em;
  background: linear-gradient(180deg, #fff6cf 0%, #f3cf6a 38%, #d9a530 62%, #b47a18 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0.03em 0 rgba(30, 6, 4, 0.9)) drop-shadow(0 0 0.18em rgba(255, 200, 90, 0.35));
}
.ups-track {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.ups-chip,
.ups-soft { min-width: 0; display: flex; }
.ups-chip + .ups-chip,
.ups-chip + .ups-soft { border-left: 0.06em solid rgba(217, 176, 82, 0.55); }
.ups-soft { grid-column: span var(--span, 7); }
.ups-chip a,
.ups-soft a,
.ups-soft > span {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.08em;
  padding: 0 0.45em;
  color: inherit;
  text-decoration: none;
  border-radius: 0.2em;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.ups-chip a:hover,
.ups-chip a:focus-visible,
.ups-soft a:hover,
.ups-soft a:focus-visible {
  outline: none;
  background-color: rgba(255, 214, 120, 0.12);
  box-shadow: inset 0 0 0 0.07em rgba(255, 220, 140, 0.55), inset 0 0 0.9em rgba(255, 200, 90, 0.15);
}
.ups-date {
  font-family: var(--font-body);
  font-size: 0.82em;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.1;
  color: #e7c56f;
  white-space: nowrap;
  text-shadow: 0 0.08em 0.08em rgba(20, 4, 2, 0.8);
}
.ups-date b { font-weight: 800; color: #f6dc92; }
.ups-time {
  font-family: var(--font-body);
  font-size: 1.22em;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: #fff4d6;
  white-space: nowrap;
  text-shadow: 0 0.08em 0.1em rgba(20, 4, 2, 0.85);
}
.ups-title {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.86em;
  line-height: 1.1;
  color: rgba(243, 227, 181, 0.85);
}
/* Today / Tonight: soft gold glow + gilded tag */
.ups-chip.is-today a {
  background: radial-gradient(90% 120% at 50% 50%, rgba(255, 210, 110, 0.22), rgba(255, 210, 110, 0.04) 70%);
  box-shadow: inset 0 0 0 0.08em rgba(255, 220, 140, 0.75);
}
.ups-chip.is-today .ups-date b {
  padding: 0 0.4em;
  border-radius: 0.6em;
  color: #3b0f14;
  background: linear-gradient(180deg, #fff2c0, #e2b54e);
  text-shadow: none;
}
/* "More coming soon" — soft, script, faint dotted gold rule either side */
.ups-soft a,
.ups-soft > span {
  flex-direction: row;
  gap: 0.7em;
  font-family: var(--font-script, "Great Vibes", cursive);
  font-size: 1.45em;
  color: rgba(243, 222, 160, 0.78);
  white-space: nowrap;
}
.ups-soft a::before,
.ups-soft a::after {
  content: "";
  flex: 0 1 3.2em;
  min-width: 0.8em;
  height: 0.5em;
  background:
    radial-gradient(circle, rgba(217, 176, 82, 0.8) 0 0.09em, transparent 0.1em) center / 0.5em 0.5em repeat-x;
  opacity: 0.8;
}
.ups-soft a:hover { color: #f6dc92; }

/* phone / narrow: one row that scrolls sideways INSIDE the strip (never the page) */
@media (max-width: 640px) {
  body.page-home.has-jesus-wallpaper { --ups-h: 80px; }   /* round 9: was 64 */
  body.page-home .site-header .ups { width: calc(100vw - 24px); margin-top: 8px; }
  .ups-inner {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .ups-inner::-webkit-scrollbar { display: none; }
  .ups-label { padding: 0 0.7em 0 0.5em; }
  .ups-track { display: flex; flex: 0 0 auto; }
  .ups-chip { flex: 0 0 8.6em; }
  .ups-soft { flex: 0 0 auto; }
  .ups-soft a, .ups-soft > span { padding: 0 0.8em; }
  /* hero content starts below the menu + strip */
  body.page-home.has-jesus-wallpaper .hero-stage { padding-top: 230px; }   /* round 9: was 206; clears taller strip + ribbon */
  body.page-home.wallpaper-sunset .hero-foot-stats { transform: translateY(-54px); }   /* round 9: was -46; keep counters clear of the book's ribbon */
}
@media (prefers-reduced-motion: reduce) {
  .ups-chip a, .ups-soft a { transition: none; }
}

/* ===================== ROUND 9 (Keith, Oct 10) — HOME: ups strip ~1.25× taller =====================
   Follow-up to round 8: "make the schedule about a quarter more higher".
   --ups-h bumped 1.25 → 1.5625 × pill (~66→~82px @1280×800; phone 64→80). Contents are em-based
   off font-size = ups-h/5.2, so label / chips / cross / padding / gold frame all scale ~1.25× with it.
   Width, centering, leather/gold/ribbon look unchanged. Phone hero padding + stats lift nudged so the
   taller strip + ribbon never collide with the title or counters. No scroll, no stretch. */

/* ===================== ROUND 10 (Keith, Oct 10) — HOME: ups chips show a prayer INTENTION =====================
   "add in up to 7 dates just for looks right now including some prayer intentions in each date".
   The session title line is replaced by the slot's `intention` (data/schedule.json). Wraps to two short
   lines instead of ellipsis; strip height unchanged from round 9. */
.ups-chip a { gap: 0; padding: 0 0.3em; }
.ups-chip .ups-date { font-size: 0.76em; line-height: 1.05; }
.ups-chip .ups-time { font-size: 1.12em; line-height: 1.02; margin-bottom: 0.08em; }
.ups-intention {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  max-width: 100%;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 0.74em;
  line-height: 1.08;
  letter-spacing: 0.005em;
  color: #f1d58e;
  text-wrap: balance;
  text-shadow: 0 0.06em 0.08em rgba(20, 4, 2, 0.85);
}
.ups-heart {
  display: inline-block;
  width: 0.72em;
  height: 0.63em;
  margin: 0 0.25em 0 0;
  vertical-align: 0.02em;
  fill: #e2b54e;
  filter: drop-shadow(0 0.04em 0.03em rgba(0, 0, 0, 0.6));
}
.ups-chip.no-intention .ups-intention { color: rgba(243, 227, 181, 0.7); font-weight: 400; }
@media (max-width: 640px) {
  .ups-chip { flex: 0 0 8.2em; }
}
/* round 10: schedule cards show the session's prayer intention under the title */
.schedule-item p.schedule-intention { margin: 0.1em 0 0.3em; font-family: var(--font-display); font-style: italic; font-weight: 600; color: #8a5a12; }

/* ===================== ROUND 11 (Keith, Oct 10) — menu centring + Reflection Corner title clip =====================
   1) The menu PILL itself is centred on the page (pill centre = viewport centre). The OFFLINE / On air badge is
      taken out of flow and hangs just to the right of the pill, so it no longer pulls the pill left.
      Below 1260px there isn't room for a symmetric layout, so pill + badge centre together as before;
      ≤720px (phone) keeps the badge stacked under the pill. */
@media (min-width: 1260px) {
  /* the header row was a 920px .wrap, narrower than the enlarged pill (~919–940px + padding), so the pill
     overflowed its box; give the row the full width so the pill's own box is what gets centred */
  .site-header .nav.wrap { width: 100%; box-sizing: border-box; }
  .site-header .nav-end { position: relative; gap: 0; flex: 0 0 auto; }
  .site-header .nav-status {
    position: absolute;
    left: calc(100% + 0.7rem);
    top: 50%;
    right: auto;
    width: max-content;          /* else shrink-to-fit width collapses to 0 (containing block = pill) */
    transform: translateY(-50%);
    white-space: nowrap;
  }
}
/* 2) Script link text optically centred in each button (and in the blue active/hover highlight).
      Great Vibes' line box puts the glyphs ~0.145em high (ascent 0.85em vs descent 0.41em with a 1.1 line-height,
      plus 0.14em/0.18em top/bottom padding) — move 0.145em of the bottom padding to the top. Same button height.
      Horizontal: screenshot pixel analysis shows the script ink sits ~0.4–1.2px right of each button's centre
      (entry strokes are hairlines, exits are heavy), so nudge it left by --ink-dx, taken from padding-left and
      given to padding-right — button width unchanged. */
.site-header .nav-links a {
  --ink-dx: -0.026em;
  padding: 0.285em calc(0.58em - var(--ink-dx, 0em)) 0.035em calc(0.58em + var(--ink-dx, 0em));
}
@media (max-width: 720px) {
  .site-header .nav-links a {
    padding: 0.2em calc(0.45em - var(--ink-dx, 0em)) 0 calc(0.45em + var(--ink-dx, 0em));
  }
}
/* 3) Reflection Corner title (closed book corner + opened cover): the gold is painted with background-clip:text,
      which only paints inside the element's own box. With line-height 0.98–1 the tall script caps/ascenders
      (R, f, l, C reach ~0.07–0.09em above each line box) poked out of that box and were cut flat; on the corner,
      the per-line gradient tile also started at the line top, so "Corner"'s cap tops picked up the dark bottom of
      the "Reflection" tile. Fix: extra paint room above/below (padding, cancelled by negative margin so nothing
      moves), and the per-line gold tile starts 0.12em above each line with its stops shifted by the same amount,
      so the visible gold looks exactly as before but the tips are now included. */
.bc-title {
  padding: 0.22em 0.15em 0.18em;
  margin: -0.22em 0 -0.18em;
  background-image: linear-gradient(180deg, #fff6cf 0%, #fff6cf 12.2%, #f3cf6a 50.2%, #d9a530 74.2%, #c08820 100%);   /* = old #d9a530→#b47a18 ramp at 88% */
  background-size: 100% 0.98em;
  background-repeat: repeat-y;
  background-position: 0 calc(0.22em - 0.12em);
}
.rbook__cover-title {
  padding: 0.24em 0.2em 0.2em;
  margin: -0.24em 0 -0.2em;
}

/* ===================== ROUND 13 (Keith, Oct 10) — "Upcoming / Prayer Sessions" label clip =====================
   Same cause as the Reflection Corner title (round 11): each line is its own <span> painted with
   background-clip:text, which only paints inside that span's own box. With line-height 0.88 the box is only
   ~0.66em tall above the baseline, but Great Vibes' caps/ascenders (U, p, P, S, swashes) reach ~0.8em+, so their
   tops were cut flat and the gradient ended mid-letter (the "banded" look).
   Fix: 0.26em/0.24em of paint room above/below each line, cancelled by equal negative margins so the line
   spacing and strip layout are unchanged; the gradient stops are re-mapped onto the taller box so the gold ramp
   sits exactly where it did on the original 0.88em line (pale top held through the ascender zone, deep amber
   held through descenders). No ancestor (.ups, .ups-inner, .ups-label) has overflow:hidden. */
.ups-label-text > span {
  padding: 0.26em 0.14em 0.24em;
  margin: -0.26em -0.02em -0.24em;
  background-image: linear-gradient(180deg, #fff6cf 0%, #fff6cf 18.8%, #f3cf6a 43.1%, #d9a530 58.4%, #b47a18 82.6%, #b47a18 100%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* ===================== ROUND 14: member sign-in / request access ===================== */
.login-card--members { width: min(440px, 100%); padding: 1.6rem 1.85rem 1.2rem; }
.login-card--members .login-rosary { display: block; margin: 0 auto 0.35rem; height: 30px; width: auto; }
.login-card--members h1 { margin-bottom: 0.25rem; }
.login-card--members .sub { margin-bottom: 1rem; text-align: center; font-size: 0.92rem; }
.login-card--members .form-grid { gap: 0.75rem; }
.login-card--members input { padding: 0.62rem 0.9rem; }
.login-card--members label { margin-bottom: 0.3rem; }
.label-optional { font-weight: 400; text-transform: none; letter-spacing: 0; }
.login-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem;
  padding: 0.25rem; margin: 0 0 1rem;
  background: #f4ecd9; border: 1px solid var(--border); border-radius: 999px;
}
.login-tabs button {
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-display); font-size: 1.12rem; font-weight: 600;
  color: var(--marian-deep); padding: 0.42rem 0.6rem; border-radius: 999px;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.login-tabs button:hover { color: var(--heading); }
.login-tabs button[aria-selected="true"] {
  background: #fffdf8; color: var(--heading);
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 2px 8px rgba(154, 122, 26, 0.18);
  outline: 1px solid rgba(201, 162, 39, 0.55);
}
.login-tabs button:focus-visible { outline: 2px solid var(--marian); outline-offset: 2px; }
.login-card[data-mode="host"] .login-tabs { opacity: 0.55; }
.login-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.hp-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.login-card .btn { margin-top: 0.2rem; }
.login-host-link { margin: 0.85rem 0 0; text-align: center; }
.link-button {
  background: none; border: 0; padding: 0.15rem 0.25rem; cursor: pointer;
  font: inherit; font-size: 0.8rem; color: var(--text-muted);
  text-decoration: underline; text-decoration-color: rgba(90, 102, 120, 0.35); text-underline-offset: 3px;
}
.link-button:hover { color: var(--marian-deep); }
.status-line.pending { color: var(--marian-deep); background: var(--marian-soft); border-radius: 10px; padding: 0.5rem 0.7rem; margin-top: 0.2rem; }
.login-card .status-line { margin-top: 0; text-align: center; }
.login-thanks { text-align: center; padding: 1.2rem 0.5rem 0.4rem; }
.login-thanks img { display: block; margin: 0 auto 0.7rem; }
.login-thanks p { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.35; color: var(--heading); margin: 0 0 0.9rem; }
@media (max-height: 740px) {
  .login-card--members { padding: 1rem 1.6rem 0.8rem; }
  .login-card--members .login-rosary { display: none; }
  .login-card--members .sub { font-size: 0.86rem; margin-bottom: 0.7rem; }
  .login-card--members .form-grid { gap: 0.55rem; }
  .login-card--members input { padding: 0.5rem 0.85rem; }
  .login-tabs { margin-bottom: 0.7rem; }
  .login-card--members[data-mode="request"] .sub { display: none; }
}
@media (max-width: 420px) {
  .login-page { padding: 0.75rem; }
  .login-card--members { padding: 1.1rem 1.1rem 0.8rem; }
  .login-card--members .sub { font-size: 0.86rem; }
}

/* Admin: members */
.members-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.35em; height: 1.35em; padding: 0 0.38em; margin-left: 0.3em;
  border-radius: 999px; background: #b8452f; color: #fff;
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; line-height: 1;
  vertical-align: middle; box-shadow: 0 1px 4px rgba(120, 30, 20, 0.35);
}
.members-badge[hidden] { display: none; }
.members-alert {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  margin: 0 auto 1rem; padding: 0.6rem 1rem; max-width: 40rem;
  background: #fff7e2; border: 1px solid rgba(201, 162, 39, 0.5); border-radius: 12px;
  color: var(--heading); font-size: 0.95rem;
}
.members-alert a { font-weight: 600; }
.member-group { margin-top: 1rem; }
.member-group h3 {
  font-family: var(--font-display); color: var(--heading); font-size: 1.15rem; margin: 0 0 0.35rem;
  display: flex; align-items: center; gap: 0.4rem;
}
.member-row {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  border-bottom: 1px solid var(--border); padding: 0.65rem 0;
}
.member-row:last-child { border-bottom: 0; }
.member-row .m-name { font-weight: 600; color: var(--heading); }
.member-row .m-email { color: var(--marian-deep); font-size: 0.92rem; word-break: break-all; }
.member-row .m-note { font-style: italic; color: var(--text); font-size: 0.92rem; margin-top: 0.15rem; }
.member-row .m-meta { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.15rem; }
.member-row .row-actions { flex-shrink: 0; margin-top: 0; }
.member-row .btn { padding: 0.45rem 0.9rem; }
.member-past { margin-top: 0.75rem; }
.member-past summary { cursor: pointer; color: var(--text-muted); font-size: 0.88rem; }
.toggle-row { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.75rem 0.9rem; background: #faf5e8; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 0.5rem; }
.toggle-row input { width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; accent-color: var(--accent-deep); flex-shrink: 0; }
.toggle-row label { text-transform: none; letter-spacing: 0; font-size: 0.98rem; color: var(--heading); margin: 0; cursor: pointer; }

/* Subtle member greeting */
.member-greet {
  position: fixed; top: 0.75rem; left: 0.9rem; z-index: 60;
  font-family: var(--font-script, "Great Vibes", cursive);
  font-size: 1.15rem; line-height: 1; color: var(--marian-deep); white-space: nowrap;
  padding: 0.2rem 0.6rem; border-radius: 999px; background: rgba(255, 253, 248, 0.82);
  border: 1px solid rgba(201, 162, 39, 0.35); pointer-events: none;
}
@media (max-width: 1259px) { .member-greet { display: none; } }

/* ===================== ROUND 15: announcements (bell + panel + home card) + Admin Broadcasts ===================== */
.site-header .nav-links .nav-bell {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  align-self: center;
  width: 1.28em; height: 1.28em;
  margin-left: 0.12rem;
  font-size: clamp(29px, calc(var(--bar-h) * 0.135), 32px);  /* same em as the menu links */
  border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: #1f2f4c;
  border-left: 1px solid transparent;
  transition: background 0.2s, color 0.2s;
}
.site-header .nav-links .nav-bell::before {   /* hairline gold divider from the links */
  content: ""; position: absolute; left: -0.12rem; top: 22%; bottom: 22%;
  width: 1px; background: rgba(201, 162, 39, 0.55);
}
.site-header .nav-links .nav-bell svg { width: 0.66em; height: 0.66em; display: block; }
.site-header .nav-links .nav-bell:hover,
.site-header .nav-links .nav-bell[aria-expanded="true"] { background: #2a4570; color: #fffdf8; }
.site-header .nav-links .nav-bell:focus-visible { outline: 2px solid var(--marian); outline-offset: 2px; }
.site-header .nav-links .nav-bell.has-unread svg { animation: annRing 2.6s ease-in-out 1s 2; transform-origin: 50% 12%; }
.nav-bell-dot {
  position: absolute; top: 0.2em; right: 0.2em;
  width: 0.36em; height: 0.36em; border-radius: 50%;
  background: #c0392b; border: 2px solid #fffdf8;
  box-shadow: 0 0 0 1px rgba(192, 57, 43, 0.35), 0 0 6px rgba(192, 57, 43, 0.55);
}
.nav-bell-dot[hidden] { display: none; }
@keyframes annRing {
  0%, 60%, 100% { transform: rotate(0); }
  10% { transform: rotate(14deg); } 20% { transform: rotate(-12deg); }
  30% { transform: rotate(9deg); } 40% { transform: rotate(-6deg); } 50% { transform: rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) { .site-header .nav-links .nav-bell.has-unread svg { animation: none; } }

/* Panel */
.ann-panel {
  position: fixed; z-index: 120;
  display: flex; flex-direction: column;
  background: #fffdf8;
  border: 1px solid rgba(201, 162, 39, 0.65);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(30, 20, 10, 0.35), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
  color: var(--text, #2b2a28);
  overflow: hidden;
}
.ann-panel[hidden] { display: none; }
.ann-panel::before {   /* small nub pointing at the bell */
  content: ""; position: absolute; top: -7px; left: calc(var(--nub-x, 50%) - 7px);
  width: 12px; height: 12px; background: #fffdf8; transform: rotate(45deg);
  border-left: 1px solid rgba(201, 162, 39, 0.65); border-top: 1px solid rgba(201, 162, 39, 0.65);
}
.ann-panel__head {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.7rem 0.8rem 0.55rem 1rem;
  border-bottom: 1px solid rgba(201, 162, 39, 0.35);
  background: linear-gradient(180deg, #fbf4e2, #fffdf8);
}
.ann-panel__icon { color: #b8942a; display: inline-flex; }
.ann-panel__title {
  flex: 1; margin: 0;
  font-family: "Great Vibes", var(--font-script, cursive); font-weight: 400;
  font-size: 1.85rem; line-height: 1.15; color: #9a7a1a;
  padding-top: 0.1em;
}
.ann-x {
  flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%;
  border: 1px solid rgba(201, 162, 39, 0.45); background: #fffdf8; color: var(--heading);
  font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.ann-x:hover { background: #2a4570; color: #fffdf8; }
.ann-x:focus-visible { outline: 2px solid var(--marian); outline-offset: 2px; }
.ann-panel__list { overflow-y: auto; overscroll-behavior: contain; padding: 0.2rem 1rem; flex: 1 1 auto; min-height: 0; }
.ann-item { padding: 0.75rem 0; border-bottom: 1px solid var(--border); }
.ann-item:last-child { border-bottom: 0; }
.ann-item__meta {
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #9a7a1a; display: flex; gap: 0.5rem; align-items: center;
}
.ann-pin { background: var(--marian-soft); color: var(--marian-deep); border-radius: 999px; padding: 0.05rem 0.5rem; letter-spacing: 0.04em; }
.ann-item__title { margin: 0.2rem 0 0.15rem; font-family: var(--font-display); font-size: 1.22rem; line-height: 1.25; color: var(--heading); }
.ann-item__body { margin: 0.15rem 0 0; white-space: pre-line; overflow-wrap: anywhere; font-size: 0.97rem; line-height: 1.5; }
.ann-item__body a, .ann-card__body a { color: var(--marian-deep); text-decoration: underline; overflow-wrap: anywhere; }
.ann-empty { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1.2rem 0; margin: 0; color: var(--text-muted); font-family: var(--font-display); font-size: 1.1rem; text-align: center; }
.ann-panel__foot { border-top: 1px solid rgba(201, 162, 39, 0.35); padding: 0.65rem 1rem 0.75rem; background: #faf5e8; }
.ann-pref { display: flex; align-items: center; gap: 0.55rem; cursor: pointer; font-weight: 600; color: var(--heading); text-transform: none; letter-spacing: 0; font-size: 0.98rem; margin: 0; }
.ann-pref input { width: 1.1rem; height: 1.1rem; accent-color: var(--marian-deep); margin: 0; }
.ann-hint { margin: 0.25rem 0 0; font-size: 0.8rem; color: var(--text-muted); }
.ann-admin-link { font-weight: 600; font-size: 0.92rem; }

/* Home card: slim cream/gold card tucked under the sessions strip (left), never over the title */
.ann-card {
  position: fixed; z-index: 45;   /* above the header layer, so the strip's ribbon tucks behind the card */
  display: flex; align-items: flex-start; gap: 0.65rem;
  box-sizing: border-box;
  padding: 0.6rem 0.55rem 0.6rem 0.75rem;
  background: rgba(255, 253, 248, 0.96);
  border: 1px solid rgba(201, 162, 39, 0.75);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38), 0 0 0 3px rgba(255, 236, 170, 0.18);
  color: var(--text, #2b2a28);
  animation: annIn 0.5s ease-out both;
}
.ann-card::before {   /* thin gold tooling line, like the strip */
  content: ""; position: absolute; inset: 3px; border-radius: 11px;
  border: 1px solid rgba(201, 162, 39, 0.3); pointer-events: none;
}
@keyframes annIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.ann-card__icon {
  flex: 0 0 auto; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #fff6cf, #e8c25a 70%, #b8892a);
  color: #5a3f0a; box-shadow: 0 2px 6px rgba(120, 80, 10, 0.35);
  margin-top: 0.1rem;
}
.ann-card__icon svg { width: 1.15rem; height: 1.15rem; }
.ann-card__main { flex: 1 1 auto; min-width: 0; }
.ann-card__meta { font-family: var(--font-body); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #9a7a1a; line-height: 1.2; }
.ann-card__title { font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; line-height: 1.2; color: var(--heading); margin-top: 0.08rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ann-card__body {
  margin: 0.1rem 0 0; font-size: 0.86rem; line-height: 1.35;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  overflow-wrap: anywhere;
}
.ann-card__body.no-title { -webkit-line-clamp: 3; }
.ann-card__more {
  border: 0; background: none; padding: 0; margin-top: 0.12rem; cursor: pointer;
  font: 600 0.8rem var(--font-body); color: var(--marian-deep); text-decoration: underline; text-underline-offset: 2px;
}
.ann-card__x { width: 1.65rem; height: 1.65rem; font-size: 1.05rem; }
@media (max-height: 700px) and (min-width: 721px) {
  .ann-card { padding-top: 0.45rem; padding-bottom: 0.45rem; }
  .ann-card__body, .ann-card__body.no-title { -webkit-line-clamp: 1; }
}
@media (max-width: 720px) {
  .site-header .nav-links .nav-bell { font-size: 22px; margin-left: 0.05rem; }
  .ann-panel__title { font-size: 1.6rem; }
}

/* Admin: Broadcasts */
.bcast-grid { display: grid; grid-template-columns: 1fr 12rem; gap: 0.75rem; }
@media (max-width: 640px) { .bcast-grid { grid-template-columns: 1fr; } }
.bcast-count { font-size: 0.78rem; color: var(--text-muted); text-align: right; margin-top: 0.2rem; }
.bcast-email-row.is-off { opacity: 0.75; }
.bcast-email-row.is-off label { cursor: not-allowed; }
.bcast-item { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; border-bottom: 1px solid var(--border); padding: 0.7rem 0; }
.bcast-item:last-child { border-bottom: 0; }
.bcast-item .bcast-title { font-weight: 600; color: var(--heading); }
.bcast-item .bcast-body { white-space: pre-line; overflow-wrap: anywhere; font-size: 0.93rem; margin-top: 0.15rem; }
.bcast-item .bcast-meta { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.2rem; }
.bcast-tag { display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; border-radius: 999px; padding: 0.05rem 0.5rem; margin-left: 0.35rem; vertical-align: middle; }
.bcast-tag--off { background: #eee6d3; color: #6b5d3d; }
.bcast-tag--pin { background: var(--marian-soft); color: var(--marian-deep); }
.bcast-tag--mail { background: #e6f0e1; color: #2f5a2a; }
.bcast-log { font-size: 0.86rem; }
.bcast-log div { padding: 0.3rem 0; border-bottom: 1px dashed var(--border); }
.bcast-log div:last-child { border-bottom: 0; }
.bcast-err { color: #9b2c1f; }
.bcast-toggles { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); gap: 0.75rem; }
@media (max-width: 640px) { .bcast-toggles { grid-template-columns: 1fr; } }
#bc-form { gap: 0.8rem; }
/* Mid widths (721–1259px): the pill + bell + badge share one centred row; scale the menu script with the
   viewport so the extra bell never causes sideways scrolling (unchanged at ≥1260px and on phones). */
@media (min-width: 721px) and (max-width: 1259px) {
  .site-header .nav-links a,
  .site-header .nav-links .nav-bell {
    font-size: max(20px, min(clamp(29px, calc(var(--bar-h) * 0.135), 32px), 2.62vw));
  }
}

/* ===================== ROUND 16 — host-only "Admin" menu link =====================
   app.js adds <a href="/admin"> (before "Log out") only for hosts and marks the pill .has-admin.
   One extra link makes the pill ~110px wider, so on desktop the script is scaled down a touch (all links
   equally, so they stay identical) to keep the pill centred with the OFFLINE badge on-screen — no sideways
   scrolling at 1280px. ≥1440px is effectively unchanged. Visitors/members never get the class. */
@media (min-width: 1260px) {
  .site-header .nav-links.has-admin a,
  .site-header .nav-links.has-admin .nav-bell {
    font-size: min(clamp(29px, calc(var(--bar-h) * 0.135), 32px), 2.2vw);
  }
}
@media (min-width: 721px) and (max-width: 1259px) {
  .site-header .nav-links.has-admin a,
  .site-header .nav-links.has-admin .nav-bell {
    font-size: max(18px, min(clamp(29px, calc(var(--bar-h) * 0.135), 32px), 2.3vw));
  }
}

/* ===================== ROUND 17 (Keith, Oct 11) — HOME only =====================
   Wallpaper back to Keith's turquoise rosary on Psalm 23 (img/wallpaper-psalm23b*.jpg; tall = pure crop, no resample).
   Same round 5-16 home layout + gold title (body keeps .wallpaper-sunset); .home-bg-psalm23 swaps only the photo
   treatment. cover = uniform scale + crop, never stretched; beads stay round. ?wallpaper=sunset restores the sunset. */
body.page-home.home-bg-psalm23 { background-color: #efe9dc; }
body.page-home.home-bg-psalm23 .hero-wallpaper { background: #efe9dc; }
body.page-home.home-bg-psalm23 .hero-wallpaper img {
  object-fit: cover;
  object-position: 50% 0%;   /* keep crucifix/medal at top, "The Divine Shepherd" + big "23" */
}
@media (max-aspect-ratio: 4 / 5) {
  body.page-home.home-bg-psalm23 .hero-wallpaper img { object-position: 22% 0%; }   /* beads + medal at left, big "23" centre */
}
/* light page: gentle edge shade only (keeps the cards + pill crisp, page stays bright) */
body.page-home.home-bg-psalm23 .hero-stage::before {
  background:
    linear-gradient(180deg, rgba(24, 30, 40, 0.20) 0%, rgba(24, 30, 40, 0.05) 16%, transparent 40%, transparent 78%, rgba(24, 30, 40, 0.18) 100%);
}
/* gold title stays vivid on cream paper: deeper dark backing just behind the script + firmer dark rim */
body.page-home.home-bg-psalm23 .hero-pray-title::before {
  background: radial-gradient(closest-side, rgba(22, 12, 4, 0.72) 0%, rgba(22, 12, 4, 0.48) 48%, rgba(22, 12, 4, 0.18) 78%, rgba(22, 12, 4, 0) 100%);
}
body.page-home.home-bg-psalm23 .hero-title-script {
  filter:
    drop-shadow(0 0 1px rgba(56, 22, 2, 1))
    drop-shadow(0 0 2px rgba(70, 30, 4, 0.95))
    drop-shadow(0 0 6px rgba(255, 214, 90, 0.85))
    drop-shadow(0 0 16px rgba(255, 176, 30, 0.6))
    drop-shadow(0 0 30px rgba(255, 150, 10, 0.35))
    drop-shadow(0 3px 6px rgba(10, 6, 2, 0.75));
}

/* ===================== ROUND 18 (Keith, Oct 11) — HOME only =====================
   Max zoom-out: the full uncropped 2048×1536 photo on every size, object-fit: cover with no extra scale
   (no transform, no oversized box) — it exactly matches the viewport on one axis.
   Phones use the full photo too (same cover scale as the old tall crop, but free to pan): beads + medal left, "23" centre. */
body.page-home.home-bg-psalm23 .hero-wallpaper,
body.page-home.home-bg-psalm23 .hero-wallpaper picture,
body.page-home.home-bg-psalm23 .hero-wallpaper img { transform: none; inset: 0; }
body.page-home.home-bg-psalm23 .hero-wallpaper img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
@media (max-aspect-ratio: 4 / 5) {
  body.page-home.home-bg-psalm23 .hero-wallpaper img { object-position: 32% 0%; }
}
/* never scroll sideways; on the viewport-locked layout (≥641px) never scroll vertically either */
html:has(body.page-home) { overflow-x: hidden; }          /* applies to the viewport */
body.page-home { overflow-x: clip; max-width: 100%; }        /* clip = no inner scroll box */
@media (min-width: 641px) {
  html:has(body.page-home) { overflow-y: hidden; }
}

/* ===================== ROUND 19 (Keith, Oct 11) — HOME only =====================
   Wallpaper = turquoise rosary + crucifix on the brown leather "Holy Bible" cover
   (img/wallpaper-bible-cover.jpg, 2560×1440 = Keith's 4032×2268 photo uniformly downscaled, not cropped).
   Plain object-fit: cover, no extra scale/transform = max zoom-out while full-bleed. Psalm 23 kept on disk (?wallpaper=psalm23). */
body.page-home.home-bg-bible-cover { background-color: #6b4a2e; }
body.page-home.home-bg-bible-cover .hero-wallpaper { background: #6b4a2e; }
body.page-home.home-bg-bible-cover .hero-wallpaper,
body.page-home.home-bg-bible-cover .hero-wallpaper picture,
body.page-home.home-bg-bible-cover .hero-wallpaper img { transform: none; inset: 0; }
body.page-home.home-bg-bible-cover .hero-wallpaper img {
  width: 100%; height: 100%; max-width: none;
  object-fit: cover;
  object-position: 50% 45%;   /* "Holy Bible" + crucifix sit near mid-height; beads run to the top edge */
}
@media (max-aspect-ratio: 4 / 5) {
  /* portrait phones: crucifix + beads (the gold lettering sits left of this window) */
  body.page-home.home-bg-bible-cover .hero-wallpaper img { object-position: 75% 50%; }
}
/* gentle edge shade only: menu + strip sit on the bright white cloth at the top */
body.page-home.home-bg-bible-cover .hero-stage::before {
  background:
    linear-gradient(180deg, rgba(20, 12, 6, 0.22) 0%, rgba(20, 12, 6, 0.06) 16%, transparent 40%, transparent 80%, rgba(20, 12, 6, 0.22) 100%);
}
/* gold title on brown leather: deeper dark backing + dark rim so the gold stays vivid, same gold + glow */
body.page-home.home-bg-bible-cover .hero-pray-title::before {
  background: radial-gradient(closest-side, rgba(18, 9, 3, 0.74) 0%, rgba(18, 9, 3, 0.5) 48%, rgba(18, 9, 3, 0.2) 78%, rgba(18, 9, 3, 0) 100%);
}
body.page-home.home-bg-bible-cover .hero-title-script {
  filter:
    drop-shadow(0 0 1px rgba(40, 16, 2, 1))
    drop-shadow(0 0 2px rgba(54, 22, 3, 0.95))
    drop-shadow(0 0 6px rgba(255, 218, 100, 0.9))
    drop-shadow(0 0 16px rgba(255, 180, 40, 0.65))
    drop-shadow(0 0 32px rgba(255, 156, 20, 0.4))
    drop-shadow(0 3px 6px rgba(8, 4, 1, 0.8));
}