/* =========================================================================
   v11 — Wedgwood Blue
   Concept: English reformed tradition meeting Wedgwood porcelain. Light,
   airy, devout — the blue of catechism class memories and English-village
   covenant theology. Friendly without losing solemnity.
   Palette leads with deep cathedral blue for structure; the lighter
   wedgwood blue is demoted to decorative accents; soft gold retained.
   ========================================================================= */

:root {
  /* Palette */
  --bg:          #FFFFFF;
  --bg-sub:      #ECF1F6;           /* pale wedgwood wash */
  --text:        #1A2433;           /* deep navy */
  --text-soft:   #3A4860;
  --text-mute:   #5A6478;
  --accent:      #1B3A6B;           /* cathedral blue — dominant/structural */
  --accent-soft: #4A6C8C;           /* wedgwood blue — decorative accent */
  --accent-2:    #C9A961;           /* soft gold */
  --rule:        #1B3A6B;
  --border:      rgba(27, 58, 107, 0.20);
  --bg-inverse:  #1A2433;
  --text-inverse:#ECF1F6;
  --link:        #1B3A6B;
  --link-hover:  #12294D;

  /* Typography */
  --font-ko-display: "Nanum Myeongjo", serif;
  --font-ko-body:    "Nanum Myeongjo", serif;
  --font-en-display: "Source Serif Pro", Georgia, serif;
  --font-en-body:    "EB Garamond", Georgia, "Times New Roman", serif;
  --font-mono:       ui-monospace, "SF Mono", Menlo, monospace;

  /* Scale */
  --fs-base: 1.1875rem;   /* 19px — larger for all-ages readability */
  --fs-h1:   clamp(2.25rem, 1.4rem + 3vw, 3.5rem);
  --fs-h2:   clamp(1.65rem, 1.2rem + 1.6vw, 2.25rem);
  --fs-h3:   1.35rem;
  --fs-eyebrow: 0.78rem;
  --lh-body: 1.75;
  --lh-body-ko: 1.85;
  --lh-tight: 1.3;

  /* Layout */
  --container: 1180px;
  --container-narrow: 760px;
  --container-wide: 1300px;
  --gutter: clamp(1.25rem, 3vw, 2.25rem);
  --section-y: clamp(3rem, 6vw, 5.5rem);
  --section-head-y: clamp(3.5rem, 7vw, 4rem);

  /* Motion */
  --t: 160ms ease-out;
}

/* -------------------------------------------------------------------------
   Reset + base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-en-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-weight: 500;   /* EB Garamond Medium — a touch heavier than 400 */
  font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html[lang="ko"] body {
  font-family: var(--font-ko-body);
  /* Nanum Myeongjo has no 500 weight; a hairline stroke thickens it very slightly */
  -webkit-text-stroke: 0.3px currentColor;
  word-break: keep-all;
  line-height: var(--lh-body-ko);
}

img, svg { max-width: 100%; height: auto; display: block; }

/* Signature move #3: body links — wedgwood + 1px underline 4px offset;
   hover thickens to 2px, no color change */
a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-thickness var(--t);
}
a:hover {
  color: var(--link);
  text-decoration-thickness: 2px;
}
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Korean typography */
html[lang="ko"] h1, html[lang="ko"] h2, html[lang="ko"] h3, html[lang="ko"] h4 {
  font-family: var(--font-ko-display);
  word-break: keep-all;
  line-height: 1.4;
  font-weight: 700;
}

/* -------------------------------------------------------------------------
   Utility
   ------------------------------------------------------------------------- */
.container        { max-width: var(--container);        margin-inline: auto; padding-inline: var(--gutter); }
.container-narrow { max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--gutter); }
.container-wide   { max-width: var(--container-wide);   margin-inline: auto; padding-inline: var(--gutter); }
.text-center { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -3rem;
  background: var(--bg-inverse); color: var(--text-inverse);
  padding: 0.5rem 0.875rem; z-index: 100;
  text-decoration: none; font-family: var(--font-en-body);
}
.skip-link:focus { top: 1rem; }

/* -------------------------------------------------------------------------
   Wedgwood Blue signature: thick pale rule + diamond fleuron
   Signature move #5:
   .rule-single: 3px solid var(--bg-sub) — thick pale blue rule
   .fleuron: same 3px pale-blue rule with centered wedgwood diamond ◇
   ------------------------------------------------------------------------- */
