/* ==========================================================================
   Grace & Glory Foursquare Church — Design System (Mockup v1)
   An improved expression of the existing brand:
   deep violet + sunset amber/coral + warm paper.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand — violet family (from the existing header/nav) */
  --violet-950: #17062f;
  --violet-900: #230b4d;
  --violet-800: #33116e;
  --violet-700: #451a94;
  --violet-600: #5a25bd;
  --violet-500: #7239e0;
  --violet-300: #b79cf2;
  --violet-100: #ece3fd;
  --violet-050: #f6f2fe;

  /* Brand — sunset family (from the hero photo + logo) */
  --sun-600: #d92f52;
  --sun-500: #ef4360;
  --sun-400: #f9704f;
  --sun-300: #fb9a3c;
  --amber-300: #fbbf3c;
  --amber-200: #fdd88a;

  /* Neutrals — warm paper, never pure white */
  --paper:      #fbf8f4;
  --paper-alt:  #f3eee7;
  --card:       #ffffff;
  --ink:        #1c1524;
  --ink-soft:   #4a4155;
  --ink-mute:   #766c83;
  --rule:       #e5ded4;

  /* Semantic */
  --bg: var(--paper);
  --fg: var(--ink);

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-sans: "Karla", "Segoe UI", system-ui, sans-serif;

  --step--1: clamp(.82rem, .79rem + .14vw, .9rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.12rem + .38vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.34rem + .78vw, 2rem);
  --step-3:  clamp(1.9rem, 1.6rem + 1.45vw, 2.85rem);
  --step-4:  clamp(2.4rem, 1.86rem + 2.6vw, 4.1rem);
  --step-5:  clamp(2.9rem, 1.98rem + 4.4vw, 5.6rem);

  /* Space */
  --gutter: clamp(1.15rem, .6rem + 2.4vw, 2.75rem);
  /* Vertical rhythm between sections. Two stacked sections contribute this
     twice, so it reads roughly double — keep it tighter than it looks. */
  --section: clamp(2.5rem, 1.8rem + 3.2vw, 4.5rem);
  --measure: 68ch;
  --wrap: 1240px;
  --wrap-narrow: 860px;

  /* Form */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(28,21,36,.06), 0 4px 12px -6px rgba(28,21,36,.12);
  --shadow-md: 0 2px 4px rgba(28,21,36,.05), 0 14px 34px -14px rgba(35,11,77,.26);
  --shadow-lg: 0 30px 70px -30px rgba(35,11,77,.45);

  --ease: cubic-bezier(.22,.68,.32,1);
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px;
  /* `clip` (not `hidden`) so the off-canvas mobile nav can't create a sideways
     scrollbar while position:sticky keeps working on the masthead. */
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  line-height: 1.08;
  letter-spacing: -.017em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -.01em; }
p  { margin: 0 0 1.1em; max-width: var(--measure); text-wrap: pretty; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

:focus-visible {
  outline: 3px solid var(--sun-400);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 999;
  background: var(--violet-800); color: #fff; padding: .8rem 1.2rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm); font-weight: 700;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; }

/* ---------- 3. Layout helpers ---------- */
.wrap { width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - (var(--gutter) * 2), var(--wrap-narrow)); margin-inline: auto; }
.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * .62); }

/* Seams. Where a plain section meets a coloured band, both sides were paying a
   full pad and the join read as dead space. The colour change is itself the
   separator, so both sides give some back: the plain side most of its, the band
   enough to still hold its content clear of its own edge. Band-to-band seams
   keep both pads — there the inset is internal to each block, not separation.
   (`:has()` degrades to the roomier spacing on older engines.) */
.section:not(.band-paper, .band-violet, .cta-band):has(+ .band-paper),
.section:not(.band-paper, .band-violet, .cta-band):has(+ .band-violet),
.section:not(.band-paper, .band-violet, .cta-band):has(+ .cta-band) {
  padding-bottom: calc(var(--section) * .35);
}

.section:not(.band-paper, .band-violet, .cta-band) + .band-paper,
.section:not(.band-paper, .band-violet, .cta-band) + .band-violet,
.section:not(.band-paper, .band-violet, .cta-band) + .cta-band {
  padding-top: calc(var(--section) * .7);
}

.band-paper + .section:not(.band-paper, .band-violet, .cta-band),
.band-violet + .section:not(.band-paper, .band-violet, .cta-band),
.cta-band + .section:not(.band-paper, .band-violet, .cta-band) {
  padding-top: calc(var(--section) * .5);
}
.stack > * + * { margin-top: 1rem; }
.center { text-align: center; margin-inline: auto; }
.center p { margin-inline: auto; }
.grid { display: grid; gap: clamp(1.25rem, .8rem + 1.6vw, 2.25rem); }
/* Genuinely two columns. auto-fit would let four items land 3 + 1, which reads
   as a mistake rather than a layout. */
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .grid--2 { grid-template-columns: 1fr; } }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Section eyebrow + heading pattern */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-sans); font-size: var(--step--1);
  font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--sun-600); margin: 0 0 1rem;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--sun-400), var(--amber-300));
}
.center .eyebrow::after {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--amber-300), var(--sun-400));
}
.section-head { max-width: 60ch; margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.25rem); }
.section-head.center { margin-inline: auto; }
.lede { font-size: var(--step-1); line-height: 1.55; color: var(--ink-soft); }

/* Editorial variant: eyebrow over a wide heading, supporting note set to the
   right, closed with a hairline rule. */
.section-head--split {
  max-width: none; text-align: left;
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 0 clamp(2rem, 1rem + 4vw, 5rem); align-items: start;
  padding-bottom: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  border-bottom: 1px solid var(--rule);
}
/* justify-self keeps the pill hugging its text — as a grid item the eyebrow's
   inline-flex is blockified and would otherwise stretch the whole column. */
.section-head--split .eyebrow { grid-column: 1 / -1; justify-self: start; margin-bottom: 1.15rem; }
/* `pretty` rather than `balance`: fill the first line, so the heading breaks at
   the comma the way the reference does. */
.section-head--split h2 { grid-column: 1; margin: 0; text-wrap: pretty; }
.section-head__note {
  grid-column: 2; margin: 0; padding-top: .55rem;
  font-size: 1rem; line-height: 1.7; color: var(--ink-soft); max-width: 40ch;
}
@media (max-width: 860px) {
  .section-head--split { grid-template-columns: 1fr; gap: 1rem; }
  .section-head--split h2, .section-head__note { grid-column: 1; }
  .section-head__note { padding-top: 0; }
}

