/* ============================================================
   ICKSP Ireland – style.css
   Classic-premium liturgical design system
   Burgundy #8c0e21 · Gold #c9a227 · Green #2E5D3A · Blue #6c96b2 · Cream #fcf3e3
   ============================================================ */

/* --------------------------------------------------------------------------
   1. Design Tokens (Custom Properties)
   -------------------------------------------------------------------------- */
:root {
  /* Core palette */
  --burgundy:       #8c0e21;
  --burgundy-dark:  #6b0a19;
  --burgundy-light: #a8122a;
  --gold:           #c9a227;
  --gold-dark:      #a8871f;
  --gold-light:     #e0be48;
  --cream:          #fcf3e3;            /* legacy, used as text colour on dark hero/footer */
  --cream-dark:     #f5e8d0;            /* legacy, retained for backwards compat */
  --vellum:         #e3dac1;            /* page background — aged manuscript / old missal page */
  --vellum-dark:    #d4c8a8;            /* alternating-section background, image placeholders */
  --dark:           #2d2218;
  --slate:          #3d3229;
  --slate-dark:     #1a1410;
  --green:          #2E5D3A;
  --green-dark:     #1B3D26;
  --green-light:    #3D7A4F;
  --blue:           #1D214D;
  --blue-dark:      #151838;
  --blue-deep:      #111430;
  --blue-light:     #3d6d8f;
  --blue-tint:      #eef4f8;

  /* Semantic colors */
  --bg:             var(--vellum-dark);  /* unified with --bg-alt so all cream sections match "Where We Serve" */
  --bg-alt:         var(--vellum-dark);
  --bg-card:        #ffffff;
  --bg-dark:        var(--slate-dark);
  --text:           var(--dark);
  --text-muted:     #6b5e52;
  --text-light:     rgba(255,255,255,.85);
  --border:         #e8dcc8;
  --shadow:         rgba(45,34,24,.08);

  /* Footer */
  --footer-bg:      var(--slate-dark);
  --footer-text:    #c5b9a8;

  /* Typography */
  --ff-heading:     'EB Garamond', Garamond, Baskerville, Cambria, Georgia, serif;
  --ff-body:        'EB Garamond', Garamond, Baskerville, Cambria, Georgia, serif;
  --ff-ui:          'Source Sans 3', 'Source Sans Pro', system-ui, -apple-system, sans-serif;

  --fs-xs:    0.75rem;
  --fs-sm:    0.875rem;
  --fs-base:  1rem;
  --fs-md:    1.125rem;
  --fs-lg:    1.25rem;
  --fs-xl:    1.5rem;
  --fs-2xl:   2rem;
  --fs-3xl:   2.5rem;
  --fs-4xl:   3.25rem;
  --fs-5xl:   4rem;

  /* Spacing */
  --sp-xs:  0.25rem;
  --sp-sm:  0.5rem;
  --sp-md:  1rem;
  --sp-lg:  1.5rem;
  --sp-xl:  2rem;
  --sp-2xl: 3rem;
  --sp-3xl: 4rem;
  --sp-4xl: 6rem;

  /* Radii */
  --radius:      8px;
  --radius-lg:   12px;
  --radius-full: 9999px;

  /* Transitions */
  --transition:      0.35s cubic-bezier(.22,1,.36,1);
  --transition-fast: 0.2s ease;

  /* Layout */
  --max-w:    1200px;
  --header-h: 150px;
}

/* --------------------------------------------------------------------------
   2. Reset & Base
   -------------------------------------------------------------------------- */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; background: var(--bg); }
body {
  width: 100%;
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
h1,h2,h3,h4,h5 {
  font-family: var(--ff-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--dark);
}
h1 { font-size: clamp(2.5rem, 5vw, var(--fs-5xl)); }
h2 { font-size: clamp(1.8rem, 3.5vw, var(--fs-3xl)); }
h3 { font-size: var(--fs-xl); }
p { margin-bottom: var(--sp-md); }
p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   3. Layout Utilities
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--sp-xl);
}
.section-header {
  text-align: center;
  max-width: 700px;
  margin-inline: auto;
  margin-bottom: var(--sp-3xl);
}
.section-header .label, .split-text .label {
  display: inline-block;
  font-family: "Volkhov", Georgia, serif;
  font-style: normal;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: var(--sp-sm);
}
.section-header h2 { margin-bottom: var(--sp-md); }
.section-header p, .split-text > p:first-of-type { color: #5a4d3f; font-size: var(--fs-lg); font-family: "IM Fell English", Garamond, Georgia, serif; font-style: italic; line-height: 1.7; }
.section-divider {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
  border-radius: var(--radius-full);
  margin: var(--sp-md) auto;
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  font-family: var(--ff-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 0.85em 1.8em;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  white-space: nowrap;
  cursor: pointer;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary {
  background: var(--burgundy);
  color: #fff;
  box-shadow: 0 4px 14px rgba(140,14,33,.25);
}
.btn-primary:hover {
  background: var(--burgundy-light);
  box-shadow: 0 6px 20px rgba(140,14,33,.35);
}
.btn-secondary {
  background: rgba(0,0,0,0.005);  /* near-invisible: ensures touch events fire on mobile */
  color: #fff;
  border: 2px solid rgba(255,255,255,.4);
}
.btn-secondary:hover {
  background: rgba(255,255,255,.1);
  border-color: #fff;
}
.btn-outline {
  background: transparent;
  color: var(--burgundy);
  border: 2px solid var(--burgundy);
}
.btn-outline:hover {
  background: var(--burgundy);
  color: #fff;
}
.btn-gold {
  background: var(--gold);
  color: var(--dark);
  box-shadow: 0 4px 14px rgba(201,162,39,.25);
}
.btn-gold:hover {
  background: var(--gold-light);
  box-shadow: 0 6px 20px rgba(201,162,39,.35);
}
.btn-green {
  background: var(--green);
  color: #fff;
  box-shadow: 0 4px 14px rgba(46,93,58,.25);
}
.btn-green:hover {
  background: var(--green-light);
  box-shadow: 0 6px 20px rgba(46,93,58,.35);
}
.btn-sm { padding: 0.6em 1.2em; font-size: var(--fs-xs); }
.btn-lg { padding: 1em 2.4em; font-size: var(--fs-base); }
.btn svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1060;
  transition: box-shadow var(--transition);
}
.site-header.scrolled {
  box-shadow: 0 2px 20px rgba(0,0,0,.2);
}
/* Top bar — burgundy with logo + title */
.header-top {
  background: var(--burgundy);
  padding: 16px 0;
  position: relative;
}
.header-top .container {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Logo — inline in the burgundy bar, overflows into blue bar */
.site-logo {
  display: block;
  flex-shrink: 0;
  text-decoration: none;
  margin-right: var(--sp-lg);
  margin-bottom: -30px;
  position: relative;
  z-index: 10;
}
.site-logo img {
  height: 100px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 3px 12px rgba(0,0,0,.3));
}
.site-logo:hover { opacity: .85; }
.header-top-title {
  font-family: var(--ff-heading);
  font-size: clamp(1.05rem, 2vw, 1.45rem);
  font-weight: 500;
  color: var(--cream);
  letter-spacing: .03em;
  font-variant: small-caps;
}
.header-ireland {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  font-family: var(--ff-ui);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #fff;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-variant: normal;
  background: rgba(255,255,255,.12);
  padding: 0.15em 0.7em 0.15em 0.5em;
  border-radius: var(--radius-full);
  margin-left: 0.6em;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.header-shamrock {
  width: 15px;
  height: 18px;
  fill: #50C878;
  flex-shrink: 0;
}
.header-shamrock path[stroke-linecap] {
  fill: none;
  stroke: #50C878;
}
/* Apostolate Toggle — positioned absolutely so it doesn't shift the nav */
.apostolate-toggle {
  position: absolute;
  right: var(--sp-xl);
  top: 50%;
  transform: translateY(-50%);
  z-index: 200;
  z-index: 200;
  z-index: 200;
  z-index: 200;
  z-index: 200;
}
.apostolate-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--ff-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  padding: 0.45em 0.9em;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.apostolate-toggle-btn:hover {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.35);
}
.apostolate-toggle-btn[aria-expanded="true"] {
  background: rgba(255,255,255,.2);
}
.apostolate-toggle-chevron {
  transition: transform var(--transition-fast);
}
.apostolate-toggle-btn[aria-expanded="true"] .apostolate-toggle-chevron {
  transform: rotate(180deg);
}
.apostolate-toggle-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  padding: var(--sp-xs) 0;
  z-index: 100;
}
.apostolate-toggle-dropdown.open {
  display: block;
}
.apostolate-toggle-dropdown a {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-lg);
  font-family: var(--ff-heading);
  font-size: var(--fs-base);
  color: var(--text);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.apostolate-toggle-dropdown a:hover {
  background: rgba(140,14,33,.05);
  color: var(--burgundy);
}
.apostolate-toggle-dropdown a.active {
  color: var(--burgundy);
  font-weight: 600;
}
.apostolate-toggle-dropdown a.active::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--burgundy);
  border-radius: 50%;
  flex-shrink: 0;
}
/* Bottom bar — blue with navigation */
.header-bottom {
  background: var(--blue);
  position: relative;
}
.header-bottom-inner {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--sp-xl);
}
/* Main Navigation */
.nav-close { display: none; }
.main-nav {
  display: flex;
  align-items: center;
  gap: 0;
}
/* Desktop: logo behaves like a dropped cap — top aligns with the red bar's
   top, body fills the burgundy band, bottom drops into the blue nav band.
   Title and nav both center true (logo absolute, nav margin-left removed). */
@media (min-width: 1101px) {
  .header-top { position: relative; }
  .site-logo {
    position: absolute;
    left: max(var(--sp-xl), calc(50% - 480px));
    top: 6px;
    margin-right: 0;
    z-index: 100;
  }
  .site-logo img { height: 115px; }
}
.main-nav a {
  font-family: var(--ff-heading);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #fff;
  padding: 0.45em 0.45em;
  white-space: nowrap;
  letter-spacing: .01em;
  position: relative;
  transition: color var(--transition);
  border-right: 1px solid rgba(255,255,255,.12);
}
@media (min-width: 1101px) and (max-width: 1380px) {
  .main-nav a { padding: 0.45em 0.32em; font-size: 0.78rem; letter-spacing: 0; }
}
.main-nav a:first-child {
  border-left: 1px solid rgba(255,255,255,.12);
}
.main-nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: width var(--transition), left var(--transition);
}
.main-nav a:hover,
.main-nav a.active {
  color: var(--gold-light);
  font-weight: 700;
}
.main-nav a:hover::after,
.main-nav a.active::after {
  width: 100%;
  left: 0;
}


/* Province Link (sub-sites only) */
.nav-province-link {
  background: rgba(201,162,39,.15) !important;
  color: var(--gold-light) !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  border-right: 1px solid rgba(201,162,39,.3) !important;
}
.nav-province-link:hover {
  background: rgba(201,162,39,.25) !important;
  color: var(--gold) !important;
}
@media (max-width: 1100px) {
  .main-nav .nav-province-link {
    background: rgba(201,162,39,.08) !important;
    color: var(--gold-dark) !important;
    border-bottom: 2px solid var(--gold) !important;
    font-weight: 700 !important;
  }
}

/* Nav Dropdown */
.nav-dropdown {
  position: relative;
}
.nav-dropdown-trigger {
  cursor: pointer;
}
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 200px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(45,34,24,.12);
  padding: var(--sp-sm) 0;
  z-index: 100;
  opacity: 0;
  transition: opacity .2s ease;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  display: block;
  opacity: 1;
}
.nav-dropdown-menu a {
  display: block;
  padding: var(--sp-sm) var(--sp-lg) !important;
  font-family: var(--ff-ui) !important;
  font-size: var(--fs-sm) !important;
  font-weight: 500 !important;
  color: var(--text) !important;
  border-radius: 0 !important;
  white-space: nowrap;
}
.nav-dropdown-menu a:hover {
  background: rgba(140,14,33,.06) !important;
  color: var(--burgundy) !important;
}

/* News Cards */
.province-news-section { padding: var(--sp-4xl) 0 var(--sp-3xl); }
.news-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xl);
  align-items: flex-start;
}
.news-grid > .news-card { flex: 1 1 340px; max-width: 100%; }
.news-grid > .news-card:only-child { margin-inline: auto; }

/* Arrangement v2 engines (Grid / Tiles / Stacked) live further down — search
   "Layout Studio". The legacy --two/--three flex presets were removed. */
.news-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 4px 20px var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
}
.news-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(45,34,24,.12);
}
.news-card-icon-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  color: rgba(255,255,255,.85);
}
.news-card:hover .news-card-icon-banner {
  color: #fff;
}
.news-card-img {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.news-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.news-card:hover .news-card-img img {
  transform: scale(1.05);
}
.news-card-badge {
  position: absolute;
  top: var(--sp-md);
  left: var(--sp-md);
  font-family: var(--ff-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #fff;
  background: var(--burgundy);
  padding: 0.3em 0.8em;
  border-radius: var(--radius-full);
}
.news-card-body {
  padding: var(--sp-lg);
}
.news-card-date {
  font-family: var(--ff-ui);
  font-size: var(--fs-xs);
  color: var(--gold-dark);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: var(--sp-sm);
}
.news-card-body h3 {
  font-size: var(--fs-xl);
  margin-bottom: var(--sp-sm);
  line-height: 1.3;
}
.news-card-body p {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.news-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--ff-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--burgundy);
  margin-top: var(--sp-md);
  transition: gap var(--transition-fast);
}
.news-card:hover .news-card-link { gap: 0.7em; }

/* News Section */
.news-section {
  padding: var(--sp-3xl) 0;
  background: var(--bg-alt);
}
.news-empty-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-md);
  padding: var(--sp-4xl) var(--sp-xl);
  text-align: center;
  color: var(--text-muted);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 2px dashed var(--border);
}
.news-empty-state svg {
  opacity: 0.4;
  color: var(--gold);
}
.news-empty-state p {
  font-family: var(--ff-ui);
  font-size: var(--fs-md);
  max-width: 400px;
}

