/* Codex revision: requested dropdown descriptor readability fix only. */
.nav-drop a em {
  font-family: 'Jost', sans-serif !important;
  font-style: italic !important;
  font-size: 12.5px !important;
  letter-spacing: 0.03em !important;
}
@media (max-width: 1100px) { .nav-drop a em { font-size: 12px !important; } }
@media (max-width: 900px) { .nav-drop a em { font-size: 11.5px !important; } }

/* Codex revision: requested homepage header gradient only. */
body:has(#home) #mainNav {
  background: rgba(250,248,244,0.94) !important;
}

/* Compact horizontal nav band: keep section names visible down to 901px. */
@media (min-width: 901px) and (max-width: 1240px) {
  nav#mainNav { padding: 18px 24px !important; gap: 20px !important; }
  nav#mainNav.scrolled { padding: 12px 24px !important; }
  nav#mainNav .nav-mark { font-size: 18.75px; }
  nav#mainNav .nav-links { gap: 20px; }
  nav#mainNav .nav-links a { font-size: 10.5px; letter-spacing: 0.12em; }
}

/* Codex revision: responsive nav alignment and tablet/mobile drawer breakpoint. */
@media (max-width: 900px) {
  nav#mainNav {
    align-items: center !important;
    gap: 16px !important;
    padding: 18px clamp(20px, 4vw, 52px) !important;
  }
  nav#mainNav.scrolled {
    padding: 12px clamp(20px, 4vw, 52px) !important;
  }
  nav#mainNav .nav-mark {
    max-width: calc(100vw - 104px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  nav#mainNav .nav-toggle {
    display: flex !important;
    margin-left: auto !important;
  }
  nav#mainNav .nav-links {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: min(360px, 86vw) !important;
    background: rgba(46,37,59,0.985) !important;
    backdrop-filter: blur(16px) !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 88px 28px 32px !important;
    transform: translateX(100%) !important;
    transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1) !important;
    z-index: 99 !important;
    box-shadow: -12px 0 36px rgba(0,0,0,0.22) !important;
    overflow-y: auto !important;
  }
  nav#mainNav.nav-open .nav-links {
    transform: translateX(0) !important;
  }
  nav#mainNav .nav-links > li {
    width: 100% !important;
    border-bottom: 1px solid rgba(232,201,122,0.10) !important;
  }
  nav#mainNav .nav-links > li:last-child {
    border-bottom: 0 !important;
  }
  nav#mainNav .nav-links > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 48px !important;
    padding: 14px 0 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.14em !important;
    color: rgba(255,255,255,0.94) !important;
    text-align: left !important;
    text-shadow: none !important;
  }
  nav#mainNav .nav-links > li > a::before {
    display: none !important;
  }
  nav#mainNav .nav-links > li.has-drop > a::after {
    content: '▾' !important;
    display: inline-block !important;
    margin-left: 12px !important;
    font-size: 0.78em !important;
    line-height: 1 !important;
    opacity: 0.58 !important;
  }
  nav#mainNav .nav-drop,
  nav#mainNav .nav-drop.nav-drop--right {
    display: block !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 0 10px 14px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
  nav#mainNav .nav-drop a {
    display: block !important;
    padding: 8px 0 !important;
    font-size: 10.5px !important;
    letter-spacing: 0.12em !important;
    color: rgba(255,255,255,0.74) !important;
    background: transparent !important;
    white-space: normal !important;
  }
  nav#mainNav .nav-drop a em {
    color: rgba(255,255,255,0.52) !important;
  }
  nav#mainNav .nav-links > li:last-child > a {
    justify-content: center !important;
    margin-top: 12px !important;
    padding: 12px 16px !important;
    border: 1px solid rgba(232,201,122,0.45) !important;
    color: var(--gold-light) !important;
  }
  nav#mainNav.nav-open::before {
    content: '' !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.42) !important;
    backdrop-filter: blur(2px) !important;
    z-index: 98 !important;
  }
  nav#mainNav.nav-open .nav-toggle-bar:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg) !important;
  }
  nav#mainNav.nav-open .nav-toggle-bar:nth-child(2) {
    opacity: 0 !important;
  }
  nav#mainNav.nav-open .nav-toggle-bar:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg) !important;
  }
  body.nav-locked {
    overflow: hidden !important;
  }
}

/* Codex revision: approved homepage search placement. */
#home .hero-search-system {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 1480px !important;
  margin: clamp(22px, 3vw, 34px) auto 0 !important;
  padding: 0 4% !important;
  opacity: 1 !important;
  animation: none !important;
  position: relative !important;
  z-index: 6 !important;
}
#home .hero-prompt-chips {
  display: none !important;
}
#home .hero-search-bar {
  width: 100% !important;
}
#home #heroSearchInput {
  position: relative !important;
  z-index: 1 !important;
}
#home #heroSearchInput::placeholder {
  color: rgba(255,255,255,0.48) !important;
}
#home #heroPlaceholder {
  display: none !important;
}
#home #heroInlineResults {
  width: 100% !important;
}
/* Codex revision: keep the seasonal hero title on one line. */
#home .ht-day[data-hero-title="season-after-pentecost"] {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 0.18em !important;
  width: max-content !important;
  max-width: calc(100vw - 16vw) !important;
  white-space: nowrap !important;
  font-size: clamp(28px, 9vw, 70px) !important;
}
#home .ht-day[data-hero-title="season-after-pentecost"] em {
  display: inline-block !important;
  white-space: nowrap !important;
}
@media (min-width: 900px) {
  #home {
    align-items: flex-start !important;
  }
  #home .hero-content {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px) !important;
    grid-template-rows: auto auto !important;
    column-gap: clamp(40px, 6vw, 86px) !important;
    align-items: end !important;
    width: min(1180px, 100%) !important;
    max-width: 1180px !important;
    margin: 0 !important;
  }
  #home .hero-temporal {
    display: contents !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #home .ht-left {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    max-width: 760px !important;
  }
  #home .ht-right {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: end !important;
    width: 100% !important;
    padding-left: clamp(24px, 3vw, 38px) !important;
    transform: translateY(65px) !important;
  }
  #home .ht-actions {
    gap: 5px !important;
  }
  #home .hero-search-system {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: end !important;
    width: 100% !important;
    max-width: none !important;
    margin: 14px 0 0 !important;
    padding-left: clamp(24px, 3vw, 38px) !important;
    padding-right: 0 !important;
    transform: translateY(18px) !important;
  }
}

/* Cramped-desktop fix (900-1279px): the one-line seasonal headline is fixed-width
   and was overflowing its 1fr column, sliding under the right-hand action bars.
   Give the two columns room by trimming side padding, gap, and the bar-column
   width so the bars sit clear of the headline. >=1280px already fits, untouched. */
@media (min-width: 900px) and (max-width: 1279px) {
  #home {
    padding-left: 4% !important;
    padding-right: 4% !important;
  }
  #home .hero-content {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px) !important;
    column-gap: clamp(24px, 2.6vw, 44px) !important;
  }
  #home .ht-day[data-hero-title="season-after-pentecost"] {
    font-size: clamp(30px, 5.4vw, 70px) !important;
  }
}