/* On dark surfaces */
.on-dark { color: #fff; }
.on-dark h1, .on-dark h2, .on-dark h3 { color: #fff; }
.on-dark p { color: rgba(255,255,255,.82); }
.on-dark .eyebrow { color: var(--amber-300); }

/* ---------- 4. Buttons ---------- */
.btn {
  --btn-bg: var(--violet-700);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .85em 1.65em;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid transparent; border-radius: var(--r-pill);
  font-weight: 700; font-size: var(--step--1); letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
  box-shadow: var(--shadow-sm);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.05em; height: 1.05em; flex: none; }

.btn--warm { --btn-bg: linear-gradient(135deg, var(--sun-500), var(--sun-400) 55%, var(--sun-300)); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--violet-700); border-color: currentColor; box-shadow: none; }
.btn--ghost:hover { --btn-bg: var(--violet-700); --btn-fg: #fff; border-color: transparent; }
.btn--on-dark { --btn-bg: rgba(255,255,255,.1); --btn-fg: #fff; border-color: rgba(255,255,255,.55); backdrop-filter: blur(6px); }
.btn--on-dark:hover { --btn-bg: #fff; --btn-fg: var(--violet-800); border-color: #fff; }
.btn--sm { padding: .6em 1.15em; font-size: .78rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; }
.center .btn-row { justify-content: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 700; font-size: var(--step--1); letter-spacing: .07em;
  text-transform: uppercase; text-decoration: none; color: var(--violet-700);
  border-bottom: 2px solid var(--violet-100); padding-bottom: 2px;
  transition: color .2s var(--ease), border-color .2s var(--ease), gap .2s var(--ease);
}
.link-arrow:hover { color: var(--sun-600); border-color: var(--sun-400); gap: .8rem; }
.link-arrow::after { content: "\2192"; font-size: 1.05em; }
.on-dark .link-arrow { color: var(--amber-300); border-color: rgba(255,255,255,.25); }
.on-dark .link-arrow:hover { color: #fff; border-color: #fff; }

/* ---------- 5. Header ---------- */
.utility {
  background: var(--violet-950);
  color: rgba(255,255,255,.78);
  font-size: .8rem;
}
.utility__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 40px; flex-wrap: wrap;
}
.utility a { text-decoration: none; transition: color .2s var(--ease); }
.utility a:hover { color: #fff; }
.utility__left, .utility__right { display: flex; align-items: center; gap: 1.35rem; }
.utility__tag { display: inline-flex; align-items: center; gap: .5rem; letter-spacing: .04em; }
.utility__tag svg { width: 14px; height: 14px; opacity: .8; flex: none; }
.socials { display: flex; align-items: center; gap: .75rem; }
.socials a { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; transition: background .2s var(--ease), color .2s var(--ease); }
.socials a:hover { background: rgba(255,255,255,.14); color: #fff; }
.socials svg { width: 15px; height: 15px; }
@media (max-width: 900px) { .utility__tag--hours { display: none; } }
@media (max-width: 560px) { .utility { display: none; } }

.masthead {
  position: sticky; top: 0; z-index: 100;
  /* No backdrop-filter here on purpose: it would become the containing block
     for the position:fixed mobile nav panel and break its sizing. */
  background: linear-gradient(180deg, rgba(35,11,77,.97), rgba(28,9,62,.97));
  border-bottom: 1px solid rgba(255,255,255,.1);
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.masthead.is-stuck { background: rgba(23,6,47,.97); box-shadow: 0 10px 30px -18px rgba(0,0,0,.8); }
.masthead__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 76px; }

.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex: none; }
/* Official lockup. On the deep-violet bar the red wordmark needs a lift, so a
   soft warm glow sits behind it — the logo itself is never recoloured. */
.brand__logo {
  height: clamp(34px, 2.2vw + 22px, 46px); width: auto;
  filter: drop-shadow(0 0 14px rgba(255,214,180,.32)) drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
.footer .brand__logo { filter: drop-shadow(0 0 14px rgba(255,214,180,.28)); }
.brand__mark {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 32% 28%, #7dd3fc, #3b82f6 42%, var(--violet-700) 78%);
  display: grid; place-items: center; box-shadow: 0 0 0 2px rgba(255,255,255,.18);
  position: relative; overflow: hidden;
}
.brand__mark::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 42%;
  background: linear-gradient(180deg, var(--sun-400), var(--amber-300));
}
.brand__mark svg { position: relative; z-index: 1; width: 21px; height: 21px; color: var(--sun-600); }
.brand__text { display: grid; line-height: 1.05; }
.brand__name {
  font-family: var(--font-display); font-weight: 700; font-size: 1.06rem;
  letter-spacing: .01em;
  background: linear-gradient(92deg, var(--sun-500), var(--sun-300));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand__sub { font-size: .615rem; letter-spacing: .28em; text-transform: uppercase; color: rgba(255,255,255,.6); font-weight: 700; }

/* Light masthead variant — lets the full-colour logo read at full strength.
   Add `masthead--light` to the <header> to switch. */
.masthead--light {
  background: rgba(251,248,244,.96);
  border-bottom: 1px solid var(--rule);
}
.masthead--light.is-stuck { background: #fff; box-shadow: 0 10px 30px -22px rgba(35,11,77,.5); }
.masthead--light .brand__logo { filter: none; }
.masthead--light .nav__link { color: var(--ink-soft); }
.masthead--light .nav__link:hover,
.masthead--light .nav__link[aria-expanded="true"] { color: var(--violet-700); background: var(--violet-050); }
.masthead--light .nav__link[aria-current="page"] { color: var(--violet-700); }
.masthead--light .nav-toggle { background: var(--violet-050); border-color: var(--rule); color: var(--violet-700); }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: .2rem; list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; }
.nav__link {
  position: relative;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .6rem .85rem; border-radius: var(--r-sm);
  color: rgba(255,255,255,.86); text-decoration: none;
  font-size: .95rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  background: none; border: 0; cursor: pointer;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav__link:hover, .nav__link[aria-expanded="true"] { color: #fff; background: rgba(255,255,255,.1); }
.nav__link[aria-current="page"] { color: #fff; }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .15rem; height: 2px;
  border-radius: 2px; background: linear-gradient(90deg, var(--sun-400), var(--amber-300));
}
.nav__link .chev { width: 9px; height: 9px; transition: transform .2s var(--ease); }
.nav__link[aria-expanded="true"] .chev { transform: rotate(180deg); }

.nav__menu {
  position: absolute; top: calc(100% + .5rem); left: 0; min-width: 236px;
  background: #fff; border-radius: var(--r-md); padding: .5rem;
  box-shadow: var(--shadow-lg); list-style: none; margin: 0;
  border: 1px solid var(--rule);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.nav__item.is-open .nav__menu,
.nav__item--has-menu:focus-within .nav__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__menu a {
  display: block; padding: .6rem .8rem; border-radius: var(--r-sm);
  text-decoration: none; color: var(--ink-soft); font-size: 1rem; font-weight: 600;
  transition: background .18s var(--ease), color .18s var(--ease), padding-left .18s var(--ease);
}
.nav__menu a:hover { background: var(--violet-050); color: var(--violet-700); padding-left: 1.05rem; }

.masthead .btn { flex: none; }
.nav-toggle {
  display: none; margin-left: auto; width: 46px; height: 46px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--r-sm); color: #fff; cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 1260px) {
  .masthead__inner > .btn { display: none; }
}
@media (max-width: 980px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: 76px 0 0 0; margin: 0;
    background: var(--violet-950); overflow-y: auto;
    padding: 1.25rem var(--gutter) 3rem;
    transform: translateX(100%); transition: transform .3s var(--ease);
  }
  .nav.is-open { transform: none; }
  .nav__list { flex-direction: column; align-items: stretch; gap: .1rem; }
  .nav__link { width: 100%; justify-content: space-between; padding: 1rem .5rem; font-size: 1.05rem; border-bottom: 1px solid rgba(255,255,255,.08); border-radius: 0; }
  .nav__link[aria-current="page"]::after { left: .5rem; right: auto; width: 28px; bottom: .6rem; }
  .nav__menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    background: transparent; border: 0; box-shadow: none; padding: .2rem 0 .6rem .9rem;
    display: none;
  }
  .nav__item.is-open .nav__menu { display: block; }
  .nav__menu a { color: rgba(255,255,255,.72); }
  .nav__menu a:hover { background: rgba(255,255,255,.08); color: #fff; }
  .nav__cta { margin-top: 1.4rem; display: flex; flex-direction: column; gap: .7rem; }
  .nav__cta .btn { width: 100%; }
}
@media (min-width: 981px) { .nav__cta { display: none; } }

/* ---------- 6. Hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(560px, 78vh, 780px);
  display: flex; align-items: flex-end;
  color: #fff;
}
/* Hero photograph. The scrim in .hero::after is what keeps the type readable
   over it, so the two must always be changed together. */
.hero__sky {
  position: absolute; inset: 0; z-index: -3;
  background-image: url("../img/hero-sunset.jpg");
  background-size: cover;
  background-position: 50% 42%;
  background-repeat: no-repeat;
  background-color: var(--violet-950);
}
@media (min-width: 1600px) { .hero__sky { background-position: 50% 46%; } }

.hero::after { /* scrim + grain + vignette: keeps the type readable over the sunset */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(96deg, rgba(26,4,34,.74) 0%, rgba(26,4,34,.46) 30%, rgba(26,4,34,.1) 58%, transparent 76%),
    linear-gradient(180deg, rgba(23,6,47,.42) 0%, transparent 20%, transparent 52%, rgba(23,6,47,.72) 100%),
    radial-gradient(150% 115% at 50% 46%, transparent 46%, rgba(23,6,47,.34) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}
.hero__inner { position: relative; padding-block: clamp(4.5rem, 3rem + 8vw, 7.5rem) clamp(6.5rem, 4rem + 9vw, 9rem); }
.hero__verse {
  max-width: 34ch; margin-left: auto; text-align: right;
  font-family: var(--font-display); font-size: clamp(1.05rem, .9rem + .7vw, 1.5rem);
  font-weight: 500; font-style: italic; line-height: 1.42; color: rgba(255,255,255,.95);
  text-shadow: 0 2px 18px rgba(60,10,20,.5);
  margin-bottom: clamp(2.5rem, 1.5rem + 5vw, 5rem);
}
.hero__verse cite {
  display: block; margin-top: .7rem; font-style: normal; font-family: var(--font-sans);
  font-size: .78rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  color: var(--amber-200);
}
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase;
  color: var(--amber-200); margin-bottom: 1rem;
}
.hero__eyebrow::before { content: ""; width: 30px; height: 2px; background: var(--amber-300); border-radius: 2px; }
.hero h1 {
  font-size: var(--step-5); font-weight: 600; letter-spacing: -.03em; line-height: .95;
  margin-bottom: .35em; text-shadow: 0 4px 40px rgba(60,10,20,.45);
}
.hero h1 em { font-style: italic; font-variation-settings: "SOFT" 40, "WONK" 1; color: var(--amber-200); }
.hero__sub {
  font-size: clamp(1.05rem, .95rem + .5vw, 1.4rem); line-height: 1.45;
  color: rgba(255,255,255,.93); max-width: 32ch; margin-bottom: 2rem;
  text-shadow: 0 2px 16px rgba(60,10,20,.45);
}
/* staggered entrance */
.hero__verse, .hero__eyebrow, .hero h1, .hero__sub, .hero .btn-row { animation: rise .9s var(--ease) both; }
.hero__eyebrow { animation-delay: .05s; }
.hero h1 { animation-delay: .14s; }
.hero__sub { animation-delay: .24s; }
.hero .btn-row { animation-delay: .34s; }
.hero__verse { animation-delay: .5s; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* Service bar docked under the hero — key info above the fold */
.servicebar {
  position: relative; z-index: 2; margin-top: -3.75rem;
  background: var(--card); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); border: 1px solid var(--rule);
  display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden;
}
.servicebar__cell { padding: clamp(1.3rem, 1rem + 1vw, 1.9rem) clamp(1.2rem, .8rem + 1.2vw, 2rem); display: flex; gap: 1rem; align-items: flex-start; }
.servicebar__cell + .servicebar__cell { border-left: 1px solid var(--rule); }
.servicebar__icon {
  flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--violet-050), var(--violet-100));
  color: var(--violet-700);
}
.servicebar__icon svg { width: 20px; height: 20px; }
.servicebar h3 { font-family: var(--font-sans); font-size: .74rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--sun-600); margin: 0 0 .35rem; }
.servicebar p { margin: 0; font-size: .94rem; line-height: 1.5; color: var(--ink-soft); }
.servicebar strong { color: var(--ink); font-weight: 700; }
.servicebar a { color: var(--violet-700); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--violet-100); }
.servicebar a:hover { border-color: var(--violet-600); }
@media (max-width: 900px) {
  .servicebar { grid-template-columns: 1fr; margin-top: -2.25rem; }
  .servicebar__cell + .servicebar__cell { border-left: 0; border-top: 1px solid var(--rule); }
}

/* Page hero (inner pages) */
.pagehero {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(4rem, 2.5rem + 7vw, 8rem);
  background: linear-gradient(135deg, var(--violet-950), var(--violet-800) 48%, var(--violet-700));
  color: #fff;
}
.pagehero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 90% at 88% 12%, rgba(249,112,79,.42), transparent 62%),
    radial-gradient(52% 76% at 6% 92%, rgba(114,57,224,.55), transparent 60%);
}
.pagehero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
}
/* Photographic page hero. The scrim is weighted to the left, where the type
   sits, so the picture keeps its colour on the right. */
