/* ============================================================================
   St. Isidore Catholic Church — shared design-system stylesheet (site.css)
   ============================================================================

   WHAT THIS IS: a faithful EXTRACTION (not a redesign) of the canonical inline
   <style> blocks that live in the frozen copy-source pages. No selector was
   renamed, no value was normalized, no rule was "improved." This is the
   consolidation-ticket item 1 called for in
   docs/AUDIT-design-system-scalability-2026-07-28.md ("Deferred" #1).

   SOURCES (authority order — where two sources conflict on the SAME selector,
   the higher one on this list wins):
     1. content/st-isidore/sacraments/anointing.html   (frozen canonical SUBPAGE)
     2. content/st-isidore/mass-times.html              (frozen canonical TOP-LEVEL)
     3. content/st-isidore/ministries/youth.html         (detail/events-grid/edge-*)
     4. content/st-isidore/sacraments/baptism.html       (prep-grid/prep-card)

   Extraction date: 2026-08-18.

   GOVERNANCE: docs/GUIDE-design-system-st-isidore.md is the law for this
   system's FORM. If you change a pattern here, change the guide in the same
   commit. This file does not yet ship on any page — pages still carry their
   own inline <style> copies (see AUDIT item 1). Wiring status: anointing,
   mass-times, baptism, youth converted 2026-08-18 (pilot); remaining 32 pages
   are phase 2 — until converted they still carry their own inline copies.
   ============================================================================ */


/* ============================================================================
   1. TOKENS
   ============================================================================
   Verified against all four sources. anointing.html and baptism.html are
   byte-identical on this block. mass-times.html carries the same six core
   values but OMITS --wood and --blue-light (not a conflict — just a subset;
   included here since anointing/baptism define them and no page contradicts
   the values). youth.html matches anointing/baptism on every token EXCEPT
   --white, where it writes `#FFF` instead of `#FFFFFF` (same rendered color,
   different literal — a real byte-level drift). Per the conflict rule,
   anointing (canonical subpage source) wins: --white: #FFFFFF.
   ============================================================================ */
:root {
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans: 'Inter', -apple-system, sans-serif;
  --navy: #1B365D;
  --cream: #F5EDE3;
  --gold: #C9943E;
  --green: #2D6A4F;
  --shadow: #2D2926;
  --white: #FFFFFF;
  --stone: #9B9590;
  --wood: #8B5E3C;
  --blue-light: #A8C8E8;
}


/* ============================================================================
   2. BASE
   ============================================================================
   anointing/baptism use the `*, *::before, *::after { margin:0; padding:0;
   box-sizing:border-box; }` reset form. mass-times uses the bare `* { ... }`
   form (functionally identical, no drift in effect — anointing's form kept
   as canonical since it's more explicit). youth.html adds `html {
   scroll-behavior: smooth; }` and a global `a { color; text-decoration:
   underline; }` rule not present in anointing/mass-times/baptism (those pages
   leave link color to be set per-component). baptism.html adds
   `ul, ol { list-style: none; } a { text-decoration: none; }` — the opposite
   default from youth's global `a` rule. This is a genuine conflict between
   youth.html and baptism.html on the bare `a` selector; anointing (which sets
   neither) doesn't arbitrate it, so both are kept below, clearly commented,
   rather than silently picking one — a future page must declare which base
   link behavior it wants.
   ============================================================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--shadow);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

/* youth.html only — smooth in-page scroll */
html {
  scroll-behavior: smooth;
}

/* youth.html base link style (global underline + gold→wood hover) */
a {
  color: var(--gold);
  text-decoration: underline;
  transition: color 0.2s;
}

a:hover {
  color: var(--wood);
}

/* baptism.html base reset (list markers off, links unstyled by default) —
   CONFLICTS with youth.html's global `a` rule above. baptism.html's page
   scopes explicit link styling per-component instead, so it needs `a` to
   start bare. Keep both, commented, since neither is the anointing/mass-times
   canonical default and there is no higher-authority arbiter for this pair. */
ul, ol { list-style: none; }
a { text-decoration: none; }

/* anointing.html grain-texture utility (also mass-times/baptism as
   .page-hero__grain / section::before variants — see SECTIONS/HERO) */
.grain {
  position: relative;
}
.grain::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.035;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") repeat;
  background-size: 256px 256px;
  z-index: 0;
}
.grain > * {
  position: relative;
  z-index: 1;
}

/* mass-times.html variant of the same grain texture: an absolutely-positioned
   sibling div (`<div class="grain"></div>`) instead of a ::before pseudo-
   element. Different DOM contract, so kept as a second definition rather than
   merged — do not conflate with the .grain above (anointing's version is a
   wrapper utility; this one expects a bare overlay div inside a
   `position:relative` parent). */
.schedule .grain,
.confession .grain,
.adoration .grain,
.holyweek .grain {
  position: absolute;
  inset: 0;
  opacity: 0.035;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") repeat;
  background-size: 256px 256px;
}


/* ============================================================================
   3. NAV
   ============================================================================
   anointing.html, mass-times.html, and baptism.html carry a BYTE-IDENTICAL
   nav block (padding: 22px 48px; transition: background 0.4s ease, box-shadow
   0.4s ease; no padding-shrink on .nav--scrolled). This is the canonical nav
   variant, used below.

   youth.html carries a DIFFERENT nav implementation — CONFLICT, anointing
   wins per the rules, but youth's variant is real and shipping, so it is
   preserved further down as an explicitly-scoped alternate (commented "youth
   nav variant — NOT canonical") rather than silently discarded. Differences:
     - padding: 20px 48px (vs 22px 48px)
     - transition: background 0.3s, padding 0.3s (vs 0.4s ease + box-shadow)
     - .nav--scrolled shrinks padding to 14px 48px (anointing's scrolled state
       only changes background/shadow, not padding)
     - .nav__logo: letter-spacing 2px (vs 3px)
     - .nav__links selector is `.nav__links > li > a` (vs `.nav__links a`),
       font-size 12px/letter-spacing 1.5px/color rgba(255,255,255,.75)
       (vs 12px/0.8px/rgba(255,255,255,.8))
     - .nav__give is a GHOST button (gold border+text, transparent bg,
       hover = fill gold + navy text) vs anointing's SOLID gold button
       (white text, gold bg, hover = darken to #b8842f)
   ============================================================================ */
/* In-page anchors (e.g. /mass-times#adoration from the nav) land below the fixed bar. */
section[id] { scroll-margin-top: 79px; }

.nav {
  /* fixed bar geometry (2026-08-19) — see per-page note */
  height: 79px;
  box-sizing: border-box;

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 48px;
  transition: background 0.4s ease, box-shadow 0.4s ease;
}
.nav--scrolled {
  background: var(--navy);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}
.nav__logo {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
}
.nav__links {
  display: flex;
  gap: 28px;
  list-style: none;
}
.nav__links a {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  transition: color 0.2s;
}
.nav__links a:hover {
  color: var(--white);
}
/* mass-times.html only — active top-level link state */
.nav__links a--active {
  color: var(--white);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}
.nav__give {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--white);
  background: var(--gold);
  border: none;
  padding: 10px 28px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s;
}
.nav__give:hover {
  background: #b8842f;
}
.nav__item { position: relative; }
.nav__item > a { display: flex; align-items: center; gap: 4px; }
.nav__item > a::after { content: ''; width: 0; height: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-top: 3.5px solid currentColor; opacity: 0.5; transition: transform 0.2s, opacity 0.2s; }
.nav__item:hover > a::after { opacity: 0.8; transform: rotate(180deg); }
.nav__item--no-dropdown > a::after { display: none; }
.nav__dropdown { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(4px); min-width: 220px; background: var(--navy); border-top: 2px solid var(--gold); padding: 8px 0; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; z-index: 200; margin-top: 16px; }
.nav__item:hover .nav__dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav__dropdown a { display: block; padding: 10px 24px; font-family: var(--font-sans); font-weight: 400; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,0.7); text-decoration: none; transition: color 0.15s, background 0.15s; white-space: nowrap; }
.nav__dropdown a:hover { color: var(--white); background: rgba(255,255,255,0.06); }
.nav__dropdown li { list-style: none; border-bottom: 1px solid rgba(255,255,255,0.06); }
.nav__dropdown li:last-child { border-bottom: none; }
/* "All ___" first row (nav restructure, 2026-08-19): gold text + hairline
   rule separating it from the child links below it. */
.nav__dropdown-all { border-bottom: 1px solid rgba(255,255,255,0.12) !important; }
.nav__dropdown-all a { color: var(--gold); }
.nav__dropdown-all a:hover { color: var(--gold); background: rgba(255,255,255,0.06); filter: brightness(1.15); }

