/* ==========================================================================
   CCiL — burgundy editorial design system
   Plain CSS, no build step. Mobile-first. WCAG 2.2 AA contrast throughout.
   Tokens live on :root so the church can re-brand without touching components.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Brand */
  --color-primary: #8B1028;
  --color-primary-dark: #650E21;
  --color-primary-soft: #B64A5A;
  --color-rose-light: #F4E6E6;
  --color-blush: #F9EEEB;
  --color-surface: #FAF7F2;
  --color-white: #FFFFFF;
  --color-text: #272327;
  --color-text-soft: #5A5056;
  --color-text-muted: #6E6268;
  --color-line: #E8DED6;
  --color-line-strong: #DCCCC4;
  --color-gold: #C49A65;

  /* Feedback */
  --color-warn-bg: #FBEEDC;
  --color-warn-line: #EFD3AC;
  --color-warn-text: #7A4A10;
  --color-error: #A3201A;

  /* Type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Noto Serif", Georgia, "Times New Roman", serif;
  --font-cjk-tc: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-cjk-sc: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font: var(--font-sans), var(--font-cjk-tc), var(--font-cjk-sc);

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;

  /* Space */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(39, 35, 39, .05);
  --shadow: 0 2px 6px rgba(39, 35, 39, .06), 0 12px 28px rgba(101, 14, 33, .07);
  --shadow-lg: 0 8px 20px rgba(39, 35, 39, .08), 0 24px 56px rgba(101, 14, 33, .10);

  --max: 1200px;
  --header-h: 68px;
}

html[lang="zh-Hant"] body { font-family: var(--font-cjk-tc), var(--font-sans); }
html[lang="zh-Hans"] body { font-family: var(--font-cjk-sc), var(--font-sans); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--color-primary); text-underline-offset: 3px; }
a:hover { color: var(--color-primary-dark); }
h1, h2, h3, h4 { margin: 0 0 var(--s-3); line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
p { margin: 0 0 var(--s-4); }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
address { font-style: normal; }

:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; border-radius: 4px; }
.site-footer :focus-visible, .hero-card-primary:focus-visible, .sermon-band :focus-visible { outline-color: #F3C99A; }

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

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--s-4); }
@media (min-width: 768px) { .container { padding: 0 var(--s-8); } }

.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;
}
.skip-link {
  position: absolute; left: var(--s-4); top: -200px; z-index: 200;
  background: var(--color-primary); color: #fff; padding: var(--s-3) var(--s-5);
  border-radius: var(--radius-sm); text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: var(--s-3); color: #fff; }

/* Bilingual label lockup: primary line in the active language, partner line beneath. */
.alt {
  display: block; font-family: var(--font-sans); font-weight: 500;
  font-size: var(--fs-sm); letter-spacing: .04em; color: var(--color-text-muted);
}
.alt:empty { display: none; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: var(--s-3) var(--s-6);
  border: 1.5px solid transparent; border-radius: var(--radius-pill);
  font-weight: 600; font-size: var(--fs-base); line-height: 1.2; text-decoration: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--color-primary); color: #fff; box-shadow: 0 6px 16px rgba(139, 16, 40, .22); }
.btn-primary:hover { background: var(--color-primary-dark); color: #fff; box-shadow: 0 8px 22px rgba(101, 14, 33, .28); }
.btn-secondary { background: var(--color-white); color: var(--color-primary); border-color: var(--color-primary); }
.btn-secondary:hover { background: var(--color-rose-light); color: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.btn-quiet { background: var(--color-white); color: var(--color-text); border-color: var(--color-line-strong); }
.btn-quiet:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn-sm { min-height: 40px; padding: var(--s-2) var(--s-4); font-size: var(--fs-sm); }
.btn-block { width: 100%; }
.link-arrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: 600; font-size: var(--fs-sm); text-decoration: none; color: var(--color-primary);
}
.link-arrow svg { width: 16px; height: 16px; transition: transform .18s ease; }
.link-arrow:hover svg { transform: translateX(3px); }
.link-btn {
  background: none; border: 0; padding: var(--s-1) var(--s-2); color: var(--color-primary);
  font-size: var(--fs-sm); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(1.3) blur(10px);
  border-bottom: 1px solid var(--color-line);
}
.header-row { display: flex; align-items: center; gap: var(--s-4); min-height: var(--header-h); }

.brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; color: var(--color-text); min-width: 0; }
.brand-mark { width: 32px; height: 36px; flex: none; color: var(--color-primary); }
.brand-lockup { display: flex; flex-direction: column; justify-content: center; min-width: 0; line-height: 1.22; }
.brand-abbr { font-family: var(--font-serif); font-weight: 700; font-size: 1.22rem; letter-spacing: .05em; color: var(--color-primary); }
.brand-zh { font-weight: 700; font-size: var(--fs-base); white-space: nowrap; }
.brand-en { font-family: var(--font-sans); font-size: var(--fs-xs); letter-spacing: .05em; color: var(--color-text-muted); white-space: nowrap; }

.nav { display: none; margin-left: var(--s-2); }
.nav > ul { display: flex; align-items: center; gap: 2px; }
.nav-item { position: relative; }
.nav-link, .nav-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  padding: var(--s-2) var(--s-3); border: 0; background: none; border-radius: var(--radius-sm);
  color: var(--color-text); font-weight: 600; font-size: var(--fs-sm); text-decoration: none; white-space: nowrap;
}
.nav-link:hover, .nav-toggle:hover { background: var(--color-rose-light); color: var(--color-primary-dark); }
.nav-link[aria-current="page"] { color: var(--color-primary); background: var(--color-rose-light); }
.nav-toggle .caret { width: 9px; height: 9px; transition: transform .18s ease; }
.nav-toggle[aria-expanded="true"] { background: var(--color-rose-light); color: var(--color-primary-dark); }
.nav-toggle[aria-expanded="true"] .caret { transform: rotate(180deg); }
.nav-menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 236px; padding: var(--s-2);
  background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); display: none; z-index: 70;
}
.nav-menu[data-open="true"] { display: block; }
.nav-menu a { display: block; padding: var(--s-2) var(--s-3); border-radius: var(--radius-sm); color: var(--color-text); text-decoration: none; font-size: var(--fs-sm); font-weight: 600; }
.nav-menu a:hover { background: var(--color-blush); color: var(--color-primary-dark); }
.nav-menu .alt { font-size: var(--fs-xs); font-weight: 500; letter-spacing: .03em; }

.header-actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }
.icon-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none;
  border: 1px solid var(--color-line); border-radius: var(--radius-sm);
  background: var(--color-white); color: var(--color-text); text-decoration: none;
}
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.search-btn { display: none; }

