/* ==========================================================================
   SACFF — San Antonio Christian Family Fellowship
   Palette: deep navy + antique gold on warm cream.
   ========================================================================== */

:root {
  --navy-900: #071a36;
  --navy-800: #0b2547;
  --navy: #0d2b56;
  --navy-soft: #1a4176;
  --gold: #bf9646;
  --gold-600: #a97f33;
  --gold-200: #ecdcba;
  --gold-050: #f6eeda;
  --cream: #f8f4ec;
  --cream-deep: #f0e9dc;
  --paper: #ffffff;
  --ink: #1d2733;
  --muted: #5d6877;
  --line: #e6e0d4;

  --shell: 1180px;
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;

  --shadow-sm: 0 1px 3px rgba(11, 37, 71, .07), 0 1px 2px rgba(11, 37, 71, .04);
  --shadow: 0 6px 20px rgba(11, 37, 71, .08), 0 2px 6px rgba(11, 37, 71, .05);
  --shadow-lg: 0 18px 44px rgba(11, 37, 71, .14);

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Playfair Display", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --script: "Dancing Script", "Brush Script MT", "Segoe Script", cursive;
}

/* ------------------------------------------------------------ foundations */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
/* <picture> is only a wrapper for the WebP/JPEG choice — take it out of the box
   tree so every layout rule still applies to the <img> as it did before. */
picture { display: contents; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0; letter-spacing: -.005em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.shell { width: min(100% - 40px, var(--shell)); margin-inline: auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 50%; top: -60px; transform: translateX(-50%);
  z-index: 200; background: var(--navy); color: #fff; padding: 10px 18px;
  border-radius: 0 0 var(--r) var(--r); font-size: .9rem; text-decoration: none;
  transition: top .18s ease;
}
.skip-link:focus { top: 0; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--gold-600);
  outline-offset: 3px;
  border-radius: 3px;
}

.ico { width: 1em; height: 1em; fill: currentColor; flex: none; }

/* ----------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .72em 1.35em;
  border: 0; border-radius: var(--r-sm);
  font: 600 .92rem/1.2 var(--sans);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease, color .18s ease;
}
.btn .ico { font-size: 1.15em; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-gold {
  background: linear-gradient(180deg, #cba55a, var(--gold));
  color: #2c1f06;
  box-shadow: 0 2px 10px rgba(163, 121, 42, .3);
}
.btn-gold:hover { background: linear-gradient(180deg, #d6b169, #b98d3c); }

.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-soft); }

.btn-light {
  background: rgba(255, 255, 255, .92);
  color: var(--navy);
  box-shadow: 0 2px 10px rgba(4, 16, 34, .25);
}
.btn-light:hover { background: #fff; }

/* Outlined secondary, for use on white panels where .btn-light would be
   white-on-white. */
.btn-ghost {
  background: transparent; color: var(--navy);
  box-shadow: inset 0 0 0 1px var(--line);
}
.btn-ghost:hover { background: var(--cream); box-shadow: inset 0 0 0 1px var(--gold); }

.btn-block { display: flex; width: 100%; }

/* ------------------------------------------------------------------ header */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; gap: 24px;
  min-height: 72px;
}

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--gold); }
/* The crest carries its own wordmark, but it's unreadable at header scale —
   it reads as an emblem, so the text beside it still does the naming. */
.brand-mark-wrap { display: flex; flex: none; }
.brand-mark { width: auto; height: 54px; }
.brand-text { display: block; line-height: 1.12; }
.brand-text strong {
  display: block; font-family: var(--serif); font-size: 1.62rem;
  font-weight: 700; letter-spacing: .06em; color: var(--navy);
}
.brand-text span {
  display: block; font-size: .695rem; letter-spacing: .015em;
  color: var(--navy); opacity: .82; font-weight: 500;
}

.site-nav { display: flex; align-items: center; gap: 4px; margin-inline: auto; }
.site-nav a {
  position: relative;
  padding: 9px 13px; border-radius: var(--r-sm);
  font-size: .925rem; font-weight: 500; text-decoration: none; color: #374355;
  transition: color .16s ease, background-color .16s ease;
}
.site-nav a:hover { color: var(--navy); background: #f2eee5; }
.site-nav a.is-current { color: var(--gold-600); font-weight: 600; }
.site-nav a.is-current::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 2px;
  height: 2px; border-radius: 2px; background: var(--gold);
}

.header-cta { padding: .78em 1.7em; }
.nav-cta { display: none; }   /* only surfaces inside the collapsed menu */

.nav-toggle {
  display: none; width: 44px; height: 40px; margin-left: auto;
  background: none; border: 1px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer; padding: 11px 10px;
  flex-direction: column; justify-content: space-between;
}
.nav-toggle span { display: block; height: 2px; background: var(--navy); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* -------------------------------------------------------------------- hero */
.hero { position: relative; isolation: isolate; background: var(--navy-900); overflow: hidden; }
.hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 40%; z-index: -2;
}
.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg,
      rgba(6, 22, 46, .97) 0%,
      rgba(8, 28, 56, .93) 26%,
      rgba(9, 32, 62, .62) 46%,
      rgba(10, 30, 58, .22) 64%,
      rgba(10, 28, 54, .38) 100%),
    linear-gradient(180deg, rgba(4, 14, 30, .45), transparent 42%);
}
.hero-inner {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  min-height: 540px; padding: 74px 0 78px;
  color: #fff;
}
.hero-copy { max-width: 540px; }

.eyebrow {
  font-size: .76rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase;
  color: #e9dcc2; margin-bottom: 18px;
}
.eyebrow i, .pillar-when i, .footer-pillars i { font-style: normal; color: var(--gold); padding: 0 .35em; }

.hero h1 {
  font-size: clamp(2.3rem, 4.6vw, 3.45rem);
  line-height: 1.08;
  letter-spacing: -.015em;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .35);
}
.hero-lead {
  margin-top: 18px; font-size: 1.07rem; color: #e6ebf3; max-width: 26em;
}
.hero-verse {
  margin: 20px 0 0; padding: 0;
  font-family: var(--serif); font-style: italic; font-size: 1.005rem;
  line-height: 1.55; color: #d9e2ef;
}
.hero-verse cite { font-style: italic; opacity: .92; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.hero-script {
  flex: none; margin: 0; padding-right: 8px;
  font-family: var(--script); font-size: clamp(1.5rem, 2.5vw, 2.15rem);
  font-weight: 700; line-height: 1.18; text-align: right; color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
  transform: rotate(-5deg);
}
.hero-script::after {
  content: ""; display: block; height: 3px; width: 72%; margin: 14px 0 0 auto;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--gold) 45%, #e6c684);
}

