/* ============================================================
   DC Catholic Connect — warm editorial design system
   Newsreader (display) + Figtree (body) · navy / gold / cream
   ============================================================ */

:root {
  /* palette */
  --cream: #faf6ef;
  --cream-2: #f1eadb;
  --surface: #fffdf8;
  --ink: #1d2433;
  --ink-soft: #6a7280;
  --ink-faint: #98a0ad;
  --navy: #16304d;
  --navy-deep: #0e2138;
  --navy-soft: #e8eef5;
  --gold: #b9924a;
  --gold-deep: #94713a;
  --gold-soft: #f4ead6;
  --line: #e7dfcf;
  --danger: #9c2b3b;
  --danger-soft: #f7e4e4;

  /* type */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* shape */
  --radius: 14px;
  --radius-sm: 9px;
  --shadow-1: 0 1px 2px rgba(22, 36, 56, 0.05), 0 3px 10px rgba(22, 36, 56, 0.05);
  --shadow-2: 0 2px 4px rgba(22, 36, 56, 0.07), 0 10px 28px rgba(22, 36, 56, 0.1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  touch-action: pan-x pan-y; /* allow scrolling, block pinch- and double-tap-zoom */
}

a { color: var(--navy); }

button { font-family: var(--sans); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: #fff;
  padding: 8px 14px;
  border-radius: 0 0 8px 0;
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* ---------- Update bar ---------- */

.update-bar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 80;
  background: var(--navy);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 10px 14px 10px 18px;
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(14, 33, 56, 0.35);
  display: flex;
  align-items: center;
  gap: 12px;
}
.update-bar[hidden] { display: none; }
.update-bar button {
  border: none;
  background: var(--gold);
  color: #fff;
  font-weight: 700;
  font-size: 0.82rem;
  border-radius: 999px;
  padding: 6px 16px;
  cursor: pointer;
}
.update-bar button:hover { background: var(--gold-deep); }

/* ---------- Disclaimer ribbon ---------- */

.disclaimer {
  background: var(--navy-deep);
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.74rem;
  letter-spacing: 0.01em;
  padding: 7px 16px;
  text-align: center;
}
.disclaimer strong { color: var(--gold); font-weight: 600; }
.disclaimer-link {
  background: none;
  border: none;
  color: var(--gold);
  font-size: inherit;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.disclaimer-link:hover { color: #d8b873; }

/* ---------- Hero header ---------- */

.site-header {
  position: relative;
  background:
    radial-gradient(120% 160% at 50% -40%, #2a4a70 0%, var(--navy) 55%, var(--navy-deep) 100%);
  color: #fff;
  padding: 44px 16px 38px;
  text-align: center;
  overflow: hidden;
}

/* faint arch motif */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='90' viewBox='0 0 140 90'%3E%3Cpath d='M10 90 V40 Q10 10 40 10 Q70 10 70 40 V90' fill='none' stroke='%23b9924a' stroke-width='1'/%3E%3Cpath d='M80 90 V50 Q80 25 105 25 Q130 25 130 50 V90' fill='none' stroke='%23b9924a' stroke-width='0.7'/%3E%3C/svg%3E");
  background-size: 140px 90px;
  opacity: 0.1;
  pointer-events: none;
}

.site-header .wordmark {
  position: relative;
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  letter-spacing: 0.01em;
}
.site-header .wordmark .cross {
  color: var(--gold);
  font-weight: 500;
  padding: 0 0.18em;
}
.site-header .wordmark a {
  color: inherit;
  text-decoration: none;
}
.site-header .wordmark a:hover { color: var(--gold-soft); }

.site-header .tagline {
  position: relative;
  margin: 10px 0 0;
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.62);
}

/* Force the two halves of the tagline onto their own lines so the wrap is
   identical on every device instead of breaking wherever the width happens to fall. */
.site-header .tagline .tagline-line2 {
  display: block;
  margin-top: 4px;
}

.site-header .rule {
  position: relative;
  width: 64px;
  height: 2px;
  background: var(--gold);
  margin: 16px auto 0;
  border: none;
}

/* ---------- Sticky controls ---------- */

.controls {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(250, 246, 239, 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  border-bottom: 1px solid var(--line);
  padding: 12px 16px 10px;
}

/* On phones the sticky controls bar (search + tabs + day strip) is tall and ate a
   quarter of the screen while scrolling. Slide it out of view on scroll-down and
   bring it back on scroll-up (class toggled in app.js). Desktop is unaffected. */
@media (max-width: 640px) {
  .controls {
    transition: transform 0.28s ease;
    will-change: transform;
  }
  body.controls-hidden .controls {
    transform: translateY(-100%);
  }
}

.controls-inner { max-width: 920px; margin: 0 auto; }

.controls-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* search */
.search-wrap { flex: 1 1 240px; position: relative; }

.search-wrap input {
  width: 100%;
  padding: 11px 38px 11px 40px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.93rem;
  font-family: var(--sans);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-1);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.search-wrap input::placeholder { color: var(--ink-faint); }
.search-wrap input:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px var(--navy-soft);
}

.search-wrap .search-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--ink-faint);
  pointer-events: none;
}