.lang-picker { display: inline-flex; gap: 2px; padding: 3px; background: var(--color-blush); border-radius: var(--radius-pill); }
.lang-picker button {
  border: 0; background: none; color: var(--color-text-soft);
  min-height: 30px; padding: 0 11px; border-radius: var(--radius-pill);
  font-weight: 700; font-size: var(--fs-xs); letter-spacing: .02em;
}
.lang-picker button:hover { color: var(--color-primary-dark); }
.lang-picker button[aria-pressed="true"] { background: var(--color-primary); color: #fff; }

.myccil { display: none; }

.mobile-nav { display: none; background: var(--color-white); border-top: 1px solid var(--color-line); max-height: calc(100vh - var(--header-h)); overflow-y: auto; }
.mobile-nav[data-open="true"] { display: block; }
.mobile-nav ul { padding: var(--s-2) 0 0; }
.mobile-nav a { display: block; padding: var(--s-3) var(--s-4); color: var(--color-text); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--color-blush); }
.mobile-nav a:hover { background: var(--color-blush); color: var(--color-primary-dark); }
.mobile-nav .alt { font-size: var(--fs-xs); }
.mobile-nav .mobile-cta { padding: var(--s-4); display: grid; gap: var(--s-2); }

@media (min-width: 1060px) {
  .nav { display: block; }
  .myccil { display: inline-flex; }
  .search-btn { display: inline-grid; }
  .menu-toggle { display: none; }
  .mobile-nav { display: none !important; }
}

/* --------------------------------------------------------------------------
   Notices
   -------------------------------------------------------------------------- */
.alert { background: var(--color-warn-bg); border-bottom: 1px solid var(--color-warn-line); color: var(--color-warn-text); font-size: var(--fs-sm); }
.alert .container { display: flex; align-items: flex-start; gap: var(--s-3); padding-top: var(--s-3); padding-bottom: var(--s-3); }
.alert svg { width: 19px; height: 19px; flex: none; margin-top: 3px; }
.alert[hidden] { display: none; }

.notice { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-4) var(--s-5); border-radius: var(--radius); border: 1px solid transparent; font-size: var(--fs-sm); }
.notice svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.notice p { margin: 0; }
.notice p + p { margin-top: var(--s-2); }
.notice-warn { background: var(--color-warn-bg); border-color: var(--color-warn-line); color: var(--color-warn-text); }
.notice-info { background: var(--color-white); border-color: var(--color-line); color: var(--color-text-soft); }
.notice-rose { background: var(--color-blush); border-color: var(--color-rose-light); color: var(--color-primary-dark); }

/* --------------------------------------------------------------------------
   Hero — a photograph of the city, over a burgundy scrim

   The photograph sets place only. It is a free-licence stock image of London and is
   never presented as a photograph of CCiL; the photographer is credited in the corner.
   The scrim is two stacked gradients: one from the left, which carries the headline,
   and one from the bottom, which seats the quick-action cards.
   -------------------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; overflow: hidden; background: #3A0C18; }
.hero-photo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%;
}
.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(38, 7, 15, .80) 0%, rgba(38, 7, 15, .30) 34%, rgba(38, 7, 15, .06) 70%),
    linear-gradient(98deg, rgba(58, 11, 23, .94) 0%, rgba(58, 11, 23, .88) 44%, rgba(58, 11, 23, .70) 64%, rgba(58, 11, 23, .32) 86%, rgba(58, 11, 23, .16) 100%);
}
.hero-credit {
  position: absolute; right: var(--s-4); bottom: var(--s-3); z-index: 1; margin: 0;
  font-size: 11px; letter-spacing: .05em; color: rgba(255, 255, 255, .66);
}
/* padding-block only: this element also carries .container, whose side padding
   a `padding` shorthand here would silently reset to zero. */
.hero-inner { position: relative; z-index: 1; padding-block: var(--s-16) var(--s-20); color: #fff; }
.hero-eyebrow {
  display: block; font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: #F2CCA4; margin-bottom: var(--s-5);
}
.hero h1 {
  font-size: clamp(2.05rem, 6.2vw, 3.9rem); line-height: 1.17; max-width: 12em;
  margin-bottom: var(--s-5); color: #fff; letter-spacing: -0.018em;
  text-shadow: 0 2px 28px rgba(28, 4, 11, .42);
}
.hero-rule { width: 72px; height: 3px; background: #E8B98A; border-radius: 2px; margin-bottom: var(--s-5); }
.hero-lede {
  font-family: var(--font-serif); font-size: var(--fs-md); line-height: 1.7;
  color: rgba(255, 255, 255, .93); max-width: 30em; margin: 0;
  text-shadow: 0 1px 20px rgba(28, 4, 11, .5);
}

/* Quick actions ride up over the lower edge of the photograph. */
.quick-actions {
  position: relative; z-index: 2;
  display: grid; gap: var(--s-3);
  margin-top: calc(var(--s-12) * -1); margin-bottom: var(--s-12);
}
.hero-card {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-5); border-radius: var(--radius-lg);
  background: var(--color-white); border: 1px solid var(--color-line);
  text-decoration: none; color: var(--color-text); box-shadow: var(--shadow-lg);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.hero-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--color-primary-soft); color: var(--color-text); }
.hero-card .ico { width: 26px; height: 26px; flex: none; color: var(--color-primary); }
.hero-card .label { flex: 1; min-width: 0; font-weight: 700; font-size: var(--fs-md); }
.hero-card .chev { width: 18px; height: 18px; flex: none; color: var(--color-primary-soft); }
.hero-card-primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.hero-card-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; }
.hero-card-primary .ico, .hero-card-primary .chev { color: #fff; }
.hero-card-primary .alt { color: rgba(255, 255, 255, .84); }

@media (min-width: 760px) {
  .hero-inner { padding-block: var(--s-20) calc(var(--s-20) + var(--s-10)); }
  .quick-actions { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); margin-top: calc(var(--s-16) * -1); margin-bottom: var(--s-16); }
}
@media (min-width: 1060px) {
  .hero-inner { padding-block: calc(var(--s-20) + var(--s-6)) calc(var(--s-20) + var(--s-16)); }
}

/* --------------------------------------------------------------------------
   Vision band — one quiet full-bleed moment between the card grids
   -------------------------------------------------------------------------- */
.vision-band {
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(182, 74, 90, .36), rgba(182, 74, 90, 0) 62%),
    linear-gradient(135deg, var(--color-primary-dark), #4C0A18);
  color: #fff; padding: var(--s-16) 0; text-align: center;
}
.vision-mark { width: 44px; height: 33px; margin: 0 auto var(--s-5); fill: #E8B98A; opacity: .9; }
.vision-quote {
  margin: 0 auto; max-width: 20em;
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(1.4rem, 3.4vw, 2.1rem); line-height: 1.5; color: #fff;
}
html[lang^="zh"] .vision-quote { font-family: var(--font-cjk-tc), var(--font-serif); font-weight: 500; }
html[lang="zh-Hans"] .vision-quote { font-family: var(--font-cjk-sc), var(--font-serif); }
.vision-cite {
  margin: var(--s-6) 0 0; display: flex; flex-direction: column; gap: 2px;
  font-size: var(--fs-sm); color: rgba(255, 255, 255, .72);
}
.vision-cite span:last-child { font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section { padding: var(--s-12) 0; }
.section-tight { padding: var(--s-10) 0; }
.section-blush { background: var(--color-blush); }
.section-white { background: var(--color-white); }

.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-8); }
.section-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-3); margin: 0; font-size: var(--fs-xl); }
.section-title::before { content: ""; width: 4px; align-self: stretch; min-height: 1.1em; background: var(--color-primary); border-radius: 2px; }
.section-title .alt { display: inline; font-size: var(--fs-base); color: var(--color-text-muted); font-weight: 600; }
.section-sub { margin: var(--s-3) 0 0; color: var(--color-text-soft); max-width: 44em; }

