/* St. Stephen's shared site chrome: canonical header (nav) and footer.
   Extracted from the main pages; loaded by every subpage. */
  /* ===== NAV ===== */
  nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 40px 8% 40px calc(8% + 32px);
    transition: background 0.4s, padding 0.4s, backdrop-filter 0.4s;
  }
  nav.scrolled {
    background: rgba(250, 248, 244, 0.92);
    backdrop-filter: blur(12px);
    padding: 20px 8% 20px calc(8% + 32px);
    border-bottom: 1px solid rgba(90,60,40,0.1);
    box-shadow: 0 2px 20px rgba(0,0,0,0.06);
  }
  /* Wordmark home-link on the left of the nav */
  .nav-mark {
    font-family: 'EB Garamond', Garamond, serif;
    font-weight: 400;
    font-size: 21.25px;
    color: rgba(255,255,255,0.92);
    text-decoration: none;
    letter-spacing: 0.01em;
    flex-shrink: 0;
    transition: color 0.2s;
    white-space: nowrap;
  }
  .nav-mark em {
    /* Cardo upright accent per Option C */
    font-family: 'Cardo', serif;
    font-style: normal;
    color: rgba(255,250,225,0.88);
    font-size: 0.94em;
    letter-spacing: 0.005em;
    transition: color 0.2s;
  }
  nav.scrolled .nav-mark { color: var(--charcoal); }
  nav.scrolled .nav-mark em { color: var(--warm-brown); }
  .nav-mark:hover { color: var(--gold-light); }
  .nav-mark:hover em { color: var(--gold-light); }
  nav.scrolled .nav-mark:hover { color: var(--gold); }
  nav.scrolled .nav-mark:hover em { color: var(--gold); }
  @media (max-width: 760px) {
    .nav-mark { font-size: 17.5px; }
    nav { gap: 16px; padding: 16px 22px; }
    nav.scrolled { padding: 12px 22px; }
  }
  .nav-links {
    display: flex;
    align-items: center;
    gap: 44px;
    list-style: none;
  }
  .nav-links > li { position: relative; }
  .nav-links a {
    text-decoration: none;
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 11.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.92);
    transition: color 0.2s, opacity 0.2s;
  }
  nav.scrolled .nav-links a { color: var(--charcoal); }
  .nav-links a:hover { opacity: 1; } /* opacity replaced by gold underline draw, below */

  /* Dropdown chevron on parent items */
  .nav-links > li.has-drop > a::after {
    content: ' ▾';
    font-size: 0.78em;
    opacity: 0.55;
    margin-left: 3px;
    letter-spacing: 0;
  }

  /* Dropdown panel */
  .nav-drop {
    position: absolute;
    top: 100%;
    left: -18px;
    margin-top: 14px;
    min-width: 260px;
    padding: 12px 0;
    background: rgba(46, 37, 59, 0.96);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(201, 168, 76, 0.18);
    border-radius: 2px;
    box-shadow: 0 14px 36px rgba(0,0,0,0.30);
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
    z-index: 110;
  }
  nav.scrolled .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-links > li.has-drop:hover > .nav-drop,
  .nav-links > li.has-drop:focus-within > .nav-drop {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav-drop li { margin: 0; padding: 0; }
  .nav-drop a {
    display: block;
    padding: 10px 22px;
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.88) !important;
    background: transparent;
    transition: background 0.15s, color 0.15s, opacity 0.15s;
    white-space: nowrap;
  }
  .nav-drop a em {
    display: block;
    font-family: 'EB Garamond', Garamond, serif;
    font-style: italic;
    font-weight: 300;
    font-size: 11.5px;
    text-transform: none;
    letter-spacing: 0.01em;
    color: rgba(255,255,255,0.5);
    margin-top: 2px;
  }
  nav.scrolled .nav-drop a { color: var(--charcoal) !important; }
  nav.scrolled .nav-drop a em { color: rgba(60, 40, 15, 0.55); }
  .nav-drop a:hover {
    background: rgba(201, 168, 76, 0.12);
    color: var(--gold-light) !important;
    opacity: 1;
  }
  .nav-drop a:hover em { color: rgba(255, 240, 200, 0.65); }
  nav.scrolled .nav-drop a:hover {
    background: rgba(201, 168, 76, 0.18);
    color: var(--gold) !important;
  }
  nav.scrolled .nav-drop a:hover em { color: rgba(60, 40, 15, 0.72); }
  /* ═══════════════ HAMBURGER TOGGLE ═══════════════
     Desktop: hidden. Mobile (<760px): visible, opens off-canvas nav drawer. */
  .nav-toggle {
    display: none;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 8px 6px;
    margin-left: auto;
    z-index: 102;
    position: relative;
  }
  .nav-toggle-label {
    font-family: 'Jost', sans-serif;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.92);
    transition: color 0.2s ease;
  }
  nav.scrolled .nav-toggle-label { color: var(--charcoal); }
  nav.nav-open .nav-toggle-label { color: rgba(255,255,255,0.95); }
  .nav-toggle-icon { display: block; }
  .nav-toggle-bar {
    display: block;
    width: 24px;
    height: 1.5px;
    background: rgba(255,255,255,0.92);
    margin: 5px 0;
    transition: transform 0.25s ease, opacity 0.2s ease, background 0.2s ease;
  }
  nav.scrolled .nav-toggle-bar { background: var(--charcoal); }
  nav.nav-open .nav-toggle-bar { background: rgba(255,255,255,0.95); }

  @media (max-width: 760px) {
    .nav-toggle { display: flex; }
    .nav-links {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      width: min(300px, 82vw);
      background: rgba(46, 37, 59, 0.985);
      backdrop-filter: blur(16px);
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: 0;
      padding: 88px 28px 32px;
      transform: translateX(100%);
      transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
      z-index: 99;
      box-shadow: -12px 0 36px rgba(0,0,0,0.22);
      overflow-y: auto;
    }
    nav.nav-open .nav-links { transform: translateX(0); }

    .nav-links > li {
      width: 100%;
      border-bottom: 1px solid rgba(232, 201, 122, 0.10);
    }
    .nav-links > li:last-child { border-bottom: 0; }
    .nav-links a {
      display: block;
      padding: 14px 0;
      font-size: 13px;
      letter-spacing: 0.14em;
      color: rgba(255,255,255,0.92) !important;
    }
    /* In mobile drawer, show dropdown children inline beneath their parent */
    .nav-drop {
      display: block !important;
      position: static;
      background: transparent;
      backdrop-filter: none;
      border: 0;
      box-shadow: none;
      opacity: 1;
      visibility: visible;
      transform: none;
      padding: 0 0 8px 12px;
      margin: 0;
      min-width: 0;
    }
    .nav-drop a {
      padding: 8px 0;
      font-size: 10.5px;
      color: rgba(255,255,255,0.7) !important;
      background: transparent !important;
    }
    .nav-drop a em {
      font-size: 10.5px;
      color: rgba(255,255,255,0.45);
    }
    .nav-links > li.has-drop > a::after {
      content: ' ▾';
      opacity: 0.45;
      margin-left: 4px;
    }
    /* Hide the gold underline draw in mobile menu, it doesn't apply */
    .nav-links > li > a::before { display: none; }
    .nav-links > li > a { padding-bottom: 14px; }
    /* Give CTA visually emphasized in mobile drawer */
    .nav-links > li:last-child > a {
      margin-top: 12px;
      padding: 12px 16px !important;
      text-align: center;
      border: 1px solid rgba(232, 201, 122, 0.45);
      color: var(--gold-light) !important;
    }
    /* Hamburger animates to X when open */
    nav.nav-open .nav-toggle-bar:nth-child(1) {
      transform: translateY(6.5px) rotate(45deg);
    }
    nav.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
    nav.nav-open .nav-toggle-bar:nth-child(3) {
      transform: translateY(-6.5px) rotate(-45deg);
    }
    /* Backdrop dim behind drawer */
    nav.nav-open::before {
      content: '';
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.42);
      backdrop-filter: blur(2px);
      z-index: 98;
    }
    /* Prevent body scroll when drawer open */
    body.nav-locked { overflow: hidden; }
  }

  @media (max-width: 900px) {
    /* Dropdowns hide on narrow screens; parents still navigate to their landing page */
    .nav-drop { display: none; }
    .nav-links > li.has-drop > a::after { content: none; }
  }

  /* Right-anchored variant for dropdowns that would overflow the viewport's right edge.
     Added dynamically by JS at load and on resize. */
  .nav-drop.nav-drop--right {
    left: auto !important;
    right: -18px !important;
  }

  /* Slightly narrower min-width on medium screens so dropdowns fit comfortably */
  @media (max-width: 1100px) {
    .nav-drop { min-width: 220px; }
    .nav-drop a { padding: 9px 18px; font-size: 10.5px; letter-spacing: 0.12em; }
    .nav-drop a em { font-size: 11px; }
  }


  /* ===== CONTACT / FOOTER ===== */
  .contact-footer {
    background: var(--charcoal);
    padding: 80px 8% 48px;
    color: var(--white);
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 64px;
  }
  .footer-brand h2 {
    font-family: 'EB Garamond', Garamond, serif;
    font-size: 28px;
    font-weight: 400;
    color: var(--white);
    line-height: 1.2;
    margin-bottom: 8px;
  }
  .footer-brand h2 em { font-style: italic; }
  .footer-brand .diocese {
    font-family: 'EB Garamond', Garamond, serif;
    font-style: italic;
    font-size: 15px;
    letter-spacing: 0.01em;
    color: rgba(255,255,255,0.55);
    display: block;
    line-height: 1.5;
    margin-bottom: 20px;
  }
  .footer-brand p {
    font-size: 13.5px;
    font-weight: 300;
    line-height: 1.75;
    color: rgba(255,255,255,0.55);
    margin-bottom: 28px;
  }
  .social-links { display: flex; gap: 14px; }
  .social-link {
    width: 36px; height: 36px;
    border: 1px solid rgba(255,255,255,0.2);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    font-size: 13px;
    transition: border-color 0.2s, color 0.2s;
  }
  .social-link:hover { border-color: var(--gold); color: var(--gold); }
  .social-link svg { width: 16px; height: 16px; display: block; }
  .footer-col h3,
  .footer-col h4 {
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 20px;
    font-weight: 400;
  }
  .footer-col ul { list-style: none; }
  .footer-col ul li {
    margin-bottom: 10px;
    font-size: 13.5px;
    font-weight: 300;
    color: rgba(255,255,255,0.55);
  }
  .footer-col ul li a {
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    transition: color 0.2s;
  }
  .footer-col ul li a:hover { color: var(--gold-light); }
  .footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 300;
    color: rgba(255,255,255,0.3);
    letter-spacing: 0.04em;
  }
  .footer-bottom a { color: rgba(255,255,255,0.35); text-decoration: none; }
  .footer-esque {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 0.2s ease;
  }
  .footer-esque:hover { opacity: 1; }
  .footer-esque img {
    height: 20px;
    width: auto;
    display: block;
    filter: invert(1) brightness(0.92);
  }
  .footer-esque .label {
    font-family: 'EB Garamond', Garamond, serif;
    font-style: italic;
    font-weight: 300;
    font-size: 10.5px;
    color: rgba(255,255,255,0.35);
    letter-spacing: 0.06em;
    border-left: 1px solid rgba(255,255,255,0.18);
    padding-left: 10px;
  }