/* News Detail (inline expand) */
.news-detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26,20,16,.6);
  backdrop-filter: blur(4px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-xl);
  opacity: 0;
  transition: opacity .3s ease;
}
.news-detail-overlay.visible { opacity: 1; }
.news-detail-modal {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  max-width: 700px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0,0,0,.2);
}
.news-detail-modal-img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.news-detail-modal-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.news-detail-modal-body {
  padding: var(--sp-2xl);
}
.news-detail-modal-body h2 {
  font-size: var(--fs-2xl);
  margin-bottom: var(--sp-sm);
}
.news-detail-modal-meta {
  font-family: var(--ff-ui);
  font-size: var(--fs-xs);
  color: var(--gold-dark);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: var(--sp-lg);
}
.news-detail-modal-body .news-body-content p {
  margin-bottom: var(--sp-md);
  line-height: 1.8;
}
.news-detail-close {
  position: absolute;
  top: var(--sp-md);
  right: var(--sp-md);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
  z-index: 10;
}
.news-detail-close svg { width: 20px; height: 20px; stroke: var(--dark); stroke-width: 2; }

/* Header Actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
}
#search-trigger {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  color: rgba(255,255,255,.7);
  transition: color var(--transition-fast), background var(--transition-fast);
}
#search-trigger:hover { color: #fff; background: rgba(255,255,255,.1); }
.scrolled #search-trigger {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; color: var(--text-muted); }
.scrolled #search-trigger:hover { color: var(--burgundy); background: rgba(140,14,33,.06); }
#search-trigger svg { width: 20px; height: 20px; }

/* Burger */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 10px;
  cursor: pointer;
  z-index: 1100;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  position: relative;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius);
}
.burger span {
  pointer-events: none;
  display: block;
  width: 100%; height: 3px;
  background: #fff;
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.scrolled .burger span { background: #fff; }
.burger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Mobile Overlay */
.mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26,20,16,.6);
  z-index: 1040;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}
.mobile-overlay.active { opacity: 1; pointer-events: auto; }

.header-name-break { display: none; }
.header-ireland--bottom { display: none; }

/* --------------------------------------------------------------------------
   6. Mobile Navigation
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .site-logo img { height: 70px; }
  .site-logo { margin-bottom: -20px; margin-right: var(--sp-md); }
  .main-nav {
    position: fixed;
    top: 0; right: 0; transform: translateX(100%);
    width: 300px; height: 100dvh;
    background: var(--bg-card);
    flex-direction: column;
    align-items: stretch;
    margin-left: 0;
    padding: calc(var(--header-h) / 2 + var(--sp-sm)) var(--sp-md) var(--sp-md);
    gap: var(--sp-xs);
    z-index: 1050;
    overflow-y: auto;
    box-shadow: -4px 0 30px rgba(0,0,0,.15);
    transition: transform var(--transition), display var(--transition) allow-discrete;
    /* Closed: render no box. A position:fixed panel parked at translateX(100%) is NOT
       clipped by body overflow-x:hidden on iOS Safari -> it adds horizontal scroll.
       display:none removes the off-screen box entirely (province has no nav, so it's clean).
       Older Safari without allow-discrete just toggles instantly — still no overflow. */
    display: none;
  }
  .main-nav.open { transform: translateX(0); display: flex; }
  @starting-style { .main-nav.open { transform: translateX(100%); } }
  .nav-close {
    position: absolute;
    top: var(--sp-md);
    right: var(--sp-md);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    color: #C0392B;
    font-size: 36px;
    line-height: 1;
    font-family: var(--ff-heading);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    z-index: 2;
  }
  .nav-close:hover, .nav-close:focus-visible { color: var(--burgundy); outline: none; }

  /* Mobile header layout:
       - Logo is position:absolute so it can overflow header-top vertically
         into header-bottom (the burgundy → blue transition).
       - .header-top gets z-index:2 so the overflowing logo sits ABOVE the
         blue bar visually (siblings otherwise stack in DOM order).
       - Title font is bumped down so the 2-row split fits without crowding.
       - Ireland badge sits left in the blue bar; burger sits right.            */
  .header-top { z-index: 2; }
  .header-top .container {
    justify-content: flex-start;
    align-items: center;
    gap: var(--sp-md);
    padding-left: calc(90px + var(--sp-md) * 2);    /* room for the absolute logo */
    text-align: left;
    overflow: visible;
    min-height: 64px;
  }
  .site-logo {
    position: absolute;
    left: var(--sp-md);
    top: 8px;
    margin: 0;
    z-index: 10;
    height: auto;
  }
  .site-logo img { height: 95px; width: auto; }
  .header-top-title {
    display: block;                /* was inline (span default) — needed so the empty .header-name-break block child produces a real line break */
    text-align: left;
    line-height: 1.2;
    flex: 1;
    min-width: 0;
    font-size: clamp(0.95rem, 4vw, 1.25rem);
  }
  .header-bottom-inner {
    justify-content: space-between;
    padding-inline: var(--sp-md);
  }
  .header-actions { margin-left: auto; }
  /* Mobile: hide BOTH Ireland pills (top + bottom). The region dropdown
     takes the left slot in the blue bar instead, and the burger keeps the
     right slot — no more burger-on-top-of-dropdown overlap. */
  .header-ireland--top    { display: none; }
  .header-ireland--bottom { display: none; }
  .apostolate-toggle {
    position: static;
    transform: none;
    right: auto;
    top: auto;
    order: -1;
    margin-right: auto;
  }
  .apostolate-toggle-dropdown {
    left: 0;
    right: auto;
  }
  /* Empty span between the two title halves: as a block element it forces the
     surrounding inline text into separate anonymous block boxes = a line break. */
  .header-name-break { display: block; }

  /* Liturgy strip slides up out of view on scroll, leaving the header clean */
  .liturgy-strip {
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  .site-header.scrolled .liturgy-strip {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
  }
  .main-nav a {
    color: var(--text);
    padding: var(--sp-md) var(--sp-lg);
    border-radius: 0;
    font-family: var(--ff-heading);
    font-size: var(--fs-lg);
    font-weight: 500;
    letter-spacing: 0;
    border-right: none;
    border-left: none;
    border-bottom: 1px solid var(--border);
  }
  .main-nav a:first-child { border-left: none; }
  .main-nav a::after { display: none; }
  .main-nav a:hover, .main-nav a.active {
    color: var(--burgundy);
    background: rgba(140,14,33,.04);
  }
  .header-actions .btn {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; display: none; }
  .burger { display: flex; }
  .nav-dropdown { position: static; }
  .nav-dropdown-menu {
    display: block !important;
    position: static;
    transform: none;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    padding-left: var(--sp-md);
    opacity: 1 !important;
    min-width: 0;
  }
  .nav-dropdown-trigger { display: none; }
  .nav-dropdown-menu a {
    padding: var(--sp-md) !important;
    font-size: var(--fs-base) !important;
    border-radius: var(--radius) !important;
  }
}

/* --------------------------------------------------------------------------
   7. Hero Section
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--burgundy-dark);
}
.hero-bg img,
.hero-bg video {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Object-position is driven by CSS variables set inline by
     apostolate-hydrate.js so the focal point can differ between the
     desktop and mobile crops. Defaults match the legacy behaviour. */
  object-position: var(--hero-pos-desktop, center 40%);
  position: absolute;
  inset: 0;
}

/* iOS Low Power Mode blocks video autoplay and overlays a native centre play button.
   Hide it so blocked users see a clean poster still (no tap target); the video
   auto-starts on their first touch/scroll via kickstartHeroVideo(). (2026-07-03) */
#hero-media::-webkit-media-controls-start-playback-button,
#hero-media::-webkit-media-controls-play-button {
  -webkit-appearance: none;
  display: none !important;
}
#hero-media::-webkit-media-controls { display: none !important; }
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center 40%, rgba(107,10,25,.45) 0%, rgba(107,10,25,.7) 60%, rgba(107,10,25,.88) 100%),
    linear-gradient(to bottom, rgba(107,10,25,.3) 0%, transparent 30%, transparent 60%, rgba(26,20,16,.6) 100%);
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 900px;
  /* Top padding clears the fixed header; bottom padding leaves room for the
     scroll indicator that's absolutely positioned at the bottom-centre. */
  padding: calc(var(--header-h) + var(--sp-xl)) var(--sp-xl) calc(var(--sp-3xl) * 2.2);
}

/* In-hero "scroll down" cue, positioned at the bottom-centre of the hero
   over the dark video background. */
.hero-scroll-indicator {
  position: absolute;
  left: 50%;
  bottom: calc(var(--sp-2xl) - 8px);
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-family: var(--ff-ui);
  font-size: var(--fs-xs, 0.78rem);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  opacity: 0.78;
  transition: opacity 200ms ease, transform 200ms ease;
  animation: heroScrollBounce 2.4s ease-in-out infinite;
}
.hero-scroll-indicator:hover {
  opacity: 1;
  color: var(--gold-light, #e6c560);
}
.hero-scroll-indicator svg {
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}
@keyframes heroScrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(8px); }
}
@media (max-width: 480px) {
  .hero-scroll-indicator { bottom: var(--sp-2xl); }
  .hero-scroll-indicator svg { width: 20px; height: 20px; }
  .hero-scroll-indicator-label { font-size: 0.7rem; }
}
.hero-inner {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s ease, transform 1s ease;
}
.hero-inner.visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.6s cubic-bezier(.25,.46,.45,.94), transform 1.6s cubic-bezier(.25,.46,.45,.94);
}
.hero-crest {
  width: 90px;
  height: 90px;
  object-fit: contain;
  margin-bottom: var(--sp-lg);
  filter: drop-shadow(0 4px 20px rgba(0,0,0,.3));
  opacity: .92;
}
.hero-label {
  display: inline-block;
  font-family: var(--ff-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--sp-lg);
  padding: var(--sp-sm) var(--sp-lg);
  border: 1px solid rgba(201,162,39,.35);
  border-radius: var(--radius-full);
  background: rgba(201,162,39,.1);
}
.hero h1 {
  color: #fff;
  font-size: clamp(2.8rem, 6.5vw, 5.25rem);
  font-weight: 400;
  margin-bottom: var(--sp-lg);
  text-shadow: 0 2px 30px rgba(0,0,0,.4);
}
.hero-highlight {
  color: var(--gold);
  font-style: italic;
}
.hero-subtitle {
  font-family: var(--ff-body);
  font-size: clamp(1rem, 2vw, var(--fs-lg));
  color: rgba(255,255,255,.92);
  max-width: 650px;
  margin-inline: auto;
  margin-bottom: var(--sp-2xl);
  line-height: 1.8;
}
.hero-btns {
  display: flex;
  gap: var(--sp-md);
  justify-content: center;
  flex-wrap: wrap;
}
/* Royal Gold CTA — primary button inside hero for maximum visibility */
.hero-btns .btn-primary {
  background: var(--gold);
  color: var(--slate-dark);
  border: 2px solid var(--gold-light);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow:
    0 6px 24px rgba(201,162,39,.45),
    0 0 0 1px rgba(255,255,255,.1) inset;
}
.hero-btns .btn-primary:hover {
  background: var(--gold-light);
  border-color: #fff;
  box-shadow:
    0 10px 32px rgba(201,162,39,.6),
    0 0 0 1px rgba(255,255,255,.2) inset;
}

/* Liturgy Strip — daily calendar.
   Absolutely positioned just below the header so it overlays the top of
   the hero image, allowing a true frosted-glass effect via backdrop-filter. */
.liturgy-strip {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 5;
  padding: 0.25em 0;
  color: rgba(255,255,255,.95);
  background: linear-gradient(180deg,
    rgba(27,61,38,.78) 0%,
    rgba(27,61,38,.62) 100%);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-top: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(0,0,0,.20);
}
.liturgy-strip-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-lg);
  flex-wrap: wrap;
  font-family: var(--ff-ui);
  font-size: var(--fs-xs);
  letter-spacing: .02em;
  min-height: 1em;
}
.liturgy-strip-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
}
.liturgy-strip-feast {
  font-family: var(--ff-heading);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-style: italic;
  color: #fff;
}

.liturgy-strip-class {
  font-size: 0.7rem;
  opacity: .65;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.liturgy-strip-divider {
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,.2);
  flex-shrink: 0;
}
.liturgy-strip-color-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,.2);
}
.liturgy-strip-commemoration {
  font-style: italic;
  opacity: .7;
  font-size: 0.7rem;
}
.liturgy-strip-loading {
  opacity: .5;
  font-style: italic;
}
.liturgy-strip-cross {
  width: 12px;
  height: 12px;
  opacity: .5;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  /* Thin single-line strip; content slides horizontally so all fields fit. */
  .liturgy-strip { padding: 0.15em 0; overflow: hidden; }
  .liturgy-strip > .container { padding: 0; max-width: none; overflow: hidden; }
  .liturgy-strip-inner {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    white-space: nowrap;
    width: max-content;
    gap: var(--sp-md);
    animation: liturgy-slide 28s linear infinite;
    font-size: 0.7rem;
  }
  .liturgy-strip-feast { font-size: var(--fs-xs); }
  .liturgy-strip-commemoration { display: inline-flex; }
  .liturgy-strip-class { display: inline-flex; }
  .liturgy-strip-divider { display: inline-block; }
  .liturgy-strip:hover .liturgy-strip-inner,
  .liturgy-strip:focus-within .liturgy-strip-inner {
    animation-play-state: paused;
  }
}
@keyframes liturgy-slide {
  0%   { transform: translateX(100vw); }
  100% { transform: translateX(-100%); }
}

/* --------------------------------------------------------------------------
   Photo Gallery — bento grid
   -------------------------------------------------------------------------- */