/* Pillars */
.pillars { display: grid; grid-template-columns: repeat(2, 1fr); }
.pillar { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-3); padding: var(--s-6) var(--s-3); }
.pillar svg { width: 34px; height: 34px; color: var(--color-primary); }
.pillar strong { font-size: var(--fs-base); font-weight: 700; }
.pillar .alt { font-size: var(--fs-xs); letter-spacing: .06em; }
.pillar::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; background: var(--color-line); }
.pillar:nth-child(odd)::before { display: none; }
@media (min-width: 768px) {
  .pillars { grid-template-columns: repeat(4, 1fr); }
  .pillar:nth-child(odd)::before { display: block; }
  .pillar:first-child::before { display: none; }
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card-grid { display: grid; gap: var(--s-4); }
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .card-grid-3 { grid-template-columns: repeat(3, 1fr); } }

.event-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-lg);
  text-decoration: none; color: var(--color-text); box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.event-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--color-primary-soft); color: var(--color-text); }
.event-media { position: relative; aspect-ratio: 16 / 9; background: var(--color-rose-light); }
.event-media svg { width: 100%; height: 100%; }
.event-date {
  position: absolute; left: var(--s-3); top: var(--s-3); z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: var(--radius); background: var(--color-primary); color: #fff; line-height: 1.1;
  box-shadow: 0 4px 12px rgba(101, 14, 33, .25);
}
.event-date .d { font-size: 1.32rem; font-weight: 800; }
.event-date .m { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; }
.event-body { padding: var(--s-4) var(--s-5) var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.event-body h3 { margin: 0; font-size: var(--fs-md); }
.event-body p { margin: 0; color: var(--color-text-soft); font-size: var(--fs-sm); }
.event-meta { color: var(--color-text-muted); font-size: var(--fs-xs); }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: var(--s-2); }
.tag { display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--color-blush); color: var(--color-primary-dark); font-size: var(--fs-xs); font-weight: 600; }
.sample-tag {
  display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 4px; vertical-align: middle;
  background: var(--color-warn-bg); color: var(--color-warn-text); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}

.lang-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lang-chip {
  display: inline-block; padding: 3px 11px; border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: 700;
  background: var(--color-rose-light); color: var(--color-primary);
}
.lang-chip.cmn { background: #F0E7DD; color: #7A4A10; }
.lang-chip.eng { background: #E7E7EA; color: #3F3B45; }

.loc-card {
  display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: var(--s-4);
  padding: var(--s-3); background: var(--color-white);
  border: 1px solid var(--color-line); border-radius: var(--radius-lg);
  text-decoration: none; color: var(--color-text); box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.loc-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--color-primary-soft); color: var(--color-text); }
.loc-thumb { width: 96px; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--color-rose-light); }
.loc-thumb svg { width: 100%; height: 100%; }
.loc-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.loc-body h3 { margin: 0; font-size: var(--fs-md); }
.loc-place { display: flex; align-items: center; gap: 6px; color: var(--color-text-muted); font-size: var(--fs-sm); }
.loc-place svg { width: 15px; height: 15px; flex: none; }
.loc-times { color: var(--color-text-soft); font-size: var(--fs-sm); display: flex; flex-wrap: wrap; gap: 2px 12px; }
.loc-times .t { font-variant-numeric: tabular-nums; }
.loc-times .t b { font-weight: 700; }
.loc-flag { display: inline-flex; align-items: center; gap: 5px; color: var(--color-warn-text); font-size: var(--fs-xs); }
.loc-flag svg { width: 14px; height: 14px; flex: none; }
.loc-chev { width: 20px; height: 20px; color: var(--color-primary-soft); flex: none; margin-right: var(--s-2); }
@media (max-width: 520px) {
  .loc-card { grid-template-columns: 70px 1fr; gap: var(--s-3); }
  .loc-thumb { width: 70px; }
  .loc-chev { display: none; }
}

.empty-state {
  grid-column: 1 / -1; padding: var(--s-12) var(--s-5); text-align: center;
  background: var(--color-white); border: 1px dashed var(--color-line-strong); border-radius: var(--radius-lg); color: var(--color-text-soft);
}
.empty-state h3 { margin-bottom: var(--s-2); }
.empty-state p { margin: 0 0 var(--s-4); }

.online-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  margin-top: var(--s-6); padding: var(--s-4) var(--s-5);
  background: var(--color-white); border: 1px solid var(--color-line); border-left: 4px solid var(--color-primary);
  border-radius: var(--radius); font-size: var(--fs-sm); color: var(--color-text-soft);
}
.online-strip svg { width: 20px; height: 20px; flex: none; color: var(--color-primary); }
.online-strip strong { color: var(--color-text); }
.online-strip .items { display: flex; flex-wrap: wrap; gap: 2px 10px; }

.sermon-band {
  display: grid; gap: var(--s-5); padding: var(--s-8); border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 68%, #A4203A 100%);
  color: #fff; position: relative; overflow: hidden;
}
.sermon-band::after {
  content: ""; position: absolute; width: 320px; height: 320px; right: -110px; top: -140px;
  border-radius: 50%; background: rgba(255, 255, 255, .07);
}
.sermon-band > * { position: relative; }
.sermon-band .eyebrow { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #F0C9B6; }
.sermon-band h3 { margin: var(--s-2) 0; font-size: var(--fs-xl); color: #fff; }
.sermon-band p { margin: 0; color: #F2DCD8; }
.sermon-band .meta { margin-top: var(--s-2); font-size: var(--fs-sm); color: #EBC9C4; }
.sermon-band .btn { background: #fff; color: var(--color-primary-dark); align-self: start; margin-top: var(--s-4); }
.sermon-band .btn:hover { background: var(--color-rose-light); color: var(--color-primary-dark); }
@media (min-width: 900px) { .sermon-band { grid-template-columns: 1.6fr auto; align-items: center; padding: var(--s-10) var(--s-12); } .sermon-band .btn { margin-top: 0; } }

.story-grid { display: grid; gap: var(--s-8); }
@media (min-width: 900px) { .story-grid { grid-template-columns: 1.15fr 1fr; align-items: start; gap: var(--s-12); } }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); margin-bottom: var(--s-6); }
.stat { padding: var(--s-5) var(--s-3); text-align: center; background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius); }
.stat strong { display: block; font-family: var(--font-serif); font-size: var(--fs-2xl); line-height: 1.1; color: var(--color-primary); }
.stat span { font-size: var(--fs-sm); color: var(--color-text-soft); }
.values li { padding: var(--s-4) var(--s-5); background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius); margin-bottom: var(--s-3); }
.values strong { display: block; }
.values span { color: var(--color-text-soft); font-size: var(--fs-sm); }

.contact-strip { display: grid; gap: var(--s-5); padding: var(--s-8); background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.contact-strip h2 { margin-bottom: var(--s-2); }
.contact-strip p { margin: 0; color: var(--color-text-soft); }
.contact-phone { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-4); font-family: var(--font-serif); font-size: var(--fs-lg); font-weight: 700; color: var(--color-text); text-decoration: none; }
.contact-phone svg { width: 20px; height: 20px; color: var(--color-primary); }
@media (min-width: 820px) { .contact-strip { grid-template-columns: 1fr auto; align-items: center; padding: var(--s-10) var(--s-12); } }

/* --------------------------------------------------------------------------
   Page banner
   -------------------------------------------------------------------------- */
.page-banner { position: relative; overflow: hidden; background: var(--color-blush); border-bottom: 1px solid var(--color-rose-light); }
.page-banner .leaf-corner { position: absolute; right: -24px; top: -34px; width: 260px; opacity: .9; pointer-events: none; }
.page-banner .container { position: relative; padding-top: var(--s-8); padding-bottom: var(--s-8); }
.page-banner h1 { font-size: clamp(1.7rem, 5vw, 2.5rem); margin-bottom: var(--s-2); }
.page-banner h1 .alt { margin-top: var(--s-1); font-family: var(--font-serif); font-size: var(--fs-lg); font-weight: 400; letter-spacing: .02em; color: var(--color-primary); }
.page-banner .lede { margin: var(--s-4) 0 0; color: var(--color-text-soft); max-width: 40em; }

.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-4); padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--color-text-muted); }
.breadcrumb a { color: var(--color-text-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-primary); text-decoration: underline; }
.breadcrumb li + li::before { content: "\203A"; margin-right: var(--s-2); color: var(--color-line-strong); }

