/* =============================================================================
   Sanctuary — a Ghost theme for churches
   v4 design system
   -----------------------------------------------------------------------------
   Contents
     0.  Bundled fonts (declared in partials/font-faces.hbs)
     1.  Design tokens (colour, type, space, motion, the arch motif)
     2.  Colour schemes (light / dark) + accessibility modes
     3.  Base & typography
     4.  Layout primitives (container, grid, sections, utilities)
     5.  Components (buttons, cards, badges, chips, forms, section headers)
     6.  Site chrome (announcement, header, nav, footer)
     7.  Hero variants (image / gradient / split) + service rail
     8.  Sermons (spotlight, player, meta, archive, series)
     9.  Homepage sections (welcome, steps, service band, verse, giving…)
     10. Pages (giving, ministries, reading plans, prayer wall, forms)
     11. Post / page content (Koenig cards)
     12. Pagination, reveal-on-scroll, misc
     13. Print styles

   Colour comes from Ghost: the brand colour is the native accent
   (Settings → Design → Brand); everything else is wired through @custom
   settings injected as CSS variables in default.hbs.
============================================================================= */

/* 0. FONTS ------------------------------------------------------------------
   Fraunces and Instrument Sans ship inside the theme (assets/fonts, SIL OFL 1.1,
   latin + latin-ext subsets), so the theme makes NO third-party font requests.
   Their @font-face rules live in partials/font-faces.hbs (included from the page
   head) so the URLs carry Ghost's cache-busting hash and match the preloads; the
   'Traditional serif' and 'System fonts' options load no font files at all. */

/* 1. DESIGN TOKENS ---------------------------------------------------------- */
:root {
  /* Brand colours are injected inline in default.hbs:
       --brand      (native @site.accent_color)
       --secondary  (@custom.secondary_color)  */
  --brand: #8a4b26;
  --secondary: #b8895a;

  /* Tints/shades derived from the brand so one colour styles the whole UI */
  --brand-contrast: #ffffff;                 /* text on --brand */
  --brand-soft: color-mix(in srgb, var(--brand) 10%, transparent);
  --brand-softer: color-mix(in srgb, var(--brand) 5%, transparent);
  --brand-strong: color-mix(in srgb, var(--brand) 78%, #120a04);
  --brand-tint: color-mix(in srgb, var(--brand) 14%, var(--bg));
  /* --brand paints fills, rules and borders. --brand-text is the same colour
     nudged toward the page's ink so small text stays legible whatever accent
     the publisher picks; dark mode nudges it toward the light text instead. */
  --brand-text: color-mix(in srgb, var(--brand) 88%, #17140f);

  /* Warm neutral palette — paper, stone and oak rather than clinical white.
     Light scheme here; overridden per-scheme in section 2. */
  --bg: #fbf9f6;
  --surface: #ffffff;
  --surface-2: #f4f1ea;
  --surface-3: #ebe5da;
  --text: #17140f;
  --text-muted: #6b6459;
  --text-faint: #8d857a;
  --border: #e7e1d6;
  --border-strong: #d4cbba;

  /* Deep ink — the "sanctuary" bands (service times, giving, footer) */
  --ink: #14110d;
  --ink-2: #1d1913;
  --ink-text: #f7f3ea;
  --ink-muted: color-mix(in srgb, var(--ink-text) 58%, transparent);
  --ink-border: color-mix(in srgb, var(--ink-text) 14%, transparent);
  --ink-edge: transparent;

  --shadow-color: 32 24 12;
  --shadow-1: 0 1px 2px rgb(var(--shadow-color) / 0.05);
  --shadow-2: 0 2px 8px rgb(var(--shadow-color) / 0.05), 0 18px 44px rgb(var(--shadow-color) / 0.09);
  --shadow-3: 0 4px 14px rgb(var(--shadow-color) / 0.08), 0 30px 70px rgb(var(--shadow-color) / 0.14);

  /* Solid button pair — flips with the colour scheme */
  --btn: #17140f;
  --btn-text: #fbf9f6;

  /* Form feedback (success / error) — re-tinted per scheme to hold AA contrast */
  --ok-bg: color-mix(in srgb, #16a34a 15%, transparent);
  --ok-text: #146c34;
  --err-bg: color-mix(in srgb, #dc2626 15%, transparent);
  --err-text: #b91c1c;

  /* Typography. 'Editorial serif' (default) and 'Contemporary sans' use the
     bundled fonts from section 0; 'Traditional serif' and 'System fonts' use
     system stacks only. --gh-font-heading / --gh-font-body (Ghost custom fonts)
     always win. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, Cambria, "Times New Roman", serif;
  --stack-contemporary: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --stack-editorial-heading: "Fraunces", "Iowan Old Style", Palatino, Georgia, serif;
  --stack-editorial-body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Scripture/quote voice — always the italic serif, whatever the pairing */
  --font-quote: "Fraunces", var(--font-serif);
  --font-heading: var(--gh-font-heading, var(--stack-editorial-heading));
  --font-body: var(--gh-font-body, var(--stack-editorial-body));

  /* Fluid type scale — a wider range than v3 so display type can carry a page */
  --step--2: clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --step--1: clamp(0.81rem, 0.79rem + 0.12vw, 0.89rem);
  --step-0:  clamp(1rem, 0.96rem + 0.22vw, 1.14rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.48vw, 1.55rem);
  --step-2:  clamp(1.5rem, 1.3rem + 0.9vw, 2.15rem);
  --step-3:  clamp(1.9rem, 1.5rem + 1.9vw, 3.1rem);
  --step-4:  clamp(2.4rem, 1.75rem + 3.1vw, 4.4rem);
  --step-5:  clamp(3rem, 1.95rem + 4.9vw, 6rem);
  --step-6:  clamp(3.4rem, 1.9rem + 7vw, 8rem);

  /* Spacing scale (4px base) */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.25rem;
  --space-xl: 3.5rem;
  --space-2xl: 5.5rem;
  --space-3xl: 8rem;

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;
  --radius-pill: 999px;

  /* The arch — a real church-window head, not just a big corner radius.
     Elliptical top corners over square feet; used on portrait media. */
  --arch: 50% 50% var(--radius-s) var(--radius-s) / 32% 32% 0 0;
  --arch-soft: 50% 50% var(--radius-m) var(--radius-m) / 16% 16% 0 0;

  --container: 1240px;
  --container-narrow: 720px;
  --container-wide: 1480px;

  --header-height: 82px;
  --transition: 220ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-slow: 620ms cubic-bezier(0.22, 1, 0.36, 1);

  color-scheme: light;
}

@media (max-width: 700px) {
  :root { --header-height: 68px; }
}

/* Typography pairings (set on <html> from @custom.typography) */
html.font-editorial { --font-heading: var(--gh-font-heading, var(--stack-editorial-heading)); --font-body: var(--gh-font-body, var(--stack-editorial-body)); }
html.font-serif     { --font-heading: var(--gh-font-heading, var(--font-serif));            --font-body: var(--gh-font-body, var(--font-serif)); }
html.font-sans      { --font-heading: var(--gh-font-heading, var(--stack-contemporary));    --font-body: var(--gh-font-body, var(--stack-contemporary)); }
html.font-system    { --font-heading: var(--gh-font-heading, var(--font-sans));             --font-body: var(--gh-font-body, var(--font-sans)); }

/* Sans pairings: tight, confident headings */
html.font-sans h1, html.font-sans h2, html.font-sans h3, html.font-sans h4,
html.font-system h1, html.font-system h2, html.font-system h3, html.font-system h4 {
  letter-spacing: -0.035em;
  font-weight: 600;
  line-height: 1.04;
}

/* Editorial serif: optical sizing, restrained weight */
html.font-editorial h1, html.font-editorial h2, html.font-editorial h3,
html.font-editorial .display {
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 144;
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.02;
}
html.font-editorial .hero h1 { font-weight: 460; letter-spacing: -0.028em; }

/* Traditional serif keeps a classic, slightly looser setting */
html.font-serif h1, html.font-serif h2, html.font-serif h3 {
  letter-spacing: -0.015em;
  font-weight: 600;
  line-height: 1.08;
}

/* 2. COLOUR SCHEMES & ACCESSIBILITY MODES ---------------------------------- */
.dark-scheme,
html[data-scheme="dark"] {
  --bg: #100e0b;
  --surface: #191510;
  --surface-2: #272019;
  --surface-3: #2a241c;
  --text: #f4f0e8;
  --text-muted: #a9a294;
  --text-faint: #736c60;
  --border: #2c261e;
  --border-strong: #423a2f;
  --brand-contrast: #17100a;
  --brand-soft: color-mix(in srgb, var(--brand) 26%, transparent);
  --brand-softer: color-mix(in srgb, var(--brand) 13%, transparent);
  --brand-tint: color-mix(in srgb, var(--brand) 22%, var(--bg));
  --brand-text: color-mix(in srgb, var(--brand) 42%, #f4f0e8);
  --ink: #332a1f;
  --ink-2: #3d3223;
  --ink-edge: color-mix(in srgb, var(--ink-text) 12%, transparent);
  --btn: #f4f0e8;
  --btn-text: #17140f;
  --ok-text: #86efac;
  --err-text: #fca5a5;
  --shadow-color: 0 0 0;
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-2: 0 10px 32px rgb(0 0 0 / 0.55);
  --shadow-3: 0 20px 60px rgb(0 0 0 / 0.65);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  html[data-scheme="auto"] {
    --bg: #100e0b;
    --surface: #191510;
    --surface-2: #272019;
    --surface-3: #2a241c;
    --text: #f4f0e8;
    --text-muted: #a9a294;
    --text-faint: #736c60;
    --border: #2c261e;
    --border-strong: #423a2f;
    --brand-contrast: #17100a;
    --brand-soft: color-mix(in srgb, var(--brand) 26%, transparent);
    --brand-softer: color-mix(in srgb, var(--brand) 13%, transparent);
    --brand-tint: color-mix(in srgb, var(--brand) 22%, var(--bg));
    --brand-text: color-mix(in srgb, var(--brand) 42%, #f4f0e8);
    --ink: #332a1f;
    --ink-2: #3d3223;
  --ink-edge: color-mix(in srgb, var(--ink-text) 12%, transparent);
    --btn: #f4f0e8;
    --btn-text: #17140f;
    --ok-text: #86efac;
    --err-text: #fca5a5;
    --shadow-color: 0 0 0;
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-2: 0 10px 32px rgb(0 0 0 / 0.55);
    --shadow-3: 0 20px 60px rgb(0 0 0 / 0.65);
    color-scheme: dark;
  }
}

/* Accessibility: high-contrast mode (toggled by the front-end widget) */
html.a11y-contrast {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f2f2f2;
  --surface-3: #e6e6e6;
  --text: #000000;
  --text-muted: #1a1a1a;
  --text-faint: #333333;
  --border: #000000;
  --border-strong: #000000;
}
html.a11y-contrast.dark-scheme,
html.a11y-contrast[data-scheme="dark"] {
  --bg: #000000;
  --surface: #000000;
  --surface-2: #111111;
  --surface-3: #1c1c1c;
  --text: #ffffff;
  --text-muted: #f0f0f0;
  --text-faint: #dddddd;
  --border: #ffffff;
  --border-strong: #ffffff;
}
html.a11y-contrast a { text-decoration: underline; }
html.a11y-contrast .btn { border-width: 2px; }
html.a11y-contrast .card,
html.a11y-contrast .step,
html.a11y-contrast .quote-card { border-width: 2px; }

/* Accessibility: larger text */
html.a11y-large { font-size: 125%; }

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

/* 3. BASE & TYPOGRAPHY ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
  scroll-padding-top: calc(var(--header-height) + var(--space-m));
}

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}

img, picture, video, canvas, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: -0.025em;
  text-wrap: balance;
  color: var(--text);
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); letter-spacing: -0.02em; }

p { text-wrap: pretty; }

/* Never let one long word or URL break the layout. Headings may break anywhere;
   running text only when it would otherwise overflow. Grid/flex children must be
   allowed to shrink below their content width. */
body { overflow-wrap: break-word; }
h1, h2, h3, h4, h5, .card__title, .site-brand { overflow-wrap: anywhere; }
.grid > *, .section-row > *, .site-header__inner > * { min-width: 0; }

a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--transition), text-decoration-color var(--transition);
}
a:hover { color: var(--brand-text); text-decoration-color: var(--brand-text); }

strong { font-weight: 600; }

::selection { background: color-mix(in srgb, var(--brand) 24%, transparent); color: var(--text); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: var(--space-s);
  top: -100px;
  z-index: 1000;
  background: var(--btn);
  color: var(--btn-text);
  padding: var(--space-2xs) var(--space-s);
  border-radius: var(--radius-s);
  font-weight: 600;
  transition: top var(--transition);
}
.skip-link:focus { top: var(--space-s); color: var(--btn-text); }

.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;
}

.icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.22em; }

/* 4. LAYOUT PRIMITIVES ----------------------------------------------------- */
.site-main { flex: 1 0 auto; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-m); }
.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: var(--container-wide); }
@media (min-width: 900px) { .container { padding-inline: var(--space-l); } }