.footer-grid--five { grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr 1fr; gap: 36px; }
@media (max-width: 960px) { .footer-grid--five { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .footer-grid--five { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .nav-drop a em { font-size: 11.5px !important; } }
/* Compact horizontal nav band: keep section names visible down to 901px. */
@media (min-width: 901px) and (max-width: 1180px) {
  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;
    /* 44px touch target. These are the drawer's second-level destinations and
       were the smallest tap targets in the primary navigation. Padding rather
       than flex, so the trailing <em> descriptor keeps wrapping inline. */
    min-height: 44px !important;
    padding: 13px 0 !important;
    /* 12px, not 10.5px. The drawer is the whole navigation on a phone, so its
       submenu must clear the same 11px floor as every other micro-label. */
    font-size: 12px !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;
  }
}

/* Subpage adjustments */
section.hero { padding-top: 150px !important; }
footer.contact-footer { text-align: left; margin-top: 72px; }
footer.contact-footer p, footer.contact-footer a { letter-spacing: normal; }
h1 em, h2 em, h3 em, h4 em { color: inherit !important; font-style: normal !important; }

/* 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); }

/* 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);
}

/* 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); }

/* Seasonal hero dividers on subpages. */
.hero .divider { background: var(--liturgical-color, #5a7355) !important; }

/* 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; }



/* Subpage hero panels dyed to the deep vestment tone of the season. */
/* Subpage hero art is defined below, with the seasonal window. */
/* Seasonal lead labels on light surfaces. */
.lead-label { color: var(--liturgical-ink, #4e6349) !important; }
/* Linen weave on the dark cloth panels: physical, not digital. */
.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) !important;
}
/* Vellum ground. */
:root { --cream: #f4edde; --ivory: #f7f1e2; }
/* 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);
}

section.hero h1, section.hero .section-label {
  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);
}


/* Card CTAs sit on a common baseline: every card in a row is a flex column,
   and the trailing action is pushed to the foot of the card. */
.visit-card,
.service-card:not(.service-card--primary),
.program-card,
.connect-card {
  display: flex;
  flex-direction: column;
}
.visit-card > .btn-primary,
.visit-card > a.btn-primary,
.visit-card > span.btn-primary,
.service-card:not(.service-card--primary) > .service-card-cta,
.program-card .program-card-body > .program-card-cta {
  margin-top: auto;
  align-self: flex-start;
}
/* The programs cards carry their action inside the body, so the body is the
   column that has to stretch. */
.program-card .program-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* ===== Keyboard focus =====
   Two-tone ring: a dark stroke for the cream surfaces and a light halo for the
   dark vestment panels, so focus is visible on every ground on the site.
   !important is deliberate: several inputs set `outline: none` from an ID
   selector, and an accessibility baseline must not lose that specificity race. */
:focus-visible {
  outline: 2px solid #1c1710 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px rgba(255, 250, 225, 0.95) !important;
}
/* Mouse and touch users keep the clean surface. */
:focus:not(:focus-visible) { outline: none; }

/* ===== Skip link ===== */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  padding: 12px 20px;
  background: var(--anchor, #2e253b);
  color: #fff;
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus { left: 12px; top: 12px; }
main:focus { outline: none; }

/* ===== Mobile refinements =====
   The layout already reflows to one column and does not scroll sideways at
   320px. These are the phone-specific details that layout alone does not fix. */
@media (max-width: 900px) {
  /* iOS silently zooms the whole page when a focused field is under 16px.
     !important because several of these are set from an ID selector. */
  input, select, textarea { font-size: 16px !important; }

  /* Primary actions get a full 44px touch target. */
  .btn, .service-card-cta, .program-card-cta, .resource-link, .signup-cta,
  .volunteer-cta, .lifeevents-cta, .primary-card-cta, .visit-cta, .cta,
  .prayer-submit, .btn-primary, .btn-outline, .modal-submit {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* 9px and 10px labels are unreadable on a phone. */
  /* An 11px floor for the micro-labels. Below that, uppercase letterspaced
     type is genuinely hard to read on a phone, and this congregation skews
     older. Applied as one family so the label idiom stays consistent. */
  .hir-rule-label, .vcol-tag, .program-card-tag, .resource-tag,
  .asch-note, .year-label, .clergy-card .role, .staff-card .role, .v-term,
  .event-date .month, .signup-cta, .vcol-count-badge, .vcol-cta,
  .footer-contact-label, .footer-col h3, .footer-col h4,
  .video-section__kicker span, .give-method a,
  .announcement .asch-note, .about-image-badge .year-label,
  .vestry-card .v-term { font-size: 11px; }

  /* An email address is one unbreakable 26-character token. */
  .footer-contact-block p, .footer-brand p, .visit-address-line,
  .tt-fine, .fine, .modal-fine { overflow-wrap: anywhere; }
}


/* ===== Subpage hero =====
   The homepage wears the seasonal stained glass; interior pages used to wear a
   flat cloth panel, which made the site read as two different sites. They now
   share one masthead treatment, at roughly half the homepage's height. A dark
   scrim is baked into the stack so the white heading and gold label stay legible
   over any of the eight windows. Plain-jpeg declaration first for engines
   without image-set(). */
section.hero {
  /* Deliberately NOT position:relative. Nine pages float a card block up over
     the hero's lower edge with margin-top:-34px, and those blocks are
     unpositioned, so a positioned hero would paint on top of them. */
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-attachment: scroll;
}
section.hero { background: radial-gradient(72% 80% at 50% 48%, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.40) 44%, rgba(0,0,0,0) 82%), linear-gradient(to top, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 22%), 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/green-glass-1920.jpg') center/cover no-repeat; }
section.hero { background: radial-gradient(72% 80% at 50% 48%, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.40) 44%, rgba(0,0,0,0) 82%), linear-gradient(to top, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 22%), 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/green-glass-1920.avif') type('image/avif'), url('/assets/hero/green-glass-1920.webp') type('image/webp'), url('/assets/hero/green-glass-1920.jpg') type('image/jpeg')) center/cover no-repeat; }
html[data-season="advent"] section.hero { background: radial-gradient(72% 80% at 50% 48%, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.40) 44%, rgba(0,0,0,0) 82%), linear-gradient(to top, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 22%), 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; }
html[data-season="advent"] section.hero { background: radial-gradient(72% 80% at 50% 48%, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.40) 44%, rgba(0,0,0,0) 82%), linear-gradient(to top, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 22%), 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"] section.hero { background: radial-gradient(72% 80% at 50% 48%, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.40) 44%, rgba(0,0,0,0) 82%), linear-gradient(to top, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 22%), 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; }
html[data-season="christmas"] section.hero { background: radial-gradient(72% 80% at 50% 48%, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.40) 44%, rgba(0,0,0,0) 82%), linear-gradient(to top, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 22%), 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"] section.hero { background: radial-gradient(72% 80% at 50% 48%, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.40) 44%, rgba(0,0,0,0) 82%), linear-gradient(to top, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 22%), 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; }
html[data-season="after-epiphany"] section.hero { background: radial-gradient(72% 80% at 50% 48%, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.40) 44%, rgba(0,0,0,0) 82%), linear-gradient(to top, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 22%), 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"] section.hero { background: radial-gradient(72% 80% at 50% 48%, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.40) 44%, rgba(0,0,0,0) 82%), linear-gradient(to top, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 22%), 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; }
html[data-season="lent"] section.hero { background: radial-gradient(72% 80% at 50% 48%, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.40) 44%, rgba(0,0,0,0) 82%), linear-gradient(to top, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 22%), 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"] section.hero { background: radial-gradient(72% 80% at 50% 48%, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.40) 44%, rgba(0,0,0,0) 82%), linear-gradient(to top, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 22%), 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; }
html[data-season="holy-week"] section.hero { background: radial-gradient(72% 80% at 50% 48%, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.40) 44%, rgba(0,0,0,0) 82%), linear-gradient(to top, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 22%), 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"] section.hero { background: radial-gradient(72% 80% at 50% 48%, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.40) 44%, rgba(0,0,0,0) 82%), linear-gradient(to top, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 22%), 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; }
html[data-season="easter"] section.hero { background: radial-gradient(72% 80% at 50% 48%, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.40) 44%, rgba(0,0,0,0) 82%), linear-gradient(to top, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 22%), 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"] section.hero { background: radial-gradient(72% 80% at 50% 48%, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.40) 44%, rgba(0,0,0,0) 82%), linear-gradient(to top, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 22%), 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; }
html[data-season="pentecost"] section.hero { background: radial-gradient(72% 80% at 50% 48%, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.40) 44%, rgba(0,0,0,0) 82%), linear-gradient(to top, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 22%), 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; }
html[data-season="trinity"] section.hero { background: radial-gradient(72% 80% at 50% 48%, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.40) 44%, rgba(0,0,0,0) 82%), linear-gradient(to top, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 22%), 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; }
html[data-season="trinity"] section.hero { background: radial-gradient(72% 80% at 50% 48%, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.40) 44%, rgba(0,0,0,0) 82%), linear-gradient(to top, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 22%), 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; }
@media (max-width: 760px) {
  section.hero { min-height: 260px; }
}

/* ===== Mobile drawer containing block =====
   An ancestor with backdrop-filter becomes the containing block for its
   position:fixed descendants. The nav carries backdrop-filter, so the off-canvas
   drawer was being sized against the 78px nav instead of the viewport: it opened
   as a 120px sliver, which reads as "the burger does nothing". The frosted effect
   is invisible anyway behind a 94%-opaque background, so it is dropped at the
   widths where the drawer exists. */
@media (max-width: 900px) {
  nav, nav.scrolled, nav#mainNav, nav#mainNav.scrolled { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  nav#mainNav .nav-links { height: 100dvh !important; }
}

/* Hero type carries the homepage's shadow treatment, so the panel can stay
   bright at the edges the way the homepage hero does. */
section.hero h1, section.hero .section-label, section.hero p {
  text-shadow: 0 2px 18px rgba(0,0,0,0.74), 0 1px 2px rgba(0,0,0,0.80);
}


/* ===== Person cards (clergy, staff, vestry) =====
   Portrait, name, role and bio in one card, matching the homepage clergy cards.
   Replaces the earlier detached portrait grid. */
/* Card sections share the invitation block's measure (760px box, 40px
   padding) so every section on the page starts and ends on one line. */
.pcard-section { max-width: 760px; margin: 56px auto 0; padding: 0 40px; }
.pcard-section .lead-label {
  display: block; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--liturgical-ink, #4e6349); margin-bottom: 10px;
}
.pcard-section h2 {
  font-family: 'EB Garamond', Garamond, serif; font-size: clamp(26px, 3.4vw, 34px);
  font-weight: 400; color: var(--charcoal, #2a2a2a); margin-bottom: 28px;
}
.pcard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 30px 22px; }
.pcard-grid--wide { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 34px 24px; }
.pcard {
  background: var(--ivory, #faf8f4);
  border: 1px solid rgba(92,61,46,0.10);
  box-shadow: 0 2px 8px rgba(60,40,15,0.08), 0 1px 0 rgba(60,40,15,0.06);
  display: flex; flex-direction: column; overflow: hidden;
}
.pcard-frame { aspect-ratio: 4 / 5; overflow: hidden; background: #e9e1d2; }
.pcard-frame img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* Every portrait reads in the same register, as on the homepage vestry. */
  filter: grayscale(1) contrast(1.06) brightness(0.94);
}
.pcard-body { padding: 18px 20px 22px; }
.pcard-body h3 {
  font-family: 'EB Garamond', Garamond, serif; font-size: 21px; font-weight: 500;
  color: var(--charcoal, #2a2a2a); line-height: 1.2; margin: 0 0 4px;
}
.pcard-role {
  display: block; font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-text, #7a6320);
}
.pcard-body p {
  margin-top: 12px; font-family: 'Jost', sans-serif; font-size: 13.5px; font-weight: 300;
  line-height: 1.65; color: var(--text-body, #3d3530);
}
@media (max-width: 640px) {
  .pcard-section { padding: 0 20px; }
  .pcard-grid, .pcard-grid--wide { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 22px 16px; }
  .pcard-body { padding: 14px 15px 18px; }
  .pcard-body h3 { font-size: 18px; }
}

/* All portraits site-wide share the greyscale treatment. */
.portrait-frame img { filter: grayscale(1) contrast(1.06) brightness(0.94); }

/* The vestry explainer sits above the portraits and reads as prose, not as a
   section header, so its heading and body take the body measure. */
.vestry-intro { margin-top: 48px; }
.vestry-intro h2 { margin-bottom: 14px; }
.vestry-intro p {
  font-family: 'EB Garamond', Garamond, serif; font-size: 18px; line-height: 1.7;
  color: var(--text-body, #3d3530);
}


/* ===== Readability floor to 1024px =====
   Extends the phone floor up through iPad landscape: every letterspaced
   micro-label sits at 11px minimum. Desktop above 1024px keeps the tighter
   label scale the design was drawn at. */
@media (max-width: 1024px) {
  .hir-rule-label, .vcol-tag, .program-card-tag, .resource-tag,
  .asch-note, .year-label, .clergy-card .role, .staff-card .role, .v-term,
  .event-date .month, .event-date .dow, .signup-cta, .vcol-count-badge, .vcol-cta,
  .footer-contact-label, .footer-col h3, .footer-col h4,
  .video-section__kicker span, .give-method a,
  .announcement .asch-note, .about-image-badge .year-label,
  .vestry-card .v-term, .record-tag, .modal-card label,
  .cal-ev, .cal-ev .t, .ht-actions a span:last-child { font-size: 11px; }
}
/* The horizontal nav band is the densest label row; trim the tracking a little
   so 11px still fits on one line. Scoped above 900px so it cannot shrink the
   drawer's own link sizes. */
@media (min-width: 901px) and (max-width: 1024px) {
  nav#mainNav .nav-links a, nav .nav-links a { font-size: 11px; letter-spacing: 0.1em; }
}

/* ===== 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%; }

/* Same scale, matched to the two-class selectors these pages already use, which
   outrank the single-class rule above. */
.invitation .cta, .aux .cta, .closing .cta, .legacy-bar .cta,
.phone-bar .call, .actions a, .actions button, .contact-card .phone,
.invitation .btn, .form-card .send {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  line-height: 1;
  min-height: 44px;
}


/* ===== 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) {
  section.hero { background: radial-gradient(72% 80% at 50% 48%, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.40) 44%, rgba(0,0,0,0) 82%), linear-gradient(to top, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 22%), 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; }
  html[data-season="advent"] section.hero { background: radial-gradient(72% 80% at 50% 48%, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.40) 44%, rgba(0,0,0,0) 82%), linear-gradient(to top, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 22%), 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"] section.hero { background: radial-gradient(72% 80% at 50% 48%, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.40) 44%, rgba(0,0,0,0) 82%), linear-gradient(to top, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 22%), 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"] section.hero { background: radial-gradient(72% 80% at 50% 48%, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.40) 44%, rgba(0,0,0,0) 82%), linear-gradient(to top, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 22%), 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"] section.hero { background: radial-gradient(72% 80% at 50% 48%, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.40) 44%, rgba(0,0,0,0) 82%), linear-gradient(to top, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 22%), 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"] section.hero { background: radial-gradient(72% 80% at 50% 48%, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.40) 44%, rgba(0,0,0,0) 82%), linear-gradient(to top, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 22%), 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"] section.hero { background: radial-gradient(72% 80% at 50% 48%, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.40) 44%, rgba(0,0,0,0) 82%), linear-gradient(to top, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 22%), 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"] section.hero { background: radial-gradient(72% 80% at 50% 48%, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.40) 44%, rgba(0,0,0,0) 82%), linear-gradient(to top, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 22%), 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; }
  html[data-season="trinity"] section.hero { background: radial-gradient(72% 80% at 50% 48%, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.40) 44%, rgba(0,0,0,0) 82%), linear-gradient(to top, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 22%), 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) {
  section.hero { background: radial-gradient(72% 80% at 50% 48%, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.40) 44%, rgba(0,0,0,0) 82%), linear-gradient(to top, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 22%), 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; }
  html[data-season="advent"] section.hero { background: radial-gradient(72% 80% at 50% 48%, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.40) 44%, rgba(0,0,0,0) 82%), linear-gradient(to top, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 22%), 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"] section.hero { background: radial-gradient(72% 80% at 50% 48%, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.40) 44%, rgba(0,0,0,0) 82%), linear-gradient(to top, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 22%), 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"] section.hero { background: radial-gradient(72% 80% at 50% 48%, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.40) 44%, rgba(0,0,0,0) 82%), linear-gradient(to top, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 22%), 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"] section.hero { background: radial-gradient(72% 80% at 50% 48%, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.40) 44%, rgba(0,0,0,0) 82%), linear-gradient(to top, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 22%), 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"] section.hero { background: radial-gradient(72% 80% at 50% 48%, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.40) 44%, rgba(0,0,0,0) 82%), linear-gradient(to top, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 22%), 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"] section.hero { background: radial-gradient(72% 80% at 50% 48%, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.40) 44%, rgba(0,0,0,0) 82%), linear-gradient(to top, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 22%), 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"] section.hero { background: radial-gradient(72% 80% at 50% 48%, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.40) 44%, rgba(0,0,0,0) 82%), linear-gradient(to top, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 22%), 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; }
  html[data-season="trinity"] section.hero { background: radial-gradient(72% 80% at 50% 48%, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.40) 44%, rgba(0,0,0,0) 82%), linear-gradient(to top, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 22%), 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; }
}

/* Confirmation / error line the form runtime writes after a submission. */
.form-status {
  margin-top: 14px;
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
.form-status[data-kind="ok"]    { color: #2f6b46; }
.form-status[data-kind="warn"]  { color: #7a6320; }
.form-status[data-kind="error"] { color: #8c3b2e; }

/* ===== Footer bottom on phones =====
   Three blocks sat in a nowrap flex row inside about 315px, so the copyright
   and the policy links each wrapped to three ragged lines either side of the
   credit. They stack instead, left-aligned with the rest of the mobile footer. */
@media (max-width: 900px) {
  .footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 18px;
    text-align: left;
  }
  .footer-bottom > * { width: 100%; }
  .footer-bottom .footer-esque { justify-content: flex-start; }
}

/* ===== Narrow-phone nav =====
   The wordmark's cap reserved 104px for the menu button, but the button is 86px
   plus a 16px gap and 20px of nav padding: 122px. At 320px the enlarged
   wordmark filled its cap and pushed the burger 18px off-screen. Reserve the
   real width, and below 380px drop the "Menu" word so the wordmark still fits
   without being truncated. The button keeps its aria-label and 44px target. */
@media (max-width: 900px) {
  nav#mainNav .nav-mark { max-width: calc(100vw - 130px) !important; }
}
/* Only the very narrowest phones lose the word; at 360px and up there is room
   for it beside the wordmark. */
@media (max-width: 359px) {
  nav#mainNav .nav-toggle-label { display: none !important; }
  nav#mainNav .nav-mark { max-width: calc(100vw - 86px) !important; }
}
/* The burger is the entire navigation on a phone; give it a full 44px target. */
@media (max-width: 900px) {
  nav#mainNav .nav-toggle { min-height: 44px !important; }
}

/* Dropdown descriptor readability: same spec as the four self-chromed pages
   (home, members, adult-ed, time-and-talent), which carry this rule inline. */
.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; } }

/* ===== 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;
}

/* Honor reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Scrolled nav: the vellum high-contrast treatment, same spec as the four
   self-chromed pages (home, members, adult-ed, time-and-talent) carry inline,
   so scrolling reads identically on every page of the site. */
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;
}

/* Scrolled state keeps the seasonal text tones (overrides the vellum link
   color above), matching the home page's final revision exactly. */
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;
}

/* 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;
}

/* ===== Mobile drawer legibility =====
   The drawer paints a dark panel, but a later global rule was repainting its
   submenu links charcoal, so they were nearly invisible against it. Sizes were
   also below the point where they read comfortably on a phone. This block sits
   last on purpose: the rules it corrects are themselves !important. */
@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; }
}