.search-clear {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: var(--cream-2);
  color: var(--ink-soft);
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
}
.search-clear.visible { display: inline-flex; }
.search-clear:hover { background: var(--line); color: var(--ink); }

/* segmented view control */
.view-tabs {
  display: flex;
  background: var(--cream-2);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
}

.view-tabs button {
  border: none;
  background: transparent;
  padding: 8px 20px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.view-tabs button:hover { color: var(--ink); }
.view-tabs button[aria-selected="true"] {
  background: var(--navy);
  color: #fff;
  box-shadow: var(--shadow-1);
}

/* filters toggle */
.filters-toggle {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-1);
  transition: border-color 0.15s ease;
}
.filters-toggle:hover { border-color: var(--gold); }
.filters-toggle[aria-expanded="true"] { border-color: var(--navy); }

.filters-toggle .badge {
  background: var(--gold);
  color: #fff;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}
.filters-toggle .badge:empty { display: none; }

/* active filter pills */
.active-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}
.active-pills:empty { display: none; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.pill .x { opacity: 0.65; font-size: 0.85em; }
.pill:hover { background: var(--danger); }
.pill.pill-clear {
  background: transparent;
  color: var(--danger);
  border: 1px dashed var(--danger);
}
.pill.pill-clear:hover { background: var(--danger-soft); }

/* ---------- Filter panel ---------- */

.filter-panel {
  max-width: 920px;
  margin: 12px auto 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  padding: 18px 20px;
  display: none;
}
.filter-panel.open { display: block; }

.filter-group { margin-bottom: 16px; }
.filter-group:last-of-type { margin-bottom: 4px; }

.filter-group h3 {
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gold-deep);
}

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  border: 1px solid var(--line);
  background: var(--cream);
  color: var(--ink);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.84rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.13s ease;
}
.chip:hover { border-color: var(--gold); background: var(--gold-soft); }
.chip[aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.area-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 12px 0 7px;
}
.area-label:first-child { margin-top: 0; }

/* ---------- Day strip (Today view) ---------- */

.day-strip-wrap {
  max-width: 920px;
  margin: 14px auto 0;
  display: flex;
  align-items: stretch;
  gap: 6px;
}

.strip-arrow {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0 10px;
  font-size: 1rem;
  flex: 0 0 auto;
  transition: all 0.13s ease;
}
.strip-arrow:hover:not(:disabled) { border-color: var(--navy); color: var(--navy); }
.strip-arrow:disabled { opacity: 0.35; cursor: default; }

.day-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  padding: 2px;
}
.day-strip::-webkit-scrollbar { display: none; }

.day-chip {
  flex: 0 0 64px;
  width: 64px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 7px 10px 8px;
  cursor: pointer;
  text-align: center;
  transition: all 0.13s ease;
  color: var(--ink);
}
.day-chip:hover { border-color: var(--gold); }

.day-chip .dow {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
}
.day-chip .num {
  display: block;
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.25;
}
.day-chip .lbl {
  display: block;
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--gold-deep);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  min-height: 0.8em;
}

.day-chip[aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.day-chip[aria-pressed="true"] .dow { color: rgba(255, 255, 255, 0.6); }
.day-chip[aria-pressed="true"] .lbl { color: var(--gold); }

/* ---------- Main ---------- */

main {
  max-width: 920px;
  margin: 0 auto;
  padding: 26px 16px 64px;
}

.result-summary {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin: 0 0 18px;
}

/* day heading (Today view) */
.day-heading {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 4px;
}

.day-heading h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.7rem;
  letter-spacing: 0.005em;
}

.today-tag {
  background: var(--gold);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-radius: 999px;
  padding: 3px 11px;
  transform: translateY(-3px);
}

.day-sub {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 0 0 20px;
}

.group-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gold-deep);
  margin: 26px 0 12px;
}
.group-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.cards { display: grid; gap: 12px; }

/* ---------- Cards ---------- */

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 15px 18px 14px;
  display: flex;
  gap: 16px;
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: var(--gold);
  border-left-color: var(--gold);
}
.card.mass-card { border-left-color: var(--navy); }
.card.mass-card:hover { border-color: var(--navy); }
.card.confession-card { border-left-color: var(--gold-deep); }
.card.confession-card:hover { border-color: var(--gold-deep); }
.card.confession-card .time-main { color: var(--gold-deep); }

