/* ==========================================================================
   Saint Elizabeth 2027 layer for the eCatholic theme
   Loads after theme.css. Selectors are doubled on native IDs so they outrank
   the theme without touching its structure. No markup is required beyond the
   theme's own, plus the embed-module classes listed in ECATHOLIC_MAP.md.

   Colors are the parish's own: #173c45 #205468 #b8913a #f6f3ed #34444a.
   Wine and rose come from Elizabeth's dress and roses in the parish's portrait.
   Fonts are the parish's own: Manrope, EB Garamond.
   ========================================================================== */
:root {
  --night: #0b1d22;
  --cloak: #173c45;
  --teal: #205468;
  --teal-soft: #2c738f;
  --gold: #b8913a;
  --gold-lit: #e0bf72;
  --paper: #f6f3ed;
  --sheet: #fffdf8;
  --mist: #edf2ef;
  --ink: #173c45;
  --text: #34444a;
  --muted: #55656b;
  --wine: #8a1f33;
  --rose: #f3b6bc;
  --on-dark: #f6f3ed;
  --on-dark-2: #c6d3d4;
  --hair: rgb(23 60 69 / .14);
  --hair-dark: rgb(246 243 237 / .18);
  --season: #2f7a4c;
  --display: "EB Garamond", Georgia, "Times New Roman", serif;
  --body: Manrope, Helvetica, Arial, sans-serif;
  --r-xl: 32px;
  --r-lg: 22px;
  --edge: clamp(10px, 1.1vw, 16px);
  --gap: clamp(10px, 1.1vw, 16px);
  --pad: clamp(1.4rem, 3.6vw, 3.5rem);
  --head: 136px;
  color-scheme: light;
  interpolate-size: allow-keywords;
}
/* The Church's season runs through the site as one thread of color. */
:root[data-season="ordinary"] { --season: #2f7a4c; }
:root[data-season="advent"], :root[data-season="lent"] { --season: #5e3b8f; }
:root[data-season="christmas"] { --season: #d9b45f; }
:root[data-season="rose"] { --season: #d0708a; }
:root[data-season="red"] { --season: #a62b2b; }

@view-transition { navigation: auto; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--head) + 12px); }
#core * { scroll-margin-top: 0 !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  @view-transition { navigation: none; }
  #background#background #header#header#header, #background#background #header#header #headerText#headerText { animation: none !important; }
}
body.ecatholic { background: var(--paper) !important; margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.stez-skip-link { position: fixed; left: 12px; top: -80px; z-index: 3000; padding: 10px 16px; border-radius: 999px; background: var(--sheet); color: var(--ink); font: 700 15px var(--body); }
.stez-skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--wine) !important; outline-offset: 2px; }
.scene :focus-visible, .hero :focus-visible, .tone-dark :focus-visible, .band.dark :focus-visible, #footerBackground :focus-visible { outline-color: var(--gold-lit) !important; }

/* --- Native page frame ---------------------------------------------------- */
#background#background {
  position: relative; background: var(--paper) !important; padding: var(--head) 0 0 !important; min-height: 100dvh;
  font: 500 1.0625rem/1.65 var(--body); color: var(--text);
}
#background#background::after { content: none !important; height: 0 !important; }

/* --- Native header, floated as one sheet of glass --------------------------- */
#background#background #headerBackground#headerBackground { position: static !important; height: auto !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; background: none !important; box-shadow: none !important; }
#background#background #navBackground#navBackground { display: none !important; }
#background#background #pageImage { display: none; }
#background#background #header#header#header {
  position: fixed !important; z-index: 1000; inset: 10px auto auto 50% !important; translate: -50% 0;
  box-sizing: border-box; width: min(100% - 2 * var(--edge), 1500px) !important; max-width: none !important; height: auto !important; margin: 0 !important; padding: 0 clamp(10px, 1.4vw, 22px) !important;
  display: grid !important; align-items: center; column-gap: clamp(10px, 1.4vw, 24px);
  grid-template-columns: auto minmax(0, 1fr) auto auto !important; grid-template-rows: 35px auto; animation: header-tuck linear both; animation-timeline: scroll(root); animation-range: 0 140px;
  grid-template-areas: "logo util util util" "logo nav mass search" !important;
  border-radius: var(--r-lg); border: 1px solid rgb(255 255 255 / .55) !important;
  background: color-mix(in oklab, var(--sheet) 84%, transparent) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: 0 10px 34px rgb(11 29 34 / .14), inset 0 -2px 0 var(--season) !important;
}
#background#background #header#header#header::before, #background#background #header#header#header::after { content: none !important; display: none !important; }
#background#background #header#header#header > * { position: static !important; float: none !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; transform: none !important; }
#background#background #header #mobileNavBar { display: none !important; grid-area: menu !important; }
#background#background #header #siteLogo { grid-area: logo !important; }
#background#background #header #siteLogo :is(.moduleInner, #siteLogoBody, a, picture) { display: block !important; height: auto !important; width: auto !important; position: static !important; margin: 0 !important; padding: 0 !important; background: none !important; }
#background#background #header #siteLogo { height: auto !important; align-self: center; justify-self: start; background: none !important; box-shadow: none !important; border-radius: 0 !important; }
/* The logo stands the full height of the header and eases down as the utility row tucks away.
   The height is set through --logo-h because !important would outrank a keyframe on height itself. */
@property --logo-h { syntax: "<length>"; inherits: false; initial-value: 96px; }
@keyframes logo-tuck { to { --logo-h: var(--logo-small); } }
#background#background #header #siteLogo img { --logo-h: 96px; --logo-small: 70px; display: block; transform: none !important; max-height: none !important; height: var(--logo-h) !important; width: auto !important; max-width: none !important; position: static !important; border-radius: 8px; margin-block: 6px !important; background: #fff; box-shadow: 0 2px 10px rgb(11 29 34 / .16), 0 0 0 1px rgb(23 60 69 / .08); animation: logo-tuck linear both; animation-timeline: scroll(root); animation-range: 0 140px; }
#background#background #header #headerText {
  grid-area: util !important; border-bottom: 1px solid var(--hair); overflow: hidden; display: block !important; background: none !important; align-self: stretch;
  height: 34px; animation: util-tuck linear both; animation-timeline: scroll(root); animation-range: 0 140px;
}
/* The theme pins this module's box with !important, which outranks a keyframe, so the header's own grid row does the tucking. */
@keyframes util-tuck { to { opacity: 0; visibility: hidden; border-color: transparent; } }
@keyframes header-tuck { to { grid-template-rows: 0px auto; } }
#background#background #header#header #headerText#headerText { background: transparent !important; border-radius: 0 !important; box-shadow: none !important; }
#background#background #headerTextBody { display: flex !important; justify-content: space-between; align-items: center; gap: 1rem; height: 34px; background: none !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; position: static !important; }
#background#background #headerTextBody p { margin: 0 !important; display: flex; align-items: center; gap: 0 clamp(.7rem, 1.4vw, 1.4rem); white-space: nowrap; }
#background#background #header#header #headerText#headerText :is(.moduleInner, #headerTextBody, p) { background: none !important; color: var(--ink) !important; }
#background#background #header#header #headerText#headerText #headerTextBody a { color: var(--ink) !important; }
#background#background #headerTextBody a { color: var(--ink) !important; font: 600 .8125rem/1.3 var(--body) !important; text-decoration: none !important; background: none !important; }
#background#background #headerTextBody a { display: inline-flex; align-items: center; min-height: 24px; }
#background#background #headerTextBody a:hover { text-decoration: underline !important; }
#background#background #headerTextBody .today { display: inline-flex; align-items: center; gap: .5em; }
#background#background #headerTextBody .today::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: var(--season); box-shadow: 0 0 0 1px rgb(23 60 69 / .35); }
#background#background #headerTextBody .util-urgent { color: var(--wine) !important; font-weight: 700 !important; }

