/* Union Vision Mission
   Colours come from the UVM logo: blue #2b3192, red #e81c24.
   Tokens: primitive, then semantic, then component. */

:root {
  /* Primitive */
  --blue-950: #141850;
  --blue-900: #1b2068;
  --blue-800: #232981;
  --blue-700: #2b3192;
  --blue-200: #c9cdf2;
  --blue-100: #ebecf8;
  --red-600: #d61a22;
  --red-500: #e81c24;
  --paper: #fbfbfd;
  --tint: #f2f3f9;
  --ink: #15183a;
  --ink-soft: #4b5072;
  --line: #e1e3ef;
  --white: #ffffff;

  /* Semantic */
  --color-bg: var(--paper);
  --color-bg-tint: var(--tint);
  --color-bg-dark: var(--blue-700);
  --color-text: var(--ink);
  --color-text-soft: var(--ink-soft);
  --color-brand: var(--blue-700);
  --color-brand-hover: var(--blue-900);
  --color-accent: var(--red-600);
  --color-line: var(--line);

  --font-sans: "Plus Jakarta Sans", "Noto Sans TC", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-xs: clamp(0.75rem, 0.72rem + 0.1vw, 0.8rem);
  --text-sm: clamp(0.875rem, 0.85rem + 0.1vw, 0.925rem);
  --text-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --text-xl: clamp(1.3rem, 1.18rem + 0.55vw, 1.55rem);
  --text-2xl: clamp(1.7rem, 1.42rem + 1.2vw, 2.4rem);
  --text-3xl: clamp(2.05rem, 1.55rem + 2.2vw, 3.5rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: clamp(3.5rem, 2.5rem + 4vw, 6rem);

  --radius: 14px;
  --radius-small: 8px;
  --wrap: 1200px;
  --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);

  /* Component */
  --header-h: 88px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
:lang(zh-Hant) body, body:lang(zh-Hant) {
  font-family: "Noto Sans TC", "Plus Jakarta Sans", system-ui, sans-serif;
  line-height: 1.85;
}
:lang(zh-Hant) h1, :lang(zh-Hant) h2, :lang(zh-Hant) h3 { letter-spacing: 0.02em; line-height: 1.35; }

h1, h2, h3 { line-height: 1.15; margin: 0; letter-spacing: -0.015em; }
p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
picture { display: block; }
ol, ul { list-style: none; margin: 0; padding: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap.narrow { max-width: 860px; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 100;
  background: var(--color-brand); color: var(--white);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-small);
}
.skip-link:focus { top: var(--space-4); }
:focus-visible { outline: 3px solid var(--red-500); outline-offset: 3px; }
[id] { scroll-margin-top: calc(var(--header-h) + 2rem); }

/* Type helpers */
.eyebrow {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-accent); margin-bottom: var(--space-3);
}
.eyebrow-light { color: var(--blue-200); }
.num {
  display: block; font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: var(--text-sm); font-weight: 800; color: var(--color-accent);
  letter-spacing: 0.04em; font-variant-numeric: tabular-nums; margin-bottom: var(--space-2);
}
.big { font-size: var(--text-lg); line-height: 1.6; }
.h-small { font-size: var(--text-xl); font-weight: 800; margin: var(--space-6) 0 var(--space-3); }
.h-small:first-child { margin-top: 0; }
.more {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-weight: 700; font-size: var(--text-sm); text-decoration: none; color: var(--color-brand);
  min-height: 44px;
}
.more span { transition: transform 0.2s ease; }
.more:hover span { transform: translateX(4px); }

.prose p { margin-bottom: var(--space-4); }
.prose p:last-child { margin-bottom: 0; }
.prose h3 { font-size: var(--text-lg); font-weight: 800; margin: var(--space-6) 0 var(--space-3); }
.prose ul { margin-bottom: var(--space-4); }
.prose ul li { padding: var(--space-2) 0 var(--space-2) var(--space-5); position: relative; border-bottom: 1px solid var(--color-line); }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); }
.prose a, .faq a, .notice a:not(.btn):not(.more) { color: var(--color-brand); font-weight: 600; }
.verse { margin-top: var(--space-5); padding-left: var(--space-4); border-left: 3px solid var(--color-accent); font-style: italic; color: var(--color-text-soft); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--space-5); border-radius: 999px;
  border: 2px solid var(--color-brand); background: var(--color-brand); color: var(--white);
  font-weight: 700; font-size: var(--text-sm); text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn:hover { background: var(--color-brand-hover); border-color: var(--color-brand-hover); }
.btn-small { min-height: 40px; padding: 0 var(--space-4); }
.btn-ghost { background: transparent; border-color: rgba(255,255,255,0.75); color: var(--white); }
.btn-ghost:hover { background: rgba(255,255,255,0.12); border-color: var(--white); }
.btn-light { background: var(--white); border-color: var(--white); color: var(--color-brand); }
.btn-light:hover { background: var(--blue-100); border-color: var(--blue-100); }

/* Utility bar */
.utility { background: var(--blue-950); color: #d7daf3; font-size: var(--text-xs); }
.utility-inner { display: flex; justify-content: space-between; align-items: center; min-height: 40px; gap: var(--space-4); }
.utility-actions { display: flex; align-items: center; gap: var(--space-5); }
.utility-link { text-decoration: none; }
.utility-link:hover { color: var(--white); }
.lang { display: flex; align-items: center; gap: var(--space-2); }
.lang a { text-decoration: none; font-weight: 700; padding: var(--space-2) var(--space-1); }
.lang a[aria-current="true"] { color: var(--white); text-decoration: underline; text-decoration-color: var(--red-500); text-underline-offset: 5px; text-decoration-thickness: 2px; }
.lang span { opacity: 0.5; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 251, 253, 0.97); backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--color-line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); gap: var(--space-5); }
.brand { display: flex; align-items: center; text-decoration: none; flex: none; }
.brand-logo { height: 72px; width: auto; }
.site-nav { display: flex; align-items: center; gap: var(--space-5); }
.site-nav a:not(.btn) { text-decoration: none; font-weight: 600; font-size: var(--text-sm); padding-block: var(--space-2); border-bottom: 2px solid transparent; }
.site-nav a:not(.btn):hover { color: var(--color-brand); }
.site-nav a[aria-current="page"] { color: var(--color-brand); border-bottom-color: var(--red-500); }
.site-nav-extra { display: none; }
.nav-toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; position: relative; }
.nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after {
  position: absolute; left: 11px; width: 22px; height: 2px; background: var(--color-text);
  transition: transform 0.2s ease;
}
.nav-toggle-bar { top: 21px; }
.nav-toggle-bar::before { content: ""; left: 0; top: -7px; }
.nav-toggle-bar::after { content: ""; left: 0; top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::after { transform: translateY(-7px) rotate(-45deg); }

/* Sections */
.section { padding-block: var(--space-8); }
.section-tint { background: var(--color-bg-tint); }
.section-head { display: grid; grid-template-columns: 1fr auto; column-gap: var(--space-6); align-items: end; margin-bottom: var(--space-7); }
.section-head .eyebrow, .section-head h2, .section-head .lede { grid-column: 1; }
.section-head h2 { font-size: var(--text-2xl); font-weight: 800; }
.section-head .lede { color: var(--color-text-soft); margin-top: var(--space-3); max-width: 60ch; }
.section-head .more { grid-column: 2; grid-row: 1 / span 3; align-self: end; }

/* Home hero */
.hero { position: relative; min-height: clamp(540px, 80vh, 780px); display: grid; background: var(--blue-950); }
.hero-media { grid-area: 1 / 1; overflow: hidden; }
.hero-media picture, .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.hero-overlay {
  grid-area: 1 / 1; display: flex; align-items: flex-end; color: var(--white); padding-block: var(--space-8);
  background: linear-gradient(90deg, rgba(20,24,80,0.88) 0%, rgba(20,24,80,0.62) 45%, rgba(20,24,80,0.15) 100%),
              linear-gradient(0deg, rgba(20,24,80,0.55) 0%, rgba(20,24,80,0) 50%);
}
.hero h1 { font-size: var(--text-3xl); font-weight: 800; max-width: 17ch; }
.hero-lede { font-size: var(--text-lg); margin-top: var(--space-5); max-width: 58ch; color: #e6e8f8; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.hero .btn:not(.btn-ghost) { background: var(--white); border-color: var(--white); color: var(--color-brand); }
.hero .btn:not(.btn-ghost):hover { background: var(--blue-100); border-color: var(--blue-100); }

/* Page hero (inner pages) */
.page-hero { background: var(--color-bg-tint); border-bottom: 1px solid var(--color-line); padding-block: var(--space-7) var(--space-8); }
.page-hero-inner { display: grid; gap: var(--space-6); align-items: center; }
.page-hero.has-media .page-hero-inner { grid-template-columns: 1.1fr 1fr; }
.page-hero h1 { font-size: var(--text-3xl); font-weight: 800; max-width: 22ch; }
.page-lede { font-size: var(--text-lg); color: var(--color-text-soft); margin-top: var(--space-4); max-width: 60ch; }
.page-hero-media img { border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.crumbs { margin-bottom: var(--space-5); font-size: var(--text-xs); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.crumbs li { color: var(--color-text-soft); }
.crumbs li + li::before { content: "/"; margin-right: var(--space-2); opacity: 0.5; }
.crumbs a { display: inline-block; padding-block: 4px; text-decoration: none; color: var(--color-brand); font-weight: 600; }

/* Split layout */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: start; }
.split h2 { font-size: var(--text-2xl); font-weight: 800; margin-bottom: var(--space-4); }
.split-media { align-items: center; }
.split > *, .cards > *, .page-hero-inner > *, .place-grid > *, .footer-grid > * { min-width: 0; }
a[href^="mailto:"] { overflow-wrap: anywhere; }
.stack { display: grid; gap: var(--space-5); }

/* Places */
.place-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: var(--space-5); }
.place-grid-4 { grid-template-columns: repeat(4, 1fr); }
.place { display: flex; flex-direction: column; gap: var(--space-3); background: var(--white); border: 1px solid var(--color-line); border-radius: var(--radius); padding: var(--space-6); }
.place h3 { font-size: var(--text-xl); font-weight: 800; }
.place p { color: var(--color-text-soft); }
.place .more { margin-top: auto; }
.place-tag { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; }
.place-focus { background: var(--color-brand); border-color: var(--color-brand); color: var(--white); }
.place-focus p, .place-focus .place-tag { color: #dfe1f7; }
.place-focus .num { color: #ff8a8f; }
.place-focus .more { color: var(--white); }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.cards-2 { grid-template-columns: repeat(2, 1fr); }
.cards-spaced { margin-top: var(--space-7); }
.card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--color-line); border-radius: var(--radius); overflow: hidden; }
.card-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card-body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5) var(--space-5) var(--space-6); flex: 1; }
.card-body h2, .card-body h3 { font-size: var(--text-lg); font-weight: 800; }
.card-body p { color: var(--color-text-soft); font-size: var(--text-sm); }
.card-body .more { margin-top: auto; }
.card-meta { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); }
.card-body .card-place { color: var(--color-text); font-weight: 600; }