.rule-single {
  border: 0;
  border-top: 3px solid var(--bg-sub);
  margin: 2rem auto;
  max-width: 100%;
}
.rule-double {
  border: 0;
  border-top: 3px solid var(--bg-sub);
  height: 8px;
  border-bottom: 3px solid var(--bg-sub);
  margin: 2.25rem auto;
  max-width: 480px;
}
.fleuron {
  display: flex; align-items: center; justify-content: center;
  gap: 0; margin: 2.5rem auto; position: relative;
  max-width: 320px;
}
.fleuron::before, .fleuron::after {
  content: ""; flex: 1;
  border-top: 3px solid var(--bg-sub);
}
.fleuron span {
  color: var(--accent-soft); font-size: 1.1rem;
  padding: 0 0.75rem;
  font-family: var(--font-en-body);
  line-height: 1;
}

/* Eyebrow: Signature move — uppercase tracked, wedgwood accent color */
.eyebrow {
  font-family: var(--font-en-display);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
  font-weight: 600;
  display: inline-block;
}
html[lang="ko"] .eyebrow {
  font-family: var(--font-ko-display);
  letter-spacing: 0.1em;
  text-transform: none;
}

/* -------------------------------------------------------------------------
   Headings
   Signature move #2: h2 gets small filled wedgwood circle ::before
   ------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-en-display);
  color: var(--text);
  font-weight: 600;
  line-height: var(--lh-tight);
  margin: 0 0 0.5em;
}
html[lang="ko"] h1, html[lang="ko"] h2, html[lang="ko"] h3, html[lang="ko"] h4 {
  font-family: var(--font-ko-display);
  font-weight: 700;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

/* Wedgwood dot marker on h2 — signature move #2 (soft wedgwood accent) */
h2::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-soft);
  margin-right: 14px;
  vertical-align: middle;
  flex-shrink: 0;
}
/* Suppress dot in contexts where it clashes */
.doc-article h2::before,
.cta-band h2::before,
.site-footer h2::before {
  display: none;
}

/* -------------------------------------------------------------------------
   Header / nav
   Signature move #7: wordmark + nav in deep navy; active nav wedgwood + underline
   ------------------------------------------------------------------------- */