.gallery-section {
  padding: var(--sp-4xl) 0;
  background: var(--bg);
  overflow: hidden;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-md);
}
.gallery-item {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  margin: 0;
  cursor: pointer;
  box-shadow: 0 2px 12px var(--shadow);
}
.gallery-item--wide {
  grid-column: span 2;
  aspect-ratio: 16/9;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.22,1,.36,1), filter .6s ease;
  filter: brightness(.92);
}
.gallery-item:hover img {
  transform: scale(1.06);
  filter: brightness(1);
}
.gallery-item figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--sp-lg) var(--sp-lg) var(--sp-md);
  background: linear-gradient(to top, rgba(26,20,16,.7) 0%, transparent 100%);
  font-family: var(--ff-heading);
  font-size: var(--fs-sm);
  font-style: italic;
  color: #fff;
  transform: translateY(100%);
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.gallery-item:hover figcaption {
  transform: translateY(0);
}

@media (max-width: 768px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-sm); }
  .gallery-item--wide { grid-column: span 2; }
  .gallery-item figcaption {
    transform: translateY(0);
    padding: var(--sp-sm) var(--sp-md);
    font-size: var(--fs-xs);
  }
}
@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-xs); }
  .gallery-item { aspect-ratio: 1/1; border-radius: var(--radius); }
  .gallery-item--wide { grid-column: span 2; aspect-ratio: 16/9; }
}

/* --------------------------------------------------------------------------
   8. Mass Times Cards
   -------------------------------------------------------------------------- */
.mass-times { padding: var(--sp-4xl) 0 var(--sp-xl); background: var(--bg); }
.mass-times-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-lg);
}
.mass-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--sp-xl);
  box-shadow: 0 2px 12px var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
  border-top: 4px solid transparent;
  position: relative;
  overflow: hidden;
}
.mass-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 36px rgba(45,34,24,.12);
}
.mass-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--green), var(--blue), var(--gold), var(--burgundy));
}
.mass-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  background: rgba(140,14,33,.06);
  border-radius: var(--radius);
  margin-bottom: var(--sp-lg);
  color: var(--burgundy);
}
.mass-card-icon svg { width: 26px; height: 26px; }
.mass-card h3 {
  font-size: var(--fs-lg);
  margin-bottom: var(--sp-xs);
}
.mass-card-location {
  font-family: var(--ff-ui);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: var(--sp-lg);
}
.mass-card-times {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}
.mass-card-row {
  flex-wrap: wrap;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--fs-sm);
  padding: var(--sp-xs) 0;
  border-bottom: 1px solid var(--border);
}
.mass-card-row:last-child { border-bottom: none; }
.mass-card-day {
  font-family: var(--ff-ui);
  font-weight: 600;
  color: var(--text);
}
.mass-card-time {
  font-family: var(--ff-ui);
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

/* Schedule Panel (dedicated apostolate pages) */
.schedule-panel {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 30px var(--shadow);
  max-width: 750px;
  margin-inline: auto;
}
.schedule-panel-header {
  background: var(--burgundy);
  padding: var(--sp-xl) var(--sp-2xl);
  text-align: center;
}
.schedule-panel-header h3 {
  font-family: var(--ff-heading);
  font-size: var(--fs-2xl);
  color: #fff;
  margin-bottom: var(--sp-xs);
}
.schedule-panel-header p {
  font-family: var(--ff-ui);
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.7);
}
.schedule-panel-header a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.schedule-panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  text-align: center;
}
.schedule-panel-col {
  padding: var(--sp-xl) var(--sp-lg);
  border-right: 1px solid var(--border);
}
.schedule-panel-col:last-child {
  border-right: none;
}
.schedule-panel-col-accent {
  background: var(--blue-tint);
}
.schedule-panel-label {
  font-family: var(--ff-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--burgundy);
  margin-bottom: var(--sp-md);
}
.schedule-panel-time {
  font-family: var(--ff-heading);
  font-size: var(--fs-lg);
  color: var(--dark);
  padding: var(--sp-xs) 0;
  font-weight: 500;
}
.schedule-panel-col-accent .schedule-panel-time {
  font-size: var(--fs-sm);
  font-family: var(--ff-ui);
  color: var(--text-muted);
}
.schedule-panel-grid-single {
  grid-template-columns: 1fr;
}
.schedule-panel-grid-single .schedule-panel-col {
  border-right: none;
}
.schedule-panel-grid-single .schedule-panel-time {
  font-size: var(--fs-2xl);
}
@media (max-width: 600px) {
  .schedule-panel-grid { grid-template-columns: 1fr; }
  .schedule-panel-col {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: var(--sp-lg);
  }
  .schedule-panel-col:last-child { border-bottom: none; }
  .schedule-panel-header { padding: var(--sp-lg); }
  .schedule-panel-header h3 { font-size: var(--fs-xl); }
}

/* --------------------------------------------------------------------------
   9. Feature Cards (Featured Sections on Home)
   -------------------------------------------------------------------------- */
.features { padding: var(--sp-4xl) 0; background: var(--bg-alt); }
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-xl);
}
.feature-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 2px 12px var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 36px rgba(45,34,24,.12);
  color: inherit;
}
.feature-card-img {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--vellum-dark);
}
.feature-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.feature-card:hover .feature-card-img img { transform: scale(1.05); }
.feature-card-body {
  padding: var(--sp-xl);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.feature-card-body h3 {
  font-size: var(--fs-lg);
  margin-bottom: var(--sp-sm);
}
.feature-card-body p {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  flex-grow: 1;
}
.feature-card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  font-family: var(--ff-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--burgundy);
  margin-top: var(--sp-md);
  transition: gap var(--transition-fast);
}
.feature-card:hover .feature-card-link { gap: var(--sp-sm); color: var(--green); }
.feature-card-link svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   10. About Preview / Split Section
   -------------------------------------------------------------------------- */
.about-preview { padding: var(--sp-4xl) 0; background: var(--bg); }
.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3xl);
  align-items: center;
}
.split-img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(45,34,24,.12);
  aspect-ratio: 4/3;
  background: var(--vellum-dark);
}
.split-img img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.split-text h2 { margin-bottom: var(--sp-lg); }
.split-text p {
  color: var(--text-muted);
  font-size: var(--fs-md);
  margin-bottom: var(--sp-lg);
}

/* --------------------------------------------------------------------------
   11. Apostolate Cards
   -------------------------------------------------------------------------- */
.apostolate-preview { padding: var(--sp-4xl) 0; background: var(--bg-alt); }
.apostolate-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-lg);
}
.apostolate-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--sp-xl);
  text-align: center;
  box-shadow: 0 2px 12px var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
  text-decoration: none;
  color: inherit;
  display: block;
}
.apostolate-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 36px rgba(45,34,24,.12);
  color: inherit;
}
.apostolate-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  margin: 0 auto var(--sp-lg);
  border-radius: 50%;
  background: rgba(46,93,58,.08);
  color: var(--green);
}
.apostolate-card-icon svg { width: 28px; height: 28px; }
.apostolate-card h3 {
  font-size: var(--fs-base);
  margin-bottom: var(--sp-xs);
}
.apostolate-card p {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* Apostolate Image Cards (homepage) */
.apostolate-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-lg);
}
.apostolate-img-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 2px 16px var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}
.apostolate-img-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(45,34,24,.14);
  color: inherit;
}
.apostolate-img-card-photo {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.apostolate-img-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition), filter 0.6s ease;
  filter: sepia(0.85) saturate(0.6) contrast(1.05) brightness(0.9);
}
.apostolate-img-card:hover .apostolate-img-card-photo img,
.apostolate-img-card.is-spotlit .apostolate-img-card-photo img {
  transform: scale(1.06);
  filter: saturate(1.05) contrast(1.04);
}
.apostolate-img-card-body {
  padding: var(--sp-lg) var(--sp-xl) var(--sp-xl);
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.apostolate-img-card-body h3 {
  font-size: var(--fs-lg);
  margin-bottom: var(--sp-xs);
}
.apostolate-img-card-body p {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: var(--sp-lg);
  flex: 1;
}
.apostolate-img-card-body .btn {
  margin-top: auto;
}

/* --------------------------------------------------------------------------
   12. Quote Section
   -------------------------------------------------------------------------- */
.quote-section {
  padding: var(--sp-3xl) 0;
  background: var(--burgundy-dark);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.quote-section::before {
  overflow: hidden;
  content: '\201C';
  position: absolute;
  top: -20px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--ff-heading);
  font-size: 15rem;
  color: rgba(255,255,255,.04);
  line-height: 1;
  pointer-events: none;
}
.quote-section blockquote {
  font-family: var(--ff-heading);
  font-size: clamp(1.3rem, 2.5vw, var(--fs-2xl));
  font-style: italic;
  color: #fff;
  max-width: 750px;
  margin-inline: auto;
  padding: 0;
  border-left: none;
  background: none;
}
.quote-section cite {
  display: block;
  margin-top: var(--sp-lg);
  font-family: var(--ff-ui);
  font-size: var(--fs-sm);
  font-style: normal;
  color: var(--gold);
  letter-spacing: .05em;
}

/* --------------------------------------------------------------------------
   13. Newsletter Section
   -------------------------------------------------------------------------- */
.newsletter-section {
  padding: var(--sp-3xl) 0;
  background: var(--green-dark);
  color: #fff;
  text-align: center;
}
.newsletter-section h2 { color: #fff; margin-bottom: var(--sp-sm); }
.newsletter-section p {
  color: rgba(255,255,255,.75);
  max-width: 520px;
  margin-inline: auto;
  margin-bottom: var(--sp-xl);
}
.newsletter-form {
  display: flex;
  max-width: 480px;
  margin-inline: auto;
  gap: var(--sp-sm);
}
.newsletter-form input[type="email"] {
  flex: 1;
  padding: .85em 1.2em;
  border: 2px solid rgba(255,255,255,.20);
  border-radius: var(--radius);
  background: rgba(255,255,255,.10);
  color: #fff;
  font-family: var(--ff-ui);
  font-size: var(--fs-sm);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.newsletter-form input[type="email"]::placeholder { color: rgba(255,255,255,.50); }
.newsletter-form input[type="email"]:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255,255,255,.15);
}
.newsletter-form .btn {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; flex-shrink: 0; }
.newsletter-checkboxes {
  margin-top: var(--sp-lg);
  text-align: center;
}
.newsletter-checkboxes-label {
  display: block;
  font-family: var(--ff-ui);
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.55);
  margin-bottom: var(--sp-sm);
  letter-spacing: .03em;
}
.newsletter-checkboxes-grid {
  display: flex;
  justify-content: center;
  gap: var(--sp-sm) var(--sp-lg);
  flex-wrap: wrap;
}
.newsletter-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--ff-ui);
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.75);
  cursor: pointer;
  transition: color var(--transition-fast);
}
.newsletter-checkbox:hover { color: #fff; }
.newsletter-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--gold);
  cursor: pointer;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   14. Page Hero (Internal Pages)
   -------------------------------------------------------------------------- */
.page-hero {
  background: var(--blue-deep);
  padding: calc(var(--header-h) + var(--sp-4xl)) 0 var(--sp-3xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.page-hero h1 {
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.2rem);
  margin-bottom: var(--sp-sm);
  position: relative;
}
.page-hero p {
  color: rgba(255,255,255,.70);
  font-size: var(--fs-md);
  max-width: 600px;
  margin-inline: auto;
  position: relative;
}

/* Breadcrumb */
.breadcrumb-bar {
  background: rgba(0,0,0,.10);
  padding: var(--sp-md) 0;
  position: relative;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  flex-wrap: wrap;
  font-family: var(--ff-ui);
  font-size: var(--fs-sm);
}
.breadcrumb a {
  color: rgba(255,255,255,.60);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.breadcrumb a:hover { color: #fff; }
.breadcrumb-sep { color: rgba(255,255,255,.30); font-size: var(--fs-xs); }
.breadcrumb-current { color: var(--gold); font-weight: 500; }

/* --------------------------------------------------------------------------
   15. Apostolate Detail Page
   -------------------------------------------------------------------------- */
.apostolate-section { padding: var(--sp-4xl) 0; }
.apostolate-section:nth-child(even) { background: var(--bg-alt); }
.apostolate-section:nth-child(odd) { background: var(--bg); }
.apostolate-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3xl);
  align-items: start;
}
.apostolate-detail.reverse .apostolate-detail-text { order: -1; }
.apostolate-detail-img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(45,34,24,.12);
  aspect-ratio: 4/3;
  background: var(--vellum-dark);
}
.apostolate-detail-img img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.apostolate-detail-text h2 { margin-bottom: var(--sp-sm); }
.apostolate-detail-text .subtitle {
  font-family: var(--ff-ui);
  font-size: var(--fs-sm);
  color: var(--green);
  font-weight: 600;
  margin-bottom: var(--sp-lg);
}
.apostolate-detail-text p {
  color: var(--text-muted);
  font-size: var(--fs-md);
  margin-bottom: var(--sp-md);
}
.apostolate-info-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  margin-top: var(--sp-xl);
}
.apostolate-info-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-md);
}
.apostolate-info-item svg {
  width: 20px; height: 20px;
  color: var(--burgundy);
  flex-shrink: 0;
  margin-top: 3px;
}
.apostolate-info-item span {
  font-family: var(--ff-ui);
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.6;
}
.apostolate-info-item a {
  color: var(--burgundy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Visit Apostolate Button */
.apostolate-visit-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  margin-top: var(--sp-2xl);
  font-family: var(--ff-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--burgundy);
  text-decoration: none;
  padding: 0.9em 1.6em 0.9em 2em;
  border: 2px solid var(--burgundy);
  border-radius: var(--radius);
  transition: color var(--transition), background var(--transition), border-color var(--transition), gap var(--transition);
}
.apostolate-visit-btn svg {
  width: 18px;
  height: 18px;
  transition: transform var(--transition);
}
.apostolate-visit-btn:hover {
  background: var(--burgundy);
  color: #fff;
  gap: var(--sp-md);
}
.apostolate-visit-btn:hover svg {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   16. Video Section (Recorded Masses)
   -------------------------------------------------------------------------- */
.video-section { padding: var(--sp-4xl) 0; background: var(--bg); }
.video-section-grid { background: var(--bg-alt); }

/* Featured Video */
.video-featured {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--sp-2xl);
  align-items: center;
}
.video-embed {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(45,34,24,.15);
  background: var(--slate);
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: none;
}
.video-featured-badge {
  display: inline-block;
  font-family: var(--ff-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green);
  background: rgba(46,93,58,.08);
  border: 1px solid rgba(46,93,58,.2);
  padding: var(--sp-xs) var(--sp-md);
  border-radius: var(--radius-full);
  margin-bottom: var(--sp-md);
}
.video-featured-info h3 {
  font-size: var(--fs-2xl);
  margin-bottom: var(--sp-sm);
}
.video-featured-date {
  font-family: var(--ff-ui);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: var(--sp-xs);
}
.video-featured-views {
  font-family: var(--ff-ui);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* Video Grid */
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-xl);
}
.video-card {
  background: rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(45, 34, 24, 0.05);
  transition: transform var(--transition), box-shadow var(--transition);
  text-decoration: none;
  color: inherit;
  display: block;
}
.video-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 36px rgba(45,34,24,.12);
  color: inherit;
}
.video-card-thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--slate);
}
.video-card-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.video-card:hover .video-card-thumb img { transform: scale(1.05); }
.video-card-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.2);
  transition: background var(--transition-fast);
}
.video-card:hover .video-card-play { background: rgba(0,0,0,.35); }
.video-card-body {
  padding: var(--sp-lg);
}
.video-card-body h3 {
  font-size: var(--fs-base);
  font-family: var(--ff-ui);
  font-weight: 600;
  margin-bottom: var(--sp-xs);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.video-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  font-family: var(--ff-ui);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.video-card-views {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.video-card-views svg { opacity: .6; }
/* Upcoming vs Past video badges */
.video-card-badge {
  position: absolute;
  top: var(--sp-sm);
  left: var(--sp-sm);
  font-family: var(--ff-ui);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 0.3em 0.7em;
  border-radius: var(--radius-full);
  z-index: 2;
}
.video-card-badge--upcoming {
  background: var(--gold);
  color: var(--slate-dark);
}
.video-card--upcoming .video-card-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(26,20,16,.35);
  z-index: 1;
}
.video-card-play--upcoming {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  background: rgba(0,0,0,.15);
}
.video-featured-badge--upcoming {
  background: rgba(201,162,39,.12);
  border-color: rgba(201,162,39,.3);
  color: var(--gold-dark);
}
.video-section-subtitle {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  font-family: var(--ff-ui);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.video-section-subtitle svg { opacity: .5; }

.video-grid-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--sp-3xl);
  color: var(--text-muted);
  font-style: italic;
}