.link-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.link-cards a { display: flex; flex-direction: column; gap: var(--space-2); height: 100%; padding: var(--space-6); background: var(--white); border: 1px solid var(--color-line); border-radius: var(--radius); text-decoration: none; transition: border-color 0.2s ease, transform 0.2s ease; }
.link-cards a:hover { border-color: var(--color-brand); transform: translateY(-2px); }
.link-cards strong { font-size: var(--text-lg); }
.link-cards span:not(.num) { color: var(--color-text-soft); font-size: var(--text-sm); }

/* Events */
.events { display: grid; gap: var(--space-4); }
.event { display: grid; grid-template-columns: 96px 1fr; gap: var(--space-5); align-items: start; padding: var(--space-5); background: var(--white); border: 1px solid var(--color-line); border-radius: var(--radius); }
.event-date { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: var(--radius-small); background: var(--color-brand); color: var(--white); font-family: "Plus Jakarta Sans", system-ui, sans-serif; }
.event-day { font-size: 2rem; font-weight: 800; line-height: 1; }
.event-mon { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; margin-top: var(--space-1); }
.event-body h3 { font-size: var(--text-lg); font-weight: 800; }
.event-meta { font-size: var(--text-sm); font-weight: 600; color: var(--color-accent); margin: var(--space-1) 0 var(--space-2); }
.event-body p:not(.event-meta) { color: var(--color-text-soft); }

/* Quote */
.quote-grid { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-7); align-items: center; max-width: 1000px; margin-inline: auto; }
.quote-photo img { width: 220px; height: 220px; object-fit: cover; object-position: center 22%; border-radius: 50%; border: 6px solid var(--white); box-shadow: 0 10px 30px rgba(20,24,80,0.15); }
.quote { margin: 0; }
.quote blockquote { margin: 0; }
.quote blockquote p { font-size: var(--text-xl); font-weight: 500; line-height: 1.55; }
.quote blockquote p::before { content: "\201C"; color: var(--color-accent); }
.quote blockquote p::after { content: "\201D"; color: var(--color-accent); }
.quote figcaption { display: flex; flex-direction: column; margin-top: var(--space-5); }
.quote figcaption strong { font-weight: 800; }
.quote figcaption span { color: var(--color-text-soft); font-size: var(--text-sm); }

/* People */
.people { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.person { padding: var(--space-6); background: var(--white); border: 1px solid var(--color-line); border-top: 4px solid var(--color-brand); border-radius: var(--radius); }
.person h3 { font-size: var(--text-xl); font-weight: 800; }
.person-role { color: var(--color-text-soft); margin-top: var(--space-1); }
.person-place { color: var(--color-accent); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; margin-top: var(--space-3); }

/* Timeline */
.timeline { position: relative; border-left: 2px solid var(--color-line); margin-left: var(--space-3); }
.timeline li { position: relative; padding: 0 0 var(--space-6) var(--space-6); }
.timeline li::before { content: ""; position: absolute; left: -9px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--white); border: 3px solid var(--color-accent); }
.tl-year { display: block; font-weight: 800; font-size: var(--text-lg); color: var(--color-brand); }
.timeline p { color: var(--color-text-soft); }

/* Facts list */
.facts { margin: 0 0 var(--space-6); border-top: 1px solid var(--color-line); }
.facts div { display: grid; grid-template-columns: 200px 1fr; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-line); }
.facts dt { font-weight: 700; color: var(--color-text-soft); font-size: var(--text-sm); }
.facts dd { margin: 0; font-weight: 600; }

/* Photos */
.photo { margin: 0; }
.photo img { border-radius: var(--radius); width: 100%; }
.photo figcaption { font-size: var(--text-sm); color: var(--color-text-soft); margin-top: var(--space-2); }
.photo-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-7); }
.photo-row-2 { grid-template-columns: repeat(2, 1fr); margin-top: 0; }
.photo-row .photo img { aspect-ratio: 4 / 3; object-fit: cover; }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.gallery .photo img { aspect-ratio: 4 / 3; object-fit: cover; transition: opacity 0.2s ease; }
.gallery .photo-link:hover img { opacity: 0.9; }

/* Notice, lists */
.notice { padding: var(--space-6); background: var(--white); border: 1px solid var(--color-line); border-left: 4px solid var(--color-brand); border-radius: var(--radius); }
.notice p + p { margin-top: var(--space-4); }
.plain-list li { padding: var(--space-4) 0; border-bottom: 1px solid var(--color-line); }
.plain-list a { color: var(--color-brand); font-weight: 600; }
.news-list li { padding-bottom: var(--space-6); border-bottom: 1px solid var(--color-line); }
.news-list h2 { font-size: var(--text-xl); font-weight: 800; margin: var(--space-2) 0 var(--space-3); }
.news-list h2 a { text-decoration: none; }
.news-list h2 a:hover { color: var(--color-brand); }
.news-list p:not(.card-meta) { color: var(--color-text-soft); }
.prayer { font-size: var(--text-lg); margin-top: var(--space-5); margin-bottom: var(--space-6); }

/* FAQ */
.faq { border-top: 1px solid var(--color-line); }
.faq details { border-bottom: 1px solid var(--color-line); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  padding: var(--space-5) 0; min-height: 44px; font-weight: 700; font-size: var(--text-lg);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 1.5rem; font-weight: 400; color: var(--color-accent); transition: transform 0.2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: var(--space-5); color: var(--color-text-soft); max-width: 70ch; }

/* CTA band */
.cta-band { background: var(--color-brand); color: var(--white); padding-block: var(--space-7); }
.cta-inner { display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.cta-band h2 { font-size: var(--text-2xl); font-weight: 800; max-width: 22ch; }
.cta-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* Footer */
.site-footer { background: var(--blue-950); color: #c9cdea; padding-top: var(--space-7); font-size: var(--text-sm); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1.6fr 1fr; gap: var(--space-6); }
.footer-col { display: block; }
.footer-col p { margin-bottom: var(--space-2); max-width: 42ch; }
.footer-col a { text-decoration: none; }
.footer-col a:hover { color: var(--white); }
.footer-logo { width: 96px; height: auto; background: var(--white); border-radius: var(--radius-small); padding: 6px; margin-bottom: var(--space-4); }
.footer-links { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-5); align-content: start; }
.footer-links .footer-head { grid-column: 1 / -1; }
.footer-links a { padding-block: var(--space-1); }
.footer-head { color: var(--white); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: var(--text-xs); margin-bottom: var(--space-3); }
.footer-legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); border-top: 1px solid rgba(255,255,255,0.12); margin-top: var(--space-7); padding-block: var(--space-5); font-size: var(--text-xs); color: #9ca1cc; }

/* 404 */
.not-found { text-align: center; padding-block: var(--space-8); }
.not-found h1 { font-size: var(--text-3xl); font-weight: 800; margin-bottom: var(--space-4); }
.not-found p { color: var(--color-text-soft); margin-bottom: var(--space-5); }
.not-found .hero-actions { justify-content: center; }