.site-header {
  background: var(--accent);
  border-bottom: 1px solid var(--accent);
  position: sticky; top: 0; z-index: 50;
  color: #fff;
}
.site-header__inner {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: 0.85rem var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}
.site-header__lang {
  font-family: var(--font-en-display);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: #fff;
}
.site-header__lang a { margin: 0 0.35rem; text-decoration: none; }
.site-header__lang a[aria-current="true"] { color: #fff; font-weight: 600; }
.site-header__lang a:not([aria-current="true"]) { color: rgba(255,255,255,0.7); }
.site-header__wordmark {
  text-align: center;
  font-family: var(--font-en-display);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  color: #fff;
  line-height: 1.15;
}
html[lang="ko"] .site-header__wordmark { font-family: var(--font-ko-display); }
.site-header__wordmark .wordmark-main { display: block; font-size: 1.5rem; color: #fff; }
.site-header__wordmark .wordmark-sub  {
  display: block; font-size: 0.7rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255,255,255,0.85); font-family: var(--font-en-display); margin-top: 2px;
}
/* Logo mark sits left of the wordmark text */
.site-header__wordmark { display: inline-flex; align-items: center; gap: 0.75rem; justify-self: center; }
.site-header__wordmark .wordmark-text { text-align: left; }
.site-header__mark { height: 44px; width: auto; flex: none; }
.site-header__util {
  display: flex; justify-content: flex-end; align-items: center; gap: 0.5rem;
}
/* Signature move #6: btn-give styled like btn-ghost */
.btn-give {
  font-family: var(--font-en-display);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.45rem 1rem;
  border: 1.5px solid rgba(255,255,255,0.7);
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  transition: background var(--t), color var(--t);
}
.btn-give:hover { background: #fff; color: var(--accent); border-color: #fff; text-decoration: none; }
html[lang="ko"] .btn-give { font-family: var(--font-ko-display); letter-spacing: 0.06em; }

.nav-toggle {
  display: none;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.7);
  color: #fff;
  font-family: var(--font-en-display);
  font-size: 0.85rem;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 2px;
}

.site-nav {
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.site-nav__list {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: 0.55rem var(--gutter);
  list-style: none;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.4rem 1.5rem;
}
.site-nav__list a {
  font-family: var(--font-en-display);
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  color: var(--text);
  padding: 0.25rem 0.1rem;
  border-bottom: 2px solid transparent;
  transition: color var(--t), border-color var(--t);
}
html[lang="ko"] .site-nav__list a { font-family: var(--font-ko-display); font-size: 1rem; }
.site-nav__list a:hover { color: var(--accent); }
/* Signature move #7: active nav — wedgwood color + 2px wedgwood underline */
.site-nav__list a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }

@media (max-width: 860px) {
  .site-header__inner { grid-template-columns: auto 1fr auto; }
  .site-header__wordmark { text-align: left; grid-column: 2; }
  .site-header__wordmark { justify-self: start; gap: 0.6rem; }
  .site-header__mark { height: 36px; }
  .nav-toggle { display: inline-block; grid-column: 1; }
  .site-header__lang { display: none; }
  .site-header__util .btn-give { display: none; }
  .site-nav { display: none; }
  .site-nav[data-open="true"] { display: block; }
  .site-nav__list { flex-direction: column; align-items: flex-start; gap: 0.25rem; padding-block: 1rem; }
  .site-nav__list a { padding: 0.4rem 0; width: 100%; }
  .site-nav .mobile-extras {
    display: flex; gap: 1rem; padding: 0.75rem var(--gutter) 1rem;
    border-top: 1px solid var(--border); margin-top: 0.5rem;
  }
}
@media (min-width: 861px) {
  .mobile-extras { display: none; }
}

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */
.hero {
  padding: clamp(3rem, 7vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem);
  text-align: center;
  position: relative;
}
.hero__eyebrow { margin-bottom: 1rem; }
.hero h1 { margin: 0 auto 0.4em; max-width: 18ch; }
/* Suppress dot on h1 inside hero (only h2 gets the dot) */
.hero h1::before { display: none; }
.hero__lede {
  max-width: 56ch;
  margin: 0 auto 1.75rem;
  color: var(--text-soft);
  font-size: 1.1rem;
}
.hero__cta { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }

/* -------------------------------------------------------------------------
   Buttons
   Signature move #6: btn-primary solid wedgwood, 4px radius; btn-ghost 1.5px
   ------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-en-display);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.7rem 1.5rem;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  border-radius: 4px;
  transition: background var(--t), color var(--t), border-color var(--t);
}
html[lang="ko"] .btn { font-family: var(--font-ko-display); letter-spacing: 0.04em; text-transform: none; font-size: 1rem; }
.btn:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); text-decoration: none; }
.btn-primary {
  background: var(--accent); border-color: var(--accent); color: var(--bg); border-radius: 4px;
}
.btn-primary:hover { background: var(--link-hover); border-color: var(--link-hover); color: var(--bg); text-decoration: none; }
.btn-ghost { border: 1.5px solid var(--accent); color: var(--accent); border-radius: 4px; }
.btn-ghost:hover { background: var(--accent); color: var(--bg); text-decoration: none; }

/* -------------------------------------------------------------------------
   Sections
   Signature move #1: .section-head sits in full-width pale blue band
   ------------------------------------------------------------------------- */
section { padding-block: var(--section-y); }

.section-head {
  text-align: center;
  margin-bottom: 2.5rem;
  /* The pale-blue band is applied as a wrapper — see .section-head-band */
}
.section-head .eyebrow { margin-bottom: 0.75rem; }
.section-head h2 { margin: 0 auto; max-width: 24ch; }
.section-head .lede { max-width: 56ch; margin: 1rem auto 0; color: var(--text-soft); }

/* Pale-blue band for section-head — signature move #1 */
.section-head-band {
  background: var(--bg-sub);
  padding-block: clamp(3.5rem, 6vw, 4rem);
  margin-bottom: 2.5rem;
  /* full content width achieved by containing container inside */
}
/* Hero sub-section band (next-service uses similar pale-blue treatment) */

/* Prose */
.prose { max-width: 64ch; margin-inline: auto; }
.prose p { margin: 0 0 1.25em; }
.prose h2, .prose h3 { margin-top: 2em; }
.prose blockquote {
  border-left: 3px solid var(--accent);
  padding: 0.25rem 0 0.25rem 1.25rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: var(--text-soft);
}
html[lang="ko"] .prose blockquote { font-family: var(--font-ko-display); font-style: normal; }
.prose ul, .prose ol { padding-left: 1.25rem; margin: 0 0 1.25em; }
.prose li { margin-bottom: 0.4em; }
.prose .scripture-ref {
  display: inline-block; font-family: var(--font-mono);
  font-size: 0.82em; color: var(--text-mute); padding-left: 0.4rem;
}

/* -------------------------------------------------------------------------
   Cards
   Signature move #4: 1px solid var(--accent-soft) TOP border only, white bg, 24-28px padding
   ------------------------------------------------------------------------- */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
}
.card {
  background: var(--bg);
  border-top: 1px solid var(--accent-soft);
  padding: 1.5rem 1.75rem;
}
.card__thumb {
  aspect-ratio: 16 / 9;
  background: var(--bg-sub);
  overflow: hidden;
  margin-bottom: 1rem;
  /* No extra border — top border on card covers it */
}
.card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.card__eyebrow { font-family: var(--font-en-display); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent); margin-bottom: 0.3rem; display: block; }
html[lang="ko"] .card__eyebrow { font-family: var(--font-ko-display); letter-spacing: 0.08em; text-transform: none; }
.card__title { font-family: var(--font-en-display); font-size: 1.2rem; margin: 0 0 0.4rem; line-height: 1.35; }
html[lang="ko"] .card__title { font-family: var(--font-ko-display); }
.card__title a { color: var(--text); text-decoration: none; }
.card__title a:hover { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; }
.card__meta { font-size: 0.85rem; color: var(--text-mute); margin: 0 0 0.5rem; }
.card__excerpt { color: var(--text-soft); margin: 0; font-size: 0.95rem; }

