*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --cream: #f7f3ee;
    --ivory: #faf8f4;
    --warm-brown: #5c3d2e;
    --anchor: #2e253b;            /* Deep Aubergine, primary anchor */
    --dark-green: var(--anchor);  /* legacy alias; do not introduce new uses */
    --gold: #c9a84c;
    --gold-text: #7a6320; /* gold that clears 4.5:1 on light grounds */
    --gold-light: #e8c97a;
    /* Gold emboss, stronger this round: clearly visible top highlight,
       warm-brown bottom shadow, soft outer drop. The gold reads as
       pressed-into-the-page rather than painted on top. */
    --gold-emboss-image: linear-gradient(180deg, rgba(255,250,225,0.38) 0%, rgba(255,250,225,0.10) 28%, rgba(255,250,225,0.00) 52%, rgba(70,50,20,0.06) 78%, rgba(70,50,20,0.16) 100%);
    --gold-emboss-shadow: inset 0 1.5px 0 rgba(255,250,225,0.65), inset 0 -1.5px 0 rgba(70,50,20,0.45), inset 0 0 0 1px rgba(70,50,20,0.10), 0 2px 5px rgba(40,30,15,0.24), 0 1px 2px rgba(40,30,15,0.16);
    /* Dimensional shadows for cards and text */
    --card-shadow: 0 2px 8px rgba(60,40,15,0.08), 0 1px 0 rgba(60,40,15,0.06);
    --card-shadow-hover: 0 4px 14px rgba(60,40,15,0.14), 0 1px 0 rgba(60,40,15,0.06);
    /* Embossed gold text, foil-stamped feel for gold-colored type. */
    --gold-text-emboss: 0 -1px 0 rgba(255,250,225,0.55), 0 1px 1px rgba(80,55,20,0.38), 0 2px 3px rgba(60,40,15,0.20);
    --gold-text-emboss-dark: 0 -1px 0 rgba(255,250,225,0.42), 0 2px 3px rgba(0,0,0,0.55);
    /* Embossed icons (SVG filter) and lines (box-shadow). */
    --gold-icon-emboss: drop-shadow(0 -0.5px 0 rgba(255,250,225,0.50)) drop-shadow(0 1px 0 rgba(80,55,20,0.40)) drop-shadow(0 2px 1.5px rgba(60,40,15,0.22));
    --gold-line-emboss: 0 -1px 0 rgba(255,250,225,0.55), 0 1px 1px rgba(80,55,20,0.35), 0 2px 2px rgba(60,40,15,0.14);
    --stone: #8b7d6b;
    --charcoal: #2a2a2a;
    --text-body: #3d3530;
    --text-light: #6b6157;
    --white: #ffffff;
  }

  /* Gilt, subtle emboss on every gold surface. A soft top highlight,
     a warm-brown bottom inner-shadow, and a 1px outer micro-shadow make
     the gold read as pressed into the page rather than painted on top. */
  .gilt,
  .btn-primary,
  .give-btn,
  .gss-cta,
  .prayer-submit,
  .primary-card-cta,
  .visit-cta:not(.outline),
  .enews-form button,
  .hero-search-bar button,
  .hero-search button {
    background-image: var(--gold-emboss-image) !important;
    box-shadow: var(--gold-emboss-shadow) !important;
  }

  html { scroll-behavior: smooth; }

  body {
    font-family: 'Jost', sans-serif;
    background: var(--ivory);
    color: var(--text-body);
    overflow-x: hidden;
    /* Letterpress emboss, body text reads as gently pressed into the page. */
    text-shadow: 0 1px 0 rgba(255,255,255,0.55);
  }

  /* Reversed text on dark surfaces: dark drop-shadow so light text feels
     lifted from the surface rather than printed on it. */
  .hero,
  .hero *,
  .visit-primary,
  .visit-primary *,
  .community-section,
  .community-section *,
  .vestry-section,
  .vestry-section *,
  .give-stewardship-strip,
  .give-stewardship-strip *,
  .latest-sermon-band,
  .latest-sermon-band *,
  .service-card--primary,
  .service-card--primary *,
  .contact-footer,
  .contact-footer *,
  .video-section,
  .video-section *,
  .quote-banner,
  .quote-banner * {
    text-shadow: 0 1px 2px rgba(0,0,0,0.32);
  }

  /* Cards and panels get a subtle dimensional shadow so the page reads
     as layered physical paper rather than flat surfaces. */
  .service-card,
  .program-card,
  .resource-card,
  .connect-card,
  .record-card,
  .visit-card,
  .belief-card,
  .lifeevent-card,
  .give-method,
  .clergy-card,
  .staff-card,
  .vestry-card,
  .vcol-card,
  .lectionary-widget,
  .announcement,
  .office-wrap {
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.25s, transform 0.25s;
  }
  .service-card:hover,
  .program-card:hover,
  .resource-card:hover,
  .connect-card:hover,
  .record-card:hover,
  .visit-card:hover,
  .belief-card:hover,
  .lifeevent-card:hover,
  .give-method:hover {
    box-shadow: var(--card-shadow-hover);
  }

  /* Display headings get a slightly more present text-shadow so the
     serif type reads as inked into the page. */
  h1, h2, h3, .section-title, .gl-title, .visit-times .vt-service,
  .ed-body h4 {
    text-shadow: 0 1px 1px rgba(60,40,15,0.10);
  }

  /* Embossed gold text, applied ONLY to large display-size gold type
     (chapter numerals and italic display em's). Small gold text (labels,
     eyebrows, tags, CTAs, cite blocks) reads better without the shadow. */
  .gilt-text,
  .ed-numeral,
  .belief-num,
  .ia-bucket-num {
    text-shadow: var(--gold-text-emboss);
  }

  /* Same treatment for gold-light text on dark surfaces, only the large
     italic display em's in the hero headline, the primary worship card,
     and the Video Collections title. */
  .ht-day em,
  .service-card--primary h3 em,
  .video-section__title em {
    text-shadow: var(--gold-text-emboss-dark);
  }

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

  /* ===== HERO ===== */
  .hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 140px 8% 80px;
    overflow: hidden;
  }
  @media (max-width: 760px) {
    .hero { padding: 110px 8% 60px; min-height: auto; }
  }

  /* Discreet design-partner mark, upper-right of hero. Scrolls away with hero. */
  .hero-credit {
    position: absolute;
    top: 116px;
    right: 8%;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    opacity: 0.55;
    transition: opacity 0.25s ease;
  }
  .hero-credit:hover { opacity: 0.95; }
  .hero-credit img {
    height: 18px;
    width: auto;
    display: block;
  }
  .hero-credit span {
    font-family: 'EB Garamond', Garamond, serif;
    font-style: italic;
    font-weight: 300;
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    letter-spacing: 0.04em;
    border-left: 1px solid rgba(255,255,255,0.25);
    padding-left: 10px;
  }
  @media (max-width: 760px) {
    .hero-credit { top: 76px; right: 22px; }
    .hero-credit span { display: none; }
    .hero-credit img { height: 14px; }
  }

  .hero-bg {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(135deg, rgba(30,50,30,0.55) 0%, rgba(80,50,30,0.3) 60%, transparent 100%),
      url('https://images.unsplash.com/photo-1438032005730-c779502df39b?w=2400&q=85') center/cover no-repeat;
    transform-origin: center;
    filter: sepia(0.18) saturate(0.92) brightness(0.92) contrast(1.05);
    animation: slowZoom 20s ease-in-out infinite alternate;
  }
  @keyframes slowZoom {
    from { transform: scale(1); }
    to   { transform: scale(1.06); }
  }

  .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.35) 100%);
  }

  .hero-content {
    position: relative;
    z-index: 2;
    max-width: 780px;
  }

  .hero-eyebrow {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--gold-light);
    margin-bottom: 20px;
    opacity: 0;
    animation: fadeUp 0.9s 0.3s forwards;
  }

  .hero-headline {
    font-family: 'EB Garamond', Garamond, serif;
    font-weight: 300;
    font-size: clamp(48px, 6.5vw, 88px);
    line-height: 1.05;
    color: var(--white);
    margin-bottom: 40px;
    opacity: 0;
    animation: fadeUp 1s 0.5s forwards;
  }
  .hero-headline em {
    font-style: italic;
    color: var(--gold-light);
  }

  /* .hero-search replaced by .hero-search-system */

  /* ── Rotating placeholder animation ── */
  .hero-search input::placeholder {
    color: transparent; /* handled by JS-driven fake placeholder */
  }
  .hero-placeholder-wrap {
    position: relative;
    flex: 1;
  }
  #heroSearchInput {
    width: 100%;
    caret-color: var(--warm-brown);
  }
  /* Fake animated placeholder sits behind the input */
  #heroPlaceholder {
    position: absolute;
    top: 50%;
    left: 24px;
    transform: translateY(-50%);
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: var(--stone);
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    letter-spacing: 0.02em;
    /* clip text as it types */
    width: 0;
    transition: opacity 0.3s ease;
  }
  #heroPlaceholder.is-deleting {
    /* no transition during erase, handled by JS */
  }
  /* Hide fake placeholder when user is typing */
  #heroSearchInput:not(:placeholder-shown) + #heroPlaceholder,
  #heroSearchInput:focus:not([value=""]) + #heroPlaceholder {
    opacity: 0;
  }
  .hero-search button {
    padding: 16px 28px;
    background: var(--gold);
    border: none;
    color: var(--white);
    font-family: 'Jost', sans-serif;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 0 2px 2px 0;
    transition: background 0.2s;
  }
  .hero-search button:hover { background: var(--warm-brown); }

  .hero-scroll-hint {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0;
    animation: fadeIn 1s 1.4s forwards;
  }
  .scroll-line {
    width: 1px;
    height: 48px;
    background: rgba(255,255,255,0.4);
    animation: drawLine 1.5s 1.8s ease-in-out infinite;
  }
  @keyframes drawLine {
    0%, 100% { opacity: 0.3; transform: scaleY(1); }
    50% { opacity: 0.8; transform: scaleY(0.5) translateY(24px); }
  }

  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes fadeIn {
    to { opacity: 1; }
  }

  /* ===== ANNOUNCEMENT STRIP ===== */
  .announcement {
    background: var(--anchor);
    color: rgba(255,255,255,0.85);
    text-align: center;
    padding: 14px 20px;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.08em;
  }
  .announcement strong {
    color: var(--gold-light);
    font-weight: 500;
  }
  .announcement a {
    color: var(--gold-light);
    text-decoration: underline;
    text-decoration-thickness: 1px;
  }

  /* ===== SECTION UTILS ===== */
  section { padding: 96px 8%; }
  .section-label {
    font-size: 10.5px;
    font-weight: 300;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 14px;
    display: block;
  }
  .section-title {
    font-family: 'EB Garamond', Garamond, serif;
    font-weight: 400;
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1.1;
    color: var(--charcoal);
    margin-bottom: 24px;
  }
  .section-title em { font-style: italic; color: var(--warm-brown); }
  .section-subtitle {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.8;
    color: var(--text-light);
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
  .divider {
    width: 48px;
    height: 1px;
    background: var(--gold);
    margin: 28px 0;
  }

  /* ===== SERVICES GRID ===== */
  .services-section { background: var(--cream); }
  .services-header { margin-bottom: 60px; }
  .services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
  }
  .service-card {
    background: var(--white);
    padding: 48px 36px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s;
  }
  .service-card::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    height: 3px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s;
  }
  .service-card:hover { transform: translateY(-4px); }
  .service-card:hover::before { transform: scaleX(1); }
  .service-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 24px;
    color: var(--gold); /* SVGs use stroke="currentColor" so this gilds them */
    opacity: 0.95;
    filter: var(--gold-icon-emboss);
  }

  /* Embossed icons across all gold SVG marks */
  .give-method-icon,
  .lifeevent-card svg,
  .vcol-card svg {
    filter: var(--gold-icon-emboss);
  }

  /* Embossed line-work, short gold rules and accent bars get the same
     foil-stamp feel as the icons and text. */
  .divider,
  .resource-card::before,
  .connect-card::before,
  .visit-card::before,
  .demo-card::before {
    box-shadow: var(--gold-line-emboss);
  }
  .service-card h3 {
    font-family: 'EB Garamond', Garamond, serif;
    font-weight: 500;
    font-size: 22px;
    color: var(--charcoal);
    margin-bottom: 12px;
  }
  .service-card p {
    font-size: 13.5px;
    font-weight: 300;
    line-height: 1.75;
    color: var(--text-light);
  }
  .service-time {
    display: inline-block;
    margin-top: 20px;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-text);
    font-weight: 400;
  }

  /* ===== ABOUT SPLIT ===== */
  .about-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    padding: 96px 8%;
  }
  .about-image-wrap {
    position: relative;
  }
  .about-image-wrap img {
    width: 100%;
    height: 580px;
    object-fit: cover;
    display: block;
  }
  .about-image-badge {
    position: absolute;
    bottom: -24px; right: -24px;
    background: var(--anchor);
    color: var(--white);
    padding: 28px 32px;
    text-align: center;
  }
  .about-image-badge .year {
    font-family: 'EB Garamond', Garamond, serif;
    font-size: 42px;
    font-weight: 300;
    color: var(--gold-light);
    display: block;
  }
  .about-image-badge .year-label {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.7;
    display: block;
    margin-top: 4px;
  }
  .about-text { padding-bottom: 24px; }
  .about-text p {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.85;
    color: var(--text-body);
    margin-bottom: 20px;
  }
  .btn-outline {
    display: inline-block;
    margin-top: 12px;
    padding: 13px 32px;
    border: 1px solid var(--warm-brown);
    color: var(--warm-brown);
    text-decoration: none;
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: background 0.25s, color 0.25s;
  }
  .btn-outline:hover { background: var(--warm-brown); color: var(--white); }

  /* ===== QUOTE BANNER ===== */
  .quote-banner {
    background: var(--anchor);
    padding: 80px 10%;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .quote-banner::before {
    content: '"';
    position: absolute;
    top: -40px; left: 6%;
    font-family: 'EB Garamond', Garamond, serif;
    font-size: 280px;
    font-weight: 300;
    color: rgba(255,255,255,0.04);
    line-height: 1;
  }
  .quote-banner blockquote {
    font-family: 'EB Garamond', Garamond, serif;
    font-weight: 300;
    font-style: italic;
    font-size: clamp(26px, 3.5vw, 42px);
    line-height: 1.45;
    color: var(--white);
    max-width: 820px;
    margin: 0 auto 20px;
  }
  .quote-banner cite {
    font-size: 11px;
    font-style: normal;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
  }

  /* ===== PROGRAMS ===== */
  .programs-section { background: var(--cream); }
  .programs-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 56px; }
  .programs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
  .program-card {
    background: var(--white);
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
  }
  .program-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,0.1); }
  .program-card-img {
    height: 200px;
    background-size: cover;
    background-position: center;
    position: relative;
  }
  .program-card-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(135deg, rgba(45,59,47,0.40) 0%, transparent 55%),
      linear-gradient(to bottom, transparent 35%, rgba(26,22,16,0.72) 100%);
  }
  .program-card-body { padding: 28px 24px 32px; }
  .program-card-tag {
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold-text);
    font-weight: 400;
    display: block;
    margin-bottom: 8px;
  }
  .program-card h2,
  .program-card h3 {
    font-family: 'EB Garamond', Garamond, serif;
    font-size: 20px;
    font-weight: 500;
    color: var(--charcoal);
    margin-bottom: 10px;
    line-height: 1.25;
  }
  .program-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding: 12px 22px;
    background: var(--gold);
    color: var(--anchor);
    border: 1px solid var(--gold);
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    align-self: flex-start;
    transition: background 0.2s, border-color 0.2s;
  }
  .program-card-cta:hover { background: var(--gold-light); border-color: var(--gold-light); }
  .program-card-body > *:not(.program-card-cta):last-of-type { margin-bottom: 26px; }
  .program-card p {
    font-size: 13px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--text-light);
  }

  /* ===== CLERGY ===== */
  .clergy-section { padding: 96px 8%; }
  /* ═══════════════════════════════════════════
     PORTRAIT CARD SYSTEM
     Used by: Clergy, Staff, Vestry
     ─ consistent 3:4 portrait ratio
     ─ object-fit cover, face-anchored top
     ─ graceful SVG placeholder fallback
     ═══════════════════════════════════════════ */

  /* Shared portrait frame, 3:4 aspect ratio */
  .portrait-frame {
    position: relative;
    width: 100%;
    padding-bottom: 120%;   /* 3:4 portrait ratio */
    overflow: hidden;
    background: var(--cream);
  }
  .portrait-frame img,
  .portrait-frame .portrait-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }
  .portrait-frame .portrait-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ── CLERGY SECTION ── */
  .clergy-section { padding: 96px 8%; background: var(--ivory); }
  .clergy-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-top: 52px;
    max-width: 860px;
  }
  .clergy-card {
    background: var(--white);
    overflow: hidden;
    box-shadow: 0 2px 24px rgba(0,0,0,0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .clergy-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.1);
  }
  /* Gold top accent on clergy */
  .clergy-card::before {
    content: '';
    display: block;
    height: 3px;
    background: var(--gold);
  }
  .clergy-card__body {
    padding: 24px 28px 32px;
  }
  .clergy-card h3 {
    font-family: 'EB Garamond', Garamond, serif;
    font-size: 24px;
    font-weight: 500;
    color: var(--charcoal);
    margin-bottom: 5px;
    line-height: 1.15;
  }
  .clergy-card .role {
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-text);
    font-weight: 400;
    display: block;
    margin-bottom: 14px;
  }
  .clergy-card p {
    font-size: 13.5px;
    font-weight: 300;
    line-height: 1.78;
    color: var(--text-light);
  }

  /* ── STAFF SECTION ── */
  .staff-subheading {
    font-family: 'EB Garamond', Garamond, serif;
    font-size: 28px;
    font-weight: 400;
    color: var(--charcoal);
    margin: 72px 0 0;
    letter-spacing: -0.01em;
  }
  .staff-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 28px;
  }
  .staff-card {
    background: var(--white);
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .staff-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(0,0,0,0.09);
  }
  .staff-card::before {
    content: '';
    display: block;
    height: 2px;
    background: var(--gold);
  }
  .staff-card__body {
    padding: 18px 20px 22px;
  }
  .staff-card h4 {
    font-family: 'EB Garamond', Garamond, serif;
    font-size: 19px;
    font-weight: 500;
    color: var(--charcoal);
    margin-bottom: 4px;
    line-height: 1.2;
  }
  .staff-card .role {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-text);
    font-weight: 400;
    display: block;
    line-height: 1.5;
  }

  /* ── VESTRY SECTION ── */
  .vestry-section {
    background: var(--anchor);
    padding: 96px 8%;
  }
  .vestry-section .section-label { color: var(--gold-light); }
  .vestry-section .section-title { color: var(--white); }
  .vestry-section .section-title em { color: var(--gold-light); }
  .vestry-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-top: 52px;
  }
  .vestry-card {
    background: rgba(255,255,255,0.04);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.07);
    transition: background 0.25s, border-color 0.25s, transform 0.25s;
  }
  .vestry-card:hover {
    background: rgba(255,255,255,0.08);
    border-color: var(--gold);
    transform: translateY(-3px);
  }
  /* Portrait frame dark variant */
  .vestry-card .portrait-frame {
    padding-bottom: 110%;   /* slightly wider ratio for vestry grid density */
    background: rgba(0,0,0,0.25);
  }
  .vestry-card__body {
    padding: 14px 16px 18px;
  }
  .vestry-card .v-name {
    font-family: 'EB Garamond', Garamond, serif;
    font-size: 16px;
    font-weight: 500;
    color: var(--white);
    display: block;
    margin-bottom: 3px;
    line-height: 1.2;
  }
  .vestry-card .v-term {
    font-size: 9.5px;
    letter-spacing: 0.14em;
    color: var(--gold);
    text-transform: uppercase;
    display: block;
    margin-bottom: 5px;
  }
  .vestry-card .v-roles {
    font-size: 11.5px;
    font-weight: 300;
    color: rgba(255,255,255,0.48);
    line-height: 1.45;
  }

  /* ===== COMMUNITY / EVENTS ===== */
  .community-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .community-left {
    background: var(--charcoal);
    padding: 80px 64px;
    color: var(--white);
  }
  .community-left .section-title { color: var(--white); }
  .community-left .section-subtitle { color: rgba(255,255,255,0.6); max-width: 100%; }
  .community-right {
    background: var(--anchor);
    padding: 80px 64px;
  }
  .event-list { list-style: none; margin-top: 32px; }
  .event-item {
    display: flex;
    gap: 24px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .event-item:last-child { border-bottom: none; }
  .event-date {
    min-width: 52px;
    text-align: center;
  }
  .event-date .month {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    display: block;
  }
  .event-date .day {
    font-family: 'EB Garamond', Garamond, serif;
    font-size: 34px;
    font-weight: 300;
    color: var(--white);
    line-height: 1;
  }
  .event-info h4 {
    font-family: 'EB Garamond', Garamond, serif;
    font-size: 18px;
    font-weight: 500;
    color: var(--white);
    margin-bottom: 4px;
  }
  .event-info p {
    font-size: 12.5px;
    font-weight: 300;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.03em;
  }

  /* ===== GIVE SECTION ===== */
  .give-section {
    background: var(--cream);
    text-align: center;
    padding: 100px 8%;
  }
  .give-section .section-title { margin: 0 auto 20px; max-width: 600px; }
  .give-section .section-subtitle { margin: 0 auto 40px; text-align: center; }
  .give-btn {
    display: inline-block;
    padding: 18px 52px;
    background: var(--gold);
    color: var(--white);
    text-decoration: none;
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    transition: background 0.25s;
  }
  .give-btn:hover { background: var(--warm-brown); }

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

  /* ===== RESPONSIVE ===== */
  @media (max-width: 1200px) {
    .vestry-grid { grid-template-columns: repeat(4, 1fr); }
  }
  @media (max-width: 960px) {
    .services-grid, .programs-grid { grid-template-columns: 1fr 1fr; }
    .clergy-grid { grid-template-columns: 1fr 1fr; }
    .staff-grid { grid-template-columns: 1fr 1fr; }
    .vestry-grid { grid-template-columns: repeat(3, 1fr); }
    .about-section { grid-template-columns: 1fr; }
    .community-section { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 640px) {
    .nav-links { gap: 16px; }
    .nav-links a { font-size: 9.5px; letter-spacing: 0.12em; }
    .services-grid, .programs-grid { grid-template-columns: 1fr; }
    .clergy-grid { grid-template-columns: 1fr; max-width: 400px; }
    .staff-grid { grid-template-columns: 1fr 1fr; }
    .vestry-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr; }
    section { padding: 64px 6%; }
  }

  /* ═══════════════════════════════════
     SCD PARTNER PROGRAM CARD
     Full-width, links to thescd.org
     ═══════════════════════════════════ */
  .program-card--scd {
    grid-column: 1 / -1;
    background: #ffffff;
    border-radius: var(--radius, 8px);
    text-decoration: none;
    overflow: hidden;
    position: relative;
    border: 1px solid #e8dfd0;
    transition: transform 0.35s cubic-bezier(0.22,1,0.36,1),
                box-shadow 0.35s ease;
    cursor: pointer;
    display: block;
  }
  /* Subtle warm beige wash, bottom-right warmth */
  .program-card--scd::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse at 90% 100%, rgba(232,215,176,0.35) 0%, transparent 55%),
      radial-gradient(ellipse at 5% 0%, rgba(45,59,47,0.04) 0%, transparent 45%);
    pointer-events: none;
  }
  /* Dark green top bar */
  .program-card--scd::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(to right, var(--anchor), #4a6b50, var(--anchor));
  }
  .program-card--scd:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 56px rgba(45,59,47,0.12);
    background: #faf8f3;
  }

  .program-card--scd__inner {
    display: grid;
    grid-template-columns: 200px 1fr auto;
    align-items: center;
    gap: 48px;
    padding: 40px 48px;
    position: relative;
    z-index: 1;
  }

  /* Left: four pillars, dark green italic */
  .scd-pillars {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-right: 1px solid #d8cfc0;
    padding-right: 48px;
  }
  .scd-pillars span {
    font-family: 'EB Garamond', Garamond, serif;
    font-size: 19px;
    font-style: italic;
    font-weight: 400;
    color: #5a7a60;            /* medium forest green */
    letter-spacing: 0.04em;
    transition: color 0.25s;
    line-height: 1.35;
  }
  .program-card--scd:hover .scd-pillars span { color: var(--anchor); }
  .scd-pillars span:nth-child(1) { transition-delay: 0.00s; }
  .scd-pillars span:nth-child(2) { transition-delay: 0.04s; }
  .scd-pillars span:nth-child(3) { transition-delay: 0.08s; }
  .scd-pillars span:nth-child(4) { transition-delay: 0.12s; }

  /* Center: content */
  .scd-content { }
  .scd-title {
    font-family: 'EB Garamond', Garamond, serif;
    font-size: clamp(26px, 2.8vw, 38px);
    font-weight: 500;
    color: var(--anchor);   /* deep forest green headline */
    line-height: 1.1;
    margin-bottom: 16px;
    letter-spacing: -0.01em;
  }
  .scd-title em {
    font-style: italic;
    color: var(--gold);         /* warm gold italic accent */
  }
  .scd-desc {
    font-size: 14.5px;
    font-weight: 300;
    line-height: 1.78;
    color: #4a5e4d;             /* dark green body text */
    max-width: 560px;
  }

  /* Right: CTA */
  .scd-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
  }
  .scd-arrow {
    display: flex;
    transition: transform 0.3s ease;
  }
  .program-card--scd:hover .scd-arrow {
    transform: translateX(6px);
  }
  .scd-arrow circle {
    stroke: #b5c4b8 !important;   /* soft sage green ring at rest */
    transition: stroke 0.25s;
  }
  .program-card--scd:hover .scd-arrow circle {
    stroke: var(--anchor) !important;
  }
  .scd-arrow path {
    stroke: var(--anchor);
  }
  .scd-visit {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #8aaa8e;             /* sage green label */
    white-space: nowrap;
    transition: color 0.25s;
  }
  .program-card--scd:hover .scd-visit { color: var(--anchor); }

  /* Partner tag */
  .program-card--scd .program-card-tag {
    border-color: #b5c4b8 !important;
    color: #5a7a60 !important;
  }

  /* Responsive */
  @media (max-width: 860px) {
    .program-card--scd__inner {
      grid-template-columns: 1fr;
      gap: 28px;
      padding: 32px 28px;
    }
    .scd-pillars {
      flex-direction: row;
      flex-wrap: wrap;
      gap: 8px 20px;
      border-right: none;
      border-bottom: 1px solid rgba(255,255,255,0.1);
      padding-right: 0;
      padding-bottom: 20px;
    }
    .scd-cta { flex-direction: row; justify-content: flex-start; }
  }

  /* ═══════════════════════════════════════════════════════
     HERO SEARCH SYSTEM v2, inline hero results
     ═══════════════════════════════════════════════════════ */

  .hero-search-system {
    position: relative;
    max-width: 660px;
    width: 100%;
    opacity: 0;
    animation: fadeUp 1s 0.8s forwards;
  }

  /* ── Bar ── */
  .hero-search-bar {
    display: flex;
    width: 100%;
    position: relative;
    z-index: 10;
  }
  .hero-placeholder-wrap { position: relative; flex: 1; }

  #heroSearchInput {
    width: 100%;
    padding: 18px 26px;
    background: rgba(255,255,255,0.10);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.22);
    border-right: none;
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 15px;
    letter-spacing: 0.02em;
    color: #fff;
    outline: none;
    border-radius: 2px 0 0 2px;
    caret-color: var(--gold-light);
    transition: background .25s, border-color .25s;
  }
  #heroSearchInput:focus {
    background: rgba(255,255,255,0.16);
    border-color: rgba(201,168,76,0.55);
  }
  #heroSearchInput::placeholder { color: transparent; }

  #heroPlaceholder {
    position: absolute;
    top: 50%; left: 26px;
    transform: translateY(-50%);
    font-family: 'Jost', sans-serif;
    font-size: 15px;
    font-weight: 300;
    color: rgba(255,255,255,0.48);
    pointer-events: none;
    white-space: nowrap;
    letter-spacing: 0.02em;
    transition: opacity .2s;
  }
  #heroPlaceholder.hidden { opacity: 0 !important; }
  /* blinking cursor */
  #heroPlaceholder::after {
    content: '|';
    color: var(--gold-light);
    opacity: 1;
    animation: cur 1s step-end infinite;
    margin-left: 1px;
  }
  @keyframes cur { 0%,100%{opacity:1} 50%{opacity:0} }

  .hero-search-bar button {
    padding: 18px 28px;
    background: var(--gold);
    border: 1px solid var(--gold);
    color: #fff;
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 0 2px 2px 0;
    transition: background .25s;
    flex-shrink: 0;
  }
  .hero-search-bar button:hover { background: var(--warm-brown); border-color: var(--warm-brown); }

  /* ── Prompt chips, always visible below bar ── */
  .hero-prompt-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
  }
  .hpc-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 15px;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.72);
    font-family: 'Jost', sans-serif;
    font-size: 12.5px;
    font-weight: 300;
    border-radius: 100px;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s, transform .2s;
    white-space: nowrap;
  }
  .hpc-chip:hover, .hpc-chip.is-active {
    background: rgba(201,168,76,0.18);
    border-color: rgba(201,168,76,0.65);
    color: #fff;
    transform: translateY(-1px);
  }
  .hpc-chip svg {
    width: 11px; height: 11px;
    stroke: currentColor; fill: none;
    stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
    flex-shrink: 0; opacity: .7;
  }

  /* ── Inline results, mount below chips, inside hero viewport ── */
  #heroInlineResults {
    margin-top: 18px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(6px);
    transition: max-height .4s cubic-bezier(.22,1,.36,1),
                opacity .3s ease,
                transform .3s ease;
    pointer-events: none;
  }
  #heroInlineResults.is-open {
    max-height: 440px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
  }

  /* thin ruled divider with centred label */
  .hir-rule {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
  }
  .hir-rule-line {
    flex: 1; height: 1px;
    background: rgba(255,255,255,0.13);
  }
  .hir-rule-label {
    font-size: 9px; font-weight: 500;
    letter-spacing: .24em; text-transform: uppercase;
    color: var(--gold-text);
    white-space: nowrap;
  }

  /* result cards */
  .hir-grid { display: flex; flex-direction: column; gap: 8px; }

  .hir-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 18px;
    background: rgba(15,22,16,0.78);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,0.08);
    border-left: 2px solid var(--gold);
    border-radius: 2px;
    cursor: pointer;
    transition: background .2s, border-left-color .2s, transform .22s;
    position: relative;
    overflow: hidden;
  }
  .hir-card::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(110deg, rgba(201,168,76,.04) 0%, transparent 55%);
    pointer-events: none;
  }
  .hir-card:hover {
    background: rgba(28,40,29,.88);
    border-left-color: var(--gold-light);
    transform: translateX(4px);
  }

  .hir-icon {
    width: 32px; height: 32px; flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid rgba(201,168,76,.28);
    background: rgba(201,168,76,.08);
    display: flex; align-items: center; justify-content: center;
    margin-top: 1px;
  }
  .hir-icon svg {
    width: 14px; height: 14px;
    stroke: var(--gold); fill: none;
    stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  }

  .hir-body { flex: 1; min-width: 0; }
  .hir-cat {
    font-size: 9px; font-weight: 500;
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--gold); display: block; margin-bottom: 1px;
  }
  .hir-title {
    font-family: 'EB Garamond', Garamond, serif;
    font-size: 17px; font-weight: 500;
    color: #f5f0e8; display: block;
    line-height: 1.2; margin-bottom: 3px;
  }
  .hir-snippet {
    font-size: 12px; font-weight: 300;
    color: rgba(255,255,255,.46); line-height: 1.55;
    display: block;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  .hir-arrow {
    width: 16px; height: 16px; flex-shrink: 0; margin-top: 9px;
    opacity: 0; transform: translateX(-4px);
    transition: opacity .18s, transform .18s;
    stroke: var(--gold); fill: none;
    stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  }
  .hir-card:hover .hir-arrow { opacity: 1; transform: translateX(0); }

  .hir-empty {
    padding: 16px 0 4px;
    font-family: 'EB Garamond', Garamond, serif;
    font-size: 18px; font-style: italic;
    color: rgba(255,255,255,.32);
  }

  /* also remove old panel styles that may linger */
  #searchResults, .search-quick-prompts, .search-results-header,
  .search-result-item, .sqp-chip, .search-no-results { display: none !important; }

  @media (max-width: 600px) {
    .hpc-chip { font-size: 11.5px; padding: 6px 12px; }
    #heroSearchInput { font-size: 14px; padding: 15px 18px; }
    .hir-title { font-size: 15px; }
  }


  /* ═══════════════════════════════════════════════════════
     VIDEO COLLECTIONS SECTION
     ═══════════════════════════════════════════════════════ */
  .video-section {
    background: #1a1f1b;
    padding: 88px 0 80px;
    overflow: hidden;
    position: relative;
  }
  .video-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse at 5% 50%, rgba(45,59,47,0.8) 0%, transparent 55%),
      radial-gradient(ellipse at 95% 50%, rgba(45,59,47,0.5) 0%, transparent 45%);
    pointer-events: none;
  }

  /* Header */
  .video-section__head {
    padding: 0 64px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 48px;
    position: relative;
    z-index: 2;
  }
  .video-section__kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
  }
  .video-section__kicker-line {
    width: 32px;
    height: 1px;
    background: var(--gold);
  }
  .video-section__kicker span {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
  }
  .video-section__title {
    font-family: 'EB Garamond', Garamond, serif;
    font-size: clamp(32px, 3.5vw, 52px);
    font-weight: 400;
    color: #f5f0e8;
    line-height: 1.05;
    letter-spacing: -0.02em;
  }
  .video-section__title em {
    font-style: italic;
    color: var(--gold-light);
  }
  .video-section__meta {
    font-size: 12px;
    font-weight: 300;
    color: rgba(255,255,255,0.35);
    letter-spacing: 0.06em;
    margin-top: 8px;
  }
  .video-section__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    margin-bottom: 4px;
  }
  .video-nav-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(201,168,76,0.3);
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, background 0.2s;
    color: rgba(255,255,255,0.6);
  }
  .video-nav-btn:hover {
    border-color: var(--gold);
    background: rgba(201,168,76,0.1);
    color: var(--gold-light);
  }
  .video-nav-btn svg {
    width: 16px; height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .video-yt-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid rgba(201,168,76,0.4);
    color: var(--gold-light);
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 2px;
    transition: background 0.2s, border-color 0.2s;
  }
  .video-yt-link:hover {
    background: rgba(201,168,76,0.1);
    border-color: var(--gold);
  }
  .video-yt-link svg {
    width: 14px; height: 14px;
    fill: currentColor;
    flex-shrink: 0;
  }

  /* Carousel track */
  .video-carousel-wrap {
    position: relative;
    z-index: 2;
  }
  .video-carousel {
    display: flex;
    gap: 20px;
    padding: 4px 64px 32px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
  }
  .video-carousel::-webkit-scrollbar { display: none; }
  .video-carousel.is-dragging { cursor: grabbing; }

  /* Fade edges */
  .video-carousel-wrap::before,
  .video-carousel-wrap::after {
    content: '';
    position: absolute;
    top: 0; bottom: 32px;
    width: 64px;
    z-index: 3;
    pointer-events: none;
  }
  .video-carousel-wrap::before {
    left: 0;
    background: linear-gradient(to right, #1a1f1b, transparent);
  }
  .video-carousel-wrap::after {
    right: 0;
    background: linear-gradient(to left, #1a1f1b, transparent);
  }

  /* Collection card */
  .vcol-card {
    flex: 0 0 300px;
    scroll-snap-align: start;
    background: rgba(45,59,47,0.55);
    border: 1px solid rgba(201,168,76,0.15);
    border-radius: 4px;
    overflow: hidden;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.22,1,0.36,1),
                border-color 0.25s,
                box-shadow 0.3s;
    position: relative;
  }
  .vcol-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--gold), transparent);
    opacity: 0;
    transition: opacity 0.3s;
  }
  .vcol-card:hover {
    transform: translateY(-8px);
    border-color: rgba(201,168,76,0.4);
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
  }
  .vcol-card:hover::before { opacity: 1; }

  /* Thumbnail */
  .vcol-thumb {
    position: relative;
    padding-bottom: 56.25%;  /* 16:9 */
    overflow: hidden;
    background: var(--anchor);
    flex-shrink: 0;
  }
  .vcol-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.22,1,0.36,1);
    display: block;
  }
  .vcol-card:hover .vcol-thumb img { transform: scale(1.06); }
  .vcol-thumb-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(26,31,27,0.75) 0%, transparent 50%);
    z-index: 1;
  }
  .vcol-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background 0.25s, transform 0.25s;
  }
  .vcol-card:hover .vcol-play {
    background: rgba(201,168,76,0.8);
    transform: translate(-50%,-50%) scale(1.12);
  }
  .vcol-play svg {
    width: 16px; height: 16px;
    fill: white;
    margin-left: 2px;
  }
  .vcol-count-badge {
    position: absolute;
    bottom: 10px; right: 10px;
    background: rgba(0,0,0,0.65);
    color: rgba(255,255,255,0.9);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    padding: 3px 8px;
    border-radius: 2px;
    z-index: 2;
  }

  /* Card body */
  .vcol-body {
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 10px;
  }
  .vcol-tag {
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold-text);
  }
  .vcol-name {
    font-family: 'EB Garamond', Garamond, serif;
    font-size: 18px;
    font-weight: 500;
    color: #f0ece3;
    line-height: 1.25;
    letter-spacing: -0.01em;
  }
  .vcol-desc {
    font-size: 12.5px;
    font-weight: 300;
    line-height: 1.7;
    color: rgba(255,255,255,0.42);
    flex: 1;
  }
  .vcol-cta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    margin-top: 4px;
    transition: color 0.2s;
  }
  .vcol-card:hover .vcol-cta { color: var(--gold-light); }
  .vcol-cta svg {
    width: 12px; height: 12px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    transition: transform 0.2s;
  }
  .vcol-card:hover .vcol-cta svg { transform: translateX(3px); }

  /* Scroll progress bar */
  .video-progress-bar {
    height: 1px;
    background: rgba(255,255,255,0.07);
    margin: 0 64px;
    position: relative;
    z-index: 2;
    border-radius: 1px;
  }
  .video-progress-fill {
    height: 100%;
    background: var(--gold);
    border-radius: 1px;
    width: 25%;
    transition: width 0.15s ease;
  }

  /* Mobile */
  @media (max-width: 768px) {
    .video-section__head { padding: 0 24px; flex-direction: column; align-items: flex-start; gap: 20px; }
    .video-carousel { padding: 4px 24px 32px; }
    .video-progress-bar { margin: 0 24px; }
    .vcol-card { flex: 0 0 260px; }
    .video-carousel-wrap::before { width: 24px; }
    .video-carousel-wrap::after { width: 24px; }
  }

  /* ════════════════════════════════════════════════════════════
     APPENDIX A.2 ADDITIONS, content the parish requested that
     was not yet shown in the prototype
  ════════════════════════════════════════════════════════════ */

  /* WORSHIP RESOURCES, bulletins + Those Who Serve */
  .resources-section { padding: 96px 8%; background: var(--ivory); }
  .resources-header { text-align: center; max-width: 720px; margin: 0 auto 56px; }
  .resources-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    max-width: 1200px;
    margin: 0 auto;
  }
  .resource-card {
    background: var(--white);
    border: 1px solid rgba(92,61,46,0.08);
    padding: 44px 44px 36px;
    position: relative;
  }
  .resource-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 40px;
    height: 2px;
    background: var(--gold);
  }
  .resource-tag {
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold-text);
    font-weight: 500;
    display: block;
    margin: 6px 0 18px;
  }
  .resource-card h3 {
    font-family: 'EB Garamond', Garamond, serif;
    font-size: 26px;
    font-weight: 500;
    color: var(--charcoal);
    line-height: 1.2;
    margin-bottom: 14px;
  }
  .resource-card h3 em { font-style: italic; color: var(--warm-brown); }
  .resource-card p {
    font-size: 14px;
    font-weight: 300;
    color: var(--text-light);
    line-height: 1.65;
    margin-bottom: 22px;
  }
  .resource-actions {
    display: flex;
    gap: 24px;
    align-items: center;
    padding-top: 18px;
    border-top: 1px solid rgba(92,61,46,0.08);
  }
  .resource-link {
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    text-decoration: none;
  }
  .resource-link:hover { color: var(--warm-brown); }
  .rota-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 11px 24px;
    padding-top: 14px;
    border-top: 1px solid rgba(92,61,46,0.08);
  }
  .rota-list dt {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 500;
    align-self: center;
  }
  .rota-list dd {
    font-family: 'EB Garamond', Garamond, serif;
    font-size: 17px;
    font-weight: 400;
    color: var(--charcoal);
    line-height: 1.3;
  }


  .records-section { padding: 96px 8%; background: var(--cream); }
  .records-header { text-align: center; max-width: 720px; margin: 0 auto 56px; }
  .records-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    max-width: 1100px;
    margin: 0 auto;
  }
  .record-card {
    display: block;
    background: var(--white);
    border: 1px solid rgba(92,61,46,0.08);
    padding: 36px 32px 32px;
    text-decoration: none;
    transition: border-color 0.2s, transform 0.2s;
  }
  .record-card:hover { border-color: var(--gold); transform: translateY(-2px); }
  .record-tag {
    display: inline-block;
    padding: 3px 10px;
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-family: 'Jost', sans-serif;
    font-weight: 500;
    color: var(--stone);
    border: 1px solid rgba(139,125,107,0.4);
    margin-bottom: 22px;
  }
  .record-tag.members {
    color: var(--gold);
    border-color: rgba(201,168,76,0.45);
  }
  .record-card h3 {
    font-family: 'EB Garamond', Garamond, serif;
    font-size: 24px;
    font-weight: 500;
    color: var(--charcoal);
    margin-bottom: 12px;
    line-height: 1.25;
  }
  .record-card p {
    font-size: 13.5px;
    font-weight: 300;
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 22px;
  }
  .record-action {
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
  }

  /* STAY CONNECTED, E-news subscribe + sign-ups */
  .connect-aux-section { padding: 96px 8%; background: var(--ivory); }
  .connect-aux-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 22px;
    max-width: 1280px;
    margin: 0 auto;
  }
  .connect-card {
    background: var(--white);
    border: 1px solid rgba(92,61,46,0.08);
    padding: 48px 48px 40px;
    position: relative;
  }
  .connect-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 40px;
    height: 2px;
    background: var(--gold);
  }
  .connect-card .section-label { display: block; margin: 6px 0 18px; }
  .connect-card h3 {
    font-family: 'EB Garamond', Garamond, serif;
    font-size: 30px;
    font-weight: 400;
    color: var(--charcoal);
    line-height: 1.2;
    margin-bottom: 14px;
  }
  .connect-card h3 em { font-style: italic; color: var(--warm-brown); }
  .connect-card > p {
    font-size: 14.5px;
    font-weight: 300;
    color: var(--text-light);
    line-height: 1.65;
    margin-bottom: 26px;
  }
  .enews-form {
    display: flex;
    gap: 0;
    margin-bottom: 14px;
  }
  .enews-form input {
    flex: 1;
    padding: 14px 18px;
    border: 1px solid rgba(92,61,46,0.18);
    background: var(--ivory);
    font-family: 'Jost', sans-serif;
    font-size: 13.5px;
    font-weight: 300;
    color: var(--text-body);
    outline: none;
    transition: border-color 0.2s, background 0.2s;
  }
  .enews-form input:focus {
    border-color: var(--gold);
    background: var(--white);
  }
  .enews-form input::placeholder {
    color: var(--text-light);
    font-style: italic;
  }
  .enews-form button {
    padding: 14px 28px;
    border: 0;
    background: var(--gold);
    color: var(--white);
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s;
  }
  .enews-form button:hover { background: var(--warm-brown); }
  .signup-list {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
  }
  .signup-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px dashed rgba(92,61,46,0.12);
    gap: 16px;
  }
  .signup-list li:last-child { border-bottom: 0; }
  .signup-name {
    font-family: 'EB Garamond', Garamond, serif;
    font-size: 17px;
    color: var(--charcoal);
    font-weight: 500;
    line-height: 1.3;
  }
  .signup-cta {
    font-family: 'Jost', sans-serif;
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    text-decoration: none;
    white-space: nowrap;
  }
  .signup-cta:hover { color: var(--warm-brown); }
  .link-quiet {
    display: inline-block;
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    font-weight: 300;
    font-style: italic;
    color: var(--text-light);
    text-decoration: none;
    margin-top: 6px;
  }
  .link-quiet:hover { color: var(--warm-brown); }

  /* FOOTER ENHANCEMENTS, office hours, office vs clergy contact */
  .footer-contact-block {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  .footer-contact-label {
    display: block;
    font-family: 'Jost', sans-serif;
    font-size: 9.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 500;
    margin-bottom: 8px;
  }
  .footer-contact-block p {
    font-size: 12.5px !important;
    line-height: 1.65 !important;
    color: rgba(255,255,255,0.6) !important;
    margin: 0 !important;
  }
  .footer-contact-block a {
    color: rgba(255,255,255,0.6);
    text-decoration: none;
  }
  .footer-contact-block a:hover { color: var(--gold-light); }
  .footer-grid--five { grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr 1fr; gap: 36px; }
  .footer-col li .members-mark {
    display: inline-block;
    margin-left: 6px;
    font-size: 8.5px;
    letter-spacing: 0.18em;
    color: var(--gold);
    text-transform: uppercase;
    font-weight: 500;
    border: 1px solid rgba(201,168,76,0.4);
    padding: 1px 6px;
    vertical-align: 1px;
  }

  /* Responsive overrides for A.2 additions */
  @media (max-width: 960px) {
    .resources-grid,
    .connect-aux-grid { grid-template-columns: 1fr; }
    .records-grid { grid-template-columns: 1fr; }
    .footer-grid--five { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 640px) {
    .enews-form { flex-direction: column; }
    .footer-grid--five { grid-template-columns: 1fr; }
  }

  /* ════════════════════════════════════════════════════════════
     BRAND MIGRATION + RECOMMENDED ENHANCEMENTS
     Section labels → italic Garamond (no uppercase eyebrows)
     Photo filter, Visit/Beliefs/Weddings, Worship hierarchy,
     Hero chip CTAs, Lectionary, Prayer request, expanded Give
  ════════════════════════════════════════════════════════════ */

  /* Section labels, soft migration away from uppercase eyebrow.
     Keeps existing markup but adopts the brand book's italic feel. */
  .section-label {
    font-family: 'EB Garamond', Garamond, serif !important;
    font-style: italic !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    color: var(--text-light) !important;
  }
  .section-label::before {
    content: '† ';
    color: var(--gold);
    font-style: normal;
    font-weight: 400;
    margin-right: 2px;
  }

  /* Photo treatment, warm amber / green-charcoal grading,
     applied broadly across the main visual surfaces. */
  .about-image-wrap img,
  .portrait-frame img,
  .vcol-thumb img,
  .resource-card img,
  .community-section img {
    filter: sepia(0.22) saturate(0.85) brightness(0.92) contrast(1.05);
  }
  /* Program cards, heavier atmospheric grade to lift them
     out of "happy church stock" and toward candle-lit liturgy. */
  .program-card-img {
    filter: sepia(0.35) saturate(0.80) brightness(0.78) contrast(1.10) hue-rotate(-8deg);
  }
  /* People portraits, uniform B&W treatment across clergy, lay staff,
     and vestry. Per brand book direction for archival/portrait imagery. */
  .clergy-section .clergy-card .portrait-frame img,
  .clergy-section .staff-card .portrait-frame img,
  .vestry-section .vestry-card .portrait-frame img {
    filter: grayscale(1) contrast(1.06) brightness(0.94);
  }
  /* About image, deeper atmospheric grade */
  .about-image-wrap img {
    filter: sepia(0.24) saturate(0.85) brightness(0.92) contrast(1.06);
  }
  /* Latest Sermon thumb, atmospheric placeholder image with overlay
     Open Bible photo, more general than worship-concert imagery */
  .latest-sermon-thumb {
    background: linear-gradient(135deg, rgba(45,59,47,0.55), rgba(92,61,46,0.35)),
                url('https://images.unsplash.com/photo-1504052434569-70ad5836ab65?w=900&q=85') center/cover no-repeat !important;
    filter: sepia(0.20) saturate(0.85) brightness(0.92) contrast(1.06);
  }

  /* Hero, promote prompt chips as primary CTAs, demote search */
  .hero-prompt-chips { gap: 14px !important; margin-top: 24px; }
  .hpc-chip {
    background: rgba(255,255,255,0.10) !important;
    border-color: rgba(255,255,255,0.30) !important;
    padding: 12px 22px !important;
    font-size: 12.5px !important;
    letter-spacing: 0.04em !important;
    text-transform: none !important;
    font-family: 'EB Garamond', Garamond, serif !important;
    font-style: italic !important;
    font-weight: 400 !important;
    color: rgba(255,255,255,0.95) !important;
  }
  .hpc-chip:hover {
    background: rgba(201,168,76,0.22) !important;
    border-color: var(--gold-light) !important;
  }

  /* ── VISIT SECTION ─────────────────────────────────────── */
  .visit-section { padding: 96px 8%; background: var(--cream); }
  .visit-header { text-align: center; max-width: 720px; margin: 0 auto 56px; }
  .visit-primary {
    background: var(--anchor);
    color: var(--white);
    padding: 56px 56px 48px;
    margin-bottom: 22px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
    border-left: 3px solid var(--gold);
  }
  .visit-primary .visit-times-label {
    font-family: 'EB Garamond', Garamond, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 16px;
    color: var(--gold-light);
    margin-bottom: 8px;
    display: block;
  }
  .visit-primary h3 {
    font-family: 'EB Garamond', Garamond, serif;
    font-weight: 400;
    font-size: 38px;
    line-height: 1.1;
    color: var(--white);
    margin-bottom: 18px;
  }
  .visit-primary h3 em { font-style: italic; color: var(--gold-light); }
  .visit-times { list-style: none; padding: 0; margin: 0; }
  .visit-times li {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    font-family: 'EB Garamond', Garamond, serif;
    font-size: 17px;
  }
  .visit-times li:last-child { border-bottom: 0; }
  .visit-times .vt-time {
    font-weight: 500;
    color: var(--gold-light);
    font-style: italic;
  }
  .visit-times .vt-service { color: rgba(255,255,255,0.92); }
  .visit-times .vt-note {
    display: block;
    font-size: 13px;
    font-style: italic;
    color: rgba(255,255,255,0.6);
    margin-top: 2px;
  }
  .visit-address {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .visit-address-block { display: block; }
  .visit-address-label {
    font-family: 'EB Garamond', Garamond, serif;
    font-style: italic;
    font-size: 14px;
    color: var(--gold-light);
    margin-bottom: 6px;
    display: block;
  }
  .visit-address-line {
    font-family: 'EB Garamond', Garamond, serif;
    font-size: 18px;
    color: rgba(255,255,255,0.92);
    line-height: 1.45;
  }
  .visit-address-meta {
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    font-weight: 300;
    margin-top: 4px;
  }
  .visit-cta-row {
    margin-top: 24px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
  }
  .visit-cta {
    padding: 12px 22px;
    background: var(--gold);
    color: var(--white);
    text-decoration: none;
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: background 0.2s;
  }
  .visit-cta:hover { background: var(--warm-brown); }
  .visit-cta.outline {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.4);
    color: rgba(255,255,255,0.85);
  }
  .visit-cta.outline:hover { background: rgba(255,255,255,0.08); }

  .visit-secondary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 22px;
  }
  .visit-card {
    background: var(--white);
    border: 1px solid rgba(92,61,46,0.08);
    padding: 36px 32px 32px;
    position: relative;
  }
  .visit-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 36px;
    height: 2px;
    background: var(--gold);
  }
  .visit-card h4 {
    font-family: 'EB Garamond', Garamond, serif;
    font-weight: 500;
    font-size: 22px;
    color: var(--charcoal);
    line-height: 1.2;
    margin: 10px 0 14px;
  }
  .visit-card h4 em { font-style: italic; color: var(--warm-brown); }
  .visit-card p {
    font-family: 'Jost', sans-serif;
    font-size: 13.5px;
    font-weight: 300;
    line-height: 1.65;
    color: var(--text-light);
  }
  .visit-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .visit-card ul li {
    padding: 8px 0 8px 14px;
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    font-weight: 300;
    color: var(--text-body);
    line-height: 1.5;
    position: relative;
    border-bottom: 1px dashed rgba(92,61,46,0.08);
  }
  .visit-card ul li:last-child { border-bottom: 0; }
  .visit-card ul li::before {
    content: '';
    position: absolute;
    left: 0; top: 14px;
    width: 6px;
    height: 1.5px;
    background: var(--gold);
  }

  /* ── WORSHIP HIERARCHY (Sunday Eucharist primary) ─────── */
  .services-grid--hierarchy {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 18px;
  }
  .service-card--primary {
    grid-row: span 2;
    background: var(--anchor) !important;
    color: var(--white);
    padding: 44px 44px 40px !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .service-card--primary h3 {
    color: var(--white) !important;
    font-size: 32px !important;
    font-weight: 400 !important;
    line-height: 1.15;
    margin: 12px 0 16px !important;
  }
  .service-card--primary h3 em { font-style: italic; color: var(--gold-light); }
  .service-card--primary p {
    color: rgba(255,255,255,0.7) !important;
    font-size: 14.5px !important;
    line-height: 1.7 !important;
  }
  .service-card--primary .service-time {
    color: var(--gold-light) !important;
    font-size: 13px !important;
    font-style: italic;
    font-family: 'EB Garamond', Garamond, serif !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    margin-top: 20px;
  }
  .service-card--primary .service-icon { stroke: var(--gold-light) !important; }
  .primary-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    padding: 12px 22px;
    background: var(--gold);
    color: var(--white);
    text-decoration: none;
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: background 0.2s;
    align-self: flex-start;
  }
  .primary-card-cta:hover { background: var(--warm-brown); }
  .livestream-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 6px 14px;
    background: rgba(201,168,76,0.15);
    border: 1px solid rgba(201,168,76,0.45);
    color: var(--gold-light);
    font-family: 'EB Garamond', Garamond, serif;
    font-style: italic;
    font-size: 13px;
    text-decoration: none;
    align-self: flex-start;
  }
  .livestream-pill::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e85a4f;
    box-shadow: 0 0 8px rgba(232,90,79,0.6);
  }

  /* ── LATEST SERMON CARD ───────────────────────────────── */
  .latest-sermon-band {
    background: var(--charcoal);
    color: var(--white);
    padding: 56px 8%;
    display: flex;
    align-items: center;
    gap: 56px;
    flex-wrap: wrap;
  }
  .latest-sermon-thumb {
    width: 320px;
    height: 200px;
    background: linear-gradient(135deg, var(--anchor), var(--warm-brown));
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
  }
  .latest-sermon-thumb::after {
    content: '▶';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    color: var(--white);
    font-size: 48px;
    opacity: 0.85;
  }
  .latest-sermon-body {
    flex: 1;
    min-width: 280px;
  }
  .latest-sermon-label {
    font-family: 'EB Garamond', Garamond, serif;
    font-style: italic;
    color: var(--gold-light);
    font-size: 14px;
    margin-bottom: 8px;
    display: block;
  }
  .latest-sermon-body h3 {
    font-family: 'EB Garamond', Garamond, serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 1.15;
    color: var(--white);
    margin-bottom: 10px;
  }
  .latest-sermon-body h3 em { font-style: italic; color: var(--gold-light); }
  .latest-sermon-body p {
    color: rgba(255,255,255,0.65);
    font-size: 14px;
    line-height: 1.65;
    font-weight: 300;
    max-width: 60ch;
    margin-bottom: 16px;
  }
  .latest-sermon-meta {
    font-family: 'EB Garamond', Garamond, serif;
    font-style: italic;
    color: rgba(255,255,255,0.5);
    font-size: 13px;
  }

  /* ── LECTIONARY WIDGET ────────────────────────────────── */
  .lectionary-widget {
    background: var(--cream);
    border-left: 3px solid var(--gold);
    padding: 28px 32px;
    max-width: 720px;
    margin: 32px auto 0;
  }
  .lectionary-day {
    font-family: 'EB Garamond', Garamond, serif;
    font-style: italic;
    color: var(--gold);
    font-size: 14px;
    margin-bottom: 6px;
    display: block;
  }
  .lectionary-title {
    font-family: 'EB Garamond', Garamond, serif;
    font-weight: 500;
    font-size: 22px;
    color: var(--charcoal);
    margin-bottom: 14px;
  }
  .lectionary-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 18px;
  }
  .lectionary-list li {
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    font-weight: 300;
    color: var(--text-body);
    line-height: 1.55;
  }
  .lectionary-list li strong {
    font-weight: 500;
    color: var(--warm-brown);
    font-size: 11px;
    letter-spacing: 0.04em;
    display: block;
    margin-bottom: 2px;
  }

  /* ── WHAT EPISCOPALIANS BELIEVE ───────────────────────── */
  .beliefs-section { padding: 96px 8%; background: var(--ivory); }
  .beliefs-header { text-align: center; max-width: 720px; margin: 0 auto 56px; }
  .beliefs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 22px;
    max-width: 1200px;
    margin: 0 auto;
  }
  .belief-card {
    background: var(--white);
    border: 1px solid rgba(92,61,46,0.08);
    padding: 40px 36px 36px;
  }
  .belief-card .belief-num {
    font-family: 'EB Garamond', Garamond, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 28px;
    color: var(--gold);
    line-height: 1;
    margin-bottom: 10px;
  }
  .belief-card h4 {
    font-family: 'EB Garamond', Garamond, serif;
    font-weight: 500;
    font-size: 22px;
    color: var(--charcoal);
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(92,61,46,0.08);
  }
  .belief-card h4 em { font-style: italic; color: var(--warm-brown); }
  .belief-card p {
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: var(--text-light);
    line-height: 1.7;
  }

  /* ── WEDDINGS, FUNERALS & BAPTISMS ────────────────────── */
  .lifeevents-section { padding: 96px 8%; background: var(--cream); }
  .lifeevents-header { text-align: center; max-width: 720px; margin: 0 auto 56px; }
  .lifeevents-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 22px;
    max-width: 1200px;
    margin: 0 auto;
  }
  .lifeevent-card {
    background: var(--white);
    border: 1px solid rgba(92,61,46,0.08);
    padding: 40px 36px 36px;
    display: flex;
    flex-direction: column;
  }
  .lifeevent-card svg {
    width: 38px;
    height: 38px;
    margin-bottom: 18px;
  }
  .lifeevent-card h4 {
    font-family: 'EB Garamond', Garamond, serif;
    font-weight: 500;
    font-size: 24px;
    color: var(--charcoal);
    margin-bottom: 12px;
    line-height: 1.2;
  }
  .lifeevent-card h4 em { font-style: italic; color: var(--warm-brown); }
  .lifeevent-card p {
    font-family: 'Jost', sans-serif;
    font-size: 13.5px;
    font-weight: 300;
    color: var(--text-light);
    line-height: 1.65;
    margin-bottom: 22px;
    flex: 1;
  }
  .lifeevent-cta {
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-text);
    text-decoration: none;
    padding-top: 14px;
    border-top: 1px solid rgba(92,61,46,0.08);
  }
  .lifeevent-cta:hover { color: var(--warm-brown); }

  /* ── EXPANDED GIVE SECTION ────────────────────────────── */
  .give-expanded { padding: 96px 8%; background: var(--ivory); }
  .give-expanded .give-header { text-align: center; max-width: 720px; margin: 0 auto 48px; }
  .give-methods-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    max-width: 1200px;
    margin: 0 auto 32px;
  }
  .give-method {
    background: var(--white);
    border: 1px solid rgba(92,61,46,0.08);
    padding: 32px 28px 28px;
    text-align: center;
  }
  .give-method-icon {
    width: 36px;
    height: 36px;
    margin: 0 auto 16px;
    color: var(--gold);
  }
  .give-method h4 {
    font-family: 'EB Garamond', Garamond, serif;
    font-weight: 500;
    font-size: 19px;
    color: var(--charcoal);
    margin-bottom: 10px;
  }
  .give-method p {
    font-family: 'Jost', sans-serif;
    font-size: 12.5px;
    font-weight: 300;
    color: var(--text-light);
    line-height: 1.55;
    margin-bottom: 16px;
  }
  .give-method a {
    font-family: 'Jost', sans-serif;
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    text-decoration: none;
  }
  .give-method a:hover { color: var(--warm-brown); }
  .give-stewardship-strip {
    background: var(--anchor);
    color: var(--white);
    padding: 36px 40px;
    margin: 32px auto 0;
    max-width: 1200px;
    border-left: 3px solid var(--gold);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
  }
  .give-stewardship-strip .gss-text {
    font-family: 'EB Garamond', Garamond, serif;
    font-style: italic;
    font-size: 19px;
    color: rgba(255,255,255,0.92);
    line-height: 1.45;
    max-width: 56ch;
  }
  .give-stewardship-strip .gss-text strong {
    font-style: normal;
    font-weight: 500;
    color: var(--gold-light);
  }
  .gss-cta {
    padding: 12px 24px;
    background: var(--gold);
    color: var(--white);
    text-decoration: none;
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }
  .gss-cta:hover { background: var(--warm-brown); }

  /* ── PRAYER REQUEST FORM ──────────────────────────────── */
  .prayer-card form { margin-top: 12px; }
  .prayer-card textarea {
    width: 100%;
    min-height: 90px;
    padding: 14px 18px;
    border: 1px solid rgba(92,61,46,0.18);
    background: var(--ivory);
    font-family: 'Jost', sans-serif;
    font-size: 13.5px;
    font-weight: 300;
    color: var(--text-body);
    line-height: 1.5;
    outline: none;
    resize: vertical;
    margin-bottom: 12px;
  }
  .prayer-card textarea:focus {
    border-color: var(--gold);
    background: var(--white);
  }
  .prayer-card textarea::placeholder {
    color: var(--text-light);
    font-style: italic;
  }
  .prayer-options {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 14px;
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    color: var(--text-light);
  }
  .prayer-options label { cursor: pointer; }
  .prayer-options input { margin-right: 4px; vertical-align: -1px; }
  .prayer-submit {
    padding: 12px 24px;
    border: 0;
    background: var(--gold);
    color: var(--white);
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .prayer-submit:hover { background: var(--warm-brown); }

  /* ── SAMPLE BADGE FOR HOLY WEEK EVENTS ────────────────── */
  .sample-badge {
    display: inline-block;
    margin-left: 12px;
    padding: 2px 10px;
    font-family: 'Jost', sans-serif;
    font-size: 9.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-light);
    border: 1px solid rgba(232,201,122,0.5);
    vertical-align: 3px;
  }
  .calendar-feed-link {
    display: inline-block;
    margin-top: 18px;
    font-family: 'EB Garamond', Garamond, serif;
    font-style: italic;
    font-size: 14px;
    color: var(--gold-light);
    text-decoration: none;
  }
  .calendar-feed-link:hover { color: var(--white); }

  /* Responsive */
  @media (max-width: 960px) {
    .visit-primary { grid-template-columns: 1fr; gap: 36px; padding: 44px 36px; }
    .visit-secondary-grid,
    .beliefs-grid,
    .lifeevents-grid { grid-template-columns: 1fr; }
    .give-methods-grid { grid-template-columns: 1fr 1fr; }
    .services-grid--hierarchy { grid-template-columns: 1fr 1fr; }
    .service-card--primary { grid-row: span 1; grid-column: span 2; }
    .latest-sermon-band { flex-direction: column; align-items: flex-start; gap: 28px; padding: 44px 8%; }
    .latest-sermon-thumb { width: 100%; height: 220px; }
  }
  @media (max-width: 640px) {
    .visit-times li { grid-template-columns: 100px 1fr; gap: 10px; font-size: 15px; }
    .services-grid--hierarchy { grid-template-columns: 1fr; }
    .service-card--primary { grid-column: 1; }
    .give-methods-grid { grid-template-columns: 1fr; }
    .lectionary-list { grid-template-columns: 1fr; }
    .give-stewardship-strip { flex-direction: column; align-items: flex-start; }
  }

  /* ════════════════════════════════════════════════════════════
     FOUR HIGH-LEVERAGE ENHANCEMENTS
     a · Temporal homepage hero
     b · Soften the gold rule; retire 3-card grid where overused
     c · Liturgical-season color tinting
     d · Daily Office section
  ════════════════════════════════════════════════════════════ */

  /* (c) Seasonal accent, tints a subset of accents
        based on the liturgical season. JS sets data-season
        on <html>. Default is Ordinary Time / gold. */
  /* Seasonal accents resolve to the vestment palette that season.js already
     sets on :root, so the site runs one liturgical palette rather than two.
     Fallbacks are the Ordinary Time green from that same palette. */
  :root {
    --season-accent: var(--liturgical-color, #5a7355);
    --season-accent-soft: rgba(var(--liturgical-rgb, 90,115,85), 0.16);
    --season-accent-line: rgba(var(--liturgical-rgb, 90,115,85), 0.45);
  }

  /* (a) Temporal hero, rebuilds the hero as a time-aware
        editorial banner. Left-aligned, asymmetric, no search.
        Hides the legacy search system. */
  .hero-search-system,
  .hero-eyebrow,
  .hero-headline { display: none !important; }
  .hero-content { display: block !important; padding: 0 !important; }

  .hero-temporal {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 4%;
    display: grid;
    grid-template-columns: 0.85fr 1.4fr;
    gap: 44px;
    align-items: end;
  }
  .ht-left { color: var(--white); }
  .ht-date {
    font-family: 'EB Garamond', Garamond, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 17px;
    color: rgba(255,255,255,0.66);
    margin-bottom: 18px;
  }
  .ht-date strong {
    font-style: normal;
    font-weight: 500;
    color: var(--season-accent);
    margin-right: 12px;
  }
  .ht-day {
    font-family: 'EB Garamond', Garamond, serif;
    font-weight: 400;
    font-size: clamp(48px, 6.4vw, 84px);
    line-height: 1.02;
    color: var(--white);
    letter-spacing: -0.015em;
    margin-bottom: 28px;
    max-width: 18ch;
  }
  .ht-day em {
    font-style: italic;
    color: var(--season-accent);
  }
  .ht-collect {
    font-family: 'EB Garamond', Garamond, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.55;
    color: rgba(255,255,255,0.78);
    max-width: 46ch;
    padding-left: 22px;
    border-left: 2px solid var(--season-accent-line);
  }
  .ht-collect cite {
    display: block;
    font-style: normal;
    font-size: 12px;
    margin-top: 10px;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.04em;
  }
  .ht-right {
    border-left: 1px solid rgba(255,255,255,0.14);
    padding: 8px 0 8px 40px;
  }
  .ht-right-label {
    font-family: 'EB Garamond', Garamond, serif;
    font-style: italic;
    font-size: 14px;
    color: rgba(255,255,255,0.55);
    margin-bottom: 4px;
  }
  .ht-next-name {
    font-family: 'EB Garamond', Garamond, serif;
    font-weight: 500;
    font-size: 28px;
    line-height: 1.15;
    color: var(--white);
    margin-bottom: 4px;
  }
  .ht-next-time {
    font-family: 'EB Garamond', Garamond, serif;
    font-style: italic;
    color: var(--season-accent);
    font-size: 17px;
    margin-bottom: 24px;
  }
  /* Action capsules: frosted-glass pills, each item its own surface.
     Replaces the earlier dashed-line list. */
  .ht-actions {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .ht-actions li { margin: 0; padding: 0; }
  .ht-actions a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 22px;
    /* Frosted glass */
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 2px;
    /* Type */
    color: rgba(255,255,255,0.88);
    text-decoration: none;
    font-family: 'EB Garamond', Garamond, serif;
    font-size: 17px;
    line-height: 1.2;
    /* Rollover */
    transition: background 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                color 0.32s,
                box-shadow 0.32s;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10),
                0 1px 2px rgba(0,0,0,0.10);
  }
  .ht-actions a:hover {
    background: rgba(255,255,255,0.14);
    border-color: rgba(232,201,122,0.55);
    color: var(--white);
    transform: translateX(6px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18),
                0 4px 14px rgba(0,0,0,0.18),
                0 0 0 1px rgba(232,201,122,0.10);
  }
  .ht-actions a:focus-visible {
    outline: 2px solid var(--season-accent);
    outline-offset: 3px;
  }
  /* Small label badge inside the capsule (PDF / VIDEO / PRAYER / VISIT) */
  .ht-actions a span:last-child {
    font-family: 'Jost', sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.50);
    padding: 4px 10px 3px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 2px;
    background: rgba(0,0,0,0.10);
    transition: color 0.32s, border-color 0.32s, background 0.32s;
    flex-shrink: 0;
    margin-left: 16px;
  }
  .ht-actions a:hover span:last-child {
    color: var(--season-accent);
    border-color: rgba(232,201,122,0.55);
    background: rgba(232,201,122,0.08);
  }
  /* Respect prefers-reduced-motion */
  @media (prefers-reduced-motion: reduce) {
    .ht-actions a,
    .ht-actions a span:last-child { transition: color 0.15s; }
    .ht-actions a:hover { transform: none; }
  }

  /* Live indicator, appears only when a service is in progress */
  .ht-live {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    margin-bottom: 24px;
    background: rgba(168,57,42,0.18);
    border: 1px solid rgba(232,90,79,0.5);
    color: rgba(255,255,255,0.95);
    font-family: 'EB Garamond', Garamond, serif;
    font-style: italic;
    font-size: 15.5px;
    width: max-content;
  }
  .ht-live[data-live="true"] { display: inline-flex; }
  .ht-live::before {
    content: '';
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #e85a4f;
    box-shadow: 0 0 12px rgba(232,90,79,0.65);
    animation: pulseLive 1.6s ease-in-out infinite;
  }
  @keyframes pulseLive {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
  }
  .ht-live a { color: inherit; text-decoration: underline; }

  /* (b) Retire the universal gold rule, soften .divider
        to a small typographic mark rather than a 56px bar. */
  .divider {
    height: 1px !important;
    width: 28px !important;
    background: var(--season-accent-line) !important;
    margin: 14px 0 22px !important;
    opacity: 0.6;
  }

  /* (b) Editorial list, replaces 3-card grids where the
        content is a sequence of equal-weight propositions
        (beliefs, life-events). Magazine, not card. */
  .editorial-list {
    max-width: 760px;
    margin: 0 auto;
    padding-top: 8px;
  }
  .editorial-list .ed-entry {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 28px;
    padding: 36px 0;
    border-bottom: 1px solid rgba(92,61,46,0.10);
  }
  .editorial-list .ed-entry:last-child { border-bottom: 0; }
  .ed-numeral {
    font-family: 'EB Garamond', Garamond, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 30px;
    color: var(--season-accent);
    line-height: 1;
    padding-top: 4px;
  }
  .ed-body h4 {
    font-family: 'EB Garamond', Garamond, serif;
    font-weight: 500;
    font-size: 26px;
    line-height: 1.2;
    color: var(--charcoal);
    margin-bottom: 10px;
  }
  .ed-body h4 em { font-style: italic; color: var(--warm-brown); }
  .ed-body p {
    font-family: 'Jost', sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--text-body);
    max-width: 62ch;
    margin-bottom: 10px;
  }
  .ed-body .ed-cta {
    display: inline-block;
    margin-top: 8px;
    font-family: 'EB Garamond', Garamond, serif;
    font-style: italic;
    font-size: 14.5px;
    color: var(--season-accent);
    text-decoration: none;
  }
  .ed-body .ed-cta:hover { color: var(--warm-brown); }
  @media (max-width: 640px) {
    .editorial-list .ed-entry { grid-template-columns: 44px 1fr; gap: 16px; }
    .ed-numeral { font-size: 22px; }
  }

  /* (d) Daily Office, print-feel section for Morning Prayer
        with today's appointed psalms, lessons, and collect. */
  .office-section { padding: 96px 8%; background: var(--ivory); }
  .office-wrap {
    max-width: 720px;
    margin: 0 auto;
    background: var(--white);
    padding: 64px 72px 56px;
    border: 1px solid rgba(92,61,46,0.10);
    position: relative;
  }
  .office-folio {
    position: absolute;
    top: 24px; right: 32px;
    font-family: 'EB Garamond', Garamond, serif;
    font-style: italic;
    font-size: 13px;
    color: var(--text-light);
    letter-spacing: 0.04em;
  }
  .office-hat {
    text-align: center;
    margin-bottom: 36px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(92,61,46,0.10);
  }
  .office-kicker {
    font-family: 'EB Garamond', Garamond, serif;
    font-style: italic;
    font-size: 15px;
    color: var(--season-accent);
    margin-bottom: 8px;
  }
  .office-title {
    font-family: 'EB Garamond', Garamond, serif;
    font-weight: 400;
    font-size: 40px;
    color: var(--charcoal);
    line-height: 1.1;
    margin-bottom: 8px;
  }
  .office-title em { font-style: italic; color: var(--warm-brown); }
  .office-meta {
    font-family: 'EB Garamond', Garamond, serif;
    font-style: italic;
    color: var(--text-light);
    font-size: 14px;
  }
  .office-section-h {
    font-family: 'EB Garamond', Garamond, serif;
    font-style: italic;
    font-size: 16px;
    color: var(--season-accent);
    margin-top: 32px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(92,61,46,0.08);
  }
  .office-prose {
    font-family: 'EB Garamond', Garamond, serif;
    font-size: 18px;
    line-height: 1.62;
    color: var(--text-body);
    margin-bottom: 14px;
  }
  .office-prose em { font-style: italic; color: var(--warm-brown); }
  .office-prose.collect {
    font-style: italic;
    padding: 18px 22px;
    border-left: 2px solid var(--season-accent-line);
    background: rgba(92,61,46,0.025);
    margin: 14px 0;
  }
  .office-prose.collect cite {
    display: block;
    font-style: normal;
    font-size: 12.5px;
    color: var(--text-light);
    margin-top: 10px;
  }
  .office-versicle {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 14px;
    font-family: 'EB Garamond', Garamond, serif;
    font-size: 16.5px;
    line-height: 1.55;
    color: var(--text-body);
    margin-bottom: 6px;
  }
  .office-versicle .v-mark {
    font-style: italic;
    color: var(--season-accent);
    text-align: right;
    font-weight: 500;
  }
  .office-readings {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .office-readings li {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 18px;
    padding: 9px 0;
    border-bottom: 1px dashed rgba(92,61,46,0.10);
    font-family: 'EB Garamond', Garamond, serif;
    font-size: 16px;
    line-height: 1.45;
    color: var(--text-body);
  }
  .office-readings li:last-child { border-bottom: 0; }
  .office-readings .r-label {
    font-style: italic;
    color: var(--season-accent);
    font-size: 13.5px;
    align-self: center;
  }
  .office-actions {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid rgba(92,61,46,0.10);
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
    justify-content: space-between;
  }
  .office-actions .office-listen {
    font-family: 'EB Garamond', Garamond, serif;
    font-style: italic;
    font-size: 16px;
    color: var(--season-accent);
    text-decoration: none;
  }
  .office-actions .office-listen::before { content: '▸ '; }
  .office-actions .office-print {
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-light);
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: 0;
  }
  @media (max-width: 640px) {
    .office-wrap { padding: 44px 28px 36px; }
    .office-title { font-size: 30px; }
    .office-readings li { grid-template-columns: 1fr; gap: 4px; }
    .office-readings .r-label { font-size: 12px; }
  }
  @media print {
    body > *:not(.office-section) { display: none !important; }
    .office-section { padding: 0; }
    .office-wrap { border: 0; padding: 0; }
    .office-actions { display: none; }
  }

  /* Temporal hero responsive collapse */
  @media (max-width: 960px) {
    .hero-temporal { grid-template-columns: 1fr; gap: 36px; }
    .ht-right { border-left: 0; border-top: 1px solid rgba(255,255,255,0.14); padding: 28px 0 0; }
  }

  /* ════════════════════════════════════════════════════════════
     OPTION C · Display headline accents in Cardo upright, not italic Garamond.
     The [Plain Roman + italic em] AI cliche is retired in favor of a
     two-display-face pattern: Garamond for the bulk, Cardo for the
     single accent phrase. Color is inherited from existing rules
     (warm-brown on light, gold-light on dark). The wordmark, every
     section title, and every display card title pick this up.
  ════════════════════════════════════════════════════════════ */
  .section-title em,
  .hero-headline em,
  .ht-day em,
  .video-section__title em,
  .service-card--primary h3 em,
  .belief-card h4 em,
  .lifeevent-card h4 em,
  .ed-body h4 em,
  .visit-primary h3 em,
  .visit-card h4 em,
  .connect-card h3 em,
  .community-left h2 em,
  .community-right h3 em,
  .latest-sermon-body h3 em,
  .office-title em,
  .lectionary-title em,
  .resource-card h3 em,
  .give-method h4 em,
  .clergy-section h2 em,
  .clergy-section h3 em,
  .vestry-section h2 em,
  .records-section h2 em,
  .beliefs-header h2 em,
  .lifeevents-header h2 em,
  .give-header h2 em,
  .visit-header h2 em,
  .resources-header h2 em,
  .programs-header h2 em,
  .footer-brand h2 em,
  .gss-text strong em {
    font-family: 'Cardo', serif;
    font-style: normal;
    font-weight: 400;
    font-size: 0.94em;
    letter-spacing: 0.005em;
  }



  /* ═══════════════ ANIMATIONS ═══════════════
     1. Processional headline entrance, slow rise + fade, Cardo accent delayed 200ms
     5. Staggered IA / grid reveal, 60ms cascade across children when grid intersects
     8. Gold underline draw on top-level nav links, replaces opacity hover */

  /* Respect reduced-motion: skip all reveal animation, render final state immediately */
  @media (prefers-reduced-motion: reduce) {
    .proc-fade, .proc-fade em, .proc-stagger > * {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }
  }

  /* 1 · Processional headline entrance */
  .proc-fade {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
      transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
  }
  .proc-fade.is-revealed {
    opacity: 1;
    transform: translateY(0);
  }
  .proc-fade em {
    opacity: 0;
    transition: opacity 700ms ease-out 220ms;
  }
  .proc-fade.is-revealed em { opacity: 1; }

  /* 5 · Staggered grid reveal */
  .proc-stagger > * {
    opacity: 0;
    transform: translateY(22px);
    transition:
      opacity 850ms cubic-bezier(0.16, 1, 0.3, 1),
      transform 850ms cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
  }
  .proc-stagger.is-revealed > * {
    opacity: 1;
    transform: translateY(0);
  }

  /* 8 · Gold underline draw on top-level nav links
     Uses ::before (the ::after slot is already used by the chevron on dropdown parents) */
  .nav-links > li > a {
    position: relative;
    padding-bottom: 6px;
  }
  .nav-links > li > a::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1px;
    height: 2px;
    background: var(--gold-light);
    box-shadow: 0 0 6px rgba(232, 201, 122, 0.5);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
  }
  .nav-links > li:hover > a::before,
  .nav-links > li:focus-within > a::before {
    transform: scaleX(1);
  }
  nav.scrolled .nav-links > li > a::before {
    background: var(--gold);
    box-shadow: 0 0 5px rgba(201, 168, 76, 0.45);
  }
  @media (prefers-reduced-motion: reduce) {
    .nav-links > li > a::before { transition: none; }
  }

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

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