/* Tablet */
@media (max-width: 1080px) {
  .site-nav { gap: var(--space-4); }
}
@media (max-width: 960px) {
  .utility-email { display: none; }
  .utility-inner { justify-content: flex-end; }
  .utility-actions > .utility-link { display: none; }

  .nav-toggle { display: block; }
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0; display: none;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--color-bg); border-bottom: 1px solid var(--color-line);
    padding: var(--space-2) var(--gutter) var(--space-5);
    max-height: calc(100vh - var(--header-h) - 40px); overflow-y: auto;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a:not(.btn) { padding-block: var(--space-3); border-bottom: 1px solid var(--color-line); min-height: 44px; }
  .site-nav a[aria-current="page"] { border-bottom-color: var(--color-line); }
  .site-nav .btn { margin-top: var(--space-4); }
  .site-nav-extra { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-4); }
  .site-nav-extra .utility-link { color: var(--color-text-soft); font-size: var(--text-sm); padding-block: var(--space-2); border: 0 !important; min-height: 0 !important; }

  .place-grid, .place-grid-4 { grid-template-columns: 1fr 1fr; }
  .place-grid .place-focus { grid-column: 1 / -1; }
  .cards, .gallery, .photo-row { grid-template-columns: 1fr 1fr; }
  .split, .page-hero.has-media .page-hero-inner { grid-template-columns: 1fr; gap: var(--space-6); }
  .people, .link-cards { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid .footer-col:first-child { grid-column: 1 / -1; }
}

/* Mobile */
@media (max-width: 640px) {
  .brand-logo { height: 60px; }
  :root { --header-h: 76px; }
  .section-head { grid-template-columns: 1fr; }
  .section-head .more { grid-column: 1; grid-row: auto; margin-top: var(--space-3); justify-self: start; }
  .place-grid, .place-grid-4, .cards, .cards-2, .gallery, .photo-row, .photo-row-2, .people, .link-cards { grid-template-columns: 1fr; }
  .hero-overlay { background: linear-gradient(0deg, rgba(20,24,80,0.92) 0%, rgba(20,24,80,0.7) 55%, rgba(20,24,80,0.25) 100%); }
  .quote-grid { grid-template-columns: 1fr; gap: var(--space-5); justify-items: start; }
  .quote-photo img { width: 150px; height: 150px; }
  .event { grid-template-columns: 72px 1fr; gap: var(--space-4); padding: var(--space-4); }
  .event-day { font-size: 1.5rem; }
  .facts div { grid-template-columns: 1fr; gap: var(--space-1); }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-inner { flex-direction: column; align-items: flex-start; }
}

/* =====================================================================
   2026 layer: motion tokens, focus, icons, trust strip, linked cards,
   lightbox, page transitions and scroll reveal. All motion is switched
   off for people who ask for reduced motion (see the end of this file).
   ===================================================================== */
:root {
  --focus: var(--red-500);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 220ms;
  --shadow-1: 0 1px 2px rgba(20, 24, 80, 0.05), 0 6px 18px rgba(20, 24, 80, 0.06);
  --shadow-2: 0 2px 6px rgba(20, 24, 80, 0.08), 0 18px 44px rgba(20, 24, 80, 0.14);
}
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.utility, .hero, .cta-band, .site-footer, .place-focus, .lightbox { --focus: #ffffff; }
a, button, summary { touch-action: manipulation; }
h1, h2, h3 { text-wrap: balance; }
p, li, dd, figcaption { text-wrap: pretty; }

/* Icons */
.icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
.more .icon { transition: transform var(--dur) var(--ease-out); }
.more:hover .icon { transform: translateX(4px); }
.icon-link { display: inline-flex; align-items: center; gap: var(--space-2); }
.place-icon { width: 32px; height: 32px; color: var(--color-brand); margin-bottom: var(--space-1); }
.place-focus .place-icon { color: var(--white); }

/* Tap targets: 40px+ everywhere, 44px on touch screens */
.utility-link, .lang a { display: inline-flex; align-items: center; min-height: 40px; }
.lang a { padding-inline: var(--space-2); }
.footer-col a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; }
@media (pointer: coarse) {
  .utility-link, .lang a, .footer-col a { min-height: 44px; }
}

/* Header: keeps its height, the logo just tightens after scrolling */
.site-header { transition: box-shadow var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out); view-transition-name: site-header; }
.site-header.is-scrolled { box-shadow: var(--shadow-1); background: rgba(251, 251, 253, 0.92); }
.brand-logo { transform-origin: left center; transition: transform var(--dur) var(--ease-out); }
.site-header.is-scrolled .brand-logo { transform: scale(0.84); }
.utility { view-transition-name: utility; }
.header-give { display: none; }
body.nav-open { overflow: hidden; }

/* Hero */
.hero { min-height: clamp(540px, 80vh, 780px); min-height: clamp(540px, 80dvh, 780px); }
.hero-overlay { padding-bottom: calc(var(--space-8) + 56px); }

/* Trust strip: verified facts only */
.trust-wrap { position: relative; z-index: 2; margin-top: -56px; }
.trust {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--white); border: 1px solid var(--color-line); border-radius: var(--radius);
  box-shadow: var(--shadow-2); overflow: hidden;
}
.trust li + li { border-left: 1px solid var(--color-line); }
.trust a, .trust li > div { display: flex; gap: var(--space-4); align-items: flex-start; height: 100%; padding: var(--space-5); text-decoration: none; }
.trust a { transition: background-color var(--dur) var(--ease-out); }
.trust a:hover { background: var(--blue-100); }
.trust a:focus-visible { outline-offset: -3px; }
.trust-icon { width: 28px; height: 28px; color: var(--color-brand); margin-top: 2px; }
.trust-text { display: flex; flex-direction: column; gap: 2px; }
.trust-text strong { font-size: var(--text-lg); font-weight: 800; color: var(--color-brand); line-height: 1.25; }
.trust-text span { font-size: var(--text-sm); color: var(--color-text-soft); line-height: 1.45; }

/* Cards: soft depth, and whole card clickable where it leads somewhere */
.card, .place, .person, .event, .link-cards a, .notice { box-shadow: var(--shadow-1); }
.card picture { overflow: hidden; }
.card .card-img { transition: transform 450ms var(--ease-out); }
.is-linked { position: relative; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.is-linked .card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.is-linked:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.is-linked:hover .card-img { transform: scale(1.04); }
.is-linked .card-link:focus-visible { outline: none; }
.is-linked:has(.card-link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.link-cards a:hover { box-shadow: var(--shadow-2); }

/* Event details with icons */
.event-badge {
  display: inline-block; margin-bottom: var(--space-2); padding: 2px var(--space-3); border-radius: 999px;
  background: var(--tint); color: var(--color-text-soft); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em;
}
.event.is-past .event-date { background: var(--ink-soft); }
.event.is-past .event-meta { color: var(--color-text-soft); }
.empty-state .big { font-weight: 700; }
.event-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.event-meta span { display: inline-flex; align-items: center; gap: var(--space-2); }

/* Gallery thumbnails */
.gallery .photo-link { display: block; border-radius: var(--radius); overflow: hidden; cursor: zoom-in; }
.gallery .photo-link img { transition: transform 450ms var(--ease-out); }
.gallery .photo-link:hover img { transform: scale(1.04); opacity: 1; }

/* Lightbox (native dialog) */
.lightbox {
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0;
  padding: var(--space-6) clamp(64px, 8vw, 104px); border: 0;
  background: rgba(12, 14, 46, 0.95); color: var(--white);
}
.lightbox[open] { display: grid; grid-template-rows: 1fr auto; place-items: center; animation: lb-in 200ms var(--ease-out); }
.lightbox::backdrop { background: rgba(12, 14, 46, 0.6); }
.lb-figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); max-width: 100%; }
.lb-img { max-width: 100%; max-height: calc(100dvh - 170px); width: auto; height: auto; object-fit: contain; border-radius: var(--radius-small); }
.lb-cap { color: #dfe1f7; text-align: center; font-size: var(--text-sm); max-width: 70ch; }
.lb-count { color: #b8bce6; font-size: var(--text-xs); margin: 0; }
.lb-btn {
  position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.08);
  color: var(--white); cursor: pointer; transition: background-color var(--dur) var(--ease-out);
}
.lb-btn:hover { background: rgba(255, 255, 255, 0.2); }
.lb-btn .icon { width: 22px; height: 22px; }
.lb-close { top: var(--space-4); right: var(--space-4); }
.lb-prev { left: var(--space-4); top: 50%; translate: 0 -50%; }
.lb-next { right: var(--space-4); top: 50%; translate: 0 -50%; }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }

/* Page transitions between pages (browsers that support them) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; }

/* Entrance and scroll reveal. main.js tags blocks below the fold with data-reveal and
   adds .is-visible as each one scrolls into view, with a short stagger across a row.
   Uses translate (not transform), so the hover lift on cards still works. Without
   JavaScript nothing is hidden. */
@keyframes rise { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: no-preference) {
  .hero-content { animation: rise 450ms var(--ease-out) both; }
  [data-reveal] {
    opacity: 0;
    translate: 0 36px;
    transition: opacity 700ms var(--ease-out), translate 700ms var(--ease-out),
                transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), 0ms, 0ms;
  }
  [data-reveal="left"] { translate: -36px 0; }
  [data-reveal="right"] { translate: 36px 0; }
  [data-reveal].is-visible { opacity: 1; translate: 0 0; }
}