/* Square portrait variant */
.card__portrait {
  aspect-ratio: 1 / 1;
  background: var(--bg-sub);
  overflow: hidden;
  margin-bottom: 1rem;
}
.card__portrait picture { display: block; height: 100%; }
.card__portrait img { width: 100%; height: 100%; object-fit: cover; }

/* -------------------------------------------------------------------------
   Home — sub-sections
   Signature move #1 (next-service): pale-blue bg + 4px wedgwood left border
   + soft-gold day-of-week badge
   ------------------------------------------------------------------------- */
.next-service {
  background: var(--bg-sub);
  border-left: 4px solid var(--accent);
  padding-block: 1.25rem;
  text-align: center;
  font-family: var(--font-en-display);
  font-size: 1rem;
}
html[lang="ko"] .next-service { font-family: var(--font-ko-display); }
.next-service strong { color: var(--accent); font-weight: 700; }
.next-service .badge {
  display: inline-block;
  background: var(--accent-2);
  color: var(--bg);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.15rem 0.6rem;
  border-radius: 2px;
  letter-spacing: 0.06em;
  margin-right: 0.4rem;
  vertical-align: middle;
}

.home-pillars {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
}
.home-pillars > article { padding: 0 0.5rem; }
.home-pillars h3 { font-size: 1.25rem; }
@media (max-width: 768px) { .home-pillars { grid-template-columns: 1fr; } }

.video-embed {
  aspect-ratio: 16 / 9; background: #1A2433; max-width: 920px;
  margin-inline: auto; border: 1px solid var(--border);
}
.video-embed iframe { width: 100%; height: 100%; border: 0; }

/* Signature move #8 (cta-band): deep navy bg, pale-blue text, soft-gold filled button */
.cta-band {
  background: var(--bg-inverse);
  color: var(--text-inverse);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}