/* ------------------------------------------------------------------ gather */
.gather { background: var(--cream); padding: 40px 0 12px; }
.gather-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.pillar {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 30px 24px 28px; text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.pillar:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.pillar-ico {
  display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 18px;
  border-radius: 50%; background: var(--gold-050); color: var(--gold-600);
}
.pillar-ico svg { width: 30px; height: 30px; fill: currentColor; }
.pillar h3 { font-size: 1.22rem; color: var(--navy); margin-bottom: 10px; }
.pillar-when { font-size: .95rem; color: #3c4756; }
.pillar-time { font-size: .95rem; font-weight: 600; color: #3c4756; margin-top: 2px; }
.pillar-where {
  margin-top: 5px; font-size: .74rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gold-600);
}
.pillar-note {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid #f0ebe0;
  font-size: .875rem; line-height: 1.55; color: var(--muted);
}

/* ------------------------------------------------------ section furniture */
.section-title { font-size: clamp(1.55rem, 2.6vw, 2rem); color: var(--navy); }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 20px;
}
.section-head--inline { align-items: baseline; justify-content: flex-start; gap: 20px; }
.section-sub { color: var(--muted); font-size: .98rem; }
.link-more {
  font-size: .875rem; font-weight: 600; color: var(--navy-soft); text-decoration: none;
  white-space: nowrap;
}
.link-more:hover { color: var(--gold-600); }
.link-more span { transition: transform .18s ease; display: inline-block; }
.link-more:hover span { transform: translateX(3px); }

.lede { font-size: 1.06rem; color: #3c4756; margin-top: 14px; }

/* ------------------------------------------------------------------- about */
.about { background: var(--paper); padding: 66px 0; border-block: 1px solid var(--line); }
.about-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 48px; align-items: start; }
.about-grid > div > p + p { margin-top: 14px; color: var(--muted); }
.mission-label {
  margin-top: 18px;
  font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-600);
}
.mission {
  margin-top: 10px; padding-left: 18px;
  border-left: 3px solid var(--gold);
  font-family: var(--serif); font-size: 1.16rem; line-height: 1.5; color: var(--navy);
}
.about-points { margin-top: 22px; display: grid; gap: 12px; }
.about-points li {
  position: relative; padding-left: 30px; font-size: .95rem; color: #3c4756;
}
.about-points li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--gold-050);
  box-shadow: inset 0 0 0 3.5px var(--gold);
}
.about-points strong { color: var(--navy); }

.about-card {
  background: linear-gradient(165deg, var(--navy) 0%, #071f3f 100%);
  color: #e9eef6; border-radius: var(--r-lg); padding: 34px 32px;
  box-shadow: var(--shadow-lg);
}
.about-card-eyebrow {
  font-size: .72rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold-200); font-weight: 600;
}
.about-card-verse {
  margin-top: 16px; font-family: var(--serif); font-style: italic;
  font-size: 1.15rem; line-height: 1.5;
}
.about-card-cite { margin-top: 10px; font-size: .86rem; color: var(--gold-200); }
.about-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin: 26px 0 0; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .16);
}
.about-stats div { margin: 0; }
.about-stats dt { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.about-stats dd {
  margin: 4px 0 0; font-family: var(--serif); font-size: 1.5rem; color: #fff;
}

/* ---------------------------------------------------------------- founders */
.founders {
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%);
  border-bottom: 1px solid var(--line);
  padding: 60px 0 64px;
}
.founders-head { max-width: 58ch; margin: 0 auto 38px; text-align: center; }
.founders-head .lede { margin-top: 12px; }

.founder-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
  max-width: 940px; margin-inline: auto;
}
.founder {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 32px 30px 30px; text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.founder:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.founder-photo {
  width: 120px; height: 120px; margin: 0 auto 18px;
  border-radius: 50%; object-fit: cover;
  border: 3px solid var(--paper);
  box-shadow: 0 0 0 2px var(--gold), 0 8px 20px rgba(11, 37, 71, .16);
}
.founder h3 { font-size: 1.16rem; color: var(--navy); }
.founder-role {
  margin-top: 6px;
  font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-600);
}
.founder-bio {
  margin-top: 16px; padding-top: 16px; border-top: 1px solid #f0ebe0;
  font-size: .92rem; line-height: 1.65; color: var(--muted); text-align: left;
}

.founders-verse { margin: 36px auto 0; padding: 0; text-align: center; }
.founders-verse p {
  font-family: var(--serif); font-style: italic; font-size: 1.12rem; color: var(--navy);
}
.founders-verse cite {
  display: block; margin-top: 8px; font-style: normal;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}

/* ------------------------------------------------------- events + media */
/* Events and Watch & Listen sit side by side in one band, per the design. */
.feed { padding: 56px 0 60px; }
.feed-grid { display: grid; grid-template-columns: 1.52fr 1fr; gap: 44px; }
.feed-col--media { border-left: 1px solid var(--line); padding-left: 44px; }

/* ------------------------------------------------- featured special event */
.featured {
  /* 46% keeps the media slot near the card image's own 1.37 ratio, so
     `cover` trims almost nothing and the flyer title stays whole. */
  display: grid; grid-template-columns: 46% 1fr; gap: 0;
  margin-bottom: 20px; overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--gold-200); border-left: 4px solid var(--gold);
  border-radius: var(--r); box-shadow: var(--shadow-sm);
  text-decoration: none; color: inherit;
  transition: transform .2s ease, box-shadow .2s ease;
}
.featured:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.featured-media { display: block; overflow: hidden; }
.featured-media img { width: 100%; height: 100%; object-fit: cover; }
.featured-body { display: block; padding: 17px 19px 16px; }
.featured-flag {
  display: inline-block; margin-bottom: 8px;
  padding: 3px 9px; border-radius: 100px;
  background: var(--gold-050); border: 1px solid var(--gold-200);
  font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-600);
}
.featured-body h3 {
  font-family: var(--serif); font-size: 1.24rem; font-weight: 600;
  color: var(--navy); line-height: 1.2;
}
.featured-sub {
  margin-top: 3px; font-size: .84rem; color: var(--gold-600); font-weight: 600;
}
.featured-body i { font-style: normal; padding: 0 .3em; opacity: .6; }
.featured-meta { display: grid; gap: 6px; margin-top: 12px; }
.featured-meta > span {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: .8rem; line-height: 1.4; color: var(--muted);
}
.featured-meta .ico { font-size: .95rem; color: var(--navy-soft); opacity: .8; margin-top: .1em; }