.pagehero--photo { background: var(--violet-950); }
.pagehero--photo::before {
  background:
    linear-gradient(100deg, rgba(23,6,47,.88) 0%, rgba(23,6,47,.6) 34%, rgba(23,6,47,.12) 62%, rgba(23,6,47,.25) 100%),
    linear-gradient(180deg, rgba(23,6,47,.42) 0%, transparent 26%, transparent 66%, rgba(23,6,47,.45) 100%),
    url("../img/calgary-skyline.jpg") center 58% / cover no-repeat;
}
/* Narrow crops put the type over the lit skyline, so the scrim turns vertical
   and gets heavier rather than relying on the left-weighted one. */
@media (max-width: 760px) {
  .pagehero--photo::before {
    background:
      linear-gradient(180deg, rgba(23,6,47,.74) 0%, rgba(23,6,47,.62) 50%, rgba(23,6,47,.82) 100%),
      url("../img/calgary-skyline.jpg") center / cover no-repeat;
  }
}

.pagehero h1 { margin-bottom: .3em; }
.pagehero p { color: rgba(255,255,255,.85); font-size: var(--step-1); max-width: 52ch; margin: 0; }
.crumbs { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--amber-200); margin: 0 0 1.15rem; list-style: none; padding: 0; }
.crumbs a { text-decoration: none; color: rgba(255,255,255,.7); }
.crumbs a:hover { color: #fff; }
.crumbs li + li::before { content: "/"; margin-right: .5rem; color: rgba(255,255,255,.4); }

/* Sub-nav for the About cluster */
.subnav { background: var(--violet-950); position: sticky; top: 76px; z-index: 60; }
.subnav__list { display: flex; gap: .2rem; list-style: none; margin: 0; padding: 0; overflow-x: auto; }
.subnav a {
  display: block; white-space: nowrap; padding: 1rem .95rem; text-decoration: none;
  color: rgba(255,255,255,.66); font-size: .92rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  border-bottom: 2px solid transparent; transition: color .2s var(--ease), border-color .2s var(--ease);
}
.subnav a:hover { color: #fff; }
.subnav a[aria-current="page"] { color: #fff; border-color: var(--sun-400); }

/* ---------- 7. Cards ---------- */
.card {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-lg);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--violet-100); }
.card__body { padding: clamp(1.25rem, 1rem + .8vw, 1.85rem); display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.card__body h3 { margin: 0; }
.card__body p { margin: 0; color: var(--ink-soft); font-size: .96rem; }
.card__body .link-arrow { margin-top: auto; padding-top: .9rem; align-self: flex-start; }
/* The body is a flex column, so a chip would otherwise stretch the full card
   width instead of hugging its label. */
.card__body .chip { align-self: flex-start; }
.card__media { aspect-ratio: 16 / 10; position: relative; overflow: hidden; }
.card:hover .card__media .ph { transform: scale(1.04); }

/* Gradient art placeholders standing in for photography */
.ph {
  position: absolute; inset: 0; display: grid; place-items: center;
  transition: transform .5s var(--ease);
  background: linear-gradient(140deg, var(--violet-700), var(--violet-500));
}
.ph::after {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}
.ph svg { position: relative; z-index: 1; width: 34%; max-width: 78px; height: auto; color: rgba(255,255,255,.62); }
.ph--sunset { background: linear-gradient(140deg, #f0913f, var(--sun-500) 52%, var(--violet-700)); }
.ph--dawn   { background: linear-gradient(140deg, var(--amber-300), var(--sun-400) 48%, #c0397a); }
.ph--deep   { background: linear-gradient(140deg, var(--violet-900), var(--violet-600) 62%, #3b82f6); }
.ph--sky    { background: linear-gradient(140deg, #38bdf8, var(--violet-500) 62%, var(--violet-800)); }
.ph--warm   { background: linear-gradient(140deg, #fbbf3c, #f9704f 55%, #d92f52); }
.ph--calm   { background: linear-gradient(140deg, #5eead4, #3b82f6 55%, var(--violet-700)); }
.ph-note {
  position: absolute; right: .7rem; bottom: .7rem; z-index: 2;
  font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
  color: rgba(255,255,255,.75); background: rgba(0,0,0,.3); backdrop-filter: blur(4px);
  padding: .25rem .5rem; border-radius: 4px;
}

/* Icon quick-link cards */
.qcard {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: clamp(1.4rem, 1rem + 1vw, 2rem); text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: .65rem; position: relative; overflow: hidden;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.qcard::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: linear-gradient(180deg, var(--sun-400), var(--violet-600));
  transform: scaleY(0); transform-origin: top; transition: transform .32s var(--ease);
}
.qcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--violet-100); }
.qcard:hover::before { transform: scaleY(1); }
.qcard__icon {
  width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--violet-050), var(--violet-100));
  color: var(--violet-700); margin-bottom: .35rem;
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.qcard:hover .qcard__icon { background: linear-gradient(140deg, var(--sun-500), var(--sun-300)); color: #fff; transform: rotate(-6deg) scale(1.06); }
.qcard__icon svg { width: 24px; height: 24px; }
.qcard h3 { margin: 0; font-size: var(--step-1); }
.qcard p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.qcard__more { margin-top: auto; padding-top: .9rem; font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--violet-600); display: inline-flex; gap: .4rem; transition: gap .2s var(--ease), color .2s var(--ease); }
.qcard:hover .qcard__more { gap: .75rem; color: var(--sun-600); }

/* ---------- Photo link cards (homepage "next steps") ---------- */
.eyebrow--pill {
  background: rgba(69,26,148,.08);
  color: var(--violet-700);
  padding: .5rem 1.1rem; border-radius: var(--r-pill);
}
.eyebrow--pill::before, .eyebrow--pill::after { display: none; }

.linkgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }

.linkcard {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--rule); border-radius: 26px;
  padding: .85rem .85rem 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
}
.linkcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--violet-100); }

.linkcard__fig {
  position: relative;
  aspect-ratio: 4/3; overflow: hidden; border-radius: 19px;
  margin-bottom: 1.25rem; background: var(--paper-alt);
}
.linkcard__fig img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease); }
.linkcard:hover .linkcard__fig img { transform: scale(1.06); }

.linkcard__body { padding: 0 .6rem; }
.linkcard h3 { margin: 0; font-size: var(--step-1); }
.linkcard p { margin: .5rem 0 0; font-size: .95rem; color: var(--ink-soft); }

.linkcard__more {
  display: inline-flex; align-items: center; gap: .5rem;
  margin: 1.25rem .6rem 0; align-self: flex-start;
  font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--violet-700); background: rgba(69,26,148,.08);
  padding: .6rem 1.15rem; border-radius: var(--r-pill);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.linkcard__more svg { width: 14px; height: 14px; transition: transform .24s var(--ease); }
.linkcard:hover .linkcard__more { background: var(--violet-700); color: #fff; }
.linkcard:hover .linkcard__more svg { transform: translateX(4px); }

/* The seventh item spans the row rather than leaving an orphan column. */
.linkcard--wide {
  grid-column: 1 / -1;
  flex-direction: row; align-items: center; gap: 1.75rem;
  padding: .85rem 2rem .85rem .85rem;
}
.linkcard--wide .linkcard__fig { flex: 0 0 34%; aspect-ratio: 16/9; margin-bottom: 0; }
.linkcard--wide .linkcard__body { padding: 0; flex: 1; }
.linkcard--wide p { max-width: 56ch; }
.linkcard--wide .linkcard__more { margin: 0; flex: none; align-self: center; }

@media (max-width: 940px) {
  .linkgrid { grid-template-columns: repeat(2, 1fr); gap: 1.35rem; }
  .linkcard--wide { flex-direction: column; align-items: stretch; padding: .85rem .85rem 1.5rem; }
  .linkcard--wide .linkcard__fig { flex: none; width: 100%; aspect-ratio: 16/9; margin-bottom: 1.25rem; }
  .linkcard--wide .linkcard__body { padding: 0 .6rem; }
  .linkcard--wide .linkcard__more { margin: 1.25rem .6rem 0; align-self: flex-start; }
}
/* On phones each card becomes a scannable row with a thumbnail. */
@media (max-width: 620px) {
  .linkgrid { grid-template-columns: 1fr; gap: .85rem; }
  .linkcard, .linkcard--wide {
    flex-direction: row; align-items: center; gap: 1rem;
    padding: .85rem; border-radius: 22px;
  }
  .linkcard:hover { transform: none; box-shadow: var(--shadow-sm); }
  .linkcard__fig, .linkcard--wide .linkcard__fig {
    flex: 0 0 88px; width: 88px; height: 88px; aspect-ratio: auto;
    margin-bottom: 0; border-radius: 17px;
  }
  .linkcard__body, .linkcard--wide .linkcard__body { padding: 0; }
  .linkcard h3 { font-size: 1.08rem; }
  .linkcard p { font-size: .9rem; margin-top: .25rem; }
  .linkcard__more { display: none; }
}

/* Pillars */
.pillar { text-align: center; padding: 1rem; }
.pillar__num {
  font-family: var(--font-display); font-size: 3rem; line-height: 1; font-weight: 600;
  background: linear-gradient(140deg, var(--sun-500), var(--amber-300));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  display: block; margin-bottom: .6rem;
}
.pillar h3 { font-size: var(--step-1); margin-bottom: .4rem; }
.pillar p { color: var(--ink-soft); font-size: .96rem; margin: 0 auto; max-width: 34ch; }

/* Split feature (image + text) */
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.split__media { position: relative; min-height: 380px; overflow: hidden; }
.split__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 64% 50%;
  transition: transform .7s var(--ease);
}
.split:hover .split__img { transform: scale(1.03); }
.split__text { padding: clamp(2rem, 1.4rem + 4vw, 5rem); display: flex; flex-direction: column; justify-content: center; }
.split--flip .split__media { order: 2; }
@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; }
  .split__media { min-height: 260px; order: -1 !important; }
}

/* ---------- 8. Sermon + event items ---------- */
.sermon { display: flex; flex-direction: column; }
.sermon__media { position: relative; aspect-ratio: 16/9; border-radius: var(--r-md); overflow: hidden; }
.sermon__play {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 2;
  background: rgba(23,6,47,.24); transition: background .3s var(--ease);
  /* A link where there is a video to play, so it must not pick up link colour
     or an underline. The label inside it is visually hidden and out of flow,
     which keeps the play button centred in the grid. */
  color: inherit; text-decoration: none; cursor: pointer;
}
.sermon:hover .sermon__play { background: rgba(23,6,47,.42); }
.sermon__play span {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.94); color: var(--violet-800);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.6);
  transition: transform .3s var(--ease);
}
.sermon:hover .sermon__play span { transform: scale(1.1); }
.sermon__play svg { width: 20px; height: 20px; margin-left: 3px; }
.sermon__meta { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; margin: 1rem 0 .5rem; font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.chip {
  display: inline-flex; align-items: center; padding: .25rem .6rem; border-radius: var(--r-pill);
  background: var(--violet-050); color: var(--violet-700); border: 1px solid var(--violet-100);
  font-size: .68rem; letter-spacing: .12em;
}
.chip--warm { background: #fff3ec; color: var(--sun-600); border-color: #ffd9c6; }
/* Age range on a ministry card — the first thing a parent looks for, so it is
   set solid rather than as a faint tint. */
.chip--age {
  background: var(--violet-700); border-color: var(--violet-700); color: #fff;
  font-size: .74rem; letter-spacing: .13em; padding: .38rem .85rem;
}
.sermon h3 { font-size: var(--step-1); margin: 0 0 .4rem; }
.sermon h3 a { text-decoration: none; background-image: linear-gradient(var(--sun-400), var(--sun-400)); background-size: 0 2px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .3s var(--ease); }
.sermon:hover h3 a { background-size: 100% 2px; }
.sermon__speaker { display: flex; align-items: center; gap: .6rem; font-size: .88rem; color: var(--ink-mute); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(140deg, var(--violet-500), var(--sun-500)); display: grid; place-items: center; color: #fff; font-size: .72rem; font-weight: 800; flex: none; }

.event {
  display: grid; grid-template-columns: 84px 1fr; gap: 1.25rem; align-items: start;
  padding: 1.5rem 0; border-top: 1px solid var(--rule);
}
.event:last-child { border-bottom: 1px solid var(--rule); }
.event__date {
  border-radius: var(--r-md); overflow: hidden; text-align: center; border: 1px solid var(--rule);
  background: var(--card); box-shadow: var(--shadow-sm);
}
.event__month { display: block; background: linear-gradient(135deg, var(--violet-700), var(--violet-600)); color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; padding: .3rem 0; }
.event__day { display: block; font-family: var(--font-display); font-size: 1.85rem; font-weight: 600; line-height: 1.5; color: var(--ink); }
.event h3 { margin: 0 0 .35rem; font-size: var(--step-1); }
.event h3 a { text-decoration: none; }
.event h3 a:hover { color: var(--violet-700); }
.event p { margin: 0; color: var(--ink-soft); font-size: .94rem; }
.event__where { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin-top: .5rem; font-size: .84rem; color: var(--ink-mute); }
.event__where span { display: inline-flex; align-items: center; gap: .4rem; }
.event__where svg { width: 14px; height: 14px; opacity: .7; flex: none; }

.event-card .card__media { aspect-ratio: 4/3; }
/* The badge lives at the top of the body and is pulled up over the artwork,
   so it never collides with the heading regardless of card width. */
.event-card__badge {
  position: relative; z-index: 3; width: 62px;
  margin-top: -3.55rem; margin-bottom: .35rem;
  border-radius: 12px; overflow: hidden; text-align: center; background: #fff;
  box-shadow: var(--shadow-md); border: 1px solid var(--rule);
}
.event-card__badge .event__day { font-size: 1.4rem; line-height: 1.45; }

/* ---------- 9. Bands & panels ---------- */
.band-violet {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(140deg, var(--violet-900), var(--violet-700) 55%, var(--violet-600));
  color: #fff;
}
.band-violet::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(48% 70% at 84% 8%, rgba(249,112,79,.4), transparent 60%),
    radial-gradient(44% 66% at 8% 96%, rgba(59,130,246,.34), transparent 60%);
}
.band-paper { background: var(--paper-alt); }

.cta-band {
  position: relative; isolation: isolate; overflow: hidden; color: #fff; text-align: center;
  background: linear-gradient(135deg, #7a2144, #c23a4a 42%, var(--sun-400) 78%, var(--amber-300));
}
.cta-band::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
}
.cta-band h2 { font-size: var(--step-4); }
.cta-band p { color: rgba(255,255,255,.94); font-size: var(--step-1); margin-inline: auto; }

/* Verse pull-quote */
.verse { position: relative; text-align: center; padding-inline: clamp(1rem, 4vw, 3rem); }
.verse blockquote {
  margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(1.35rem, 1.05rem + 1.5vw, 2.35rem); line-height: 1.4;
  font-variation-settings: "SOFT" 30, "WONK" 1;
}
.verse cite {
  display: block; margin-top: 1.4rem; font-style: normal; font-family: var(--font-sans);
  font-size: .78rem; letter-spacing: .28em; text-transform: uppercase; font-weight: 800;
  color: var(--sun-600);
}
.on-dark .verse cite { color: var(--amber-300); }

/* Accordion (beliefs / FAQ) */
.acc { border-top: 1px solid var(--rule); }
.acc__item { border-bottom: 1px solid var(--rule); }
.acc__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding: 1.35rem 0; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; color: var(--ink);
  transition: color .2s var(--ease);
}
.acc__btn:hover { color: var(--violet-700); }
.acc__btn .plus { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--rule); display: grid; place-items: center; transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.acc__btn[aria-expanded="true"] .plus { transform: rotate(45deg); background: var(--violet-700); color: #fff; border-color: var(--violet-700); }
.acc__btn .plus svg { width: 14px; height: 14px; }
.acc__panel { display: none; padding-bottom: 1.5rem; }
.acc__item.is-open .acc__panel { display: block; animation: fade .3s var(--ease); }
.acc__panel p:last-child { margin-bottom: 0; }
@keyframes fade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Welcome — a portrait graphic held at its own ratio beside the copy. */
.welcome-split {
  display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(2rem, 1.2rem + 4vw, 4.5rem); align-items: center;
}
@media (max-width: 860px) {
  .welcome-split { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .welcome-split .btn-row { justify-content: center; }
  .welcome-split p { margin-inline: auto; }
  .portrait-frame { max-width: 300px; }
}
/* The frame matches the artwork's ratio exactly, so `cover` crops nothing —
   important here, because the message is set into the image itself. */
.portrait-frame {
  width: 100%; aspect-ratio: 506 / 900; overflow: hidden;
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  background: var(--paper-alt);
}
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; }

/* Sunday timeline — genuinely a sequence, so it reads on a rail. */
.timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
.tl-step { position: relative; padding-top: 2.75rem; }
.tl-step::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--rule);
}
.tl-step:first-child::before { border-radius: 2px 0 0 2px; }
.tl-step::after {
  content: ""; position: absolute; top: -7px; left: 0;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--card); border: 3px solid var(--sun-500);
  box-shadow: 0 0 0 4px var(--paper);
}
.tl-step time {
  display: block; font-size: .76rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--sun-600); margin-bottom: .5rem;
}
.tl-step h3 { margin: 0 0 .5rem; font-size: var(--step-1); }
.tl-step p { margin: 0; color: var(--ink-soft); font-size: .96rem; }
@media (max-width: 760px) {
  .timeline { grid-template-columns: 1fr; gap: 0; }
  .tl-step { padding: 0 0 2rem 2rem; }
  .tl-step::before { top: 0; bottom: 0; left: 7px; right: auto; width: 2px; height: auto; }
  .tl-step:last-child::before { bottom: auto; height: 12px; }
  .tl-step::after { top: 0; left: 0; }
}