.cta-band h2 { color: var(--text-inverse); }
.cta-band h2::before { display: none; }
.cta-band p  { color: var(--text-inverse); opacity: 0.85; max-width: 56ch; margin: 1rem auto 1.5rem; }
.cta-band .eyebrow { color: var(--accent-2); }
.cta-band .btn { background: var(--accent-2); border-color: var(--accent-2); color: var(--bg-inverse); border-radius: 4px; }
.cta-band .btn:hover { background: #b8943d; border-color: #b8943d; color: var(--bg-inverse); }

/* -------------------------------------------------------------------------
   Doctrinal article (beliefs / distinctives)
   ------------------------------------------------------------------------- */
.doc-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) { .doc-layout { grid-template-columns: 1fr; } }
.doc-toc {
  position: sticky; top: 6.5rem;
  border-left: 2px solid var(--accent);
  padding-left: 1rem;
  font-size: 0.92rem;
}
.doc-toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.doc-toc li { counter-increment: toc; margin-bottom: 0.5rem; line-height: 1.4; }
.doc-toc li::before {
  content: counter(toc, decimal-leading-zero) ".";
  color: var(--accent-2);
  font-family: var(--font-en-display);
  margin-right: 0.4rem;
}
.doc-toc a { color: var(--text); text-decoration: none; }
.doc-toc a:hover { color: var(--accent); }
.doc-article h2 {
  display: flex; align-items: baseline; gap: 0.7rem;
  border-bottom: 1px solid var(--border); padding-bottom: 0.4rem;
}
.doc-article h2::before { display: none; }
.doc-article h2 .num {
  font-family: var(--font-en-display);
  color: var(--accent-2); font-size: 0.9em; font-weight: 600;
}
.doc-article section { padding-block: 2rem; }
.doc-article section + section { border-top: 1px dashed var(--border); }

/* -------------------------------------------------------------------------
   Sermon detail / archive
   ------------------------------------------------------------------------- */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
  border-block: 1px solid var(--border);
  padding-block: 1rem; margin-bottom: 2.5rem;
}
.filter-bar label { font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mute); font-family: var(--font-en-display); }
html[lang="ko"] .filter-bar label { font-family: var(--font-ko-display); text-transform: none; letter-spacing: 0.06em; }
.filter-bar select, .filter-bar input {
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  padding: 0.45rem 0.7rem; font-family: inherit; font-size: 0.95rem;
  border-radius: 2px;
}

.sermon-detail {
  background: var(--bg-sub); border: 1px solid var(--border);
  padding: clamp(1.5rem, 4vw, 2.5rem); margin-top: 3rem;
  border-radius: 2px;
}
.sermon-detail .video-embed { margin-bottom: 1.5rem; }
.sermon-detail .scripture-ref { font-size: 1rem; }

/* -------------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------------- */
form.tmc-form {
  display: grid; gap: 1rem; max-width: 560px; margin-inline: auto;
}
.tmc-form label { font-family: var(--font-en-display); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-soft); }
html[lang="ko"] .tmc-form label { font-family: var(--font-ko-display); letter-spacing: 0.04em; text-transform: none; font-size: 0.95rem; }
.tmc-form input, .tmc-form textarea, .tmc-form select {
  background: var(--bg); border: 1px solid var(--border); padding: 0.65rem 0.8rem;
  font-family: inherit; font-size: 1rem; color: var(--text);
  width: 100%; border-radius: 2px;
  transition: border-color var(--t);
}
.tmc-form input:focus, .tmc-form textarea:focus, .tmc-form select:focus {
  outline: none; border-color: var(--accent);
}
.tmc-form textarea { min-height: 8em; resize: vertical; }
.tmc-form .honeypot { position: absolute; left: -9999px; }

/* FAQ accordion */
details.faq {
  border-bottom: 1px solid var(--border);
  padding: 1rem 0;
}
details.faq summary {
  cursor: pointer; list-style: none;
  font-family: var(--font-en-display); font-size: 1.05rem;
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; color: var(--text);
}
html[lang="ko"] details.faq summary { font-family: var(--font-ko-display); }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "＋"; color: var(--accent); transition: transform var(--t); }
details.faq[open] summary::after { content: "−"; }
details.faq p { margin: 0.75rem 0 0; color: var(--text-soft); }

/* Sermon transcript disclosure */
.sermon-transcript { max-width: 920px; margin: 1rem auto 0; border-top: 1px solid var(--border); padding-top: 1rem; }
.sermon-transcript summary { cursor: pointer; font-family: var(--font-en-display); font-size: 0.95rem; color: var(--accent); letter-spacing: 0.04em; }
html[lang="ko"] .sermon-transcript summary { font-family: var(--font-ko-display); letter-spacing: 0; }
.sermon-transcript summary::-webkit-details-marker { display: none; }
.sermon-transcript summary::before { content: "＋ "; color: var(--accent-soft); }
.sermon-transcript[open] summary::before { content: "− "; }
.sermon-transcript .prose { margin-top: 1rem; }