.section { padding-block: clamp(var(--space-2xl), 9vw, var(--space-3xl)); }
.section--tight { padding-block: clamp(var(--space-xl), 6vw, var(--space-2xl)); }
.section--alt { background: var(--surface-2); }
.section--brand { background: var(--brand-softer); }

.grid { display: grid; gap: var(--space-l); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
/* Fills the row with whatever is there, rather than reserving three tracks and
   leaving an empty one — "More from this series" often has only two siblings. */
.grid--fit { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }

@media (max-width: 980px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4, .grid--auto { grid-template-columns: 1fr; }
}

.stack > * + * { margin-top: var(--space-s); }
.stack-l > * + * { margin-top: var(--space-l); }
.center { text-align: center; }
.measure { max-width: 62ch; }
.u-mt-s { margin-top: var(--space-s); }
.u-mt-m { margin-top: var(--space-m); }
.u-mt-l { margin-top: var(--space-l); }
.muted { color: var(--text-muted); }

/* Section header with a trailing "view all" action */
.section-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-bottom: var(--space-xl);
}
.section-row .section-header { margin-bottom: 0; }
.section-row .btn { flex: none; }

/* Eyebrow — tracked small-caps label led by a short brand rule */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--text-muted);
  font-family: var(--font-body);
}
.eyebrow::before {
  content: "";
  width: 1.9em;
  height: 1px;
  flex: none;
  background: var(--brand);
}
.center .eyebrow, .eyebrow--centered { justify-content: center; }
.center .eyebrow::after, .eyebrow--centered::after {
  content: "";
  width: 1.9em;
  height: 1px;
  flex: none;
  background: var(--brand);
}
a.eyebrow { text-decoration: none; }
a.eyebrow--tag { padding-block: 0.6rem; margin-block: -0.6rem; }
a.eyebrow:hover { color: var(--brand-text); }
.eyebrow--on-dark { color: var(--ink-muted); }
.eyebrow--on-dark::before, .eyebrow--on-dark::after { background: color-mix(in srgb, var(--ink-text) 45%, transparent); }
/* Tag eyebrows sit inside cards; no rule needed */
.eyebrow--tag { letter-spacing: 0.16em; }
.eyebrow--tag::before { width: 1.2em; }

/* 5. COMPONENTS ------------------------------------------------------------ */
/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  line-height: 1.1;
  padding: 1.05em 1.85em;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  text-decoration: none;
  transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
  min-height: 48px;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.05em; height: 1.05em; }
.btn--primary { background: var(--btn); color: var(--btn-text); box-shadow: var(--shadow-1); }
.btn--primary:hover { background: var(--brand); color: var(--brand-contrast); box-shadow: 0 8px 24px color-mix(in srgb, var(--brand) 30%, transparent); }
.btn--secondary { background: var(--secondary); color: #241708; }
.btn--secondary:hover { filter: brightness(1.06); color: #241708; }
.btn--outline { border-color: var(--border-strong); color: var(--text); background: transparent; }
.btn--outline:hover { border-color: var(--text); color: var(--text); background: color-mix(in srgb, var(--text) 4%, transparent); }
.btn--ghost { color: var(--text); background: var(--surface-2); }
.btn--ghost:hover { background: var(--surface-3); color: var(--text); }
.btn--lg { font-size: var(--step-0); padding: 1.1em 2.1em; min-height: 56px; }
.btn--block { width: 100%; }

/* Arrow link — quiet text link with a shifting arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  padding-bottom: 0.35em;
  border-bottom: 1px solid var(--border-strong);
  transition: color var(--transition), border-color var(--transition);
}
.link-arrow { position: relative; }
.link-arrow::before { content: ""; position: absolute; inset: -12px -6px; }
.link-arrow svg { transition: transform var(--transition); color: var(--brand); }
.link-arrow:hover { color: var(--brand-text); border-color: var(--brand); }
.link-arrow:hover svg { transform: translateX(5px); }

/* Cards — quiet hairline cards; the image does the talking */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition), box-shadow var(--transition-slow), transform var(--transition-slow);
}
.card--link:hover { border-color: var(--border-strong); box-shadow: var(--shadow-2); transform: translateY(-4px); }
.card__media { position: relative; aspect-ratio: 16 / 11; background: var(--surface-2); overflow: hidden; display: block; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 750ms cubic-bezier(0.22, 1, 0.36, 1); }
.card--link:hover .card__media img { transform: scale(1.045); }
.card__media-fallback {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: var(--surface-2);
  color: var(--text-faint);
}
.card__media-fallback svg { width: 40px; height: 40px; }
.card__body { padding: var(--space-m) var(--space-m) var(--space-l); display: flex; flex-direction: column; gap: var(--space-2xs); flex: 1; }
.card__title { font-size: var(--step-1); line-height: 1.18; letter-spacing: -0.02em; }
.card__title a { color: inherit; text-decoration: none; }
.card__title a:hover { color: var(--brand-text); }
/* The title link stretches over the whole card, so the card is one big tap target.
   Anything else interactive in the body (series label, chips) sits above it. */
.card--link .card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card--link .card__title a:focus-visible { outline: none; }
.card--link .card__title a:focus-visible::after { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: inherit; }
.card--link .eyebrow--tag, .card--link .chip { position: relative; z-index: 2; }
.card__meta { font-size: var(--step--1); color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 0.4em 1em; align-items: center; }
.card__meta svg { width: 1.05em; height: 1.05em; vertical-align: -0.2em; }
.card__excerpt { color: var(--text-muted); font-size: var(--step-0); line-height: 1.6; }

/* Floating play button (sermon cards) */
.card__play {
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  width: 62px; height: 62px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.16);
  border: 1.5px solid rgb(255 255 255 / 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  opacity: 0;
  scale: 0.85;
  transition: opacity var(--transition), scale var(--transition), background var(--transition);
}
.card__play svg { width: 22px; height: 22px; margin-left: 3px; }
.card--link:hover .card__play, .card--link:focus-within .card__play { opacity: 1; scale: 1; }
.card--link:hover .card__play { background: rgb(255 255 255 / 0.28); }

/* Badge pinned over card media */
.badge--media {
  position: absolute; left: 12px; bottom: 12px;
  background: rgb(16 13 9 / 0.62);
  color: #fff;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgb(255 255 255 / 0.16);
}

/* Featured posts get a quiet label (Ghost `featured` class) */
.card.featured .card__body::before {
  content: "Featured";
  font-size: var(--step--2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--brand-text);
}