@media (max-width: 960px) {
  .header-inner { gap: var(--space-3); }
  .header-give { display: inline-flex; margin-left: auto; }
  .nav-give { display: none; }
  .site-nav { max-height: calc(100vh - var(--header-h) - 40px); max-height: calc(100dvh - var(--header-h) - 40px); }
  .site-nav.is-open { animation: lb-in 180ms var(--ease-out); }
  .trust { grid-template-columns: 1fr 1fr; }
  .trust li:nth-child(3) { border-left: 0; }
  .trust li:nth-child(n + 3) { border-top: 1px solid var(--color-line); }
}
@media (max-width: 640px) {
  .hero-overlay { padding-bottom: calc(var(--space-8) + 32px); }
  .trust-wrap { margin-top: -32px; }
  .trust { grid-template-columns: 1fr; }
  .trust li + li { border-left: 0; border-top: 1px solid var(--color-line); }
  .trust a, .trust li > div { padding: var(--space-4) var(--space-5); }
  .lightbox { padding: 72px var(--space-3) var(--space-5); }
  .lb-prev, .lb-next { top: auto; bottom: var(--space-4); translate: none; }
  .lb-img { max-height: calc(100dvh - 230px); }
}

/* Hero: text sits in a band over the building at the top, so the people in the
   photo stay clear. On tablets and phones the text goes above the full photo. */
.hero { min-height: clamp(560px, 84vh, 900px); min-height: clamp(560px, 84dvh, 900px); }
.hero-media img { object-position: center 72%; }
.hero-overlay {
  align-items: flex-start; padding-top: clamp(40px, 7vh, 88px); padding-bottom: 0;
  background: linear-gradient(180deg, rgba(20, 24, 80, 0.92) 0%, rgba(20, 24, 80, 0.78) 26%,
              rgba(20, 24, 80, 0.35) 46%, rgba(20, 24, 80, 0) 62%);
}
.hero-content { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-5) var(--space-7); align-items: end; }
.hero h1 { max-width: 15ch; }
.hero-lede { margin-top: 0; }
/* Desktop: split hero, text on a navy panel and the photo uncovered beside it,
   so no face in any hero photo is ever under the text. */
@media (min-width: 961px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); min-height: clamp(560px, 78vh, 840px); min-height: clamp(560px, 78dvh, 840px); }
  .hero-overlay { grid-area: auto; grid-column: 1; grid-row: 1; background: var(--blue-950); align-items: center; padding-block: var(--space-7) calc(var(--space-7) + 40px); }
  .hero-media { grid-area: auto; grid-column: 2; grid-row: 1; }
  .hero-media img { object-position: center 35%; }
  .hero-overlay .wrap { max-width: 640px; margin-left: auto; margin-right: 0; padding-right: clamp(1.5rem, 3vw, 3rem); }
  .hero .hero-overlay .hero-content { grid-template-columns: 1fr; gap: var(--space-5); align-items: start; }
  .hero .hero-overlay h1 { font-size: clamp(2.2rem, 1.3rem + 2vw, 3.4rem); max-width: 16ch; }
  .hero .hero-overlay .hero-lede { font-size: var(--text-base); max-width: 46ch; }
}

@media (max-width: 960px) {
  .hero { display: flex; flex-direction: column; min-height: 0; }
  .hero-overlay { order: 1; background: var(--blue-950); padding-block: var(--space-7) var(--space-6); }
  .hero-media { order: 2; }
  .hero-media picture, .hero-media img { height: auto; aspect-ratio: 16 / 9; }
  .hero-content { grid-template-columns: 1fr; }
}

/* =====================================================================
   Sacred layer (2026-10-19). Why and how: Research/SACRED_DESIGN_DIRECTION.md
   Classical serif for headings and scripture, warm parchment and stone,
   logo blue and crimson, fine gold rules and a cross ornament.
   ===================================================================== */
:root {
  --paper: #faf7f0;
  --tint: #f2ede2;
  --line: #e4dccb;
  --card: #fffdf9;
  --ink: #1a1d3a;
  --ink-soft: #4d4f68;
  --gold: #b39a62;
  --gold-light: #d8c79c;
  --red-600: #b3191f;
  --font-serif: "Cormorant Garamond", "Noto Serif TC", Georgia, "Times New Roman", serif;
  --font-sans: "Source Sans 3", "Noto Sans TC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 6px;
  --radius-small: 4px;
  --shadow-1: 0 1px 0 rgba(26, 29, 58, 0.04);
  --shadow-2: 0 14px 34px rgba(26, 29, 58, 0.10);
}
body { font-family: var(--font-sans); line-height: 1.65; }
:lang(zh-Hant) body, body:lang(zh-Hant) { font-family: "Noto Sans TC", "Source Sans 3", system-ui, sans-serif; }
.eyebrow, .place-tag, .card-meta, .event-mon, .person-place { font-family: var(--font-sans); }

/* Serif headings */
h1, h2, .quote blockquote p, .place h3, .person h3, .trust-text strong, .tl-year, .event-day,
.card-body h2, .card-body h3, .faq summary, .link-cards strong, .footer-brand {
  font-family: var(--font-serif); letter-spacing: 0;
}
h1, h2 { font-weight: 600; }
.hero h1, .page-hero h1 { font-size: clamp(2.5rem, 1.7rem + 3.2vw, 4.6rem); font-weight: 600; line-height: 1.04; }
.section-head h2, .split h2, .cta-band h2 { font-size: clamp(2.1rem, 1.6rem + 1.8vw, 3.2rem); font-weight: 600; line-height: 1.08; }
.h-small, .news-list h2 { font-family: var(--font-serif); font-size: clamp(1.6rem, 1.35rem + 0.9vw, 2rem); font-weight: 600; }
.place h3, .person h3 { font-size: clamp(1.6rem, 1.35rem + 0.9vw, 2rem); font-weight: 600; }
.card-body h2, .card-body h3, .event-body h3 { font-size: clamp(1.35rem, 1.2rem + 0.5vw, 1.6rem); font-weight: 700; line-height: 1.2; }
.event-body h3 { font-family: var(--font-serif); }
.faq summary { font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.55rem); font-weight: 600; }
.trust-text strong { font-size: clamp(1.35rem, 1.2rem + 0.5vw, 1.6rem); font-weight: 700; }
.tl-year { font-size: 1.6rem; font-weight: 700; }
.event-day { font-size: 2.3rem; font-weight: 700; }
.num { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 1.3rem; letter-spacing: 0; }
:lang(zh-Hant) .hero h1, :lang(zh-Hant) .page-hero h1 { font-size: clamp(2rem, 1.5rem + 2.4vw, 3.6rem); font-weight: 700; line-height: 1.3; letter-spacing: 0.04em; }
:lang(zh-Hant) .section-head h2, :lang(zh-Hant) .split h2, :lang(zh-Hant) .cta-band h2 { font-size: clamp(1.7rem, 1.35rem + 1.3vw, 2.5rem); font-weight: 700; line-height: 1.35; }
:lang(zh-Hant) .card-body h2, :lang(zh-Hant) .card-body h3, :lang(zh-Hant) .place h3, :lang(zh-Hant) .person h3,
:lang(zh-Hant) .faq summary, :lang(zh-Hant) .h-small { font-weight: 700; }

/* Ornament: a small cross between fine gold rules */
.ornament { display: flex; align-items: center; gap: 10px; color: var(--gold); margin: -2px 0 var(--space-4); }
.ornament-rule { display: block; width: 28px; height: 1px; background: currentColor; }
.ornament svg { flex: none; }
.ornament-light { color: var(--gold-light); }
.section-head .ornament { grid-column: 1; }
.section-head .more { grid-row: 1 / span 4; }

/* Scripture */
.scripture-band { padding-block: calc(var(--space-8) + 8px) var(--space-7); text-align: center; }
.scripture-band .ornament { justify-content: center; color: var(--gold); margin: 0 0 var(--space-5); }
.scripture { margin: 0; }
.scripture blockquote { margin: 0; }
.scripture blockquote p {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.7rem, 1.25rem + 1.7vw, 2.7rem); line-height: 1.28; color: var(--ink);
}
.scripture figcaption, .verse figcaption {
  margin-top: var(--space-4); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--color-accent);
}
.verse { margin: var(--space-6) 0 0; padding: var(--space-2) 0 var(--space-2) var(--space-5); border-left: 2px solid var(--gold); font-style: normal; color: inherit; }
.verse blockquote { margin: 0; }
.verse blockquote p { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: var(--text-xl); line-height: 1.4; color: var(--ink); }
.verse figcaption { margin-top: var(--space-2); }
:lang(zh-Hant) .scripture blockquote p, :lang(zh-Hant) .verse blockquote p, :lang(zh-Hant) .quote blockquote p { font-style: normal; letter-spacing: 0.04em; }
:lang(zh-Hant) .scripture blockquote p { font-size: clamp(1.45rem, 1.1rem + 1.3vw, 2.1rem); line-height: 1.6; }
:lang(zh-Hant) .scripture figcaption, :lang(zh-Hant) .verse figcaption { letter-spacing: 0.1em; }