#background#background #header #nav#nav {
  grid-area: nav !important; display: block !important; position: static !important; height: auto !important; background: none !important; justify-self: center; top: auto !important; box-shadow: none !important;
}
#background#background #header #nav#nav > ul { float: none !important; width: auto !important; display: flex !important; flex-wrap: nowrap; gap: clamp(.1rem, .5vw, .55rem); margin: 0 !important; padding: 0 !important; list-style: none; height: auto !important; background: none !important; }
#background#background #header #nav#nav > ul > li { position: relative !important; float: none !important; margin: 0 !important; padding: 0 !important; width: auto !important; background: none !important; display: block !important; }
#background#background #header #nav#nav > ul > li > a {
  display: block !important; padding: .5rem .8rem !important; border-radius: 999px; background: none !important;
  color: var(--ink) !important; font: 600 .96875rem/1.3 var(--body) !important; text-decoration: none !important; white-space: nowrap; height: auto !important; line-height: 1.3 !important; text-shadow: none !important;
}
#background#background #header #nav#nav > ul > li > a span { color: inherit !important; font: inherit !important; }
#background#background #header #nav#nav > ul > li:hover > a, #background#background #header #nav#nav > ul > li:focus-within > a { background: rgb(23 60 69 / .08) !important; }
#background#background #header #nav#nav > ul > li.selected > a { color: var(--wine) !important; box-shadow: inset 0 0 0 1px rgb(138 31 51 / .4); }
#background#background #header #nav#nav > ul > li > ul.secondLevel {
  display: flex !important; gap: 2rem; position: absolute !important; left: 50% !important; translate: -50% 8px; top: 100% !important; width: max-content !important; max-width: 760px; box-sizing: border-box;
  margin: 0 !important; padding: 1.4rem 1.6rem !important; list-style: none; border-radius: var(--r-lg); background: var(--sheet) !important; border: 1px solid var(--hair) !important; box-shadow: 0 24px 60px rgb(11 29 34 / .22) !important;
  opacity: 0; visibility: hidden; transition: opacity .16s, visibility .16s; height: auto !important; columns: auto !important;
}
#background#background #header #nav#nav > ul > li > ul.secondLevel::before { content: ""; position: absolute; inset: -12px 0 auto; height: 12px; }
#background#background #header #nav#nav > ul > li:hover > ul.secondLevel, #background#background #header #nav#nav > ul > li:focus-within > ul.secondLevel { opacity: 1; visibility: visible; }
#background#background #header #nav#nav > ul > li.navDismissed > ul.secondLevel { opacity: 0 !important; visibility: hidden !important; }
#background#background #header #nav .navGroup { float: none !important; width: auto !important; min-width: 11rem; max-width: 15rem; padding: 0 !important; margin: 0 !important; display: block !important; background: none !important; }
#background#background #header #nav .groupName { display: block !important; padding: 0 0 .5rem !important; color: var(--muted) !important; font: 700 .75rem/1.3 var(--body) !important; letter-spacing: .03em; border: 0 !important; background: none !important; }
#background#background #header #nav .navGroup ul.secondLevel { position: static !important; display: block !important; opacity: 1 !important; visibility: inherit !important; margin: 0 !important; padding: 0 !important; list-style: none; background: none !important; box-shadow: none !important; border: 0 !important; width: auto !important; height: auto !important; }
#background#background #header #nav .navGroup li { float: none !important; display: block !important; margin: 0 !important; padding: 0 !important; width: auto !important; background: none !important; border: 0 !important; }
#background#background #header #nav .navGroup li a { display: block !important; padding: .34rem 0 !important; color: var(--ink) !important; font: 600 .9375rem/1.35 var(--body) !important; background: none !important; text-decoration: none !important; white-space: normal; height: auto !important; }
#background#background #header #nav .navGroup li a:hover { color: var(--wine) !important; text-decoration: underline !important; }
#background#background #header #quickLinks { grid-area: mass !important; display: block !important; justify-self: end; background: none !important; }
#background#background #header #quickLinks .moduleInner { display: block !important; background: none !important; padding: 0 !important; margin: 0 !important; }
#background#background #header #quickLinks ul { margin: 0 !important; padding: 0 !important; list-style: none; display: block !important; }
#background#background #header #quickLinks li { margin: 0 !important; padding: 0 !important; display: block !important; float: none !important; background: none !important; }
#background#background #header #quickLinks a { display: inline-block !important; padding: .55rem 1.05rem !important; border-radius: 999px; background: var(--teal) !important; color: #fff !important; font: 700 .9rem/1.2 var(--body) !important; text-decoration: none !important; white-space: nowrap; height: auto !important; border: 0 !important; }
#background#background #header #quickLinks a:hover { background: var(--cloak) !important; }
#background#background #header #search { grid-area: search !important; display: block !important; height: auto !important; background: none !important; justify-self: end; }
#background#background #header#header #search#search .moduleInner { display: block !important; }
#background#background #header#header #search#search { width: 40px !important; min-width: 40px; overflow: hidden !important; opacity: 1 !important; visibility: visible !important; }
#background#background #header#header #search#search::before, #background#background #header#header #search#search::after { content: none !important; display: none !important; }
#background#background #header #search .searchLink { display: grid !important; visibility: visible !important; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--ink); }
#background#background #header #search .searchLink:hover { background: rgb(23 60 69 / .08); }