/* Both actions are buttons: "All the details" is the primary one — the whole
   point of the card is to send people to the ICD page — with RSVP outlined
   beside it as the secondary. Left-aligned and adjacent, so the pair reads as
   primary-then-secondary rather than sitting at opposite ends of the card. */
.featured-actions {
  display: flex; align-items: center;
  gap: 12px; flex-wrap: wrap; margin-top: 17px;
}
.featured-cta,
.featured-rsvp { padding: .62em 1.2em; font-size: .84rem; }

.event-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.event-card {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.event-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

.event-media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; }
.event-media img { width: 100%; height: 100%; object-fit: cover; }
.media-script {
  position: absolute; inset: 14% 8% auto; text-align: center;
  font-family: var(--script); font-weight: 700; font-size: 1.28rem; line-height: 1.1;
  color: #fff; text-shadow: 0 2px 10px rgba(80, 30, 0, .55);
}
.media-script em { display: block; font-style: normal; font-size: 1.5em; }
.date-chip {
  position: absolute; left: 0; bottom: 0;
  background: var(--paper); color: var(--navy);
  padding: 7px 13px 8px; border-radius: 0 var(--r-sm) 0 0;
  text-align: center; line-height: 1;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, .12);
}
.date-chip span { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .1em; color: var(--muted); }
.date-chip strong { display: block; margin-top: 3px; font-family: var(--serif); font-size: 1.32rem; }

/* Recurrence badge — which Saturday of the month this service falls on. */
.event-tag {
  position: absolute; top: 10px; right: 10px;
  padding: 4px 9px; border-radius: 100px;
  background: rgba(7, 26, 54, .82); color: var(--gold-200);
  font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  backdrop-filter: blur(3px);
}
.event-body { display: flex; flex-direction: column; flex: 1; padding: 16px 16px 18px; }
.event-note {
  margin: 12px 0 18px; padding-top: 12px; border-top: 1px solid #f0ebe0;
  font-size: .8rem; line-height: 1.55; color: var(--muted);
}
.event-footnote {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: .86rem; line-height: 1.6; color: var(--muted); text-align: center;
}
.event-body h3 { font-size: 1.08rem; color: var(--navy); }
.meta { margin: 11px 0 0; display: grid; gap: 7px; font-size: .8rem; color: var(--muted); }
.meta li { display: flex; align-items: center; gap: 7px; }
.meta .ico { font-size: .95rem; color: var(--navy-soft); opacity: .8; }
/* `auto` bottom-aligns the button across cards of differing text length;
   the note carries the gap so the two rules don't fight over margin-top. */
.event-body .btn { margin-top: auto; }

/* --------------------------------------------------------------- videos */
.video {
  position: relative; display: block; border-radius: var(--r); overflow: hidden;
  text-decoration: none; color: #fff; background: var(--navy-900);
  box-shadow: var(--shadow-sm);
}
.video img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.video:hover img { transform: scale(1.04); }
.video--lead { aspect-ratio: 16 / 9; }
.video--lead::after {
  /* Stronger and earlier than a photo would need: these are video thumbnails
     with their own lettering, which shows through a light scrim. */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 28%, rgba(4, 14, 30, .5) 52%, rgba(4, 14, 30, .93));
}
.video-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 16px 18px 15px;
}
.video-cap strong { display: block; font-family: var(--serif); font-size: 1.14rem; font-weight: 600; }
.video-cap em { display: block; font-style: normal; font-size: .9rem; color: #dce4ef; margin-top: 2px; }
.video-cap small { display: block; margin-top: 5px; font-size: .74rem; color: #b9c6d8; }
.video-cap i { font-style: normal; padding: 0 .3em; }

/* ------------------------------------------------------- play badge -----
   These cards genuinely open a video now, so the play symbol is back. It was
   removed when the same slots still held ordinary photographs, where it
   promised something that wasn't there.

   The triangle's bounding box is centred in the 24-unit viewBox (base x=7.5,
   apex x=16.5) — the common `M8 5v14l11-7z` glyph sits visibly off-centre
   inside a circle. Decorative, so it stays out of the accessibility tree:
   an empty pseudo-element with no pointer target of its own. */
.video::before,
.clip-thumb::before {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: 3;
  transform: translate(-50%, -50%);
  width: 62px; height: 62px; border-radius: 50%;
  background: rgba(255, 255, 255, .93)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230d2b56'%3E%3Cpath d='M7.5 5.5v13L16.5 12z'/%3E%3C/svg%3E")
    no-repeat center / 42%;
  box-shadow: 0 6px 20px rgba(4, 12, 26, .4);
  transition: transform .25s ease, background-color .25s ease;
  pointer-events: none;
}
.clip-thumb::before { width: 38px; height: 38px; box-shadow: 0 4px 12px rgba(4, 12, 26, .35); }

.video:hover::before,
.clip:hover .clip-thumb::before {
  background-color: #fff;
  transform: translate(-50%, -50%) scale(1.09);
}
/* Keyboard parity: the badge reacts to focus as well as hover. */
.video:focus-visible::before,
.clip:focus-visible .clip-thumb::before {
  background-color: #fff;
  transform: translate(-50%, -50%) scale(1.09);
}

/* Two-up: there are four clips under the lead, and the media column is the
   narrower half of the band. */
.video-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px 14px; margin-top: 14px; }
.clip { display: block; text-decoration: none; color: inherit; }
.clip-thumb {
  /* 16:9 — the real ratio of a YouTube thumbnail. Cropping these any tighter
     cuts the song titles off the artwork. */
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--r-sm); background: var(--navy-900); box-shadow: var(--shadow-sm);
}
.clip-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.clip:hover .clip-thumb img { transform: scale(1.05); }
.clip-title {
  display: block; margin-top: 9px;
  font-size: .82rem; font-weight: 600; line-height: 1.3; color: var(--navy);
}
.clip-date { display: block; margin-top: 2px; font-size: .72rem; color: var(--muted); }
.clip-date i { font-style: normal; padding: 0 .28em; }
.clip:hover .clip-title { color: var(--gold-600); }