/* Codex revision: requested desktop grid normalization and mobile responsiveness. */
#worship-resources .resources-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  max-width: 1200px !important;
}
#programs .programs-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
#worship-resources.resources-section {
  padding-bottom: clamp(16px, 1.25vw, 18px) !important;
}
#office.office-section {
  padding-top: clamp(16px, 1.25vw, 18px) !important;
}
#programs a.program-card,
#programs a.program-card:visited,
#programs a.program-card:hover,
#programs a.program-card:focus {
  color: inherit !important;
  text-decoration: none !important;
}
#programs .program-card *,
#programs .program-card *:hover,
#programs .program-card *:focus {
  text-decoration: none !important;
}
#programs a.program-card .program-card-tag {
  color: var(--gold-text) !important;
}
#programs a.program-card h3 {
  color: var(--charcoal) !important;
}
#programs a.program-card p {
  color: var(--text-light) !important;
}
#programs .program-card p a,
#programs .program-card p a:visited {
  color: var(--gold-text) !important;
  text-decoration: none !important;
}
#programs .program-card p a:hover,
#programs .program-card p a:focus {
  color: var(--warm-brown) !important;
  text-decoration: none !important;
}
#worship-resources .lectionary-widget {
  position: relative !important;
}
#worship-resources .lectionary-widget::before {
  content: "" !important;
  position: absolute !important;
  top: -18px !important;
  left: 50% !important;
  width: min(84vw, 1320px) !important;
  height: 1px !important;
  transform: translateX(-50%) !important;
  background: rgba(92,61,46,0.14) !important;
}
#office.office-section {
  position: relative !important;
}
#office.office-section::after {
  content: "" !important;
  position: absolute !important;
  left: 8% !important;
  right: 8% !important;
  bottom: 48px !important;
  height: 1px !important;
  background: rgba(92,61,46,0.14) !important;
}
.video-progress-bar {
  display: none !important;
}
@media (max-width: 960px) {
  #worship-resources .resources-grid,
  #programs .programs-grid,
  #services .services-grid,
  #services .services-grid--hierarchy {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px) {
  html,
  body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  img,
  video,
  iframe {
    max-width: 100% !important;
  }
  #worship-resources.resources-section {
    padding-bottom: 20px !important;
  }
  #office.office-section {
    padding-top: 20px !important;
  }
  #worship-resources .lectionary-widget::before {
    top: -20px !important;
    width: calc(100vw - 48px) !important;
  }
  #office.office-section::after {
    left: 24px !important;
    right: 24px !important;
    bottom: 28px !important;
  }
  #worship-resources .resources-grid,
  #programs .programs-grid,
  #visit .visit-secondary-grid,
  #visit .visit-primary,
  #services .services-grid,
  #services .services-grid--hierarchy,
  #programs .programs-header,
  #faith .about-grid,
  .beliefs-grid,
  .lifeevents-grid,
  .give-methods-grid,
  .records-grid,
  .connect-aux-grid {
    grid-template-columns: 1fr !important;
  }
  #programs .programs-header {
    display: grid !important;
    gap: 18px !important;
  }
  #worship-resources .resource-card,
  #visit .visit-card,
  #visit .visit-primary,
  #office .office-wrap {
    padding-left: clamp(24px, 7vw, 32px) !important;
    padding-right: clamp(24px, 7vw, 32px) !important;
  }
  #office .office-wrap {
    padding-top: 48px !important;
  }
  #services .service-card--primary {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 22px !important;
  }
  #services .service-card--primary .primary-card-cta {
    align-self: flex-start !important;
  }
  #office .office-folio {
    position: static !important;
    display: block !important;
    margin-bottom: 18px !important;
  }
  #home .hero-temporal {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding-left: 6% !important;
    padding-right: 6% !important;
  }
  #home .ht-actions a,
  #home .hero-search-bar {
    width: 100% !important;
  }
  #home .hero-search-bar {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
  #home .hero-search-bar button {
    width: 100% !important;
    min-height: 52px !important;
  }
}

/* Codex revision: requested spacing above Visit service/details band only. */
#visit .visit-secondary-grid + .visit-primary {
  margin-top: clamp(34px, 4vw, 56px) !important;
}
@media (max-width: 760px) {
  #visit .visit-secondary-grid + .visit-primary {
    margin-top: 28px !important;
  }
}

/* Codex revision: requested hero readability gradients only. */
#home .hero-overlay {
  z-index: 1 !important;
  background:
    radial-gradient(ellipse 58% 62% at 24% 54%, rgba(0,0,0,0.46) 0%, rgba(0,0,0,0.28) 46%, rgba(0,0,0,0) 76%),
    linear-gradient(to top, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0) 24%) !important;
}
#home::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 90% 12%, rgba(255,244,218,0.12) 0%, rgba(255,244,218,0.05) 30%, rgba(255,244,218,0) 54%),
    radial-gradient(ellipse at 18% 58%, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.04) 34%, rgba(0,0,0,0) 58%),
    radial-gradient(ellipse at 58% 54%, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.02) 30%, rgba(0,0,0,0) 54%);
}
#home .hero-content,
#home .hero-credit {
  position: relative;
}
#home .hero-content {
  z-index: 2 !important;
  transform: translateY(50px);
}
#home .hero-credit {
  z-index: 3 !important;
}
#home .hero-scroll-hint {
  position: absolute !important;
  left: 50% !important;
  bottom: clamp(22px, 3vw, 36px) !important;
  z-index: 4 !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  opacity: 1 !important;
  animation: heroArrowFloat 1.8s ease-in-out infinite !important;
}
#home .hero-scroll-hint .scroll-line {
  width: 18px !important;
  height: 18px !important;
  background: transparent !important;
  border-right: 2px solid rgba(255,255,255,0.94) !important;
  border-bottom: 2px solid rgba(255,255,255,0.94) !important;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.65) !important;
  transform: rotate(45deg) !important;
  animation: none !important;
}
@keyframes heroArrowFloat {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 8px); }
}
#home .ht-date,
#home .ht-day,
#home .ht-collect,
#home .ht-right-label,
#home .ht-next-name,
#home .ht-next-time {
  text-shadow: 0 2px 18px rgba(0,0,0,0.74), 0 1px 2px rgba(0,0,0,0.80);
}
#home .ht-day em {
  text-shadow: 0 2px 22px rgba(0,0,0,0.88), 0 1px 2px rgba(0,0,0,0.92);
}
#home .ht-collect cite {
  color: #fff !important;
}
#home .ht-right-label,
#home .ht-next-name,
#home .ht-next-time {
  display: none !important;
}
#home .ht-right {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
#home .ht-actions a,
#home .hero-search-bar,
#home .hir-card {
  box-shadow: 0 18px 44px rgba(0,0,0,0.30);
}