/* --------------------------------------------------------------------------
   16b. About Page — Pillars, Stats, Timeline
   -------------------------------------------------------------------------- */

/* Three Pillars — typographic treatment.
   No icons, no backgrounds, no shadows, no rounded corners. Three columns
   separated by hairline gold rules act as architectural pillars; numerals
   carry the visual hierarchy. Restraint reads as classical confidence. */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: var(--sp-2xl);
  border-top:    1px solid rgba(201,162,39,.32);
  border-bottom: 1px solid rgba(201,162,39,.32);
  padding: var(--sp-2xl) 0;
}
.pillar-card {
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: var(--sp-lg) var(--sp-xl);
  text-align: center;
  border-left: 1px solid rgba(201,162,39,.32);
  transition: none;
}
.pillar-card:first-child { border-left: none; }
.pillar-card:hover { transform: none; box-shadow: none; }
.pillar-numeral {
  font-family: "Volkhov", Garamond, Georgia, serif;
  font-size: clamp(2.6rem, 5vw, 4rem);
  font-weight: 400;
  line-height: 1;
  color: var(--gold);
  margin-bottom: var(--sp-sm);
  letter-spacing: 0.04em;
  transition: color 0.4s ease;
}
.pillar-card:hover .pillar-numeral { color: var(--burgundy); }
.pillar-latin {
  font-family: "IM Fell English", Garamond, Georgia, serif;
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--burgundy);
  margin-bottom: var(--sp-md);
  letter-spacing: 0.01em;
}
.pillar-card h3 {
  font-family: var(--ff-ui);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text);
  margin-bottom: var(--sp-md);
}
.pillar-card p {
  font-family: var(--ff-body);
  font-size: var(--fs-md);
  line-height: 1.85;
  color: var(--text-muted);
  text-align: center;
  max-width: 36ch;
  margin-inline: auto;
}
.pillars-grid--triptych .pillar-card {
  background: none;
  box-shadow: none;
  border-radius: 0;
  border-left: 1px solid rgba(201,162,39,.36);
  padding: var(--sp-2xl) var(--sp-xl) var(--sp-xl);
  text-align: center;
  transition: none;
}
.pillars-grid--triptych .pillar-card:first-child { border-left: none; }
.pillars-grid--triptych .pillar-card:hover { transform: none; box-shadow: none; }

/* Centre panel: faint gold wash + slightly more inner padding so the symbol
   sits a touch higher and the column reads as the visual apex.            */
.pillar-card--centre {
  background: rgba(201,162,39,.045);
  padding-top: var(--sp-2xl) !important;
}

.pillar-symbol {
  display: flex;
  justify-content: center;
  margin: 0 auto var(--sp-lg);
  color: var(--gold);
}
.pillar-symbol-svg { width: 32px; height: auto; }
.pillar-card--centre .pillar-symbol-svg { width: 38px; }
.pillar-card:hover .pillar-symbol { color: var(--burgundy); }

.pillar-latin {
  font-family: "IM Fell English", Garamond, Georgia, serif;
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--burgundy);
  margin-bottom: var(--sp-md);
  letter-spacing: 0.01em;
}

.pillars-grid--triptych .pillar-card h3 {
  font-family: var(--ff-heading);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--sp-md);
  letter-spacing: 0.005em;
}
.pillars-grid--triptych .pillar-card p {
  font-family: var(--ff-body);
  font-size: var(--fs-md);
  line-height: 1.85;
  color: var(--text-muted);
  text-align: center;
  max-width: 36ch;
  margin-inline: auto;
}

/* Stats banner */
.about-stats {
  padding: var(--sp-3xl) 0;
  background: var(--green-dark);
  color: #fff;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-xl);
  text-align: center;
}
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-xs);
}
.stat-number {
  font-family: "EB Garamond", Garamond, Baskerville, Georgia, serif;
  font-size: var(--fs-4xl);
  font-weight: 600;
  color: var(--gold-light);
  line-height: 1.1;
  letter-spacing: 0.02em;
}
.stat-label {
  font-family: var(--ff-ui);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .04em;
  color: rgba(255,255,255,.75);
}

/* Timeline — centred zig-zag with frosted-glass cards on a rail that fills as
   you scroll. Wired up by /js/timeline.js (sets `lit` on each item once the
   coloured rail-fill leading edge has crossed its dot). */
.timeline {
  position: relative;
  max-width: 920px;
  margin: var(--sp-2xl) auto 0;
  padding: 1rem 0;
}
.timeline-rail-bg,
.timeline-rail-fill {
  position: absolute;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  pointer-events: none;
}
.timeline-rail-bg {
  top: 0; bottom: 0;
  background: rgba(184,168,140,.35);
}
.timeline-rail-fill {
  top: 0;
  height: 0;
  background: linear-gradient(180deg, var(--green), var(--blue), var(--gold), var(--burgundy));
  transition: height .15s linear;
  box-shadow: 0 0 6px rgba(201,162,39,.4);
}
.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 40px 1fr;
  align-items: center;
  margin-bottom: var(--sp-xl);
}
.timeline-item:last-child { margin-bottom: 0; }
.timeline-dot {
  grid-column: 2;
  width: 14px; height: 14px;
  margin: 0 auto;
  border-radius: 50%;
  background: #b8a98a;
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 2px #b8a98a;
  transition: background .4s ease, box-shadow .55s ease, transform .4s ease;
  z-index: 2;
}
.timeline-item.lit .timeline-dot {
  background: var(--gold);
  box-shadow: 0 0 0 2px var(--gold), 0 0 22px 5px rgba(201,162,39,.5);
  transform: scale(1.25);
}
.timeline-content {
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(201,162,39,.28);
  border-radius: 4px;
  padding: 1.1rem 1.35rem;
  box-shadow: 0 8px 32px rgba(45,34,24,.09);
  opacity: 0;
  filter: blur(14px);
  transition: opacity .75s ease, transform .75s ease, filter .75s ease;
}
/* Rail-bg + rail-fill occupy positions 1 & 2 inside .timeline, so the first
   real item is at :nth-child(3) (odd → goes left). */
.timeline-item:nth-child(odd) .timeline-content {
  grid-column: 1;
  text-align: right;
  transform: translateX(-30px);
}
.timeline-item:nth-child(even) .timeline-content {
  grid-column: 3;
  transform: translateX(30px);
}
.timeline-item.lit .timeline-content {
  opacity: 1;
  filter: blur(0);
  transform: translateX(0);
}
.timeline-year {
  font-family: var(--ff-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: var(--sp-xs);
}
.timeline-content h3 {
  font-size: var(--fs-lg);
  margin-bottom: var(--sp-xs);
}
.timeline-content p {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.7;
  margin: 0;
}
@media (max-width: 720px) {
  .timeline-rail-bg, .timeline-rail-fill { left: 20px; }
  .timeline-item { grid-template-columns: 40px 1fr; }
  .timeline-dot { grid-column: 1; margin-left: 13px; }
  .timeline-item:nth-child(odd) .timeline-content,
  .timeline-item:nth-child(even) .timeline-content {
    grid-column: 2;
    text-align: left;
    /* Pre-lit slide-in is 8px (was 20px which clipped past container right edge);
       margin-right keeps the lit card's outer edge clear of the viewport. */
    transform: translateX(8px);
    margin-right: var(--sp-md);
  }
  .timeline-item.lit .timeline-content {
    transform: translateX(0);
  }
}

/* --------------------------------------------------------------------------
   17. Bulletin List
   -------------------------------------------------------------------------- */
.bulletin-section { padding: var(--sp-4xl) 0; background: var(--bg); }
.bulletin-list {
  max-width: 800px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}
.bulletin-item {
  display: flex;
  align-items: center;
  gap: var(--sp-lg);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--sp-lg);
  box-shadow: 0 2px 8px var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
  text-decoration: none;
  color: inherit;
}
.bulletin-item:hover {
  transform: translateX(6px);
  box-shadow: 0 6px 24px rgba(45,34,24,.12);
  color: inherit;
}
.bulletin-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 64px; height: 64px;
  background: rgba(140,14,33,.06);
  border-radius: var(--radius);
  flex-shrink: 0;
}
.bulletin-date-day {
  font-family: var(--ff-heading);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--burgundy);
  line-height: 1;
}
.bulletin-date-month {
  font-family: var(--ff-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}
.bulletin-content { flex-grow: 1; min-width: 0; }
.bulletin-content h3 {
  font-size: var(--fs-base);
  font-family: var(--ff-ui);
  font-weight: 600;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bulletin-content p { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 0; }
.bulletin-download {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius);
  background: rgba(140,14,33,.06);
  color: var(--burgundy);
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.bulletin-item:hover .bulletin-download { background: var(--burgundy); color: #fff; }
.bulletin-download svg { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   18. Patron Cards
   -------------------------------------------------------------------------- */
.patron-section { padding: var(--sp-4xl) 0; background: var(--bg-alt); }
.patron-section--cream { background: var(--bg); }
.patron-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-xl);
}
.patron-card {
  background: rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-lg);
  padding: var(--sp-2xl);
  text-align: center;
  box-shadow: 0 2px 8px rgba(45, 34, 24, 0.05);
  transition: transform var(--transition), box-shadow var(--transition);
}
.patron-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(45,34,24,.12);
}
.patron-card-img {
  width: 140px; height: 140px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto var(--sp-lg);
  border: 4px solid var(--gold);
  box-shadow: 0 4px 16px var(--shadow);
  background: var(--vellum-dark);
}
.patron-card-img img { width: 100%; height: 100%; object-fit: cover; }
.patron-card h3 { font-size: var(--fs-lg); margin-bottom: 2px; }
.patron-card-title {
  font-family: var(--ff-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: var(--sp-md);
}
.patron-card p { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.7; }

/* Featured patron (principal) — horizontal layout */
.patron-featured {
  display: flex;
  align-items: center;
  gap: var(--sp-2xl);
  background: rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-lg);
  padding: var(--sp-2xl) var(--sp-3xl);
  box-shadow: 0 2px 8px rgba(45, 34, 24, 0.05);
  max-width: 800px;
  margin: 0 auto;
}
.patron-featured .patron-card-img {
  width: 180px; height: 180px;
  flex-shrink: 0;
  margin: 0;
}
.patron-featured-text { text-align: left; }
.patron-featured-text h3 { font-size: var(--fs-xl); margin-bottom: 4px; }
.patron-featured-text .patron-card-title { margin-bottom: var(--sp-sm); }
.patron-featured-text p { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.7; }

/* Pillar badge on patron cards */
.patron-pillar {
  display: inline-block;
  font-family: var(--ff-ui);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--burgundy);
  background: rgba(140,14,33,.08);
  padding: 3px 12px;
  border-radius: 20px;
  margin-bottom: var(--sp-sm);
}

/* Institute motto blockquote */
.patron-motto {
  text-align: center;
  max-width: 640px;
  margin: var(--sp-3xl) auto 0;
  padding: var(--sp-xl) 0;
  border-top: 1px solid var(--border);
}
.patron-motto blockquote {
  font-family: var(--ff-heading);
  font-size: var(--fs-xl);
  font-style: italic;
  color: var(--burgundy);
  margin: 0 0 var(--sp-sm);
}
.patron-motto cite {
  font-family: var(--ff-ui);
  font-size: var(--fs-xs);
  font-style: normal;
  color: var(--text-muted);
  letter-spacing: .05em;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .patron-featured {
    flex-direction: column;
    text-align: center;
    padding: var(--sp-xl);
  }
  .patron-featured-text { text-align: center; }
  .patron-featured .patron-card-img { margin: 0 auto; }
}

/* --------------------------------------------------------------------------
   19. Renovation Cards (with Progress Bars)
   -------------------------------------------------------------------------- */
