/* 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 { 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; }
@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.4rem, 1.6rem + 2.6vw, 3.9rem); max-width: none; }
.scripture-band { padding-bottom: 0; }
@media (max-width: 640px) {
  .section-head .more { grid-row: auto; }
}
/* 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; }

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