/* -------------------------------------------------- prayer + give band */
.band {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(90deg, var(--cream-deep), #f6f1e6 40%, var(--gold-050));
  border-block: 1px solid var(--line);
  padding: 40px 0;
}
.band-img {
  position: absolute; left: 0; top: 0; z-index: -1;
  width: 17%; height: 100%; object-fit: cover; object-position: 62% 50%;
  mask-image: linear-gradient(90deg, #000 0%, #000 52%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 52%, transparent 100%);
}
.band-grid {
  display: grid; grid-template-columns: 148px 1.05fr 1.05fr .78fr;
  gap: 30px; align-items: center;
}
.band-grid::before { content: ""; }   /* spacer that clears the photo edge */
.band-cell { padding-left: 0; }
.band-cell--divided { padding-left: 34px; border-left: 1px solid #ddd4c0; }
.band-cell h2 { font-size: clamp(1.35rem, 2.2vw, 1.72rem); color: var(--navy); }
.band-cell p { margin-top: 8px; color: var(--muted); font-size: .95rem; max-width: 30em; }
.band-cell .btn { margin-top: 18px; }

.band-verse { margin: 0; padding: 0; text-align: center; transform: rotate(-4deg); }
.band-verse p {
  font-family: var(--script); font-weight: 700; font-size: 1.24rem; line-height: 1.5;
  color: #40372a;
}
.band-verse cite { display: block; margin-top: 8px; font-style: normal; font-size: .82rem; color: var(--muted); }

/* ------------------------------------------------------------------ giving */
.giving { background: var(--paper); padding: 58px 0 62px; border-bottom: 1px solid var(--line); }
.giving-head { max-width: 62ch; margin-bottom: 34px; }

.giving-grid {
  display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 20px; align-items: start;
}
.give-card {
  position: relative;
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px 24px 24px; height: 100%;
}
.give-card--wide { background: var(--paper); box-shadow: var(--shadow); }
.give-card h3 { font-size: 1.22rem; color: var(--navy); }
.give-badge {
  position: absolute; top: 18px; right: 18px;
  padding: 3px 9px; border-radius: 100px;
  background: var(--gold-050); border: 1px solid var(--gold-200);
  font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-600);
}
.give-lead { margin-top: 10px; font-size: .92rem; line-height: 1.6; color: #3c4756; }

.give-detail {
  margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid #e2d9c6;
  display: grid; gap: 10px;
}
.give-detail div { margin: 0; }
.give-detail dt {
  font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-600);
}
.give-detail dd {
  margin: 3px 0 0; font-family: var(--serif); font-size: 1.12rem; color: var(--navy);
  font-variant-numeric: tabular-nums;
}
/* The memo is text a donor copies into their banking app, so it's set apart. */
.give-detail dd.give-memo {
  display: inline-block; padding: 5px 11px; border-radius: var(--r-sm);
  background: var(--gold-050); border: 1px solid var(--gold-200);
  font-size: 1rem; line-height: 1.35;
}
/* Copy buttons — Zelle has no deep link, so the donor types these into their own
   bank app. Copying removes the mistyping. */
.copy-btn {
  margin-left: 9px; padding: 3px 9px;
  border: 1px solid var(--gold-200); border-radius: 100px;
  background: var(--paper); color: var(--gold-600);
  font: 600 .64rem/1.5 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; vertical-align: middle;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.copy-btn:hover { background: var(--gold-050); border-color: var(--gold); }
.copy-btn.is-copied {
  background: #e7f3ea; border-color: #86c39a; color: #14683a;
}
.give-memo .copy-btn { background: #fffdf7; }

.give-detail a { text-decoration: none; color: inherit; }
.give-detail a:hover { color: var(--gold-600); text-decoration: underline; }

.give-address {
  margin: 18px 0 0; padding: 14px 16px;
  background: var(--paper); border: 1px dashed #d8cdb4; border-radius: var(--r-sm);
  font-family: var(--serif); font-style: normal; font-size: 1.02rem;
  line-height: 1.55; color: var(--navy);
}
.give-note { margin-top: 14px; font-size: .8rem; line-height: 1.55; color: var(--muted); }
.give-card-cta { margin-top: 16px; }
.give-note strong { color: var(--navy); }

/* amount chooser */
.give-amount { border: 0; margin: 20px 0 0; padding: 0; }
.give-amount legend {
  padding: 0; margin-bottom: 10px;
  font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-600);
}
.amount-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.amount-presets button {
  padding: 11px 4px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: #fcfaf6; color: var(--navy);
  font: 600 .95rem var(--sans); cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}
.amount-presets button:hover { border-color: var(--gold); background: var(--gold-050); }
.amount-presets button.is-active {
  background: var(--navy); border-color: var(--navy); color: #fff;
}
.amount-custom { margin-top: 14px; }
.amount-custom label {
  display: block; font-size: .78rem; font-weight: 600; color: var(--navy); margin-bottom: 6px;
}
.amount-input { display: flex; align-items: stretch; }
.amount-input span {
  display: grid; place-items: center; padding: 0 13px;
  background: var(--cream-deep); border: 1px solid var(--line); border-right: 0;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  font-weight: 600; color: var(--navy);
}
.amount-input input {
  flex: 1; min-width: 0; padding: 11px 13px;
  font: 600 1.02rem var(--sans); color: var(--ink);
  background: #fcfaf6; border: 1px solid var(--line); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-variant-numeric: tabular-nums;
}
.amount-input input:focus {
  outline: none; border-color: var(--gold); background: #fff;
  box-shadow: 0 0 0 3px rgba(191, 150, 70, .16);
}
.amount-hint { margin-top: 6px; font-size: .74rem; color: var(--muted); }

.paypal-buttons { margin-top: 20px; min-height: 52px; }
.paypal-placeholder {
  padding: 15px; border: 1px dashed var(--line); border-radius: var(--r-sm);
  font-size: .84rem; color: var(--muted); text-align: center;
}

/* ------------------------------ card giving: on / off -------------------
   One attribute, `data-paypal` on #giving, switches the whole section. Doing
   it in CSS rather than JavaScript means the right state shows even with
   scripting off — and an off switch that depends on JavaScript running is not
   much of an off switch when money is involved.

   `display: none` also takes the hidden half out of the accessibility tree and
   out of the tab order, so the amount field can't be reached while it's off. */
.giving[data-paypal="off"] .give-live { display: none; }
.giving[data-paypal="on"] .give-soon { display: none; }

/* While it's off, the card must not keep the emphasis built for a working
   payment form — the widest column, white panel and lifted shadow all said
   "start here". Equal thirds and a dashed outline say "not yet" instead, and
   the two methods that do work get the attention. */
.giving[data-paypal="off"] .give-card--wide {
  background: var(--cream); box-shadow: none; border-style: dashed;
}
/* ...including when the cards stack, where --wide is otherwise pulled first:
   a "coming soon" card should not be the first thing a phone shows. */
.giving[data-paypal="off"] .give-card--wide { order: 0; }

/* Only above the breakpoint where the grid is still three across. Scoped to a
   min-width because `.giving[data-paypal=off] .giving-grid` outranks the
   single-column rule in the max-width block and would otherwise keep three
   columns on a phone. */
@media (min-width: 961px) {
  .giving[data-paypal="off"] .giving-grid { grid-template-columns: repeat(3, 1fr); }
}

.give-badge--soon {
  background: #f1f0ee; border-color: #ddd8ce; color: var(--muted);
}
.give-soon-alt {
  margin-top: 16px; font-size: .86rem; font-weight: 600; color: var(--navy);
}
.give-soon-list {
  margin: 8px 0 0; padding: 0; list-style: none;
  display: grid; gap: 9px;
}
.give-soon-list li {
  position: relative; padding-left: 17px;
  font-size: .86rem; line-height: 1.55; color: #3c4756;
}
.give-soon-list li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
}
.give-soon-list strong { color: var(--navy); }

.giving-share {
  display: flex; align-items: center; gap: 24px;
  max-width: 76ch; margin: 34px auto 0; padding: 22px 24px;
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.giving-qr {
  width: 132px; height: 132px; flex: none;
  background: #fff; padding: 8px; border-radius: var(--r-sm);
  border: 1px solid var(--line);
}
.giving-share-title {
  font-family: var(--serif); font-size: 1.1rem; color: var(--navy); margin-bottom: 6px;
}
.giving-share p { font-size: .86rem; line-height: 1.6; color: var(--muted); }
/* Two classes, so it outranks `.giving-share p` without !important. */
.giving-share .giving-share-note {
  margin-top: 8px; font-size: .78rem; color: #8a6d2f;
}

.giving-footnote {
  display: flex; gap: 11px; align-items: flex-start;
  max-width: 76ch; margin: 30px auto 0; padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: .82rem; line-height: 1.6; color: var(--muted);
}
.giving-footnote .ico { font-size: 1.25rem; color: var(--gold-600); flex: none; }

/* ----------------------------------------------------------- prayer request */
.prayer {
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%);
  border-bottom: 1px solid var(--line);
  padding: 58px 0 62px;
}
.prayer-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: start; }

.prayer-verse { margin: 24px 0 0; padding: 0 0 0 18px; border-left: 3px solid var(--gold); }
.prayer-verse p {
  font-family: var(--serif); font-style: italic; font-size: 1.06rem;
  line-height: 1.55; color: var(--navy);
}
.prayer-verse cite {
  display: block; margin-top: 8px; font-style: normal;
  font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.prayer-privacy {
  display: flex; gap: 11px; margin-top: 26px; padding-top: 20px;
  border-top: 1px solid #e2d9c6;
  font-size: .85rem; line-height: 1.6; color: var(--muted);
}
.prayer-privacy .ico { font-size: 1.3rem; color: var(--gold-600); flex: none; margin-top: .05em; }

.prayer-form {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 28px; box-shadow: var(--shadow);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field .opt { font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: 0; }

/* radio group */
.choice { border: 0; margin: 0 0 14px; padding: 0; }
.choice legend {
  padding: 0; margin-bottom: 8px;
  font-size: .8rem; font-weight: 600; color: var(--navy);
}
/* `.field.choice` outweighs the later `.field label { display: block }` rule,
   which would otherwise break the radio onto its own line. */
.field.choice label {
  display: flex; align-items: flex-start; gap: 9px; margin-bottom: 8px;
  font-size: .88rem; font-weight: 400; line-height: 1.45; color: #3c4756; cursor: pointer;
}
.field.choice input[type="radio"] {
  width: auto; margin-top: .22em; accent-color: var(--gold-600); flex: none;
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0; pointer-events: none;
}

button[type="submit"]:disabled { opacity: .62; cursor: progress; transform: none; }

/* --------------------------------------------------------------- community */
.community { background: var(--paper); padding: 54px 0 62px; }
.tile-more { margin: 28px 0 0; text-align: center; }
.tile-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; margin-top: 8px; }
.tile-row figure { margin: 0; }
.tile-row img {
  /* height:auto is required — the img's height attribute would otherwise win
     over aspect-ratio, since both dimensions would then be specified. */
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-sm); box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease;
}
.tile-row figure:hover img { transform: translateY(-4px); box-shadow: var(--shadow); }
.tile-row figcaption {
  margin-top: 10px; text-align: center; font-size: .82rem; font-weight: 600; color: var(--navy);
}

/* ----------------------------------------------------------------- contact */
.contact { background: var(--cream); padding: 64px 0 70px; border-top: 1px solid var(--line); }
.contact-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: start; }
.contact-list { margin-top: 26px; display: grid; gap: 16px; }
.contact-list li { display: flex; gap: 12px; font-size: .95rem; color: #3c4756; }
.contact-list .ico { font-size: 1.2rem; color: var(--gold-600); margin-top: .15em; }
.contact-list a { color: var(--navy-soft); }
.contact-list strong { color: var(--navy); }
.contact-map {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 7px;
  font-size: .82rem; font-weight: 600; color: var(--navy-soft); text-decoration: none;
}
.contact-map:hover { color: var(--gold-600); text-decoration: underline; }
.contact-map span { transition: transform .18s ease; }
.contact-map:hover span { transform: translateX(3px); }

/* Distinguishes "where we meet" from "where to send mail" — two different places. */
.contact-label {
  display: block; margin-bottom: 3px;
  font-size: .66rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-600);
}