/* --------------------------------------------------------------------------
   Find a Church
   -------------------------------------------------------------------------- */
.find-layout { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 900px) { .find-layout { grid-template-columns: 276px 1fr; gap: var(--s-8); } }

.filter-panel { background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.filter-head { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--color-line); }
.filter-head svg { width: 17px; height: 17px; flex: none; color: var(--color-primary); }
.filter-head h2 { flex: 1; margin: 0; font-size: var(--fs-base); }
.filter-head .link-btn { padding: 0; }
.filter-body { padding: var(--s-5); display: grid; gap: var(--s-6); }
.filter-group .legend { display: block; margin: 0 0 var(--s-2); font-size: var(--fs-sm); font-weight: 700; color: var(--color-text); }
.filter-group .legend .alt { display: inline; margin-left: 6px; font-size: var(--fs-xs); font-weight: 500; }
.check { display: flex; align-items: center; gap: var(--s-3); padding: 7px 0; cursor: pointer; font-size: var(--fs-sm); color: var(--color-text); }
.check input { width: 19px; height: 19px; flex: none; margin: 0; accent-color: var(--color-primary); cursor: pointer; }
.check .label { flex: 1; }
.check .label .alt { display: inline; margin-left: 5px; font-size: var(--fs-xs); }
.check .count { color: var(--color-text-muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.check:hover { color: var(--color-primary-dark); }
.check.is-zero { color: var(--color-text-muted); }

.select-wrap { position: relative; display: block; }
.select-wrap select {
  appearance: none; -webkit-appearance: none; width: 100%; font: inherit; font-size: var(--fs-sm);
  min-height: 44px; padding: 0 38px 0 var(--s-4);
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm);
  background: var(--color-white); color: var(--color-text); cursor: pointer;
}
.select-wrap select:hover { border-color: var(--color-primary); }
.select-wrap::after {
  content: ""; position: absolute; right: 15px; top: 50%; width: 8px; height: 8px; pointer-events: none;
  border-right: 2px solid var(--color-text-soft); border-bottom: 2px solid var(--color-text-soft);
  transform: translateY(-70%) rotate(45deg);
}

.filter-toggle { display: flex; width: 100%; justify-content: space-between; }
@media (min-width: 900px) {
  .filter-toggle { display: none; }
  .filter-panel { position: sticky; top: calc(var(--header-h) + 16px); }
  .filter-panel .filter-body { display: grid !important; }
}
@media (max-width: 899px) {
  .filter-panel[data-open="false"] .filter-body,
  .filter-panel[data-open="false"] .filter-head { display: none; }
  .filter-panel[data-open="false"] { border: 0; box-shadow: none; }
  .filter-head h2 { display: none; }
}

.results-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.results-count { font-weight: 700; }
.results-count .n { color: var(--color-primary); }
.sort-wrap { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); color: var(--color-text-soft); }
.sort-wrap .select-wrap { width: auto; }
.sort-wrap select { min-height: 38px; padding-right: 34px; border-radius: var(--radius-pill); }
.results-list { display: grid; gap: var(--s-3); }

.active-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); }
.active-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px 5px 13px;
  border-radius: var(--radius-pill); background: var(--color-rose-light); color: var(--color-primary-dark);
  border: 0; font-size: var(--fs-xs); font-weight: 600;
}
.active-chip svg { width: 13px; height: 13px; }
.active-chip:hover { background: var(--color-primary); color: #fff; }

/* --------------------------------------------------------------------------
   Congregation detail
   -------------------------------------------------------------------------- */
.detail-media {
  position: relative; aspect-ratio: 16 / 9; margin-top: var(--s-4);
  border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-rose-light);
  background: var(--color-rose-light);
}
.detail-media svg { width: 100%; height: 100%; }
@media (min-width: 700px) { .detail-media { aspect-ratio: 21 / 7; } }
.photo-pending {
  position: absolute; left: var(--s-4); bottom: var(--s-4);
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .93); color: var(--color-primary-dark);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em;
}
.photo-pending svg { width: 14px; height: 14px; }

.detail-head { padding: var(--s-6) 0 var(--s-8); }
.detail-head h1 { font-size: clamp(1.7rem, 5vw, 2.5rem); margin-bottom: var(--s-3); }
.detail-place { display: flex; align-items: center; gap: 7px; margin-bottom: var(--s-3); color: var(--color-text-soft); }
.detail-place svg { width: 18px; height: 18px; flex: none; color: var(--color-primary); }
.detail-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.detail-top { display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .detail-top { grid-template-columns: 1fr auto; align-items: start; } .detail-actions { margin-top: var(--s-2); } }

.detail-grid { display: grid; gap: var(--s-8); padding-bottom: var(--s-12); }
@media (min-width: 940px) { .detail-grid { grid-template-columns: 1.55fr 1fr; gap: var(--s-12); align-items: start; } }
.detail-main > section { margin-bottom: var(--s-10); }
.detail-main > section:last-child { margin-bottom: 0; }
.detail-main h2 { font-size: var(--fs-lg); }
.detail-main .section-sub { margin-top: calc(-1 * var(--s-2)); margin-bottom: var(--s-4); font-size: var(--fs-sm); color: var(--color-text-muted); }
.source-line { font-size: var(--fs-xs); color: var(--color-text-muted); }