/* Badges & chips */
.badge {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-size: var(--step--1);
  font-weight: 600;
  padding: 0.4em 0.9em;
  border-radius: var(--radius-pill);
  background: var(--brand-soft);
  color: var(--brand);
  text-decoration: none;
  line-height: 1.2;
}
.badge svg { width: 1em; height: 1em; }
.badge--live { background: #c81e1e; color: #fff; border: 0; }
.badge--live a { color: #fff; text-decoration: none; font-weight: 600; }
.badge--live .dot { width: 0.5em; height: 0.5em; border-radius: 50%; background: #fff; animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.chip {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--step--1);
  padding: 0.5em 1.05em;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.chip:hover, .chip[aria-current="true"], .chip--active { background: var(--btn); color: var(--btn-text); border-color: var(--btn); }

/* Section headers */
.section-header { max-width: 60ch; margin-bottom: var(--space-xl); }
.section-header.center { margin-inline: auto; }
.section-header__title { font-size: var(--step-3); margin-top: var(--space-s); }
.section-header__lead { color: var(--text-muted); font-size: var(--step-1); line-height: 1.5; margin-top: var(--space-s); }

/* Forms */
.form { display: flex; flex-direction: column; gap: var(--space-m); }
.form__row { display: flex; flex-direction: column; gap: var(--space-3xs); }
.form__row--inline { flex-direction: row; gap: var(--space-2xs); }
.form label { font-weight: 600; font-size: var(--step--1); letter-spacing: 0.02em; }
.form .hint { color: var(--text-muted); font-size: var(--step--1); font-weight: 400; }
.input, .textarea, .select {
  width: 100%;
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-s);
  padding: 0.85em 1.05em;
  color: var(--text);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.input:focus, .textarea:focus, .select:focus { border-color: var(--brand); outline: 3px solid var(--brand); outline-offset: 2px; box-shadow: 0 0 0 3px var(--brand-soft); }
.textarea { min-height: 140px; resize: vertical; }
.form .consent, .consent { display: flex; gap: var(--space-2xs); align-items: flex-start; font-size: var(--step--1); font-weight: 400; }
.form .consent { font-weight: 400; }
.consent input { margin-top: 0.25em; width: 1.1em; height: 1.1em; flex: none; accent-color: var(--brand); }
.form__status { font-size: var(--step--1); padding: var(--space-2xs) var(--space-s); border-radius: var(--radius-s); display: none; }
.form__status.is-success { display: block; background: var(--ok-bg); color: var(--ok-text); }
.form__status.is-error { display: block; background: var(--err-bg); color: var(--err-text); }

/* Newsletter signup (Ghost members). Ghost toggles .loading / .success / .error
   on the form itself; theme.js mirrors that into the status line below. */
.newsletter-form { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.newsletter-form .input { flex: 1 1 200px; width: auto; min-width: 0; }
.newsletter-form .form__status { flex: 1 0 100%; text-align: left; }
/* In stacked layouts (footer, narrow screens) the form is a column, where a flex-basis
   would set the field's HEIGHT — so it only grows in the row layout. */
.site-footer .newsletter-form .input { flex: none; }
@media (max-width: 520px) { .newsletter-form .input { flex: none; } }
.newsletter-form.loading .btn { opacity: 0.6; pointer-events: none; }
.newsletter-form.success .input,
.newsletter-form.success .btn { display: none; }
.site-footer .newsletter-form .form__status.is-success { background: rgb(134 239 172 / 0.14); color: #bbf7d0; }
.site-footer .newsletter-form .form__status.is-error { background: rgb(252 165 165 / 0.14); color: #fecaca; }

/* 6. SITE CHROME ----------------------------------------------------------- */
/* Announcement bar — a slim ink strip above everything */
.announcement {
  position: relative;
  z-index: 110;
  background: var(--ink);
  color: var(--ink-text);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  text-align: center;
}
.announcement__inner { display: flex; align-items: center; justify-content: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-2xl); position: relative; }
.announcement__star { display: inline-flex; color: var(--brand); }
.announcement__star svg { width: 1em; height: 1em; }
.announcement a { color: inherit; }
.announcement__close { position: absolute; right: var(--space-2xs); top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 40px; height: 40px; background: none; border: 0; color: inherit; padding: 0; line-height: 0; border-radius: var(--radius-s); opacity: 0.7; transition: opacity var(--transition), background var(--transition); }
.announcement__close:hover { background: rgb(255 255 255 / 0.12); opacity: 1; }
.announcement[hidden] { display: none; }

/* Header ------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  border-bottom: 1px solid var(--border);
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
/* Blur lives on a pseudo-element so the header does NOT become the containing
   block for the position:fixed mobile drawer. */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  transition: opacity var(--transition);
}
.site-header.is-scrolled { box-shadow: var(--shadow-1); }

/* Over a full-bleed hero the header floats transparent until you scroll past it.
   :has() keeps this purely declarative; browsers without it get the solid bar. */
/* White nav text over an arbitrary photograph is only legible if something
   guarantees a dark ground beneath it. A bright feature image — sunlit stone, a
   snowy churchyard — used to drop nav items to about 3:1 against white, under
   the 4.5:1 AA needs. This scrim travels with the header, so it holds whatever
   the hero behind it happens to be. */
body:has(.hero--image, .hero--gradient, .page-hero--cover) .site-header:not(.is-past-hero)::after {
  content: "";
  position: absolute;
  inset: 0 0 -36px 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgb(12 9 6 / 0.62) 0%, rgb(12 9 6 / 0.5) 58%, rgb(12 9 6 / 0.16) 88%, transparent 100%);
  transition: opacity var(--transition);
}
body:has(.hero--image, .hero--gradient, .page-hero--cover) .site-header.is-past-hero::after { opacity: 0; }

body:has(.hero--image, .hero--gradient, .page-hero--cover) .site-header:not(.is-past-hero) {
  background: transparent;
  border-bottom-color: transparent;
  color: #fff;
  box-shadow: none;
}
body:has(.hero--image, .hero--gradient, .page-hero--cover) .site-header:not(.is-past-hero)::before { opacity: 0; }
body:has(.hero--image, .hero--gradient, .page-hero--cover) .site-header:not(.is-past-hero) .site-brand,
body:has(.hero--image, .hero--gradient, .page-hero--cover) .site-header:not(.is-past-hero) .primary-nav > ul > li > a,
body:has(.hero--image, .hero--gradient, .page-hero--cover) .site-header:not(.is-past-hero) .icon-btn { color: #fff; }
body:has(.hero--image, .hero--gradient, .page-hero--cover) .site-header:not(.is-past-hero) .primary-nav a[aria-current="page"]::after { background: #fff; }
body:has(.hero--image, .hero--gradient, .page-hero--cover) .site-header:not(.is-past-hero) .icon-btn:hover { background: rgb(255 255 255 / 0.16); }
body:has(.hero--image, .hero--gradient, .page-hero--cover) .site-header:not(.is-past-hero) .header-cta .nav > li:first-child > a { background: #fff; color: #17140f; }
body:has(.hero--image, .hero--gradient, .page-hero--cover) .site-header:not(.is-past-hero) .header-cta .nav > li:not(:first-child) > a { color: #fff; border-color: rgb(255 255 255 / 0.5); }
body:has(.hero--image, .hero--gradient, .page-hero--cover) .site-header:not(.is-past-hero) .header-cta .nav > li:not(:first-child) > a:hover { border-color: #fff; background: rgb(255 255 255 / 0.12); }
/* The hero sits under the transparent header */
body:has(.hero--image, .hero--gradient) .site-header { margin-bottom: calc(var(--header-height) * -1); }
body:has(.page-hero--cover) .site-header { margin-bottom: calc(var(--header-height) * -1); }

.site-header__inner { display: flex; align-items: center; gap: var(--space-m); min-height: var(--header-height); flex-wrap: nowrap; }
.site-brand {
  display: flex; align-items: center; gap: var(--space-2xs);
  text-decoration: none; color: var(--text); min-height: 44px;
  font-family: var(--font-heading); font-weight: 600;
  font-size: var(--step-1); letter-spacing: -0.03em; line-height: 1.05;
  margin-right: auto; min-width: 0;
}
.site-brand:hover { color: var(--text); }
.site-brand img { max-height: 44px; width: auto; }
.logo-dark { display: none; }
html[data-scheme="dark"] .logo-light, .dark-scheme .logo-light { display: none; }
html[data-scheme="dark"] .logo-dark, .dark-scheme .logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
  html[data-scheme="auto"] .logo-light { display: none; }
  html[data-scheme="auto"] .logo-dark { display: block; }
}

.primary-nav { display: flex; align-items: center; gap: var(--space-xs); }
.primary-nav ul { list-style: none; padding: 0; display: flex; align-items: center; gap: var(--space-3xs); }
.primary-nav a {
  position: relative;
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.01em;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-s);
  white-space: nowrap;
}
.primary-nav a:hover { color: var(--brand-text); }
.primary-nav a[aria-current="page"] { font-weight: 650; }
.primary-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: var(--space-xs); right: var(--space-xs); bottom: 2px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--brand);
}

.header-actions { display: flex; align-items: center; gap: var(--space-3xs); flex: none; margin-left: auto; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: var(--radius-pill); border: 0;
  background: transparent; color: var(--text);
  transition: background var(--transition), color var(--transition);
}
.icon-btn:hover { background: var(--surface-2); color: var(--brand-text); }
.icon-btn svg { width: 20px; height: 20px; }

/* Accessibility controls collapse into a small popover so the header stays calm */
.a11y-widget { position: relative; display: inline-flex; }
.a11y-widget__panel {
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 232px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-2);
  padding: var(--space-2xs);
  display: flex; flex-direction: column; gap: 2px;
  z-index: 120;
}
.a11y-widget__panel[hidden] { display: none; }
.a11y-widget__panel button {
  display: flex; align-items: center; gap: var(--space-2xs);
  width: 100%; text-align: left;
  padding: 0.7em 0.8em;
  border-radius: var(--radius-s);
  font-size: var(--step--1); font-weight: 500;
  color: var(--text);
  transition: background var(--transition);
}
.a11y-widget__panel button:hover { background: var(--surface-2); }
.a11y-widget__panel button svg { width: 18px; height: 18px; flex: none; color: var(--text-muted); }
.a11y-widget__panel button[aria-pressed="true"] { background: var(--brand-soft); color: var(--brand-text); }
.a11y-widget__panel button[aria-pressed="true"] svg { color: var(--brand-text); }
.a11y-widget__panel button[aria-pressed="true"]::after { content: "On"; margin-left: auto; font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.14em; }

/* Mobile nav */
.nav-toggle { display: none; }
.menu-overlay { display: none; }
@media (max-width: 1100px) {
  .nav-toggle { display: inline-flex; }
  .primary-nav {
    position: fixed; inset: 0 0 0 auto; width: min(88vw, 380px);
    background: var(--surface); border-left: 1px solid var(--border);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    padding: calc(var(--header-height) + var(--space-m)) var(--space-m) var(--space-2xl);
    transform: translateX(100%); z-index: 200;
    overflow-y: auto; box-shadow: var(--shadow-3);
    color: var(--text);
    /* visibility keeps the closed drawer out of the tab order; the 300ms delay
       lets the slide-out finish before it disappears. */
    visibility: hidden;
    transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 300ms;
  }
  .primary-nav.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
  }
  .primary-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .primary-nav li { border-bottom: 1px solid var(--border); }
  .primary-nav a { display: block; padding: var(--space-s) var(--space-2xs); font-size: var(--step-1); font-family: var(--font-heading); letter-spacing: -0.02em; color: var(--text) !important; }
  .primary-nav a[aria-current="page"]::after { display: none; }
  .primary-nav a[aria-current="page"] { color: var(--brand-text) !important; }
  .primary-nav .btn { margin-top: var(--space-s); }
  .menu-overlay.is-open { display: block; position: fixed; inset: 0; background: rgb(10 8 6 / 0.55); z-index: 90; backdrop-filter: blur(3px); }
  body.nav-open { overflow: hidden; }
  /* The toggle stays above the open drawer as its close button, in dark ink and
     with an X instead of the bars, whatever hero the header floats over. */
  .nav-toggle { position: relative; z-index: 210; }
  .nav-toggle .icon--close { display: none; }
  .nav-toggle[aria-expanded="true"] .icon--menu { display: none; }
  .nav-toggle[aria-expanded="true"] .icon--close { display: block; }
  body.nav-open .site-header .nav-toggle { color: var(--text) !important; }
}

@media (max-width: 640px) {
  .site-brand { font-size: var(--step-0); letter-spacing: -0.02em; }
  .site-brand img { max-height: 34px; }
  .site-header .badge--live { display: none; }
  .icon-btn { width: 40px; height: 40px; }
  .announcement__inner { padding-inline: var(--space-xl) var(--space-xl); gap: var(--space-2xs); }
}

/* Footer — deep ink band with a visit-first top row --------------------------*/
.site-footer {
  background: var(--ink);
  color: var(--ink-text);
  margin-top: var(--space-3xl);
}
/* Most pages end in a .section, which already carries generous bottom padding —
   adding the full 8rem on top of that left a conspicuous empty band above the
   footer. Only pages that end abruptly need the separator. */
.site-main:has(> .section:last-child) + .site-footer,
.site-main:has(> section:last-child) + .site-footer,
.site-main:has(> :last-child > .section:last-child) + .site-footer,
.site-main:has(> :last-child > section:last-child) + .site-footer { margin-top: 0; }
.site-footer__top { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: var(--space-xl); padding-block: var(--space-2xl); }
/* Two of the four columns are conditional — "Join us" needs a service schedule,
   and "Stay in touch" is dropped on the homepage where the newsletter band
   already sits directly above. Match the track count to what is actually there
   so the footer never ends in a hole.

   Scoped to the wide breakpoint on purpose: :has() and :not() carry the
   specificity of their argument, so unscoped these would outrank the narrower
   rules below and hold a 3-up footer onto a tablet. */
@media (min-width: 941px) {
  .site-footer__top:not(:has(> :nth-child(4))) { grid-template-columns: 1.5fr repeat(2, 1fr); }
  .site-footer__top:not(:has(> :nth-child(3))) { grid-template-columns: 1.5fr 1fr; }
}
@media (max-width: 940px) { .site-footer__top { grid-template-columns: 1fr 1fr; gap: var(--space-l); } }
@media (max-width: 580px) { .site-footer__top { grid-template-columns: 1fr; } }
.footer-col h2 {
  font-family: var(--font-body);
  font-size: var(--step--2); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--ink-muted);
  margin-bottom: var(--space-s);
}
.footer-col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0; }
.footer-col a { color: var(--ink-text); text-decoration: none; display: inline-block; padding-block: 0.5rem; }
.footer-col .site-brand { padding-block: 0; }
.footer-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 0.2em; }
.footer-col .site-brand { color: var(--ink-text); font-size: var(--step-2); }
.footer-about p { color: var(--ink-muted); margin-top: var(--space-s); max-width: 34ch; }
.footer-news__intro { color: var(--ink-muted); margin-bottom: var(--space-s); font-size: var(--step--1); }
.site-footer .newsletter-form { flex-direction: column; align-items: stretch; }
.site-footer .newsletter-form .input { background: rgb(255 255 255 / 0.06); border-color: var(--ink-border); color: var(--ink-text); }
.site-footer .newsletter-form .input::placeholder { color: var(--ink-muted); }
.site-footer .newsletter-form .input:focus { border-color: rgb(255 255 255 / 0.55); box-shadow: none; }
.site-footer .newsletter-form .btn--primary { background: var(--ink-text); color: var(--ink); }
.site-footer .newsletter-form .btn--primary:hover { background: #fff; color: var(--ink); }
.footer-legal {
  border-top: 1px solid var(--ink-border);
  padding-block: var(--space-m);
  display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-l);
  align-items: center; justify-content: space-between;
  font-size: var(--step--1); color: var(--ink-muted);
}
.footer-legal a { color: var(--ink-text); }
.footer-legal .safeguarding { max-width: 60ch; }
.safeguarding__label { color: var(--ink-text); font-weight: 600; }
.social-links { display: flex; gap: var(--space-2xs); flex-wrap: wrap; margin-top: var(--space-m); }
.social-links a { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: transparent; border: 1px solid var(--ink-border); color: var(--ink-text); transition: border-color var(--transition), background var(--transition); }
.social-links a:hover { color: #fff; border-color: rgb(255 255 255 / 0.55); background: rgb(255 255 255 / 0.06); }
.social-links svg { width: 19px; height: 19px; }

.site-footer .service-summary .muted,
.site-footer .service-times__raw { color: var(--ink-muted); }
.site-footer .service-summary li { padding-block: 0.15em; }

/* Next-service banner — a hairline strip under the hero */
.next-service { background: var(--surface-2); border-block: 1px solid var(--border); }
.next-service__inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-s) var(--space-m); padding-block: var(--space-s); text-align: center; font-size: var(--step--1); letter-spacing: 0.01em; }
.next-service__inner > svg { color: var(--brand); }
.next-service strong { font-size: var(--step-0); }