/* Contact cards — used by the RSVP organiser list on the ICD page. */
.person {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 15px 17px 13px; box-shadow: var(--shadow-sm);
}
.person-name { font-family: var(--serif); font-size: 1.04rem; color: var(--navy); }
.person-link {
  display: flex; align-items: center; gap: 8px; margin-top: 9px;
  font-size: .88rem; color: var(--navy-soft); text-decoration: none;
  /* long gmail addresses must be able to break rather than widen the card */
  overflow-wrap: anywhere;
}
.person-link .ico { font-size: 1rem; color: var(--gold-600); flex: none; }
.person-link span { font-variant-numeric: tabular-nums; }
.person-link:hover { color: var(--gold-600); }
.person-link:hover span { text-decoration: underline; }

.contact-form {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 28px; box-shadow: var(--shadow);
}
.form-note { font-size: .78rem; color: var(--muted); margin-bottom: 16px; }
.form-note--warn {
  padding: 10px 12px; border-radius: var(--r-sm);
  background: #fdf3e3; border: 1px solid #e7cfa0; color: #7a4f10; font-size: .84rem;
}
.form-note--warn a { color: #7a4f10; font-weight: 600; }
.field { margin-bottom: 14px; }
.field label {
  display: block; font-size: .8rem; font-weight: 600; color: var(--navy); margin-bottom: 6px;
}
.field input, .field select, .field textarea {
  width: 100%; padding: 11px 13px;
  font: 400 .95rem/1.4 var(--sans); color: var(--ink);
  background: #fcfaf6; border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold); background: #fff;
  box-shadow: 0 0 0 3px rgba(191, 150, 70, .16);
}
.field input:user-invalid, .field textarea:user-invalid { border-color: #c2410c; }
.contact-form .btn { margin-top: 6px; }
.form-status {
  margin-top: 12px; font-size: .85rem; font-weight: 500; color: #15803d; min-height: 1.2em;
}
.form-status[data-state="error"] { color: #b91c1c; }

/* ------------------------------------------------------------------ footer */
.site-footer {
  background: linear-gradient(180deg, var(--navy-800), var(--navy-900));
  color: #c8d4e4; font-size: .9rem;
  padding-top: 52px;
}
.footer-grid {
  display: grid; grid-template-columns: 1fr 1fr 1.25fr 1.35fr; gap: 40px;
  padding-bottom: 42px;
}
/* At footer scale the crest's own lettering is legible, so it stands alone. */
.footer-brand { color: var(--gold); }
.footer-logo { width: 100%; max-width: 268px; height: auto; }

.footer-col h3 {
  font-family: var(--sans); font-size: .95rem; font-weight: 600; color: #fff;
  margin-bottom: 14px;
}
.footer-col ul { display: grid; gap: 9px; }
.footer-col a { color: #c8d4e4; text-decoration: none; transition: color .16s ease; }
.footer-col a:hover { color: var(--gold-200); }
.footer-col > p { color: #b6c4d8; }

.footer-contact li { display: flex; gap: 10px; line-height: 1.5; }
.footer-contact .ico { font-size: 1.05rem; color: var(--gold); margin-top: .2em; }

.footer-col ul.social { display: flex; gap: 10px; margin-top: 18px; }
.soc {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  color: #fff; transition: transform .18s ease, filter .18s ease;
}
.soc svg { width: 19px; height: 19px; fill: currentColor; }
.soc:hover { transform: translateY(-2px); filter: brightness(1.12); }
.soc--yt { background: #e0282e; }
.soc--fb { background: #1877f2; }

.subscribe { display: flex; margin-top: 14px; max-width: 340px; }
.subscribe input {
  flex: 1; min-width: 0; padding: 10px 13px;
  font: 400 .88rem var(--sans); color: var(--ink);
  background: #fff; border: 1px solid #fff; border-radius: var(--r-sm) 0 0 var(--r-sm);
}
.subscribe .btn { border-radius: 0 var(--r-sm) var(--r-sm) 0; padding-inline: 1.1em; }
.subscribe .btn:hover { transform: none; }
.site-footer .form-status { color: var(--gold-200); }

.footer-pillars {
  margin-top: 22px; font-size: .84rem; font-weight: 500; letter-spacing: .04em; color: #dbe4f0;
}
.footer-script {
  margin-top: 8px; font-family: var(--script); font-weight: 700;
  font-size: 1.62rem; color: var(--gold-200);
}

.footer-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 16px 0 20px; border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .8rem; color: #9fb0c6;
}
.footer-bottom nav { display: flex; gap: 22px; }
.credit { letter-spacing: .01em; }
.credit strong {
  font-family: var(--serif); font-weight: 600; font-size: 1.04em;
  color: var(--gold-200); letter-spacing: .02em;
}
.credit i { font-style: normal; color: var(--gold); padding: 0 .15em; }
.footer-bottom a { color: #9fb0c6; text-decoration: none; }
.footer-bottom a:hover { color: var(--gold-200); }

/* ===================== Indian Christian Day page ====================== */
/* Beats the plain `.site-nav a` colour without needing !important. */
.site-nav a.nav-event { color: var(--gold-600); font-weight: 600; }

.icd-hero {
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-900) 70%);
  color: #e9eef6; padding: 58px 0 62px;
  position: relative; isolation: isolate; overflow: hidden;
}
.icd-hero::before {                     /* soft gold glow behind the title */
  content: ""; position: absolute; z-index: -1; inset: -30% -10% auto 30%;
  height: 130%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(191, 150, 70, .22), transparent);
}
.icd-hero-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
}
.icd-hero-copy { max-width: 640px; }
.icd-hero h1 {
  font-size: clamp(2.1rem, 4.2vw, 3.1rem); line-height: 1.08; color: #fff;
  letter-spacing: -.015em;
}
.icd-sub {
  margin-top: 12px; font-size: 1.02rem; font-weight: 600; color: var(--gold-200);
}
.icd-sub i { font-style: normal; padding: 0 .35em; opacity: .7; }
.icd-script {
  margin-top: 10px; font-family: var(--script); font-weight: 700;
  font-size: 1.62rem; color: #f3d99b;
}
.icd-lede { margin-top: 16px; font-size: 1.02rem; line-height: 1.6; color: #dbe4f0; }
.icd-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.icd-datecard {
  flex: none; margin: 0; text-align: center; line-height: 1;
  padding: 20px 26px; border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(236, 220, 186, .35);
  backdrop-filter: blur(3px);
}
.icd-datecard span {
  display: block; font-size: .74rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold-200);
}
.icd-datecard strong {
  display: block; margin: 8px 0; font-family: var(--serif);
  font-size: 4.2rem; font-weight: 700; color: #fff;
}

.icd-facts { background: var(--paper); border-bottom: 1px solid var(--line); padding: 34px 0; }
.icd-fact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.icd-fact + .icd-fact { border-left: 1px solid var(--line); padding-left: 28px; }
.icd-fact-label {
  font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-600); margin-bottom: 9px;
}
.icd-fact-main {
  font-family: var(--serif); font-size: 1.08rem; line-height: 1.4; color: var(--navy);
}
.icd-fact-main span {
  font-family: var(--sans); font-size: .82rem; color: var(--muted); font-style: normal;
}
.icd-fact-main + .icd-fact-main { margin-top: 5px; }
.icd-fact-sub { margin-top: 5px; font-size: .88rem; line-height: 1.5; color: var(--muted); }

.icd-programme { background: var(--cream); padding: 54px 0 58px; }
.icd-prog-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  max-width: 940px; margin: 30px auto 0;
}
.icd-prog-grid li {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px 18px 24px; text-align: center; box-shadow: var(--shadow-sm);
}
.icd-prog-grid h3 { margin-top: 14px; font-size: 1.02rem; color: var(--navy); }

.icd-video-band { background: var(--paper); border-bottom: 1px solid var(--line); padding: 54px 0 58px; }
.icd-video-shell { max-width: 860px; }
.icd-video { margin: 26px 0 0; }
.icd-video video {
  display: block; width: 100%; height: auto;
  background: #000; border-radius: var(--r-lg);
  border: 1px solid var(--line); box-shadow: var(--shadow-lg);
}
.icd-video figcaption {
  margin-top: 11px; text-align: center; font-size: .8rem; color: var(--muted);
}
.icd-video figcaption i { font-style: normal; padding: 0 .4em; color: var(--gold); }

.icd-flyer-band {
  background: var(--paper); border-block: 1px solid var(--line); padding: 58px 0;
}
.icd-flyer-grid { display: grid; grid-template-columns: 1fr .82fr; gap: 48px; align-items: start; }
.icd-flyer { margin: 0; }
.icd-flyer img {
  width: 100%; height: auto; border-radius: var(--r-lg);
  border: 1px solid var(--line); box-shadow: var(--shadow-lg);
}
.icd-flyer figcaption {
  margin-top: 10px; text-align: center; font-size: .78rem; color: var(--muted);
}
.icd-links { margin-top: 24px; font-size: .95rem; }
.icd-links a { color: var(--navy-soft); font-weight: 600; }
.icd-links i { font-style: normal; padding: 0 .5em; color: var(--gold); }

.icd-rsvp { background: var(--cream); padding: 56px 0 62px; }
.rsvp-panel {
  display: flex; align-items: center; justify-content: space-between; gap: 26px;
  max-width: 940px; margin: 0 auto;
  padding: 24px 28px; border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--navy) 0%, #071f3f 100%);
  color: #e9eef6; box-shadow: var(--shadow-lg);
}
.rsvp-panel h3 { font-size: 1.24rem; color: #fff; }
.rsvp-panel p { margin-top: 6px; font-size: .92rem; line-height: 1.55; color: #c8d4e4; }
.rsvp-panel .btn { flex: none; padding: .85em 1.6em; }

.rsvp-or {
  max-width: 940px; margin: 26px auto 16px; text-align: center;
  font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); position: relative;
}
.rsvp-or::before, .rsvp-or::after {
  content: ""; position: absolute; top: 50%; width: 27%; height: 1px;
  background: var(--line);
}
.rsvp-or::before { left: 0; }
.rsvp-or::after { right: 0; }

.icd-contact-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  max-width: 940px; margin: 0 auto;
}
.icd-support {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: center;
  max-width: 940px; margin: 34px auto 0;
  padding-top: 32px; border-top: 1px solid var(--line);
}
.icd-support .give-card { background: var(--paper); box-shadow: var(--shadow-sm); }
.icd-support .give-note a { color: var(--navy-soft); font-weight: 600; }
.icd-motto { margin: 0; padding: 0; text-align: center; }
.icd-motto p {
  font-family: var(--script); font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.35; color: var(--gold-600);
}