/* Vision — a manifesto opener and full-bleed alternating features. */
.statement {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.6rem, 1.1rem + 2.4vw, 3.1rem);
  line-height: 1.18; letter-spacing: -.02em; text-wrap: balance;
  margin: 0; max-width: 22ch;
}
.statement em { font-style: italic; font-variation-settings: "SOFT" 40, "WONK" 1; color: var(--sun-600); }
.statement-row {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: end;
  padding-bottom: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  border-bottom: 1px solid var(--rule);
}
.statement-row p { margin: 0; color: var(--ink-soft); max-width: 42ch; }
@media (max-width: 820px) { .statement-row { grid-template-columns: 1fr; align-items: start; gap: 1.25rem; } }

.split--tall .split__media { min-height: clamp(340px, 46vw, 560px); }
.split__quote {
  margin: 0 0 1.5rem; padding-left: 1.15rem;
  border-left: 2px solid var(--sun-400);
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 1.05rem; line-height: 1.55; color: var(--ink-soft); max-width: 46ch;
}
.split__quote cite {
  display: block; margin-top: .6rem; font-style: normal; font-family: var(--font-sans);
  font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sun-600);
}
.on-dark .split__quote { color: rgba(255,255,255,.86); border-left-color: var(--amber-300); }
.on-dark .split__quote cite { color: var(--amber-300); }