/* ── hover-affordance patch v2 (byte-identical across all four sources,
   injected as a second inline <style> tag on every canonical page) ── */
a:hover { filter: brightness(0.7); }
.nav a:hover, .nav__dropdown a:hover, footer a:hover, .footer a:hover, .nav__give:hover, .si-edit-btn:hover { filter: none; }
footer a, .footer a { transition: color .15s, text-decoration-color .15s; }
footer a:hover, .footer a:hover { color: var(--gold) !important; text-decoration: underline !important; text-underline-offset: 4px; text-decoration-color: var(--gold); }

/* ────────────────────────────────────────────────────────────────────────
   youth.html NAV VARIANT — NOT canonical, kept for reference only per the
   drift-report rule (anointing wins the conflict). Scoped under
   `[data-nav-variant="youth"]` here so it cannot silently collide with the
   canonical .nav rules above if this file is ever loaded on youth.html
   as-is; adopting this variant elsewhere requires a deliberate decision,
   not an accidental cascade.
   ──────────────────────────────────────────────────────────────────────── */
[data-nav-variant="youth"].nav {
  padding: 20px 48px;
  transition: background 0.3s, padding 0.3s;
}
[data-nav-variant="youth"].nav--scrolled {
  padding: 14px 48px;
}
[data-nav-variant="youth"] .nav__logo {
  letter-spacing: 2px;
}
[data-nav-variant="youth"] .nav__links > li > a {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  transition: color 0.2s;
}
[data-nav-variant="youth"] .nav__links > li > a:hover {
  color: var(--white);
}
[data-nav-variant="youth"] .nav__give {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  border: 1px solid var(--gold);
  padding: 8px 20px;
  background: transparent;
  transition: background 0.2s, color 0.2s;
}
[data-nav-variant="youth"] .nav__give:hover {
  background: var(--gold);
  color: var(--navy);
}


/* ============================================================================
   4. HERO
   ============================================================================
   Three distinct hero shapes exist across the four sources. Namespaced as
   each canonical page names them — NOT merged into one invented shape.
   ============================================================================ */

/* ── 4a. .page-hero — canonical SUBPAGE hero (anointing.html / baptism.html)
   anointing and baptism share the same .page-hero shell (image div +
   overlay div + grain div + content), but differ on interior details:
     - anointing__content: z-index 10, padding "0 48px 56px"
     - baptism__content:   z-index 2,  padding "0 48px 64px"
     - anointing__title:  font-weight 700 (not italic), letter-spacing -2px
     - baptism__title:    font-weight 400, font-style italic, letter-spacing -2px
   CONFLICT on .page-hero__content z-index/padding and .page-hero__title
   weight/style — anointing wins per rules; baptism's divergent values are
   noted inline as comments, not merged in.
   No breadcrumbs anywhere on the site (2026-08-19 — removed sitewide, incl.
   the .page-hero__breadcrumb rule that briefly lived here and the standalone
   .breadcrumb component on rcia.html; don't reintroduce either pattern).
   ============================================================================ */
.page-hero {
  position: relative;
  height: 50vh;
  min-height: 400px;
  display: flex;
  align-items: flex-end;
  background: var(--navy);
  overflow: hidden;
}
.page-hero__image {
  position: absolute;
  inset: 0;
  /* per-page background-image + position set inline per page; anointing.html:
     url('/shared-assets/heroes/hero-anointing.jpg') center center / cover no-repeat;
     baptism.html: url('/shared-assets/heroes/hero-baptism.jpg') center 35% / cover no-repeat */
  background: url('/shared-assets/heroes/hero-anointing.jpg') center center / cover no-repeat;
}
.page-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(27,54,93,0.3) 0%, rgba(27,54,93,0.85) 100%);
}
.page-hero__grain {
  position: absolute;
  inset: 0;
  opacity: 0.035;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") repeat;
  background-size: 256px 256px;
}
.page-hero__content {
  /* anointing.html value (canonical, wins conflict) */
  position: relative;
  z-index: 10;
  padding: 0 48px 56px;
  max-width: 900px;
}
.page-hero__label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.page-hero__title {
  /* Italic everywhere (Lesli 2026-09-24: "some of the pages have a different font style ...
     Let's go ahead and use italics"). Was 700 upright on 64 pages vs 400 italic on 27. */
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 56px;
  letter-spacing: -2px;
  color: var(--white);
  line-height: 1.1;
}
.page-hero__subtitle {
  /* anointing.html value (canonical, wins conflict):
     margin-top 16px, max-width 520px, line-height 1.7.
     baptism.html instead writes: line-height 1.6, max-width 560px
     (no margin-top difference). */
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  color: rgba(245,237,227,0.7);
  margin-top: 16px;
  max-width: 520px;
  line-height: 1.7;
}

/* ── 4b. mass-times.html TOP-LEVEL hero — separate DOM shape:
   .page-hero (own shell rules) + .page-hero__cross accent glyph, a
   .grain sibling div (see BASE section 2), no .page-hero__grain pseudo,
   .section-label used inline for the eyebrow instead of .page-hero__label. */
.mass-times .page-hero__content,
.top-level .page-hero__content {
  /* mass-times.html value: z-index 2 (not 10), padding "0 48px 64px" */
  position: relative;
  z-index: 2;
  max-width: 900px;
  padding: 0 48px 64px;
}
.page-hero__title--top-level {
  /* mass-times.html: font-weight 700, letter-spacing -3px (not -2px),
     line-height 1 (not 1.1), margin-bottom 12px */
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 56px;
  letter-spacing: -3px;
  line-height: 1;
  color: var(--white);
  margin-bottom: 12px;
}
.page-hero__subtitle--top-level {
  /* mass-times.html: color rgba(245,237,227,0.6) (not .7), no max-width,
     letter-spacing 0.5px, no margin-top */
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  color: rgba(245,237,227,0.6);
  letter-spacing: 0.5px;
}
.page-hero__cross {
  font-family: var(--font-serif);
  font-size: 240px;
  color: rgba(201,148,62,0.06);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  position: absolute;
  top: 50%;
  right: 10%;
  transform: translateY(-50%);
}

/* ── 4c. youth.html .hero — a THIRD, simpler shape: no separate image/overlay
   divs, background-image directly on .hero, single ::after gradient overlay,
   no grain layer at all on the hero. Genuinely distinct DOM contract from
   both .page-hero variants above — kept fully separate, not merged. */
.hero {
  position: relative;
  height: 50vh;
  min-height: 400px;
  display: flex;
  align-items: flex-end;
  background-image: url("../../shared-assets/heroes/hero-youth.jpg");
  background-size: cover;
  background-position: center 18%;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(27,54,93,0.30), rgba(27,54,93,0.85));
}
/* Pages that ship their own overlay div (the pre-consolidation .hero shape: about,
   facilities, history, bylaws, liturgical-calendar, music, adult/faith-formation,
   outreach, homepage) must NOT also get ::after — that stacked two navy layers
   from 2026-08-19 until 2026-09-14. One overlay per hero. */
.hero:has(.hero__overlay)::after { content: none; }
.hero__content {
  position: relative;
  z-index: 1;
  padding: 0 48px 60px;
  max-width: 900px;
}
.hero__label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.hero__heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: 48px;
  letter-spacing: -2px;
  color: var(--white);
  line-height: 1.15;
}
.hero__sub {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  color: rgba(255,255,255,0.8);
  margin-top: 16px;
  max-width: 520px;
}