/* ---------------------------------------------------------- RSVP page */
.rsvp-hero { padding: 48px 0 52px; }
.rsvp-hero h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); color: #fff; }
.rsvp-hero .icd-lede { max-width: 54ch; }
.rsvp-facts { display: grid; gap: 9px; margin-top: 24px; max-width: 70ch; }
.rsvp-facts li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .92rem; line-height: 1.5; color: #dbe4f0;
}
.rsvp-facts .ico { font-size: 1.1rem; color: var(--gold); margin-top: .15em; }
.rsvp-facts i { font-style: normal; padding: 0 .35em; opacity: .55; }

.rsvp-form-band { background: var(--cream); padding: 52px 0 60px; }
.rsvp-form-shell { max-width: 640px; }
.rsvp-form {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 30px; box-shadow: var(--shadow);
}
.rsvp-form .field.choice { margin-bottom: 20px; }
.rsvp-form legend {
  font-size: .88rem; font-weight: 600; color: var(--navy); line-height: 1.4;
  margin-bottom: 10px;
}
.req { color: #b45309; font-weight: 700; }
.rsvp-form .btn { margin-top: 8px; }
.rsvp-give-link { margin-top: 12px; }

/* Primary action on the thank-you panel. `.btn` is nowrap by default, which this
   long label would overflow on a phone, so wrapping is re-enabled here. */
.rsvp-give-primary { margin-top: 24px; }
.rsvp-done .rsvp-give-note {
  margin-top: 9px; font-size: .82rem; line-height: 1.5; color: var(--muted);
}
.rsvp-done .rsvp-give-note strong { color: var(--navy); }
.btn-give {
  white-space: normal; text-align: center; line-height: 1.35;
  padding: .8em 1.5em; max-width: 100%;
}
.rsvp-give-link a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: var(--r-sm);
  background: var(--gold-050); border: 1px solid var(--gold-200);
  font-size: .84rem; font-weight: 600; color: var(--gold-600); text-decoration: none;
  transition: background-color .16s ease, border-color .16s ease;
}
.rsvp-give-link a:hover { background: #f1e4c6; border-color: var(--gold); }
.rsvp-give-link .ico { font-size: 1rem; }
.rsvp-give-link span { transition: transform .18s ease; }
.rsvp-give-link a:hover span { transform: translateX(3px); }

.rsvp-fallback { margin-top: 14px; font-size: .8rem; color: var(--muted); text-align: center; }
.rsvp-fallback a { color: var(--navy-soft); font-weight: 600; }

#gform-sink { width: 0; height: 0; border: 0; }

.rsvp-done {
  background: var(--paper); border: 1px solid var(--gold-200);
  border-top: 4px solid var(--gold);
  border-radius: var(--r-lg); padding: 38px 32px 34px; text-align: center;
  box-shadow: var(--shadow);
}
.rsvp-done:focus { outline: none; }
.rsvp-done-tick {
  display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 18px;
  border-radius: 50%; background: var(--gold-050);
}
.rsvp-done-tick svg { width: 32px; height: 32px; fill: var(--gold-600); }
.rsvp-done h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--navy); }
.rsvp-done p { margin-top: 12px; font-size: 1rem; line-height: 1.6; color: #3c4756; }
/* Two classes, so it outranks `.rsvp-done p` without !important. */
.rsvp-done .rsvp-done-note { font-size: .9rem; color: var(--muted); }
.rsvp-done .icd-actions { justify-content: center; margin-top: 26px; }

@media (max-width: 960px) {
  .icd-hero-inner { flex-direction: column; align-items: flex-start; }
  .icd-fact-grid { grid-template-columns: 1fr; gap: 22px; }
  .icd-fact + .icd-fact { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 22px; }
  .icd-prog-grid { grid-template-columns: repeat(2, 1fr); }
  .icd-flyer-grid { grid-template-columns: 1fr; gap: 34px; }
  .icd-flyer { max-width: 460px; margin-inline: auto; }
  .icd-contact-grid { grid-template-columns: repeat(2, 1fr); }
  .icd-support { grid-template-columns: 1fr; gap: 26px; }
  .rsvp-panel { flex-direction: column; align-items: flex-start; gap: 18px; }
  .rsvp-panel .btn { width: 100%; }
  .rsvp-or::before, .rsvp-or::after { width: 18%; }
}

@media (max-width: 560px) {
  .icd-prog-grid, .icd-contact-grid { grid-template-columns: 1fr; }
  .icd-datecard strong { font-size: 3.2rem; }
}

/* ============================= gallery page ============================= */
.gal-hero {
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-900) 75%);
  color: #e9eef6; padding: 46px 0 50px;
}
.gal-hero h1 { font-size: clamp(2.1rem, 4.5vw, 3rem); color: #fff; }
.gal-hero .icd-lede { max-width: 62ch; }

.gal-band { background: var(--cream); padding: 40px 0 56px; }

/* CSS columns rather than a fixed grid: these photos run from wide panoramas
   to portraits, and columns let each keep its own shape instead of being
   cropped into a uniform box. */
.gal-grid { columns: 4 240px; column-gap: 14px; }
.gal-grid li { break-inside: avoid; margin-bottom: 14px; }

.shot {
  display: block; width: 100%; padding: 0; cursor: zoom-in;
  background: none; border: 0; border-radius: var(--r);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.shot img { width: 100%; height: auto; display: block; }
.shot:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.shot:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.gal-note {
  margin-top: 26px; text-align: center; font-size: .86rem; color: var(--muted);
}

/* ------------------------------- lightbox ------------------------------- */
.lb {
  width: 100%; max-width: 100%; height: 100%; max-height: 100%;
  padding: 0; border: 0; background: transparent;
}
.lb::backdrop { background: rgba(4, 12, 26, .93); }
.lb[open] { display: flex; align-items: center; justify-content: center; }
/* Script adds .lb-open while the viewer is up: the dialog covers the page but
   does not stop it scrolling, which is most noticeable swiping on a phone. */
.lb-open, .lb-open body { overflow: hidden; }

.lb-figure { margin: 0; padding: 0 60px; max-width: 100%; text-align: center; }
.lb-figure img {
  max-width: 100%; max-height: 82vh; width: auto; height: auto;
  margin: 0 auto; border-radius: var(--r); background: #0b1220;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.lb-figure figcaption {
  margin-top: 14px; font-size: .9rem; color: #cfd9e8; max-width: 60ch;
  margin-inline: auto;
}

.lb-close, .lb-nav {
  position: fixed; z-index: 2; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .12); color: #fff; border: 0;
  border-radius: 50%; backdrop-filter: blur(4px);
  transition: background-color .16s ease;
}
.lb-close:hover, .lb-nav:hover { background: rgba(255, 255, 255, .26); }
.lb-close {
  top: 18px; right: 20px; width: 44px; height: 44px; font-size: 1.7rem; line-height: 1;
}
.lb-nav { top: 50%; transform: translateY(-50%); width: 50px; height: 50px; font-size: 2rem; }
.lb-prev { left: 16px; }
.lb-next { right: 16px; }

@media (max-width: 720px) {
  .gal-grid { columns: 2 140px; column-gap: 10px; }
  .gal-grid li { margin-bottom: 10px; }
  .lb-figure { padding: 0 10px; }
  .lb-figure img { max-height: 70vh; }
  .lb-nav { width: 42px; height: 42px; font-size: 1.6rem; bottom: 22px; top: auto; transform: none; }
  .lb-prev { left: 50%; margin-left: -54px; }
  .lb-next { right: 50%; margin-right: -54px; }
}

/* ============================== responsive ============================== */
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .band-grid { grid-template-columns: 1fr 1fr; }
  .band-grid::before { display: none; }
  .band-img { width: 100%; opacity: .16; mask-image: none; -webkit-mask-image: none; }
  .band-verse { grid-column: 1 / -1; transform: none; }
  .tile-row { grid-template-columns: repeat(4, 1fr); gap: 16px; }
}