.renovation-section { padding: var(--sp-4xl) 0; background: var(--bg); }
.renovation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--sp-xl);
}
.renovation-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 2px 12px var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
}
.renovation-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(45,34,24,.12);
}
.renovation-card-img {
  aspect-ratio: 16/10;
  overflow: hidden;
}
.renovation-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.renovation-card:hover .renovation-card-img img { transform: scale(1.05); }
.renovation-card-body { padding: var(--sp-xl); }
.renovation-card h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-sm); }
.renovation-card p { color: var(--text-muted); font-size: var(--fs-sm); margin-bottom: var(--sp-lg); }

/* Progress bar */
.progress-bar {
  overflow: hidden;
  width: 100%; height: 10px;
  background: var(--border);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--green), var(--green-light), var(--gold), var(--gold-light));
  transition: width 1.2s cubic-bezier(.22,1,.36,1);
  position: relative;
}
.progress-bar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  animation: progressShine 2s ease-in-out infinite;
}
@keyframes progressShine {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--sp-sm);
  font-family: var(--ff-ui);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.progress-info strong { color: var(--green); font-weight: 700; }

/* --------------------------------------------------------------------------
   20. Contact Section
   -------------------------------------------------------------------------- */
.contact-section { padding: var(--sp-4xl) 0; background: var(--bg); }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--sp-2xl);
  align-items: start;
}
.contact-info { display: flex; flex-direction: column; gap: var(--sp-lg); }
.contact-info-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-md);
  background: var(--bg-card);
  padding: var(--sp-lg);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 8px var(--shadow);
}
.contact-info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: var(--radius);
  background: rgba(140,14,33,.08);
  color: var(--burgundy);
  flex-shrink: 0;
}
.contact-info-icon svg { width: 22px; height: 22px; }
.contact-info-text h3 {
  font-size: var(--fs-base);
  font-family: var(--ff-ui);
  font-weight: 600;
  margin-bottom: 2px;
}
.contact-info-text p { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 0; }
.contact-info-text a { color: var(--burgundy); text-decoration: none; }
.contact-info-text a:hover { text-decoration: underline; }

/* Contact Form */
.contact-form {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--sp-2xl);
  box-shadow: 0 2px 12px var(--shadow);
}
.contact-form h2 { font-size: var(--fs-2xl); margin-bottom: var(--sp-xl); }
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-md);
}
.form-group { display: flex; flex-direction: column; gap: var(--sp-xs); }
.form-group.full-width { grid-column: 1 / -1; }
.form-group label {
  font-family: var(--ff-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
}
.form-group label .required { color: var(--burgundy); }
.form-group input,
.form-group textarea,
.form-group select {
  padding: .75em 1em;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  color: var(--text);
  background: #fff;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--burgundy);
  box-shadow: 0 0 0 3px rgba(140,14,33,.10);
}
.form-group textarea { resize: vertical; min-height: 140px; }
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-muted); opacity: .6; }
.form-message {
  margin-top: var(--sp-md);
  padding: var(--sp-md);
  border-radius: var(--radius);
  font-family: var(--ff-ui);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.form-message.success { background: #ecfdf5; color: #065f46; }
.form-message.error { background: #fef2f2; color: #991b1b; }

/* --------------------------------------------------------------------------
   21. Other Apostolates / World Grid
   -------------------------------------------------------------------------- */
.world-section { padding: var(--sp-4xl) 0; background: var(--bg-alt); }
.world-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-lg);
}
.world-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--sp-lg);
  text-align: center;
  box-shadow: 0 2px 8px var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
  text-decoration: none;
  color: inherit;
  display: block;
}
.world-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(45,34,24,.12);
  color: inherit;
}
.world-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  margin: 0 auto var(--sp-md);
  border-radius: 50%;
  background: rgba(46,93,58,.08);
  color: var(--green);
  font-size: var(--fs-xl);
}
.world-card h3 {
  font-size: var(--fs-base);
  font-family: var(--ff-ui);
  font-weight: 600;
  margin-bottom: var(--sp-xs);
}
.world-card p { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 0; }

/* --------------------------------------------------------------------------
   22. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  padding-top: var(--sp-4xl);
  position: relative;
}
.site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green) 0%, var(--green) 25%, var(--blue) 25%, var(--blue) 50%, var(--gold) 50%, var(--gold) 75%, var(--burgundy) 75%, var(--burgundy) 100%);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: var(--sp-2xl);
  padding-bottom: var(--sp-3xl);
}
.footer-col h3 {
  font-family: var(--ff-heading);
  font-size: var(--fs-md);
  color: var(--gold);
  margin-bottom: var(--sp-lg);
  padding-bottom: var(--sp-sm);
  border-bottom: 2px solid var(--gold-dark);
  display: inline-block;
}
.footer-about p {
  font-size: var(--fs-sm);
  line-height: 1.8;
  margin-bottom: var(--sp-lg);
  color: var(--footer-text);
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--sp-sm); }
.footer-col ul a {
  font-family: var(--ff-ui);
  font-size: var(--fs-sm);
  color: var(--footer-text);
  text-decoration: none;
  transition: color var(--transition-fast), padding-left var(--transition-fast);
}
.footer-col ul a:hover { color: var(--gold-light); padding-left: 6px; }

/* Social icons */
.footer-social { display: flex; gap: var(--sp-sm); }
.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  color: var(--footer-text);
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.footer-social a:hover {
  background: var(--blue);
  color: #fff;
  transform: translateY(-3px);
}
.footer-social svg { width: 18px; height: 18px; }

/* Footer bottom */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: var(--sp-lg) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-md);
}
.footer-bottom p {
  font-family: var(--ff-ui);
  font-size: var(--fs-xs);
  color: rgba(197,185,168,.60);
  margin-bottom: 0;
}
.footer-credit {
  margin-top: var(--sp-sm);
  font-family: var(--ff-ui);
  font-size: 0.7rem;
  color: rgba(197,185,168,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.footer-credit a {
  color: rgba(197,185,168,.55);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--transition-fast);
}
.footer-credit a:hover { color: var(--gold); }
.amdg-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.amdg-logo {
  height: 14px;
  width: auto;
  vertical-align: middle;
  opacity: .7;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.amdg-link:hover .amdg-logo { opacity: 1; transform: scale(1.05); }

.footer-motto {
  font-family: var(--ff-heading);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--gold-dark);
}

/* --------------------------------------------------------------------------
   23. Back to Top
   -------------------------------------------------------------------------- */
.back-to-top {
  position: fixed;
  bottom: var(--sp-xl); right: var(--sp-xl);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--burgundy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(140,14,33,.30);
  cursor: pointer;
  z-index: 900;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition), background var(--transition-fast);
}
.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover {
  background: var(--burgundy-light);
  transform: translateY(-3px);
}
.back-to-top svg { width: 22px; height: 22px; }

/* --------------------------------------------------------------------------
   24. Cookie Consent Banner
   -------------------------------------------------------------------------- */
