@import url('tokens.css?v=50e6fd128b0e');
* {
  box-sizing:border-box
}
html {
  background:var(--paper);
  scroll-padding-bottom:110px
}
body {
  margin:0;
  background:radial-gradient(ellipse at top right,#f3dfc342,transparent 65%),var(--paper);
  color:var(--ink);
  font:var(--text-base)/1.6 var(--sans);
  -webkit-font-smoothing:antialiased
}
button,input,textarea,select {
  font:inherit;
  color:inherit
}
button,a,input,textarea,select {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
a {
  color:var(--red);
  text-underline-offset:4px
}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible,.table-scroll:focus-visible {
  outline:var(--focus);
  outline-offset:4px
}
button:disabled {
  opacity:.5;
  cursor:not-allowed
}
button[aria-busy=true] {
  cursor:progress
}
[hidden] {
  display:none!important
}
h1,h2,h3,p {
  margin:0 0 var(--space-4)
}
h1,h2,h3 {
  font-family:var(--serif);
  font-weight:400;
  line-height:1.15;
  overflow-wrap:anywhere;
  text-wrap:balance
}
h1,h2 {
  color:var(--red)
}
h2 {
  font-size:var(--title);
  letter-spacing:-.025em
}
h3 {
  font-size:var(--subtitle);
  letter-spacing:-.015em
}
p {
  max-width:65ch
}
small,.muted {
  color:var(--muted)
}
main {
  max-width:var(--content);
  margin:auto;
  padding:var(--space-6) var(--space-6) 120px;
  min-width:0
}
.brand-header {
  display:flex;
  align-items:center;
  gap:var(--space-5);
  padding-bottom:var(--space-6);
  margin-bottom:var(--space-5);
  border-bottom:var(--border)
}
.brand-copy {
  min-width:0
}
.brand-header h1 {
  font-size:clamp(23px,3.4vw,42px);
  margin:0 0 6px
}
.brand-eyebrow {
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.15em;
  color:var(--muted)
}
.brand-logo {
  position:relative;
  overflow:hidden;
  flex:0 0 88px;
  width:88px;
  height:88px;
  mix-blend-mode:multiply
}
.brand-logo img {
  position:absolute;
  width:178px;
  max-width:none;
  left:-45px;
  top:-44px
}
.identity {
  display:flex;
  align-items:center;
  gap:12px;
  margin-left:auto;
  font-size:14px
}
.identity strong,.identity small {
  display:block
}
.identity strong {
  font-weight:500
}
.identity small {
  font-size:12px;
  max-width:150px
}
.identity-avatar {
  display:grid;
  place-items:center;
  flex-shrink:0;
  border:var(--border);
  border-radius:50%;
  width:42px;
  height:42px;
  color:var(--red);
  background:var(--red-soft);
  font-family:var(--serif);
  font-size:24px
}
.layout {
  display:block;
  min-width:0
}
.phone {
  min-width:0;
  overflow-wrap:anywhere
}
.top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:20px;
  font-size:13px;
  color:var(--muted)
}
.top button {
  background:transparent;
  border-color:transparent;
  color:var(--red)
}
body[data-role=participant] .top {
  display:none
}
.view-switch {
  margin-bottom:var(--space-5)
}
.view-switch button {
  border-radius:var(--radius-pill);
  font-size:14px
}
.bar {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-3);
  margin:var(--space-4) 0 var(--space-5)
}
button {
  border:var(--border);
  border-radius:var(--radius-sm);
  padding:12px 20px;
  min-height:var(--control);
  background:var(--card);
  transition:background var(--motion),border-color var(--motion);
  overflow-wrap:anywhere;
  line-height:1.45
}
button:hover {
  background:var(--paper-deep);
  border-color:var(--gold)
}
button.primary,button[aria-current=true] {
  background:var(--red);
  border-color:var(--red);
  color:var(--white)
}
button.primary:hover {
  background:var(--red-hover)
}
button .ui-icon {
  width:19px;
  height:19px;
  vertical-align:middle;
  margin-left:10px
}
.ui-icon {
  width:28px;
  height:28px;
  flex-shrink:0
}
.page-heading {
  position:relative;
  padding:12px 0 28px;
  min-height:160px;
  isolation:isolate
}
.page-heading:after {
  content:"";
  position:absolute;
  inset:-10px 0 0 auto;
  width:280px;
  z-index:-1;
  background:url('assets/temple-placeholder.svg') right 42%/260px no-repeat;
  opacity:.14;
  pointer-events:none
}
.page-heading .bar {
  margin:0 0 14px
}
.page-heading .bar button {
  border:0;
  padding:8px 0;
  background:transparent;
  color:var(--red)
}
.page-heading h2 {
  max-width:85%;
  margin-bottom:0
}
.card {
  background:linear-gradient(135deg,#fffdf9e8,#fffaf3bd);
  border:var(--border);
  border-radius:var(--radius);
  padding:var(--space-5);
  margin:var(--space-4) 0;
  box-shadow:var(--shadow);
  min-width:0
}
.card h3 {
  margin-bottom:12px
}
.card p {
  color:var(--muted);
  margin-bottom:16px
}
.card button {
  margin-top:4px
}
.stack {
  display:grid;
  gap:14px
}
.list-card,.section-card {
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 20px;
  align-items:center;
  gap:20px;
  text-align:left;
  width:100%;
  border-radius:var(--radius);
  padding:20px 24px;
  background:#fffcf680;
  box-shadow:var(--shadow);
  font:26px/1.2 var(--serif);
  min-width:0
}
.section-icon {
  color:var(--red);
  border-right:var(--border);
  padding-right:16px;
  display:grid;
  place-items:center;
  height:48px
}
.section-icon .ui-icon {
  margin:0;
  width:30px;
  height:30px
}
.list-card>.ui-icon,.section-card>.ui-icon {
  width:19px;
  height:19px;
  margin:0;
  color:var(--red)
}
.section-card strong {
  font-weight:400;
  display:block
}
.section-card small {
  display:block;
  font:13px/1.5 var(--sans);
  margin-top:7px
}
.section-card--primary {
  background:linear-gradient(115deg,#9b3028,var(--red));
  color:var(--white);
  border-color:var(--red)
}
.section-card--primary:hover {
  background:var(--red-hover)
}
.section-card--primary .section-icon,.section-card--primary>.ui-icon,.section-card--primary small {
  color:var(--white);
  border-color:#ffffff50
}
.eyebrow {
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.17em;
  color:var(--muted);
  margin-bottom:var(--space-4)
}
.welcome-hero {
  position:relative;
  min-height:260px;
  padding:28px 0 34px;
  isolation:isolate
}
.welcome-hero h2 {
  font-size:clamp(36px,4.4vw,58px);
  max-width:75%;
  margin-bottom:18px
}
.welcome-hero p {
  font-size:20px;
  line-height:1.5;
  max-width:430px
}
.hero-temple {
  position:absolute;
  width:350px;
  height:300px;
  object-fit:contain;
  right:-6px;
  bottom:-14px;
  opacity:.36;
  z-index:-1;
  pointer-events:none
}
.home-columns {
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:40px;
  margin-top:8px
}
.home-sections {
  display:grid;
  gap:14px
}
.upcoming {
  min-width:0;
  padding-top:12px
}
.upcoming>.eyebrow {
  margin-bottom:12px
}
.upcoming h3 {
  font-size:28px
}
.privacy-notice {
  color:var(--muted);
  font-size:13px;
  line-height:1.7;
  border-top:var(--border);
  margin-top:28px;
  padding-top:20px
}
.privacy-notice p {
  margin-bottom:10px
}
.event-card {
  display:flex;
  gap:20px;
  align-items:flex-start
}
.event-card h3 {
  font-size:27px
}
.event-card p {
  font-size:14px
}
.event-card>div {
  min-width:0
}
.event-card button {
  font-size:14px
}
.date-badge {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:60px;
  padding:12px 8px;
  border:var(--border);
  border-radius:var(--radius-sm);
  color:var(--red);
  background:var(--paper-deep)
}
.date-badge strong {
  font:32px/1 var(--serif);
  margin-bottom:5px
}
.date-badge span {
  font-size:12px
}
.upcoming .event-card {
  display:block
}
.upcoming .date-badge {
  float:left;
  margin:0 18px 12px 0
}
.calendar-panel {
  position:relative;
  border:var(--border);
  border-radius:var(--radius);
  padding:24px;
  background:#fffcf680;
  margin-bottom:20px
}
.calendar-panel .month-controls {
  justify-content:space-between;
  margin:0
}
.month-controls button {
  font-size:13px;
  padding:10px 13px
}
.calendar-panel>h3 {
  text-align:center;
  font-size:28px;
  margin:20px 0 24px;
  text-transform:capitalize
}
.grid {
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:8px;
  text-align:center
}
.grid>* {
  min-width:0;
  padding:10px 0;
  align-content:center
}
.grid small {
  font-size:13px;
  border-bottom:var(--border);
  padding-bottom:16px;
  margin-bottom:8px
}
.grid small:nth-child(6),.grid small:nth-child(7) {
  color:var(--red)
}
.grid button {
  border-radius:var(--radius-pill);
  padding:8px 0;
  min-height:44px;
  background:var(--paper-deep);
  color:var(--red);
  font-weight:600
}
.grid button.primary {
  background:var(--red);
  color:var(--white)
}
.calendar-hint {
  font-size:14px;
  color:var(--muted);
  margin-bottom:28px
}
.map {
  min-height:360px;
  display:flex;
  flex-wrap:wrap;
  align-content:center;
  justify-content:center;
  gap:24px;
  border:var(--border);
  border-radius:var(--radius);
  padding:24px;
  margin-bottom:24px;
  background-color:#efe7d9;
  background-image:linear-gradient(32deg,transparent 45%,#fffbf4 45%,#fffbf4 48%,transparent 48%),linear-gradient(112deg,transparent 57%,#fffbf4 57%,#fffbf4 60%,transparent 60%),linear-gradient(15deg,transparent 66%,#fffbf4 66%,#fffbf4 70%,transparent 70%)
}
.map button {
  border-radius:var(--radius-pill);
  box-shadow:var(--shadow);
  color:var(--red)
}
form {
  max-width:760px;
  min-width:0
}
.field {
  display:grid;
  gap:8px;
  font-size:14px;
  margin:0 0 20px
}
.field input,.field select,.field textarea,input:not([type=checkbox]),textarea,select {
  width:100%;
  min-width:0;
  min-height:var(--control);
  padding:12px 14px;
  border:var(--border);
  border-radius:var(--radius-sm);
  background:var(--card);
  font-size:16px;
  line-height:1.5
}
textarea {
  min-height:140px;
  resize:vertical
}
input:user-invalid,textarea:user-invalid {
  border-color:var(--red)
}
.consent-check {
  display:flex;
  gap:12px;
  align-items:flex-start;
  min-height:48px;
  font-size:14px;
  line-height:1.6;
  margin:24px 0 12px;
  cursor:pointer
}
.consent-check input {
  width:22px;
  height:22px;
  flex:0 0 22px;
  margin:2px 0;
  accent-color:var(--red)
}
.consent-policy {
  font-size:13px;
  margin-bottom:24px
}
.bubble {
  background:var(--paper-deep);
  border:var(--border);
  border-radius:18px 18px 18px 4px;
  padding:18px 20px;
  margin:16px 0;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  max-width:90%;
  font-size:15px
}
.bubble.mine {
  background:var(--red);
  color:var(--white);
  margin-left:auto;
  border-radius:18px 18px 4px 18px
}
.tag {
  display:inline-block;
  border:var(--border);
  border-radius:var(--radius-pill);
  background:var(--red-soft);
  color:var(--red);
  font-size:12px;
  padding:4px 12px;
  margin-bottom:12px
}
.table-scroll {
  width:100%;
  overflow-x:auto;
  border:var(--border);
  border-radius:var(--radius);
  margin:24px 0;
  background:var(--card)
}
table {
  width:100%;
  border-collapse:collapse;
  font-size:14px
}
th,td {
  text-align:left;
  padding:16px;
  border-bottom:var(--border);
  overflow-wrap:anywhere
}
th {
  background:var(--paper-deep);
  font-weight:500;
  color:var(--muted)
}
tr:last-child td {
  border-bottom:0
}
dialog {
  width:min(480px,calc(100% - 32px));
  max-height:calc(100dvh - 32px);
  overflow:auto;
  padding:32px;
  border:var(--border);
  border-radius:var(--radius-lg);
  background:var(--white);
  color:var(--ink);
  box-shadow:var(--shadow-dialog)
}
dialog h2 {
  font-size:32px
}
dialog::backdrop {
  background:#35221470;
  backdrop-filter:blur(4px)
}
dialog .bar {
  margin-bottom:0
}
details {
  border-top:var(--border);
  padding:16px 0
}
summary {
  cursor:pointer;
  min-height:44px
}
.empty-state {
  border:var(--border);
  border-radius:var(--radius);
  padding:32px;
  text-align:center;
  background:var(--white);
  color:var(--muted)
}
.empty-state>.ui-icon {
  color:var(--red);
  margin-bottom:16px
}
.empty-state h3 {
  font-size:25px;
  color:var(--red)
}
.empty-state p {
  font-size:14px
}
.profile-card {
  text-align:center
}
.profile-card>.ui-icon {
  width:44px;
  height:44px;
  color:var(--red);
  margin-bottom:12px
}
.legal-document {
  max-width:760px;
  margin:24px auto;
  overflow-wrap:anywhere
}
.legal-document h2 {
  font-size:38px
}
.legal-document h3 {
  margin-top:28px
}
.legal-document p {
  line-height:1.8
}
.legal-status {
  border:var(--border);
  border-radius:var(--radius-sm);
  padding:20px;
  background:var(--white);
  font-size:14px
}
.bottom-nav {
  position:fixed;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:min(100%,var(--content));
  min-height:var(--nav-height);
  padding:8px 24px max(8px,env(safe-area-inset-bottom));
  border:var(--border);
  border-bottom:0;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  background:#fffaf3f5;
  backdrop-filter:blur(16px);
  z-index:10;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  box-shadow:0 -4px 30px #78451f07
}
.bottom-nav button {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  position:relative;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--muted);
  font-size:12px;
  padding:7px 0 12px;
  min-width:0
}
.bottom-nav button .ui-icon {
  margin:0;
  width:25px;
  height:25px
}
.bottom-nav button[aria-current=page] {
  color:var(--red);
  font-weight:600
}
.bottom-nav button[aria-current=page]:after {
  content:"";
  position:absolute;
  bottom:3px;
  width:32px;
  height:3px;
  border-radius:var(--radius-pill);
  background:var(--red)
}
.bottom-nav button:hover {
  background:var(--red-soft);
  border-radius:var(--radius-sm)
}
.skip-link {
  position:fixed;
  top:-100px;
  left:16px;
  padding:12px 20px;
  background:var(--white);
  z-index:30
}
.skip-link:focus {
  top:12px
}
#screen {
  outline:none;
  min-width:0
}
#user-list {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px
}
#user-list .card {
  margin:0
}
#user-list .card button {
  margin-right:6px;
  margin-bottom:8px
}
.loading-state {
  padding:24px;
  color:var(--muted)
}
.error-state {
  border:1px solid var(--red);
  border-radius:var(--radius);
  padding:24px;
  color:var(--red)
}
@media(min-width:1000px) {
  body[data-page=calendar] #screen,body[data-page=event] #screen,body[data-page=helpForm] #screen,body[data-page=church] #screen,body[data-page=interest] #screen {
    max-width:820px;
    margin:auto
  }
  body[data-role=admin] main {
    max-width:1240px
  }
  .admin-content .page-heading {
    min-height:120px
  }
  .admin-content .page-heading:after {
    opacity:.09
  }
  .admin-content>form {
    background:var(--card);
    padding:32px;
    border:var(--border);
    border-radius:var(--radius)
  }
  .welcome-hero {
    min-height:280px
  }
  .hero-temple {
    right:40px;
    width:400px;
    height:340px
  }
}
@media(max-width:767px) {
  main {
    padding:24px 20px 116px
  }
  .brand-header {
    gap:14px;
    padding-bottom:22px;
    margin-bottom:14px;
    flex-wrap:wrap
  }
  .brand-logo {
    flex-basis:64px;
    width:64px;
    height:67px
  }
  .brand-logo img {
    width:136px;
    top:-33px;
    left:-36px
  }
  .brand-header h1 {
    font-size:27px;
    letter-spacing:-.025em
  }
  .brand-eyebrow {
    font-size:9px;
    letter-spacing:.08em
  }
  .identity {
    width:100%;
    margin:0;
    gap:9px
  }
  .identity-avatar {
    width:28px;
    height:28px;
    font-size:17px
  }
  .identity>span:last-child {
    display:flex;
    gap:9px;
    align-items:baseline;
    min-width:0
  }
  .identity strong {
    font-size:12px
  }
  .identity small {
    font-size:11px;
    max-width:none
  }
  .home-columns {
    grid-template-columns:1fr;
    gap:28px
  }
  .upcoming {
    padding-top:0
  }
  .upcoming .event-card {
    display:flex
  }
  .upcoming .date-badge {
    float:none;
    margin:0
  }
  .welcome-hero {
    min-height:236px;
    padding:26px 0 32px
  }
  .welcome-hero h2 {
    font-size:37px;
    max-width:90%;
    margin-bottom:16px
  }
  .welcome-hero p {
    font-size:17px;
    max-width:230px
  }
  .hero-temple {
    width:225px;
    height:250px;
    right:0;
    bottom:-14px;
    opacity:.23
  }
  .eyebrow {
    font-size:10px;
    letter-spacing:.11em
  }
  .home-sections {
    gap:12px
  }
  .section-card,.list-card {
    padding:18px 16px;
    gap:16px;
    grid-template-columns:42px minmax(0,1fr) 16px;
    font-size:23px;
    min-height:86px
  }
  .section-icon {
    padding-right:12px;
    height:42px
  }
  .section-icon .ui-icon {
    width:28px;
    height:28px
  }
  .section-card small {
    font-size:12px;
    margin-top:5px
  }
  .page-heading {
    min-height:162px;
    padding:6px 0 24px
  }
  .page-heading:after {
    width:180px;
    background-size:210px;
    background-position:right 52%;
    opacity:.15
  }
  .page-heading h2 {
    font-size:36px;
    max-width:100%
  }
  .card {
    padding:20px;
    margin:16px 0
  }
  .card h3 {
    font-size:27px
  }
  .card p {
    font-size:15px
  }
  .calendar-panel {
    padding:16px
  }
  .calendar-panel>h3 {
    font-size:26px
  }
  .grid {
    gap:4px
  }
  .grid>* {
    padding:9px 0
  }
  .grid small {
    font-size:12px
  }
  .grid button {
    min-height:44px
  }
  .map {
    min-height:300px
  }
  .event-card {
    gap:14px
  }
  .event-card h3 {
    font-size:24px
  }
  .event-card button {
    font-size:13px;
    padding:10px 12px
  }
  .date-badge {
    min-width:52px;
    padding:10px 6px
  }
  .date-badge strong {
    font-size:28px
  }
  .event-card p {
    font-size:13px
  }
  .bar {
    gap:8px
  }
  .bar button {
    font-size:14px
  }
  .bottom-nav {
    padding-left:12px;
    padding-right:12px
  }
  .bottom-nav button {
    font-size:11px
  }
  .bottom-nav button .ui-icon {
    width:24px;
    height:24px
  }
  .legal-document h2 {
    font-size:32px
  }
  .legal-document h3 {
    font-size:25px
  }
  dialog {
    padding:24px
  }
  dialog h2 {
    font-size:30px
  }
  #user-list {
    grid-template-columns:1fr
  }
  th,td {
    padding:12px 8px;
    font-size:13px
  }
  .view-switch button {
    padding:10px 16px
  }
  .privacy-notice {
    margin-top:24px
  }
  .bubble {
    max-width:100%
  }
}
@media(max-width:359px) {
  main {
    padding-left:16px;
    padding-right:16px
  }
  .brand-header h1 {
    font-size:23px
  }
  .brand-logo {
    flex-basis:54px;
    width:54px;
    height:58px
  }
  .brand-logo img {
    width:116px;
    left:-31px;
    top:-28px
  }
  .brand-header {
    gap:10px
  }
  .brand-eyebrow {
    font-size:8px
  }
  .section-card,.list-card {
    font-size:21px;
    gap:12px
  }
  .welcome-hero h2 {
    font-size:33px
  }
  .event-card {
    display:block
  }
  .date-badge {
    width:56px;
    margin-bottom:16px
  }
  .grid button {
    min-height:40px
  }
  .grid {
    gap:2px
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important;
    transition:none!important
  }
}
/* Shared status/data components. */
.preserve-lines {
  white-space:pre-line
}
.identity-photo {
  object-fit:cover
}
.stats-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin:0 0 24px
}
.stat {
  border:var(--border);
  border-radius:var(--radius);
  padding:24px;
  background:var(--card)
}
.stat dt {
  font-size:14px;
  color:var(--muted)
}
.stat dd {
  font:40px/1.2 var(--serif);
  margin:12px 0 0;
  color:var(--red)
}
@media(max-width:767px) {
  .section-card,.list-card {
    font-size:21px
  }
  .stats-grid {
    gap:8px
  }
  .stat {
    padding:16px 10px
  }
  .stat dt {
    font-size:11px
  }
  .stat dd {
    font-size:30px
  }
}