/* Tenets — a named commitment, its scripture, and the exposition beside it. */
.tenet {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  padding-block: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  border-top: 1px solid var(--rule);
}
.tenet:last-child { border-bottom: 1px solid var(--rule); }
.tenet h2 { font-size: var(--step-2); margin: 0 0 1.1rem; }
.tenet blockquote {
  margin: 0; padding-left: 1.15rem; border-left: 2px solid var(--sun-400);
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 1.02rem; line-height: 1.55; color: var(--ink-soft);
}
.tenet blockquote cite {
  display: block; margin-top: .6rem; font-style: normal; font-family: var(--font-sans);
  font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sun-600);
}
.tenet__body p:last-child { margin-bottom: 0; }
@media (max-width: 820px) { .tenet { grid-template-columns: 1fr; gap: 1.5rem; } }

/* Belief grid */
.belief {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-md);
  padding: 1.5rem; border-left: 3px solid var(--violet-600);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-left-color .25s var(--ease);
}
.belief:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-left-color: var(--sun-500); }
.belief h3 { font-family: var(--font-sans); font-size: .8rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--violet-700); margin-bottom: .55rem; }
.belief p { margin: 0; font-size: .95rem; color: var(--ink-soft); }
.belief .ref { display: block; margin-top: .6rem; font-size: .8rem; font-style: italic; color: var(--ink-mute); }