/* Codex revision: requested vellum scrolled nav with high-contrast links. */
html[data-season] body:has(#home) nav#mainNav.scrolled,
html[data-season] nav#mainNav.scrolled {
  background:
    linear-gradient(180deg, rgba(255,253,247,0.99) 0%, rgba(247,242,232,0.97) 100%) !important;
  border-bottom: 1px solid rgba(72,52,35,0.22) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12) !important;
  backdrop-filter: blur(14px) !important;
}
html[data-season] body:has(#home) nav#mainNav.scrolled .nav-mark,
html[data-season] nav#mainNav.scrolled .nav-mark,
html[data-season] body:has(#home) nav#mainNav.scrolled .nav-links a,
html[data-season] nav#mainNav.scrolled .nav-links a {
  color: #241d18 !important;
  font-weight: 400 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
html[data-season] body:has(#home) nav#mainNav.scrolled .nav-mark em,
html[data-season] nav#mainNav.scrolled .nav-mark em {
  color: #4c3522 !important;
}
html[data-season] body:has(#home) nav#mainNav.scrolled .nav-links a:hover,
html[data-season] nav#mainNav.scrolled .nav-links a:hover,
html[data-season] body:has(#home) nav#mainNav.scrolled .nav-links > li.has-drop > a:hover::after,
html[data-season] nav#mainNav.scrolled .nav-links > li.has-drop > a:hover::after {
  color: #3a2719 !important;
}
html[data-season] body:has(#home) nav#mainNav.scrolled .nav-links > li > a::before,
html[data-season] nav#mainNav.scrolled .nav-links > li > a::before {
  background: #7a5428 !important;
  box-shadow: 0 0 5px rgba(122,84,40,0.32) !important;
}
html[data-season] body:has(#home) nav#mainNav.scrolled .nav-drop,
html[data-season] nav#mainNav.scrolled .nav-drop {
  border-color: rgba(72,52,35,0.18) !important;
}
html[data-season] body:has(#home) nav#mainNav.scrolled .nav-toggle-bar,
html[data-season] nav#mainNav.scrolled .nav-toggle-bar {
  background: #241d18 !important;
}

/* Codex revision: inactive About item remains visible but is not navigable. */
.nav-drop a[aria-disabled="true"] {
  cursor: default;
}

/* Codex revision: Time and Talent form uses existing prayer-card form language. */
.time-talent-form input[type="text"],
.time-talent-form input[type="email"],
.time-talent-form textarea {
  width: 100%;
  border: 1px solid rgba(37, 56, 46, 0.16);
  border-radius: 4px;
  padding: 12px 14px;
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  color: var(--deep-green);
  background: rgba(255,255,255,0.72);
}
.time-talent-form input[type="text"]:focus,
.time-talent-form input[type="email"]:focus,
.time-talent-form textarea:focus {
  outline: 1px solid var(--gold);
  border-color: var(--gold);
}
.time-talent-form .form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.time-talent-form .form-field {
  display: grid;
  gap: 6px;
}
.time-talent-form .form-field label,
.time-talent-form .prayer-options legend {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 760px) {
  .time-talent-form .form-row { grid-template-columns: 1fr; }
}

/* Codex revision: keep hero CTA and search vertical spacing uniform. */
#home .ht-actions {
  gap: 5px !important;
}
#home .hero-search-system {
  margin: 5px 0 0 !important;
  padding: 0 !important;
  transform: none !important;
}
#home .ht-right #heroSearchSystem {
  width: 100% !important;
  max-width: none !important;
}
@media (min-width: 900px) {
  #home.hero {
    min-height: 650px !important;
    height: 650px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    justify-content: center !important;
  }
  #home .hero-content {
    align-items: center !important;
  }
  #home .ht-right {
    align-self: end !important;
    grid-row: 1 / span 2 !important;
    border-left: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    transform: none !important;
  }
  #home .ht-right #heroInlineResults:not(.is-open) {
    margin-top: 0 !important;
  }
}

/* Headlines read in a single color site-wide; italic accents inherit. */
h1 em, h2 em, h3 em, h4 em { color: inherit !important; font-style: normal !important; }
#worship-resources .resource-card--wide {
  max-width: 1200px;
  margin: 0 auto 28px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}
@media (max-width: 760px) { #worship-resources .resource-card--wide { display: block; } }

/* Footer legibility: higher-contrast text for low-vision readers. */
.contact-footer { color: rgba(255,255,255,0.88); }
.footer-brand p, .footer-brand .diocese, .footer-contact-block p { color: rgba(255,255,255,0.82); }
.footer-contact-block p a { color: rgba(255,255,255,0.85); }
.footer-col ul li a { color: rgba(255,255,255,0.85); }
.footer-bottom, .footer-bottom span { color: rgba(255,255,255,0.72); }
.footer-bottom a { color: rgba(255,255,255,0.78); }
.social-link { color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.4); }

/* Seasonal hero imagery, keyed to the liturgical season computed on load. */
html[data-season="advent"] .hero-bg { background: linear-gradient(135deg, rgba(var(--liturgical-rgb, 90,115,85), 0.30) 0%, rgba(var(--liturgical-rgb, 90,115,85), 0.12) 55%, transparent 100%), url('/assets/hero/advent-glass-1920.jpg') center/cover no-repeat;
 background: linear-gradient(135deg, rgba(var(--liturgical-rgb, 90,115,85), 0.30) 0%, rgba(var(--liturgical-rgb, 90,115,85), 0.12) 55%, transparent 100%), image-set(url('/assets/hero/advent-glass-1920.avif') type('image/avif'), url('/assets/hero/advent-glass-1920.webp') type('image/webp'), url('/assets/hero/advent-glass-1920.jpg') type('image/jpeg')) center/cover no-repeat; }
html[data-season="christmas"] .hero-bg { background: linear-gradient(135deg, rgba(var(--liturgical-rgb, 90,115,85), 0.30) 0%, rgba(var(--liturgical-rgb, 90,115,85), 0.12) 55%, transparent 100%), url('/assets/hero/christmas-glass-1920.jpg') center/cover no-repeat;
 background: linear-gradient(135deg, rgba(var(--liturgical-rgb, 90,115,85), 0.30) 0%, rgba(var(--liturgical-rgb, 90,115,85), 0.12) 55%, transparent 100%), image-set(url('/assets/hero/christmas-glass-1920.avif') type('image/avif'), url('/assets/hero/christmas-glass-1920.webp') type('image/webp'), url('/assets/hero/christmas-glass-1920.jpg') type('image/jpeg')) center/cover no-repeat; }
html[data-season="after-epiphany"] .hero-bg { background: linear-gradient(135deg, rgba(var(--liturgical-rgb, 90,115,85), 0.30) 0%, rgba(var(--liturgical-rgb, 90,115,85), 0.12) 55%, transparent 100%), url('/assets/hero/epiphany-glass-1920.jpg') center/cover no-repeat;
 background: linear-gradient(135deg, rgba(var(--liturgical-rgb, 90,115,85), 0.30) 0%, rgba(var(--liturgical-rgb, 90,115,85), 0.12) 55%, transparent 100%), image-set(url('/assets/hero/epiphany-glass-1920.avif') type('image/avif'), url('/assets/hero/epiphany-glass-1920.webp') type('image/webp'), url('/assets/hero/epiphany-glass-1920.jpg') type('image/jpeg')) center/cover no-repeat; }