/* Rev. Kim's words */
.quote blockquote p { font-style: italic; font-weight: 500; font-size: clamp(1.55rem, 1.2rem + 1.3vw, 2.2rem); line-height: 1.32; }
:lang(zh-Hant) .quote blockquote p { font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem); line-height: 1.75; }
.quote-photo img { border-color: var(--paper); box-shadow: 0 0 0 1px var(--gold), 0 10px 30px rgba(26, 29, 58, 0.14); }

/* Restraint: squarer buttons, warm surfaces, fine borders */
.btn { border-radius: var(--radius-small); letter-spacing: 0.03em; font-weight: 600; }
.card, .place, .person, .event, .link-cards a, .notice, .trust { background: var(--card); border-color: var(--line); }
.place-focus { background: var(--color-brand); border-color: var(--color-brand); }
.person { border-top: 2px solid var(--gold); }
.notice { border-left-color: var(--gold); }
.timeline li::before { border-color: var(--gold); }
.prose ul li::before { background: var(--gold); }
.event-badge { background: var(--tint); }
.site-header { background: rgba(250, 247, 240, 0.97); border-bottom-color: var(--line); }
.site-header.is-scrolled { background: rgba(250, 247, 240, 0.93); }
.site-nav a:not(.btn) { font-weight: 600; letter-spacing: 0.01em; }
.site-footer { box-shadow: inset 0 3px 0 var(--gold); }
.cta-band { box-shadow: inset 0 1px 0 var(--gold); }
.hero-overlay .ornament { margin-top: -4px; }
.hero h1 { font-size: clamp(2.2rem, 1.4rem + 2.1vw, 3.3rem); max-width: none; }
.hero-content { grid-template-columns: 1.3fr 1fr; }
.scripture-band { padding-bottom: 0; }
@media (max-width: 640px) {
  .section-head .more { grid-row: auto; }
}
/* Giving is the one action that gets the logo's red, everywhere on the site */
:is(.site-header, .hero, .cta-band, main) a.btn:is([href$="/give/"], [href^="mailto:"][href*="Giving"]) {
  background: var(--red-600); border-color: var(--red-600); color: var(--white);
}
:is(.site-header, .hero, .cta-band, main) a.btn:is([href$="/give/"], [href^="mailto:"][href*="Giving"]):hover {
  background: #8f1419; border-color: #8f1419;
}
/* Leaders with photos */
.person { text-align: left; }
.person-photo {
  width: 112px; height: 112px; border-radius: 50%; overflow: hidden; margin-bottom: var(--space-4);
  box-shadow: 0 0 0 3px var(--card), 0 0 0 4px var(--gold);
}
.person-photo picture, .person-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.person-initials { display: grid; place-items: center; background: var(--color-brand); color: var(--white); }
.person-initials span { font-family: var(--font-serif); font-size: 2.1rem; font-weight: 600; letter-spacing: 0.04em; }
.people-big .person-photo { width: 144px; height: 144px; }

/* Impact note and what gifts build */
.trust-note { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--color-text-soft); text-align: right; }
.amounts { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); }
.amounts li {
  display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5);
  background: var(--card); border: 1px solid var(--line); border-top: 2px solid var(--gold); border-radius: var(--radius);
}
.amounts strong { font-family: var(--font-serif); font-size: clamp(1.6rem, 1.3rem + 0.8vw, 2rem); font-weight: 700; color: var(--color-brand); font-variant-numeric: lining-nums; line-height: 1.1; }
.amounts span { font-size: var(--text-sm); color: var(--color-text-soft); }
.amount-icon { width: 26px; height: 26px; color: var(--gold); }
.amounts-wrap { margin-top: var(--space-6); }

/* Ways to give */
.methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.method { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.method h3 { font-family: var(--font-serif); font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.7rem); font-weight: 700; }
.method p { color: var(--color-text-soft); overflow-wrap: anywhere; }
.method strong { color: var(--color-text); }
.method a { color: var(--color-brand); font-weight: 600; }
.method-icon { width: 32px; height: 32px; color: var(--color-brand); }
.give-note { margin-top: var(--space-5); color: var(--color-text-soft); max-width: 75ch; }
.give-note a { color: var(--color-brand); font-weight: 600; }

/* Latest video: a branded panel that loads the video only on play */
.video-card { margin: 0; }
.video-facade, .video-player {
  display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); border: 0;
}
.video-facade {
  position: relative; cursor: pointer; overflow: hidden; color: var(--white); text-align: left;
  background: radial-gradient(120% 90% at 85% 10%, var(--blue-800) 0%, var(--blue-950) 70%);
  box-shadow: inset 0 0 0 1px rgba(204, 216, 156, 0.35);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.video-facade:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--sage), var(--shadow-2); }
.video-play {
  position: absolute; left: 50%; top: 45%; translate: -50% -50%;
  display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%;
  background: var(--red-600); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.video-play .icon { width: 30px; height: 30px; fill: var(--white); stroke: var(--white); margin-left: 4px; }
.video-title { position: absolute; left: var(--space-5); right: var(--space-5); bottom: var(--space-6); font-family: var(--font-serif); font-size: clamp(1.25rem, 1rem + 0.8vw, 1.6rem); font-weight: 600; line-height: 1.2; }
.video-meta { position: absolute; left: var(--space-5); bottom: var(--space-4); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage); }
.video-player { background: #000; }
@media (max-width: 640px) {
  .video-play { top: 36%; width: 60px; height: 60px; }
  .video-play .icon { width: 24px; height: 24px; }
  .video-title { bottom: calc(var(--space-6) + 2px); font-size: 1.15rem; }
}
.video-card figcaption { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-text-soft); }
.video-card figcaption a { color: var(--color-brand); font-weight: 600; }

/* Team list and mission statement */
.team-group { padding: var(--space-5) 0; border-bottom: 1px solid var(--line); }
.team-group:first-child { padding-top: 0; }
.team-group .h-small { margin: 0 0 var(--space-3); }
.team-names { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.team-names li { padding: var(--space-2) var(--space-4); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-small); font-weight: 600; }
.mission-title { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 3rem); font-weight: 600; line-height: 1.2; max-width: 26ch; }
:lang(zh-Hant) .mission-title { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem); line-height: 1.5; letter-spacing: 0.04em; }

