@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400..700;1,400..700&family=Manrope:wght@400..800&display=swap");

:root {
  --paper: #f7f2ea;
  --paper-deep: #eee4d7;
  --white: #fffdfa;
  --ink: #2d2729;
  --muted: #62595a;
  --purple: #4e275d;
  --plum: #6e456f;
  --gold: #76551d;
  --gold-soft: #e9d8b9;
  --gold-bright: #c49a4d;
  --line: #ded2c6;
  --line-dark: #c8b8ae;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Manrope", Arial, sans-serif;
  color-scheme: light;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; overflow-x: clip; }
body { margin: 0; background: var(--paper); overflow-x: clip; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled,
[aria-disabled="true"] { cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--purple); outline-offset: 5px; }
::selection { background: var(--gold-soft); color: var(--ink); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; }
p { line-height: 1.7; }
main { min-height: 70vh; }
.section { padding: 104px 7vw; }
.eyebrow { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.15em; line-height: 1.5; text-transform: uppercase; }
.muted { color: var(--muted); }
.gold { color: var(--gold); }
.hero .gold { color: var(--gold); }
.celebration .gold { color: #f4e5c7; }
.display { font-size: clamp(3rem, 6vw, 5.9rem); line-height: 0.92; letter-spacing: 0; }
em { color: var(--purple); font-style: italic; }
.button, .text-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.15rem; min-height: 48px; transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
.button { padding: 0.9rem 1.2rem; border: 1px solid var(--purple); border-radius: 3px; background: var(--purple); color: var(--white); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; line-height: 1.2; text-transform: uppercase; }
.button:hover { background: var(--plum); border-color: var(--plum); transform: translateY(-1px); }
.button:active { background: var(--purple); border-color: var(--purple); transform: translateY(0); }
.button.secondary { background: transparent; color: var(--purple); }
.button.secondary:hover { background: var(--gold-soft); border-color: var(--gold); color: var(--ink); }
.button[aria-disabled="true"], .button:disabled { background: var(--paper-deep); border-color: var(--line-dark); color: var(--muted); box-shadow: none; opacity: 0.78; transform: none; }
.text-link { padding: 0.4rem 0; border: 0; border-bottom: 1px solid var(--gold); background: transparent; color: var(--ink); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; line-height: 1.35; text-transform: uppercase; }
.text-link:hover { border-bottom-color: var(--purple); color: var(--purple); }
.text-link:active { color: var(--gold); }
.text-link[aria-disabled="true"], .text-link:disabled { border-bottom-color: var(--line); color: var(--muted); opacity: 0.7; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.8rem; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 100; padding: 1rem; background: var(--purple); color: var(--white); }
.skip-link:focus { top: 12px; }
.pending { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.page-head { padding: 90px 7vw 58px; background: var(--paper-deep); border-bottom: 1px solid var(--line); }
.page-head h1 { max-width: 760px; margin: 1.2rem 0; font-size: clamp(3.4rem, 7vw, 7rem); line-height: 0.88; }
.site-footer { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; padding: 3rem 7vw 5rem; background: var(--paper-deep); border-top: 1px solid var(--line); }
.site-footer p { margin-bottom: 0.4rem; }
.site-footer a { display: inline-flex; min-height: 44px; align-items: center; }
.footer-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }

.site-header { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 82px; padding: 0 7vw; background: var(--paper); border-bottom: 1px solid var(--line); }
.wordmark { display: flex; align-items: center; gap: 0.55rem; width: 185px; flex-shrink: 0; }
.wordmark > img { width: 42px; height: 42px; object-fit: contain; }
.wordmark > span { width: 52px; font-size: 0.56rem; font-weight: 800; letter-spacing: 0.16em; line-height: 1.5; }
.wordmark strong { font: 500 3rem/1 var(--serif); }
.wordmark-dot { color: var(--gold); }
.desktop-nav { display: flex; gap: 1.5rem; }
.desktop-nav a { padding: 1rem 0; color: var(--muted); font-size: 0.7rem; font-weight: 700; }
.desktop-nav a[aria-current] { color: var(--purple); border-bottom: 1px solid var(--purple); }
.nav-find { min-height: 44px; padding: 0.5rem 0 0.5rem 1.25rem; border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--purple); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.nav-find:hover { color: var(--plum); }
.nav-find:active { color: var(--gold); }
.menu-toggle { display: none; width: 44px; height: 44px; padding: 0.5rem; border: 0; border-radius: 50%; background: transparent; transition: background-color 180ms ease, transform 180ms ease; }
.menu-toggle:hover { background: var(--paper-deep); }
.menu-toggle:active { transform: scale(0.94); }
.menu-toggle span { display: block; height: 1px; margin: 0.4rem 0; background: var(--purple); }

.hero { position: relative; min-height: min(760px, calc(100svh - 82px)); overflow: hidden; isolation: isolate; background: var(--paper); }
.hero-photo { position: absolute; z-index: -1; top: 70px; right: 7vw; width: min(42vw, 520px); height: min(640px, calc(100% - 110px)); overflow: hidden; border-radius: 24px; background: var(--paper-deep); box-shadow: 0 18px 45px rgba(45,39,41,0.14); }
.hero-photo img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; opacity: 0; transition: opacity 1200ms ease; }
.hero-photo img.is-active { opacity: 1; }
.hero-wash { position: absolute; z-index: 0; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--paper) 0%, rgba(247,242,234,0.92) 35%, rgba(247,242,234,0.05) 68%), linear-gradient(0deg, rgba(247,242,234,0.82), transparent 28%); }
.hero-edition { position: absolute; top: 1.7rem; left: 7vw; right: 7vw; display: flex; justify-content: space-between; color: var(--muted); }
.hero-copy { position: relative; z-index: 1; width: min(53%, 660px); padding: 130px 0 150px 7vw; }
.hero-copy h1 { margin: 1.2rem 0 0.8rem; font-size: clamp(4.5rem, 8vw, 8.7rem); line-height: 0.78; }
.hero-copy h1 span, .hero-copy h1 em { display: block; }
.hero-copy h1 em { color: var(--purple); }
.hero-name { margin: 0 0 1rem; color: var(--purple); font: 500 2rem/1.05 var(--serif); }
.hero-description { max-width: 390px; margin-bottom: 1.7rem; color: var(--muted); font-size: 0.92rem; }
.hero-caption { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; margin-top: 1.8rem; color: var(--purple); text-align: left; }
.hero-caption > span:last-child { font: 500 1.35rem/1 var(--serif); }
.hero-footerline { position: absolute; z-index: 1; right: 7vw; bottom: 2rem; left: 7vw; display: flex; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--ink); font-size: 0.68rem; }
.hero-footerline a { color: var(--purple); font-weight: 800; }