/* 7. HERO ------------------------------------------------------------------ */
.hero { position: relative; isolation: isolate; }
.hero__inner { padding-block: clamp(var(--space-2xl), 12vh, var(--space-3xl)); }
.hero__content { max-width: min(100%, 58rem); }
.hero h1 { font-size: var(--step-6); line-height: 0.98; text-wrap: balance; max-width: 13ch; }
.hero__sub { font-size: var(--step-1); line-height: 1.5; margin-top: var(--space-m); color: var(--text-muted); max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-top: var(--space-l); }
.hero .eyebrow { margin-bottom: var(--space-m); }

/* "Next gathering" chip — filled by theme.js */
.hero__next {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-top: var(--space-l);
  padding: 0.65em 1.2em;
  border-radius: var(--radius-pill);
  font-size: var(--step--1);
  font-weight: 600;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}
.hero__next svg { width: 1.05em; height: 1.05em; color: var(--brand); }
.hero__next-dot { width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--brand); flex: none; }
.hero__next[hidden] { display: none; }
.hero--image .hero__next, .hero--gradient .hero__next {
  background: rgb(255 255 255 / 0.12);
  border-color: rgb(255 255 255 / 0.3);
  color: #fff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.hero--image .hero__next svg, .hero--gradient .hero__next svg { color: #fff; }
.hero--image .hero__next-dot, .hero--gradient .hero__next-dot { background: #fff; }

/* Image hero (full-bleed, cinematic) */
.hero--image { color: #fff; }
.hero--image .hero__sub { color: rgb(255 255 255 / 0.86); }
.hero--image h1 { color: #fff; text-shadow: 0 2px 40px rgb(0 0 0 / 0.25); }
.hero--image .eyebrow { color: rgb(255 255 255 / 0.82); }
.hero--image .eyebrow::before,
.hero--image .eyebrow::after { background: rgb(255 255 255 / 0.6); }
.hero--image .btn--outline { border-color: rgb(255 255 255 / 0.6); color: #fff; }
.hero--image .btn--outline:hover { background: rgb(255 255 255 / 0.16); border-color: #fff; color: #fff; }
.hero--image .btn--primary { background: #fff; color: #17140f; }
.hero--image .btn--primary:hover { background: rgb(255 255 255 / 0.9); color: #17140f; box-shadow: 0 10px 30px rgb(0 0 0 / 0.3); }
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* Two-part scrim: a warm floor for legibility plus a soft top veil for the header */
.hero__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to bottom, rgb(14 11 8 / 0.72) 0%, rgb(14 11 8 / 0.3) 14%, transparent 30%),
    linear-gradient(to top, rgb(14 11 8 / 0.92) 0%, rgb(14 11 8 / 0.72) 26%, rgb(14 11 8 / 0.3) 58%, transparent 82%),
    linear-gradient(to right, rgb(14 11 8 / 0.7) 0%, rgb(14 11 8 / 0.42) 34%, rgb(14 11 8 / 0.12) 62%, transparent 80%),
    radial-gradient(120% 80% at 12% 100%, color-mix(in srgb, var(--brand) 26%, transparent) 0%, transparent 62%);
}
.hero--image .hero__inner {
  min-height: min(94vh, 940px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: calc(var(--header-height) + var(--space-2xl));
  padding-bottom: clamp(var(--space-2xl), 12vh, var(--space-3xl));
}
/* Subtle slow drift on the hero image */
@media (prefers-reduced-motion: no-preference) {
  .hero--image .hero__media img { animation: hero-drift 28s ease-in-out infinite alternate; }
  @keyframes hero-drift { from { transform: scale(1) translateY(0); } to { transform: scale(1.07) translateY(-1%); } }
}

/* Service rail — glass strip pinned to the foot of a full-bleed hero.
   Rendered by theme.js from the service schedule. */
.hero__rail { position: relative; z-index: 2; margin-top: auto; }
.hero__rail[hidden] { display: none; }
.hero-rail {
  display: flex; flex-wrap: wrap; align-items: stretch;
  gap: 0;
  margin-top: clamp(var(--space-xl), 7vh, var(--space-2xl));
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: var(--radius-m);
  background: rgb(255 255 255 / 0.09);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  overflow: hidden;
}
.hero-rail__item {
  flex: 1 1 190px;
  padding: var(--space-m) var(--space-l);
  display: flex; flex-direction: column; gap: 3px;
  border-right: 1px solid rgb(255 255 255 / 0.16);
  color: #fff;
}
.hero-rail__item:last-child { border-right: 0; }
.hero-rail__day { font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.2em; font-weight: 600; color: rgb(255 255 255 / 0.72); }
.hero-rail__time { font-family: var(--font-heading); font-size: var(--step-2); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
.hero-rail__name { font-size: var(--step--1); color: rgb(255 255 255 / 0.88); }
.hero-rail__cta {
  flex: 0 1 auto;
  display: flex; align-items: center; gap: var(--space-2xs);
  padding: var(--space-m) var(--space-l);
  background: rgb(255 255 255 / 0.1);
  color: #fff; text-decoration: none;
  font-weight: 600; font-size: var(--step--1);
  transition: background var(--transition);
}
.hero-rail__cta:hover { background: rgb(255 255 255 / 0.2); color: #fff; }
.hero-rail__cta svg { width: 1.1em; height: 1.1em; }
@media (max-width: 720px) {
  .hero-rail { flex-direction: column; }
  .hero-rail__item { flex: none; border-right: 0; border-bottom: 1px solid rgb(255 255 255 / 0.16); flex-direction: row; align-items: baseline; gap: var(--space-s); padding: var(--space-s) var(--space-m); }
  .hero-rail__time { font-size: var(--step-1); }
  .hero-rail__name { margin-left: auto; text-align: right; }
  .hero-rail__cta { flex: none; padding: var(--space-s) var(--space-m); }
  .hero-rail__cta { justify-content: center; }
}

/* Scroll cue */
.scroll-cue {
  position: absolute; left: 50%; bottom: var(--space-m);
  translate: -50% 0;
  z-index: 3;
  width: 1px; height: 46px;
  background: linear-gradient(to bottom, transparent, rgb(255 255 255 / 0.7));
  overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue::after {
    content: ""; position: absolute; inset: 0;
    background: #fff;
    animation: cue 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  }
  @keyframes cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }
}
@media (max-width: 720px) { .scroll-cue { display: none; } }

/* Gradient hero — a single clean brand ramp with a light bloom */
.hero--gradient {
  background:
    radial-gradient(90% 70% at 82% 8%, color-mix(in srgb, var(--secondary) 55%, transparent) 0%, transparent 62%),
    linear-gradient(155deg, var(--brand) 0%, var(--brand-strong) 100%);
  color: #fff;
}
.hero--gradient .hero__inner { padding-top: calc(var(--header-height) + var(--space-2xl)); }
.hero--gradient h1 { color: #fff; }
.hero--gradient .hero__sub { color: rgb(255 255 255 / 0.9); }
.hero--gradient .eyebrow { color: rgb(255 255 255 / 0.8); }
.hero--gradient .eyebrow::before, .hero--gradient .eyebrow::after { background: rgb(255 255 255 / 0.6); }
.hero--gradient .btn--outline { border-color: rgb(255 255 255 / 0.6); color: #fff; }
.hero--gradient .btn--outline:hover { background: rgb(255 255 255 / 0.14); border-color: #fff; }
.hero--gradient .btn--primary { background: #fff; color: #17140f; }
.hero--gradient .btn--primary:hover { background: rgb(255 255 255 / 0.9); color: #17140f; }

/* Split hero — editorial: type column left, arched window right */
.hero--split .hero__inner {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(var(--space-xl), 6vw, var(--space-3xl));
  align-items: center;
  padding-block: clamp(var(--space-xl), 7vw, var(--space-2xl));
}
.hero--split .hero__image { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface-2); }
.hero--split .hero__image img { width: 100%; height: 100%; object-fit: cover; }
.hero--split .hero__content { max-width: none; }
.hero--split h1 { font-size: var(--step-5); }
@media (max-width: 900px) {
  .hero--split .hero__inner { grid-template-columns: 1fr; gap: var(--space-xl); }
  .hero--split .hero__image { order: -1; aspect-ratio: 16 / 11; }
}

/* The arch — a real church-window head on portrait media.
   'Arched' uses the elliptical top; 'Rounded' is a clean radius. */
.arch-frame, .arch-media { position: relative; overflow: hidden; }
html.img-arch .arch-frame,
html.img-arch .hero--split .hero__image,
html.img-arch .welcome-split__media,
html.img-arch .arch-media { border-radius: var(--arch); }
html.img-arch .card--arch .card__media { border-radius: var(--arch-soft); }
html.img-rounded .arch-frame,
html.img-rounded .hero--split .hero__image,
html.img-rounded .welcome-split__media,
html.img-rounded .arch-media { border-radius: var(--radius-l); }
html.img-rounded .card--arch .card__media { border-radius: var(--radius-m); }

/* 8. SERMONS --------------------------------------------------------------- */
/* Spotlight: the newest message gets real estate, the rest read as a list. */
.sermon-spotlight { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(var(--space-l), 4vw, var(--space-2xl)); align-items: start; }
@media (max-width: 940px) { .sermon-spotlight { grid-template-columns: 1fr; } }

.sermon-feature { display: block; text-decoration: none; color: inherit; }
.sermon-feature__media {
  position: relative; display: block;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--surface-2);
}
.sermon-feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1); }
.sermon-feature:hover .sermon-feature__media img { transform: scale(1.04); }
.sermon-feature__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(14 11 8 / 0.72) 0%, rgb(14 11 8 / 0.15) 45%, transparent 75%);
}
.sermon-feature__play {
  position: absolute; left: var(--space-m); bottom: var(--space-m); z-index: 2;
  display: inline-flex; align-items: center; gap: 0.7em;
  padding: 0.75em 1.35em;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.16);
  border: 1px solid rgb(255 255 255 / 0.5);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: #fff; font-weight: 600; font-size: var(--step--1);
  transition: background var(--transition);
}
.sermon-feature:hover .sermon-feature__play { background: rgb(255 255 255 / 0.3); }
.sermon-feature__play svg { width: 1.1em; height: 1.1em; }
.sermon-feature__body { display: block; padding-top: var(--space-m); }
.sermon-feature__meta, .sermon-row__meta { display: flex; }
.sermon-row .scripture-ref { display: block; margin-top: 2px; }
.sermon-feature__title { display: block; margin: 0; font-family: var(--font-heading); font-weight: 600; letter-spacing: -0.025em; font-size: var(--step-3); line-height: 1.05; margin-top: var(--space-2xs); transition: color var(--transition); }
.sermon-feature:hover .sermon-feature__title { color: var(--brand-text); }
.sermon-feature__meta { display: flex; flex-wrap: wrap; gap: 0.4em 1.2em; align-items: center; color: var(--text-muted); font-size: var(--step--1); margin-top: var(--space-s); }

/* Wide "latest message" feature at the head of the sermon archive */
.sermon-hero {
  display: grid; grid-template-columns: 1.25fr 1fr;
  gap: clamp(var(--space-l), 4vw, var(--space-2xl));
  align-items: center;
  text-decoration: none; color: inherit;
  padding-block: var(--space-l);
  border-block: 1px solid var(--border);
}
.sermon-hero__media { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: var(--radius-m); overflow: hidden; background: var(--surface-2); }
.sermon-hero__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1); }
.sermon-hero:hover .sermon-hero__media img { transform: scale(1.04); }
.sermon-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(14 11 8 / 0.6) 0%, transparent 55%); }
.sermon-hero__body { display: block; }
.sermon-hero__body > * { display: block; }
.sermon-hero__body .eyebrow { display: flex; }
.sermon-hero__body .sermon-feature__meta { display: flex; }
.sermon-hero__body .scripture-ref { margin-top: var(--space-2xs); }
.sermon-hero__body .sermon-feature__title { font-size: var(--step-3); margin-top: var(--space-m); }
.sermon-hero:hover .sermon-feature__title { color: var(--brand-text); }
.sermon-hero .link-arrow { display: inline-flex; margin-top: var(--space-l); }
@media (max-width: 900px) { .sermon-hero { grid-template-columns: 1fr; } }

.sermon-list { display: flex; flex-direction: column; }
.sermon-row {
  display: grid; grid-template-columns: 108px 1fr; gap: var(--space-m);
  align-items: center;
  padding-block: var(--space-m);
  border-top: 1px solid var(--border);
  text-decoration: none; color: inherit;
  transition: border-color var(--transition);
}
.sermon-row:first-child { border-top: 0; padding-top: 0; }
.sermon-row:last-child { padding-bottom: 0; }
.sermon-row__media { aspect-ratio: 4 / 3; border-radius: var(--radius-s); overflow: hidden; background: var(--surface-2); position: relative; }
.sermon-row__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1); }
.sermon-row:hover .sermon-row__media img { transform: scale(1.06); }
.sermon-row__title { display: block; margin: 0; font-family: var(--font-heading); font-weight: 600; font-size: var(--step-1); line-height: 1.2; letter-spacing: -0.02em; transition: color var(--transition); }
.sermon-row:hover .sermon-row__title { color: var(--brand-text); }
.sermon-row__meta { font-size: var(--step--1); color: var(--text-muted); margin-top: var(--space-3xs); display: flex; flex-wrap: wrap; gap: 0.3em 0.9em; }
.sermon-row .scripture-ref { font-size: var(--step--1); }