/* -------------------------------------------------------------------------
   Timeline
   ------------------------------------------------------------------------- */
.timeline { border-left: 2px solid var(--accent); padding-left: 1.5rem; margin: 2rem 0; }
.timeline > li { list-style: none; margin-bottom: 1.5rem; }
.timeline .year { font-family: var(--font-en-display); color: var(--accent); font-size: 1.1rem; font-weight: 600; letter-spacing: 0.06em; }
.timeline h3 { font-size: 1.1rem; margin: 0.25rem 0; }
.timeline h3::before { display: none; }
.timeline p { color: var(--text-soft); margin: 0; }

/* -------------------------------------------------------------------------
   Footer
   Signature move #8: deep navy bg, pale-blue text, soft-gold column dividers
   ------------------------------------------------------------------------- */
.site-footer {
  background: var(--bg-inverse);
  color: var(--text-inverse);
  padding: clamp(2.5rem, 5vw, 4rem) 0 1.5rem;
  margin-top: clamp(3rem, 6vw, 5rem);
}
.site-footer a { color: var(--text-inverse); text-decoration: none; transition: color var(--t); }
.site-footer a:hover { color: var(--accent-2); }
.site-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2.5rem;
}
/* Soft-gold column dividers — signature move #8 */
.site-footer__grid > div + div {
  border-left: 1px solid var(--accent-2);
  padding-left: 2rem;
}
@media (max-width: 800px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__grid > div + div { border-left: none; padding-left: 0; }
  .site-footer__grid > div:nth-child(3) { border-top: 1px solid var(--accent-2); padding-top: 1.5rem; }
}
@media (max-width: 480px) {
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__grid > div:nth-child(n+2) { border-top: 1px solid var(--accent-2); padding-top: 1.5rem; }
}
.site-footer h3 {
  color: var(--accent-2);
  font-family: var(--font-en-display);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin: 0 0 0.85rem;
}
.site-footer h3::before { display: none; }
html[lang="ko"] .site-footer h3 { font-family: var(--font-ko-display); letter-spacing: 0.1em; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.4rem; font-size: 0.92rem; color: var(--text-inverse); opacity: 0.85; }
.site-footer__logo { display: block; width: 120px; height: auto; margin-bottom: 1rem; }
.site-footer .wordmark { font-family: var(--font-en-display); font-size: 1.4rem; color: var(--text-inverse); margin-bottom: 0.5rem; font-weight: 600; }
html[lang="ko"] .site-footer .wordmark { font-family: var(--font-ko-display); }
.site-footer__legal {
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(201, 169, 97, 0.3);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  font-size: 0.82rem; color: var(--text-inverse); opacity: 0.6;
}
.site-footer__legal a { color: var(--text-inverse); opacity: 0.7; }

/* -------------------------------------------------------------------------
   Misc / page-specific
   ------------------------------------------------------------------------- */
.scripture-ref {
  display: inline-block; font-family: var(--font-mono);
  font-size: 0.82em; color: var(--text-mute); padding-left: 0.4rem;
}

.map-embed {
  aspect-ratio: 16/9; border: 1px solid var(--border); background: var(--bg-sub); overflow: hidden; border-radius: 2px;
}
.map-embed img { width: 100%; height: 100%; object-fit: cover; }

.qr-block { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.qr-block img { width: 140px; height: 140px; border: 1px solid var(--border); background: var(--bg-sub); }

.chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.chip {
  font-family: var(--font-en-display); font-size: 0.85rem;
  letter-spacing: 0.06em; padding: 0.35rem 0.85rem;
  border: 1px solid var(--border); color: var(--text-soft);
  text-decoration: none; border-radius: 4px;
  transition: background var(--t), color var(--t), border-color var(--t);
}
html[lang="ko"] .chip { font-family: var(--font-ko-display); letter-spacing: 0.04em; }
.chip:hover, .chip[aria-current="true"] {
  background: var(--accent); color: var(--bg); border-color: var(--accent); text-decoration: none;
}

.two-col {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem);
}
@media (max-width: 768px) { .two-col { grid-template-columns: 1fr; } }