/* ============================================================================
   5. SECTIONS
   ============================================================================
   anointing.html and youth.html both define `.section` / `.section--cream` /
   `.section--navy` / `.section__inner` / `.section__label` /
   `.section__heading` / `.section__text`, with genuine drift between them:

     .section padding:            IDENTICAL (100px 48px) on both.
     .section--cream:
       anointing: `background: var(--cream);` (flat)
       youth:     `background-color` + SVG-noise `background-image` blended
                   via `background-blend-mode: overlay` (baked-in grain,
                   no separate .grain element needed) — CONFLICT, anointing's
                   flat form wins; youth's textured form kept as
                   `.section--cream--textured` below.
     .section__heading color:
       anointing: NOT set on the base selector — color comes from a modifier
                   (`.section__heading--cream` = shadow, `.section__heading--navy`
                   = cream). This is the canonical BEM-modifier pattern, used
                   below.
       youth:      sets `color: var(--navy)` directly on `.section__heading`
                   and overrides only inside `.section--navy .section__heading`
                   — a *descendant-selector* pattern instead of anointing's
                   modifier-class pattern. CONFLICT — anointing's modifier
                   classes win as canonical; youth's descendant-selector
                   variant is reproduced below as a comment-scoped alternate
                   since youth.html actually ships this way and a future
                   page copying youth verbatim needs it documented.
     .section__text:
       anointing adds `.section__text a` link styling (gold, underline,
       hover→wood) not present on youth (youth relies on the global `a`
       rule from BASE instead). Additive, no conflict — both kept.
       youth adds `.section__text + .section__text { margin-top: 20px; }`
       (adjacent-sibling spacing) not present on anointing. Additive, kept.

   mass-times.html does NOT use `.section` — its bands are page-local classes
   (`.schedule`, `.confession`, `.adoration`, `.holyweek`, each with an
   `__inner`/`__heading`/`__intro` of its own). These are page-local
   one-offs per the guide's own framing ("grep the class in any page for
   canonical markup" — mass-times never reuses `.section`), so per the
   EXCLUDE rule they are NOT folded into `.section` here. See the EXCLUDED
   list in the extraction report.
   ============================================================================ */
.section {
  padding: 100px 48px;
}
.section--cream {
  background: var(--cream);
}
.section--navy {
  background: var(--navy);
}
.section__inner {
  max-width: 900px;
  margin: 0 auto;
}
.section__label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.section__heading {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 48px;
  letter-spacing: -2px;
  line-height: 1.15;
  margin-bottom: 32px;
}
.section__heading--cream { color: var(--shadow); }
.section__heading--navy { color: var(--cream); }

.section__text {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
  color: var(--shadow);
  max-width: 680px;
}
.section__text--navy {
  color: rgba(245,237,227,0.75);
}
.section__text a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  font-weight: 400;
  /* font-size removed 2026-09-11: was 14px, one point under the 15px
     paragraph, so every in-text link looked shrunken. Inherit instead. */
  transition: color 0.2s;
}
.section__text a:hover {
  color: var(--wood);
}
.section__text--navy a {
  color: var(--gold);
}
.section__text--navy a:hover {
  color: var(--cream);
}
/* youth.html only — sibling spacing between stacked .section__text blocks */
.section__text + .section__text {
  margin-top: 20px;
}

/* ── youth.html section variant — textured cream + descendant-selector
   color scheme. NOT canonical (anointing's flat/modifier pattern wins the
   conflict above); reproduced here, scoped, since youth.html ships this
   verbatim and a page cloning youth needs the real rule. ── */
.section--cream--textured {
  background-color: var(--cream);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-blend-mode: overlay;
  background-size: 256px 256px;
}
.section--navy-descendant {
  background-color: var(--navy);
  color: var(--white);
}
.section--navy-descendant .section__label {
  color: var(--gold);
}
.section--navy-descendant .section__heading {
  color: var(--white);
}
.section--navy-descendant a {
  color: var(--gold);
}
.section--navy-descendant .section__text {
  color: rgba(255,255,255,0.8);
}
/* youth.html's own (non-modifier) .section__heading base color + a */
.section__heading--youth-base {
  color: var(--navy);
}

/* ── DIVIDER — anointing.html only ── */
.section__divider {
  width: 48px;
  height: 2px;
  background: var(--gold);
  margin-bottom: 32px;
}

/* ── baptism.html section variant (`.section--cream` / `.section--navy` as
   full standalone classes, distinct naming from anointing's shared
   `.section` + modifier scheme — baptism does NOT use `.section` as a base
   class at all, applying padding directly on `.section--cream`/
   `.section--navy`). Genuinely different contract from anointing's
   `.section .section--cream` pairing — kept separate under baptism's own
   selectors so nothing here silently double-applies padding. ── */
.section--cream.section--standalone {
  position: relative;
  background: var(--cream);
  padding: 100px 48px;
}
.section--cream.section--standalone::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.035;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") repeat;
  background-size: 256px 256px;
}
.section--navy.section--standalone {
  position: relative;
  background: var(--navy);
  padding: 100px 48px;
}
.section__inner--wide {
  max-width: 1100px;
  margin: 0 auto; /* also used without .section__inner (events, contact, staff) */
}
.section__heading--dark {
  color: var(--shadow);
}
.section__heading--light {
  color: var(--white);
}
.section__intro {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
  max-width: 640px;
}
.section__intro--dark {
  color: var(--stone);
}
.section__intro--light {
  color: rgba(245,237,227,0.65);
}


/* ============================================================================
   6. COMPONENTS
   ============================================================================ */

/* ── 6a. DETAIL BLOCK (youth.html canonical — only source with .detail) ── */
.detail {
  margin-top: 40px;
  padding: 40px;
  background: var(--white);
  border-left: 3px solid var(--gold);
}
.detail__heading {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 22px;
  color: var(--navy);
  margin-bottom: 8px;
}
.detail__meta {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.detail__text {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.8;
  color: var(--shadow);
}
.detail__text ul {
  margin: 12px 0 12px 24px;
  list-style: disc;
}
.detail__text ul li {
  margin-bottom: 6px;
}
/* spacing between stacked .detail__text paragraphs */
.detail__text + .detail__text {
  margin-top: 14px;
}
/* Lists must be siblings of .detail__text, never nested in a <p> (browsers
   close the <p> early and the list loses its styling) — youth.html comment,
   preserved verbatim as it documents a real markup gotcha. */
.detail__list {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.8;
  color: var(--shadow);
  margin: 12px 0 12px 24px;
  list-style: disc;
}
.detail__list li {
  margin-bottom: 6px;
}
.detail + .detail {
  margin-top: 24px;
}

/* ── 6b. CARD (per GUIDE §Components — grep target `.card` not found
   byte-for-byte in any of the four canonical sources; the guide describes
   the pattern but none of anointing/mass-times/youth/baptism actually
   instantiates a literal `.card` class. Closest concrete implementations are
   .prep-card (6d) and .event-card (6e) below, both faithfully extracted.
   No `.card` rule is invented here — see EXCLUDED list in the report. ── */

/* ── 6c. PREP-GRID / PREP-CARD (baptism.html canonical — numbered cards) ── */
.prep-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 48px;
}
.prep-card {
  padding: 40px 32px;
  border: 1px solid rgba(245,237,227,0.1);
  margin-right: -1px;
  margin-bottom: -1px;
}
.prep-card__number {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 40px;
  color: var(--gold);
  opacity: 0.4;
  margin-bottom: 16px;
  line-height: 1;
}
.prep-card__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 20px;
  color: var(--white);
  margin-bottom: 12px;
  letter-spacing: -0.5px;
}
.prep-card__text {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(245,237,227,0.6);
}

/* ── 6d. EVENTS-GRID / EVENT-CARD (+ --wide) — youth.html canonical ── */
.events-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: 900px;
  margin: 40px auto 0;
}
.event-card {
  padding: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.event-card:nth-child(odd) {
  border-right: 1px solid rgba(255,255,255,0.1);
}
.event-card--wide {
  grid-column: 1 / -1;
  border-right: none !important;
}
.event-card__label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.event-card__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 22px;
  color: var(--white);
  margin-bottom: 12px;
  line-height: 1.3;
}
.event-card__text {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  line-height: 1.7;
}

/* ── 6e. CALLOUT — per GUIDE §Components ("white box, border-left:3px solid
   var(--gold), used for schedules/notices, max-width 560px"). None of the
   four canonical sources instantiate a literal `.callout` class either;
   the closest real implementation is `.detail` (6a, also white bg +
   gold left border, though 40px padding not 560px max-width capped) and
   `.contact-block` (6f). No invented `.callout` rule added — see EXCLUDED
   list in the report. ── */

/* ── 6f. CONTACT BLOCKS — youth.html .contact-block, baptism.html
   .contact-cta (two distinct patterns, not the same component) ── */