.sermon-player {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: var(--space-m);
  display: flex; flex-direction: column; gap: var(--space-s);
}
.sermon-player > strong { display: flex; align-items: center; gap: 0.5em; }
.sermon-player > strong svg { color: var(--brand); }
.sermon-player audio { width: 100%; }
.sermon-player__row { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center; justify-content: space-between; }
.sermon-meta { display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-2xl); margin-block: var(--space-l); padding: var(--space-m) 0; border-block: 1px solid var(--border); }
.sermon-meta__item { display: flex; flex-direction: column; gap: 4px; }
.sermon-meta__label { font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.18em; color: var(--text-muted); font-weight: 600; }
.sermon-meta__value { font-weight: 600; font-size: var(--step-0); }
.sermon-meta__value a { text-decoration: none; }
.scripture-ref { font-family: var(--font-quote); font-style: italic; color: var(--text-muted); font-size: var(--step-0); }

.video-embed { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-m); overflow: hidden; background: #000; margin-block: var(--space-m); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Now that the chips are scoped to sermons a group can come back empty; never
   leave a heading standing on its own. */
.filter-group:not(:has(.chip)) { display: none; }
.archive-filters { display: flex; flex-direction: column; gap: var(--space-s); margin-bottom: var(--space-l); }
.filter-group { display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: baseline; }
.filter-group__label { font-weight: 600; font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.18em; color: var(--text-muted); margin-right: var(--space-2xs); min-width: 8.5em; }

