/* ==========================================================================
   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.

   Quiet editorial palette: warm paper, softened ink, spruce, oxblood and walnut.
   Older parish colors were #173c45 #205468 #b8913a #f6f3ed #34444a.
   Fonts: EB Garamond for headings (the parish's own), Source Sans 3 for reading.
   ========================================================================== */
:root {
  --night: #14231f;
  --cloak: #1e352f;
  --teal: #1e352f;
  --teal-soft: #3f6157;
  --gold: #8c6d46;
  --gold-lit: #d9c3a0;
  --paper: #f9f8f5;
  --sheet: #ffffff;
  --mist: #f0ece4;
  --ink: #1c1d1f;
  --text: #1c1d1f;
  --muted: #4a4d52;
  --wine: #6d2323;
  --rose: #e6c9c2;
  --on-dark: #f9f8f5;
  --on-dark-2: #cfd3cd;
  --hair: rgb(28 29 31 / .08);
  --hair-dark: rgb(249 248 245 / .18);
  --season: #2f7a4c;
  --display: "EB Garamond", Georgia, "Times New Roman", serif;
  --body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", 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: 400 1.0625rem/1.6 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(20 35 31 / .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(20 35 31 / .16), 0 0 0 1px rgb(28 29 31 / .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(28 29 31 / .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 1.0625rem/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(28 29 31 / .08) !important; }
#background#background #header #nav#nav > ul > li.selected > a { color: var(--wine) !important; box-shadow: inset 0 0 0 1px rgb(109 35 35 / .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(20 35 31 / .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: flex !important; align-items: center; gap: .25rem; }
#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; }
/* Any quick link before the last is a quiet text link; the last one (Mass Times) stays the pill. By position, because eCatholic assigns its own ids. */
#background#background #header #quickLinks li:not(:last-child) a { background: none !important; color: var(--teal) !important; padding-inline: .6rem !important; }
#background#background #header #quickLinks li:not(:last-child) a:hover { background: none !important; color: var(--cloak) !important; text-decoration: underline !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(28 29 31 / .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(28 29 31 / .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: flex-end; }
  #background#background #header#header #headerText#headerText .moduleInner { padding: 0 !important; }
  #background#background #headerTextBody p:first-child { display: none !important; }
  /* No room beside the logo: "New here?" takes the empty left end of the top strip. */
  #background#background #header #quickLinks, #background#background #header #quickLinks .moduleInner, #background#background #header #quickLinks ul { display: contents !important; }
  #background#background #header #quickLinks li:last-child { grid-area: mass; justify-self: end; align-self: center; }
  #background#background #header #quickLinks li:not(:last-child) { grid-area: util; justify-self: start; align-self: start; position: relative; z-index: 151; height: 34px; display: flex !important; align-items: center; animation: util-tuck linear both; animation-timeline: scroll(root); animation-range: 0 140px; }
  #background#background #header #quickLinks li:not(:last-child) a { padding: 0 !important; min-height: 24px; display: inline-flex !important; align-items: center; font-size: .75rem !important; }
}
@media (max-width: 353px) {
  /* Smallest phones: the emergency line needs the whole strip. Visit stays in the menu. */
  #background#background #header #quickLinks li:not(:last-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(20 35 31 / .25);
  font: 500 1rem/1.5 var(--body);
}
body.mobilePanelActive #mobilePanel#mobilePanel { translate: 0 0; visibility: visible; }
#mobilePanel .panelClose { position: sticky; top: 0; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; margin: 0 0 .5rem auto; padding: 0; border: 0; border-radius: 50%; background: #e8e6e1; color: var(--ink); cursor: pointer; }
#mobileScrim { position: fixed; inset: 0; z-index: 1900; background: rgb(20 35 31 / .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(28 29 31 / .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: 400 1.0625rem/1.6 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: -.015em; text-transform: none; background: none; border: 0; padding: 0; }
  h1, .hero-title { font-size: clamp(3rem, 7vw, 6.75rem) !important; line-height: 1.15 !important; letter-spacing: -.015em; display: block; }
  h2:not(.hero-title):not(.moduleName) { font-size: clamp(2.1rem, 4vw, 3.6rem) !important; line-height: 1.15 !important; }
  h3 { font-size: clamp(1.55rem, 2.2vw, 1.95rem) !important; line-height: 1.15 !important; }
  :is(cite, blockquote) { font-style: italic; font-size: .95em; }
  :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(--cloak) !important; font-weight: 500 !important; text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 4px; 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); } }
  /* Home page: when the columns stack, Mass Times comes before the events. */
  @media (max-width: 1149px) { .anchor#coming-up + .sectionInner > .sectionBody > .content2 { order: -1; } }
  /* Home page: the cards beside "What brings you" keep their own height, also when an item is opened. */
  @media (min-width: 1150px) {
    .anchor#carrying + .sectionInner > .sectionBody > .content2 { align-self: start !important; }
    .anchor#carrying + .sectionInner > .sectionBody > .content2 > li { flex: 0 0 auto; }
  }

  /* 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); }
    /* One hero size for the whole site, set by the home hero. */
    .hero { min-height: clamp(37.5rem, 46vw, 40rem); }
    .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(20 35 31 / .78) 0%, rgb(20 35 31 / .74) 46%, rgb(20 35 31 / 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; }
  }
  /* Every hero takes its size from the home hero: same photo shape on a phone, same height, padding and headline on a computer. */
  @media (max-width: 999px) { .hero .hero-in { padding-block: 1.5rem; } }
  @media (max-width: 599px) { .hero > img { aspect-ratio: 16 / 9; } }
  @media (min-width: 1000px) {
    .hero .hero-in { padding-block: clamp(2rem, 5.5vh, 3.25rem); }
    .hero :is(h1, .hero-title) { font-size: clamp(3rem, min(5.4vw, 10vh), 5rem) !important; }
    .hero .hero-in .lede { margin-top: .85rem !important; }
    /* The shorter shape would cut off the crucifixes and heads near the top of these photos. */
    .hero > img:is([src*="16-faith"], [src*="17-friends"], [src*="23-moms"], [src*="25-sensory-mass"], [src*="03-sacraments"]) { object-position: right top; }
    .hero > img:is([src*="22-worship"], [src*="12-people"]) { object-position: right 20%; }
    .hero > img:is([src*="21-cornerstone"], [src*="02-visit"]) { object-position: right 28%; }
  }
  /* Home hero only: on a phone, the headline comes first. On a computer, the words sit at the top and the search at the bottom. */
  @media (max-width: 599px) {
    .hero-home .hero-in { display: flex; flex-direction: column; }
    .hero-home .hero-in > * { order: 5; }
    .hero-home .hero-in > :is(.eyebrow, h1) { order: 1; }
    .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; }
  }
  @media (min-width: 1000px) {
    .hero-home .hero-in { align-self: stretch; display: flex; flex-direction: column; }
    .hero-home .eyebrow { margin-bottom: .7rem !important; }
    .hero-home .hero-search { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; margin-top: 0 !important; }
    .hero-home .hero-in > .quick-chips { max-width: none; flex-wrap: nowrap; }
    .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 { text-wrap: balance; font-weight: 600 !important; font-size: 1.0625rem !important; letter-spacing: normal; text-transform: none; 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: 400 !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: italic 400 .95rem/1.5 var(--body) !important; margin-top: .5rem; color: var(--muted); }
  :is(.hero, .scene, .tone-dark, .band.dark) .quote cite { color: var(--on-dark-2); }

  .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: #571b1b !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(28 29 31 / .07) !important; }
  :is(.hero, .scene, .tone-dark, .band.dark) a.btn.htmlButton { background: var(--gold-lit) !important; color: var(--ink) !important; }
  :is(.hero, .scene, .tone-dark, .band.dark) a.btn.htmlButton:hover { background: #e6d5b8 !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(249 248 245 / .7) !important; }
  :is(.hero, .scene, .tone-dark, .band.dark) a.btn.htmlButton.line:hover { background: rgb(249 248 245 / .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(249 248 245 / .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: 34px; padding: .25rem .9rem; border: 1px solid rgb(0 0 0 / .08); border-radius: 2px; background: rgb(255 255 255 / .85) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-weight: 500 !important; font-size: .9375rem !important; line-height: 1.3; text-decoration: none !important; color: var(--ink) !important; transition: background-color .2s ease, border-color .2s ease, transform .2s ease; }
  .hero .hero-in .quick-chips a:hover { background: #fff !important; border-color: rgb(0 0 0 / .2); transform: translateY(-1px); }
  @media (prefers-reduced-motion: reduce) { .hero .hero-in .quick-chips a { transition: none; } .hero .hero-in .quick-chips a:hover { transform: none; } }
  .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(249 248 245 / .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; }
  .massTimesModule .next-mass { margin: 0 0 1rem !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: .15rem; font: 600 1rem/1.35 var(--body); color: var(--ink); }
  .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); }
  /* Two columns once the list has room, so it sits level with the cards beside it. */
  @container module (min-width: 48rem) {
    .carry { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
    .carry summary { padding-block: .75rem !important; font-size: 1.35rem !important; line-height: 1.15 !important; }
    .carry details:not([open]) summary { height: 100%; box-sizing: border-box; }
  }
  .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: 600; font-size: .9375rem; letter-spacing: normal; text-transform: none; color: var(--muted); line-height: 1.5; }
  .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-photo { display: block; width: 100%; max-width: 36rem; height: auto; border-radius: var(--r-lg); margin: 0 0 1.25rem; }
  .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; list-style: none; font-size: .875rem; font-weight: 600; letter-spacing: .04em; padding: .75rem 0 !important; color: var(--cloak); }
  details.more summary::-webkit-details-marker { display: none; }
  details.more summary::after { content: " +"; font-weight: 400; }
  details.more[open] summary::after { content: " - "; }
  :is(.tone-dark, .band.dark) details.more summary { color: var(--on-dark); }
  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(20 35 31 / .3) !important; opacity: 1 !important; }
/* Phones and tablets: a slim tab in the page margin, clear of the text, as on the live site. It slides away while reading down. */
@media (max-width: 999px) {
  #stez-a11y-fab#stez-a11y-fab { left: 0 !important; bottom: calc(14px + env(safe-area-inset-bottom)) !important; width: 28px !important; height: 44px !important; border-radius: 0 12px 12px 0 !important; box-shadow: 0 3px 10px rgb(20 35 31 / .25) !important; transition: translate .2s ease; }
  #stez-a11y-fab#stez-a11y-fab svg { width: 18px; height: 18px; }
  #stez-a11y-fab#stez-a11y-fab.is-tucked:not(:focus-visible) { translate: -100% 0; box-shadow: none !important; }
}
@media (max-width: 999px) and (prefers-reduced-motion: reduce) { #stez-a11y-fab#stez-a11y-fab { transition: none; } }
#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(20 35 31 / .35); }
#a11y-panel::backdrop { background: rgb(20 35 31 / .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(28 29 31 / .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: #14231f; --on-dark-2: #f6f3ed; --hair: rgb(28 29 31 / .45); }
.a11y-links #core a, .a11y-links #footer a { text-decoration-thickness: 2px !important; }
.a11y-readable { --display: "Source Sans 3", 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; }
}

/* Group labels in the phone menu */
#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(20 35 31 / .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(28 29 31 / .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(28, 29, 31, .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(28, 29, 31, .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(20 35 31 / .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; }

/* No arrow on the Mass Times button (the platform theme draws one) */
#background#background #header #quickLinks a::before, #background#background #header #quickLinks a::after { content: none !important; display: none !important; }

/* ==========================================================================
   Review tweaks, 2026-11-06. CSS only, no change to the theme.
   ========================================================================== */
/* Nested so these outrank the base rules, which sit inside the same selector. */
#background#background #core#core {
  /* Scripture is the point of the hero: it should be readable on a phone. */
  .hero-home .hero-in .hero-verse { font-size: 1.125rem !important; line-height: 1.45 !important; }
  .hero-home .hero-in .hero-verse cite { font-size: 1rem !important; }
  /* Keep the whole crucifix in frame on this photo. */
  @media (min-width: 1000px) { :is(.hero, .scene) > img[src*="14-sensory"] { object-position: right 15% !important; } }
  /* The receipt note sets up the best story on the page. */
  .receipt-note { font-size: 1rem !important; }
  /* More of Saint Elizabeth: she carries the story. */
  .niche > img { width: min(100%, 18rem); }
  @container module (min-width: 34rem) { .niche { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); } }
  /* A scene can put its words on the right, so they do not cover the people doing the work. */
  @media (min-width: 1000px) {
    .scene.scene-right { justify-content: flex-end; }
    .scene.scene-right .scene-in { margin-left: auto !important; margin-right: 0 !important; max-width: 44% !important; width: 44% !important; }
    .scene.scene-right::after { background: linear-gradient(270deg, rgb(20 35 31 / .82) 0%, rgb(20 35 31 / .62) 38%, rgb(20 35 31 / 0) 62%) !important; }
  }

  /* ==========================================================================
     Review tweaks, round 2, 2026-11-06. No change to the theme.
     ========================================================================== */
  /* Home: Today and Tomorrow sit in the first column, so Mass Times comes first when stacked. No card around the cards. */
  .moduleInner.days-module { padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
  /* The platform shifts list rows to the right in text modules; these rows stay inside their card. */
  .parish-days .days-list li { left: 0 !important; }
  /* On a computer they still run the full width above the events, as before. */
  @media (min-width: 1150px) {
    .anchor#coming-up + .sectionInner > .sectionBody > .content1 { display: contents; }
    .anchor#coming-up + .sectionInner > .sectionBody > .content1 > li:first-child { grid-column: 1 / -1; grid-row: 1; }
    .anchor#coming-up + .sectionInner > .sectionBody > .content1 > li:last-child { grid-column: 1; grid-row: 2; }
    .anchor#coming-up + .sectionInner > .sectionBody > .content2 { grid-column: 2; grid-row: 2; }
  }
  /* Home: Elizabeth has the whole card, so her words keep a comfortable line length. */
  .band.dark > .wrap > .niche > div, #elizabeth .niche > div { max-width: 42rem; }
  /* Home: the $1,175 is the one moment on the page that is not a card. Its background runs edge to edge. */
  .band.receipt-band { background: var(--mist) !important; border: 0 !important; border-radius: 0 !important; box-shadow: 0 0 0 100vmax var(--mist); clip-path: inset(0 -100vmax); padding-block: clamp(2.5rem, 7vw, 6rem) !important; padding-inline: var(--pad) !important; }
  .receipt-band .receipt { display: grid; gap: 1.5rem clamp(2rem, 6vw, 6rem); }
  .receipt-band .sum { font-size: clamp(5rem, 15vw, 13rem) !important; margin-bottom: .14em !important; }
  .receipt-band .receipt-note { margin-bottom: 1.25rem !important; }
  .receipt-band .receipt-body p + p { margin-top: 1rem !important; }
  @container module (min-width: 56rem) {
    .receipt-band .receipt { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; }
  }
  /* Name plates: in a list, a ministry's name reads as a name. Sections with one or two items get the full size. */
  .ladder .item h3 { font: 400 1.35rem/1.2 var(--display) !important; margin-bottom: .35rem !important; }
  .ladder .item:first-child:nth-last-child(-n+2) h3, .ladder .item:nth-child(2):last-child h3 { font-size: clamp(1.6rem, 2.4vw, 2rem) !important; margin-bottom: .6rem !important; }
  .ladder .item:first-child:nth-last-child(-n+2) h3::before, .ladder .item:nth-child(2):last-child h3::before { content: ""; display: block; width: 2.5rem; height: 2px; margin-bottom: .7rem; background: var(--gold); }
  /* Arriving from a button: the name you asked for glows briefly. */
  @media (prefers-reduced-motion: no-preference) {
    .ladder > section:target .item h3 { animation: name-plate-glow 2.2s ease-out; border-radius: 4px; }
  }
  /* Visit: the Pray with us heading stands on the page, introducing the cards below it. */
  .band.band-intro { background: none !important; border: 0 !important; padding: clamp(1rem, 3vw, 2rem) var(--pad) 0 !important; }
  .band.band-intro .section-intro { margin-bottom: 0 !important; }
  /* Tablets: a shorter banner photo, so the headline is on the first screen. */
  @media (min-width: 600px) and (max-width: 999px) { .hero > img { aspect-ratio: 21 / 9 !important; } }
  /* Our Story: 2027 is marked in the color of Elizabeth's dress. */
  .beats .beat-125 .yr { color: var(--wine); }
}
/* Footer: the anniversary, quietly, under the motto. */
#background#background #stez-footer-info .foot-anniv { grid-column: 1 / -1; color: var(--gold-lit) !important; font-weight: 600 !important; margin-top: -.5rem !important; }
@keyframes name-plate-glow { 0%, 35% { background: rgb(217 195 160 / .6); } 100% { background: transparent; } }