@media (max-width: 1279px) {
  :root { --head: 124px; }
  #background#background #header#header#header { grid-template-columns: auto minmax(0, 1fr) auto !important; grid-template-areas: "logo util util" "logo mass menu" !important; padding-inline: 12px !important; }
  #background#background #header #nav#nav, #background#background #header #search { display: none !important; }
  #background#background #header #mobileNavBar { display: block !important; }
  #background#background #header #siteLogo img { --logo-h: 84px; --logo-small: 62px; }
  #background#background #header#header #quickLinks#quickLinks { justify-self: end !important; }
  #background#background #header#header #mobileNavBar#mobileNavBar { background: none !important; width: auto !important; height: auto !important; align-self: center; }
  #background#background #navicon::before, #background#background #navicon::after { content: none !important; display: none !important; }
  #background#background #navicon { background-image: none !important; display: grid !important; place-items: center; width: 44px !important; height: 44px !important; border-radius: 50%; color: var(--ink) !important; background: rgb(23 60 69 / .08) !important; font-size: inherit !important; }
  #background#background #navicon svg { display: block; }
  #background#background #header#header #mobileNavBar#mobileNavBar #navicon#navicon { color: var(--ink) !important; }
  #background#background #headerTextBody .util-address { display: none; }
}
@media (max-width: 700px) {
  :root { --head: 122px; --r-xl: 24px; --r-lg: 18px; }
  #background#background #header#header#header { grid-template-areas: "util util util" "logo mass menu" !important; }
  #background#background #header #siteLogo img { --logo-h: 58px; --logo-small: 48px; margin-block: 5px !important; }
  @media (max-width: 360px) { #background#background #header #siteLogo img { --logo-h: 50px; --logo-small: 44px; } }
  #background#background #headerTextBody p:first-child { min-width: 0; flex: 1 1 auto; }
  #background#background #headerTextBody .util-right { flex: none; }
  #background#background #headerTextBody .today-date, #background#background #headerTextBody .util-phone { display: none; }
  #background#background #headerTextBody a { font-size: .75rem !important; }
  #background#background #header #quickLinks a { padding: .5rem .85rem !important; font-size: .84rem !important; }
}
@media (max-width: 430px) {
  /* Too narrow for both: the sacramental emergency line wins. The readings stay in the page. */
  #background#background #headerTextBody { justify-content: center; }
  #background#background #headerTextBody p:first-child { display: none !important; }
}

/* Native mobile panel */
#mobilePanel#mobilePanel {
  position: fixed !important; inset: 0 0 0 auto !important; z-index: 2000; width: min(400px, 92vw) !important; height: 100dvh !important; max-height: none !important; box-sizing: border-box; padding: 1.2rem 1.2rem 2rem !important; overflow-y: auto;
  background: var(--sheet) !important; color: var(--ink); translate: 102% 0; visibility: hidden; transition: translate .22s ease, visibility .22s; display: block !important; left: auto !important; top: 0 !important; box-shadow: -18px 0 60px rgb(11 29 34 / .25);
  font: 500 1rem/1.5 var(--body);
}
body.mobilePanelActive #mobilePanel#mobilePanel { translate: 0 0; visibility: visible; }
#mobileScrim { position: fixed; inset: 0; z-index: 1900; background: rgb(11 29 34 / .45); }
#mobileScrim[hidden] { display: none; }
#mobilePanel ul { list-style: none !important; margin: 0 !important; padding: 0 !important; display: block !important; height: auto !important; }
#mobilePanel #mobileSearch { position: static !important; width: auto !important; height: auto !important; background: none !important; padding: 0 0 1rem !important; display: block !important; }
#mobilePanel #mobileSearch label { display: block !important; font: 700 .85rem var(--body); color: var(--ink) !important; position: static !important; margin-bottom: .25rem; }
#mobilePanel #mobileSearch input { box-sizing: border-box; display: block !important; width: 100% !important; height: 44px !important; padding: 0 .9rem !important; border: 1px solid #7d7464 !important; border-radius: 12px !important; background: #fff !important; font: 500 1rem var(--body) !important; color: var(--ink) !important; position: static !important; }
#mobilePanel #mobileNav { display: block !important; position: static !important; background: none !important; }
#mobilePanel #mobileNav > ul > li { position: relative; float: none !important; display: block !important; width: auto !important; border-top: 1px solid var(--hair) !important; background: none !important; margin: 0 !important; padding: 0 !important; }
#mobilePanel #mobileNav > ul > li > a { display: block !important; padding: .85rem 3.2rem .85rem 0 !important; color: var(--ink) !important; font: 500 1.5rem/1.2 var(--display) !important; background: none !important; text-decoration: none !important; }
#mobilePanel .navToggle { position: absolute; right: 0; top: .35rem; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgb(23 60 69 / .07); color: var(--ink); cursor: pointer; }
#mobilePanel .navToggle::before { content: "+"; font: 500 1.4rem/1 var(--body); }
#mobilePanel .navCollapsible:not(.navCollapsed) .navToggle::before { content: "−"; }
#mobilePanel .navCollapsed > ul { display: none !important; }
#mobilePanel #mobileNav li li { float: none !important; background: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
#mobilePanel #mobileNav li li a { display: block !important; padding: .55rem 0 !important; color: var(--text) !important; font: 600 1rem/1.35 var(--body) !important; background: none !important; }
#mobilePanel #mobileNav li ul { padding-bottom: .7rem !important; }
#mobilePanel #mobileQuickLinks { display: block !important; position: static !important; background: none !important; margin-top: 1rem !important; border-top: 1px solid var(--hair); padding: .6rem 0 0 !important; }
#mobilePanel #mobileQuickLinks li { float: none !important; display: block !important; background: none !important; margin: 0 !important; padding: 0 !important; width: auto !important; }
#mobilePanel #mobileQuickLinks a { display: block !important; padding: .55rem 0 !important; color: var(--ink) !important; font: 700 .95rem var(--body) !important; background: none !important; }