.card .time-col {
  flex: 0 0 88px;
  padding-top: 2px;
}
.card .time-col .time-main {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--navy);
  line-height: 1.2;
}
.card .time-col .time-sub {
  display: block;
  color: var(--ink-soft);
  font-size: 0.72rem;
  margin-top: 3px;
  line-height: 1.35;
}

.card .body-col { flex: 1; min-width: 0; }

.card h4 {
  margin: 0 0 3px;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.3;
}

.card h4 a { color: var(--ink); text-decoration: none; }
.card h4 a::after { content: ""; position: absolute; inset: 0; } /* stretched link */
.card:hover h4 a { color: var(--navy); }
.card h4 a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.card .venue { font-size: 0.84rem; color: var(--ink-soft); margin-bottom: 4px; }
.card .desc { font-size: 0.86rem; color: var(--ink); margin: 5px 0 8px; line-height: 1.5; }

.card .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.tag {
  background: var(--navy-soft);
  color: var(--navy);
  border-radius: 999px;
  padding: 2.5px 10px;
  font-size: 0.72rem;
  font-weight: 600;
}
.tag.hood { background: var(--gold-soft); color: var(--gold-deep); }
.tag.approx { background: var(--danger-soft); color: var(--danger); }

.addr {
  position: relative;
  z-index: 1; /* above the stretched link */
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-top: 8px;
}
.addr a { color: var(--navy); font-weight: 600; text-decoration: none; }
.addr a:hover { text-decoration: underline; }

.card-note {
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-style: italic;
  margin: 2px 0 6px;
}

.mass-times { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; }
.mass-time {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 2.5px 9px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
}
.mass-time .note { font-weight: 400; color: var(--ink-soft); }

.ext-icon {
  color: var(--ink-faint);
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: 4px;
  font-size: 0.85rem;
  transition: color 0.14s ease, transform 0.14s ease;
}
.card:hover .ext-icon { color: var(--gold); transform: translate(1px, -1px); }

/* card action buttons (sit above the stretched title link) */
.card-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.card-action {
  border: 1px solid var(--line);
  background: var(--cream);
  color: var(--navy);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.13s ease;
}
.card-action:hover { border-color: var(--navy); background: var(--navy-soft); }
.card-action.detail { color: var(--gold-deep); }
.card-action.detail:hover { border-color: var(--gold); background: var(--gold-soft); }

/* chip sublabels (time-of-day) */
.chip-sub { opacity: 0.6; font-weight: 400; font-size: 0.92em; }
.chip[aria-pressed="true"] .chip-sub { opacity: 0.8; }

/* ---------- Parish detail modal ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14, 33, 56, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh 16px 24px;
  z-index: 60;
  overflow-y: auto;
}
.modal-overlay[hidden] { display: none; }

.modal {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: 0 12px 48px rgba(14, 33, 56, 0.3);
  max-width: 560px;
  width: 100%;
  padding: 28px 28px 26px;
  animation: modal-in 0.16s ease;
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: none;
  background: var(--cream-2);
  color: var(--ink-soft);
  border-radius: 50%;
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-close:hover { background: var(--line); color: var(--ink); }

.modal-kicker {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold-deep);
  margin: 0 0 4px;
}
.modal-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.5rem;
  margin: 0 0 8px;
  padding-right: 36px;
  line-height: 1.2;
}
.modal-addr { font-size: 0.86rem; color: var(--ink-soft); margin: 0 0 10px; }
.modal-addr a { color: var(--navy); font-weight: 600; text-decoration: none; }
.modal-addr a:hover { text-decoration: underline; }
.modal-note { font-size: 0.88rem; color: var(--ink); margin: 0 0 6px; font-style: italic; }

.modal-h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.05rem;
  margin: 20px 0 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line);
}

.sched-grid { display: flex; flex-direction: column; gap: 8px; }
.sched-row { display: flex; gap: 12px; align-items: baseline; }
.sched-day {
  flex: 0 0 86px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--navy);
}
.sched-times { display: flex; flex-wrap: wrap; gap: 6px; }

.modal-list { margin: 0; padding-left: 18px; }
.modal-list li { font-size: 0.88rem; margin-bottom: 4px; }
.modal-muted, .modal-verified { font-size: 0.82rem; color: var(--ink-soft); }
.modal-verified { margin-top: 14px; }

.modal-groups { display: flex; flex-direction: column; gap: 6px; }
.modal-group {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px 13px;
  transition: border-color 0.13s ease, background 0.13s ease;
}
.modal-group:hover { border-color: var(--gold); background: var(--gold-soft); }
.mg-title { font-weight: 600; font-size: 0.88rem; color: var(--ink); }
.mg-time { font-size: 0.78rem; color: var(--ink-soft); white-space: nowrap; }

.modal-cta {
  display: inline-block;
  margin-top: 20px;
  background: var(--navy);
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 0.9rem;
  font-weight: 600;
}
.modal-cta:hover { background: var(--navy-deep); }

/* ---------- Upcoming agenda ---------- */