.series-header { display: grid; grid-template-columns: 300px 1fr; gap: var(--space-2xl); align-items: center; margin-bottom: var(--space-2xl); }
.series-header__art { aspect-ratio: 1; border-radius: var(--radius-m); overflow: hidden; background: var(--surface-2); }
.series-header__art img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .series-header { grid-template-columns: 1fr; gap: var(--space-l); } .series-header__art { max-width: 220px; } }

/* 9. HOMEPAGE -------------------------------------------------------------- */
/* Welcome — asymmetric editorial split with an arched window */
.welcome-split { display: grid; grid-template-columns: 0.95fr 1fr; gap: clamp(var(--space-xl), 6vw, var(--space-3xl)); align-items: center; }
.welcome-split__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface-2); }
.welcome-split__media img { width: 100%; height: 100%; object-fit: cover; }
.welcome-split h2 { font-size: var(--step-3); margin-top: var(--space-s); }
.welcome-split__body { max-width: 46ch; }
.welcome-split__body .section-header__lead { font-size: var(--step-1); }
@media (max-width: 880px) { .welcome-split { grid-template-columns: 1fr; gap: var(--space-xl); } .welcome-split__media { aspect-ratio: 16 / 11; } }

/* Next steps — numbered editorial rows rather than another card grid */
/* Capped so the arrow does not end up hundreds of pixels from the text it
   belongs to on a wide screen. */
.steps { display: flex; flex-direction: column; border-top: 1px solid var(--border); max-width: 64rem; }
.step {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  gap: var(--space-m);
  align-items: center;
  padding-block: clamp(var(--space-m), 3vw, var(--space-l));
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: color var(--transition);
}
.step::before {
  content: "";
  position: absolute; inset: 0 calc(var(--space-m) * -1);
  background: var(--surface-2);
  opacity: 0;
  border-radius: var(--radius-m);
  transition: opacity var(--transition);
  z-index: -1;
}
.step:hover::before { opacity: 1; }
.step:hover .step__title { color: var(--brand-text); }
.step__num {
  font-family: var(--font-heading);
  font-size: var(--step-1);
  font-weight: 500;
  color: var(--brand-text);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.step__text { display: flex; flex-direction: column; gap: 0.25em; }
.step__title { font-family: var(--font-heading); font-size: var(--step-2); line-height: 1.1; letter-spacing: -0.025em; font-weight: 600; transition: color var(--transition); }
.step__desc { color: var(--text-muted); font-size: var(--step-0); max-width: 52ch; }
.step__go {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  color: var(--text);
  transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}
.step__go svg { width: 18px; height: 18px; }
.step:hover .step__go { background: var(--brand); border-color: var(--brand); color: var(--brand-contrast); transform: translateX(4px); }
@media (max-width: 640px) {
  .step { grid-template-columns: 2.6rem 1fr; gap: var(--space-s); }
  .step__go { display: none; }
  .step__title { font-size: var(--step-1); }
}

/* Service times — the page's first dark moment */
/* Ink bands carry a hairline at each edge. In light mode the tonal jump does
   all the work; in dark mode the page and the band are both near-black, so
   without this the sections run together into one undifferentiated field. */
.service-band, .verse-band, .site-footer { border-block: 1px solid var(--ink-edge); }
.section--alt { border-block: 1px solid var(--border); }

.service-band { background: var(--ink); color: var(--ink-text); }
.service-band h2, .service-band .section-header__title { color: var(--ink-text); }
.service-band .section-header__lead { color: var(--ink-muted); }
.service-band .btn--outline { border-color: var(--ink-border); color: var(--ink-text); }
.service-band .btn--outline:hover { border-color: var(--ink-text); background: rgb(255 255 255 / 0.06); color: var(--ink-text); }
.service-band .service-card {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--ink-border);
  border-radius: 0;
  padding: var(--space-l) 0 var(--space-m);
}
.service-band .service-card__day { color: var(--ink-muted); }
.service-band .service-card__time { color: var(--ink-text); }
.service-band .service-card__name { color: var(--ink-text); }
.service-band .service-card__campus { color: var(--ink-muted); }
.service-band .grid { gap: 0 var(--space-2xl); }

.service-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m);
  padding: var(--space-l); display: flex; flex-direction: column; gap: var(--space-3xs);
}
.service-card__time { font-size: var(--step-3); font-weight: 600; letter-spacing: -0.035em; line-height: 1; font-family: var(--font-heading); font-variant-numeric: tabular-nums; }
.service-card__day { font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; font-size: var(--step--2); color: var(--text-muted); margin-bottom: var(--space-2xs); }
.service-card__name { font-size: var(--step-1); font-weight: 600; letter-spacing: -0.015em; margin-top: var(--space-2xs); }
.service-card__campus { color: var(--text-muted); font-size: var(--step--1); display: flex; align-items: center; gap: 0.35em; }

/* Giving — a full-bleed ink band with an arched window, not a floating box */
.giving-band {
  background: var(--ink);
  color: var(--ink-text);
  border-radius: var(--radius-l);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  align-items: center;
  gap: clamp(var(--space-xl), 5vw, var(--space-3xl));
  padding: clamp(var(--space-xl), 6vw, var(--space-3xl));
  text-align: left;
  position: relative;
}
.giving-band::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(80% 90% at 8% 0%, color-mix(in srgb, var(--brand) 40%, transparent) 0%, transparent 62%);
  pointer-events: none;
}
.giving-band > * { position: relative; }
.giving-band h2 { color: var(--ink-text); font-size: var(--step-3); margin-top: var(--space-s); }
.giving-band__lead { color: var(--ink-muted); max-width: 44ch; margin-top: var(--space-s); }
.giving-band__actions { margin-top: var(--space-l); }
.giving-band .btn--primary { background: var(--ink-text); color: var(--ink); }
.giving-band .btn--primary:hover { background: #fff; color: var(--ink); box-shadow: 0 10px 30px rgb(0 0 0 / 0.35); }
.giving-band__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink-2); }
.giving-band__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .giving-band { grid-template-columns: 1fr; text-align: center; }
  .giving-band .eyebrow { justify-content: center; }
  .giving-band .eyebrow::after { content: ""; width: 1.9em; height: 1px; flex: none; background: color-mix(in srgb, var(--ink-text) 45%, transparent); }
  .giving-band__lead { margin-inline: auto; }
  .giving-band__media { display: none; }
}

/* Testimony quote cards — a large brand quote mark, staggered on desktop */
.quote-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: var(--space-l) var(--space-l) var(--space-xl);
  position: relative;
  display: flex; flex-direction: column;
}
.quote-card::before {
  content: "\201C";
  font-family: var(--font-quote);
  font-size: 5rem;
  line-height: 0.7;
  color: var(--brand);
  opacity: 0.28;
  display: block;
  margin-bottom: var(--space-2xs);
}
.quote-card blockquote { font-family: var(--font-quote); font-style: italic; font-weight: 400; font-size: var(--step-1); line-height: 1.45; color: var(--text); flex: 1; }
.quote-card figcaption { margin-top: auto; }
.quote-card cite { display: block; margin-top: auto; padding-top: var(--space-m); font-style: normal; font-weight: 600; font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.18em; color: var(--text-muted); }
/* The quote row sits straight. An earlier build offset every second card by
   --space-l; at that size it read as a misalignment rather than as rhythm, and
   it knocked the attributions off a shared baseline. */

.newsletter-band {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: clamp(var(--space-xl), 5vw, var(--space-2xl));
  text-align: center;
}
.newsletter-band h2 { font-size: var(--step-2); margin-top: var(--space-s); }
.newsletter-band__lead { color: var(--text-muted); max-width: 46ch; margin: var(--space-s) auto 0; }
.newsletter-band form { max-width: 480px; margin: var(--space-l) auto 0; gap: var(--space-2xs); }
.newsletter-band .input { border-radius: var(--radius-pill); }
@media (max-width: 520px) { .newsletter-band form { flex-direction: column; } .newsletter-band { padding-inline: var(--space-m); } }