.cookie-banner {
  position: fixed;
  bottom: 0; left: 0;
  width: 100%;
  z-index: 2000;
  background: var(--bg-dark);
  color: rgba(255,255,255,.85);
  padding: var(--sp-lg) var(--sp-xl);
  box-shadow: 0 -4px 20px rgba(0,0,0,.20);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xl);
  flex-wrap: wrap;
  transition: opacity .4s ease, transform .4s ease;
}
.cookie-banner-text {
  flex: 1;
  min-width: 280px;
  font-family: var(--ff-ui);
  font-size: var(--fs-sm);
  margin-bottom: 0;
}
.cookie-banner-buttons { display: flex; gap: var(--sp-sm); }
.cookie-btn-accept {
  padding: .6em 1.4em;
  background: var(--gold);
  color: var(--dark);
  border-radius: var(--radius);
  font-family: var(--ff-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.cookie-btn-reject {
  padding: .6em 1.4em;
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.7);
  border-radius: var(--radius);
  font-family: var(--ff-ui);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
}
.cookie-btn-reject:hover { background: rgba(255,255,255,.15); }

/* --------------------------------------------------------------------------
   25. Search Overlay
   -------------------------------------------------------------------------- */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(45,34,24,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
.search-overlay.active { opacity: 1; pointer-events: auto; }
.search-overlay-inner {
  width: 100%;
  max-width: 700px;
  padding: 0 var(--sp-lg);
  text-align: center;
}
.search-close {
  position: absolute;
  top: var(--sp-xl); right: var(--sp-xl);
  background: none; border: none;
  color: rgba(255,255,255,.60);
  cursor: pointer;
  padding: var(--sp-sm);
  transition: color var(--transition-fast);
}
.search-close:hover { color: #fff; }
.search-close svg { width: 28px; height: 28px; }
.search-overlay label {
  display: block;
  font-family: var(--ff-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--sp-lg);
}
.search-overlay input[type="search"] {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 3px solid var(--gold);
  padding: var(--sp-md) 0;
  font-family: var(--ff-heading);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  color: #fff;
  outline: none;
  caret-color: var(--gold);
}
.search-overlay input[type="search"]::placeholder { color: rgba(255,255,255,.30); }
.search-overlay input[type="search"]::-webkit-search-cancel-button,
.search-overlay input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/* --------------------------------------------------------------------------
   26. Scroll Reveal Animations
   -------------------------------------------------------------------------- */
.reveal,
.reveal-left,
.reveal-right,
.reveal.visible,
.reveal-left.visible,
.reveal-right.visible {
  opacity: 1;
  transform: none;
  transition: none;
}
.reveal-stagger > * { transition-delay: 0s; }

/* --------------------------------------------------------------------------
   27. Responsive Breakpoints
   -------------------------------------------------------------------------- */

/* Tablet (<=768px) */
@media (max-width: 768px) {
  :root { --sp-4xl: 4rem; --sp-3xl: 3rem; }
  h1 { font-size: var(--fs-3xl); }
  h2 { font-size: var(--fs-2xl); }

  .mass-times-grid,
  .features-grid,
  .apostolate-grid,
  .apostolate-cards-grid,
  .patron-grid,
  .renovation-grid { grid-template-columns: repeat(2, 1fr); }

  .pillars-grid {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-inline: auto;
    padding: var(--sp-md) 0;
  }
  .pillar-card {
    border-left: none;
    border-top: 1px solid rgba(201,162,39,.32);
    padding: var(--sp-xl) var(--sp-md);
  }
  .pillar-card:first-child { border-top: none; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2xl) var(--sp-xl); }
  .timeline { padding-left: 36px; }
  .video-featured { grid-template-columns: 1fr; }
  .video-featured-info { text-align: center; }
  .video-grid { grid-template-columns: repeat(2, 1fr); }
  .world-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-group.full-width { grid-column: auto; }
  .split-grid { grid-template-columns: 1fr; gap: var(--sp-2xl); }
  .apostolate-detail { grid-template-columns: 1fr; }
  /* On mobile: reset reverse order so image always comes first */
  .apostolate-detail.reverse .apostolate-detail-text { order: 0; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .newsletter-form { flex-direction: column; }
  .newsletter-form .btn {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; width: 100%; }
  /* Hero takes the FULL viewport on mobile (100svh = small-viewport-height,
     i.e. excluding the dynamic browser chrome on iOS/Android). align-items
     stays centered so the title+subtitle+buttons don't bunch at the bottom
     against the scroll indicator. */
  .hero {
    min-height: 100vh;
    min-height: 100dvh;
    min-height: 100svh;
    align-items: center;
  }
  /* On mobile, switch the hero focal point to the admin-set mobile value
     (was a hard-coded "center center" — that locked out admin positioning). */
  .hero-bg img,
  .hero-bg video {
    object-position: var(--hero-pos-mobile, var(--hero-pos-desktop, center));
  }
  .hero-overlay {
    background:
      radial-gradient(ellipse at center 40%, rgba(107,10,25,.55) 0%, rgba(107,10,25,.72) 60%, rgba(107,10,25,.85) 100%),
      linear-gradient(to bottom, rgba(107,10,25,.4) 0%, transparent 30%, transparent 50%, rgba(26,20,16,.7) 100%);
  }
  /* Bottom padding well above the scroll indicator so buttons can't touch it */
  .hero-content {
    padding-top: calc(var(--header-h) + var(--sp-xl));
    padding-bottom: calc(var(--sp-3xl) * 3.6);
  }
  /* Lift the scroll indicator further from the very bottom so its arrow
     never gets clipped by the next section's edge or the iOS browser chrome. */
  .hero-scroll-indicator { bottom: calc(var(--sp-2xl) + 4px); }
  /* Smaller title on mobile so the buttons sit higher up */
  .hero h1 {
    font-size: clamp(2rem, 6.5vw, 3.5rem);
    margin-bottom: var(--sp-md);
  }
  .hero-subtitle {
    font-size: clamp(0.92rem, 2.4vw, 1.05rem);
    margin-bottom: var(--sp-md);
  }

  /* Prevent iOS Safari zoom on input focus (requires >=16px) */
  .newsletter-form input[type="email"],
  .form-group input,
  .form-group textarea,
  .form-group select { font-size: 16px; }

  /* News grid: prevent overflow on narrow phones */
  .news-grid > .news-card { flex-basis: 100% !important; max-width: 100% !important; }

  /* Back-to-top: raise above cookie banner */
  .back-to-top { bottom: 5rem; }
}

/* Small (<=480px) */
@media (max-width: 480px) {
  :root { --sp-4xl: 3rem; --sp-3xl: 2rem; --header-h: 120px; }
  /* Phone size — keep the 2-row title (do NOT nowrap) and shrink logo
     but preserve absolute positioning from the 1100px block. */
  .header-top-title {
    display: block;
    font-size: 1.05rem;
    line-height: 1.2;
  }
  .site-logo img { height: 75px; }
  .header-top .container { padding-left: calc(75px + var(--sp-md) * 2); }
  body { font-size: var(--fs-sm); }
  .container { padding-inline: var(--sp-md); }
  h1 { font-size: var(--fs-2xl); }
  h2 { font-size: var(--fs-xl); }

  .mass-times-grid,
  .features-grid,
  .apostolate-grid,
  .apostolate-cards-grid,
  .video-grid,
  .patron-grid,
  .renovation-grid { grid-template-columns: 1fr; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .world-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .hero { min-height: 100vh; min-height: 100dvh; min-height: 100svh; }
  .hero h1 { font-size: clamp(1.85rem, 7vw, 2.6rem); }
  .hero-subtitle { font-size: 0.92rem; }
  .hero-content { padding-bottom: calc(var(--sp-3xl) * 3.4); }
  /* Mobile-mobile: let the CSS var win (was hard-coded "center center"). */
  .hero-bg img,
  .hero-bg video {
    object-position: var(--hero-pos-mobile, var(--hero-pos-desktop, center));
  }
  .hero-crest { width: 70px; height: 70px; }
  .hero-btns { flex-direction: column; align-items: center; }
  .hero-btns .btn {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; width: 100%; max-width: 280px; }
  .back-to-top { right: var(--sp-md); bottom: 5rem; width: 42px; height: 42px; }
  .cookie-banner { flex-direction: column; text-align: center; }
  .bulletin-download { display: none; }
  /* Apostolate card images: use aspect-ratio instead of fixed height */
  .apostolate-img-card-photo { height: auto; aspect-ratio: 16/10; }
}

/* --------------------------------------------------------------------------
   28. Print & Reduced Motion
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .back-to-top, .cookie-banner,
  .search-overlay, .mobile-overlay, .hero-btns,
  .newsletter-section, .burger { display: none !important; }
  body { font-size: 12pt; color: #000; background: #fff; }
  .hero { min-height: auto; color: #000; }
  .hero-bg, .hero-overlay { display: none; }
  .hero h1 { color: #000; text-shadow: none; }
  a { color: #000; text-decoration: underline; }
  * { box-shadow: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-left, .reveal-right { opacity: 1; transform: none; }
  .hero-inner { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   29. Accessibility
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}
.skip-link {
  position: absolute;
  top: -100%; left: var(--sp-md);
  z-index: 9999;
  background: var(--burgundy);
  color: #fff;
  padding: var(--sp-sm) var(--sp-md);
  border-radius: 0 0 var(--radius) var(--radius);
  font-family: var(--ff-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 0; }

/* --------------------------------------------------------------------------
   30. Mobile Overflow Fix
   -------------------------------------------------------------------------- */
/* Clip any overflow from reveal animations and absolute elements */
/* Prevent horizontal overflow from reveal animations and layout tricks */
main > section,
.mass-times, .features, .about-preview, .apostolate-preview,
.quote-section, .newsletter-section, .video-section,
.bulletin-section, .patron-section, .renovation-section,
.contact-section, .world-section, .about-stats, .page-hero,
.apostolate-section, .gallery-section {
  overflow: hidden;
}
/* Prevent mass time text from overflowing on small screens */
.mass-card-time { word-break: break-word; text-align: right; }

/* --------------------------------------------------------------------------
   31. Custom Font Overlay (v1 selection)
   - Nav · Buttons → IM Fell English
   - Hero highlight "in Ireland" → Volkhov Italic
   - Liturgy feast · Hero subtitle → IM Fell English Italic
   - Header brand · Hero h1 · Liturgy commemoration stay as EB Garamond
   -------------------------------------------------------------------------- */
/* Self-hosted + subsetted fonts (fonts.amdgcore.com) — replaces Google Fonts link. */
@font-face { font-family: 'IM Fell English'; font-style: normal; font-weight: 400; font-display: swap; src: url('https://fonts.amdgcore.com/fonts/im-fell-english/IMFeENrm28P-sub.woff2') format('woff2'); }
@font-face { font-family: 'IM Fell English'; font-style: italic; font-weight: 400; font-display: swap; src: url('https://fonts.amdgcore.com/fonts/im-fell-english/IMFeENit28P-sub.woff2') format('woff2'); }
@font-face { font-family: 'Volkhov'; font-style: italic; font-weight: 400; font-display: swap; src: url('https://fonts.amdgcore.com/fonts/volkhov/Volkhov-Italic-sub.woff2') format('woff2'); }
@font-face { font-family: 'Volkhov'; font-style: normal; font-weight: 400; font-display: swap; src: url('https://fonts.amdgcore.com/fonts/volkhov/Volkhov-Regular-sub.woff2') format('woff2'); }
@font-face { font-family: 'Volkhov'; font-style: normal; font-weight: 700; font-display: swap; src: url('https://fonts.amdgcore.com/fonts/volkhov/Volkhov-Bold-sub.woff2') format('woff2'); }
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('https://fonts.amdgcore.com/fonts/eb-garamond/eb-garamond-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('https://fonts.amdgcore.com/fonts/eb-garamond/eb-garamond-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('https://fonts.amdgcore.com/fonts/eb-garamond/eb-garamond-500-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('https://fonts.amdgcore.com/fonts/eb-garamond/eb-garamond-500-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://fonts.amdgcore.com/fonts/eb-garamond/eb-garamond-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://fonts.amdgcore.com/fonts/eb-garamond/eb-garamond-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('https://fonts.amdgcore.com/fonts/eb-garamond/eb-garamond-500-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('https://fonts.amdgcore.com/fonts/eb-garamond/eb-garamond-500-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('https://fonts.amdgcore.com/fonts/eb-garamond/eb-garamond-600-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('https://fonts.amdgcore.com/fonts/eb-garamond/eb-garamond-600-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://fonts.amdgcore.com/fonts/eb-garamond/eb-garamond-700-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://fonts.amdgcore.com/fonts/eb-garamond/eb-garamond-700-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://fonts.amdgcore.com/fonts/source-sans-3/source-sans-3-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://fonts.amdgcore.com/fonts/source-sans-3/source-sans-3-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('https://fonts.amdgcore.com/fonts/source-sans-3/source-sans-3-500-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('https://fonts.amdgcore.com/fonts/source-sans-3/source-sans-3-500-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('https://fonts.amdgcore.com/fonts/source-sans-3/source-sans-3-600-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('https://fonts.amdgcore.com/fonts/source-sans-3/source-sans-3-600-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://fonts.amdgcore.com/fonts/source-sans-3/source-sans-3-700-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://fonts.amdgcore.com/fonts/source-sans-3/source-sans-3-700-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.main-nav a {
  font-family: 'IM Fell English', Garamond, Georgia, serif;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: none;
  font-size: 1.05rem;
}
.btn {
  font-family: 'IM Fell English', Garamond, Georgia, serif;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .84rem;
}
.hero-highlight {
  font-family: 'Volkhov', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: .01em;
  font-size: .76em;
}
.liturgy-strip-feast {
  font-family: 'IM Fell English', Garamond, Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: .04em;
  font-size: 1rem;
}
.liturgy-strip-class {
  font-size: .85rem;
}
.liturgy-strip-commemoration {
  font-size: .95rem;
  opacity: .85;
}
.hero-subtitle {
  font-family: 'IM Fell English', Garamond, Georgia, serif;
  font-style: italic;
  font-weight: 400;
  line-height: 1.75;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
}

/* ──────────────────────────────────────────────────────────────────────────
   Saints of Ireland watermark — bespoke oil-painting portraits, anchored
   to specific timeline cards. Patrick (right, near 2008 Belfast),
   Brigid (left, between 2010 Galway and 2016 Belfast Grows),
   Plunkett (right, between 2019 Belfast IHM and 2021 Ardee Convent).
   Soft radial mask feathers any rectangular edge artifacts.
   ────────────────────────────────────────────────────────────────────────── */
.saints-watermark {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: visible;
    opacity: 0.55;
    filter: saturate(0.92);
    /* Soften any saint that gets clipped by the section's overflow:hidden
       (Plunkett extends past the section bottom by design).               */
    -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
}
.saints-watermark img {
    position: absolute;
    width: auto;
    height: auto;
    object-fit: contain;
    /* PNGs ship with a 22-sigma alpha halo on an 80px transparent pad — no
       extra mask required. A whisper-thin radial just kills any compositing
       seam from the section background.                                   */
    -webkit-mask-image: radial-gradient(ellipse 95% 95% at center, #000 80%, transparent 100%);
            mask-image: radial-gradient(ellipse 95% 95% at center, #000 80%, transparent 100%);
}

/* Patrick — RIGHT, double size, mitre + face above 'First Masses in Belfast' (item 2, ~12-25%) */
.saints-watermark img[style*="--z:5"] {
    top: 4%;
    left: calc(50% + 460px);
    transform: translateX(-50%);
    height: 56%;
    max-height: 880px;
    z-index: 5;
}/* Brigid — LEFT, double size, face between 'Galway Apostolate' (item 3) and 'Belfast Grows' (item 5) → ~item 4 area, ~38-50% */
.saints-watermark img[style*="--z:4"] {
    top: 37%;
    left: calc(50% - 460px);
    transform: translateX(-50%);
    height: 65%;
    max-height: 1010px;
    z-index: 4;
}
/* Plunkett — RIGHT, double size, between 'Belfast IHM' (item 6) and 'Ardee Convent' (item 8) → ~item 7 area, ~75-87% */
.saints-watermark img[style*="--z:1"] {
    top: 67%;
    left: calc(50% + 460px);
    transform: translateX(-50%);
    height: 56%;
    max-height: 880px;
    z-index: 1;
}

.saints-watermark + .container { position: relative; z-index: 1; }

@media (max-width: 1024px) {
    .saints-watermark { display: none; }
}


/* --------------------------------------------------------------------------
   Your Clergy — page styles
   --------------------------------------------------------------------------
   Cards: circular photo placeholder (with initials), name, italic role,
   email + phone. On the provincial page, four region sections each with
   their own grid; on apostolate sites, just one region (no heading).
*/
.clergy-region {
  padding: var(--sp-lg) 0;
}
.clergy-region + .clergy-region {
  padding-top: var(--sp-2xl);
  border-top: 1px solid rgba(201,162,39,.24);
}
.clergy-region-heading {
  text-align: center;
  font-family: var(--ff-heading);
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  color: var(--burgundy);
  margin-bottom: var(--sp-xl);
  letter-spacing: 0.01em;
}
.clergy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-2xl) var(--sp-xl);
  max-width: 1100px;
  margin-inline: auto;
  padding: 0 var(--sp-md);
}
.clergy-card {
  text-align: center;
  padding: var(--sp-md);
}
.clergy-photo {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: var(--bg-card);
  /* Cream stroke — softer than the previous gold-tinted border. */
  border: 1px solid #e8dcc1;
  margin: 0 auto var(--sp-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.clergy-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.clergy-photo-initials {
  font-family: var(--ff-heading);
  font-size: 3.6rem;
  font-weight: 500;
  color: var(--burgundy);
  letter-spacing: 0.04em;
}
/* Placeholder when a clergy member has no photo set:
   crest rendered as an inline <img> (.clergy-photo-crest) for reliable
   pixel positioning; burgundy initials sit near the top edge. */
.clergy-photo--placeholder {
  position: relative;
}
.clergy-photo img.clergy-photo-crest {
  position: absolute;
  width: 40%;
  height: auto;
  left: 50%;
  top: 60%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
  z-index: 0;
  object-fit: contain;
}
.clergy-photo--placeholder .clergy-photo-initials {
  position: absolute;
  top: 22%;
  /* Full-width band + text-align: center is rock-solid for horizontal
     centring even with letter-spacing (the left:50%+translateX trick
     breaks because trailing letter-spacing skews the bounding box). */
  left: 0;
  right: 0;
  width: 100%;
  text-align: center;
  transform: translateY(-50%);
  font-size: 2.5rem;
  z-index: 1;
  letter-spacing: 0;
  padding: 0;
}
.clergy-name {
  font-family: var(--ff-heading);
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--text);
  margin: 0 0 var(--sp-xs);
}
.clergy-role {
  font-family: "IM Fell English", Garamond, Georgia, serif;
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--burgundy);
  /* Tight gap to email — matches the line-spacing inside .clergy-contact
     so role/email/mobile read as one continuous stack. */
  margin: 0;
  letter-spacing: 0.01em;
}
.clergy-contact {
  font-family: var(--ff-ui);
  font-size: var(--fs-sm);
  line-height: 1.85;
  color: var(--text-muted);
  margin: 0;
}
.clergy-contact a {
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.clergy-contact a:hover {
  color: var(--burgundy);
  border-bottom-color: rgba(140,14,33,.3);
}
.clergy-error {
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
}

@media (max-width: 600px) {
  .clergy-grid { grid-template-columns: 1fr; gap: var(--sp-xl); }
  .clergy-photo { width: 190px; height: 190px; }
  .clergy-photo-initials { font-size: 3rem; }
}

/* Donate CTA in the main nav — yellow background, dark-blue text. Stands
   out from the white text-on-burgundy nav links. */
.main-nav a.nav-cta {
  font-family: 'Volkhov', Garamond, Georgia, serif;
  font-weight: 700;
  background: var(--gold);
  color: var(--blue);
  padding: 0.4em 0.85em;
  border-radius: 4px;
  margin: 0 0.3em 0 0.4em;
  border-left: none !important;
  border-right: none;
  text-decoration: none;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.74rem;
}
@media (min-width: 1101px) and (max-width: 1380px) {
  .main-nav a.nav-cta { padding: 0.35em 0.7em; font-size: 0.7rem; margin: 0 0.2em; }
}
.main-nav a.nav-cta::after { display: none; }
.main-nav a.nav-cta:hover,
.main-nav a.nav-cta.active {
  background: var(--gold-light);
  color: var(--blue-dark);
}
@media (max-width: 1100px) {
  .main-nav a.nav-cta {
    margin: var(--sp-md) auto 0;
    text-align: center;
    align-self: center;
    width: fit-content;
    padding: 0.65em 1.4em;
    font-size: var(--fs-sm);
  }
}


/* --------------------------------------------------------------------------
   25. Apostolate Home Page — TOC + Notice Board + Glimpse
   -------------------------------------------------------------------------- */

/* Anchor jumps land below the sticky site header */
.mass-times[id], .news-section[id], .notice-board[id], .glimpse-section[id] {
  scroll-margin-top: 96px;
}

/* Sticky right-rail TOC: positioned in the gutter outside the centered
   .container max-width. Content stays centered as usual; the TOC floats
   in the right margin and follows scroll via position: fixed.
   Hidden on viewports too narrow for the gutter to fit it. */
.page-toc {
  position: fixed;
  top: calc(var(--header-h) + 1.25rem);
  right: calc((100vw - var(--max-w)) / 2 - 200px);
  width: 184px;
  z-index: 50;
  font-family: var(--ff-ui);
  border-left: 2px solid var(--border, rgba(45,34,24,.12));
  padding-left: var(--sp-md);
  transition: opacity 250ms ease, transform 250ms ease;
}
.page-toc.is-hidden {
  opacity: 0;
  transform: translateX(8px);
  pointer-events: none;
}
.page-toc-label {
  font-family: var(--ff-ui);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted, #6b5e52);
  margin: 0 0 var(--sp-sm);
}
.page-toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
}
.page-toc li { margin: 0; }
.page-toc a {
  display: block;
  padding: 0.4rem 0 0.4rem 12px;
  margin-left: -14px;
  font-size: var(--fs-sm);
  line-height: 1.35;
  color: var(--text-muted, #6b5e52);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color 180ms ease, border-color 180ms ease;
}
.page-toc a:hover { color: var(--burgundy, #8c0e21); }
.page-toc a.is-active {
  color: var(--burgundy, #8c0e21);
  border-left-color: var(--gold, #c9a227);
  font-weight: 600;
}

/* Hide the TOC when the viewport is too narrow for the right gutter
   to fit it without overlapping the centered .container.
   Threshold = container max-width (1200px) + 2 x (toc width + gap)
   = 1200 + 2 x 200 = 1600. Below that, hide rather than overlap. */
@media (max-width: 1599px) {
  .page-toc { display: none; }
}

/* Mass times empty state (Ardee until rows are added) */
.schedule-panel-empty {
  padding: var(--sp-xl);
  text-align: center;
  color: var(--text-muted, #6b5e52);
  font-style: italic;
  font-size: var(--fs-sm);
}

/* --------------------------------------------------------------------------
   Notice Board
   -------------------------------------------------------------------------- */
.notice-board {
  padding: var(--sp-3xl) 0;
  background: var(--bg-alt, #d4c8a8);
}
.notice-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sp-lg);
}
.notice-item {
  background: rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-lg, 12px);
  padding: var(--sp-xl);
  border-left: 3px solid var(--gold, #c9a227);
  box-shadow: 0 2px 8px rgba(45, 34, 24, 0.05);
}
.notice-meta { margin-bottom: var(--sp-xs); }
.notice-date {
  font-family: var(--ff-ui);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-dark, #8a6d18);
}
.notice-title {
  font-family: var(--ff-heading, serif);
  font-size: var(--fs-lg);
  margin: 0 0 var(--sp-sm);
  color: var(--burgundy, #8c0e21);
  font-weight: 500;
}
.notice-body {
  color: var(--text, #2d2218);
  font-size: var(--fs-sm);
  line-height: 1.65;
}
.notice-body p { margin: 0 0 0.6em; }
.notice-body p:last-child { margin-bottom: 0; }
.notice-body a {
  color: var(--burgundy, #8c0e21);
  text-decoration: underline;
  text-decoration-color: rgba(140, 14, 33, 0.3);
  text-underline-offset: 2px;
}
.notice-empty {
  padding: var(--sp-xl);
  text-align: center;
  color: var(--text-muted, #6b5e52);
  font-style: italic;
  list-style: none;
  background: rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-lg, 12px);
}

/* --------------------------------------------------------------------------
   Glimpse of Our Apostolate
   -------------------------------------------------------------------------- */
.glimpse-section {
  padding: var(--sp-3xl) 0;
  background: var(--bg, #d4c8a8);
}
.glimpse-grid {
  /* Reuses .masonry-item children styling from masonry.css.
     Wrapper provides the column-based layout. */
  column-count: 3;
  column-gap: var(--sp-md);
  margin-bottom: var(--sp-2xl);
}
.glimpse-grid .masonry-item {
  display: block;
  width: 100%;
  margin: 0 0 var(--sp-md);
  break-inside: avoid;
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  background: var(--vellum-dark, #d4c8a8);
}
.glimpse-grid .masonry-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
}
.glimpse-grid .masonry-item:hover img { transform: scale(1.04); }

.glimpse-cta {
  text-align: center;
}
.glimpse-cta a {
  font-family: var(--ff-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--burgundy, #8c0e21);
  text-decoration: none;
  border-bottom: 1px solid var(--gold, #c9a227);
  padding-bottom: 2px;
}
.glimpse-cta a:hover { color: var(--gold-dark, #8a6d18); }

.glimpse-empty {
  padding: var(--sp-2xl);
  text-align: center;
  color: var(--text-muted, #6b5e52);
  font-style: italic;
}

@media (max-width: 900px)  { .glimpse-grid { column-count: 2; } }
@media (max-width: 560px)  { .glimpse-grid { column-count: 1; } }


/* ============================================================
   Cross-document View Transitions — scoped to content only
   Header + footer are tagged with view-transition-name so they
   stay rock-solid across navigations (no animation on them — same
   pixels on both pages = no visible change). The remaining content
   area falls into the default root transition with a very short
   ~80ms cross-fade, which is fast enough not to read as an
   animation but smooths out the swap so the eye doesnt perceive
   a hard snap.
   Chrome 126+, Safari 18+; ignored elsewhere.
   ============================================================ */
.site-header { view-transition-name: site-header; }
.site-footer { view-transition-name: site-footer; }

@view-transition { navigation: auto; }

::view-transition-old(site-header),
::view-transition-new(site-header),
::view-transition-old(site-footer),
::view-transition-new(site-footer) {
  animation: none;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 80ms;
  animation-timing-function: ease;
}

/* ─────────────────────────────────────────────────────────────────────
   News rich body + layout-aware arrangement
   ───────────────────────────────────────────────────────────────────── */

/* ── Layout-aware arrangement ──────────────────────────────────────── */

/* Card + flyer fit nicely in the news-grid (auto-fill, minmax(340px,1fr)).
   Banner / split / video span the full row so their rich horizontal /
   wide-aspect layouts breathe. */
.news-grid .news-card--banner,
.news-grid .news-card--split,
.news-grid .news-card--video {
    flex-basis: 100%;
}

/* Flyer is portrait 4:5 — keep it card-sized but cap its height so a single
   one doesn't overpower the homepage. */
.news-grid .news-card--flyer { max-width: 460px; margin-inline: auto; }

/* When the grid has exactly one item AND it's a card, centre it so it
   doesn't span the entire row by accident. */
.news-grid .news-card--card:only-child { max-width: 460px; margin-inline: auto; }

/* ════════════════════════════════════════════════════════════════════
   Province homepage news — FREE BOARD. Cards flow & wrap; each card has a
   fixed design width per type and is resized as a whole BLOCK via `zoom`
   (set by the corner-drag on the arrange page) so proportions never distort.
   Scoped to .news-grid--board so plain .news-grid (apostolate) is untouched. */
.news-grid--board {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xl);
  align-items: flex-start;
  justify-content: center;
}
.news-grid--board.news-grid--align-left   { justify-content: flex-start; }
.news-grid--board.news-grid--align-center { justify-content: center; }
.news-grid--board.news-grid--align-right  { justify-content: flex-end; }

/* fixed design width per card type — zoom scales the whole card from here */
.news-grid--board > .news-card { flex: 0 0 auto; width: var(--card-base, 360px); max-width: 100%; }
.news-grid--board > .news-card--card   { --card-base: 360px; }
.news-grid--board > .news-card--flyer  { --card-base: 320px; }
.news-grid--board > .news-card--banner,
.news-grid--board > .news-card--split,
.news-grid--board > .news-card--video  { --card-base: 720px; }

/* banner/split internal column split (themeable via --news-ratio) */
.news-card--banner { display: grid; grid-template-columns: var(--news-ratio, 40%) 1fr; align-items: stretch; }
.news-card--banner.news-card--img-right { grid-template-columns: 1fr var(--news-ratio, 40%); }
/* Split = text-forward, NO background, optional image on the right. */
.news-card--split  { display: grid; grid-template-columns: 1fr var(--news-ratio, 40%); align-items: stretch; background: transparent; border: 0; box-shadow: none; }
.news-card--split.news-card--img-left { grid-template-columns: var(--news-ratio, 40%) 1fr; }
.news-card--split .news-card-photo { min-height: 200px; }
.news-card--split.news-card--split-textonly { display: block; }
.news-card--split:hover { transform: none; box-shadow: none; }

/* FREE CANVAS — absolute placement on a fixed 1200px design canvas. The public
   hydrator scales this canvas to fit the viewport; on phones it stacks (below). */
.news-grid--canvas { display: block; position: relative; width: 1200px; margin-inline: auto; }
.news-grid--canvas > .news-card { position: absolute; }

/* mobile: one card per row in order — cancel zoom + absolute placement + scaling */
@media (max-width: 1100px) {
  .news-grid--board > .news-card { width: 100% !important; zoom: 1 !important; transform: none !important; }
  .news-grid--canvas { width: auto !important; height: auto !important; transform: none !important; margin: 0 !important; }
  .news-grid--canvas > .news-card { position: static !important; left: auto !important; top: auto !important; transform: none !important; margin: 0 0 var(--sp-xl) !important; }
  .news-card--banner, .news-card--split { display: flex; flex-direction: column; }
}

/* Flyer body text spacing tweaks for the public render (matches preview). */
.news-card--flyer h3 a { color: #fff !important; }

/* Video iframe gets a subtle inner border so it reads as a "video card"
   even in the fraction of a second before YouTube/Vimeo hydrates. */
.news-card--video iframe { border: 0; }

/* ─────────────────────────────────────────────────────────────────────
   News card — preview parity v2
   Match the editor's .news-ed-preview__* visual exactly so what is
   composed is what is published.
   ───────────────────────────────────────────────────────────────────── */

.news-card-kicker {
    display: block;
    font-family: var(--ff-ui);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: .3rem;
}
.news-card-kicker { font-size: calc(.72rem * var(--news-fscale, 1)); }
.news-card-title {
    margin: .25rem 0;
    font-family: var(--ff-heading);
    font-weight: 500;
    line-height: 1.25;
    font-size: calc(1.3rem * var(--news-fscale, 1));
}
.news-card-title a { text-decoration: none; }
.news-card-title a:hover { text-decoration: underline; text-underline-offset: 3px; }

.news-card-cta {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    margin-top: .35rem;
    font-family: var(--ff-ui);
    font-size: .82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    text-decoration: none;
}
.news-card-cta:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Rich body content rendered from TipTap HTML — scoped to .news-card-rich
   so it does not override the article title's .news-card-title rules. */
.news-card-rich {
    color: var(--text-muted);
    font-family: var(--ff-heading);
    font-size: calc(.92rem * var(--news-fscale, 1));
    line-height: 1.6;
    margin-top: .25rem;
}
.news-card-rich > *:first-child { margin-top: 0; }
.news-card-rich > *:last-child  { margin-bottom: 0; }
.news-card-rich p { margin: 0 0 .7em; color: inherit; }
.news-card-rich h1,
.news-card-rich h2,
.news-card-rich h3,
.news-card-rich h4 {
    font-family: var(--ff-heading);
    font-weight: 500;
    color: var(--burgundy);
    line-height: 1.3;
}
.news-card-rich h1 { font-size: calc(1.4rem * var(--news-fscale, 1));  margin: .6em 0 .3em; }
.news-card-rich h2 { font-size: calc(1.2rem * var(--news-fscale, 1));  margin: .55em 0 .25em; }
.news-card-rich h3 { font-size: calc(1.05rem * var(--news-fscale, 1)); margin: .5em 0 .25em; }
.news-card-rich h4 { font-size: calc(.98rem * var(--news-fscale, 1));  margin: .45em 0 .25em; }
.news-card-rich ul,
.news-card-rich ol { margin: .25em 0 .7em 1.2em; padding: 0; }
.news-card-rich li { margin: .15em 0; }
.news-card-rich blockquote {
    border-left: 3px solid var(--burgundy);
    margin: .6em 0;
    padding: .1em 0 .1em .8em;
    color: var(--text-muted);
    font-style: italic;
}
.news-card-rich a { color: var(--burgundy); text-decoration: underline; text-underline-offset: 2px; }
.news-card-rich mark { padding: .05em .15em; border-radius: 2px; }
.news-card-rich strong { font-weight: 600; }
.news-card-rich em { font-style: italic; }
.news-card-rich img { max-width: 100%; height: auto; border-radius: 4px; margin: .4em 0; }

/* Flyer overrides — light text on dark image */
.news-card--flyer .news-card-title a,
.news-card--flyer .news-card-rich h1,
.news-card--flyer .news-card-rich h2,
.news-card--flyer .news-card-rich h3,
.news-card--flyer .news-card-rich h4 { color: #fff !important; }
.news-card--flyer .news-card-rich a { color: var(--gold) !important; }
.news-card--flyer .news-card-rich blockquote { border-color: var(--gold); color: rgba(255,255,255,.86); }

/* Bulletins — featured A5 flyer, centred: title on top, image, gold-tinted legend */
#bulletins-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 2.75rem; max-width: 1000px; margin: 0 auto; }
/* reduce the bulletins section's bottom gap to the next section */
#bulletins { padding-top: var(--sp-xl); padding-bottom: var(--sp-lg); }
/* /bulletins archive page: find-a-week menu + stacked flyers + load more */
.bulletins-page-wrap { display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 2.5rem; align-items: start; max-width: 900px; margin: 0 auto; }
.bulletins-toc { position: sticky; top: calc(var(--header-h) + 1.25rem); max-height: calc(100vh - var(--header-h) - 3rem); overflow-y: auto; font-family: var(--ff-ui, sans-serif); border-left: 2px solid var(--border, rgba(45,34,24,.12)); padding-left: var(--sp-md); }
.bulletins-toc .page-toc-label { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted, #6b5e52); margin: 0 0 .6rem; }
.bulletins-toc ol { list-style: none; margin: 0; padding: 0; }
.bulletins-toc a { display: block; padding: .22rem 0; font-size: .84rem; color: var(--text-muted, #6b5e52); text-decoration: none; }
.bulletins-toc a:hover { color: var(--burgundy, #8c0e21); }
.bulletins-display { display: flex; flex-direction: column; align-items: center; gap: 3rem; }
.bulletin-anchor { scroll-margin-top: calc(var(--header-h) + 1.5rem); width: 100%; display: flex; justify-content: center; }
.bulletin-loadmore { text-align: center; margin-top: 2.5rem; }
@media (max-width: 820px) { .bulletins-page-wrap { grid-template-columns: 1fr; } .bulletins-toc { position: static; max-height: none; border-left: none; padding-left: 0; margin-bottom: 1.5rem; } }
.bulletin-flyer { display: block; margin: 0; text-align: left; flex: 0 1 520px; max-width: 520px; background: none; padding: 0; border: none; }
.bulletin-title { font-family: var(--ff-heading, serif); font-weight: 500; color: var(--burgundy, #8c0e21); margin: 0 0 .9rem; font-size: 1.35rem; line-height: 1.2; }
.bulletin-image-link { display: block; }
.bulletin-image-link img { width: 100%; height: auto; display: block; border-radius: 3px; box-shadow: 0 14px 44px rgba(45,34,24,.24); transition: transform .25s ease, box-shadow .25s ease; }
.bulletin-image-link:hover img { transform: translateY(-4px); box-shadow: 0 22px 56px rgba(45,34,24,.30); }
.bulletin-legend { font-family: var(--ff-ui, sans-serif); font-size: .88rem; color: #2d2218; font-style: italic; line-height: 1.55; margin: 0; background: rgba(255,255,255,.45); text-align: left; padding: .7rem 1rem; white-space: pre-line; }
.bulletin-flyer--file { display: block; background: none; padding: 0; flex: 0 1 380px; max-width: 380px; text-align: center; }
.bulletin-seeall { flex-basis: 100%; text-align: center; margin-top: .6rem; }
.bulletin-seeall a { font-family: var(--ff-ui, sans-serif); font-size: .9rem; color: var(--burgundy, #8c0e21); text-decoration: none; font-weight: 600; letter-spacing: .03em; }
.bulletin-seeall a:hover { text-decoration: underline; }


/* ── Gallery albums + lightbox (regional /gallery) ─────────────────────── */
.gallery-albums{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.gallery-album-card{display:block;text-align:left;padding:0;border:1px solid var(--border,#d8cfb8);background:var(--cream,#fcf3e3);border-radius:12px;overflow:hidden;cursor:pointer;font:inherit;color:inherit;transition:box-shadow .15s,transform .15s}
.gallery-album-card:hover{box-shadow:0 10px 26px rgba(0,0,0,.14);transform:translateY(-2px)}
.gallery-album-card .gac-cover{aspect-ratio:3/2;background-size:cover;background-position:center;background-color:#1a1410}
.gallery-album-card .gac-meta{padding:.8rem 1rem;display:flex;flex-direction:column;gap:.15rem}
.gallery-album-card .gac-name{font-family:'EB Garamond',Garamond,serif;font-size:1.25rem;font-weight:600;color:#6b0a19}
.gallery-album-card .gac-count{font-size:.82rem;color:var(--text-muted,#6b5e52)}
.gallery-back{background:none;border:0;color:#8c0e21;font:inherit;cursor:pointer;padding:.3rem 0;margin-bottom:.5rem}
.gallery-back:hover{text-decoration:underline}
.gallery-album-title{font-family:'EB Garamond',Garamond,serif;color:#6b0a19;margin:.2rem 0 1rem}
.gallery-grid{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.gallery-item{margin:0;background:var(--cream,#fcf3e3);border-radius:8px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.06);cursor:pointer}
.gallery-item .gi-img{aspect-ratio:4/3;background-size:cover;background-position:center;transition:transform .25s}
.gallery-item:hover .gi-img{transform:scale(1.04)}
.gallery-item figcaption{color:#fff;background:linear-gradient(to top,rgba(18,12,8,.94) 0%,rgba(18,12,8,.55) 55%,transparent 100%)}
.gallery-lightbox{position:fixed;inset:0;z-index:9999;background:rgba(12,8,6,.92);display:flex;align-items:center;justify-content:center;padding:2rem}
.gallery-lightbox .glb-stage{margin:0;max-width:92vw;max-height:88vh;display:flex;flex-direction:column;align-items:center;gap:.6rem}
.gallery-lightbox .glb-stage img{max-width:92vw;max-height:80vh;object-fit:contain;border-radius:4px;box-shadow:0 8px 40px rgba(0,0,0,.5)}
.gallery-lightbox .glb-stage figcaption{color:#f3ece0;font-family:'EB Garamond',Garamond,serif;font-size:1rem;text-align:center;max-width:60ch}
.gallery-lightbox .glb-close{position:absolute;top:1rem;right:1.25rem;background:none;border:0;color:#fff;font-size:2.4rem;line-height:1;cursor:pointer;opacity:.8}
.gallery-lightbox .glb-close:hover{opacity:1}
.gallery-lightbox .glb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.1);border:0;color:#fff;font-size:2.6rem;line-height:1;width:56px;height:72px;cursor:pointer;border-radius:8px}
.gallery-lightbox .glb-nav:hover{background:rgba(255,255,255,.22)}
.gallery-lightbox .glb-prev{left:1rem}.gallery-lightbox .glb-next{right:1rem}
.gallery-lightbox .glb-counter{position:absolute;bottom:1.1rem;left:0;right:0;text-align:center;color:#f3ece0;font-size:.85rem;letter-spacing:.05em}
@media(max-width:600px){.gallery-lightbox{padding:.5rem}.gallery-lightbox .glb-nav{width:44px;height:60px;font-size:2rem}}


/* ── Universal ICKSP loading indicator (crest pulse) ───────────────────── */
.icksp-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;padding:4rem 1rem;color:#6b5e52}
.icksp-loader img{width:64px;height:auto;animation:icksp-pulse 1.4s ease-in-out infinite}
.icksp-loader span{font-family:var(--ff-body,'Inter',sans-serif);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
@keyframes icksp-pulse{0%,100%{opacity:.4;transform:scale(.94)}50%{opacity:1;transform:scale(1)}}


/* ── Location / Visit Us (homepage, after Glimpse) ─────────────────────── */
.location-section{padding:var(--sp-3xl,3.5rem) 0;background:#f4eee2}
.location-grid{display:grid;grid-template-columns:minmax(300px,.82fr) 1.4fr;align-items:stretch;max-width:1120px;margin:0 auto;background:var(--bg-card,#fbf7ee);border:1px solid rgba(107,10,25,.12);border-radius:16px;overflow:hidden;box-shadow:0 22px 55px rgba(26,20,16,.18)}
.location-panel{padding:clamp(1.75rem,3vw,2.75rem);display:flex;flex-direction:column}
.loc-name{font-family:var(--ff-heading,'EB Garamond',Garamond,serif);font-weight:600;font-size:clamp(1.45rem,2.2vw,1.85rem);line-height:1.18;color:var(--burgundy,#6b0a19);margin:0 0 1.25rem;padding-bottom:.85rem;border-bottom:2px solid rgba(201,162,39,.45)}
.loc-rows{display:flex;flex-direction:column}
.loc-row{display:flex;align-items:flex-start;gap:.95rem;padding:1rem 0;border-top:1px solid rgba(107,10,25,.1)}
.loc-row:first-child{border-top:0;padding-top:0}
.loc-ico{flex-shrink:0;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(201,162,39,.16);color:var(--burgundy,#8c0e21)}
.loc-ico svg{width:19px;height:19px}
.loc-k{font-family:var(--ff-ui,'Source Sans 3',sans-serif);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:#6b5c43;margin:0 0 .2rem}
.loc-v{font-size:1.04rem;line-height:1.5;color:var(--text,#2d2218)}
.loc-v a{color:var(--burgundy,#8c0e21);text-decoration:none}
.loc-v a:hover{text-decoration:underline}
.loc-clergy-link{margin-top:auto;padding-top:1.5rem;display:inline-flex;align-items:center;gap:.5rem;font-family:var(--ff-ui,'Source Sans 3',sans-serif);font-weight:600;font-size:.96rem;letter-spacing:.02em;color:var(--burgundy,#8c0e21);text-decoration:none}
.loc-clergy-link .arr{transition:transform .2s ease}
.loc-clergy-link:hover{color:#a8801f}
.loc-clergy-link:hover .arr{transform:translateX(5px)}
.location-map{min-height:430px;background:#e9e4d8}
.location-map iframe{width:100%;height:100%;min-height:430px;border:0;display:block}
@media(max-width:820px){.location-grid{grid-template-columns:1fr}.location-panel{padding:1.6rem}.location-map,.location-map iframe{min-height:320px}}

/* ── Bulletin in-page viewer (server-rendered page previews + lightbox) ── */
.bulletin-viewer-open { display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; position:relative; border-radius:6px; overflow:hidden; box-shadow:0 4px 18px rgba(0,0,0,.12); }
.bulletin-viewer-open img { display:block; width:100%; height:auto; }
.bulletin-viewer-open:hover .bulletin-viewer-hint { background:rgba(11,21,32,.92); }
.bulletin-viewer-hint { position:absolute; bottom:10px; right:10px; background:rgba(11,21,32,.78); color:#fff; font-family:var(--ff-ui,sans-serif); font-size:.78rem; padding:.35em .8em; border-radius:20px; letter-spacing:.02em; }
.bul-viewer { position:fixed; inset:0; z-index:9999; }
html.bul-viewer-open { overflow:hidden; }
.bul-viewer-scrim { position:absolute; inset:0; z-index:1; background:rgba(8,12,18,.94); }
.bul-viewer-bar { position:absolute; top:0; left:0; right:0; height:52px; z-index:5; display:flex; align-items:center; justify-content:space-between; padding:0 18px; pointer-events:none; }
.bul-viewer-counter { color:#fff; font-family:var(--ff-ui,sans-serif); font-size:.9rem; letter-spacing:.05em; pointer-events:auto; }
.bul-viewer-actions { display:flex; align-items:center; gap:10px; pointer-events:auto; }
.bul-viewer-zoom, .bul-viewer-dl { display:inline-block; background:rgba(255,255,255,.92); color:#3a3a3a; border:0; font-family:var(--ff-ui,sans-serif); font-weight:600; font-size:.85rem; padding:.5em 1.05em; border-radius:6px; cursor:pointer; text-decoration:none; white-space:nowrap; }
.bul-viewer-zoom:hover, .bul-viewer-dl:hover { background:#fff; }
.bul-viewer-close { background:none; border:0; color:#fff; font-size:1.9rem; line-height:1; cursor:pointer; padding:0 .15em; }
.bul-viewer-stage { position:absolute; top:52px; left:0; right:0; bottom:0; z-index:2; display:flex; align-items:center; justify-content:center; overflow:auto; padding:10px 14px 16px; -webkit-overflow-scrolling:touch; }
.bul-viewer-img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; box-shadow:0 10px 40px rgba(0,0,0,.5); background:#fff; cursor:zoom-in; border-radius:2px; }
.bul-viewer.is-zoomed .bul-viewer-stage { align-items:flex-start; justify-content:flex-start; }
.bul-viewer.is-zoomed .bul-viewer-img { max-width:none; max-height:none; width:170%; cursor:zoom-out; }
.bul-viewer-nav { position:absolute; z-index:4; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.16); color:#fff; border:0; width:50px; height:50px; border-radius:50%; cursor:pointer; display:grid; place-items:center; }
.bul-viewer-nav:hover { background:rgba(255,255,255,.3); }
.bul-viewer-nav svg { display:block; width:24px; height:24px; }
.bul-viewer-nav[hidden] { display:none; }
.bul-prev { left:16px; } .bul-next { right:16px; }
.bul-viewer-swipehint { display:none; }
@media (max-width:700px) {
  .bul-viewer-bar { height:48px; padding:0 10px; }
  .bul-viewer-stage { top:48px; padding:6px 2px 10px; }
  .bul-viewer.is-zoomed .bul-viewer-img { width:300%; }
  /* Solid dark pill, visible over white bulletin pages. Rests subtle (they sit over the
     text); opaque for 3s on open/page-turn via .nav-awake, and instantly opaque on press. */
  .bul-viewer-nav { width:44px; height:44px; background:rgba(8,12,18,.6); box-shadow:0 1px 6px rgba(0,0,0,.45); opacity:.3; transition:opacity .5s ease; }
  .bul-viewer.nav-awake .bul-viewer-nav { opacity:1; }
  .bul-viewer-nav:active { background:rgba(8,12,18,.85); opacity:1; transition:none; }
  .bul-viewer-nav svg { width:22px; height:22px; }
  .bul-prev { left:8px; } .bul-next { right:8px; }
  .bul-viewer-zoom, .bul-viewer-dl { font-size:.78rem; padding:.45em .75em; }
  .bul-viewer-close { font-size:1.7rem; }
  /* One-time "swipe to turn pages" hint — only for multi-page bulletins, auto-fades, gone after first swipe */
  .bul-viewer.has-multi .bul-viewer-swipehint {
    display:block; position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:6;
    background:rgba(8,12,18,.72); color:#fff; font-family:var(--ff-ui,sans-serif); font-size:.8rem;
    letter-spacing:.03em; padding:.5em 1.1em; border-radius:999px; pointer-events:none; white-space:nowrap;
    animation:bulSwipeHint 4.5s ease forwards;
  }
  .bul-viewer.swiped-once .bul-viewer-swipehint { display:none; }
}
@keyframes bulSwipeHint {
  0% { opacity:0; transform:translateX(-50%) translateY(6px); }
  12%, 70% { opacity:1; transform:translateX(-50%) translateY(0); }
  100% { opacity:0; transform:translateX(-50%) translateY(0); }
}