html[data-season="lent"] .hero-bg { background: linear-gradient(135deg, rgba(var(--liturgical-rgb, 90,115,85), 0.30) 0%, rgba(var(--liturgical-rgb, 90,115,85), 0.12) 55%, transparent 100%), url('/assets/hero/lent-glass-1920.jpg') center/cover no-repeat;
 background: linear-gradient(135deg, rgba(var(--liturgical-rgb, 90,115,85), 0.30) 0%, rgba(var(--liturgical-rgb, 90,115,85), 0.12) 55%, transparent 100%), image-set(url('/assets/hero/lent-glass-1920.avif') type('image/avif'), url('/assets/hero/lent-glass-1920.webp') type('image/webp'), url('/assets/hero/lent-glass-1920.jpg') type('image/jpeg')) center/cover no-repeat; }
html[data-season="holy-week"] .hero-bg { background: linear-gradient(135deg, rgba(var(--liturgical-rgb, 90,115,85), 0.30) 0%, rgba(var(--liturgical-rgb, 90,115,85), 0.12) 55%, transparent 100%), url('/assets/hero/holyweek-glass-1920.jpg') center/cover no-repeat;
 background: linear-gradient(135deg, rgba(var(--liturgical-rgb, 90,115,85), 0.30) 0%, rgba(var(--liturgical-rgb, 90,115,85), 0.12) 55%, transparent 100%), image-set(url('/assets/hero/holyweek-glass-1920.avif') type('image/avif'), url('/assets/hero/holyweek-glass-1920.webp') type('image/webp'), url('/assets/hero/holyweek-glass-1920.jpg') type('image/jpeg')) center/cover no-repeat; }
html[data-season="easter"] .hero-bg { background: linear-gradient(135deg, rgba(var(--liturgical-rgb, 90,115,85), 0.30) 0%, rgba(var(--liturgical-rgb, 90,115,85), 0.12) 55%, transparent 100%), url('/assets/hero/easter-glass-1920.jpg') center/cover no-repeat;
 background: linear-gradient(135deg, rgba(var(--liturgical-rgb, 90,115,85), 0.30) 0%, rgba(var(--liturgical-rgb, 90,115,85), 0.12) 55%, transparent 100%), image-set(url('/assets/hero/easter-glass-1920.avif') type('image/avif'), url('/assets/hero/easter-glass-1920.webp') type('image/webp'), url('/assets/hero/easter-glass-1920.jpg') type('image/jpeg')) center/cover no-repeat; }
html[data-season="pentecost"] .hero-bg,
html[data-season="trinity"] .hero-bg { background: linear-gradient(135deg, rgba(var(--liturgical-rgb, 90,115,85), 0.30) 0%, rgba(var(--liturgical-rgb, 90,115,85), 0.12) 55%, transparent 100%), url('/assets/hero/pentecost-glass-1920.jpg') center/cover no-repeat;
 background: linear-gradient(135deg, rgba(var(--liturgical-rgb, 90,115,85), 0.30) 0%, rgba(var(--liturgical-rgb, 90,115,85), 0.12) 55%, transparent 100%), image-set(url('/assets/hero/pentecost-glass-1920.avif') type('image/avif'), url('/assets/hero/pentecost-glass-1920.webp') type('image/webp'), url('/assets/hero/pentecost-glass-1920.jpg') type('image/jpeg')) center/cover no-repeat; }

/* E-news banner: full-width horizontal card, two cards below. */
#stay-connected .connect-aux-grid { grid-template-columns: 1fr 1fr; }
.connect-card--wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1.25fr 1fr; gap: 44px; align-items: center; }
@media (max-width: 960px) { .connect-card--wide { display: block; } }

/* Social buttons: match the site's button proportions, hairline, and gold hover. */
.social-links { gap: 12px; margin-top: 26px; }
.social-link {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(201,168,76,0.4);
  color: rgba(255,255,255,0.85);
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.social-link:hover {
  border-color: var(--gold);
  color: var(--gold-light);
  background: rgba(201,168,76,0.12);
}
.social-link svg { width: 18px; height: 18px; }

/* Liturgical color elements: seasonal ribbon and season chip. */
:root { --liturgical-color: #5a7355; }
.season-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.season-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--liturgical-color);
  box-shadow: inset 0 0 0 1px rgba(60,40,15,0.18);
}

/* Visit service times: day and time each on one clean line. */
.vt-time { white-space: nowrap; }
/* Worship band: day and time each on one clean line. */
.announcement__schedule .asch-time { white-space: nowrap; }
/* Scrolled state keeps the seasonal text tones (overrides vellum rules). */
html[data-season] body:has(#home) nav#mainNav.scrolled .nav-links a,
html[data-season] nav#mainNav.scrolled .nav-links a {
  color: var(--liturgical-nav, #3d5139) !important;
}
html[data-season] body:has(#home) nav#mainNav.scrolled .nav-mark em,
html[data-season] nav#mainNav.scrolled .nav-mark em {
  color: var(--liturgical-nav, #3d5139) !important;
}
/* Nav: translucent white bar with seasonal text tones. */
nav#mainNav {
  background: rgba(250,248,244,0.94) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(90,60,40,0.10);
  box-shadow: 0 2px 20px rgba(0,0,0,0.05);
}
nav#mainNav.scrolled { background: rgba(250,248,244,0.98) !important; }
nav#mainNav .nav-mark { color: var(--charcoal); text-shadow: none; }
nav#mainNav .nav-mark em { color: var(--liturgical-nav, #3d5139); }
nav#mainNav .nav-links a { color: var(--liturgical-nav, #3d5139); font-weight: 400; opacity: 1; text-shadow: none; }
nav#mainNav .nav-links > li > a::before { background: var(--liturgical-nav, #3d5139) !important; }
nav#mainNav .nav-toggle-bar { background: var(--charcoal); }
nav#mainNav .nav-toggle-label { color: var(--charcoal); }
nav#mainNav .nav-drop {
  background: rgba(250,248,244,0.98);
  border-color: rgba(90,60,40,0.14);
  box-shadow: 0 14px 36px rgba(60,40,15,0.14);
}
nav#mainNav .nav-drop a { color: var(--charcoal) !important; }
nav#mainNav .nav-drop a em { color: rgba(60,40,15,0.55); }
nav#mainNav .nav-drop a:hover { background: rgba(201,168,76,0.15); color: var(--warm-brown) !important; }
@media (min-width: 901px) {
  nav#mainNav .nav-links > li:last-child > a { color: var(--warm-brown) !important; }
}