.list-clean { list-style: none; padding: 0; margin: 0; }
.list-clean li { padding: 0.5rem 0; border-bottom: 1px dashed var(--border); }

.placeholder-note {
  background: var(--bg-sub); border: 1px dashed var(--accent-2);
  padding: 0.6rem 0.9rem; font-family: var(--font-mono); font-size: 0.82rem;
  color: var(--text-mute); margin: 1rem 0;
}

/* -------------------------------------------------------------------------
   Responsive breakpoints sm 640 / md 768 / lg 1024 / xl 1280
   ------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .grid-cards { grid-template-columns: 1fr; }
  .card { padding: 1.25rem; }
}

/* =========================================================================
   ACCESSIBILITY — assistive tech, low-vision, motor, forced-colors (appended)
   A11Y HARDENING — prefers-contrast / forced-colors / coarse-pointer.
   Feature-query based (no width overlap with the component queries above).
   Token overrides cascade into existing rules without re-declaring them.
   ========================================================================= */

/* --- Block 1A — prefers-contrast: more (low-vision readability boost) --- */
@media (prefers-contrast: more) {
  :root {
    --border: rgba(27, 58, 107, 0.55);  /* was 0.20 — stiffens every var(--border) edge */
    --text-mute: #3A4860;                /* was #5A6478 — raises muted-text contrast */
    --text-soft: #26324A;                /* was #3A4860 — darkens ledes/excerpts/blockquote */
  }
  a { text-decoration-thickness: 2px; }
  a:hover { text-decoration-thickness: 3px; }
  a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
    outline-width: 3px; outline-offset: 3px;
  }
  .card { border-top-width: 2px; }
  .btn, .btn-give { border-width: 2px; }
  .btn-ghost, .btn-primary { border-width: 2px; }
  .chip { border-width: 2px; }
  .tmc-form input, .tmc-form textarea, .tmc-form select,
  .filter-bar select, .filter-bar input { border-width: 2px; }
  /* Low-vision gold-as-text boost: recolor the two decorative counters that
     render gold on white (~2:1) to the blue token (~9:1). Footer gold untouched. */
  .doc-toc li::before, .doc-article h2 .num { color: var(--accent); }
}

/* --- Block 1B — forced-colors: active (Windows High Contrast) --- */
@media (forced-colors: active) {
  a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid Highlight; outline-offset: 3px;
  }
  .btn, .btn-give, .btn-ghost, .btn-primary, .cta-band .btn {
    border: 2px solid ButtonText; color: ButtonText;
  }
  .btn:hover, .btn-give:hover, .btn-ghost:hover, .btn-primary:hover, .cta-band .btn:hover {
    background: Highlight; color: HighlightText;
  }
  .site-nav__list a[aria-current="page"] {
    border-bottom-color: Highlight; color: Highlight;
  }
  .chip[aria-current="true"], .chip:hover {
    border-color: Highlight; color: HighlightText; background: Highlight;
  }
  .card { border-top-color: CanvasText; }
  /* Decorative marks painted via background-color would repaint to Canvas
     (invisible) — repaint to a system fg and opt them out of the palette map. */
  h2::before { background: CanvasText; forced-color-adjust: none; }
  .next-service .badge { forced-color-adjust: none; }
  /* White-on-transparent logo art needs its navy backdrop kept in High Contrast */
  .site-header__mark, .site-footer__logo { background: var(--accent); forced-color-adjust: none; }
}

/* --- Block 1C — pointer: coarse (touch — WCAG 2.5.5 >=44x44 targets) --- */
@media (pointer: coarse) {
  .site-nav__list a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding-inline: 0.85rem; }
  .site-header__lang a {
    min-height: 44px; display: inline-flex; align-items: center; padding-inline: 0.5rem;
  }
  .chip { min-height: 44px; display: inline-flex; align-items: center; }
  .btn, .btn-give {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  }
  .nav-toggle { min-height: 44px; min-width: 44px; }
  details.faq summary { min-height: 44px; align-items: center; }
  .site-footer a { display: inline-flex; align-items: center; min-height: 44px; }
  .doc-toc a { display: inline-flex; align-items: center; min-height: 44px; }
  .tmc-form input, .tmc-form select,
  .filter-bar select, .filter-bar input { min-height: 44px; }
}