.contact-block {
  margin-top: 40px;
  padding: 48px;
  background: var(--white);
  border-left: 3px solid var(--gold);
  display: flex;
  gap: 48px;
  align-items: flex-start;
}
.contact-block__info {
  flex: 1;
}
.contact-block__name {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 22px;
  color: var(--navy);
  margin-bottom: 4px;
}
.contact-block__role {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.contact-block__text {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 15px;
  color: var(--shadow);
  line-height: 1.8;
}
.contact-block__link {
  display: inline-block;
  margin-top: 20px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  border: 1px solid var(--gold);
  padding: 12px 28px;
  transition: background 0.2s, color 0.2s;
}
.contact-block__link:hover {
  background: var(--gold);
  color: var(--white);
}

/* ── contact-cta (baptism.html) + its buttons ── */
.contact-cta {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}
.contact-cta__heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: 40px;
  letter-spacing: -1.5px;
  color: var(--shadow);
  margin-bottom: 16px;
}
.contact-cta__text {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  color: var(--stone);
  line-height: 1.7;
  margin-bottom: 32px;
}
.contact-cta__text a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 400;
  transition: color 0.2s;
}
.contact-cta__text a:hover {
  color: #b8842f;
}
.contact-cta__buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.contact-cta__btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 14px 32px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.contact-cta__btn--primary {
  background: var(--gold);
  color: var(--navy);
}
.contact-cta__btn--primary:hover {
  background: #d4a34d;
}
.contact-cta__btn--secondary {
  background: transparent;
  color: var(--shadow);
  border: 1px solid rgba(27,54,93,0.2);
}
.contact-cta__btn--secondary:hover {
  border-color: var(--navy);
  color: var(--navy);
}

/* ── 6g. CTA BLOCK / CTA BAND — two distinct components, not the same:
   anointing.html `.cta` (navy contact band with phone number) vs
   youth.html `.cta-band` (thin navy strip with heading + one link). ── */
.cta {
  text-align: center;
  padding: 80px 48px;
  background: var(--navy);
}

/* Cream CTA variant (2026-08-19): the standard navy .cta merges into the navy
   footer when it's the last band on a page. Story pages use this instead. */
.cta.cta--cream { background: var(--cream); }
.cta.cta--cream .cta__heading { color: var(--navy); }
.cta.cta--cream .cta__text { color: var(--shadow); }
.cta.cta--cream .cta__label { color: var(--gold); }


.cta__inner {
  max-width: 600px;
  margin: 0 auto;
}
.cta__label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.cta__heading {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 40px;
  letter-spacing: -1.5px;
  color: var(--cream);
  margin-bottom: 20px;
  line-height: 1.2;
}
.cta__text {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(245,237,227,0.7);
  margin-bottom: 32px;
}
.cta__phone {
  display: inline-block;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 28px;
  color: var(--white);
  text-decoration: none;
  letter-spacing: 1px;
  margin-bottom: 24px;
  transition: color 0.2s;
}
.cta__phone:hover {
  color: var(--gold);
}
.cta__link {
  display: block;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.2s;
}
.cta__link:hover {
  color: var(--cream);
}

.cta-band {
  text-align: center;
  padding: 60px 48px;
  background: var(--navy);
}
.cta-band__text {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  color: var(--white);
  letter-spacing: -1px;
  margin-bottom: 24px;
}
.cta-band__link {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  border: 1px solid var(--gold);
  padding: 14px 32px;
  transition: background 0.2s, color 0.2s;
}
.cta-band__link:hover {
  background: var(--gold);
  color: var(--navy);
}

/* ── 6h. EDGE-TAGLINE (rename comment: this is the guide's "motto" pattern —
   youth.html canonical. GUIDE calls it "Tagline line", class stayed
   `.edge-tagline` in the shipped page even though the pattern is
   parish-program-name-agnostic; extracted as-is, not renamed.) ── */
.edge-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -0.5px;
  color: var(--navy);
  margin-bottom: 28px;
}

/* ── 6i. EDGE-CTA (note: this is the design system's SOLID button — gold
   bg / navy text, hover inverts to navy bg / cream text. youth.html
   canonical; class name is program-specific in the shipped markup but the
   rule itself is the system's general solid-button pattern per the guide.) ── */
.edge-cta {
  display: inline-block;
  margin-top: 28px;
  padding: 15px 36px;
  background: var(--gold);
  color: var(--navy);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.edge-cta:hover {
  background: var(--navy);
  color: var(--cream);
}

/* ── 6j. FLYER / POSTER FIGURE — per GUIDE §Components ("190px thumbnail,
   1px navy-tint border, 5px white padding, caption '… · tap to view',
   wrapped in <a> to the full image → lightbox opens it"; pattern lives on
   adult-formation.html / rcia.html per the guide). NOT present in any of the
   four canonical sources read for this extraction (anointing, mass-times,
   youth, baptism) — no rule invented here. See EXCLUDED list in the report;
   this component must be extracted from adult-formation.html/rcia.html in a
   follow-up pass if it's needed in site.css. ── */

/* ── 6k-bis. STORY-QUOTE (stories.html / stories/*.html, added 2026-08-19) —
   a modest pull-quote treatment for a single strong line inside first-person
   parishioner story text. NOT the same component as .edge-tagline (that's the
   guide's sanctioned motto-only pattern, section-level, used once as a program
   tagline) — .story-quote is scoped to body copy inside a story page, may
   repeat once per story if there's a genuinely strong line, and carries an
   attribution-style left rule rather than being centered. Documented in the
   gallery (§6, Story Quote) and in GUIDE-design-system-st-isidore.md
   Components list in the same commit. ── */
.story-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.45;
  color: var(--navy);
  border-left: 2px solid var(--gold);
  padding-left: 28px;
  margin: 40px 0;
  max-width: 560px;
}

/* ── 6k. OVERVIEW BODY / SCRIPTURE PULL (baptism.html only) ── */
.overview__body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
  color: var(--shadow);
  max-width: 640px;
  margin-top: 32px;
}
.overview__body p + p {
  margin-top: 20px;
}
.overview__scripture {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.6;
  color: var(--navy);
  border-left: 2px solid var(--gold);
  padding-left: 24px;
  margin: 40px 0;
  max-width: 560px;
}
.overview__scripture-ref {
  display: block;
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--stone);
  margin-top: 12px;
}

/* ── 6l. SCHEDULE-BLOCK / DOCS-LIST / FAQ (baptism.html only — used by other
   sacrament pages per the guide's shared-sibling convention; extracted as
   part of baptism.html's canonical CSS since baptism is one of the four
   named sources) ── */
.schedule-block {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}
.schedule-block__col h3 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 22px;
  color: var(--navy);
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}
.schedule-block__col p {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.8;
  color: var(--shadow);
}
.schedule-block__col p + p {
  margin-top: 16px;
}
.schedule-block__col a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 400;
  transition: color 0.2s;
}
.schedule-block__col a:hover {
  color: #b8842f;
}

.docs-list {
  margin-top: 40px;
  list-style: none;
}
.docs-list__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(27,54,93,0.1);
}
.docs-list__item:first-child {
  border-top: 1px solid rgba(27,54,93,0.1);
}
.docs-list__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.docs-list__icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.docs-list__content h4 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  color: var(--navy);
  margin-bottom: 4px;
}
.docs-list__content p {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 14px;
  color: var(--stone);
  line-height: 1.6;
}

.faq {
  margin-top: 48px;
}
.faq__item {
  border-bottom: 1px solid rgba(245,237,227,0.1);
  padding: 32px 0;
}
.faq__item:first-child {
  border-top: 1px solid rgba(245,237,227,0.1);
}
.faq__question {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 20px;
  color: var(--white);
  margin-bottom: 12px;
  letter-spacing: -0.5px;
  line-height: 1.3;
}
.faq__answer {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(245,237,227,0.65);
  max-width: 640px;
}

/* ── 6m. INFO-LIST (youth.html only) ── */
.info-list {
  list-style: none;
  margin-top: 32px;
}
.info-list__item {
  padding: 20px 0;
  border-bottom: 1px solid rgba(45,41,38,0.1);
  display: flex;
  gap: 24px;
}
.info-list__item:first-child {
  border-top: 1px solid rgba(45,41,38,0.1);
}
.info-list__marker {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 20px;
  color: var(--gold);
  flex-shrink: 0;
  width: 32px;
  text-align: center;
  line-height: 1.6;
}
.info-list__content {
  flex: 1;
}
.info-list__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  color: var(--navy);
  margin-bottom: 4px;
}
.info-list__text {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 14px;
  color: var(--stone);
  line-height: 1.6;
}

/* ── 6n. EDITORIAL LINK / SECTION-LABEL utilities (mass-times.html only —
   its own eyebrow-label + link-underline utility classes, functionally
   parallel to .section__label / .section__text a but under different names
   since mass-times doesn't use the `.section` component at all) ── */
.section-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
}
.editorial-link {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(201,148,62,0.4);
  padding-bottom: 2px;
  transition: border-color 0.2s;
}
.editorial-link:hover { border-color: var(--gold); }
.editorial-link--light {
  color: var(--gold);
  border-bottom-color: rgba(201,148,62,0.3);
}
.editorial-link--light:hover { border-color: var(--gold); }