/* Footer parament edge in the liturgical color. */
footer.contact-footer { border-top: 6px solid var(--liturgical-color, #5a7355); }


/* Header: one fixed height on every page, content vertically centered. */
nav#mainNav {
  height: 78px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
}
nav#mainNav.scrolled { height: 64px !important; }

/* Hero quick actions + search: unified type, solid legible bars. */
.ht-actions a {
  background: rgba(46,37,59,0.44) !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
  border: 1px solid rgba(255,255,255,0.32) !important;
  color: rgba(255,255,255,0.97) !important;
  font-family: 'EB Garamond', Garamond, serif !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
}
.ht-actions a:hover {
  background: rgba(46,37,59,0.62) !important;
  border-color: rgba(232,201,122,0.6) !important;
}
.ht-actions a span:last-child {
  color: rgba(232,201,122,0.95) !important;
  border-color: rgba(232,201,122,0.45) !important;
  background: rgba(0,0,0,0.28) !important;
  font-size: 10px !important;
}
/* 11px floor on phones for the hero action chips' tag span. */
@media (max-width: 1024px) {
  .ht-actions a span:last-child { font-size: 11px !important; }
}
.hero-search-bar input {
  background: rgba(46,37,59,0.44) !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
  border: 1px solid rgba(255,255,255,0.32) !important;
  color: rgba(255,255,255,0.97) !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 15px !important;
  letter-spacing: 0.05em !important;
}
.hero-search-bar input::placeholder { color: rgba(255,255,255,0.8) !important; }



/* Seasonal eyebrows on light surfaces; dark-surface labels keep gold. */
.section-label { color: var(--liturgical-ink, #4e6349); }
.hero .section-label,
.community-section .section-label,
.quote-banner .section-label,
.contact-footer .section-label,
.vestry-section .section-label { color: var(--gold-light, #e8c97a); }

/* Linen weave on the dark cloth panels: physical, not digital. */
.announcement, .quote-banner, .vestry-section, .community-right,
.visit-primary, .service-card--primary, .give-stewardship-strip, .contact-footer {
  background-image:
    repeating-linear-gradient(0deg, rgba(255,252,240,0.028) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,252,240,0.022) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(10,6,2,0.05) 0 1px, transparent 1px 7px);
}

/* Vellum ground: warm parchment in place of bright white surfaces. */
:root { --cream: #f4edde; --ivory: #f7f1e2; }
.service-card, .program-card, .clergy-card, .staff-card, .resource-card,
.record-card, .connect-card, .visit-card, .belief-card, .lifeevent-card,
.give-method, .office-wrap {
  background: #faf4e6;
}

/* Nav links: balance the underline clearance so text centers vertically. */
@media (min-width: 901px) {
  .nav-links > li > a { padding-top: 6px; }
}

/* Embroidered type on the cloth panels: a catch-light along the top of each
   letter and a stitch shadow beneath, as thread raised on linen. */
.announcement .asch-name, .announcement .asch-time, .announcement .asch-note,
.quote-banner blockquote, .quote-banner cite,
.vestry-section .section-title, .vestry-section h3,
.community-right h3, .community-right .section-label,
.community-section .section-title,
.visit-primary h3, .visit-primary .visit-times-label,
.service-card--primary h3,
.give-stewardship-strip h3, .give-stewardship-strip p,
.contact-footer .footer-brand h2, .contact-footer h4 {
  text-shadow:
    0 -1px 0 rgba(255,252,240,0.20),
    0 1px 0 rgba(12,6,0,0.55),
    0 2px 4px rgba(12,6,0,0.30);
}

/* Search button: same row height as the quick-action bars above. */
.hero-search-bar { align-items: stretch; }
.hero-search-bar input, #heroSearchInput {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}
#home .hero-search-bar button, .hero-search-bar button {
  padding: 14px 24px !important;
}

/* Vellum banding: alternating parchment depths so sections read as leaves,
   not one continuous white scroll. Deckle hairline between bands. */
.services-section { background: #f6efdf; }
.visit-section { background: #efe7d2; }
.resources-section { background: #f6efdf; }
.about-section { background: #efe7d2; }
.programs-section { background: #f6efdf; }
.video-section { background: #efe7d2; }
.lifeevents-section { background: #f6efdf; }
.connect-aux-section { background: #efe7d2; }
.clergy-section { background: #f6efdf; }
.give-expanded { background: #efe7d2; }
.services-section, .visit-section, .resources-section, .about-section,
.programs-section, .video-section, .lifeevents-section, .connect-aux-section,
.clergy-section, .give-expanded {
  border-top: 1px solid rgba(139,125,107,0.22);
}

/* Search suggestions: frosted dark panel so results read over the bright hero. */
#home #heroInlineResults.is-open {
  background: rgba(46,37,59,0.78) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  padding: 16px !important;
}

/* Search placeholder matches the serif labels in the bars above. */
.hero-search-bar input, #heroSearchInput {
  font-family: 'EB Garamond', Garamond, serif !important;
  font-size: 17px !important;
  letter-spacing: 0.01em !important;
}
.hero-search-bar input::placeholder, #heroSearchInput::placeholder {
  font-family: 'EB Garamond', Garamond, serif !important;
  font-size: 17px !important;
  letter-spacing: 0.01em !important;
  color: rgba(255,255,255,0.85) !important;
}

/* Mobile art direction for the stained-glass green hero: keep the rising sun
   and layered hills in frame when the wide panel is cropped to portrait. */
@media (max-width: 760px) {
  html[data-season="after-pentecost"] .hero-bg,
  html[data-season="after-epiphany"] .hero-bg {
    background-position: 66% center !important;
    background-size: cover !important;
  }
}


/* Hero quote: no vertical rule. */
.ht-collect { border-left: none !important; padding-left: 0 !important; }

/* Liturgical seasons index, bottom right of the hero. Current season lit. */
.hero-seasons {
  position: absolute;
  right: clamp(20px, 4vw, 52px);
  left: auto;
  bottom: 22px;
  z-index: 2;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: min(88vw, 900px);
  row-gap: 8px;
  gap: 16px;
  font-family: 'Jost', sans-serif;
  font-size: 7.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  text-shadow: 0 1px 3px rgba(0,0,0,0.45);
}
.hero-seasons span, .hero-seasons a { white-space: nowrap; }
.hero-seasons a { color: inherit; text-decoration: none; transition: color .2s ease; }
.hero-seasons a:hover { color: var(--white); }

/* current season: brighter, marked with a swatch dot in the liturgical color */
html[data-season="advent"] .hero-seasons [data-s="advent"],
html[data-season="christmas"] .hero-seasons [data-s="christmas"],
html[data-season="after-epiphany"] .hero-seasons [data-s="epiphany"],
html[data-season="lent"] .hero-seasons [data-s="lent"],
html[data-season="holy-week"] .hero-seasons [data-s="holy-week"],
html[data-season="easter"] .hero-seasons [data-s="easter"],
html[data-season="pentecost"] .hero-seasons [data-s="pentecost"],
html[data-season="trinity"] .hero-seasons [data-s="pentecost"],
html[data-season="after-pentecost"] .hero-seasons [data-s="after-pentecost"] {
  color: var(--white);
  font-weight: 500;
}
html[data-season="advent"] .hero-seasons [data-s="advent"]::before,
html[data-season="christmas"] .hero-seasons [data-s="christmas"]::before,
html[data-season="after-epiphany"] .hero-seasons [data-s="epiphany"]::before,
html[data-season="lent"] .hero-seasons [data-s="lent"]::before,
html[data-season="holy-week"] .hero-seasons [data-s="holy-week"]::before,
html[data-season="easter"] .hero-seasons [data-s="easter"]::before,
html[data-season="pentecost"] .hero-seasons [data-s="pentecost"]::before,
html[data-season="trinity"] .hero-seasons [data-s="pentecost"]::before,
html[data-season="after-pentecost"] .hero-seasons [data-s="after-pentecost"]::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--liturgical-color, #5a7355);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.6);
  vertical-align: 1px;
}
@media (max-width: 1024px) { .hero-seasons { display: none; } }

/* Season index items act as in-place hero previews. */
.hero-seasons button {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s ease;
}
.hero-seasons button:hover { color: var(--white); }

/* scroll hints removed site-wide */
.hero-scroll-hint, .scroll-hint, .scroll-indicator,
#home .hero-scroll-hint, html body .hero-scroll-hint { display: none !important; }

/* Hero headline carries the scripture; sized for a full sentence. */
#home .ht-day {
  font-size: clamp(24px, 3.4vw, 42px) !important;
  line-height: 1.35 !important;
  font-style: normal !important;
  max-width: 32ch;
  white-space: normal !important;
  width: auto !important;
}

/* Luke 4:18 citation in the italic sub-head style. */
#home .ht-collect cite, .ht-collect cite {
  font-family: 'EB Garamond', Garamond, serif !important;
  font-style: italic !important;
  font-size: 19px !important;
  font-weight: 300 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  color: rgba(255,255,255,0.78) !important;
  line-height: 1.6 !important;
}

/* Hero type: soft dark halo so white text holds against the bright glass. */
#home .ht-day,
#home #htDate,
#home .ht-collect cite {
  text-shadow:
    0 1px 3px rgba(10,8,4,0.75),
    0 2px 10px rgba(10,8,4,0.6),
    0 4px 22px rgba(10,8,4,0.5),
    0 0 48px rgba(10,8,4,0.4) !important;
}
#home .ht-day { color: #ffffff !important; }
#home #htDate {
  color: rgba(255,255,255,0.92) !important;
  font-family: 'Jost', sans-serif !important;
  font-style: normal !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}
#home .ht-collect cite {
  color: rgba(255,255,255,0.88) !important;
  display: block;
  padding-left: 34px;
}

/* Readability floor to 1024px: the compact nav band drops to 10.5px from 901px
   up, which is below the floor on an iPad landscape. */
@media (min-width: 901px) and (max-width: 1024px) {
  nav#mainNav .nav-links a { font-size: 11px !important; letter-spacing: 0.1em !important; }
}
/* Drawer submenu: 12px with a 44px target, matching the subpages. These four
   pages carry their own chrome, so the rule has to be repeated here. */
@media (max-width: 900px) {
  nav#mainNav .nav-drop a {
    font-size: 12px !important;
    min-height: 44px !important;
    padding: 13px 0 !important;
  }
}

/* ===== Mobile hero hierarchy =====
   The section carried ten type sizes and five equal-weight blocks, so nothing
   read as first. This reduces it to four sizes and three tiers: the name, the
   service card, one primary action. The scripture moves to its own band below
   the hero (see #heroVerseMobile), which frees roughly 340px of first screen. */
.hero-verse-mobile { display: none; }

@media (max-width: 900px) {
  /* The date held the most privileged position on the page and told a visitor
     nothing about the church. */
  #home .ht-date, #home #htDate { display: none !important; }

  /* A real scrim carries the name, instead of leaning on text-shadow over the
     busiest part of the glass. Sits below .hero-content, which is z-index 2. */
  #home::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
    /* Darkest behind the name, never fully clear: the gold secondary links and
       the search field sit over the brightest part of the window, and gold on
       pale green does not hold on its own. */
    background: linear-gradient(to bottom,
      rgba(12,9,6,0.86) 0%, rgba(12,9,6,0.78) 30%, rgba(12,9,6,0.56) 54%,
      rgba(12,9,6,0.48) 74%, rgba(12,9,6,0.58) 100%);
  }

  /* Tier 1: the name is the largest thing on the screen. */
  #home .ht-church {
    font-size: 34px !important;
    line-height: 1.08 !important;
    margin-bottom: 20px !important;
  }

  /* Tier 2: the service card is the anchor the section is built around. */
  #home .ht-times { margin: 0 0 22px !important; padding: 18px 20px !important; }

  /* Tier 3: one primary action, two quiet ones. The trailing tag span repeated
     the label beside it (Plan a visit / VISIT), so it is dropped. */
  #home .ht-actions { display: block !important; margin: 0 !important; }
  #home .ht-actions li { margin: 0 0 10px !important; list-style: none !important; }
  #home .ht-actions a span:last-child { display: none !important; }
  #home .ht-actions a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 50px !important;
    padding: 14px 20px !important;
    background: none !important;
    border: 0 !important;
    text-align: center !important;
  }
  #home .ht-actions a span:first-child {
    font-family: 'Jost', sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--gold-light) !important;
  }
  #home .ht-actions li:first-child a {
    background: var(--gold) !important;
    border: 1px solid var(--gold) !important;
  }
  #home .ht-actions li:first-child a span:first-child {
    color: var(--anchor) !important;
    font-weight: 500 !important;
  }
  #home .ht-actions li:not(:first-child) a {
    min-height: 46px !important;
    border-top: 1px solid rgba(232,201,122,0.26) !important;
  }
  /* The desktop chips carry a frosted panel and a drop shadow, which made the
     two quiet actions read as cards competing with the primary button. */
  #home .ht-actions a,
  #home .ht-actions li:not(:first-child) a {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
  }

  /* One solid gold element per screen. The hero search keeps its function but
     steps back to an outline so it stops competing with the primary action. */
  #home #heroSearchSystem { margin-top: 22px !important; }
  #home #heroSearchSystem button {
    background: transparent !important;
    border: 1px solid rgba(232,201,122,0.55) !important;
    color: var(--gold-light) !important;
    box-shadow: none !important;
    min-height: 46px !important;
  }

  /* The scripture band, directly below the hero. */
  .hero-verse-mobile {
    display: block;
    background: var(--anchor);
    padding: 32px 26px 28px;
  }
  .hero-verse-mobile .ht-day {
    display: block !important;
    font-family: 'EB Garamond', Garamond, serif !important;
    font-size: 21px !important;
    line-height: 1.45 !important;
    font-style: normal !important;
    color: rgba(255,255,255,0.96) !important;
    text-shadow: none !important;
    max-width: none !important;
    width: auto !important;
    margin: 0 !important;
  }
  .hero-verse-mobile .ht-collect {
    display: block !important;
    margin: 14px 0 0 !important;
  }
  /* The citation is a label, not a headline. It was the fourth-largest text on
     the screen at 19px; it now sits with the other micro-labels. */
  .hero-verse-mobile .ht-collect cite {
    display: block !important;
    font-family: 'Jost', sans-serif !important;
    font-style: normal !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: var(--gold-light) !important;
    padding-left: 0 !important;
    text-shadow: none !important;
  }
}