@media (max-width: 960px) {
  .feed-grid { grid-template-columns: 1fr; gap: 46px; }
  .feed-col--media { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 34px; }
  .gather-grid { grid-template-columns: repeat(2, 1fr); }
  .about-grid, .contact-grid, .prayer-grid { grid-template-columns: 1fr; gap: 32px; }
  .giving-grid { grid-template-columns: 1fr; }
  .giving-share { flex-direction: column; text-align: center; gap: 18px; }
  .give-card--wide { order: -1; }   /* card giving first once stacked */
  .hero-script { display: none; }
  .hero-inner { min-height: 470px; }

  /* collapsed nav */
  .nav-toggle { display: flex; }
  .header-cta { display: none; }
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow); padding: 8px 20px 16px;
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 12px 8px; border-radius: 0; border-bottom: 1px solid #f2eee5; }
  .site-nav a.is-current::after { display: none; }
  .site-nav a.nav-cta {
    display: flex; margin-top: 14px; border-bottom: 0;
    border-radius: var(--r-sm); padding: .85em 1.2em; color: #2c1f06;
  }
  .site-nav a.nav-cta:hover { background: linear-gradient(180deg, #d6b169, #b98d3c); }
}

@media (max-width: 720px) {
  /* A narrow `cover` crop of the hero shows only ~39% of its width; pull the
     focal point left so the lit cross and the speaker stay in frame. */
  .hero-img { object-position: 45% 45%; }
  .event-grid { grid-template-columns: 1fr; }
  .featured { grid-template-columns: 1fr; }
  .featured-media { aspect-ratio: 16 / 9; }
  .founder-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .event-media { aspect-ratio: 16 / 9; }
  .band-grid { grid-template-columns: 1fr; gap: 26px; }
  .band-cell { padding-left: 0; }
  .band-cell--divided { padding-left: 0; border-left: 0; border-top: 1px solid #ddd4c0; padding-top: 26px; }
  .band-img { width: 100%; opacity: .2; mask-image: none; -webkit-mask-image: none; }
  .tile-row { grid-template-columns: repeat(2, 1fr); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .section-head--inline { flex-direction: column; gap: 4px; }
}

@media (max-width: 560px) {
  .gather-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-actions .btn { flex: 1 1 100%; }
  /* Two-up clips are ~160px wide here; 38px covered too much of the frame. */
  .clip-thumb::before { width: 32px; height: 32px; }
  .video::before { width: 54px; height: 54px; }
  .brand-text strong { font-size: 1.4rem; }
  .video-row { gap: 14px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media print {
  .site-header, .nav-toggle, .hero-actions, .contact-form, .subscribe { display: none; }
  body { background: #fff; }
}