/* =========================================================================
   RESPONSIVE SYSTEM — tablet + mobile, landscape + portrait (desktop default)
   RESPONSIVE LAYER — desktop-first scale-down 1024->768->640->480->380
   + short-landscape. Appended in large->small order so narrower tiers win.
   Complements (never re-declares) the component queries at 860/900/800/768/
   640/480 above; shared-breakpoint blocks touch disjoint selectors/props.
   ========================================================================= */

/* Safety: no horizontal page scroll at any tier. `clip` keeps sticky header. */
html, body { overflow-x: clip; }

/* --- Tier 1 — max-width 1024px (tablet landscape) — tighten rhythm --- */
@media (max-width: 1024px) {
  :root {
    --container: 960px;
    --gutter: clamp(1rem, 2.5vw, 1.75rem);
    --section-y: clamp(2.5rem, 5vw, 4rem);
    --section-head-y: clamp(2.75rem, 5vw, 3.25rem);
  }
  .section-head-band { padding-block: clamp(2.5rem, 5vw, 3.25rem); }
}

/* --- Tier 2 — max-width 768px (tablet portrait) — disjoint from existing 768 block --- */
@media (max-width: 768px) {
  :root { --section-y: clamp(2rem, 5vw, 3rem); }
  .hero { padding: clamp(2rem, 5vw, 3rem) 0 clamp(1.5rem, 4vw, 2.25rem); }
  .section-head { margin-bottom: 1.75rem; }
  .section-head-band { padding-block: clamp(2rem, 4vw, 2.5rem); margin-bottom: 1.75rem; }
  .doc-toc { position: static; top: auto; }
  .filter-bar { gap: 0.75rem; }
}

/* --- Tier 3 — max-width 640px (mobile landscape / large phone) — disjoint from existing 640 block --- */
@media (max-width: 640px) {
  :root { --section-y: clamp(1.75rem, 5vw, 2.5rem); }
  .hero { padding: 2rem 0 1.5rem; }
  .hero__lede { font-size: 1.02rem; }
  .cta-band { padding-block: clamp(2rem, 5vw, 2.75rem); }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar select, .filter-bar input { width: 100%; }
  .sermon-detail { padding: clamp(1.25rem, 4vw, 1.75rem); }
}

/* --- Tier 3b — short landscape phone (orientation:landscape) and (max-height:500px) --- */
@media (orientation: landscape) and (max-height: 500px) {
  .hero { padding-block: 1.5rem 1.25rem; }
  section { padding-block: 1.5rem; }
  .section-head-band { padding-block: 1.5rem; margin-bottom: 1.25rem; }
  .cta-band { padding-block: 1.5rem; }
  .site-footer { padding-top: 1.5rem; margin-top: 2rem; }
  .next-service { padding-block: 0.9rem; }
}

/* --- Tier 4 — max-width 480px (mobile portrait) — disjoint from existing 480 footer block --- */
@media (max-width: 480px) {
  :root { --gutter: 1.1rem; }
  .hero__cta { flex-direction: column; }
  .hero__cta .btn { width: 100%; text-align: center; }
  .qr-block { flex-direction: column; align-items: flex-start; }
  .chip-row { gap: 0.4rem; }
  .site-header__inner { padding-inline: 1.1rem; }
  .filter-bar { margin-bottom: 1.75rem; }
  .site-footer__legal { flex-direction: column; gap: 0.5rem; }
  /* Long-URL / space-less KO string safety on the most common phone widths
     (390-430px) — overflow-x:clip hides rather than scrolls, so wrap early. */
  .prose, .card__excerpt, .card__title, .scripture-ref,
  .site-footer a, .site-footer li, .doc-toc a, a { overflow-wrap: anywhere; }
}

/* --- Tier 5 — max-width 380px (small phones — overflow safety, LAST block) --- */
@media (max-width: 380px) {
  :root { --gutter: 0.9rem; }
  .prose, .card__excerpt, .card__title, .scripture-ref,
  .site-footer a, .site-footer li, .doc-toc a, a { overflow-wrap: anywhere; }
  .site-header__wordmark .wordmark-main { font-size: 1.3rem; }
  .qr-block img { width: 120px; height: 120px; }
  img, .video-embed, .map-embed, table { max-width: 100%; }
}