/* ===== One button scale =====
   Sixteen CTA classes had drifted apart: nine heights between 37px and 52px,
   three type sizes, five letter-spacings. Every button now shares one spec so
   a gold button is the same object everywhere on the site. Colour and border
   are left to each class, so solid and outline variants keep their identity.
   The search submit is deliberately excluded: it is sized to match its input. */
.lifeevents-cta, .btn-primary, .btn-outline, .visit-cta, .primary-card-cta,
.service-card-cta, .program-card-cta, .resource-link, .calendar-feed-link,
.signup-cta, .volunteer-cta, .gss-cta, .video-yt-link, .prayer-submit,
.modal-submit, .btn, .cta, .send, .bulletin-cta, .btn-gold {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 14px 28px;
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1;
}
/* Full-width form submits stay full width. */
.send, .prayer-submit, .modal-submit { width: 100%; }

/* The hero action chips and the livestream pill are boxed, padded CTAs, so they
   belong to the button scale too. Above 900px the chips were 17px serif in a
   51px box; the pill was 31px. The trailing tag span is dropped here for the
   same reason it is on mobile: it repeats the label beside it. */
@media (min-width: 901px) {
  #home .ht-actions a {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 14px 28px;
    line-height: 1;
  }
  #home .ht-actions a span:last-child { display: none; }
  #home .ht-actions a span:first-child {
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }
}
/* The hero search submit keeps the height of the input beside it, but its
   padding matches every other button. Written at the same specificity as the
   !important rule above that sets 14px 24px. */