.svc-group { margin-bottom: var(--s-5); }
.svc-group h3 {
  display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3);
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-primary);
}
.svc-group h3::after { content: ""; flex: 1; height: 1px; background: var(--color-line); }
.svc-row {
  display: grid; grid-template-columns: 20px auto 1fr; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-2); padding: var(--s-3) var(--s-4);
  background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius);
}
.svc-row > svg { width: 18px; height: 18px; color: var(--color-primary-soft); }
.svc-time { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.svc-what { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.svc-what small { display: block; width: 100%; color: var(--color-text-muted); font-size: var(--fs-xs); }
.svc-aud { display: inline-block; padding: 2px 9px; border-radius: 4px; background: var(--color-blush); color: var(--color-primary-dark); font-size: var(--fs-xs); font-weight: 600; }

.aside-card { margin-bottom: var(--s-4); padding: var(--s-6); background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.aside-card h2 { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); font-size: var(--fs-base); }
.aside-card h2 .alt { display: inline; font-size: var(--fs-xs); }
.aside-card p { margin-bottom: var(--s-3); color: var(--color-text-soft); font-size: var(--fs-sm); }
.aside-card p:last-child { margin-bottom: 0; }
.aside-card .btn { margin-top: var(--s-3); }
@media (min-width: 940px) { .aside-sticky { position: sticky; top: calc(var(--header-h) + 16px); } }
.next-service { margin-bottom: var(--s-3); padding: var(--s-5); border-radius: var(--radius); background: var(--color-blush); }
.next-service .big { display: block; font-family: var(--font-serif); font-size: 1.85rem; font-weight: 700; line-height: 1.1; color: var(--color-primary-dark); }
.next-service .when { display: block; margin-top: 4px; font-weight: 600; color: var(--color-text); }
.next-service .what { display: block; margin-top: 2px; color: var(--color-text-muted); font-size: var(--fs-sm); }
.placeholder-box {
  padding: var(--s-5); border: 1px dashed var(--color-line-strong); border-radius: var(--radius);
  background: var(--color-surface); color: var(--color-text-muted); font-size: var(--fs-sm); text-align: center;
}
.placeholder-box .alt { display: block; margin-top: 4px; font-size: var(--fs-xs); }
.link-list li { margin-bottom: var(--s-2); }
.link-list a { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 600; font-size: var(--fs-sm); text-decoration: none; }
.link-list svg { width: 15px; height: 15px; }

/* --------------------------------------------------------------------------
   Plan Your Visit
   -------------------------------------------------------------------------- */
.steps { display: grid; gap: var(--s-4); counter-reset: step; list-style: none; padding: 0; margin: 0; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { position: relative; padding: var(--s-6) var(--s-5) var(--s-5); background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.step::before {
  counter-increment: step; content: counter(step);
  display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: var(--s-4);
  border-radius: 50%; background: var(--color-primary); color: #fff; font-family: var(--font-serif); font-weight: 700;
}
.step strong { display: block; font-size: var(--fs-md); }
.step p { margin: var(--s-2) 0 0; color: var(--color-text-soft); font-size: var(--fs-sm); }

.check-list { max-width: 44em; }
.check-list li { display: flex; gap: var(--s-3); align-items: flex-start; margin-bottom: var(--s-3); }
.check-list svg { width: 20px; height: 20px; flex: none; margin-top: 4px; color: var(--color-primary); }
.info-grid { display: grid; gap: var(--s-5); }
@media (min-width: 768px) { .info-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); } }
.info-block { padding: var(--s-5); background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius); }
.info-block h3 { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); font-size: var(--fs-md); }
.info-block h3 svg { width: 19px; height: 19px; flex: none; color: var(--color-primary); }
.info-block p { margin: 0; color: var(--color-text-soft); font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.form-card { max-width: 46rem; padding: var(--s-8); background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.form-card h2 { margin-bottom: var(--s-1); }
.form-card .sub { margin-bottom: var(--s-6); color: var(--color-text-muted); font-size: var(--fs-sm); }
.field { margin-bottom: var(--s-5); }
.field > label { display: block; margin-bottom: 7px; font-weight: 600; font-size: var(--fs-sm); }
.field .req { margin-left: 6px; font-size: var(--fs-xs); font-weight: 500; color: var(--color-primary); }
.field .hint { display: block; margin-top: 5px; color: var(--color-text-muted); font-size: var(--fs-xs); }
.field input[type="text"], .field input[type="email"], .field input[type="date"], .field select, .field textarea {
  width: 100%; min-height: 48px; padding: var(--s-3) var(--s-4); font: inherit; font-size: var(--fs-base);
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm);
}
.field textarea { min-height: 128px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 1px; border-color: var(--color-primary); background: var(--color-white); }
.field[data-invalid="true"] input, .field[data-invalid="true"] textarea { border-color: var(--color-error); background: #FDF4F3; }
.field .error { display: none; margin: 6px 0 0; color: var(--color-error); font-size: var(--fs-sm); font-weight: 600; }
.field[data-invalid="true"] .error { display: block; }
.field-check { display: flex; gap: var(--s-3); align-items: flex-start; }
.field-check input { width: 22px; height: 22px; flex: none; margin-top: 2px; accent-color: var(--color-primary); }
.field-check label { margin: 0; font-weight: 500; font-size: var(--fs-sm); }
.form-privacy { margin: var(--s-4) 0; color: var(--color-text-muted); font-size: var(--fs-xs); }
.form-success { max-width: 46rem; padding: var(--s-8); background: var(--color-blush); border: 1px solid var(--color-rose-light); border-radius: var(--radius-lg); color: var(--color-primary-dark); }
.form-success h3 { margin-bottom: var(--s-2); }
.form-success p { margin: 0; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.stub { max-width: 46rem; padding: var(--s-10) 0 var(--s-20); }
.stub .notice { margin: var(--s-6) 0; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { margin-top: var(--s-16); padding: var(--s-16) 0 var(--s-8); background: var(--color-primary-dark); color: #E8CFCB; font-size: var(--fs-sm); }
.footer-grid { display: grid; gap: var(--s-8); }
@media (min-width: 820px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s-10); } }
.footer-brand .brand-mark { margin-bottom: var(--s-4); color: #fff; }
.footer-brand strong { display: block; color: #fff; font-size: var(--fs-lg); }
.footer-brand .en { display: block; margin-bottom: var(--s-4); color: #DDBDB8; font-size: var(--fs-sm); letter-spacing: .05em; }
.footer-brand p { color: #DDBDB8; max-width: 32em; }
.site-footer .footer-head { margin-bottom: var(--s-4); color: #fff; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.site-footer a { color: #F3E3E0; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer li { margin-bottom: var(--s-3); }
.footer-phone { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-serif); font-size: var(--fs-md); color: #fff; }
.footer-phone svg { width: 18px; height: 18px; }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6);
  margin-top: var(--s-10); padding-top: var(--s-5);
  border-top: 1px solid rgba(255, 255, 255, .16); color: #CFA8A4; font-size: var(--fs-xs);
}

/* --------------------------------------------------------------------------
   Print — people print service times
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .hero-art, .hero-cards, .detail-actions, .alert, .filter-panel, .skip-link { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .detail-grid { grid-template-columns: 1fr; }
  .aside-card, .svc-row, .loc-card { border-color: #999; box-shadow: none; }
}

/* Brand name block collapses to the CCiL monogram on narrow screens */
@media (max-width: 639px) { .brand-names { display: none; } }

/* ==========================================================================
   Section pages: photo heroes, prose, feature cards, sermon rows, contact
   ========================================================================== */

/* Photo hero — text sits beside the photo, never on top of it, so contrast is
   never at the mercy of the image. */
.page-hero { position: relative; overflow: hidden; background: var(--color-blush); border-bottom: 1px solid var(--color-rose-light); }
.page-hero .leaf-corner { position: absolute; right: -24px; top: -34px; width: 230px; opacity: .6; pointer-events: none; z-index: 0; }
/* padding-block only: this element also carries .container (see .hero-inner). */
.page-hero-grid { position: relative; display: grid; gap: var(--s-6); align-items: center; padding-block: var(--s-8); }
@media (min-width: 900px) { .page-hero-grid { grid-template-columns: 1.05fr 1fr; gap: var(--s-12); padding-block: var(--s-10) var(--s-12); } }
.page-hero h1 { font-size: clamp(1.7rem, 5vw, 2.5rem); margin-bottom: var(--s-2); }
.page-hero h1 .alt { margin-top: var(--s-1); font-family: var(--font-serif); font-size: var(--fs-lg); font-weight: 400; letter-spacing: .02em; color: var(--color-primary); }
.page-hero .lede { margin: var(--s-4) 0 0; color: var(--color-text-soft); max-width: 40em; }

.photo-figure { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-rose-light); box-shadow: var(--shadow); }
.photo-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-figure.ratio-wide { aspect-ratio: 16 / 10; }
.photo-figure.ratio-band { aspect-ratio: 21 / 8; }
.photo-figure.ratio-square { aspect-ratio: 1 / 1; }
.photo-credit {
  position: absolute; right: 8px; bottom: 8px; z-index: 2;
  padding: 3px 9px; border-radius: var(--radius-pill);
  background: rgba(39, 35, 39, .62); color: #fff;
  font-size: .68rem; font-weight: 500; letter-spacing: .02em;
}
.photo-credit a { color: #fff; text-decoration: underline; }
.photo-note { margin-top: var(--s-3); font-size: var(--fs-xs); color: var(--color-text-muted); }

/* Prose + placeholders */
.prose { max-width: 42em; }
.prose p { color: var(--color-text-soft); }
.prose h2 { margin-top: var(--s-8); }
.prose h2:first-child { margin-top: 0; }
.lead-para { font-family: var(--font-serif); font-size: var(--fs-lg); line-height: 1.6; color: var(--color-text); }

/* Feature cards (Community sections, Contact routes, Giving) */
.feature-grid { display: grid; gap: var(--s-5); }
@media (min-width: 820px) { .feature-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); } }
.feature-card { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6); background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.feature-card .ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--color-blush); color: var(--color-primary); }
.feature-card .ico svg { width: 23px; height: 23px; }
.feature-card h3 { margin: 0; font-size: var(--fs-md); }
.feature-card p { margin: 0; color: var(--color-text-soft); font-size: var(--fs-sm); }
.feature-card .placeholder-box { margin-top: auto; text-align: left; }
.feature-card .btn { align-self: flex-start; margin-top: var(--s-2); }

.split { display: grid; gap: var(--s-8); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: var(--s-12); } .split.media-first > :first-child { order: 2; } }

/* Filter chips (events) */
.chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 15px;
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-pill);
  background: var(--color-white); color: var(--color-text); font-size: var(--fs-sm); font-weight: 600;
}
.filter-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.filter-chip[aria-pressed="true"] { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.filter-chip .count { font-weight: 500; opacity: .8; font-size: var(--fs-xs); }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-6); }