/* --- Native core and sections ---------------------------------------------- */
#background#background #core#core {
  position: relative; display: block !important; float: none !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 0 var(--gap) !important; background: none !important; outline: 0; min-height: 0 !important; overflow: visible !important;
  font: 500 1.0625rem/1.65 var(--body) !important; color: var(--text);

  :is(h1, h2, h3) { font-family: var(--display) !important; font-weight: 400 !important; color: inherit; margin: 0; text-wrap: balance; letter-spacing: -.012em; text-transform: none; background: none; border: 0; padding: 0; }
  h1, .hero-title { font-size: clamp(3rem, 7vw, 6.75rem) !important; line-height: .98 !important; letter-spacing: -.022em; display: block; }
  h2:not(.hero-title):not(.moduleName) { font-size: clamp(2.1rem, 4vw, 3.6rem) !important; line-height: 1.04 !important; }
  h3 { font-size: clamp(1.55rem, 2.2vw, 1.95rem) !important; line-height: 1.14 !important; }
  :is(p, li, dd, dt, summary, label, cite, small, b, div, ol, ul, span) { font-family: inherit; }
  p { font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: inherit !important; margin: 0 0 1em !important; }
  p:last-child { margin-bottom: 0 !important; }
  :is(ul, ol) { margin: 0 0 1em; padding-left: 1.2em; }
  li { font-size: inherit !important; line-height: inherit !important; color: inherit; margin-bottom: .35em; background: none; }
  b { font-weight: 700 !important; }
  a:not(.btn):not(.htmlButton) { color: var(--wine) !important; font-weight: 600 !important; text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: .18em; background: none !important; overflow-wrap: anywhere; }
  a:not(.btn):not(.htmlButton):hover { text-decoration-thickness: 2px !important; }
  img { display: block; max-width: 100%; }
  [hidden] { display: none !important; }

  /* Native title: the small label above each page's story */
  #interiorHeader { float: none !important; clear: both; display: block !important; position: static !important; width: min(100% - 2 * var(--edge), 1500px) !important; max-width: none !important; margin: 0 auto !important; padding: .35rem 1.2rem .55rem !important; background: none !important; border: 0 !important; }
  #pageTitle { font: 700 .875rem/1.4 var(--body) !important; letter-spacing: .02em; color: var(--ink) !important; margin: 0 !important; padding: 0 !important; text-align: left !important; background: none !important; }
  #pageTitle .pageTitleWrapper { font: inherit !important; color: inherit !important; }

  /* Native feature slot */
  #features { position: relative !important; display: block !important; width: min(100% - 2 * var(--edge), 1500px) !important; max-width: none !important; height: auto !important; margin: 0 auto var(--gap) !important; padding: 0 !important; background: none !important; }
  #featureSlideshow { float: none !important; position: static !important; display: block !important; height: auto !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; list-style: none; overflow: visible !important; background: none !important; }
  #featureSlideshow > li { position: static !important; display: block !important; height: auto !important; width: auto !important; margin: 0 !important; padding: 0 !important; opacity: 1 !important; float: none !important; }

  /* Native sections and columns */
  #section1 { clear: both; position: static !important; left: auto !important; display: flex !important; flex-direction: column; gap: var(--gap); list-style: none; margin: 0 !important; padding: 0 !important; width: auto !important; max-width: none !important; background: none !important; float: none !important; }
  #section1 > li { box-sizing: border-box; width: min(100% - 2 * var(--edge), 1500px) !important; max-width: none !important; margin: 0 auto !important; padding: 0 !important; float: none !important; position: relative; }
  .anchor { position: absolute; top: 0; }
  .sectionInner { position: relative; display: block !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
  .sectionBackground { display: none !important; }
  .sectionBody { display: block !important; margin: 0 !important; padding: 0 !important; width: auto !important; background: none !important; }
  .modulePosition { list-style: none; margin: 0 !important; padding: 0 !important; width: auto !important; float: none !important; display: flex; flex-direction: column; gap: var(--gap); min-width: 0; background: none !important; }
  .modulePosition > li { margin: 0 !important; padding: 0 !important; min-width: 0; float: none !important; width: auto !important; }
  .modulePositionColumn { align-self: stretch !important; height: auto !important; }
  .modulePositionColumn > li { flex: 1 1 auto; }
  .columnSection > .sectionBody { align-items: stretch !important; display: grid !important; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 701px) {
    .twinColumn > .sectionBody { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .trioColumn > .sectionBody { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (min-width: 701px) and (max-width: 1000px) { .trioColumn > .sectionBody { grid-template-columns: minmax(0, 1fr); } }
  @media (min-width: 1150px) { .duoColumn > .sectionBody { grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr); } }

  /* Every module is a card; native moduleName is the card's label */
  .moduleInner { display: block !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; width: auto !important; }
  /* Module layouts answer to the module's own width, because the column decides it. Section grids keep the theme's breakpoints. */
  .moduleBody { container: module / inline-size; }
  .moduleBody { display: block; max-height: none !important; overflow: visible !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: none !important; font-size: inherit !important; font-family: inherit !important; color: inherit !important; }
  .modulePositionColumn .moduleInner { height: 100%; box-sizing: border-box; padding: clamp(1.4rem, 2.8vw, 2.6rem) !important; border-radius: var(--r-xl) !important; background: var(--sheet) !important; border: 1px solid var(--hair) !important; }
  .modulePositionColumn { & > li:only-child { height: 100%; } }
  .modulePositionColumn .tone-dark { background: var(--cloak) !important; border-color: transparent !important; color: var(--on-dark) !important; }
  .modulePositionColumn :is(.tone-mist, .tone-raised) { background: var(--mist) !important; }
  .tone-dark a:not(.btn):not(.htmlButton) { color: var(--rose) !important; }
  .tone-dark .moduleName, .tone-dark .moduleTitle, .tone-dark .moduleTitle span { color: var(--on-dark) !important; }
  :is(.tone-dark, .band.dark) :is(h1, h2, h3, h4) { color: var(--on-dark) !important; }
  .moduleName { margin: 0 0 1rem !important; padding: 0 !important; font: 400 clamp(1.55rem, 2.2vw, 1.95rem)/1.14 var(--display) !important; background: none !important; border: 0 !important; }
  .moduleTitle, .moduleTitle span { font: inherit !important; color: inherit !important; text-transform: none !important; background: none !important; padding: 0 !important; border: 0 !important; margin: 0 !important; }

  /* Photo cards: words on the photo's dark side */
  .hero, .scene { position: relative; overflow: hidden; border-radius: var(--r-xl); background: var(--night); color: var(--on-dark); isolation: isolate; }
  .hero > img, .scene > img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: right center; }
  @media (min-width: 600px) and (max-width: 999px) { .hero > img, .scene > img { aspect-ratio: 16 / 10; object-position: right center; } }
  .hero-in, .scene-in { padding: 1.5rem var(--pad) 2.2rem; }
  .hero :is(h1, h2, h3, p, li, b, cite), .scene :is(h1, h2, h3, p, li, b, cite) { color: var(--on-dark) !important; }
  .hero a:not(.btn):not(.htmlButton), .scene a:not(.btn):not(.htmlButton) { color: var(--rose) !important; }
  .hero-in .lede { margin-top: 1.25rem !important; }
  .scene h2 + p, .scene p + p { margin-top: 1rem !important; }
  @media (min-width: 1000px) {
    .hero, .scene { display: flex; align-items: center; min-height: clamp(30rem, 68vh, 40rem); }
    .hero { min-height: clamp(34rem, calc(100dvh - var(--head) - 28px), 46rem); }
    .scene { min-height: clamp(28rem, 62vh, 36rem); }
    .hero > img, .scene > img { position: absolute; inset: 0; z-index: -1; height: 100%; aspect-ratio: auto; object-position: right center; }
    /* Keeps the words readable where they cross a bright part of a photo (WCAG 1.4.3). */
    .hero::after, .scene::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgb(11 29 34 / .78) 0%, rgb(11 29 34 / .74) 46%, rgb(11 29 34 / 0) 70%); }
    .hero-in, .scene-in { padding: var(--pad); width: 100%; box-sizing: border-box; }
    .hero-in > *, .scene-in > * { max-width: min(42vw, 37rem); }
    .hero-title { max-width: min(44vw, 40rem) !important; }
  }
  /* Home hero: on a phone, the headline and buttons come first and the photo is shorter. On a computer, everything fits one screen. */
  @media (max-width: 599px) {
    .hero-home > img { aspect-ratio: 16 / 9; }
    .hero-home .hero-in { display: flex; flex-direction: column; padding-top: 1.1rem; }
    .hero-home .hero-in > * { order: 5; }
    .hero-home .hero-in > :is(.eyebrow, h1) { order: 1; }
    .hero-home .hero-in > :is(.actions, .next-mass) { order: 2; }
    .hero-home .hero-in > .lede { order: 3; }
    .hero-home .hero-in > .hero-verse { order: 4; margin-top: 1rem !important; }
    .hero-home .eyebrow { margin-bottom: .6rem !important; }
    .hero-home .actions { margin-top: 1rem !important; }
    .hero-home .next-mass { align-self: flex-start; margin-top: .75rem !important; }
  }
  @media (min-width: 1000px) {
    .hero.hero-home { min-height: clamp(30rem, calc(100dvh - var(--head) - 28px), 46rem); }
    .hero-home .hero-in { padding-block: clamp(1.1rem, 2.6vh, 2rem); }
    .hero-home .hero-in > :is(.actions, .next-mass) { vertical-align: middle; margin-top: 1.1rem !important; }
    .hero-home .hero-in > .actions { display: inline-flex !important; margin-right: .9rem; }
    .hero-home h1 { font-size: clamp(3rem, min(5.4vw, 10vh), 5rem) !important; }
    .hero-home .eyebrow { margin-bottom: .7rem !important; }
    .hero-home .hero-in .lede { margin-top: .85rem !important; }
    .hero-home .hero-search { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; margin-top: 1rem !important; }
    .hero-home .hero-search label { margin: 0; }
    .hero-home .hero-search input { flex: 1 1 14rem; width: auto; max-width: 20rem; }
  }
  /* The photos settle as they come into view. Scroll-driven; nothing runs without support. */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .scene > img { animation: settle linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    }
  }
  .eyebrow { font-weight: 700 !important; font-size: .875rem !important; letter-spacing: .02em; color: var(--gold-lit) !important; margin-bottom: 1rem !important; }
  .lede { font-size: clamp(1.15rem, 1.65vw, 1.4rem) !important; line-height: 1.45 !important; font-weight: 500 !important; }
  .note { font-size: .9375rem !important; color: var(--muted) !important; }
  .tone-dark .note, .band.dark .note { color: var(--on-dark-2) !important; }
  .who { font-size: .9688rem !important; margin-top: .75rem !important; }
  .quote { font: 400 clamp(1.4rem, 2.3vw, 1.9rem)/1.24 var(--display) !important; margin-top: 1.25rem !important; }
  .quote cite { display: block; font: 600 .875rem/1.5 var(--body) !important; margin-top: .5rem; font-style: normal; }

  .actions { display: flex !important; flex-wrap: wrap; gap: .55rem .9rem; align-items: center; margin-top: 1.5rem !important; }
  a.btn.htmlButton { display: inline-block !important; box-sizing: border-box; margin: 0 !important; padding: .78rem 1.35rem !important; border: 0 !important; border-radius: 999px !important; background: var(--wine) !important; color: #fff !important; font: 700 1rem/1.25 var(--body) !important; text-decoration: none !important; text-align: center; box-shadow: none !important; transition: background-color .15s; height: auto !important; width: auto !important; min-width: 0 !important; }
  a.btn.htmlButton:hover { background: #6f1727 !important; }
  a.btn.htmlButton.line { background: transparent !important; color: var(--ink) !important; box-shadow: inset 0 0 0 1px #7d7464 !important; }
  a.btn.htmlButton.line:hover { background: rgb(23 60 69 / .07) !important; }
  :is(.hero, .scene, .tone-dark, .band.dark) a.btn.htmlButton { background: var(--gold-lit) !important; color: #152529 !important; }
  :is(.hero, .scene, .tone-dark, .band.dark) a.btn.htmlButton:hover { background: #ecd08e !important; }
  :is(.hero, .scene, .tone-dark, .band.dark) a.btn.htmlButton.line { background: transparent !important; color: var(--on-dark) !important; box-shadow: inset 0 0 0 1px rgb(246 243 237 / .7) !important; }
  :is(.hero, .scene, .tone-dark, .band.dark) a.btn.htmlButton.line:hover { background: rgb(246 243 237 / .12) !important; }

  /* Next Mass, on the home hero */
  .hero-search { margin: 1.4rem 0 0 !important; }
  .hero-search label { display: block; margin-bottom: .4rem; font-weight: 600; font-size: .9375rem; color: var(--on-dark); }
  .hero-search input { box-sizing: border-box; width: 100%; max-width: 26rem; min-height: 44px; padding: .55rem 1rem; border: 1px solid rgb(246 243 237 / .7); border-radius: 12px; background: var(--sheet); color: var(--ink); font: 500 1rem/1.3 var(--body); }
  .quick-chips { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; margin: .7rem 0 0 !important; padding: 0 !important; }
  .hero .hero-in .quick-chips li { flex: 0 0 auto; width: auto !important; margin: 0 !important; padding: 0 !important; color: inherit !important; }
  .hero .hero-in .quick-chips a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 .8rem; border-radius: 999px; font-weight: 600; font-size: .875rem; text-decoration: none !important; color: var(--on-dark) !important; box-shadow: inset 0 0 0 1px rgb(246 243 237 / .6); }
  .hero .hero-in .quick-chips a:hover { background: rgb(246 243 237 / .14); }
  .bulletin-date { font: 400 1.5rem/1.2 var(--display); margin: 0 0 .5rem !important; }
  .next-mass { display: inline-flex !important; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem; margin: 1.6rem 0 0 !important; padding: .55rem 1rem !important; border-radius: 16px; background: rgb(246 243 237 / .1); box-shadow: inset 0 0 0 1px var(--hair-dark); font-size: .9375rem !important; color: var(--on-dark-2) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .next-mass b { color: var(--on-dark) !important; font-weight: 700 !important; }

  /* Bands */
  .band { padding: var(--pad); border-radius: var(--r-xl); background: var(--sheet); border: 1px solid var(--hair); }
  .band.dark { background: var(--cloak); border-color: transparent; color: var(--on-dark); }
  .band.dark a:not(.btn):not(.htmlButton) { color: var(--rose) !important; }
  .band.raised { background: var(--mist); }
  .wrap { width: auto; margin: 0; }
  .col { max-width: 46rem; }
  .section-intro { max-width: 46rem; margin-bottom: 2rem; }
  .section-intro p { margin-top: .8rem !important; }

  /* Native Mass Times module */
  .sacramentTimes { list-style: none; margin: 0 !important; padding: 0 !important; display: block !important; }
  .sacramentDay { display: block !important; padding: .7rem 0 !important; margin: 0 !important; border-top: 1px solid var(--hair-dark); float: none !important; width: auto !important; }
  .sacramentDay:first-child { border-top: 0; padding-top: 0 !important; }
  .sacramentDay .day { display: block !important; font: 700 .875rem/1.4 var(--body) !important; color: var(--on-dark-2) !important; float: none !important; width: auto !important; text-transform: none !important; margin: 0 0 .15rem !important; }
  .sacramentGroup { display: flex !important; flex-wrap: wrap; gap: 0 .9rem; float: none !important; width: auto !important; }
  .sacramentTime { display: inline-block !important; float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; }
  .startTime { font: 400 1.5rem/1.3 var(--display) !important; color: var(--on-dark) !important; }
  .timePeriod { font: 500 .8125rem/1 var(--body) !important; color: var(--on-dark-2) !important; }
  .rail-line { font-size: .9688rem !important; }

  /* Signature: what are you carrying? Each row opens like a cloak. */
  .carry { border-top: 1px solid var(--hair); }
  .carry details { border-bottom: 1px solid var(--hair); }
  .carry :is(li, p) > a:only-child:not(.btn) { display: inline-block; padding-block: 1px; }
  .carry summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: .68rem minmax(0, 1fr) 1.5rem; gap: .95rem; align-items: center; padding: 1rem .2rem !important; font: 400 clamp(1.45rem, 2.5vw, 2.15rem)/1.16 var(--display) !important; letter-spacing: -.01em; color: var(--ink); transition: color .18s; }
  .carry-label small { display: block; margin-top: .1rem; font: 500 .9375rem/1.35 var(--body); color: var(--muted); }
  .carry summary:hover .carry-label small { color: inherit; }
  .carry summary::-webkit-details-marker { display: none; }
  .carry summary::before { content: ""; width: .68rem; height: .68rem; border-radius: 50%; background: var(--gold); transition: background-color .25s, scale .25s; }
  .carry summary::after { content: "+"; font: 500 1.35rem/1 var(--body); color: var(--muted); text-align: right; transition: rotate .25s; }
  .carry details[open] summary::after { rotate: 45deg; }
  .carry details[open] summary::before { background: var(--wine); scale: 1.25; }
  .carry summary:hover { color: var(--wine); }
  .carry details::details-content { height: 0; overflow: clip; transition: height .28s ease, content-visibility .28s allow-discrete; }
  .carry details[open]::details-content { height: auto; }
  .carry-body { padding: 0 .2rem 1.4rem 1.63rem; max-width: 46rem; }
  .carry-body .say { font: 400 clamp(1.25rem, 1.9vw, 1.5rem)/1.3 var(--display) !important; color: var(--wine) !important; margin-bottom: .45rem !important; }

  /* Father Stephen's weekly message. The class is the live site's: its script swaps in the newest video. */
  .stez-welcome-video { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-lg); background: var(--night); }
  .stez-welcome-video iframe { display: block; width: 100%; height: 100%; border: 0; }
  .pastor > img { display: block; width: 6.5rem; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; border-radius: 999px 999px 14px 14px; background: linear-gradient(#2c5c68, #173c45); margin-bottom: 1.1rem; }
  .pastor h2 + p { margin-top: .75rem !important; }
  /* Rule: only people get the arch. Elizabeth and the staff stand in niches. */
  .niche { display: grid; gap: clamp(1.4rem, 3vw, 2.5rem); align-items: end; }
  .niche > img { width: min(100%, 15rem); aspect-ratio: 3 / 4.2; object-fit: cover; object-position: center top; border-radius: 999px 999px 18px 18px; background: linear-gradient(#2c5c68, #173c45); box-shadow: inset 0 0 0 1px var(--hair-dark); }
  @container module (min-width: 34rem) { .niche { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); } }
  .niche h2 + p { margin-top: 1rem !important; }

  /* The receipt */
  .sum { font: 400 clamp(5rem, 11vw, 10.5rem)/.86 var(--display) !important; letter-spacing: -.03em; color: var(--wine) !important; margin: 0 0 .5rem !important; font-variant-numeric: lining-nums; }
  .receipt-note { font-size: .875rem !important; font-weight: 700 !important; color: var(--muted) !important; margin-bottom: 1.5rem !important; }
  .receipt h2 + p { margin-top: 1rem !important; }

  /* Events */
  .events { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--hair); }
  .events > li { display: grid; gap: .1rem 2rem; padding: 1.05rem 0 !important; margin: 0 !important; border-bottom: 1px solid var(--hair); }
  .events .when { font-weight: 700; font-size: .875rem; color: var(--teal); line-height: 1.45; }
  .events h3 { font-size: clamp(1.4rem, 2vw, 1.7rem) !important; }
  .events p { margin: .2rem 0 0 !important; font-size: .9688rem !important; }
  @container module (min-width: 40rem) { .events > li { grid-template-columns: 14rem minmax(0, 1fr); } .events h3, .events p { grid-column: 2; } .events .when { grid-row: 1 / span 2; } }

  /* Sacrament entries */
  .sac { padding-block: clamp(1.75rem, 3vw, 2.75rem); border-top: 1px solid var(--hair); display: grid; gap: .75rem clamp(1.5rem, 4vw, 4rem); }
  .sac:first-of-type, section > .wrap > .sac:first-child { border-top: 0; padding-top: 0; }
  .sac:last-child { padding-bottom: 0; }
  .sac > * { min-width: 0; }
  .sac .clue { font: 400 clamp(1.3rem, 1.9vw, 1.55rem)/1.28 var(--display) !important; color: var(--ink) !important; margin: 0 !important; }
  @container module (min-width: 44rem) { .sac { grid-template-columns: 16rem minmax(0, 1fr); } .sac > h3 { grid-row: 1 / span 2; } .sac > :is(.clue, div) { grid-column: 2; } }
  details.more { margin-top: 1rem; border-top: 1px solid var(--hair); }
  details.more:last-of-type { border-bottom: 1px solid var(--hair); }
  details.more summary { cursor: pointer; font-weight: 700; padding: .65rem 0 !important; color: var(--ink); }
  details.more::details-content { height: 0; overflow: clip; transition: height .24s ease, content-visibility .24s allow-discrete; }
  details.more[open]::details-content { height: auto; }
  details.more > div { padding-bottom: 1rem; }
  .tone-dark details.more, .band.dark details.more { border-color: var(--hair-dark); }
  .docs { list-style: none !important; padding: 0 !important; margin: .9rem 0 !important; display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; font-size: .9375rem !important; }
  .docs > li { margin: 0 !important; }
  .docs.stack { display: block; }
  .docs.stack > li { margin-bottom: .35rem !important; }

  /* Age ladder */
  .ladder > section { padding-block: clamp(1.4rem, 2.6vw, 2.2rem); border-top: 1px solid var(--hair); display: grid; gap: .5rem clamp(1.5rem, 4vw, 4rem); }
  .ladder > section:first-child { border-top: 0; padding-top: 0; }
  .ladder > section:last-child { padding-bottom: 0; }
  .ladder > section > * { min-width: 0; }
  .ladder .age { font: 400 clamp(1.8rem, 2.8vw, 2.5rem)/1.05 var(--display) !important; color: var(--teal) !important; letter-spacing: -.01em; margin: 0 !important; }
  @container module (min-width: 42rem) { .ladder > section { grid-template-columns: 13rem minmax(0, 1fr); } }
  .ladder h3 { font: 700 1.0625rem/1.4 var(--body) !important; letter-spacing: 0; margin-bottom: .1rem !important; color: var(--ink); }
  .ladder .item { margin-bottom: 1.4rem; }
  .ladder .item:last-child { margin-bottom: 0; }
  .ladder .item p { margin-bottom: .35rem !important; }

  /* Serve directory */
  .tools { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: end; margin-bottom: 1.25rem; }
  .tools label { font-weight: 700; font-size: .875rem; display: grid; gap: .3rem; flex: 1 1 17rem; color: var(--ink); }
  .tools input { box-sizing: border-box; font: 500 1rem var(--body) !important; height: 46px !important; padding: 0 1rem !important; border: 1px solid #7d7464 !important; border-radius: 999px !important; background: #fff !important; color: var(--ink) !important; width: 100% !important; min-width: 0; float: none !important; margin: 0 !important; box-shadow: none !important; }
  .chips { display: flex; flex-wrap: wrap; gap: .4rem; }
  .chips button { font: 600 .9rem var(--body) !important; min-height: 44px; padding: 0 1rem !important; border: 1px solid #7d7464 !important; border-radius: 999px !important; background: transparent !important; color: var(--ink) !important; cursor: pointer; margin: 0 !important; width: auto !important; height: auto !important; box-shadow: none !important; }
  .chips button[aria-pressed="true"] { background: var(--cloak) !important; border-color: var(--cloak) !important; color: #fff !important; }
  #count { font-size: .9375rem !important; color: var(--muted) !important; }
  .min-group h3 { margin: 2rem 0 .75rem !important; }
  .min-list { list-style: none !important; padding: 0 !important; margin: 0 !important; display: grid; gap: .25rem 2.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
  .min-list > li { margin: 0 !important; padding: .85rem 0 !important; border-top: 1px solid var(--hair); min-width: 0; overflow-wrap: anywhere; font-size: .9375rem !important; }
  .min-list > li > b:first-child { font: 500 1.28rem/1.2 var(--display) !important; color: var(--ink); display: block; margin-bottom: .1rem; }
  .min-list p { margin: 0 0 .25rem !important; font-size: .9375rem !important; }
  .min-list .who { margin-top: .2rem !important; }

  /* Native People module: every person gets a niche */
  .peopleModule .person:not(.hasThumb) > * { grid-column: 1 / -1 !important; }
  .peopleModule .moduleBody.aggregate, .peopleModule ul.aggregate { list-style: none !important; padding: 0 !important; margin: 0 !important; display: grid !important; gap: 1.5rem clamp(1rem, 2.4vw, 2rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
  .peopleModule .person { display: grid !important; grid-template-columns: 5.25rem minmax(0, 1fr) !important; column-gap: 1rem !important; align-items: start; margin: 0 !important; padding: 0 !important; float: none !important; width: auto !important; min-height: 0 !important; background: none !important; border: 0 !important; font-size: .9375rem !important; overflow-wrap: anywhere; }
  .peopleModule .person > .thumb { grid-row: 1 / span 5; display: block !important; width: 5.25rem !important; height: 7rem !important; margin: 0 !important; padding: 0 !important; float: none !important; position: static !important; border-radius: 999px 999px 12px 12px !important; overflow: hidden; background: linear-gradient(#2c5c68, #173c45) !important; border: 0 !important; box-shadow: none !important; }
  .peopleModule .person > .thumb img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; border-radius: 0 !important; margin: 0 !important; position: static !important; }
  .peopleModule .person > .thumb.initials { display: grid !important; place-items: center; color: var(--on-dark); font: 400 1.6rem var(--display); }
  .peopleModule .name, .peopleModule .name span { font: 500 1.32rem/1.15 var(--display) !important; color: var(--ink) !important; margin: 0 !important; padding: 0 !important; float: none !important; }
  .peopleModule .info, .peopleModule .role { font-style: normal !important; font-size: .875rem !important; line-height: 1.4 !important; color: var(--muted) !important; margin: .1rem 0 .25rem !important; float: none !important; }
  .peopleModule .mail a { overflow-wrap: break-word !important; }
  .peopleModule :is(.phone, .mail) a { display: inline-block; padding-block: 3px; }
  .peopleModule .phone, .peopleModule .mail { display: block; font-size: .875rem !important; line-height: 1.5 !important; margin: 0 !important; float: none !important; }

  @container module (max-width: 31rem) {
    .peopleModule .person { grid-template-columns: 4.25rem minmax(0, 1fr) !important; column-gap: .8rem !important; }
    .peopleModule .person > .thumb { width: 4.25rem !important; height: 5.75rem !important; }
    .peopleModule .phone, .peopleModule .mail { font-size: .8125rem !important; }
  }

  /* Story beats */
  .beats { list-style: none !important; padding: 0 !important; margin: 0 !important; }
  .beats > li { display: grid; gap: .1rem clamp(1.5rem, 4vw, 3rem); padding: 1.25rem 0 !important; border-top: 1px solid var(--hair); margin: 0 !important; }
  .beats > li:first-child { border-top: 0; padding-top: 0 !important; }
  .band.dark .beats > li { border-color: var(--hair-dark); }
  .beats .yr { font: 400 clamp(1.8rem, 2.8vw, 2.5rem)/1.05 var(--display); color: var(--teal); letter-spacing: -.01em; font-variant-numeric: lining-nums; }
  @container module (min-width: 36rem) { .beats > li { grid-template-columns: 10rem minmax(0, 1fr); } }
  .names { font-size: .9375rem !important; }
  .names dt { font-weight: 700; margin-top: .75rem; color: var(--ink); }
  .names dd { margin: 0; }

  .map { display: block; width: 100%; height: 22rem; border: 0; border-radius: var(--r-xl); background: var(--mist); }
}
@keyframes settle { from { scale: 1.09; } to { scale: 1; } }

/* --- Native footer ---------------------------------------------------------- */
#background#background #footerBackground#footerBackground { position: static !important; width: min(100% - 2 * var(--edge), 1500px) !important; max-width: none !important; margin: 0 auto var(--edge) !important; padding: 0 !important; border-radius: var(--r-xl); background: var(--night) !important; color: var(--on-dark); height: auto !important; bottom: auto !important; left: auto !important; }
#background#background #footer#footer { display: block !important; position: static !important; width: auto !important; max-width: none !important; height: auto !important; margin: 0 !important; padding: var(--pad) var(--pad) 1.5rem !important; background: none !important; font: 500 .9688rem/1.6 var(--body); color: var(--on-dark); }
#background#background #footer > * { position: static !important; float: none !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; height: auto !important; }
#background#background #footerTextBody { background: none !important; color: inherit !important; }
#background#background #stez-footer-info { display: grid !important; gap: 1.75rem clamp(1.5rem, 3vw, 3rem); grid-template-columns: minmax(0, 1fr); width: auto !important; padding: 0 !important; background: none !important; color: inherit !important; font: inherit !important; }
#background#background #stez-footer-info > * { min-width: 0; margin: 0 !important; }
#background#background #stez-footer-info .foot-motto { grid-column: 1 / -1; font: 400 clamp(1.8rem, 3.4vw, 3rem)/1.08 var(--display) !important; letter-spacing: -.012em; color: var(--on-dark) !important; }
#background#background #stez-footer-info h2 { font: 700 .875rem/1.4 var(--body) !important; color: var(--gold-lit) !important; margin: 0 0 .4rem !important; padding: 0 !important; background: none !important; border: 0 !important; text-transform: none !important; letter-spacing: 0 !important; }
#background#background #stez-footer-info p { font: inherit !important; color: inherit !important; margin: 0 0 .6rem !important; text-align: left !important; }
#background#background #footer a { color: var(--on-dark) !important; font-weight: 600 !important; text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: .18em; background: none !important; }
#background#background #stez-footer-info .footer-logos { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem; padding-top: .5rem; }
#background#background #stez-footer-info .footer-logos img { display: block; height: 52px; width: auto; max-width: 100%; }
#background#background #stez-footer-info .foot-stage { grid-column: 1 / -1; color: var(--on-dark-2) !important; font-size: .84rem !important; padding-top: 1rem; border-top: 1px solid var(--hair-dark); }
@media (min-width: 701px) { #background#background #stez-footer-info { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1150px) { #background#background #stez-footer-info { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
#background#background #footerSocialMedia { display: flex !important; gap: 1.25rem; margin-top: 1rem !important; background: none !important; }
#background#background #footerSocialMedia a { display: grid !important; place-items: center; width: 40px !important; height: 40px !important; border: 1px solid var(--hair-dark) !important; border-radius: 50% !important; background: none !important; color: var(--on-dark) !important; }
#background#background #footerSocialMedia a svg { display: block; width: 22px; height: 22px; }
#background#background #footerSocialMedia .moduleInner { display: flex !important; gap: 1.25rem; background: none !important; }
#background#background #footerGroup { display: flex !important; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 1rem !important; color: var(--on-dark-2) !important; font-size: .84rem !important; background: none !important; }
#background#background #footerLinks, #background#background #footerBrand { position: static !important; float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; color: inherit !important; font-size: inherit !important; background: none !important; display: block !important; text-align: left !important; }

/* --- Accessibility panel, as on the live site --------------------------------- */
#stez-a11y-fab#stez-a11y-fab { position: fixed !important; left: 14px !important; right: auto !important; bottom: 14px !important; top: auto !important; z-index: 900; display: grid !important; place-items: center; width: 46px !important; height: 46px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: var(--cloak) !important; color: #fff !important; cursor: pointer; box-shadow: 0 6px 20px rgb(11 29 34 / .3) !important; opacity: 1 !important; }
@media (max-width: 700px) { #stez-a11y-fab#stez-a11y-fab { left: auto !important; right: 14px !important; } }
#a11y-panel { box-sizing: border-box; width: min(520px, 94vw); padding: 1.4rem; border: 0; border-radius: var(--r-lg); background: var(--sheet); color: var(--text); font: 500 1rem/1.5 var(--body); box-shadow: 0 30px 80px rgb(11 29 34 / .35); }
#a11y-panel::backdrop { background: rgb(11 29 34 / .45); }
.a11y-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .5rem; }
#a11y-panel h2 { margin: 0; font: 400 1.75rem/1.1 var(--display); color: var(--ink); }
#a11y-panel p { margin: 0 0 1rem; }
#a11y-panel button { font: 600 .95rem/1.3 var(--body); color: var(--ink); cursor: pointer; }
.a11y-close { width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgb(23 60 69 / .07); font-size: 1.4rem !important; }
.a11y-size { display: flex; justify-content: space-between; align-items: center; padding: .6rem 0; font-weight: 700; color: var(--ink); }
.a11y-size > div { display: flex; align-items: center; gap: .5rem; }
.a11y-size button { min-width: 44px; height: 44px; border: 1px solid #7d7464; border-radius: 999px; background: none; }
.a11y-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .5rem; margin-block: .5rem 1rem; }
.a11y-grid button { display: block; text-align: left; padding: .7rem .9rem; border: 1px solid #7d7464; border-radius: 14px; background: none; }
.a11y-grid button small { display: block; font-weight: 500; color: var(--muted); }
#a11y-panel .a11y-grid button[aria-pressed="true"] { background: var(--cloak); border-color: var(--cloak); color: #fff; }
#a11y-panel .a11y-grid button[aria-pressed="true"] small { color: #d7e1e1; }
.a11y-reset { padding: .5rem 0; border: 0; background: none; text-decoration: underline; }
.a11y-contrast { --text: #101c20; --muted: #27363b; --ink: #0b1d22; --on-dark-2: #f6f3ed; --hair: rgb(23 60 69 / .45); }
.a11y-links #core a, .a11y-links #footer a { text-decoration-thickness: 2px !important; }
.a11y-readable { --display: Manrope, Arial, sans-serif; }
.a11y-readable #core :is(h1, h2, h3), .a11y-readable .hero-title { letter-spacing: 0 !important; }
.a11y-spacing #core :is(p, li) { line-height: 2 !important; letter-spacing: .02em; }
.a11y-still *, .a11y-still *::before, .a11y-still *::after { animation: none !important; transition: none !important; }
.a11y-still { scroll-behavior: auto !important; }
.a11y-still #background #header #headerText { height: 34px !important; }

@media (forced-colors: active) { #background#background #header#header#header { border: 1px solid CanvasText !important; } }
@media print {
  #background#background { padding-top: 0 !important; }
  #background#background #header#header#header { position: static !important; translate: none; box-shadow: none !important; }
  #stez-a11y-fab#stez-a11y-fab, #mobilePanel#mobilePanel { display: none !important; }
}

/* Serve: the full ministries menu on wide screens, and group labels in the phone menu */
#background#background #header #nav#nav > ul > li#nav_serve > ul.secondLevel { width: min(92vw, 75rem) !important; max-width: none; gap: 1.5rem; max-height: calc(100dvh - var(--head) - 1.5rem); overflow-y: auto; }
#background#background #header #nav#nav > ul > li#nav_serve .navGroup { min-width: 0; max-width: none; flex: 1 1 0; }
#background#background #header #nav#nav > ul > li#nav_serve .navGroup:has(li:nth-child(15)) { flex: 2 1 0; }
#background#background #header #nav#nav > ul > li#nav_serve .navGroup:has(li:nth-child(15)) ul.secondLevel { columns: 2 !important; column-gap: 1.25rem; }
#background#background #header #nav#nav > ul > li#nav_serve .navGroup li { break-inside: avoid; }
#background#background #header #nav#nav > ul > li#nav_serve .navGroup li a { font-size: .875rem !important; padding: .22rem 0 !important; }
#mobileNav .navGroupLabel { margin: .9rem 0 .2rem; padding: 0 1rem; color: var(--muted); font: 700 .75rem/1.3 var(--body); letter-spacing: .03em; list-style: none; }


/* Ministry cards (parish-2027-ministries.js). The menu stays open while its card is open. */
#background#background #header #nav#nav > ul > li.stez-card-held > ul.secondLevel { opacity: 1; visibility: visible; }
#stez-min-card { position: fixed; z-index: 100000; box-sizing: border-box; width: min(17rem, calc(100vw - 1rem)); padding: .85rem 2.5rem .95rem 1rem; color: var(--ink); background: var(--sheet); border: 1px solid var(--hair); border-radius: var(--r-lg); box-shadow: 0 16px 44px rgb(11 29 34 / .26); font: 400 .9375rem/1.45 var(--body); text-align: left; }
#stez-min-card[hidden] { display: none; }
#stez-min-card .stez-min-card-name { margin: 0 0 .25rem; color: var(--wine); font: 700 .9375rem/1.3 var(--body); }
#stez-min-card .stez-min-card-what { margin: 0; color: inherit; font: inherit; }
#stez-min-card .stez-min-card-x { position: absolute; top: .3rem; right: .3rem; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin: 0; padding: 0; color: var(--ink); background: none; border: 0; border-radius: 50%; box-shadow: none; font: 400 1.35rem/1 var(--body); cursor: pointer; }
#stez-min-card .stez-min-card-x:hover { background: rgb(23 60 69 / .1); }
#stez-min-card .stez-min-card-x:focus-visible { outline: 2px solid var(--wine); outline-offset: 1px; }
@media (prefers-reduced-motion: no-preference) { #stez-min-card:not([hidden]) { animation: stez-card-in .14s ease-out; } @keyframes stez-card-in { from { opacity: 0; } } }

/* Serve directory links and Music video cards. These pages aren't mirrored pages, so this sits outside the stage-page scope. */
#background#background #core#core {
  /* Serve directory: jump links and the row someone was linked to */
  & .min-jump { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
  & .min-jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem; border: 1px solid rgba(23, 60, 69, .2); border-radius: 999px; background: #fff; color: var(--ink) !important; text-decoration: none !important; font-weight: 600; }
  & .min-link { color: inherit !important; text-decoration: none !important; }
  & .min-link:hover { text-decoration: underline !important; }
  & .min-list > li:target { background: rgba(184, 145, 58, .14); box-shadow: 0 0 0 .5rem rgba(184, 145, 58, .14); border-radius: .25rem; }

  /* Music page: video cards */
  & .music-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: 1.1rem; margin: 1.25rem 0; padding: 0; list-style: none; }
  & .music-videos li { margin: 0; padding: 0; }
  & .music-videos li::before { content: none; }
  & .music-videos a { display: block; color: var(--ink) !important; text-decoration: none !important; font-weight: 600; line-height: 1.3; }
  & .music-videos a:hover span { text-decoration: underline; }
  & .music-videos img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: .45rem; border-radius: .6rem; background: #173c45; }
  & .music-all { margin: 1rem 0; }
  & details.music-all > summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: .6rem 1rem; border: 1px solid rgba(23, 60, 69, .18); border-radius: .75rem; background: #fff; font-weight: 600; cursor: pointer; }
  & details.music-all > summary::-webkit-details-marker { display: none; }
  & details.music-all > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: -4px 4px 0 12px; }
  & details.music-all[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }

  /* The playlist and the video finder on the Music page */
  & .stage-playlist iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 16px; }
  & .parish-video-find { max-width: 34rem; margin: 0 0 1rem; }
  & .parish-video-find label { display: block; margin-bottom: .3rem; font: 700 .9375rem var(--body); color: var(--ink); }
  & .parish-video-find input { box-sizing: border-box; width: 100%; min-height: 44px; padding: .55rem .9rem; border: 1px solid #7d7464; border-radius: 999px; background: #fff; font: 500 1rem var(--body); }
  & .parish-video-find p { margin: .3rem 0 0 !important; font-size: .875rem !important; color: var(--muted) !important; }

  /* With the script on, the filter buttons do this job. Without it, these links are the way around. */
  & .tools:not([hidden]) ~ .min-jump { display: none; }
}

/* Sacramental emergency dialog */
.stez-emergency-dialog { box-sizing: border-box; width: min(520px, 94vw); max-height: 92vh; padding: 26px; border: 0; border-top: 3px solid var(--gold, #b8913a); border-radius: 16px; background: var(--sheet, #f6f3ed); color: var(--ink, #173c45); font: 400 1rem/1.6 var(--body, Arial, sans-serif); box-shadow: 0 20px 80px #0005; }
.stez-emergency-dialog::backdrop { background: rgb(11 29 34 / .7); }
.stez-emergency-dialog h2 { margin: 0 0 1rem; padding-right: 40px; font: 400 1.75rem/1.2 var(--display, serif); color: inherit; }
.stez-emergency-dialog p { margin: 0 0 1rem; }
.stez-emergency-dialog label { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; }
.stez-emergency-dialog input { flex: none; width: 22px; height: 22px; margin: .1rem 0 0; }
.stez-emergency-dialog a, .stez-emergency-dialog button { display: inline-flex; align-items: center; box-sizing: border-box; min-height: 44px; margin: 0 .5rem .5rem 0; padding: .55rem 1.1rem; border: 1px solid var(--ink, #173c45); border-radius: 999px; font: 700 1rem/1.3 var(--body, Arial, sans-serif); }
.stez-emergency-dialog a { background: var(--wine, #8a1f33); border-color: var(--wine, #8a1f33); color: #fff !important; text-decoration: none !important; }
.stez-emergency-dialog button { background: transparent; color: var(--ink, #173c45); cursor: pointer; }
.stez-emergency-dialog button:disabled { opacity: .5; cursor: default; }
.stez-emergency-dialog [data-emergency-top-close] { position: absolute; top: 10px; right: 10px; justify-content: center; width: 44px; margin: 0; padding: 0; border: 0; font-size: 1.8rem; font-weight: 400; }
.stez-emergency-dialog [hidden] { display: none !important; }
.stez-emergency-dialog :focus-visible { outline: 3px solid var(--gold, #b8913a); outline-offset: 3px; }