.live { background: var(--white); }
.live-heading, .section-heading { display: flex; justify-content: space-between; gap: 2rem; align-items: end; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.live-heading h2 { margin: 0.6rem 0 0; color: var(--purple); font-size: clamp(2.5rem, 5vw, 5rem); line-height: 0.9; }
.live-heading > p { margin: 0; font-size: 0.75rem; }
.state-capsule { display: flex; align-items: center; gap: 1.5rem; width: fit-content; max-width: 100%; margin: 0 0 3rem; padding: 0.8rem 1.15rem; border: 1px solid var(--line-dark); border-radius: 999px; background: var(--paper); color: var(--purple); }
.state-capsule.live { border-color: var(--purple); background: #f0e7f1; }
.state-capsule.post { border-color: var(--gold); background: #f7efdf; }
.state-capsule.live .capsule-label, .state-capsule.live strong { color: var(--purple); }
.state-capsule.post .capsule-label, .state-capsule.post strong { color: var(--gold); }
.state-dot { display: inline-block; width: 0.45rem; height: 0.45rem; flex-shrink: 0; border-radius: 50%; background: var(--gold); }
.state-capsule.live .state-dot { background: var(--purple); box-shadow: 0 0 0 4px #d9c8de; }
.state-capsule strong { font-size: 1rem; font-variant-numeric: tabular-nums; font-weight: 700; }
.capsule-key { color: var(--muted); font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; }
.capsule-action { min-height: 32px; padding: 0.35rem 0.7rem; font-size: 0.6rem; }
.nav-find.join-prayer { min-height: 44px; padding: 0.65rem 1rem; border: 1px solid var(--purple); background: var(--purple); color: var(--white); }
.live-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 10%; }
.state-label { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 1.3rem; color: var(--purple); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.live-kicker { max-width: 430px; margin: 0 0 1rem; color: var(--purple); font: 500 clamp(2.5rem, 5vw, 5.5rem)/0.9 var(--serif); }
.live-copy { max-width: 340px; color: var(--muted); }
.live-panel { padding: 1.5rem 0 0; border-top: 2px solid var(--purple); }
.slot-top { display: flex; justify-content: space-between; gap: 1rem; }
.slot-time { margin: 1.25rem 0 0.3rem; font: 600 clamp(1.7rem, 3vw, 2.6rem)/1 var(--sans); }
.slot-group { margin-bottom: 1.5rem; color: var(--purple); font-size: 0.9rem; }
.prayer-focus { padding-top: 1rem; border-top: 1px solid var(--line); }
.prayer-focus p:last-child { margin-bottom: 0; font: 500 1.8rem/1.15 var(--serif); color: var(--ink); }
.slot-countdown { display: flex; flex-direction: column; gap: 0.55rem; margin: 1.6rem 0; }
.slot-countdown strong { color: var(--purple); font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.live-panel > .button { width: fit-content; }
.room-pending { padding: 1rem 0 0; }
.room-pending > .eyebrow { color: var(--purple); }
.room-pending p { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.75rem; }
.up-next { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.next-time { margin: 0.4rem 0 0; font: 500 1.3rem/1.2 var(--serif); }
.next-time span { display: block; margin-top: 0.3rem; color: var(--muted); font: 600 0.72rem/1.3 var(--sans); }
.complete-number { margin: 1.5rem 0; color: var(--purple); font: 500 6rem/0.8 var(--serif); }
.complete-number span { color: var(--muted); font-size: 2.4rem; }
.live-panel > h3:not(.slot-time) { max-width: 410px; color: var(--purple); font-size: 2.4rem; }

.journey { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 0.75fr); gap: 8%; align-items: center; background: var(--paper-deep); }
.journey-copy h2 { margin: 0.8rem 0 1.2rem; font-size: clamp(3rem, 6vw, 6rem); line-height: 0.84; }
.journey-manifesto { max-width: 380px; color: var(--muted); }
.journey-stats { display: flex; gap: 2.5rem; flex-wrap: wrap; margin: 2rem 0; }
.journey-stats > div { display: flex; flex-direction: column; gap: 0.4rem; }
.journey-stats strong { color: var(--purple); font-size: 2.5rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.journey-stats small { padding-left: 0.15rem; color: var(--muted); font-size: 1rem; }
.journey-progress { height: 0.45rem; overflow: hidden; background: var(--line); }
.journey-progress span { display: block; height: 100%; background: var(--purple); transition: width 350ms ease; }
.journey-percentage { font-size: 0.72rem; }
.journey-clock { position: relative; max-width: 490px; margin: auto; }
.orbit { width: 100%; height: auto; overflow: visible; }
.orbit-line { fill: none; stroke: var(--purple); stroke-width: 0.5; opacity: 0.25; }
.orbit-line.outer { stroke: var(--gold); opacity: 0.22; }
.orbit-tick { stroke: var(--gold); stroke-width: 1.2; }
.orbit-dot { fill: var(--gold); }
.orbit-tick.upcoming, .orbit-dot.upcoming { opacity: 0.28; }
.orbit-tick.current { stroke: var(--purple); stroke-width: 3; }
.orbit-dot.current { fill: var(--purple); }
.orbit-hour { fill: var(--muted); font: 9px var(--sans); letter-spacing: 0.1em; }
.journey-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0.7rem; }
.journey-center strong { color: var(--purple); font: 500 6.4rem/0.75 var(--serif); }
.journey-center strong span { color: var(--muted); font-size: 2rem; }

.schedule-section { background: var(--paper); }
.section-heading h2 { margin: 0.7rem 0 0; }
.section-heading > p { margin: 0; font-size: 0.85rem; }
.schedule-toolbar, .schedule-note { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.filters { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.filters button { min-height: 44px; padding: 0.5rem 0.9rem; border: 1px solid var(--line-dark); border-radius: 999px; background: transparent; color: var(--muted); font-size: 0.68rem; font-weight: 800; line-height: 1.2; transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease; }
.filters button:hover { border-color: var(--purple); color: var(--purple); transform: translateY(-1px); }
.filters button:active { transform: translateY(0); }
.filters button[aria-pressed="true"] { border-color: var(--purple); background: var(--purple); color: var(--white); }
.filter-live-dot { display: inline-block; width: 0.4rem; height: 0.4rem; margin-left: 0.35rem; border-radius: 50%; background: currentColor; }
.schedule-note { color: var(--muted); font-size: 0.72rem; }
.schedule-note p { margin: 0; }
.schedule-note span { color: var(--gold); }
.hour-band { display: grid; grid-template-columns: 130px 1fr; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.hour-label { display: flex; flex-direction: column; gap: 0.3rem; color: var(--purple); font: 500 1.5rem/1 var(--serif); }
.hour-label small { color: var(--muted); font: 700 0.6rem/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; }
.hour-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; }
.schedule-slot { display: flex; min-height: 140px; flex-direction: column; padding: 0.85rem; border: 1px solid var(--line); background: var(--white); transition: background 400ms ease, border-color 400ms ease, transform 350ms ease, box-shadow 400ms ease; }
.schedule-slot:hover { transform: translateY(-2px); border-color: var(--purple); }
.schedule-slot.completed { border-color: #d6c29f; background: #f6eddc; box-shadow: inset 0 0 0 1px rgba(164,124,66,0.12); }
.schedule-slot.current { border-color: var(--purple); background: #eee3ef; box-shadow: inset 0 3px var(--purple); }
.schedule-slot-top { display: flex; justify-content: space-between; gap: 0.4rem; color: var(--muted); }
.slot-status { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.completed .slot-status { color: var(--gold); }
.current .slot-status { color: var(--purple); }
.slot-id { color: var(--muted); font-size: 0.62rem; }
.schedule-slot strong { margin-top: auto; color: var(--ink); font: 700 1.55rem/1 var(--sans); }
.schedule-slot .slot-end { margin-top: 0.25rem; color: var(--muted); font-size: 0.7rem; }
.schedule-group { display: flex; justify-content: space-between; gap: 0.4rem; margin-top: 1rem; padding-top: 0.65rem; border-top: 1px solid var(--line); color: var(--purple); font-size: 0.72rem; font-weight: 700; }
.schedule-focus { display: block; margin-top: 0.55rem; color: var(--muted); font: 500 1rem/1.05 var(--serif); }
.schedule-slot.completed .schedule-group, .schedule-slot.completed .slot-end { color: var(--muted); }
.schedule-slot.completed .schedule-focus { color: #554b4c; opacity: 0.95; }
.schedule-slot.completed .slot-status { animation: completion-mark 420ms ease both; }
@keyframes completion-mark { 0% { opacity: 0; transform: scale(0.7); } 70% { opacity: 1; transform: scale(1.08); } 100% { transform: scale(1); } }
.schedule-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: 0.72rem; }
.schedule-foot p { margin: 0; }
.schedule-empty { padding: 3rem 0; }
.schedule-empty h3 { margin: 0.7rem 0; color: var(--purple); font-size: 2.4rem; }
.is-preview .hour-band { display: block; padding: 0; border-top: 0; }
.is-preview .hour-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.preview-labels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; margin-bottom: 0.5rem; color: var(--muted); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }

.participation { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 10%; background: var(--white); }
.participation-intro h2 { margin: 0.8rem 0 1.1rem; }
.participation-intro > p { max-width: 320px; margin-bottom: 1.5rem; }
.participation-steps { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin: 1.5rem 0 0; padding: 1.2rem 0 0; list-style: none; }
.participation-steps::before { position: absolute; top: 1.55rem; right: 8%; left: 0; height: 2px; background: var(--line); content: ""; }
.participation-steps::after { position: absolute; top: 1.55rem; left: 0; width: 0; height: 2px; background: var(--purple); content: ""; transition: width 2.8s cubic-bezier(.2,.7,.2,1); }
.participation.is-started .participation-steps::after { width: 92%; }
.participation-step { position: relative; z-index: 1; padding-right: 1rem; }
.step-line { position: relative; display: block; width: 12px; height: 12px; margin-bottom: 1.1rem; border: 2px solid var(--line-dark); border-radius: 50%; background: var(--paper); transition: border-color 350ms ease, background 350ms ease, box-shadow 350ms ease; }
.step-line::before { position: absolute; top: -5px; left: -5px; width: 18px; height: 18px; border-radius: 50%; background: var(--purple); content: ""; opacity: 0; transform: scale(0.4); }
.participation.is-started .participation-step .step-line { animation: baton-step 2.8s both; animation-delay: calc((var(--step) - 1) * 0.56s); }
.participation-step:nth-child(1) { --step: 1; }
.participation-step:nth-child(2) { --step: 2; }
.participation-step:nth-child(3) { --step: 3; }
.participation-step:nth-child(4) { --step: 4; }
.participation-step:nth-child(5) { --step: 5; }
@keyframes baton-step { 0%, 12% { border-color: var(--purple); background: var(--purple); box-shadow: 0 0 0 5px #dfd2e2; } 20%, 100% { border-color: var(--gold); background: var(--gold-soft); box-shadow: none; } }
.participation-step h3 { margin: 0; color: var(--muted); font-size: 1.25rem; line-height: 1; transition: color 350ms ease; }
.participation-step p { max-width: 190px; margin: 0.4rem 0 0; color: var(--muted); font-size: 0.74rem; }
.participation.is-started .participation-step h3 { animation: baton-label 2.8s both; animation-delay: calc((var(--step) - 1) * 0.56s); }
@keyframes baton-label { 0%, 12% { color: var(--purple); } 20%, 100% { color: var(--ink); } }

.celebration { display: grid; grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1fr); gap: 9%; align-items: center; background: var(--plum); color: var(--white); }
.celebration-photo { position: relative; width: 100%; min-height: 0; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid rgba(216,184,120,0.28); border-radius: 50%; background: rgba(8,8,8,0.12); }
.celebration-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; opacity: 0; transition: opacity 1200ms ease; }
.celebration-photo img.is-active { opacity: 1; }
.celebration-copy h2 { margin: 0.8rem 0 1.4rem; color: var(--white); font-size: clamp(3rem, 5.8vw, 6rem); line-height: 0.87; }
.celebration-copy h2 em { color: var(--gold-soft); }
.celebration-copy > p { max-width: 480px; color: #f2e9ef; }
.celebration-phrases { display: flex; flex-wrap: wrap; gap: 0.5rem; max-width: 520px; margin: 2rem 0; }
.celebration-phrases span { padding: 0.45rem 0.7rem; border: 1px solid rgba(255,253,250,0.35); border-radius: 999px; color: #fff4e4; font-size: 0.68rem; }
.celebration-signoff { display: flex; align-items: center; gap: 0.8rem; }
.celebration-signoff .short-rule { width: 35px; height: 1px; background: var(--gold-soft); }
.celebration-signoff strong, .celebration-signoff span { display: block; }
.celebration-signoff strong { font: 500 2rem/1 var(--serif); color: var(--gold-soft); }
.celebration-signoff span { color: #eadfe5; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; }
.prayer-note { max-width: 520px; margin: 2rem 0; padding: 1.1rem; border: 1px solid rgba(255,253,250,0.35); border-radius: 12px; background: rgba(45,20,58,0.28); }
.prayer-note-intro { margin: 0.35rem 0 0.8rem; color: #eadfe5; font-size: 0.76rem; }
.prayer-note-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
/* Email spans the full prayer-form width on desktop. */
.prayer-note-email,
.prayer-note-fields input[type="email"] {
  grid-column: 1 / -1;
  width: 100%;
  box-sizing: border-box;
}
.prayer-note input { width: 100%; padding: 0.8rem; border: 1px solid rgba(255,253,250,0.45); border-radius: 4px; background: rgba(255,253,250,0.1); color: var(--white); font: 500 0.95rem/1.3 var(--sans); }
.prayer-note input::placeholder, .prayer-note textarea::placeholder { color: rgba(255,253,250,0.68); }
.prayer-note input:focus { border-color: var(--gold-bright); outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.prayer-note textarea { display: block; width: 100%; min-height: 84px; resize: vertical; padding: 0.8rem; border: 1px solid rgba(255,253,250,0.45); border-radius: 4px; background: rgba(255,253,250,0.1); color: var(--white); font: 500 1rem/1.4 var(--serif); }
.prayer-note textarea:focus { border-color: var(--gold-bright); outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.prayer-note .text-link { margin-top: 0.7rem; border-bottom-color: var(--gold-bright); color: var(--white); }
.prayer-note .text-link:hover { color: var(--gold-soft); }

.final-note { display: flex; justify-content: space-between; gap: 1rem; margin-top: 5rem; padding-top: 1rem; border-top: 1px solid var(--line-dark); color: var(--muted); font-size: 0.72rem; }

.persistent-status { position: fixed; z-index: 20; right: 1.5rem; bottom: 1.25rem; display: flex; align-items: center; gap: 0.7rem; min-height: 46px; padding: 0.7rem 1rem; border: 1px solid var(--line-dark); border-radius: 999px; background: var(--white); box-shadow: 0 10px 30px rgba(45,39,41,0.12); color: var(--purple); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.persistent-status strong { font-weight: 700; }
.persistent-status.live { border-color: var(--purple); background: #eee3ef; }
.persistent-status.post { border-color: var(--gold); background: #f7efdf; }

.dialog-content { padding: 2rem 3rem; }
dialog { color: var(--ink); background: var(--paper); border: 1px solid var(--line-dark); padding: 0; }
dialog::backdrop { background: rgba(45,39,41,0.38); }
.find-dialog { width: min(680px, calc(100% - 32px)); max-height: 90svh; }
.dialog-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.close-button { width: 44px; height: 44px; border: 1px solid var(--line-dark); border-radius: 50%; background: transparent; color: var(--purple); font-size: 1.7rem; line-height: 1; transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease; }
.close-button:hover { border-color: var(--purple); background: var(--purple); color: var(--white); transform: rotate(4deg); }
.close-button:active { transform: scale(0.96); }
.find-dialog h2 { margin: 2rem 0 1rem; color: var(--purple); font-size: 4.8rem; line-height: 0.85; }
.search-input { display: flex; align-items: center; margin-top: 0.5rem; border-bottom: 1px solid var(--purple); }
.search-input input { width: 100%; padding: 1rem 0; border: 0; background: transparent; color: var(--ink); font-size: 1rem; outline: 0; }
.search-input span { color: var(--purple); }
.search-results { min-height: 150px; padding: 2rem 0; }
.search-result { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.search-result h3 { margin: 0.4rem 0; color: var(--purple); font-size: 2rem; }
.dialog-date { padding-top: 1rem; border-top: 1px solid var(--line); }
.menu-dialog { width: 100%; height: 100svh; max-width: none; max-height: none; border: 0; padding: 1.5rem; }
.menu-dialog nav { display: flex; flex-direction: column; padding: 2rem 0; }
.menu-dialog nav a { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--line); color: var(--purple); font: 500 2.2rem/1 var(--serif); }
.menu-dialog nav a[aria-current] { color: var(--gold); }

.material-head .text-link { margin-bottom: 2rem; }
.material-title { display: flex; justify-content: space-between; gap: 2rem; align-items: end; }
.material-title h1 { margin: 0.7rem 0; }
.material-time { color: var(--purple); font-size: 1rem; }
.material-assignment { max-width: 280px; }
.material-layout { display: grid; grid-template-columns: 0.6fr 1.4fr; gap: 10%; }
.material-index { position: sticky; top: 2rem; align-self: start; }
.material-index nav { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 1.5rem; }
.material-index a { display: inline-flex; min-height: 44px; align-items: center; color: var(--muted); font-size: 0.75rem; }
.material-index a.button.join-prayer { color: var(--white); }
.material-index a:hover { color: var(--purple); }
.material-reminder { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--purple); font: 500 1.5rem/1.1 var(--serif); }
.material-body { max-width: 720px; }
.material-notice { padding: 1rem; border-left: 2px solid var(--gold); background: #f7efdf; }
.material-block { padding: 2rem 0; border-bottom: 1px solid var(--line); }
.material-block h2 { margin-bottom: 0.8rem; color: var(--purple); font-size: 2.5rem; }
.focus-text { font: 500 2rem/1.2 var(--serif); }
.material-pagination { display: flex; justify-content: space-between; gap: 1rem; padding: 2rem 7vw 5rem; background: var(--paper); }

@media (max-width: 900px) {
  .desktop-nav { gap: 0.8rem; }
  .nav-find { padding-left: 0.8rem; }
  .hero-copy { width: 60%; padding-top: 110px; }
  .hero-copy h1 { font-size: clamp(4rem, 9vw, 6.5rem); }
  .live-grid, .participation { gap: 7%; }
  .hour-band { grid-template-columns: 90px 1fr; }
}
@media (max-width: 800px) {
  .section { padding: 72px 24px; }
  .page-head { padding: 60px 24px 42px; }
  .site-header { min-height: 76px; padding: 0 22px; gap: 0.5rem; }
  .desktop-nav { display: none; }
  .menu-toggle { display: block; }
  .nav-find { margin-left: auto; border: 0; padding-left: 0; font-size: 0.6rem; }
  .wordmark { width: 150px; }
  .wordmark > img { width: 34px; height: 34px; }
  .wordmark strong { font-size: 2.6rem; }
  .wordmark > span { width: 45px; font-size: 0.48rem; }
  .hero { display: flex; min-height: 0; flex-direction: column; }
  .hero-edition { position: relative; order: 0; top: auto; right: auto; left: auto; padding: 1.2rem 24px; }
  .hero-photo { position: relative; order: 1; top: auto; right: auto; width: min(calc(100% - 48px), 390px); height: auto; max-height: 430px; aspect-ratio: 4 / 5; margin: 0 auto; border-radius: 24px; }
  .hero-photo img { object-position: 51% 16%; }
  .hero-wash { display: none; }
  .hero-copy { order: 2; width: 100%; padding: 2rem 24px 1rem; }
  .hero-copy h1 { margin-top: 0.7rem; font-size: clamp(3.7rem, 17vw, 5.5rem); }
  .hero-name { font-size: 1.7rem; }
  .hero-description { max-width: 330px; font-size: 0.8rem; }
  .hero-caption { position: relative; order: 3; top: auto; right: auto; bottom: auto; padding: 0 24px 1rem; text-align: left; }
  .hero-caption > span:last-child { font-size: 1rem; }
  .hero-footerline { position: relative; order: 4; right: auto; bottom: auto; left: auto; margin: 0 24px 1.3rem; flex-wrap: wrap; font-size: 0.58rem; }
  .hero-footerline span:nth-child(2) { display: none; }
  .live-heading, .section-heading, .schedule-toolbar, .schedule-note, .material-title { display: block; }
  .live-heading > p, .section-heading > p { margin-top: 1rem; }
  .state-capsule { align-items: flex-start; flex-wrap: wrap; gap: 0.4rem 1rem; border-radius: 1.2rem; }
  .capsule-key { width: 100%; padding-left: 1.25rem; }
  .live-grid, .journey, .participation, .celebration, .material-layout { display: block; }
  .live-panel { margin-top: 3rem; }
  .journey-clock { max-width: 350px; margin-top: 3rem; }
  .journey-stats { gap: 1.4rem; }
  .journey-stats strong { font-size: 2rem; }
  .hour-band { display: block; padding: 1.2rem 0; }
  .hour-label { margin-bottom: 0.7rem; }
  .hour-slots, .is-preview .hour-slots { grid-template-columns: 1fr; gap: 0.5rem; }
  .schedule-slot { min-height: 0; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; column-gap: 1rem; }
  .schedule-slot-top { grid-column: 1 / -1; }
  .schedule-slot strong { margin-top: 0.8rem; font-size: 1.3rem; }
  .schedule-slot .slot-end { margin-top: 0.8rem; text-align: right; }
  .schedule-group { grid-column: 1 / -1; }
  .schedule-focus { grid-column: 1 / -1; margin-top: 0.6rem; font-size: 1.05rem; }
  .preview-labels { display: none; }
  .schedule-foot { align-items: flex-start; flex-direction: column; }
  .participation-steps { display: block; margin-top: 3rem; padding-top: 0; }
  .participation-steps::before { top: 0; bottom: 0; left: 5px; width: 2px; height: auto; }
  .participation-steps::after { top: 0; bottom: auto; left: 5px; width: 2px; height: 0; transition: height 2.8s cubic-bezier(.2,.7,.2,1); }
  .participation.is-started .participation-steps::after { width: 2px; height: 92%; }
  .participation-step { display: grid; grid-template-columns: 28px 1fr; gap: 1rem; padding: 0 0 1.35rem; }
  .participation-step .step-line { margin-top: 0.25rem; margin-bottom: 0; }
  .participation-step h3 { font-size: 1.45rem; }
  .participation-step p { max-width: 260px; }
  .celebration-photo { width: calc(100% + 48px); min-height: 0; aspect-ratio: 4 / 5; margin: 0 -24px 2rem; border-radius: 50%; }
  .prayer-note-fields { grid-template-columns: 1fr; }
  .celebration-copy h2 { font-size: clamp(3.2rem, 14vw, 5rem); }
  .final-note { margin-top: 3rem; }
  .persistent-status { right: 0.8rem; bottom: 0.8rem; left: 0.8rem; justify-content: center; }
  .dialog-content { padding: 1.5rem 1.25rem; }
  .find-dialog h2 { font-size: 4rem; }
  .menu-dialog nav a { font-size: 2rem; }
  .material-index { position: static; margin-bottom: 2rem; }
  .material-index nav { display: grid; grid-template-columns: 1fr 1fr; }
  .material-pagination { padding: 1.5rem 24px 4rem; }
}
@media (max-width: 350px) {
  .site-header { padding: 0 16px; }
  .nav-find { font-size: 0.52rem; }
  .hero-copy { padding-right: 20px; padding-left: 20px; }
  .hero-copy h1 { font-size: 3.5rem; }
  .section { padding-right: 20px; padding-left: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .participation-steps::after { width: 92%; }
  .participation-step .step-line { border-color: var(--gold); background: var(--gold-soft); }
  .participation-step h3 { color: var(--ink); }
}


/* PHP/AJAX additions */
.form-status { min-height: 1.3rem; margin: .65rem 0 0; color: #f4e5c7; font-size: .72rem; }
.form-status.is-error { color: #ffd2d2; }
.hp-field { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(1px,1px,1px,1px) !important; white-space: nowrap !important; }
.schedule-slot[hidden], .hour-band[hidden] { display: none !important; }
.no-js-note { padding: .75rem 7vw; background: #fff4d8; color: #594114; font-size: .78rem; }
.hero-photo img,
.celebration-photo img { position: absolute; inset: 0; }

/* ==============================
   Live audio prayer room
   ============================== */
.desktop-nav .join-prayer-nav { display: inline-flex; align-items: center; min-height: 42px; margin: 0.35rem 0; padding: 0.65rem 0.9rem; border: 1px solid var(--purple); border-radius: 3px; background: var(--purple); color: var(--white); font-weight: 800; }
.desktop-nav .join-prayer-nav:hover { background: var(--plum); border-color: var(--plum); color: var(--white); }
.room-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.55fr); gap: 8%; align-items: end; min-height: 540px; background: var(--purple); color: var(--white); }
.room-hero-copy { max-width: 820px; }
.room-hero h1 { margin: 0.8rem 0 1.4rem; color: var(--white); font-size: clamp(4.2rem, 9vw, 9rem); line-height: 0.78; }
.room-hero h1 em { color: var(--gold-soft); }
.room-hero-copy > p:not(.eyebrow) { max-width: 600px; color: #eee2ef; font-size: 1rem; }
.room-trust-row { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.8rem; }
.room-trust-row span { padding: 0.5rem 0.75rem; border: 1px solid rgba(255,255,255,0.3); border-radius: 999px; color: #fff7ef; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.room-now-card { display: flex; min-height: 260px; flex-direction: column; justify-content: flex-end; padding: 1.6rem; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); backdrop-filter: blur(8px); }
.room-live-mark { display: inline-flex; align-items: center; gap: 0.55rem; margin-bottom: auto; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.room-live-mark i, .room-connection-pill i { display: inline-block; width: 0.48rem; height: 0.48rem; border-radius: 50%; background: #ebc77f; box-shadow: 0 0 0 5px rgba(235,199,127,0.12); }
.room-now-card strong { color: var(--white); font: 500 clamp(4.5rem, 9vw, 7rem)/0.8 var(--serif); font-variant-numeric: tabular-nums; }
.room-now-card .muted { margin-top: 0.75rem; color: #d9cbdc; }
.room-stage { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr); gap: 7%; align-items: start; background: var(--white); }
.room-focus-card { position: sticky; top: 1.5rem; padding-top: 1.4rem; border-top: 2px solid var(--purple); }
.room-focus-top { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 3.2rem; }
.room-time { color: var(--muted); font-size: 0.72rem; font-weight: 700; }
.room-focus-card h2 { max-width: 760px; margin: 0.8rem 0 3rem; color: var(--purple); font-size: clamp(2rem, 3.25vw, 3.5rem); line-height: 1.04; }
.room-focus-bottom { display: flex; justify-content: space-between; gap: 1.5rem; align-items: flex-end; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.room-focus-bottom > div { display: flex; flex-direction: column; gap: 0.5rem; }
.room-focus-bottom strong { color: var(--ink); font-size: 1rem; font-variant-numeric: tabular-nums; }
.room-console { min-height: 570px; padding: 2rem; border: 1px solid var(--line); background: var(--paper); box-shadow: 0 24px 70px rgba(45,39,41,0.08); }
.room-prejoin, .room-connected { min-height: 500px; }
.room-prejoin { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.room-mic-orb { display: grid; width: 88px; height: 88px; margin-bottom: 2rem; place-items: center; border: 1px solid var(--gold); border-radius: 50%; background: #f3e7d2; box-shadow: 0 0 0 12px rgba(196,154,77,0.09); font-size: 2rem; }
.room-prejoin h2, .room-connected h2 { margin: 0.5rem 0 0.8rem; color: var(--purple); font-size: clamp(2.8rem, 5vw, 4.8rem); line-height: 0.9; }
.room-prejoin > .muted { max-width: 410px; }
.room-name-field { display: flex; width: 100%; flex-direction: column; gap: 0.5rem; margin: 1.3rem 0; color: var(--purple); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.room-name-field small { color: var(--muted); font-size: 0.65rem; font-weight: 600; text-transform: none; }
.room-name-field input { width: 100%; min-height: 52px; padding: 0.8rem 0.9rem; border: 1px solid var(--line-dark); background: var(--white); color: var(--ink); outline: 0; }
.room-name-field input:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(78,39,93,0.1); }
.room-join-button { width: 100%; }
.room-help { margin: 0.8rem 0 0; color: var(--muted); font-size: 0.68rem; }
.room-setup-note { display: grid; gap: 0.35rem; width: 100%; margin-top: 1rem; padding: 0.85rem; border-left: 2px solid var(--gold); background: #f7ead4; color: var(--ink); font-size: 0.72rem; line-height: 1.5; }
.room-setup-note code { word-break: break-all; }
.room-error { min-height: 1.2rem; margin: 0.8rem 0 0; color: #8a2d34; font-size: 0.72rem; line-height: 1.5; }
.room-connected { display: flex; flex-direction: column; justify-content: center; }
.room-connected[hidden], .room-prejoin[hidden] { display: none !important; }
.room-connected-head { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: 2.2rem; }
.room-connection-pill { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--purple); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.room-connection-pill i { background: var(--purple); box-shadow: 0 0 0 5px rgba(78,39,93,0.1); }
.room-leave-link { min-height: 44px; padding: 0; border: 0; border-bottom: 1px solid var(--line-dark); background: transparent; color: var(--muted); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.room-leave-link:hover { color: #8a2d34; border-color: #8a2d34; }
.room-audio-visual { display: flex; height: 84px; align-items: center; gap: 8px; margin-bottom: 1.6rem; }
.room-audio-visual span { width: 9px; height: 22px; border-radius: 999px; background: var(--gold); opacity: 0.45; transform-origin: center; }
.room-audio-visual.is-speaking span { animation: room-wave 0.8s ease-in-out infinite alternate; opacity: 1; }
.room-audio-visual.is-speaking span:nth-child(2) { animation-delay: -0.55s; }
.room-audio-visual.is-speaking span:nth-child(3) { animation-delay: -0.3s; }
.room-audio-visual.is-speaking span:nth-child(4) { animation-delay: -0.65s; }
.room-audio-visual.is-speaking span:nth-child(5) { animation-delay: -0.15s; }
@keyframes room-wave { from { height: 18px; } to { height: 72px; } }
.room-connected-copy { max-width: 420px; color: var(--muted); }
.room-mic-button { display: grid; width: 160px; height: 160px; margin: 1.5rem auto; place-items: center; align-content: center; gap: 0.45rem; border: 1px solid var(--purple); border-radius: 50%; background: var(--purple); color: var(--white); box-shadow: 0 0 0 14px rgba(78,39,93,0.08); transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease; }
.room-mic-button:hover { transform: scale(1.02); }
.room-mic-button.is-live { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 14px rgba(196,154,77,0.14), 0 0 0 26px rgba(196,154,77,0.06); }
.room-mic-button:disabled { opacity: 0.6; }
.room-mic-icon { font-size: 2rem; }
.room-mic-button [data-room-mic-label] { max-width: 110px; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.08em; line-height: 1.3; text-transform: uppercase; }
.room-session-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 1rem; background: var(--line); border: 1px solid var(--line); }
.room-session-meta > div { display: flex; min-height: 90px; flex-direction: column; justify-content: center; padding: 1rem; background: var(--white); }
.room-session-meta strong { color: var(--purple); font: 600 1.8rem/1 var(--serif); }
.room-session-meta span { margin-top: 0.35rem; color: var(--muted); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.room-audio-unlock { width: 100%; margin-top: 1rem; }
.remote-prayer-audio { position: fixed; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

@media (max-width: 900px) {
  .room-hero, .room-stage { grid-template-columns: 1fr; }
  .room-now-card { min-height: 190px; }
  .room-focus-card { position: static; }
}
@media (max-width: 800px) {
  .room-hero { min-height: 0; padding-top: 64px; }
  .room-hero h1 { font-size: clamp(4rem, 18vw, 6.2rem); }
  .room-stage { padding-top: 64px; }
  .room-focus-top, .room-focus-bottom { align-items: flex-start; flex-direction: column; }
  .room-focus-card h2 { margin-bottom: 2rem; font-size: clamp(1.85rem, 7vw, 2.7rem); line-height: 1.08; }
  .room-console { min-height: 0; margin-top: 1rem; padding: 1.3rem; }
  .room-prejoin, .room-connected { min-height: 470px; }
}
@media (max-width: 460px) {
  .room-session-meta { grid-template-columns: 1fr; }
  .room-mic-button { width: 145px; height: 145px; }
}

/* Prayer room participant viewer */
.room-participant-meta { position: relative; padding-right: 5.2rem !important; }
.room-meta-value { display: flex; flex-direction: column; }
.room-view-participants { position: absolute; right: 1rem; top: 50%; min-height: 38px; padding: 0.55rem 0.8rem; transform: translateY(-50%); border: 1px solid var(--purple); border-radius: 2px; background: transparent; color: var(--purple); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: background 160ms ease, color 160ms ease; }
.room-view-participants:hover, .room-view-participants:focus-visible { background: var(--purple); color: var(--white); outline: none; }
.room-participants-modal[hidden] { display: none !important; }
.room-participants-modal { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 1rem; }
.room-participants-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(28, 18, 31, 0.66); backdrop-filter: blur(5px); cursor: default; }
.room-participants-dialog { position: relative; z-index: 1; width: min(100%, 520px); max-height: min(78vh, 680px); overflow: hidden; border: 1px solid rgba(78,39,93,0.18); background: var(--paper); box-shadow: 0 30px 90px rgba(28,18,31,0.28); }
.room-participants-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.5rem 1.5rem 1.1rem; border-bottom: 1px solid var(--line); background: var(--white); }
.room-participants-header .eyebrow { margin: 0 0 0.45rem; }
.room-participants-header h3 { margin: 0; color: var(--purple); font: 500 clamp(2rem, 5vw, 3rem)/0.95 var(--serif); }
.room-participants-close { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border: 1px solid var(--line-dark); border-radius: 50%; background: transparent; color: var(--purple); font: 400 1.65rem/1 var(--sans); cursor: pointer; }
.room-participants-close:hover, .room-participants-close:focus-visible { border-color: var(--purple); background: var(--purple); color: var(--white); outline: none; }
.room-participants-summary { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.9rem 1.5rem; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.room-participants-summary strong { color: var(--purple); font: 600 1.65rem/1 var(--serif); }
.room-participants-list { max-height: min(52vh, 460px); overflow-y: auto; overscroll-behavior: contain; padding: 0.45rem 1.5rem 1.2rem; }
.room-participant-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 12px; gap: 0.85rem; align-items: center; min-height: 68px; border-bottom: 1px solid var(--line); }
.room-participant-avatar { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; background: #efe4d4; color: var(--purple); font: 600 1.1rem/1 var(--serif); }
.room-participant-copy { display: flex; min-width: 0; flex-direction: column; gap: 0.24rem; }
.room-participant-copy strong { overflow: hidden; color: var(--ink); font-size: 0.82rem; text-overflow: ellipsis; white-space: nowrap; }
.room-participant-copy span { color: var(--muted); font-size: 0.61rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.room-participant-status { width: 9px; height: 9px; border-radius: 50%; background: #9f989c; box-shadow: 0 0 0 4px rgba(159,152,156,0.12); }
.room-participant-status.is-speaking { background: var(--gold); box-shadow: 0 0 0 5px rgba(196,154,77,0.15); animation: participant-pulse 1s ease-in-out infinite alternate; }
.room-participants-empty { margin: 1.4rem 0 0.6rem; color: var(--muted); font-size: 0.78rem; }
html.room-modal-open { overflow: hidden; }
@keyframes participant-pulse { from { transform: scale(0.88); } to { transform: scale(1.12); } }

@media (max-width: 460px) {
  .room-participant-meta { padding-right: 4.6rem !important; }
  .room-view-participants { right: 0.8rem; padding: 0.48rem 0.65rem; }
  .room-participants-modal { padding: 0.65rem; }
  .room-participants-header { padding: 1.2rem; }
  .room-participants-summary { padding: 0.8rem 1.2rem; }
  .room-participants-list { padding-right: 1.2rem; padding-left: 1.2rem; }
}