/* Team */
.person { text-align: center; }
.person__photo {
  width: min(200px, 62%); aspect-ratio: 1; border-radius: 50%; margin: 0 auto 1.15rem;
  position: relative; overflow: hidden; box-shadow: var(--shadow-md);
  transition: transform .3s var(--ease);
}
.person__photo img { width: 100%; height: 100%; object-fit: cover; }
.person:hover .person__photo { transform: translateY(-5px) scale(1.02); }
.person h3 { margin: 0 0 .2rem; font-size: var(--step-1); }
.person__role { font-size: .76rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--sun-600); margin: 0 0 .7rem; }
.person p { font-size: .93rem; color: var(--ink-soft); margin-inline: auto; max-width: 32ch; }

/* Giving amount tiles */
.give-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (max-width: 420px) { .give-grid { grid-template-columns: 1fr; } }
.give-tile {
  position: relative; border-radius: var(--r-lg); padding: 1.75rem 1.25rem; text-align: center;
  background: linear-gradient(150deg, var(--violet-800), var(--violet-600));
  color: #fff; text-decoration: none; overflow: hidden; border: 1px solid rgba(255,255,255,.14);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.give-tile:nth-child(2) { background: linear-gradient(150deg, var(--violet-700), var(--violet-500)); }
.give-tile:nth-child(3) { background: linear-gradient(150deg, var(--violet-600), #7c4ae6); }
.give-tile:nth-child(4) { background: linear-gradient(150deg, var(--sun-600), var(--sun-400)); }
.give-tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.give-tile__label { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.give-tile__amt { display: block; font-family: var(--font-display); font-size: 2.6rem; font-weight: 600; line-height: 1.15; margin: .35rem 0 .5rem; }
.give-tile p { font-size: .84rem; color: rgba(255,255,255,.85); margin: 0; }

.method {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
}
.method__icon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(140deg, var(--violet-050), var(--violet-100)); color: var(--violet-700); margin-bottom: 1rem; }
.method__icon svg { width: 22px; height: 22px; }
.method h3 { margin-bottom: .5rem; }
.method p:last-child { margin-bottom: 0; }
.method code { background: var(--violet-050); border: 1px solid var(--violet-100); border-radius: 6px; padding: .15rem .45rem; font-size: .9em; color: var(--violet-700); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }

/* Info tiles (contact / visit) */
.info-tile { display: flex; gap: 1.1rem; align-items: flex-start; }
.info-tile__icon { flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(140deg, var(--violet-050), var(--violet-100)); color: var(--violet-700); }
.on-dark .info-tile__icon { background: rgba(255,255,255,.12); color: var(--amber-300); }
.info-tile__icon svg { width: 21px; height: 21px; }
.info-tile h3 { font-size: var(--step-0); font-family: var(--font-sans); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .35rem; }
.info-tile p { margin: 0; font-size: .95rem; color: var(--ink-soft); }
.on-dark .info-tile p { color: rgba(255,255,255,.8); }
.info-tile a { color: inherit; }

/* Practical facts on a ministry page — ages, times, which house. A two-column
   definition list rather than tiles: every row is a short label against a short
   answer, and the eye should be able to run straight down the answers. */
.facts { margin: 2.25rem auto 0; max-width: var(--wrap-narrow); display: grid; gap: 0; }
.facts__row {
  display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: .35rem 1.75rem; align-items: baseline;
  padding: 1rem 0; border-top: 1px solid var(--rule);
}
.facts__row:last-child { border-bottom: 1px solid var(--rule); }
.facts dt {
  font-family: var(--font-sans); font-size: .78rem; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase; color: var(--violet-700);
  /* The labels are typed by the church, so one will eventually be longer than
     the column. Wrapping beats pushing the answers out of alignment. */
  overflow-wrap: anywhere;
}
.facts dd { margin: 0; color: var(--ink); }
.facts__wide { grid-column: 1 / -1; color: var(--ink-soft); }
@media (max-width: 640px) {
  .facts__row { grid-template-columns: 1fr; }
}

/* ---------- 10. Forms ---------- */
.form { display: grid; gap: 1.15rem; }
.field { display: grid; gap: .4rem; }
.field label { font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.on-dark .field label { color: rgba(255,255,255,.8); }
.field input, .field textarea, .field select {
  width: 100%; padding: .85rem 1rem; border-radius: var(--r-sm);
  border: 1px solid var(--rule); background: #fff; color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--violet-500); box-shadow: 0 0 0 4px var(--violet-100);
}
.field__hint { font-size: .82rem; color: var(--ink-mute); }
.on-dark .field__hint { color: rgba(255,255,255,.65); }
.form-note { font-size: .82rem; color: var(--ink-mute); }

/* Honeypot. Off-screen rather than display:none, because some bots skip
   fields they can tell are hidden. aria-hidden and tabindex="-1" keep it away
   from anyone using a keyboard or a screen reader. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* What the visitor sees after sending. */
.form-status {
  margin: 0 0 1rem; padding: .7rem .9rem; border-radius: .55rem;
  font-size: .92rem; line-height: 1.45; font-weight: 500;
}
.form-status--ok  { background: #e6f4ec; color: #1c6b46; }
.form-status--bad { background: #fdeaee; color: #b3253f; }
.on-dark .form-status--ok  { background: rgba(74,196,149,.16); color: #9fe3c4; }
.on-dark .form-status--bad { background: rgba(244,115,141,.16); color: #ffb3c2; }
.on-dark .form-note { color: rgba(255,255,255,.62); }

/* The form panel is a light card sitting inside a dark section, so it has to
   opt back out of the on-dark text colours. Without this the field labels and
   the note under the button are white on white — invisible, and unnoticed
   while these forms were decorative. */
.on-dark .form-panel .field label { color: var(--ink-soft); }
.on-dark .form-panel .form-note   { color: var(--ink-mute); }
/* Forms are anchor targets after a submission, so they need to clear the
   sticky masthead — otherwise the confirmation the visitor is being sent to
   read scrolls up underneath it. */
.form[id] { scroll-margin-top: 7rem; }

/* Same for the status message: its dark-section colours are unreadable on the
   white card, which is where it actually renders. */
.on-dark .form-panel .form-status--ok  { background: #e6f4ec; color: #1c6b46; }
.on-dark .form-panel .form-status--bad { background: #fdeaee; color: #b3253f; }
.form-panel {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.75rem); box-shadow: var(--shadow-sm);
}

/* Map placeholder */
.map {
  position: relative; min-height: 340px; height: 100%; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--rule);
  background: linear-gradient(140deg, #e8f2e6, #dfeaf4 60%, #eef1e6);
}
.map::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.9) 2px, transparent 2px),
    linear-gradient(180deg, rgba(255,255,255,.9) 2px, transparent 2px),
    linear-gradient(58deg, transparent 46%, rgba(160,196,225,.6) 46% 54%, transparent 54%);
  background-size: 58px 58px, 58px 58px, 100% 100%;
}
.map__pin {
  position: absolute; left: 50%; top: 48%; z-index: 2;
  width: 34px; height: 34px; border-radius: 50% 50% 50% 0;
  transform: translate(-50%,-100%) rotate(-45deg);
  background: var(--sun-600); box-shadow: 0 10px 24px -8px rgba(217,47,82,.8);
}
.map__pin::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: #fff; }
.map__label {
  position: absolute; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 3;
  background: rgba(255,255,255,.95); border: 1px solid var(--rule); border-radius: var(--r-pill);
  padding: .5rem 1.1rem; font-size: .84rem; font-weight: 700; color: var(--ink); white-space: nowrap;
  box-shadow: var(--shadow-sm);
}

/* A logo panel and a video sitting side by side as matched 16:9 siblings. */
.media-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, .9rem + 1.4vw, 2rem);
}
@media (max-width: 820px) { .media-row { grid-template-columns: 1fr; } }

/* Brand panel. The artwork is already 16:9 on its own dark ground, so it fills
   the panel edge to edge — no inner rectangle where two near-blacks meet. */
.logo-panel {
  aspect-ratio: 16/9; background: #101820; overflow: hidden;
  border-radius: var(--r-lg); border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow-lg);
  display: grid; place-items: center;
  padding: clamp(1.25rem, 3vw, 2.5rem);
}
/* The artwork is cropped to its own bounds, so `contain` lets the wordmark run
   the full width of the panel instead of floating small in the middle. */
.logo-panel img { width: 100%; height: 100%; object-fit: contain; }

/* Responsive video embed. Without these the iframe falls back to its own
   intrinsic size and sits small in the corner of its column. */
.video {
  position: relative; aspect-ratio: 16/9; overflow: hidden;
  border-radius: var(--r-lg); background: #101820;
  border: 1px solid rgba(255,255,255,.14); box-shadow: var(--shadow-lg);
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Stand-in used only in the shareable single-file bundle, where the preview's
   content policy blocks third-party frames. */
.video-facade {
  position: relative; aspect-ratio: 16/9; overflow: hidden;
  border-radius: var(--r-lg); border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(140deg, #101820, #1d2c3c);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  text-decoration: none; color: #fff; text-align: center; padding: 1.5rem;
  transition: transform .25s var(--ease);
}
.video-facade:hover { transform: translateY(-3px); }
.video-facade__play {
  width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.95); color: var(--violet-800);
  transition: transform .25s var(--ease);
}
.video-facade:hover .video-facade__play { transform: scale(1.08); }
.video-facade__play svg { width: 24px; height: 24px; margin-left: 4px; }
.video-facade__note { font-size: .84rem; color: rgba(255,255,255,.72); max-width: 34ch; }

/* Sermon player. Built by main.js on click and destroyed on close, so the page
   never carries YouTube's player for a video nobody asked to watch. */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(12, 4, 26, .84);
  animation: lightbox-in .18s var(--ease);
}
@keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } }
.lightbox__frame {
  position: relative; width: min(100%, 1100px); aspect-ratio: 16/9;
  border-radius: var(--r-lg); overflow: hidden;
  background: #000; box-shadow: var(--shadow-lg);
}
.lightbox__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lightbox__close {
  position: absolute;
  top: clamp(.6rem, 2.5vw, 1.5rem); right: clamp(.6rem, 2.5vw, 1.5rem);
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; padding: 0;
  background: rgba(255,255,255,.92); color: var(--violet-800);
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.lightbox__close:hover { background: #fff; transform: scale(1.06); }
.lightbox__close svg { width: 20px; height: 20px; }
/* The page behind must not scroll under the player. */
body.has-lightbox { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .lightbox { animation: none; }
  .lightbox__close:hover { transform: none; }
}

/* Outbound resource links — centred on a violet band, icon leading. */
.linkband {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
}
@media (max-width: 700px) { .linkband { grid-template-columns: 1fr; } }
.linkband a {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 1.1rem; padding: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem) 1.5rem;
  border-radius: var(--r-lg); text-decoration: none; color: #fff;
  border: 1px solid transparent;
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.linkband a:hover {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18);
  transform: translateY(-4px);
}
.linkband__icon svg {
  width: clamp(52px, 4vw, 66px); height: auto; color: #fff;
  transition: transform .3s var(--ease);
}
.linkband a:hover .linkband__icon svg { transform: scale(1.06); }
.linkband h3 { margin: 0; color: #fff; font-size: var(--step-1); max-width: 18ch; }
.linkband p { margin: 0; font-size: .93rem; color: rgba(255,255,255,.78); max-width: 32ch; }

/* Watch-live player frame */
.player {
  position: relative; aspect-ratio: 16/9; border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(140deg, var(--violet-950), var(--violet-700));
  box-shadow: var(--shadow-lg); display: grid; place-items: center; text-align: center;
  border: 1px solid rgba(255,255,255,.14);
}
.player__inner { position: relative; z-index: 2; padding: 2rem; }
.player__badge {
  display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1rem;
  background: var(--sun-600); color: #fff; padding: .35rem .85rem; border-radius: var(--r-pill);
  font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
}
.player__badge .dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* ---------- 11. Footer ---------- */
.footer { background: var(--violet-950); color: rgba(255,255,255,.72); padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 0; }
.footer a { text-decoration: none; transition: color .2s var(--ease); }
.footer a:hover { color: #fff; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.35fr; gap: clamp(1.75rem, 1rem + 3vw, 3.5rem); }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer h3 { font-family: var(--font-sans); font-size: .76rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #fff; margin-bottom: 1.15rem; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; font-size: .94rem; }
.footer p { font-size: .94rem; max-width: 34ch; }
.footer .brand { margin-bottom: 1.15rem; }
.footer__bottom {
  margin-top: clamp(2.5rem, 1.6rem + 3vw, 4rem); border-top: 1px solid rgba(255,255,255,.1);
  padding-block: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  font-size: .84rem; color: rgba(255,255,255,.5);
}
.footer .socials a { background: rgba(255,255,255,.08); width: 38px; height: 38px; }
.footer .socials a:hover { background: linear-gradient(140deg, var(--sun-500), var(--sun-300)); color: #fff; }
.footer .socials svg { width: 17px; height: 17px; }
.newsletter { display: flex; gap: .5rem; margin-top: 1rem; }
.newsletter input {
  flex: 1; min-width: 0; padding: .75rem .95rem; border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.07); color: #fff;
}
.newsletter input::placeholder { color: rgba(255,255,255,.45); }
.newsletter input:focus { outline: none; border-color: var(--sun-400); background: rgba(255,255,255,.12); }

/* ---------- 12. Mockup annotation chrome ---------- */
.mockup-flag {
  position: fixed; right: 14px; bottom: 14px; z-index: 200;
  background: var(--ink); color: #fff; font-size: .68rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; padding: .55rem .9rem;
  border-radius: var(--r-pill); box-shadow: var(--shadow-lg); opacity: .8;
  pointer-events: none;
}

/* ---------- 13. Reveal on scroll ---------- */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }


/* ------------------------------------------------- sermons and events --- */
/* The filter bar is a real form now, so its layout lives here rather than in
   inline styles on the markup. */
.sermon-filters {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
  justify-content: space-between; margin-bottom: 2.5rem;
  padding-bottom: 1.5rem; border-bottom: 1px solid var(--rule);
}
/* Year and preacher are dropdowns rather than rows of chips: the library grew
   past the point where a chip per year and a chip per preacher paid for the
   band of page they took, and a closed select says the same thing in one line. */
.sermon-filters__controls { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; min-width: 0; }
.sermon-filters__field    { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.sermon-filters__field label {
  flex: none;
  font-family: var(--font-sans); font-size: .72rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
}
.sermon-filters__field select {
  padding: .6rem 2.1rem .6rem 1rem; border-radius: var(--r-pill);
  border: 1px solid var(--rule); background-color: #fff; color: var(--ink);
  font: inherit; font-size: .92rem; line-height: 1.2; cursor: pointer;
  max-width: 15rem; text-overflow: ellipsis;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6478' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .75rem center; background-size: 14px;
}
.sermon-filters__field select:focus-visible { outline: 2px solid var(--violet-700); outline-offset: 2px; }
.sermon-filters__search { display: flex; gap: .6rem; align-items: center; }
/* What the filters currently narrow to, and the way back out. */
.sermon-filters__state {
  margin: -1.25rem 0 2rem; font-size: var(--step--1); color: var(--ink-soft);
}
.sermon-filters__state a { margin-left: .5rem; }
/* On a phone each control takes its own line and the select fills whatever the
   label leaves, rather than a fixed max-width pushing the bar off the screen. */
@media (max-width: 560px) {
  .sermon-filters__controls,
  .sermon-filters__search { width: 100%; }
  .sermon-filters__field  { flex: 1 1 100%; }
  .sermon-filters__field select,
  .sermon-filters__search input { flex: 1 1 auto; min-width: 0; max-width: none; }
}
.sermon-filters__search input {
  padding: .6rem 1rem; border-radius: var(--r-pill);
  border: 1px solid var(--rule); background: #fff; max-width: 200px;
}

.sermon-featured { margin-bottom: 3rem; }
.sermon-featured__media { min-height: 300px; }
.sermon-featured__text  { padding: clamp(1.75rem, 1.2rem + 2.5vw, 3rem); }
.sermon-featured__title { font-size: var(--step-2); }
.sermon__meta--flush    { margin-top: 0; }
.sermon__speaker--roomy { margin-bottom: 1.4rem; }

/* Artwork, once a sermon or event has some, fills the same box the gradient
   placeholder did. */
.sermon__media img,
.card__media img,
.split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The closing bands space their buttons off the paragraph above. */
.btn-row--roomy { margin-top: 1.8rem; }

/* The team grid is narrower than a full three-column row, so two or three
   people do not drift apart across a wide screen. */
.team-grid { max-width: 900px; margin-inline: auto; }

/* The scripture reference under a split's text, which the templates set
   with an inline style. */
.split__note { font-style: italic; color: var(--ink-mute); }
.on-dark .split__note { color: rgba(255,255,255,.66); }