/* Sermon list */
.sermon-list { display: grid; gap: var(--s-3); }
.sermon-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5); background: var(--color-white);
  border: 1px solid var(--color-line); border-radius: var(--radius); text-decoration: none; color: var(--color-text);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.sermon-row:hover { border-color: var(--color-primary-soft); transform: translateY(-2px); box-shadow: var(--shadow-sm); color: var(--color-text); }
.sermon-play { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--color-blush); color: var(--color-primary); }
.sermon-play svg { width: 19px; height: 19px; }
.sermon-info { min-width: 0; }
.sermon-info h3 { margin: 0 0 3px; font-size: var(--fs-md); }
.sermon-info .meta { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--color-text-muted); font-size: var(--fs-sm); }
.sermon-row .lang-chip { flex: none; }
@media (max-width: 560px) {
  .sermon-row { grid-template-columns: auto 1fr; }
  .sermon-row .lang-chip { grid-column: 2; justify-self: start; }
}

/* Definition rows (Contact details) */
.detail-rows { display: grid; gap: var(--s-4); }
.detail-row { padding: var(--s-5); background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius); }
.detail-row dt { margin-bottom: 6px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-primary); }
.detail-row dd { margin: 0; color: var(--color-text-soft); font-size: var(--fs-sm); }
.detail-row dd strong { color: var(--color-text); }