/* Contact list */
.contact-list { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
.contact-list li { display: flex; align-items: center; gap: var(--space-3); }
.contact-list .icon { color: var(--color-brand); width: 20px; height: 20px; }
.contact-list a { color: var(--color-brand); font-weight: 600; min-height: 32px; display: inline-flex; align-items: center; }

@media (max-width: 1080px) {
  .amounts { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
  .methods { grid-template-columns: 1fr; }
  .amounts { grid-template-columns: 1fr 1fr; }
  .trust-note { text-align: left; }
}
@media (max-width: 640px) {
  .amounts { grid-template-columns: 1fr; }
  .people .person:first-child { grid-column: auto; }
}

/* One gentle, warm tone across documentary photos taken in different light */
.card-img, .photo img, .gallery img, .page-hero-media img, .photo-row img { filter: saturate(0.94) sepia(0.06) contrast(1.02); }
.scripture-link, .quote-link { margin-top: var(--space-4); }
.scripture-link .more { justify-content: center; }
/* Blocks sliding in from the side must never create a sideways scroll */
html, body { overflow-x: clip; }
/* Cormorant's default figures sit low; use lining figures for dates and numbers */
.trust-text strong, .tl-year, .event-day, .num, h1, h2, h3 { font-variant-numeric: lining-nums; }

/* =====================================================================
   Logo palette (2026-10-20). Colours sampled from UVM's own logo:
   blue #186096 (continents, wordmark), red #ba1e2a (cross, lettering),
   sage #ccd89c (the globe). Replaces the navy and gold of the old logo.
   ===================================================================== */
:root {
  --blue-950: #0c3654;
  --blue-900: #10456c;
  --blue-800: #145482;
  --blue-700: #186096;
  --blue-200: #c4dcec;
  --blue-100: #e4eef6;
  --red-600: #ba1e2a;
  --red-500: #ba1e2a;
  --sage: #ccd89c;
  --sage-dark: #97a35a;
  --gold: var(--sage-dark);
  --gold-light: var(--sage);
  --tint: #f1f3e5;
  --line: #e1e3cf;
  --ink: #15263a;
  --ink-soft: #4a5764;
  --color-brand-hover: var(--blue-900);
}
.utility { color: #d3e3ef; }
.hero-lede { color: #e3eef6; }
.place-focus p, .place-focus .place-tag { color: #dbe9f3; }
.place-focus .num { color: #ffd6d9; }
.site-footer { color: #cddfec; }
.footer-legal { color: #a9c3d6; }
.lightbox { background: rgba(8, 32, 50, 0.95); }
.lightbox::backdrop { background: rgba(8, 32, 50, 0.6); }
:is(.site-header, .hero, .cta-band, main) a.btn:is([href$="/give/"], [href^="mailto:"][href*="Giving"]):hover { background: #961822; border-color: #961822; }

/* Hero text is always one column: on desktop it sits on the navy panel beside the photo,
   on tablets and phones above it. Overrides the older two-column overlay rule. */
.hero .hero-overlay .hero-content { grid-template-columns: 1fr; gap: var(--space-5); align-items: start; }

/* UVM's logo: full logo with wordmark on larger screens, the globe alone on phones */
.brand-logo { height: 52px; width: auto; }
.site-header.is-scrolled .brand-logo { transform: scale(0.88); }
.footer-logo { width: 240px; height: auto; background: var(--white); border-radius: var(--radius-small); padding: 10px 14px; box-sizing: content-box; }
@media (max-width: 640px) {
  .brand-logo { height: 54px; }
}

/* =====================================================================
   Modern, young and energetic, still sacred (Chris, 2026-10-20).
   Confident scale, real people up front, lively but brief motion.
   No corporate patterns (icons on cards, tag chips, stat bars with icons)
   and nothing old fashioned.
   ===================================================================== */
:root { --radius: 10px; --radius-small: 6px; }

/* Bigger, more confident headlines */
.hero h1 { font-size: clamp(2.3rem, 1.3rem + 2.3vw, 3.5rem); line-height: 1.04; letter-spacing: -0.01em; }
.section-head h2, .split h2, .cta-band h2 { font-size: clamp(2.3rem, 1.5rem + 2.5vw, 3.7rem); line-height: 1.02; letter-spacing: -0.01em; }
:lang(zh-Hant) .section-head h2, :lang(zh-Hant) .split h2, :lang(zh-Hant) .cta-band h2 { letter-spacing: 0.02em; }

/* The hero photo settles slowly into place */
@keyframes uvm-settle { from { transform: scale(1.07); } to { transform: scale(1); } }
.hero-media img { animation: uvm-settle 12s cubic-bezier(0.16, 1, 0.3, 1) both; transform-origin: 55% 40%; }

/* Figures: large numerals, no icons */
.trust a, .trust li > div { padding: var(--space-5) var(--space-6); }
.trust-text strong { font-size: clamp(2.1rem, 1.5rem + 1.6vw, 3rem); font-weight: 700; line-height: 1.02; }
.trust-text span { margin-top: var(--space-1); }
.trust-text strong { font-variant-numeric: lining-nums tabular-nums; }

/* Buttons and links answer the pointer */
.btn { transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1), background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.98); }
.more .icon { transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.more:hover .icon, a:hover > .more .icon, .is-linked:hover .more .icon { transform: translateX(5px); }
.is-linked:hover { border-color: var(--blue-200); box-shadow: 0 18px 40px rgba(12, 54, 84, 0.14); }
.is-linked:hover .card-img { transform: scale(1.06); }

/* Feature band: deep blue text panel beside a photo, so no one is covered */
.feature-band { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: var(--blue-950); color: var(--white); }
.feature-band-text { display: flex; flex-direction: column; justify-content: center; padding: clamp(3rem, 6vw, 6rem) clamp(1.5rem, 5vw, 5rem); }
.feature-band .ornament { margin-bottom: var(--space-5); }
.feature-band .scripture blockquote p { color: var(--white); font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.5rem); line-height: 1.22; }
:lang(zh-Hant) .feature-band .scripture blockquote p { font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.95rem); line-height: 1.6; }
.feature-band .scripture figcaption { color: var(--sage); }
.feature-band-copy { margin-top: var(--space-5); max-width: 46ch; color: #dbe9f3; font-size: var(--text-lg); }
.feature-band .more { margin-top: var(--space-4); color: var(--white); }
.feature-band-media { position: relative; min-height: 460px; overflow: hidden; }
.feature-band-media picture, .feature-band-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
@media (max-width: 960px) {
  .feature-band { grid-template-columns: 1fr; }
  .feature-band-media { min-height: 0; aspect-ratio: 3 / 2; }
}

/* Closing verse above the invitation on every page */
.cta-verse { margin: 0 0 var(--space-4); max-width: 46ch; }
.cta-verse blockquote { margin: 0; }
.cta-verse blockquote p { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: var(--text-lg); line-height: 1.45; color: #e3eef6; }
:lang(zh-Hant) .cta-verse blockquote p { font-style: normal; letter-spacing: 0.04em; }
.cta-verse figcaption { margin-top: var(--space-2); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #d8e2ae; }

/* Giving methods numbered like the ministries, no icons */
.methods { counter-reset: method; }
.method::before { counter-increment: method; content: "0" counter(method); font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 1.3rem; color: var(--color-accent); }

/* Team: a clean list of names, not tag chips */
.team-names { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0 var(--space-5); }
.team-names li { padding: var(--space-3) 0; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; font-family: var(--font-serif); font-size: 1.4rem; font-weight: 600; color: var(--ink); }
:lang(zh-Hant) .team-names li { font-size: 1.2rem; font-weight: 700; letter-spacing: 0.04em; }

/* Headlines wrap in balanced lines; .nw keeps a place name on one line */
.hero h1 { text-wrap: balance; }
.nw { white-space: nowrap; }

/* Hero photo: young believers in worship, faces kept in frame at every size */
.hero-media img { object-position: 52% 22%; }
/* Figures sit below the hero instead of over the photo */
.hero-overlay { padding-bottom: var(--space-8); }
.trust-wrap { margin-top: var(--space-6); }
@media (max-width: 640px) { .trust-wrap { margin-top: var(--space-5); } }

/* Mission strategy: four big numerals, no boxes */
.strategy-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.strategy-list li { padding-top: var(--space-4); border-top: 2px solid var(--gold); }
.strategy-num { display: block; margin-bottom: var(--space-3); font-family: var(--font-serif); font-weight: 600; font-size: clamp(3rem, 2.2rem + 2.4vw, 4.6rem); line-height: 1; color: var(--color-accent); font-variant-numeric: lining-nums; }
.strategy-list h3 { margin-bottom: var(--space-3); font-family: var(--font-serif); font-size: clamp(1.45rem, 1.2rem + 0.7vw, 1.8rem); font-weight: 600; line-height: 1.15; }
.strategy-list p { color: var(--color-text-soft); }
.strategy-section { background: var(--blue-950); color: var(--white); }
.strategy-section h2, .strategy-section h3 { color: var(--white); }
.strategy-section .ornament { color: var(--gold-light); }
.strategy-section .strategy-num { color: var(--sage); }
.strategy-section .strategy-list li { border-top-color: rgba(204, 216, 156, 0.45); }
.strategy-section .strategy-list p { color: #c9dcea; }
.strategy-section .more { color: var(--white); }
@media (max-width: 960px) { .strategy-list { grid-template-columns: 1fr 1fr; } }

/* What a gift builds: one rising line from US$10,000 to US$100,000 */
.amounts { gap: 0; }
.amounts li { position: relative; padding: var(--space-5) var(--space-4) 0 0; background: none; border: 0; border-top: 3px solid var(--sage); border-radius: 0; }
.amounts li::before { content: ""; position: absolute; top: -9px; left: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--color-brand); }
.amounts li:nth-child(1) strong { font-size: clamp(1.6rem, 1.3rem + 0.6vw, 1.85rem); }
.amounts li:nth-child(2) strong { font-size: clamp(1.7rem, 1.35rem + 0.8vw, 2.05rem); }
.amounts li:nth-child(3) strong { font-size: clamp(1.8rem, 1.4rem + 1vw, 2.25rem); }
.amounts li:nth-child(4) strong { font-size: clamp(1.9rem, 1.45rem + 1.2vw, 2.45rem); }
.amounts li:nth-child(5) strong { font-size: clamp(2rem, 1.5rem + 1.4vw, 2.7rem); }
@media (max-width: 1080px) { .amounts { row-gap: var(--space-6); } }
@media (max-width: 640px) {
  .amounts { row-gap: 0; }
  .amounts li { padding: 0 0 var(--space-5) var(--space-5); border-top: 0; border-left: 3px solid var(--sage); }
  .amounts li::before { top: 6px; left: -9px; }
}

/* Tablets: the US card across the top, the other three fields in one row */
@media (min-width: 641px) and (max-width: 960px) {
  .place-grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .place-grid-4 .place-focus { grid-column: 1 / -1; }
}

/* Phones: long homepage rows become swipe rows, the next card peeking in */
@media (max-width: 640px) {
  .swipe {
    display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%;
    gap: var(--space-4); overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1); padding: var(--space-1) var(--gutter) var(--space-4);
    scrollbar-width: none;
  }
  .swipe::-webkit-scrollbar { display: none; }
  .swipe > li { scroll-snap-align: start; min-width: 0; }
  .swipe.place-grid-4 .place-focus { grid-column: auto; }
}

/* Video cover: a real frame from the video, darkened at the foot for the title */
.video-facade picture { position: absolute; inset: 0; }
.video-facade .video-cover { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform 600ms var(--ease-out); }
.video-facade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 54, 84, 0) 35%, rgba(12, 54, 84, 0.55) 62%, rgba(8, 32, 50, 0.92) 100%); }
.video-facade:hover .video-cover { transform: scale(1.04); }
.video-play, .video-title, .video-meta { z-index: 1; }

/* Leader biography: portrait beside the text */
.bio { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: var(--space-7); align-items: start; margin-top: var(--space-8); padding-top: var(--space-7); border-top: 1px solid var(--line); }
.bio-photo picture, .bio-photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; border-radius: var(--radius); }
.bio-text h3 { margin-bottom: var(--space-4); font-family: var(--font-serif); font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.5rem); font-weight: 600; line-height: 1.1; }
.bio-text .prose p { max-width: 68ch; }
@media (max-width: 760px) { .bio { grid-template-columns: 1fr; gap: var(--space-5); } .bio-photo { max-width: 280px; } }

/* Education: the three schools, details to come */
.edu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.edu-grid > li { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--color-brand); border-radius: var(--radius); }
.edu-grid h3 { font-family: var(--font-serif); font-size: clamp(1.5rem, 1.25rem + 0.7vw, 1.9rem); font-weight: 600; line-height: 1.15; }
.edu-grid p { color: var(--color-text-soft); }
.edu-where { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent) !important; }
.soon { margin-top: auto; padding-top: var(--space-3); font-family: var(--font-serif); font-style: italic; font-size: var(--text-lg); color: var(--blue-700) !important; }
:lang(zh-Hant) .soon { font-style: normal; }
.soon-note { margin-top: var(--space-6); }
.soon-note .soon { margin: 0 0 var(--space-2); padding: 0; }
.page-link { margin-top: var(--space-5); }
@media (max-width: 960px) { .edu-grid { grid-template-columns: 1fr; } }

/* US program: three programs, each with its goal and planned activities */
.program-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.program { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--color-brand); border-radius: var(--radius); }
.program .strategy-num { font-size: clamp(2.4rem, 2rem + 1.2vw, 3.2rem); }
.program h3 { font-family: var(--font-serif); font-size: clamp(1.45rem, 1.2rem + 0.7vw, 1.8rem); font-weight: 600; line-height: 1.15; }
.program-goal { font-weight: 600; color: var(--ink); }
.program ul { display: grid; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.program ul li { position: relative; padding-left: var(--space-5); color: var(--color-text-soft); font-size: var(--text-sm); }
.program ul li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 7px; height: 7px; border-radius: 50%; background: var(--sage-dark); }
@media (max-width: 960px) { .program-grid { grid-template-columns: 1fr; } }