#home .hero-search-bar button, .hero-search-bar button { padding: 14px 28px !important; }
.livestream-pill {
  box-sizing: border-box;
  min-height: 44px;
  padding: 14px 28px;
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1;
}

/* E-news signup: the note that says where the address actually goes. */
.enews-fine {
  margin-top: 10px;
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.62);
}
.enews-fine a { color: rgba(255,255,255,0.82); text-decoration: underline; }


/* ===== Responsive hero =====
   The hero is the LCP element and was one 1920px asset for every device,
   124 KB on a 390px phone. These route the same source through Vercel's
   image optimizer, which resizes and re-encodes to AVIF per request:
   43 KB at 960w, 64 KB at 1280w. Above 1200px the pre-built 1920 AVIF applies. */
@media (max-width: 700px) {
  .hero-bg { background: linear-gradient(135deg, rgba(var(--liturgical-rgb, 90,115,85), 0.30) 0%, rgba(var(--liturgical-rgb, 90,115,85), 0.12) 55%, transparent 100%), url('/_vercel/image?url=%2Fassets%2Fhero%2Fgreen-glass-1920.jpg&w=960&q=72') center/cover no-repeat; }
  /* Seasonal hero imagery, keyed to the liturgical season computed on load. */ html[data-season="advent"] .hero-bg { background: linear-gradient(135deg, rgba(var(--liturgical-rgb, 90,115,85), 0.30) 0%, rgba(var(--liturgical-rgb, 90,115,85), 0.12) 55%, transparent 100%), url('/_vercel/image?url=%2Fassets%2Fhero%2Fadvent-glass-1920.jpg&w=960&q=72') center/cover no-repeat; }
  html[data-season="christmas"] .hero-bg { background: linear-gradient(135deg, rgba(var(--liturgical-rgb, 90,115,85), 0.30) 0%, rgba(var(--liturgical-rgb, 90,115,85), 0.12) 55%, transparent 100%), url('/_vercel/image?url=%2Fassets%2Fhero%2Fchristmas-glass-1920.jpg&w=960&q=72') center/cover no-repeat; }
  html[data-season="after-epiphany"] .hero-bg { background: linear-gradient(135deg, rgba(var(--liturgical-rgb, 90,115,85), 0.30) 0%, rgba(var(--liturgical-rgb, 90,115,85), 0.12) 55%, transparent 100%), url('/_vercel/image?url=%2Fassets%2Fhero%2Fepiphany-glass-1920.jpg&w=960&q=72') center/cover no-repeat; }
  html[data-season="lent"] .hero-bg { background: linear-gradient(135deg, rgba(var(--liturgical-rgb, 90,115,85), 0.30) 0%, rgba(var(--liturgical-rgb, 90,115,85), 0.12) 55%, transparent 100%), url('/_vercel/image?url=%2Fassets%2Fhero%2Flent-glass-1920.jpg&w=960&q=72') center/cover no-repeat; }
  html[data-season="holy-week"] .hero-bg { background: linear-gradient(135deg, rgba(var(--liturgical-rgb, 90,115,85), 0.30) 0%, rgba(var(--liturgical-rgb, 90,115,85), 0.12) 55%, transparent 100%), url('/_vercel/image?url=%2Fassets%2Fhero%2Fholyweek-glass-1920.jpg&w=960&q=72') center/cover no-repeat; }
  html[data-season="easter"] .hero-bg { background: linear-gradient(135deg, rgba(var(--liturgical-rgb, 90,115,85), 0.30) 0%, rgba(var(--liturgical-rgb, 90,115,85), 0.12) 55%, transparent 100%), url('/_vercel/image?url=%2Fassets%2Fhero%2Feaster-glass-1920.jpg&w=960&q=72') center/cover no-repeat; }
  html[data-season="pentecost"] .hero-bg, html[data-season="trinity"] .hero-bg { background: linear-gradient(135deg, rgba(var(--liturgical-rgb, 90,115,85), 0.30) 0%, rgba(var(--liturgical-rgb, 90,115,85), 0.12) 55%, transparent 100%), url('/_vercel/image?url=%2Fassets%2Fhero%2Fpentecost-glass-1920.jpg&w=960&q=72') center/cover no-repeat; }
}
@media (min-width: 701px) and (max-width: 1200px) {
  .hero-bg { background: linear-gradient(135deg, rgba(var(--liturgical-rgb, 90,115,85), 0.30) 0%, rgba(var(--liturgical-rgb, 90,115,85), 0.12) 55%, transparent 100%), url('/_vercel/image?url=%2Fassets%2Fhero%2Fgreen-glass-1920.jpg&w=1280&q=72') center/cover no-repeat; }
  /* Seasonal hero imagery, keyed to the liturgical season computed on load. */ html[data-season="advent"] .hero-bg { background: linear-gradient(135deg, rgba(var(--liturgical-rgb, 90,115,85), 0.30) 0%, rgba(var(--liturgical-rgb, 90,115,85), 0.12) 55%, transparent 100%), url('/_vercel/image?url=%2Fassets%2Fhero%2Fadvent-glass-1920.jpg&w=1280&q=72') center/cover no-repeat; }
  html[data-season="christmas"] .hero-bg { background: linear-gradient(135deg, rgba(var(--liturgical-rgb, 90,115,85), 0.30) 0%, rgba(var(--liturgical-rgb, 90,115,85), 0.12) 55%, transparent 100%), url('/_vercel/image?url=%2Fassets%2Fhero%2Fchristmas-glass-1920.jpg&w=1280&q=72') center/cover no-repeat; }
  html[data-season="after-epiphany"] .hero-bg { background: linear-gradient(135deg, rgba(var(--liturgical-rgb, 90,115,85), 0.30) 0%, rgba(var(--liturgical-rgb, 90,115,85), 0.12) 55%, transparent 100%), url('/_vercel/image?url=%2Fassets%2Fhero%2Fepiphany-glass-1920.jpg&w=1280&q=72') center/cover no-repeat; }
  html[data-season="lent"] .hero-bg { background: linear-gradient(135deg, rgba(var(--liturgical-rgb, 90,115,85), 0.30) 0%, rgba(var(--liturgical-rgb, 90,115,85), 0.12) 55%, transparent 100%), url('/_vercel/image?url=%2Fassets%2Fhero%2Flent-glass-1920.jpg&w=1280&q=72') center/cover no-repeat; }
  html[data-season="holy-week"] .hero-bg { background: linear-gradient(135deg, rgba(var(--liturgical-rgb, 90,115,85), 0.30) 0%, rgba(var(--liturgical-rgb, 90,115,85), 0.12) 55%, transparent 100%), url('/_vercel/image?url=%2Fassets%2Fhero%2Fholyweek-glass-1920.jpg&w=1280&q=72') center/cover no-repeat; }
  html[data-season="easter"] .hero-bg { background: linear-gradient(135deg, rgba(var(--liturgical-rgb, 90,115,85), 0.30) 0%, rgba(var(--liturgical-rgb, 90,115,85), 0.12) 55%, transparent 100%), url('/_vercel/image?url=%2Fassets%2Fhero%2Feaster-glass-1920.jpg&w=1280&q=72') center/cover no-repeat; }
  html[data-season="pentecost"] .hero-bg, html[data-season="trinity"] .hero-bg { background: linear-gradient(135deg, rgba(var(--liturgical-rgb, 90,115,85), 0.30) 0%, rgba(var(--liturgical-rgb, 90,115,85), 0.12) 55%, transparent 100%), url('/_vercel/image?url=%2Fassets%2Fhero%2Fpentecost-glass-1920.jpg&w=1280&q=72') center/cover no-repeat; }
}