/* Quote band */
.quote-band { padding: var(--s-12) 0; background: var(--color-primary-dark); color: #fff; text-align: center; }
.quote-band blockquote { max-width: 32em; margin: 0 auto; font-family: var(--font-serif); font-size: clamp(1.15rem, 3vw, 1.6rem); line-height: 1.5; }
.quote-band .eyebrow { display: block; margin-bottom: var(--s-4); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #E7B9AC; }

/* Photo fallback when an image file is missing */
.photo-figure.is-missing {
  background: linear-gradient(135deg, var(--color-rose-light) 0%, var(--color-blush) 55%, #EADFD4 100%);
}
.photo-figure.is-missing .photo-credit { display: none; }

/* ==========================================================================
   REFINEMENT LAYER
   Added after the base system so every rule here is an intentional, reviewable
   override. Nothing below changes markup, behaviour or i18n keys — it only
   tunes rhythm, hierarchy, depth and motion. Safe to delete to fall back to
   the plain system.
   ========================================================================== */

/* --- Type -------------------------------------------------------------- */

/* Latin headings keep their optical tightening; CJK must not be tightened,
   and its headings read better slightly looser than the Latin line-height. */
html[lang^="zh"] h1,
html[lang^="zh"] h2,
html[lang^="zh"] h3,
html[lang^="zh"] h4 { letter-spacing: 0; line-height: 1.38; }
html[lang^="zh"] body { line-height: 1.8; }

/* Chinese must not be re-wrapped for balance: the balancer happily breaks a line
   between the two characters of a word, which Latin text never risks. */
html[lang^="zh"] h1,
html[lang^="zh"] h2,
html[lang^="zh"] h3,
html[lang^="zh"] h4,
html[lang^="zh"] .section-title,
html[lang^="zh"] p,
html[lang^="zh"] .lede,
html[lang^="zh"] .section-sub,
html[lang^="zh"] .hero-lede { text-wrap: wrap; line-break: strict; }

/* Stop headings breaking to a one-word last line; soften paragraph rags. */
h1, h2, h3, h4, .section-title, .hero h1, .page-banner h1 { text-wrap: balance; }
p, .lede, .section-sub, .hero-lede { text-wrap: pretty; }

/* A display scale that only opens up once there is room for it. */
@media (min-width: 1024px) {
  :root { --fs-2xl: 2.35rem; --fs-xl: 1.7rem; --fs-lg: 1.32rem; }
  .section-title { font-size: 1.7rem; }
  .section-sub { font-size: var(--fs-md); }
}

::selection { background: var(--color-rose-light); color: var(--color-primary-dark); }

/* --- Vertical rhythm --------------------------------------------------- */

@media (min-width: 768px)  { .section { padding: var(--s-16) 0; } .section-tight { padding: var(--s-12) 0; } }
@media (min-width: 1024px) { .section { padding: var(--s-20) 0; } .section-tight { padding: var(--s-16) 0; }
                             .section-head { margin-bottom: var(--s-10); } }

/* --- Depth ------------------------------------------------------------- */

/* Softer, more layered shadows: a tight contact shadow plus a wide ambient one,
   both tinted burgundy so cards sit in the warm page rather than on grey. */
:root {
  --shadow-sm: 0 1px 2px rgba(101, 14, 33, .045);
  --shadow: 0 1px 2px rgba(101, 14, 33, .05), 0 6px 14px rgba(101, 14, 33, .055), 0 18px 36px rgba(101, 14, 33, .05);
  --shadow-lg: 0 2px 4px rgba(101, 14, 33, .06), 0 12px 26px rgba(101, 14, 33, .08), 0 32px 64px rgba(101, 14, 33, .09);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --- Section headings -------------------------------------------------- */

.section-title::before { width: 3px; border-radius: 3px; background: linear-gradient(var(--color-primary), var(--color-primary-soft)); }
.section-title .alt { letter-spacing: .03em; font-weight: 500; color: var(--color-text-muted); }

/* --- Cards ------------------------------------------------------------- */

.event-card, .loc-card, .hero-card, .feature-card, .stat {
  transition: transform .34s var(--ease), box-shadow .34s var(--ease), border-color .34s var(--ease);
}
.event-card:hover, .loc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.hero-card:hover { transform: translateY(-4px); }

/* Photograph lifts very slightly inside its frame on hover: motion without jitter. */
.event-media { overflow: hidden; }
.event-media img, .event-media svg { transition: transform .6s var(--ease); }
.event-card:hover .event-media img, .event-card:hover .event-media svg { transform: scale(1.045); }

.loc-thumb svg { transition: transform .45s var(--ease); }
.loc-card:hover .loc-thumb svg { transform: scale(1.06); }
.loc-chev { transition: transform .28s var(--ease); }
.loc-card:hover .loc-chev { transform: translateX(3px); }
.hero-card .chev { transition: transform .28s var(--ease); }
.hero-card:hover .chev { transform: translateX(3px); }

/* --- Navigation -------------------------------------------------------- */

.nav-link, .nav-toggle { transition: background-color .2s var(--ease), color .2s var(--ease); }
.nav-link[aria-current="page"] { position: relative; }
.nav-link[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 4px; width: 16px; height: 2px; border-radius: 2px; background: var(--color-primary);
}
.lang-picker button { transition: background-color .2s var(--ease), color .2s var(--ease); }
.icon-btn { transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease); }

/* --- Hero -------------------------------------------------------------- */

@media (min-width: 1024px) {
  .hero-lede { font-size: var(--fs-lg); }
}
.hero-eyebrow { font-weight: 700; }

/* --- Buttons ----------------------------------------------------------- */

.btn { transition: background-color .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), box-shadow .3s var(--ease), transform .22s var(--ease); }
.btn-primary:hover { transform: translateY(-1px); }
.btn-primary:active, .btn-secondary:active, .btn-quiet:active { transform: translateY(1px); }

/* --- Quiet surfaces ---------------------------------------------------- */

.stat { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.values li, .stat, .feature-card { border-color: var(--color-line); }

/* --- Scroll-linked entrance -------------------------------------------- */

/* CSS-only, driven by the element's own position in the scroll container.
   Browsers without view timelines simply show the content, so a failure here
   can never hide anything. Disabled outright under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .card-grid > *,
    .pillars > *,
    .feature-grid > *,
    .stats > *,
    .split > *,
    .sermon-band,
    .contact-strip,
    .quote-band {
      animation: ccil-rise linear both;
      animation-timeline: view();
      animation-range: entry 2% entry 42%;
    }
  }
}
@keyframes ccil-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* --- Second pass ------------------------------------------------------- */

/* The congregation card centred its thumbnail against a two-line body, which
   left a void beside the title on a phone. Align them to the top instead. */
@media (max-width: 520px) {
  .loc-card { grid-template-columns: 64px 1fr; align-items: start; padding: var(--s-4) var(--s-3); }
  .loc-thumb { width: 64px; }
  .loc-body { gap: 5px; }
  .loc-body h3 { line-height: 1.35; }
}

/* The unverified-times alert ran to four lines on a phone and ate the fold.
   It still has to be readable, so this trims the frame, not the warning. */
@media (max-width: 520px) {
  .alert { font-size: var(--fs-xs); line-height: 1.6; }
  .alert .container { gap: var(--s-2); padding-top: var(--s-2); padding-bottom: var(--s-2); }
  .alert svg { width: 16px; height: 16px; margin-top: 2px; }
}

/* Pillars read as four stranded icons. A soft disc gives each one a centre of
   gravity, and the divider lightens so the icons carry the row. */
.pillar .ico-disc {
  display: grid; place-items: center; width: 60px; height: 60px;
  border-radius: 50%; background: var(--color-blush);
  transition: background-color .3s var(--ease), transform .3s var(--ease);
}
.pillar:hover .ico-disc { background: var(--color-rose-light); transform: translateY(-2px); }
.pillar svg { width: 28px; height: 28px; }
@media (min-width: 768px) {
  .pillars { grid-template-columns: repeat(4, 1fr); }
  .pillar { padding: var(--s-8) var(--s-4); }
  .pillar:nth-child(odd)::before { display: block; }
  .pillar:first-child::before { display: none; }
}

/* A JSON-driven grid is empty until the fetch lands. Hold the space with a
   quiet shimmer so the page does not jump when the cards arrive. */
.card-grid:empty { display: grid; gap: var(--s-4); min-height: 180px; }
.card-grid:empty::before,
.card-grid:empty::after {
  content: ""; border-radius: var(--radius-lg); min-height: 84px;
  background: linear-gradient(100deg, var(--color-rose-light) 20%, var(--color-blush) 42%, var(--color-rose-light) 64%);
  background-size: 300% 100%;
  animation: ccil-shimmer 1.6s ease-in-out infinite;
}
@keyframes ccil-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@media (prefers-reduced-motion: reduce) {
  .card-grid:empty::before, .card-grid:empty::after { animation: none; }
}

/* The hero is now a photograph with its own bottom scrim; the ivory fade that
   dissolved the old flat illustration would only wash that scrim out. */
.hero-inner { z-index: 1; }

/* ==========================================================================
   THIRD PASS — the photographic hero and what it changed around it
   Appended, like the layers above, so each override stays reviewable.
   ========================================================================== */

/* The credit sat behind the third quick-action card. Lift it clear of the card row. */
.hero-credit { bottom: var(--s-16); }
@media (min-width: 760px) { .hero-credit { bottom: var(--s-20); } }

/* Chinese line breaking in display type. The default allows a break between any two
   Han characters, which split 成長 across two lines in the headline. `keep-all` holds
   a run together and breaks at punctuation instead; `overflow-wrap` is the escape
   hatch so a run with no punctuation still wraps rather than overflowing. */
html[lang^="zh"] .hero h1,
html[lang^="zh"] .vision-quote {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* Pillars. A white band of four two-word labels read as a gap in the page rather than
   a section. On blush, tighter, with the discs smaller, it reads as a deliberate rest. */
.pillars-band { background: var(--color-blush); border-block: 1px solid var(--color-line); }
.pillars-band.section-tight { padding: var(--s-8) 0; }
.pillar { padding: var(--s-4) var(--s-3); gap: var(--s-2); }
.pillar .ico-disc { width: 52px; height: 52px; background: var(--color-white); }
.pillar:hover .ico-disc { background: var(--color-rose-light); }
.pillar svg { width: 24px; height: 24px; }
.pillar::before { background: var(--color-line-strong); top: 24%; bottom: 24%; }

/* The featured sermon sat in solid burgundy immediately above the vision band, so two
   dark red slabs ran together and neither read as a moment. The sermon is a card, not a
   statement; it goes back to rose and leaves the vision band as the page's one dark beat. */
.sermon-band {
  background: linear-gradient(135deg, var(--color-rose-light) 0%, var(--color-blush) 68%, #FCE9E3 100%);
  border: 1px solid var(--color-line-strong);
  color: var(--color-text);
}
.sermon-band::after { background: rgba(139, 16, 40, .05); }
.sermon-band .eyebrow { color: var(--color-primary); }
.sermon-band h3 { color: var(--color-primary-dark); }
.sermon-band p { color: var(--color-text-soft); }
.sermon-band .meta { color: var(--color-text-muted); }
.sermon-band .btn { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-sm); }
.sermon-band .btn:hover { background: var(--color-primary-dark); color: #fff; }
/* The gold focus ring exists for dark surfaces; this one is light again. */
.sermon-band :focus-visible { outline-color: var(--color-primary); }

/* Congregation card. The service time is the one thing a first-time visitor came for,
   and it was the smallest, greyest line on the card. Give it the weight it earns. */
.loc-times { gap: 4px 18px; }
.loc-times .t b { color: var(--color-primary); font-size: var(--fs-base); }

/* The counts moved into the story column, so they need air above the button rather
   than above the values list they used to precede. */
.story-grid .stats { margin-top: var(--s-6); margin-bottom: var(--s-6); }

/* On a phone the hero is short, so the credit landed immediately under the lede and read
   as part of the sentence. More room at the foot of the hero separates the two, and the
   shadow keeps the credit legible where the photograph is bright. */
@media (max-width: 759px) {
  .hero-inner { padding-block: var(--s-12) calc(var(--s-20) + var(--s-8)); }
}
.hero-credit { text-shadow: 0 1px 6px rgba(28, 4, 11, .55); }

/* Illustrative photography on a congregation page. It lives in the "what to expect" and
   children sections, never in the venue slot: a stock building above a real address would
   read as that congregation's own building. `auto-fit` drops it to two across, then one,
   rather than squeezing three squares into a phone. */
.photo-trio {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-3); margin-top: var(--s-5);
}
.photo-trio .photo-figure { box-shadow: var(--shadow-sm); }
.photo-band-slot { margin: var(--s-5) 0; }


/* The children photograph is hands, paper and scissors in its upper half and the back of a
   child's head along the bottom edge. A centred crop puts that head in frame; biasing the
   crop upward keeps the picture on the craft, which is what the caption describes and what
   the site's own selection rule asks for. */
.photo-band-slot .photo-figure img { object-position: 50% 26%; }

/* The venue header is illustrative stock photography, not this venue. The label is the only
   thing that stops a reader taking it for the real building, so it is a solid bar rather
   than a faint pill, it sits over a gradient that keeps it legible on any photograph, and it
   wraps to two lines on a phone instead of truncating. */
/* A photograph needs room to be read. The 21:7 band the slot inherited was cut for flat
   artwork; at that ratio the coffee photograph became an unreadable close-up of a carafe. */
.detail-media-photo { background: var(--color-rose-light); aspect-ratio: 16 / 9; }
@media (min-width: 700px) { .detail-media-photo { aspect-ratio: 21 / 8; } }
/* inset:0 rather than height:100%: the figure must fill the band whatever the photo's
   own proportions are, and `cover` then does the cropping. `aspect-ratio: auto` is load
   bearing — the figure arrives with .ratio-wide, and Chrome sizes an absolutely positioned
   box from its aspect-ratio in preference to its insets, so the figure grew past the band
   and overflow:hidden clipped the photographer's credit out of sight. */
.detail-media-photo .photo-figure { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
.detail-media-photo .photo-figure img { width: 100%; height: 100%; object-fit: cover; }
.detail-media-photo .photo-credit { z-index: 1; bottom: var(--s-3); right: var(--s-4); }
.detail-media-photo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60%;
  background: linear-gradient(to top, rgba(28, 4, 11, .70), rgba(28, 4, 11, 0));
  pointer-events: none;
}
.detail-media-photo .photo-pending {
  z-index: 1; max-width: calc(100% - var(--s-8)); border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .95); line-height: 1.35; text-align: left;
}
.detail-media-photo .photo-pending svg { flex: none; }

/* ==========================================================================
   FOURTH PASS — accessibility corrections
   Each rule here fixes something an audit of all ten pages in three languages
   actually reported. See DESIGN_NOTES.md, "Fourth pass".
   ========================================================================== */

/* Footer column headings are <h2 class="footer-head"> rather than <h4>. The page's
   last content heading is an h2, so an h4 here skipped a level, which a screen
   reader announces as a gap in the structure. Only the tag changed; the type scale
   is set by this class, so the footer looks exactly as it did. */

/* The privacy and safeguarding policies do not exist yet, so they render as plain
   text, not as links to "#". They should still read as the same quiet footer text
   rather than looking like a broken link. */
.footer-pending { color: #DDBDB8; }

/* WCAG 2.2 AA 2.5.8, Target Size (Minimum): a control that is not inline inside a
   sentence needs 24x24 CSS px. These two were 23px tall — close enough to look fine
   and still fail, which is exactly the kind of thing only a measurement catches. */
.link-arrow,
.link-btn { min-height: 24px; }
.link-btn { display: inline-flex; align-items: center; }

/* An event with no destination renders as <article class="event-card"> instead of
   <a>. Everything that styled it as a card is class-based and still applies, but a
   non-link must not keep the affordances of one: no lift on hover, and the cursor
   stays an arrow, so it does not invite a click that does nothing. */
article.event-card { cursor: default; }
article.event-card:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--color-line); }
article.event-card:hover .event-media img,
article.event-card:hover .event-media svg { transform: none; }

/* The consent checkbox and its label measured 22px tall together — two pixels short
   of 2.5.8, and the one control on the site a visitor MUST hit to send the form. */
.field-check input[type="checkbox"] { width: 24px; height: 24px; flex: none; accent-color: var(--color-primary); }