/* ===== 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);
}
/* These three pages carry their own chrome, so the hero styling is repeated
   here rather than inherited from site-chrome.css. */
section.hero .section-label { color: var(--gold-light, #e8c97a) !important; }
section.hero h1 { color: #fff; }
section.hero p { color: rgba(255,255,255,0.86); }

/* Hero typography, matching every other page's masthead. */
section.hero { text-align: center; padding: 72px 24px 64px; }
section.hero .section-label {
  display: inline-block; font-size: 12px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold-light, #e8c97a) !important; margin-bottom: 18px;
}
section.hero h1 {
  font-family: 'EB Garamond', Garamond, serif !important;
  font-size: clamp(40px, 6.5vw, 68px) !important;
  font-weight: 300 !important;
  line-height: 1.05 !important;
  color: #fff !important;
  letter-spacing: normal !important;
}
section.hero .divider { width: 56px; height: 1px; background: var(--gold-light, #e8c97a); margin: 26px auto; }
section.hero p {
  font-family: 'EB Garamond', Garamond, serif !important;
  font-size: 19px !important; color: rgba(255,255,255,0.86) !important;
  max-width: 620px; margin: 0 auto; line-height: 1.6;
}
@media (max-width: 640px) { section.hero { padding: 56px 18px 52px; } }

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


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

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

/* ===== Subpage hero, ported from site-chrome =====
   These pages carry their own copy of the chrome and never received the
   unified subpage hero. Their hero label sat at 56px, underneath the 78px
   fixed nav, and they still loaded the full 1920px image on phones. */
/* ===== 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; }
}


/* Clear the fixed nav, as every other subpage does. */
section.hero { padding-top: 150px !important; }
@media (max-width: 760px) { section.hero { min-height: 260px; } }
/* ===== 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; }
}
/* ===== Hero header, matched to every other subpage =====
   Two rules were leaking into the hero on these self-chromed pages:
   1. the brand-migration block restyles every .section-label to italic
      Garamond with a dagger, which is right in the page body but wrong for the
      hero eyebrow, and
   2. an older .hero rule sets align-items:flex-start, so the hero children
      shrank to their content width and their centred text hugged the left edge.
   Both are corrected here, matching site-chrome's subpage hero exactly. */
section.hero { align-items: stretch !important; }
section.hero > * { width: auto !important; }
section.hero .section-label {
  font-family: 'Jost', sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--gold-light) !important;
  display: block !important;
  margin: 0 0 18px !important;
}
section.hero .section-label::before { content: none !important; margin: 0 !important; }

/* stretch widened the hero rule to full bleed; it is a 56px centred mark. */
section.hero .divider {
  width: 56px !important;
  height: 1px !important;
  margin: 26px auto !important;
  background: var(--liturgical-color, #5a7355) !important;
}

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