/* ============================================================================
   7. FOOTER — SITEMAP REDESIGN (2026-08-19)
   ============================================================================
   Replaces the old 3-column "Contact / Quick Links / Office Hours" footer
   (kept below as commented archaeology — see FOOTER ARCHIVE at the end of
   this section) with a full sitemap footer, corporate-style (parish's
   reference: Notion's footer): every page listed, organized in columns, so
   nothing on the growing site is ever hidden behind a dropdown-only nav.

   Structure: an identity/contact block (left, wide, visually SET APART —
   serif wordmark, larger type, gold rule, distinct from the link columns
   per the parish's ask) + six link columns mirroring the nav's top-level
   dropdown structure one-for-one (Mass & Confession / Sacraments /
   Ministries / Events / About / Parish), a social row, and the existing
   bottom copyright + Parish Login bar preserved as-is.

   Links are root-relative (href="/mass-times") — the one shared markup
   block is now byte-identical and correct at every depth (root pages and
   nested subpages alike), replacing the old depth-relative "../" links
   that made per-depth copies necessary. Confirmed server.js resolves clean
   root-relative paths identically regardless of request depth.

   All previous per-page drift (youth's wider max-width/opacities, the
   compact one-line markup some pages used, index.html's 4-column "Visit
   Us/Connect" variant) is superseded — every page now ships this one
   canonical block.
   ============================================================================ */
/* Footer separation (2026-08-19): when the last band before the footer is also
   navy, the two merge into one indistinguishable mass. A gold hairline gives the
   footer its own edge without forcing every page to end on cream. */
.footer { background: var(--navy); padding: 80px 48px 40px; text-align: left;
  /* separation when the last section before the footer is also navy (2026-08-19) */
  border-top: 1px solid rgba(201,148,62,0.28); }
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(6, 1fr);
  gap: 40px;
  max-width: 1280px;
  margin: 0 auto;
}

/* ── Identity/contact block — set apart from the link columns: serif
   wordmark, larger type, gold rule separator, distinct color weight. ── */
.footer__identity {
  padding-right: 24px;
  border-right: 1px solid rgba(245,237,227,0.1);
  text-align: left;
}
.footer__wordmark {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 26px;
  letter-spacing: -0.5px;
  color: var(--white);
  line-height: 1.25;
  margin-bottom: 20px;
  text-transform: none;
}
.footer__identity-rule {
  width: 40px;
  height: 2px;
  background: var(--gold);
  margin-bottom: 20px;
}
.footer__identity-text {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 14.5px;
  line-height: 1.9;
  color: rgba(245,237,227,0.7);
  text-transform: none;
}
.footer__identity-text a {
  color: rgba(245,237,227,0.85);
  text-decoration: none;
  transition: color 0.2s;
}
.footer__identity-text a:hover { color: var(--gold); }
.footer__identity-hours {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(245,237,227,0.1);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(245,237,227,0.55);
  text-transform: none;
}

/* ── Link columns — one per nav top-level section, gold eyebrow header,
   Inter link list, sharp corners (no rounding anywhere). ── */
.footer__col-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.footer__col-list {
  list-style: none;
  text-align: left;
}
.footer__col-list li + li { margin-top: 12px; }
.footer__col-list a {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(245,237,227,0.65);
  text-decoration: none;
  text-transform: none;
  transition: color 0.2s;
}
.footer__col-list a:hover { color: var(--gold); }

/* ── Social row ── */
.footer__social {
  max-width: 1280px;
  margin: 48px auto 0;
  padding-top: 32px;
  border-top: 1px solid rgba(245,237,227,0.08);
  display: flex;
  gap: 28px;
}
.footer__social a {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(245,237,227,0.55);
  text-decoration: none;
  transition: color 0.2s;
}
.footer__social a:hover { color: var(--gold); }
/* 2026-09-03: social row is line icons (thin-stroke SVG, currentColor) instead of text labels.
   Rounded rect on the Instagram glyph is the brand mark itself, not a UI surface. */
.footer__social a svg { display: block; width: 22px; height: 22px; }

/* ── Bottom rule — copyright + Parish Login, preserved verbatim from the
   old footer (same classes, so unrelated markup elsewhere referencing
   .footer__rule/.footer__copy/.footer__secondary keeps working). ── */
.footer__rule { max-width: 1280px; margin: 24px auto 0; padding-top: 24px; border-top: 1px solid rgba(245,237,227,0.08); display: flex; justify-content: space-between; align-items: center; }
.footer__copy { font-family: var(--font-sans); font-weight: 300; font-size: 12px; color: var(--stone); letter-spacing: 0.5px; text-transform: none; }
.footer__secondary { display: flex; gap: 24px; }
.footer__secondary a { font-family: var(--font-sans); font-weight: 300; font-size: 12px; color: var(--stone); text-decoration: none; letter-spacing: 0.5px; text-transform: none; transition: color 0.2s; }
.footer__secondary a:hover { color: var(--cream); }

@media (max-width: 1100px) {
  .footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer__identity { grid-column: 1 / -1; border-right: none; border-bottom: 1px solid rgba(245,237,227,0.1); padding-right: 0; padding-bottom: 32px; margin-bottom: 8px; }
}
@media (max-width: 768px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
}
@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr; }
  .footer__identity { text-align: left; }
  .footer__social { flex-wrap: wrap; gap: 20px; }
}

/* ============================================================================
   FOOTER ARCHIVE — superseded 3-column "Contact / Quick Links / Office
   Hours" footer (canonical 2026-08-18 to 2026-08-19). Kept as archaeology
   per this file's convention; NOT applied anywhere after the 2026-08-19
   sitemap-footer rollout. anointing.html, mass-times.html, and baptism.html
   shared a BYTE-IDENTICAL version of this block; youth.html's footer
   DIFFERED in several values — see the (also archived) youth-variant rules
   that followed it.
   ============================================================================
.footer { background: var(--navy); padding: 72px 48px 40px; }
.footer__inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; max-width: 900px; margin: 0 auto; }
.footer__label { font-family: var(--font-sans); font-weight: 500; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; }
.footer__text { font-family: var(--font-sans); font-weight: 300; font-size: 14px; line-height: 1.9; color: rgba(245,237,227,0.65); }
.footer__text a { color: rgba(245,237,227,0.65); text-decoration: none; transition: color 0.2s; }
.footer__text a:hover { color: var(--gold); }
.footer__rule { max-width: 900px; margin: 48px auto 0; padding-top: 24px; border-top: 1px solid rgba(245,237,227,0.08); display: flex; justify-content: space-between; align-items: center; }
.footer__copy { font-family: var(--font-sans); font-weight: 300; font-size: 12px; color: var(--stone); letter-spacing: 0.5px; }
.footer__secondary { display: flex; gap: 24px; }
.footer__secondary a { font-family: var(--font-sans); font-weight: 300; font-size: 12px; color: var(--stone); text-decoration: none; letter-spacing: 0.5px; transition: color 0.2s; }
.footer__secondary a:hover { color: var(--cream); }

youth.html footer variant — NOT canonical (anointing wins). Divergent
   values: .footer padding 80px 48px 40px (not 72px); .footer__inner
   max-width 1100px (not 900px); .footer__text line-height 2 (not 1.9),
   color rgba(255,255,255,.6) (not rgba(245,237,227,.65)); .footer__text
   a:hover → var(--white) (not var(--gold)); .footer__rule max-width 1100px,
   border-top rgba(255,255,255,.1) (not rgba(245,237,227,.08));
   .footer__copy color rgba(255,255,255,.4) (not var(--stone), no
   letter-spacing); .footer__secondary a has letter-spacing 1px + uppercase
   + font-weight 400 (anointing's .footer__secondary a has no
   letter-spacing/uppercase and is font-weight 300), color
   rgba(255,255,255,.4), hover → var(--white) (not var(--cream)). Kept scoped
   under a variant class rather than silently discarded.
.footer--youth-variant { padding: 80px 48px 40px; color: rgba(255,255,255,0.65); font-family: var(--font-sans); font-size: 14px; font-weight: 300; line-height: 1.8; }
.footer--youth-variant .footer__inner { max-width: 1100px; }
.footer--youth-variant .footer__text { line-height: 2; color: rgba(255,255,255,0.6); }
.footer--youth-variant .footer__text a { color: rgba(255,255,255,0.6); }
.footer--youth-variant .footer__text a:hover { color: var(--white); }
.footer--youth-variant .footer__rule { max-width: 1100px; border-top: 1px solid rgba(255,255,255,0.1); }
.footer--youth-variant .footer__copy { color: rgba(255,255,255,0.4); letter-spacing: normal; }
.footer--youth-variant .footer__secondary a { font-weight: 400; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,0.4); }
.footer--youth-variant .footer__secondary a:hover { color: var(--white); }
   ============================================================================ */