/* Scripture verse band — the still point of the page */
.verse-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink);
  color: var(--ink-text);
  text-align: center;
  padding-block: clamp(var(--space-3xl), 15vw, 12rem);
}
/* Light through a window: a soft brand bloom rising from the floor */
.verse-band::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 60% at 50% 108%, color-mix(in srgb, var(--brand) 52%, transparent) 0%, transparent 68%),
    radial-gradient(50% 45% at 50% -12%, color-mix(in srgb, var(--secondary) 26%, transparent) 0%, transparent 70%);
}
/* A faint arch, drawn once, centred behind the verse */
.verse-band::after {
  content: "";
  position: absolute; z-index: -1;
  left: 50%; bottom: 0;
  translate: -50% 0;
  width: min(560px, 76vw); height: min(760px, 92%);
  border: 1px solid color-mix(in srgb, var(--ink-text) 12%, transparent);
  border-bottom: 0;
  border-radius: 50% 50% 0 0 / 34% 34% 0 0;
  pointer-events: none;
}
.verse-band__text {
  font-family: var(--font-quote);
  font-optical-sizing: auto;
  font-style: italic;
  font-weight: 320;
  font-size: var(--step-4);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink-text);
  max-width: 20ch;
  margin-inline: auto;
  text-wrap: balance;
}
.verse-band__ref {
  display: inline-block;
  margin-top: var(--space-xl);
  padding-top: var(--space-m);
  border-top: 1px solid color-mix(in srgb, var(--ink-text) 28%, transparent);
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--step--2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--ink-muted);
}

/* 10. PAGES ---------------------------------------------------------------- */
.page-hero { padding-block: clamp(var(--space-2xl), 8vw, var(--space-3xl)) var(--space-xl); border-bottom: 1px solid var(--border); }
.page-hero h1 { font-size: var(--step-4); margin-top: var(--space-s); }
.page-hero__lead { font-size: var(--step-1); line-height: 1.5; color: var(--text-muted); margin-top: var(--space-m); max-width: 56ch; }

.page-hero--cover {
  position: relative;
  color: #fff;
  border-bottom: 0;
  display: flex;
  align-items: flex-end;
  min-height: min(62vh, 620px);
  padding-top: calc(var(--header-height) + var(--space-2xl));
  padding-bottom: clamp(var(--space-xl), 6vw, var(--space-2xl));
}
.page-hero--cover .page-hero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.page-hero--cover .page-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero--cover .page-hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgb(14 11 8 / 0.6) 0px, rgb(14 11 8 / 0.4) var(--header-height), rgb(14 11 8 / 0.16) calc(var(--header-height) + 90px), transparent calc(var(--header-height) + 180px)),
    linear-gradient(to top, rgb(14 11 8 / 0.9) 0%, rgb(14 11 8 / 0.6) 34%, rgb(14 11 8 / 0.2) 72%, transparent 92%),
    radial-gradient(110% 70% at 12% 100%, color-mix(in srgb, var(--brand) 24%, transparent) 0%, transparent 62%);
}
.page-hero--cover h1 { color: #fff; font-size: var(--step-5); }
.page-hero--cover .eyebrow { color: rgb(255 255 255 / 0.82); }
.page-hero--cover .eyebrow::before, .page-hero--cover .eyebrow::after { background: rgb(255 255 255 / 0.6); }
.page-hero--cover .page-hero__lead { color: rgb(255 255 255 / 0.9); }

/* Giving */
.gift-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-m); }
.gift-method { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); padding: var(--space-l); display: flex; flex-direction: column; gap: var(--space-2xs); transition: border-color var(--transition), box-shadow var(--transition-slow), transform var(--transition-slow); }
.gift-method:hover { border-color: var(--border-strong); box-shadow: var(--shadow-2); transform: translateY(-3px); }
.gift-method__icon { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-text); margin-bottom: var(--space-2xs); }
.gift-method__icon svg { width: 22px; height: 22px; }
.gift-method h3 { font-size: var(--step-1); letter-spacing: -0.02em; }
.gift-method p { color: var(--text-muted); flex: 1; }
.gift-aid { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-m); padding: var(--space-l); display: grid; grid-template-columns: auto 1fr; gap: var(--space-m); align-items: start; }
.gift-aid__badge { font-weight: 700; font-size: var(--step-2); letter-spacing: -0.02em; color: var(--brand-text); border: 2px solid var(--brand); border-radius: var(--radius-m); padding: var(--space-2xs) var(--space-s); white-space: nowrap; }
@media (max-width: 560px) { .gift-aid { grid-template-columns: 1fr; } }

.tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 340px)); gap: var(--space-m); justify-content: center; }
.tier { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); padding: var(--space-l); text-align: center; display: flex; flex-direction: column; gap: var(--space-2xs); transition: border-color var(--transition), box-shadow var(--transition-slow), transform var(--transition-slow); }
.tier:hover { border-color: var(--border-strong); box-shadow: var(--shadow-2); transform: translateY(-3px); }
.tier__price { font-size: var(--step-3); font-weight: 600; letter-spacing: -0.035em; font-family: var(--font-heading); }
.tier__price span { font-size: var(--step--1); color: var(--text-muted); font-family: var(--font-body); font-weight: 400; }
.tier .btn { margin-top: var(--space-s); }

.bank-details { background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: var(--radius-m); padding: var(--space-l); }
.bank-details dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2xs) var(--space-m); }
.bank-details dt { color: var(--text-muted); }
.bank-details dd { font-weight: 600; }

/* Ministries — portrait cards where the picture carries the invitation */
.ministry-card .card__leader { font-size: var(--step--1); color: var(--text-muted); display: flex; align-items: center; gap: 0.45em; }
.card--portrait { border: 0; background: transparent; border-radius: 0; overflow: visible; }
.card--portrait .card__media { aspect-ratio: 3 / 4; border-radius: var(--radius-m); }
html.img-arch .card--portrait .card__media { border-radius: var(--arch); }
.card--portrait .card__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(14 11 8 / 0.94) 0%, rgb(14 11 8 / 0.86) 26%, rgb(14 11 8 / 0.55) 48%, rgb(14 11 8 / 0.16) 72%, transparent 90%);
  transition: opacity var(--transition);
}
.card--portrait .card__media { aspect-ratio: 3 / 4.2; }
.card--portrait .card__body {
  position: absolute; inset: auto 0 0 0;
  padding: var(--space-m) var(--space-m) var(--space-l);
  gap: var(--space-3xs);
  z-index: 2;
  pointer-events: none;
  text-shadow: 0 1px 16px rgb(0 0 0 / 0.6);
}
.card--portrait .card__meta, .card--portrait .card__leader { font-size: var(--step--1); line-height: 1.45; }
.card--portrait .card__meta { margin-top: var(--space-3xs); }
.card--portrait .card__body > * { pointer-events: auto; }
.card--portrait .card__title { color: #fff; font-size: var(--step-1); }
.card--portrait .card__title a { color: #fff; }
/* Portrait cards: the image link already covers the whole card */
.card--portrait .card__title a::after { display: none; }
.card--portrait .card__title a:hover { color: #fff; text-decoration-color: #fff; }
.card--portrait .card__meta, .card--portrait .card__leader { color: rgb(255 255 255 / 0.82); }
.card--portrait.card--link:hover { transform: translateY(-5px); box-shadow: none; }
.card--portrait .card__inner { position: relative; display: block; }

/* Plan-your-visit: content beside a sticky "at a glance" card, plus the
   reassurance grid every good church site answers up front. */
.visit-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(var(--space-xl), 5vw, var(--space-3xl)); align-items: start; }
.visit-layout .gh-content { max-width: none; margin-inline: 0; }
.visit-aside { position: sticky; top: calc(var(--header-height) + var(--space-m)); }
.visit-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: var(--space-l);
  box-shadow: var(--shadow-1);
}
.visit-card h2 { font-size: var(--step-1); margin-bottom: var(--space-m); }
.visit-card .service-summary li { padding-block: 0.35em; border-bottom: 1px solid var(--border); }
.visit-card .service-summary li:last-child { border-bottom: 0; }
.visit-card .btn { margin-top: var(--space-m); }
@media (max-width: 940px) {
  .visit-layout { grid-template-columns: 1fr; }
  .visit-aside { position: static; }
}

.expect-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-l) var(--space-m); }
.expect { display: flex; flex-direction: column; gap: var(--space-2xs); }
.expect__icon { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-text); margin-bottom: var(--space-2xs); }
.expect__icon svg { width: 21px; height: 21px; }
.expect h3 { font-size: var(--step-1); letter-spacing: -0.02em; }
.expect p { color: var(--text-muted); }

/* Reading plans */
.plan-day { border: 1px solid var(--border); border-radius: var(--radius-m); margin-bottom: var(--space-s); background: var(--surface); overflow: hidden; }
.plan-day > summary { padding: var(--space-m); font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; gap: var(--space-s); align-items: center; list-style: none; transition: background var(--transition); }
.plan-day > summary:hover { background: var(--surface-2); }
.plan-day > summary::-webkit-details-marker { display: none; }
.plan-day > summary::after { content: "+"; font-size: var(--step-2); color: var(--brand-text); line-height: 1; }
.plan-day[open] > summary::after { content: "\2013"; }
.plan-day__body { padding: 0 var(--space-m) var(--space-m); color: var(--text-muted); }
.plan-progress { font-family: var(--font-body); }

/* Prayer wall */
.prayer-wall { columns: 3 280px; column-gap: var(--space-m); }
.prayer-note { break-inside: avoid; margin-bottom: var(--space-m); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); padding: var(--space-m); }
.prayer-note__meta { font-size: var(--step--1); color: var(--text-muted); margin-top: var(--space-s); display: flex; align-items: center; gap: 0.5em; }
.prayed-btn { min-height: 44px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-pill); padding: 0.4em 1em; font-weight: 600; font-size: var(--step--1); transition: background var(--transition), color var(--transition), border-color var(--transition); }
.prayed-btn:hover { background: var(--brand); border-color: var(--brand); color: var(--brand-contrast); }