/* ===== Stay Connected cards on small phones =====
   Grid items default to min-width:auto, so the card could not shrink below its
   content's minimum. With 48px of padding each side plus a text input, that
   floor was 330px, and the cards bled 35px off a 320px screen. */
@media (max-width: 700px) {
  .connect-aux-grid > *,
  .connect-card { min-width: 0; }
  .connect-card { padding: 32px 22px 28px; }
  .enews-form { flex-wrap: wrap; }
  .enews-form input { min-width: 0; width: 100%; }
}

/* RSVP dialog: same dialog language as the calendar page's modal. */
.modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(46,37,59,0.62); backdrop-filter: blur(3px); }
.modal-card {
  position: relative;
  background: var(--ivory);
  border: 1px solid rgba(139,125,107,0.25);
  box-shadow: 0 18px 50px rgba(0,0,0,0.32);
  max-width: 430px;
  width: 100%;
  padding: 40px 36px 32px;
  text-align: center;
}
.modal-close {
  position: absolute; top: 10px; right: 14px;
  background: none; border: 0; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--stone);
}
.modal-close:hover { color: var(--warm-brown); }
.modal-label { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--warm-brown); }
.modal-card h2 {
  font-family: 'EB Garamond', Garamond, serif;
  font-size: 30px; font-weight: 400; color: var(--charcoal); margin-top: 12px;
}
.modal-rule { width: 56px; height: 1px; background: var(--gold); margin: 18px auto; }
.modal-card p {
  font-family: 'EB Garamond', Garamond, serif;
  font-size: 17px; line-height: 1.6; color: var(--text-light); margin-bottom: 22px;
}
.modal-card label {
  display: block; text-align: left;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-light); margin-bottom: 6px;
}
.modal-card input[type=text],
.modal-card input[type=email],
.modal-card input[type=tel] {
  width: 100%; padding: 13px 16px;
  border: 1px solid rgba(139,125,107,0.45);
  background: var(--white);
  font-family: 'Jost', sans-serif; font-size: 15px; color: var(--charcoal);
  outline: none; margin-bottom: 16px;
}
.modal-card input[type=text]:focus,
.modal-card input[type=email]:focus,
.modal-card input[type=tel]:focus { border-color: var(--gold); }
.modal-card input[readonly] { background: var(--cream); color: var(--text-light); }
button.volunteer-cta { cursor: pointer; }
.modal-submit { width: 100%; cursor: pointer; }
.modal-card .form-status { font-family: 'Jost', sans-serif; font-size: 12px; margin-top: 14px; color: var(--text-light); }
.modal-card .form-status[data-kind=error] { color: #8c3b2e; }
button.signup-cta { cursor: pointer; }

/* ===== Responsive hardening (2026-08-10 audit) ===== */

/* Anchor jumps land clear of the fixed 78px header (64px scrolled). */
[id] { scroll-margin-top: 96px; }

/* Media can never force horizontal scroll, whatever gets added later. */
img { max-width: 100%; height: auto; }
svg, video, canvas, iframe, embed, object { max-width: 100%; }

/* iOS zooms the page when a focused field is under 16px. Touch devices
   only, so desktop form styling is untouched at any width. */
@media (hover: none) {
  input, select, textarea { font-size: 16px !important; }
}

/* Touch devices in the horizontal nav: first tap opens a submenu
   (nav-drawer.js adds .drop-open), matching the hover/focus reveal. */
.nav-links > li.has-drop.drop-open > .nav-drop {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* The parish name is never italicized: wordmark, footer brand, page footers. */
.nav-mark em, .footer-brand h2 em, footer .foot-name em, .church em {
  font-style: normal !important;
}

/* Nav labels never wrap mid-word in the horizontal nav; the compact band
   above covers the widths where they used to. */
@media (min-width: 901px) {
  #mainNav .nav-links > li > a { white-space: nowrap; }
}
/* The three visit cards share one label rhythm; the middle card is an anchor
   and picked up a smaller margin. */
.visit-secondary-grid .visit-card .section-label { margin-bottom: 26px !important; }

/* ===== Mobile drawer legibility (home page) =====
   The home page does not load site-chrome.css, so it needs the same correction:
   a later global rule was painting drawer submenu links charcoal on the dark
   panel, leaving them all but invisible. Last in the file on purpose. */
@media (max-width: 900px) {
  nav#mainNav .nav-links > li > a {
    font-size: 15px !important;
    color: #ffffff !important;
  }
  nav#mainNav .nav-drop a {
    font-size: 14px !important;
    letter-spacing: 0.1em !important;
    color: rgba(255, 255, 255, 0.94) !important;
  }
  nav#mainNav .nav-drop a em {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.72) !important;
  }
  nav#mainNav .nav-toggle-label { font-size: 13px !important; }
  nav#mainNav.nav-open .nav-toggle-label { color: rgba(255, 255, 255, 0.95) !important; }
  nav#mainNav.nav-open .nav-toggle-bar { background: rgba(255, 255, 255, 0.95) !important; }
}