/* ---- Video embed (added 2026-08-27, teen-confirmation) ---------------------
   Responsive 16:9 frame for a hosted video (YouTube/Vimeo iframe inside).
   Sharp corners; dark chrome ground shows while the player loads. Works on
   cream and navy bands. */
.video-embed {
  position: relative;
  max-width: 880px;
  margin: 48px auto 0;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(27,54,93,0.12);
  background: #13202F;
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}



/* ---- Calendar (added 2026-09-18, teen-confirmation) ------------------------
   A parish program calendar: a numbered grid of recurring sessions plus dated
   rows for one-off obligations. Built for the 2026-27 Confirmation calendar,
   which families read on a phone while holding a paper copy, so the two must
   agree at a glance — session numbers are shown because the PDF numbers them.

   Three pieces, usable independently:
     .cal-grid / .cal-session   numbered session tiles (the recurring set)
     .cal-rows  / .cal-row      date + description rows (holy days, other dates)
     .cal-note                  a full-width caveat under either

   Sharp corners, gold eyebrow numerals, hairline rules — same vocabulary as
   .info-list and .event-card. Works on cream; on navy add --dark. */
.cal-year {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 40px 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(201,148,62,0.35);
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
  gap: 1px;
  /* The 1px gap IS the rule line: the background shows through between tiles.
     A partly-filled last row would therefore paint bare background where the
     missing tiles are, reading as broken cells — so the grid is transparent and
     each tile draws its own hairline instead. */
  background: transparent;
  border-top: 1px solid rgba(45,41,38,0.1);
  border-left: 1px solid rgba(45,41,38,0.1);
}
.cal-session {
  background: var(--cream);
  padding: 16px 18px;
  display: flex;
  gap: 14px;
  align-items: baseline;
  min-height: 78px;
  border-right: 1px solid rgba(45,41,38,0.1);
  border-bottom: 1px solid rgba(45,41,38,0.1);
  margin: -0.5px;
}
.cal-session__num {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 15px;
  color: var(--gold);
  flex-shrink: 0;
  min-width: 18px;
  font-variant-numeric: tabular-nums;
}
.cal-session__body { flex: 1; }
.cal-session__date {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  color: var(--navy);
  line-height: 1.35;
}
.cal-session__tag {
  display: block;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 12.5px;
  color: var(--stone);
  margin-top: 4px;
  line-height: 1.45;
}
/* The NEXT gathering — the one thing a parent opening this page actually wants.
   Set by script from data-date (see teen-confirmation.html), never hardcoded. A gold
   left rule + label rather than a fill, so it reads as emphasis without competing
   with the eyebrow labels above the grid. */
.cal-session--next {
  box-shadow: inset 3px 0 0 var(--gold);
  background: rgba(201,148,62,0.06);
}
.cal-session--next .cal-session__date { font-weight: 600; }
.cal-session__next-label {
  display: block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 5px;
}
.cal-grid--dark .cal-session--next { background: rgba(201,148,62,0.12); }

/* A session already held: recedes, but stays on the grid so the numbering
   matches the printed calendar families are holding. */
.cal-session--past { background: rgba(45,41,38,0.035); }
.cal-session--past .cal-session__num,
.cal-session--past .cal-session__date { color: var(--stone); }

.cal-rows { margin-top: 8px; }
.cal-row {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 8px 24px;
  align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px solid rgba(45,41,38,0.1);
}
.cal-row:first-child { border-top: 1px solid rgba(45,41,38,0.1); }
.cal-row__date {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--gold);
}
.cal-row__what {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--shadow);
}
.cal-row__what strong { font-weight: 500; color: var(--navy); }
/* Not-yet-confirmed dates. The parish says "we will always tell you in
   advance", so a tentative date must LOOK tentative, never like a promise. */
.cal-row__pill {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--wood);
  border: 1px solid rgba(139,94,60,0.45);
  padding: 2px 8px;
  margin-left: 10px;
  vertical-align: 2px;
  white-space: nowrap;
}
.cal-note {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--stone);
  margin-top: 20px;
  padding-left: 16px;
  border-left: 2px solid rgba(201,148,62,0.5);
}

/* Dark variant — same components on a navy band. */
.cal-grid--dark { background: transparent; border-top-color: rgba(245,237,227,0.14); border-left-color: rgba(245,237,227,0.14); }
.cal-grid--dark .cal-session { background: var(--navy); border-right-color: rgba(245,237,227,0.14); border-bottom-color: rgba(245,237,227,0.14); }
.cal-grid--dark .cal-session__date { color: var(--white); }
.cal-grid--dark .cal-session__tag { color: rgba(245,237,227,0.6); }
.cal-grid--dark .cal-session--past { background: rgba(245,237,227,0.05); }
.cal-grid--dark .cal-session--past .cal-session__date { color: rgba(245,237,227,0.5); }
.cal-row--dark { border-bottom-color: rgba(245,237,227,0.14); }
.cal-row--dark:first-child { border-top-color: rgba(245,237,227,0.14); }
.cal-row--dark .cal-row__what { color: rgba(245,237,227,0.75); }
.cal-row--dark .cal-row__what strong { color: var(--white); }


/* ---- Video feed: featured + rows (promoted to site.css 2026-09-18) ---------
   Originated page-local in events/pastor-message.html; promoted verbatim when
   /ministries/teen-confirmation became the second consumer (Confirmation
   session recordings). Renders one /api/videos feed: newest embedded, the rest
   as editorial rows linking to /watch/<id>. pastor-message.html still carries
   its own copy of these rules; its copy is now redundant and should be deleted
   the next time that page is touched. */
.pc-featured { margin-bottom: 48px; margin-top: 40px; }
.pc-featured__label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.pc-featured__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 26px;
  letter-spacing: -0.5px;
  color: var(--shadow);
  line-height: 1.3;
  margin-bottom: 20px;
}
.pc-featured__frame-wrap { position: relative; padding-bottom: 56.25%; height: 0; background: var(--navy); }
.pc-featured__frame-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pc-video-list { display: flex; flex-direction: column; margin-top: 8px; }
.pc-video-row {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 8px 20px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid rgba(45,41,38,0.08);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}
.pc-video-row:hover { background: rgba(201,148,62,0.05); }
.pc-video-row:last-child { border-bottom: none; }
.pc-video-row__date {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold);
}
.pc-video-row__title {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14.5px;
  color: var(--shadow);
}
.pc-video-row__link {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1px;
  transition: color 0.2s;
}
.pc-video-row__link:hover { color: var(--wood); }
/* Dark variant — the section sits on a navy band on teen-confirmation. */
.pc-featured--dark .pc-featured__title { color: var(--white); }
.pc-video-row--dark { border-bottom-color: rgba(245,237,227,0.14); }
.pc-video-row--dark .pc-video-row__title { color: rgba(245,237,227,0.85); }
.pc-video-row--dark:hover { background: rgba(245,237,227,0.05); }


/* ============================================================================
   8. RESPONSIVE (≤768px, merged from all four canonical sources; each
      page's own selectors kept intact — not renamed or reconciled beyond
      what's above)

   NOTE: the mass-times.html block below includes responsive overrides for
   .schedule/.confession/.adoration/.holyweek and their descendants
   (.schedule__row, .confession__grid, etc.) even though those components'
   BASE (non-responsive) rules were deliberately EXCLUDED from section 5
   (SECTIONS) as mass-times-only page-local one-offs — mass-times never
   reuses the shared `.section` class, so importing its bespoke band system
   wholesale into the shared component library would misrepresent it as
   reusable. This responsive block is kept anyway because the task calls for
   §8 to merge "the ≤768px/≤480px blocks for all the above" from the
   canonical pages verbatim; these overrides are meaningless without
   mass-times.html's own base CSS and are NOT usable standalone from
   site.css — a page that wants this pattern must still copy mass-times.html
   directly (per the guide's "copy the canonical sibling" rule), not build
   on top of site.css. Do not treat this block's presence as evidence the
   pattern was promoted to a shared component.
   ============================================================================ */