.form-card .h3 { font-family: var(--font-heading); font-size: var(--step-2); line-height: 1.1; letter-spacing: -0.025em; }
.form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); padding: clamp(var(--space-l), 4vw, var(--space-xl)); }

/* 11. POST / PAGE CONTENT -------------------------------------------------- */
.article { padding-block: var(--space-xl) var(--space-2xl); }
.article__header { max-width: var(--container-narrow); margin-inline: auto; margin-bottom: var(--space-l); }
.article__title { font-size: var(--step-4); margin-top: var(--space-s); }
.article__meta { color: var(--text-muted); font-size: var(--step--1); display: flex; flex-wrap: wrap; gap: 0.4em 1em; align-items: center; margin-top: var(--space-m); }
.article__feature { margin: var(--space-xl) auto; max-width: var(--container-wide); border-radius: var(--radius-l); overflow: hidden; }
.article__feature img { width: 100%; }

/* Koenig content */
.gh-content { max-width: var(--container-narrow); margin-inline: auto; }
.gh-content > * { margin-top: var(--space-m); }
.gh-content > :first-child { margin-top: 0; }
.gh-content > p { font-size: var(--step-0); line-height: 1.72; }
.gh-content h2 { font-size: var(--step-2); margin-top: var(--space-xl); }
.gh-content h3 { font-size: var(--step-1); margin-top: var(--space-l); }
.gh-content a { color: var(--brand-text); }
.gh-content blockquote {
  border-left: 2px solid var(--brand);
  padding-left: var(--space-m);
  font-family: var(--font-quote);
  font-style: italic;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text);
}
.gh-content ul, .gh-content ol { padding-left: 1.4em; }
.gh-content li + li { margin-top: var(--space-2xs); }
.gh-content li::marker { color: var(--brand); }
.gh-content img, .gh-content video { border-radius: var(--radius-m); }
.gh-content hr { border: 0; border-top: 1px solid var(--border); margin-block: var(--space-xl); }
.gh-content table { width: 100%; border-collapse: collapse; font-size: var(--step--1); display: block; overflow-x: auto; }
.gh-content th, .gh-content td { text-align: left; vertical-align: top; padding: var(--space-2xs) var(--space-xs); border-bottom: 1px solid var(--border); }
.gh-content th { font-weight: 600; border-bottom-color: var(--border-strong); white-space: nowrap; }
.gh-content code, .gh-content kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.88em; background: var(--surface-2); border-radius: 4px; padding: 0.1em 0.35em; overflow-wrap: anywhere; }
.gh-content pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-s); padding: var(--space-s); overflow-x: auto; font-size: var(--step--1); line-height: 1.5; }
.gh-content pre code { background: none; padding: 0; overflow-wrap: normal; }
.gh-content figcaption { text-align: center; color: var(--text-muted); font-size: var(--step--1); margin-top: var(--space-2xs); }
/* Wide and full-width cards break out of the 720px reading column, centred on it
   (a plain width:100% would only ever match the column itself). */
.gh-content .kg-width-wide { width: min(var(--container), calc(100vw - 2 * var(--space-m))); max-width: none; margin-left: 50%; transform: translateX(-50%); }
.kg-width-full { width: 100vw; max-width: 100vw; margin-left: 50%; transform: translateX(-50%); }
.kg-width-full img, .kg-width-full video { border-radius: 0; }
.kg-card-figure, figure { margin: 0; }

.tags-list { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }

.author-byline { display: flex; align-items: center; gap: var(--space-s); }
.author-byline img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }

/* 12. PAGINATION, REVEAL, MISC --------------------------------------------- */
.pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-m); margin-top: var(--space-2xl); }
.pagination a { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.8em 1.4em; border: 1.5px solid var(--border-strong); border-radius: var(--radius-pill); text-decoration: none; color: var(--text); font-weight: 600; font-size: var(--step--1); transition: border-color var(--transition), color var(--transition); }
.pagination a:hover { border-color: var(--brand); color: var(--brand-text); }
.pagination .page-number { color: var(--text-muted); font-size: var(--step--1); letter-spacing: 0.06em; }

.empty-state { text-align: center; padding: var(--space-2xl) var(--space-m); color: var(--text-muted); }
.empty-state svg { width: 56px; height: 56px; color: var(--border-strong); margin: 0 auto var(--space-s); }

/* Reveal-on-scroll (classes added by theme.js; never hidden without JS) */
.reveal-init { opacity: 0; transform: translateY(26px); transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal-init.is-revealed { opacity: 1; transform: none; }
[data-reveal-group].reveal-init > * { opacity: 0; transform: translateY(26px); transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.22, 1, 0.36, 1); }
[data-reveal-group].reveal-init.is-revealed > * { opacity: 1; transform: none; }
[data-reveal-group].reveal-init.is-revealed > *:nth-child(2) { transition-delay: 90ms; }
[data-reveal-group].reveal-init.is-revealed > *:nth-child(3) { transition-delay: 180ms; }
[data-reveal-group].reveal-init.is-revealed > *:nth-child(4) { transition-delay: 270ms; }
[data-reveal-group].reveal-init.is-revealed > *:nth-child(n+5) { transition-delay: 360ms; }


/* Secondary navigation rendered as CTA buttons in the header */
.header-cta .nav { list-style: none; padding: 0; display: flex; gap: var(--space-2xs); }
.header-cta .nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0.7em 1.4em; border-radius: var(--radius-pill);
  background: var(--btn); color: var(--btn-text);
  font-weight: 600; font-size: var(--step--1); text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition), transform var(--transition), border-color var(--transition);
}
.header-cta .nav a:hover { background: var(--brand); color: var(--brand-contrast); transform: translateY(-1px); }
.header-cta .nav li:not(:first-child) a { background: transparent; color: var(--text); border: 1.5px solid var(--border-strong); }
.header-cta .nav li:not(:first-child) a:hover { background: transparent; border-color: var(--brand); color: var(--brand-text); }
.mobile-cta { display: none; }
@media (max-width: 1100px) {
  .header-cta { display: none; }
  .mobile-cta { display: block; margin-top: var(--space-m); }
  .mobile-cta .nav { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-2xs); }
  .mobile-cta .nav a { display: block; text-align: center; padding: var(--space-s); border-radius: var(--radius-pill); background: var(--btn); color: var(--btn-text) !important; font-weight: 600; text-decoration: none; }
  .mobile-cta .nav li:not(:first-child) a { background: transparent; color: var(--text) !important; border: 1.5px solid var(--border-strong); }
}
/* The tightest desktop band: a long wordmark plus seven nav items plus two
   CTAs. Step the wordmark down rather than letting it wrap to three lines. */
@media (min-width: 1101px) and (max-width: 1300px) {
  .site-brand { font-size: var(--step-0); }
  .site-header__inner { gap: var(--space-s); }
  .primary-nav a { padding-inline: var(--space-2xs); }
  .header-cta .nav a { padding-inline: 1.05em; }
}

/* Service-times summary (footer compact variant) */
.service-summary { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-2xs); }
.service-summary .muted { color: var(--text-muted); }
.service-times__raw { color: var(--text-muted); }

/* Template helpers — layout tweaks that used to be inline style="" attributes */
.u-mt-xl { margin-top: var(--space-xl); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-s); justify-content: center; }
.state-page { min-height: 50vh; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--space-m); }
.page-hero__lead--center { max-width: 48ch; margin-inline: auto; }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }
.section--pad-top-l { padding-top: var(--space-l); }
.page-hero--inline { padding-top: 0; border: 0; }
.page-hero--spaced { padding-bottom: var(--space-l); }
.series-header__art--round { border-radius: 50%; max-width: 200px; }
.series-header__meta { margin-top: var(--space-s); }
.hero__media-fallback { position: absolute; inset: 0; background: linear-gradient(155deg, var(--brand), var(--secondary)); }
.article__tags { margin-top: var(--space-l); }
.author-byline a { text-decoration: none; color: inherit; padding-block: 0.7rem; margin-block: -0.7rem; }
.form__row--inline { align-items: center; justify-content: space-between; }
.form .grid { gap: var(--space-m); }
.gh-content--intro { margin: 0 0 var(--space-xl); }
.sermon-meta--flush { margin-top: 0; }
.sermon-meta--spread { justify-content: space-between; }
.gift-aid h2 { font-size: var(--step-1); }

/* Members-only posts: the upgrade prompt Ghost injects where the paywall falls */
.gh-post-upgrade-cta { margin-block: var(--space-xl); }
.gh-post-upgrade-cta-content {
  background: var(--brand) !important;
  color: var(--brand-contrast);
  border-radius: var(--radius-l);
  padding: var(--space-xl) var(--space-l);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-s);
}
.gh-post-upgrade-cta-content h2 { color: inherit; font-size: var(--step-2); }
.gh-post-upgrade-cta-content a { color: inherit; }
.gh-post-upgrade-cta-content .gh-btn {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0.9em 1.8em;
  border-radius: var(--radius-pill); background: var(--brand-contrast); color: var(--brand) !important;
  font-weight: 600; text-decoration: none;
}
.gh-post-upgrade-cta-content small { font-size: var(--step--1); }

/* Native comments (Ghost members) */
.article-comments { max-width: var(--container-narrow); margin: var(--space-2xl) auto 0; min-height: 22rem; } /* room for the widget so loading it never shifts the page */

/* Footer account link (members) */
.footer-legal__links { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-m); align-items: center; }

/* 13. PRINT ---------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .announcement, .next-service, .hero__actions, .hero__next,
  .nav-toggle, .header-actions, .a11y-widget, .sermon-player, .video-embed, .scroll-cue,
  .pagination, .giving-band, .newsletter-band, .verse-band, .skip-link, .form, .hero__rail { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
  .gh-content, .article__header, .container { max-width: 100%; }
  .plan-day { border: 1px solid #999; }
  .plan-day .plan-day__body { display: block !important; }
  h1, h2, h3 { page-break-after: avoid; }
  .card, .gift-method, .service-card, .step { page-break-inside: avoid; }
}