.month-label {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.45rem;
  color: var(--ink);
  margin: 34px 0 6px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.month-label:first-child { margin-top: 0; }
.month-label::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--gold);
  opacity: 0.5;
}

.agenda-day { margin: 20px 0 0; }

.agenda-day-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.agenda-date {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--navy);
}
.agenda-dow {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
}

.upcoming-note {
  font-size: 0.8rem;
  color: var(--ink-soft);
  background: var(--cream-2);
  border-radius: var(--radius-sm);
  padding: 9px 14px;
  margin: 0 0 8px;
}

.load-more {
  display: block;
  margin: 30px auto 0;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--navy);
  font-weight: 600;
  border-radius: 999px;
  padding: 11px 30px;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: all 0.14s ease;
}
.load-more:hover { border-color: var(--navy); box-shadow: var(--shadow-2); }

.empty {
  text-align: center;
  color: var(--ink-soft);
  padding: 56px 10px;
  font-size: 0.94rem;
}
.empty .empty-icon {
  display: block;
  font-size: 1.6rem;
  color: var(--gold);
  margin-bottom: 10px;
}

/* ---------- Pagination (Upcoming) ---------- */

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 32px 0 0;
}

.pager button {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--navy);
  font-weight: 600;
  border-radius: 999px;
  padding: 9px 20px;
  font-size: 0.88rem;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: all 0.14s ease;
}
.pager button:hover:not(:disabled) { border-color: var(--navy); box-shadow: var(--shadow-2); }
.pager button:disabled { opacity: 0.35; cursor: default; box-shadow: none; }

.pg-info { font-size: 0.82rem; color: var(--ink-soft); min-width: 90px; text-align: center; }

/* ---------- Contact page ---------- */

.contact-wrap { max-width: 620px; margin: 8px auto 0; }

.contact-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.7rem;
  margin: 0 0 16px;
}

.prose {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 14px;
}

.contact-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 22px 24px 24px;
  margin-top: 28px;
}

.contact-card h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.2rem;
  margin: 0 0 10px;
}

.hidden-field { display: none; }

.form-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold-deep);
  margin: 16px 0 6px;
}
.form-label .optional {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--ink-faint);
}

.contact-card textarea,
.contact-card input[type="email"] {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--ink);
  background: var(--cream);
  resize: vertical;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.contact-card textarea:focus,
.contact-card input[type="email"]:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px var(--navy-soft);
  background: var(--surface);
}

.submit-btn {
  margin-top: 18px;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 11px 30px;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.submit-btn:hover { background: var(--navy-deep); box-shadow: var(--shadow-2); }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--cream-2);
  border-top: 1px solid var(--line);
  padding: 30px 16px 42px;
  text-align: center;
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.site-footer p { max-width: 720px; margin: 5px auto; }
.site-footer a { color: var(--navy); font-weight: 600; }
.footer-link {
  background: none;
  border: none;
  color: var(--navy);
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-link:hover { color: var(--gold-deep); }

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
  .card { flex-direction: column; gap: 7px; padding: 14px 15px 13px; }
  .card .time-col { flex: none; display: flex; align-items: baseline; gap: 8px; }
  .card .time-col .time-sub { margin-top: 0; }
  .day-heading h2 { font-size: 1.45rem; }
  .controls-row { gap: 8px; }
  .view-tabs { order: 3; width: 100%; }
  .view-tabs button { flex: 1; }

  /* The filter panel lives inside the sticky .controls bar. On a phone the full
     list of filter groups is taller than the screen, so the sticky bar would pin
     to the top and the lower filters became unreachable. Cap the open panel to
     the space below the controls chrome and let it scroll on its own instead. */
  .filter-panel.open {
    max-height: calc(100vh - 210px);
    max-height: calc(100dvh - 210px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }

  /* iOS Safari zooms the whole page in when you focus an input whose text is
     smaller than 16px. Keep form controls at 16px on phones so tapping the
     search box or contact fields never triggers an accidental zoom. */
  .search-wrap input,
  .contact-card textarea,
  .contact-card input[type="email"] {
    font-size: 16px;
  }
}