/* Eight menu items: labels never wrap; on mid-size screens the spacing and logo tighten
   until the phone menu takes over at 960px */
.site-nav a:not(.btn) { white-space: nowrap; }
@media (min-width: 961px) and (max-width: 1200px) {
  .site-nav { gap: var(--space-3); }
  .site-nav a:not(.btn) { font-size: 0.84rem; letter-spacing: 0; }
  .brand-logo { height: 40px; }
  .header-inner { gap: var(--space-3); }
}

/* Keyboard focus: logo blue on light surfaces, white on dark ones. Red stays for giving. */
:root { --focus: var(--blue-700); }
.feature-band, .strategy-section { --focus: #ffffff; }

/* Copy button beside the Zelle email */
.copy-btn {
  display: inline-flex; align-items: center; min-height: 32px; margin-left: var(--space-2); padding: 2px var(--space-3);
  border: 1px solid var(--blue-200); border-radius: var(--radius-small); background: var(--blue-100); color: var(--blue-900);
  font: 600 var(--text-sm)/1.2 var(--font-sans); cursor: pointer; vertical-align: middle;
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.copy-btn:hover { background: var(--blue-200); }
.copy-btn.is-done { background: var(--tint); border-color: var(--sage-dark); color: var(--ink); }
.copy-btn[hidden] { display: none; }

/* The play button breathes, so the video reads as alive */
@keyframes uvm-pulse { 0% { box-shadow: 0 0 0 0 rgba(186, 30, 42, 0.55); } 70%, 100% { box-shadow: 0 0 0 20px rgba(186, 30, 42, 0); } }
.video-play { animation: uvm-pulse 2.6s ease-out infinite; }
.video-facade:hover .video-play { transform: scale(1.08); }
.video-play { transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1); }

/* =====================================================================
   Bright palette (Chris, 2026-10-28: the warm parchment "feels old yellowish",
   make it "clean and holy bright"). White pages, light sky blue tints from the
   logo blue, cool hairlines, photos in their natural colour. The sage and gold
   variables keep their names but now hold light logo blues, so every rule that
   used them turns bright without being rewritten.
   ===================================================================== */
:root {
  --paper: #ffffff;
  --card: #ffffff;
  --tint: #f2f7fc;
  --line: #dde7f0;
  --sage: #a8cbe8;
  --sage-dark: #4f88b8;
  --gold: #7aa8cf;
  --gold-light: #b9d6ee;
  --ink: #14243a;
  --ink-soft: #4a5868;
}
.site-header { background: rgba(255, 255, 255, 0.97); }
.site-header.is-scrolled { background: rgba(255, 255, 255, 0.94); }
.card-img, .photo img, .gallery img, .page-hero-media img, .photo-row img { filter: none; }
.cta-verse figcaption { color: #cfe3f5; }
/* Scripture sits in a soft light from above */
.scripture-band { background: radial-gradient(120% 100% at 50% 0%, #ffffff 0%, #f5f9fd 50%, #eaf3fb 100%); }
.scripture-band + .section { border-top: 1px solid var(--line); }
/* Bright bands: the logo's own blue in a soft gradient instead of near black navy.
   Small text on them is lifted to near white so it keeps 4.5:1 contrast. */
:root { --band: linear-gradient(160deg, #1f6fab 0%, #186096 55%, #14527f 100%); }
.hero, .hero .hero-overlay, .feature-band, .strategy-section { background: var(--band); }
.hero .eyebrow-light, .feature-band .eyebrow-light, .strategy-section .eyebrow-light { color: #eaf3fa; }
.hero-lede, .feature-band-copy, .strategy-section .strategy-list p { color: #f2f7fc; }
.feature-band .scripture figcaption { color: #eaf3fa; }

/* =====================================================================
   Apple style (Chris, 2026-10-28: "still does not feel clean and 高级",
   "anyway we can integrate apple's design?"). Patterns only, with UVM's own
   content, photos, logo and colours: a thin frosted menu bar, a centred hero
   over a full width photo, big sans headlines with one grey line under them,
   pill buttons, white and light grey sections, rounded borderless tiles and a
   light grey footer. The serif stays for scripture only; the cross appears
   once, in the scripture band. Red stays for Give only.
   ===================================================================== */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --font-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --font-scripture: "Cormorant Garamond", "Noto Serif TC", Georgia, serif;
  --ink: #1d1d1f;
  --ink-soft: #6e6e73;
  --color-text: #1d1d1f;
  --color-text-soft: #6e6e73;
  --tint: #f5f5f7;
  --line: #e5e5ea;
  --card: #f5f5f7;
  --radius: 22px;
  --header-h: 56px;
  --apple-gap: clamp(72px, 9vw, 128px);
}
body { font-family: var(--font-sans); font-size: 17px; line-height: 1.47; letter-spacing: -0.022em; color: var(--ink); background: #fff; }
:lang(zh-Hant) body, body:lang(zh-Hant) { font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Inter", "Noto Sans TC", "Microsoft JhengHei", sans-serif; letter-spacing: 0.01em; }
h1, h2, h3 { font-weight: 600; }
.num, .card-body h3, .place h3, .person h3, .faq summary, .h-small { font-style: normal; }
/* Scripture keeps its serif, the one sacred voice on the page */
.scripture blockquote p, .verse blockquote p, .cta-verse blockquote p, .quote blockquote p { font-family: var(--font-scripture); }

/* Menu bar: thin, frosted, centred links */
.site-header { background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(0, 0, 0, 0.08); box-shadow: none; }
.site-header.is-scrolled { background: rgba(255, 255, 255, 0.82); }
.header-inner { min-height: var(--header-h); }
.brand-logo { height: 34px; }
.site-header.is-scrolled .brand-logo { transform: none; }
.site-nav { gap: clamp(14px, 1.8vw, 28px); }
.site-nav a:not(.btn) { font-size: 13px; font-weight: 400; letter-spacing: -0.01em; color: rgba(29, 29, 31, 0.8); border-bottom: 0; padding-block: 8px; }
.site-nav a:not(.btn):hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom: 0; }
.lang-header { gap: 6px; font-size: 12px; }
.lang-header a { padding: 6px 2px; color: rgba(29, 29, 31, 0.65); font-weight: 500; text-decoration: none; }
.lang-header a[aria-current="true"] { color: var(--ink); font-weight: 600; text-decoration: none; }
.lang-header span { color: rgba(29, 29, 31, 0.3); opacity: 1; }
@media (min-width: 961px) {
  .site-nav { order: 1; margin-inline: auto; }
  .lang-header { order: 2; }
  .site-nav .nav-give { margin-left: 6px; }
}
@media (max-width: 960px) {
  .lang-header { margin-left: auto; }
  .site-nav { background: #fff; }
  .site-nav a:not(.btn) { font-size: 17px; color: var(--ink); }
  .brand-logo { height: 40px; }
}

/* Pill buttons */
.btn { border-radius: 980px; font-size: 17px; font-weight: 400; letter-spacing: -0.022em; min-height: 44px; padding: 0 22px; border-width: 1px; box-shadow: none; }
.btn:hover { transform: none; filter: brightness(1.06); }
.btn:active { transform: scale(0.98); }
.btn-small { min-height: 30px; padding: 0 14px; font-size: 13px; }
.btn-ghost, .btn-ghost:hover { background: transparent; border-color: var(--color-brand); color: var(--color-brand); }
.btn-ghost:hover { background: rgba(24, 96, 150, 0.06); filter: none; }
.more { font-weight: 400; font-size: 17px; color: var(--color-brand); }

/* Hero: centred headline over a full width photo */
.hero, .hero .hero-overlay { background: #fff; }
.hero { display: flex; flex-direction: column; min-height: 0; color: var(--ink); }
.hero .hero-overlay { order: 0; position: static; display: block; padding: clamp(56px, 7vw, 96px) 0 clamp(36px, 4vw, 52px); text-align: center; }
.hero .hero-content { display: block; max-width: 1000px; margin-inline: auto; }
.hero .eyebrow, .hero .ornament { display: none; }
.hero h1 { max-width: 16ch; margin-inline: auto; color: var(--ink); font-size: clamp(2.6rem, 1.5rem + 4.2vw, 5rem); line-height: 1.04; font-weight: 700; letter-spacing: -0.028em; text-wrap: balance; }
.hero .hero-lede { max-width: 40ch; margin: 18px auto 0; color: var(--ink-soft); font-size: clamp(1.15rem, 1rem + 0.7vw, 1.6rem); line-height: 1.3; letter-spacing: -0.01em; }
.hero .hero-actions { justify-content: center; margin-top: 28px; }
.hero .hero-media { order: 1; width: 100%; height: clamp(320px, 54vw, 760px); }
.hero .hero-media picture, .hero .hero-media img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 52% 22%; }

/* Figures: plain numbers, no box */
.trust-wrap { margin-top: 0; padding-block: clamp(40px, 5vw, 72px) 0; background: #fff; }
.trust { background: none; border: 0; border-radius: 0; box-shadow: none; }
.trust li + li { border-left: 1px solid var(--line); }
.trust a, .trust li > div { justify-content: center; text-align: center; }
.trust a:hover { background: transparent; }
.trust-text { align-items: center; }
.trust-text strong { color: var(--ink); font-weight: 600; font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.8rem); letter-spacing: -0.02em; white-space: nowrap; }
.trust-text span { color: var(--ink-soft); }
.trust-note { text-align: center; color: var(--ink-soft); }

/* Sections: generous space, centred heads, no ornaments or labels */
.section { padding-block: var(--apple-gap); }
.section-tint { background: #f5f5f7; }
.ornament, .eyebrow, .num, .method::before { display: none; }
.scripture-band .ornament { display: flex; }
.bio-text .eyebrow { display: block; color: var(--ink-soft); font-family: var(--font-sans); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.section-head { display: block; max-width: 860px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.section-head h2 { font-size: clamp(2.2rem, 1.4rem + 2.8vw, 3.6rem); font-weight: 700; line-height: 1.06; letter-spacing: -0.025em; }
.section-head .lede { max-width: 46ch; margin: 14px auto 0; color: var(--ink-soft); font-size: clamp(1.1rem, 1rem + 0.45vw, 1.35rem); }
.section-head .more { margin-top: 16px; }
.split h2, .feature-band h2, .cta-band h2, .mission-title { font-weight: 700; letter-spacing: -0.022em; }
.page-hero { background: #fff; border-bottom: 0; padding-block: clamp(56px, 7vw, 96px) clamp(36px, 4vw, 56px); }
.page-hero h1 { font-size: clamp(2.4rem, 1.5rem + 3.4vw, 4.2rem); font-weight: 700; letter-spacing: -0.026em; line-height: 1.05; }
.page-hero .lede, .page-hero p { color: var(--ink-soft); }

/* Tiles: rounded, borderless, light grey on white and white on grey */
.card, .place, .person, .event, .link-cards a, .notice, .method, .edu-grid > li, .program, .team-group { border: 0; box-shadow: none; border-radius: var(--radius); }
.card, .place, .person, .event, .link-cards a, .notice, .method, .edu-grid > li, .program { background: #f5f5f7; }
.section-tint :is(.card, .place, .person, .event, .link-cards a, .notice, .method, .edu-grid > li, .program) { background: #fff; }
.team-group { background: none; border-radius: 0; border-bottom: 1px solid var(--line); }
.place-focus { background: var(--color-brand); }
.is-linked:hover { transform: none; box-shadow: none; }
.is-linked:hover .card-img { transform: scale(1.03); }
.link-cards a:hover { transform: none; }
.person { text-align: center; }
.person-photo { margin-inline: auto; box-shadow: none; }
.person-initials { background: var(--color-brand); }
.place-tag, .edu-where, .person-place, .card-meta { color: var(--ink-soft) !important; letter-spacing: 0.04em; }
.notice { padding: clamp(24px, 3vw, 36px); }
.soon { color: var(--color-brand) !important; font-family: var(--font-sans); font-style: normal; font-weight: 600; font-size: 15px; }
.amounts strong { color: var(--ink); font-weight: 600; letter-spacing: -0.02em; }
.amounts li::before { background: var(--ink); }
.amounts li { border-color: var(--line); }

/* Scripture: white, generous, the one serif moment */
.scripture-band { background: #fff; padding-block: var(--apple-gap); }
.scripture-band + .section { border-top: 0; }
.scripture blockquote p { color: var(--ink); font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3.1rem); line-height: 1.22; }
.scripture figcaption, .verse figcaption { color: var(--ink-soft); font-family: var(--font-sans); letter-spacing: 0.08em; }
.verse { border-left-color: var(--line); }

/* Bands become light: colour comes from the photos */
.feature-band { background: #fff; color: var(--ink); }
.feature-band .scripture blockquote p { color: var(--ink); }
.feature-band .scripture figcaption, .feature-band-copy { color: var(--ink-soft); }
.feature-band .more { color: var(--color-brand); }
.strategy-section { background: #fff; color: var(--ink); }
.strategy-section h2, .strategy-section h3 { color: var(--ink); }
.strategy-section .strategy-num { color: var(--color-brand); font-weight: 600; }
.strategy-section .strategy-list p { color: var(--ink-soft); }
.strategy-section .strategy-list li, .strategy-list li { border-top: 1px solid var(--line); }
.strategy-section .more { color: var(--color-brand); }
.cta-band { background: #fff; color: var(--ink); box-shadow: none; border-top: 1px solid var(--line); padding-block: var(--apple-gap); text-align: center; }
.cta-inner { flex-direction: column; justify-content: center; }
.cta-band h2 { max-width: 20ch; margin-inline: auto; color: var(--ink); font-size: clamp(2rem, 1.3rem + 2.4vw, 3.2rem); }
.cta-verse { margin-inline: auto; }
.cta-verse blockquote p { color: var(--ink-soft); }
.cta-verse figcaption { color: var(--ink-soft); }
.cta-actions { justify-content: center; }
.video-facade { box-shadow: none; }

/* Footer: light grey, small grey type, no plate behind the logo */
.site-footer { background: #f5f5f7; color: #6e6e73; box-shadow: none; font-size: 12px; line-height: 1.5; }
.site-footer a { color: #424245; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }
.footer-head { color: var(--ink); font-weight: 600; }
.footer-logo { width: 190px; background: none; padding: 0; border-radius: 0; }
.footer-legal { color: #6e6e73; border-top-color: #d2d2d7; }
.site-header, .hero, .cta-band, .site-footer, .feature-band, .strategy-section { --focus: var(--blue-700); }
.place-focus { --focus: #ffffff; }

.place-focus .place-tag { color: #dbe9f3 !important; }
/* Hero: left and right again (Chris, 2026-10-28), in the Apple style: text on white at the
   left, Pastor Joshua's photo filling the right half. Phones: text first, photo below. */
.hero .hero-overlay { text-align: left; }
.hero h1 { max-width: 14ch; margin-inline: 0; font-size: clamp(2.6rem, 1.4rem + 3.4vw, 4.6rem); }
.hero .hero-lede { max-width: 34ch; margin: 20px 0 0; }
.hero .hero-actions { justify-content: flex-start; }
.hero .hero-media picture, .hero .hero-media img { object-position: 46% 28%; }
@media (min-width: 961px) {
  .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(560px, 80vh, 780px); }
  .hero .hero-overlay { grid-column: 1; grid-row: 1; display: flex; align-items: center; padding-block: clamp(56px, 7vw, 104px); }
  .hero .hero-overlay .hero-content { max-width: none; margin: 0; padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); padding-right: clamp(32px, 4vw, 72px); }
  .hero .hero-media { grid-column: 2; grid-row: 1; height: auto; min-height: 100%; }
}
@media (max-width: 960px) {
  .hero .hero-overlay { padding: clamp(40px, 8vw, 64px) 0 clamp(28px, 5vw, 40px); }
  .hero .hero-media { height: auto; aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) {
  .trust { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .trust li + li, .trust li:nth-child(n + 3) { border: 0; }
  .trust a, .trust li > div { padding: 0 8px; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .is-linked:hover, .is-linked:hover .card-img, .gallery .photo-link:hover img { transform: none; }
  .site-header.is-scrolled .brand-logo { transform: none; }
}