@media (max-width: 768px) {
  /* anointing.html */
  .nav__links { display: none; }
  .nav { padding: 22px 24px; }
  .nav__give { font-size: 10px; padding: 8px 18px; }

  .page-hero { min-height: 340px; }
  .page-hero__content { padding: 0 24px 40px; }
  .page-hero__title { font-size: 40px; }

  .section { padding: 64px 24px; }
  .section__heading { font-size: 36px; }

  .cta { padding: 64px 24px; }
  .cta__heading { font-size: 32px; }
  .cta__phone { font-size: 24px; }

  .footer { padding: 48px 24px 32px; }
  .footer__grid { padding: 0; }
  .footer__social { flex-wrap: wrap; }
  .footer__rule { flex-direction: column; gap: 16px; text-align: center; }

  /* mass-times.html (some selectors overlap anointing above by name but
     carry mass-times-specific values on mass-times-only classes — kept as
     written on that page) */
  .page-hero__cross { font-size: 160px; right: 5%; }

  .schedule,
  .confession,
  .adoration,
  .holyweek { padding: 64px 24px; }

  .livestream { padding: 0 24px 48px; }
  .livestream__inner { flex-direction: column; align-items: flex-start; }

  .schedule__heading,
  .confession__heading,
  .adoration__heading,
  .holyweek__heading { font-size: 36px; letter-spacing: -1.5px; }

  .schedule__row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 20px 0;
  }
  .schedule__day { padding-top: 0; }

  .confession__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .adoration__content {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .holyweek__row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 20px 0;
  }

  .footer__secondary { flex-wrap: wrap; justify-content: center; }

  /* youth.html */
  .nav__links,
  .nav__give { display: none; }

  [data-nav-variant="youth"].nav { padding: 16px 24px; }
  [data-nav-variant="youth"].nav--scrolled { padding: 12px 24px; }

  .hero { min-height: 340px; }
  .hero__content { padding: 0 24px 40px; }
  .hero__heading { font-size: 32px; letter-spacing: -1px; }
  .hero__sub { font-size: 14px; }

  .detail { padding: 28px 24px; }

  .events-grid { grid-template-columns: 1fr; }
  .event-card { padding: 28px 0; border-right: none !important; }

  .info-list__item { flex-direction: column; gap: 8px; }

  .contact-block { flex-direction: column; padding: 28px 24px; gap: 24px; }

  .cta-band__text { font-size: 22px; }

  /* baptism.html */
  .prep-grid { grid-template-columns: 1fr; }
  .prep-card { margin-right: 0; }

  .schedule-block { grid-template-columns: 1fr; gap: 40px; }

  /* Calendar (teen-confirmation) — two tiles per row stay readable at 360px;
     the date/description rows stack so long descriptions get full width. */
  .cal-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .cal-session { padding: 14px; gap: 10px; min-height: 0; }
  .cal-session__date { font-size: 14px; }
  .cal-row { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
  .cal-row__pill { margin-left: 0; margin-top: 6px; }

  /* Video feed rows stack (promoted with the component, 2026-09-18). */
  .pc-video-row { grid-template-columns: 1fr; gap: 4px; }
  .pc-video-row__link { justify-self: start; margin-top: 6px; }

  .contact-cta__heading { font-size: 32px; }
}


/* ============================================================================
   FEATURED SLIDER — homepage "Upcoming Events" (2026-09-23, wm #42)
   Server-rendered from data/featured.json (featured.js); featured-slider.js adds
   arrows + counter. Native scroll-snap = swipe on phones with zero JS. A slide is
   photo (image cover-cropped), flyer (.featured__media--contain: art with its own
   text, never cropped), or text-only (.featured__slide--text: no image, type only).
   No autoplay by default — see the design guide's motion rules.
   ============================================================================ */
.featured { position: relative; background: var(--navy); padding: 96px 48px; overflow: hidden; }
.featured__inner { max-width: 900px; margin: 0 auto; }
.featured__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.featured__heading {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(32px, 4vw, 44px); letter-spacing: -1px; line-height: 1.1;
  color: var(--cream); margin: 14px 0 0;
}
.featured__controls { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.featured__arrow {
  width: 44px; height: 44px; border: 1px solid rgba(201,148,62,0.6); background: transparent;
  color: var(--gold); font-size: 18px; line-height: 1; cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.featured__arrow:hover, .featured__arrow:focus-visible { background: var(--gold); color: var(--navy); outline: none; }
.featured__count { font-family: var(--font-sans); font-weight: 500; font-size: 12px; letter-spacing: 2px; color: rgba(245,237,227,0.7); min-width: 44px; text-align: center; }
.featured__track {
  display: flex; gap: 48px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.featured__track::-webkit-scrollbar { display: none; }
.featured__track:focus-visible { outline: 1px solid var(--gold); outline-offset: 6px; }
.featured__slide {
  flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center;
}
.featured__media { aspect-ratio: 3 / 2; background: #13202F; overflow: hidden; }
.featured__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.featured__media--contain img { object-fit: contain; }
.featured__when {
  font-family: var(--font-sans); font-weight: 500; font-size: 11px; letter-spacing: 3px;
  text-transform: uppercase; color: var(--gold); margin-bottom: 14px;
}
.featured__title {
  font-family: var(--font-serif); font-weight: 400; font-size: clamp(24px, 2.6vw, 32px);
  letter-spacing: -0.5px; line-height: 1.2; color: var(--cream); margin: 0 0 18px;
}
.featured__body {
  font-family: var(--font-sans); font-weight: 300; font-size: 15px; line-height: 1.75;
  color: rgba(245,237,227,0.78); margin: 0 0 16px; max-width: 520px;
}
.featured__link { display: inline-block; margin-top: 8px; }
.featured__link:hover { color: var(--cream); }
/* Text-only slide: no picture, the words are the design. */
.featured__slide--text { grid-template-columns: 1fr; text-align: center; min-height: 320px; }
.featured__slide--text .featured__text { max-width: 720px; margin: 0 auto; padding: 48px 0; border-top: 1px solid rgba(201,148,62,0.4); border-bottom: 1px solid rgba(201,148,62,0.4); }
.featured__slide--text .featured__title { font-style: italic; font-size: clamp(30px, 4vw, 46px); }
.featured__slide--text .featured__body { margin-left: auto; margin-right: auto; }
.featured__more { display: inline-block; margin-top: 44px; }
.featured__more:hover { color: var(--cream); }

@media (max-width: 768px) {
  .featured { padding: 64px 24px; }
  .featured__head { margin-bottom: 28px; }
  .featured__arrow { width: 40px; height: 40px; }
  .featured__slide { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .featured__slide--text { min-height: 0; }
}

/* CTA BOX — navy "take the first step" panel with a solid gold button (2026-09-23).
   Same look as the inline-styled box on /sacraments/ocia (that page left untouched on purpose). */
.cta-box { background: var(--navy); padding: 52px 48px; margin-top: 56px; position: relative; overflow: hidden; }
.cta-box__label { font-family: var(--font-sans); font-weight: 500; font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.cta-box__heading { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(24px,3vw,34px); letter-spacing: -1px; color: var(--cream); line-height: 1.2; margin: 0 0 10px; max-width: 18em; }
.cta-box__text { font-family: var(--font-sans); font-weight: 300; font-size: 14px; color: rgba(245,237,227,0.7); margin: 0 0 32px; max-width: 520px; line-height: 1.7; }
.cta-box__actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.cta-box__button { font-family: var(--font-sans); font-weight: 600; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--navy); background: var(--gold); padding: 14px 30px; text-decoration: none; }
.cta-box__aside { font-family: var(--font-sans); font-weight: 300; font-size: 13px; color: rgba(245,237,227,0.75); }
.cta-box__aside b { font-weight: 500; color: var(--cream); }
.cta-box__aside a { color: var(--gold); text-decoration: none; }
.section__heading + .cta-box { margin-top: 0; }


/* SITE FORM — simple public form (2026-09-24): "How Can We Pray for You?" + "Website Updates".
   Markup: form.si-form[data-endpoint] > .si-form__field (label + input/textarea) + button.si-form__submit;
   site-form.js posts JSON and swaps in .si-form__done. Pages using it link site.css?v=2026-09-24. */
.si-form { max-width: 620px; margin-top: 36px; }
.si-form__field { margin-bottom: 22px; }
.si-form__field label { display: block; font-family: var(--font-sans); font-weight: 500; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--navy); margin-bottom: 8px; }
.si-form__field input, .si-form__field textarea { width: 100%; box-sizing: border-box; font-family: var(--font-sans); font-weight: 300; font-size: 15px; line-height: 1.6; color: var(--shadow); background: #fff; border: 1px solid rgba(27,54,93,0.2); padding: 12px 14px; border-radius: 0; }
.si-form__field textarea { min-height: 160px; resize: vertical; }
.si-form__field input:focus, .si-form__field textarea:focus { outline: none; border-color: var(--gold); }
.si-form__hint { font-family: var(--font-sans); font-weight: 300; font-size: 12.5px; color: var(--stone); margin-top: 6px; }
.si-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.si-form__submit { font-family: var(--font-sans); font-weight: 600; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--navy); background: var(--gold); border: 0; padding: 14px 30px; cursor: pointer; transition: background .2s, color .2s; }
.si-form__submit:hover { background: var(--navy); color: var(--cream); }
.si-form__submit:disabled { opacity: .6; cursor: default; }
.si-form__done { font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.6; color: var(--navy); background: #fff; border-left: 3px solid var(--gold); padding: 18px 22px; margin-top: 36px; max-width: 620px; }
.si-form__done::before { content: '\2713'; color: var(--gold); font-weight: 600; margin-right: 10px; }
.si-form__error { font-family: var(--font-sans); font-size: 13.5px; color: #9b2c2c; margin-top: 14px; }
/* Yes/No choice (2026-09-24, prayer form "Prayers for the Sick"): fieldset.si-form__field.si-form__choice >
   legend (eyebrow, like a label) + p.si-form__question + label > input[type=radio] per option. */
.si-form__choice { border: 0; padding: 0; min-width: 0; }
.si-form__choice legend { padding: 0; font-family: var(--font-sans); font-weight: 500; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--navy); margin-bottom: 8px; }
.si-form__question { font-family: var(--font-sans); font-weight: 300; font-size: 15px; line-height: 1.6; color: var(--shadow); margin-bottom: 10px; }
.si-form__choice label { display: inline-flex; align-items: center; gap: 8px; margin: 0 28px 0 0; font-weight: 400; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--shadow); cursor: pointer; }
.si-form__choice input[type=radio] { width: 18px; height: 18px; margin: 0; padding: 0; accent-color: var(--navy); }

/* cream CTA: contact lines were white-on-cream (invisible) on every .cta--cream page (found 2026-09-24 final review) */
.cta.cta--cream .cta__phone { color: var(--navy); }
.cta.cta--cream .cta__phone:hover { color: var(--gold); }

/* Page header rule (Lesli 2026-09-24): one title size everywhere except the homepage.
   Higher specificity than the page-local 48/52/40px leftovers. */
html body .page-hero__title, html body .hero:not(.hero--home) .hero__title, html body .hero__heading { font-size: 56px; font-style: italic; font-weight: 400; }
@media (max-width: 768px) {
  html body .page-hero__title, html body .hero:not(.hero--home) .hero__title, html body .hero__heading { font-size: 36px; }
}


/* ─── Story pages: "More stories" nav + cards (moved 2026-09-24 from an identical page-local
   block on all 47 story pages; the style-snapshot diff proved zero rendered change) ─── */
.more-stories { background: var(--white); padding: 64px 48px; }
.more-stories__inner { max-width: 1100px; margin: 0 auto; }
.more-stories__nav { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }
.more-stories__navlink { flex: 1; min-width: 220px; text-decoration: none; padding: 20px 24px; border: 1px solid rgba(27,54,93,.1); border-top: 3px solid var(--gold); transition: background .2s; }
.more-stories__navlink:hover { background: #fffdf9; }
.more-stories__navlink--next { text-align: right; }
.more-stories__navlabel { font-family: var(--font-sans); font-weight: 500; font-size: 10.5px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.more-stories__navname { font-family: var(--font-serif); font-weight: 700; font-size: 20px; color: var(--navy); margin-bottom: 6px; }
.more-stories__navquote { font-family: var(--font-serif); font-style: italic; font-size: 13.5px; color: var(--shadow); line-height: 1.5; }
.more-stories__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-bottom: 36px; }
.more-stories__card { display: flex; flex-direction: column; background: var(--white); border: 1px solid rgba(27,54,93,.1); border-top: 3px solid var(--gold); margin-right: -1px; margin-bottom: -1px; text-decoration: none; }
.more-stories__card-photo { height: 150px; background-size: cover; background-position: center;
  /* more-stories hover zoom (2026-08-19) */
  transition: transform 0.45s ease;
}
.more-stories__card { overflow: hidden; }
.more-stories__card:hover .more-stories__card-photo { transform: scale(1.06); }
.more-stories__card-body { padding: 20px; }
.more-stories__card-name { font-family: var(--font-serif); font-weight: 700; font-size: 17px; color: var(--navy); margin-bottom: 8px; }
.more-stories__card-quote { font-family: var(--font-serif); font-style: italic; font-size: 13px; line-height: 1.55; color: var(--shadow); }
.more-stories__links { display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 900px) {
  .more-stories__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .more-stories { padding: 48px 24px; }
  .more-stories__grid { grid-template-columns: 1fr; }
  .more-stories__card { margin-right: 0; }
  .more-stories__nav { flex-direction: column; }
  .more-stories__navlink--next { text-align: left; }
}

/* ─── Shared-element typography pins (2026-09-24). The page banner title, its eyebrow, the top
   nav links and the footer render identically on every page, whatever a page's own <style>
   says (the consistency check in style-snapshot.py found letter-spacing and line-height drift
   on ~22 pages from page-local leftovers). `html body` outranks those leftovers. ─── */
html body .page-hero__title, html body .hero:not(.hero--home) .hero__title, html body .hero__heading { letter-spacing: -2px; line-height: 1.1; }
html body :is(.page-hero, .hero:not(.hero--home)) :is(.page-hero__label, .hero__label, .section-label) { line-height: normal; }
html body .nav__links > li > a { letter-spacing: 0.8px; line-height: normal; }
html body .footer__col-label { line-height: normal; }

/* ─── Video banner (2026-09-24, Bulletin): a short silent loop behind a page title, in place of
   the photo. Markup: inside .page-hero__image (whose background is the poster frame):
   <video class="page-hero__video" autoplay muted loop playsinline poster="...jpg" aria-hidden="true">
   <source src="...mp4" type="video/mp4"></video>. Crop the clip square around the action; set
   object-position inline for the desktop slice. Reduced motion: the still poster shows instead. ─── */
.page-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; }
@media (prefers-reduced-motion: reduce) { .page-hero__video { display: none; } }

/* Contact line in the cream .cta band (2026-09-24, Mike): all five pages that use it put the office
   EMAIL in .cta__phone, which was sized for a short phone number (28px bold, tracked) and read as a
   headline. Email-sized now; the phone link below it is unchanged. */
html body .cta__phone { font-size: 21px; font-weight: 600; letter-spacing: 0; }
@media (max-width: 768px) { html body .cta__phone { font-size: 19px; } }

/* ── Row index (2026-09-25): a section landing page as editorial rows, in the Pastor's Corner
   manner (hairline rules, serif titles, gold small-caps "View →" that nudges on hover), not
   white boxes. Used by /ministries (Discipleship) and /events (Parish Life). Optional
   .row-index__lede (a one-line italic statement above the rows) and .row-index__desc (one
   gray line under a title). Markup: section.section--cream.row-index-section > .row-index >
   [p.row-index__lede] > .row-index__rows > a.row-index__row > span.row-index__text >
   (span.row-index__title + [span.row-index__desc]) + span.row-index__go > span.row-index__arrow ── */
section.row-index-section { position: relative; padding: 110px 48px 120px; } /* element+class: beats page-local .section--cream padding */
.row-index { max-width: 900px; margin: 0 auto; }
.row-index__lede { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 44px; line-height: 1.2; letter-spacing: -1px; color: var(--shadow); margin: 0 0 56px; max-width: 760px; }
.row-index__row { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 30px 0; border-top: 1px solid rgba(27,54,93,0.14); text-decoration: none; }
.row-index__row:last-child { border-bottom: 1px solid rgba(27,54,93,0.14); }
.row-index__text { display: block; }
.row-index__title { display: block; font-family: var(--font-serif); font-weight: 400; font-size: 30px; line-height: 1.2; color: var(--navy); transition: color .2s; }
.row-index__desc { display: block; font-family: var(--font-sans); font-weight: 300; font-size: 14px; line-height: 1.6; color: var(--stone); margin-top: 6px; }
.row-index__go { font-family: var(--font-sans); font-weight: 500; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
.row-index__arrow { display: inline-block; transition: transform 0.2s; }
.row-index__row:hover .row-index__title, .row-index__row:focus-visible .row-index__title { color: var(--gold); }
.row-index__row:hover .row-index__arrow, .row-index__row:focus-visible .row-index__arrow { transform: translateX(3px); }
@media (max-width: 760px) {
  section.row-index-section { padding: 72px 24px 88px; }
  .row-index__lede { font-size: 32px; margin-bottom: 36px; }
  .row-index__row { padding: 24px 0; }
  .row-index__title { font-size: 24px; }
}