/* ==========================================================================
   ARK Church Seoul: design system v2
   Tokens carried forward from migration-design.css so the brand is unchanged.
   Single committed light theme: this is a brand surface, not a document.
   ========================================================================== */

:root {
  /* Brand, carried over from migration-design.css */
  --ink:        #1E3038;
  --ink-soft:   #52646D;
  --ink-faint:  #7C8B92;
  --paper:      #F1EFE7;
  --paper-soft: #F8F7F2;
  --paper-warm: #EAE6DA;
  --clay:       #C88969;
  --clay-deep:  #A96844;
  --blue:       #A9C1D8;
  --blue-deep:  #6F8FA7;
  --sage:       #9CA889;
  --line:       rgba(30, 48, 56, 0.14);
  --line-strong:rgba(30, 48, 56, 0.26);

  --shadow-soft: 0 18px 60px rgba(30, 48, 56, 0.10);
  --shadow-card: 0 16px 42px rgba(30, 48, 56, 0.14);
  --shadow-lift: 0 24px 60px rgba(30, 48, 56, 0.18);

  --radius:  18px;
  --radius-s:12px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --measure: 62ch;
  --gutter: clamp(20px, 5vw, 64px);
  --maxw: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, .display {
  font-family: "Cormorant Garamond", Cormorant, Garamond, Georgia, serif;
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: clamp(46px, 8.2vw, 104px); }
h2 { font-size: clamp(34px, 5vw, 60px); }
h3 { font-size: clamp(22px, 2.4vw, 29px); line-height: 1.16; }

p { margin: 0; max-width: var(--measure); }

a { color: inherit; }

:where(a, button, summary, input, [tabindex]):focus-visible {
  outline: 2.5px solid var(--clay-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

.eyebrow {
  font-family: "Poppins", sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clay-deep);
  margin: 0;
}
.eyebrow.on-dark { color: var(--blue); }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }

.section { padding-block: clamp(72px, 10vw, 140px); }
.section-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head p.lede { font-size: clamp(17px, 1.6vw, 20px); color: var(--ink-soft); }

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

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "Poppins", sans-serif;
  font-size: 14.5px; font-weight: 600; letter-spacing: 0.01em;
  padding: 15px 28px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform .4s var(--ease), background-color .3s var(--ease),
              color .3s var(--ease), border-color .3s var(--ease), box-shadow .4s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn .arrow { transition: transform .4s var(--ease); }
.btn:hover .arrow { transform: translate(3px, -3px); }

.btn-primary { background: var(--clay); color: #FFF; box-shadow: 0 10px 26px rgba(168, 104, 68, .28); }
.btn-primary:hover { background: var(--clay-deep); box-shadow: 0 16px 34px rgba(168, 104, 68, .36); }

.btn-ghost { border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); background: rgba(30,48,56,.04); }

.btn-light { background: rgba(255,255,255,.94); color: var(--ink); }
.btn-light:hover { background: #FFF; }

.btn-outline-light { border-color: rgba(255,255,255,.6); color: #FFF; }
.btn-outline-light:hover { border-color: #FFF; background: rgba(255,255,255,.12); }

/* ---------- Header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(241,239,231,0);
  transition: background-color .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-solid {
  background: rgba(241,239,231,.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--line);
}
.header-inner {
  display: flex; align-items: center; gap: 24px;
  min-height: 78px;
}
.brand {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 25px; font-weight: 600; letter-spacing: -0.01em;
  text-decoration: none; color: #FFF; white-space: nowrap;
  transition: color .45s var(--ease);
}
.site-header.is-solid .brand { color: var(--ink); }

.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav a.nav-link {
  font-size: 14px; font-weight: 500; text-decoration: none;
  padding: 10px 15px; border-radius: 999px; color: rgba(255,255,255,.92);
  transition: color .45s var(--ease), background-color .3s var(--ease);
}
.site-header.is-solid .nav a.nav-link { color: var(--ink-soft); }
.nav a.nav-link:hover { background: rgba(255,255,255,.16); color: #FFF; }
.site-header.is-solid .nav a.nav-link:hover { background: rgba(30,48,56,.06); color: var(--ink); }

.nav .btn { padding: 11px 22px; font-size: 13.5px; margin-left: 10px; }

.menu-toggle {
  display: none; margin-left: auto;
  background: none; border: 1.5px solid rgba(255,255,255,.5); color: #FFF;
  font-family: "Poppins", sans-serif; font-size: 13px; font-weight: 600;
  padding: 9px 18px; border-radius: 999px; cursor: pointer;
}
.site-header.is-solid .menu-toggle { border-color: var(--line-strong); color: var(--ink); }

@media (max-width: 900px) {
  .nav { display: none; }
  .menu-toggle { display: block; }
  .nav.is-open {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; left: var(--gutter); right: var(--gutter); top: 78px;
    background: var(--paper-soft); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow-card);
  }
  .nav.is-open a.nav-link { color: var(--ink); padding: 13px 16px; }
  .nav.is-open .btn { margin: 6px 0 0; justify-content: center; }
}

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

.hero {
  position: relative;
  margin-top: -78px;
  min-height: min(94vh, 900px);
  display: flex; align-items: flex-end;
  padding-block: 160px clamp(40px, 6vw, 76px);
  overflow: hidden;
  background: #2A3A42;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(24,38,45,.52) 0%, rgba(24,38,45,.18) 32%, rgba(24,38,45,.72) 78%, rgba(24,38,45,.88) 100%);
}
.hero .wrap { position: relative; z-index: 1; }
.hero-content { display: flex; flex-direction: column; gap: 26px; max-width: 900px; }
.hero h1 { color: #FFF; }
.hero-sub {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(21px, 2.6vw, 30px); font-weight: 400; font-style: italic;
  color: rgba(255,255,255,.9); max-width: 40ch; line-height: 1.3;
}
.hero-copy { color: rgba(255,255,255,.86); font-size: clamp(15.5px, 1.5vw, 17px); max-width: 56ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }

/* Hand-drawn highlight: the brand's own signature motif, rebuilt as real SVG */
.hl { position: relative; display: inline-block; white-space: nowrap; }
.hl svg {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 118%; height: 150%; overflow: visible; pointer-events: none;
}
.hl svg path {
  fill: none; stroke: var(--clay); stroke-width: 4.5;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200);
  animation: draw 1.5s var(--ease) forwards;
  animation-delay: var(--delay, .5s);
}
.hl--under svg { top: auto; bottom: -6%; transform: translateX(-50%); height: 40%; width: 104%; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hl svg path { animation: none; stroke-dashoffset: 0; }
}

/* ---------- Visit bar: the highest-intent module on the page ---------- */

.visit-bar { background: var(--ink); color: #FFF; }
.visit-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px; background: rgba(255,255,255,.14);
}
.visit-cell {
  background: var(--ink); padding: 30px 28px;
  display: flex; flex-direction: column; gap: 7px;
}
.visit-cell .k {
  font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--blue);
}
.visit-cell .v {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 27px; line-height: 1.12; color: #FFF;
}
.visit-cell .n { font-size: 13.5px; color: rgba(255,255,255,.66); line-height: 1.5; }
.visit-cell a { color: var(--blue); text-underline-offset: 3px; }
.visit-cell.cta { justify-content: center; gap: 14px; background: var(--clay-deep); }
.visit-cell.cta .k { color: rgba(255,255,255,.82); }

/* ---------- Generic sections ---------- */

.alt { background: var(--paper-soft); }

.two-col {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }

.figure { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); }
.figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.figure.wide img { aspect-ratio: 3 / 2; }

.prose { display: flex; flex-direction: column; gap: 20px; }
.prose p { color: var(--ink-soft); }

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

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 20px; }
.card {
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px 28px;
  display: flex; flex-direction: column; gap: 12px;
  text-decoration: none;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s var(--ease);
}
a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: transparent; }
.card .card-when {
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--clay-deep);
}
.card p { font-size: 15.5px; color: var(--ink-soft); }
.card .go {
  margin-top: auto; padding-top: 12px;
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  display: inline-flex; gap: 7px; align-items: center;
}
a.card:hover .go .arrow { transform: translate(3px, -3px); }
.card .go .arrow { transition: transform .4s var(--ease); }

/* ---------- Who it's for ---------- */

.for-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.for-item { background: var(--paper); padding: 28px 26px; display: flex; flex-direction: column; gap: 9px; }
.for-item h3 { font-size: 23px; }
.for-item p { font-size: 15px; color: var(--ink-soft); }

/* ---------- Location ---------- */

.loc-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 860px) { .loc-grid { grid-template-columns: 1fr; } }

.addr { display: flex; flex-direction: column; gap: 22px; }
.addr-block { display: flex; flex-direction: column; gap: 5px; }
.addr-block .k { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--clay-deep); }
.addr-block .en { font-size: 18px; font-weight: 500; }
.addr-block .ko { font-size: 16px; color: var(--ink-soft); }
.addr-block p { font-size: 15.5px; color: var(--ink-soft); }
.map-links { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- FAQ ---------- */

.faq { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 24px 44px 24px 0; position: relative;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(20px, 2.1vw, 25px); line-height: 1.25;
  transition: color .3s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--clay-deep); }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 13px; height: 13px; margin-top: -7px;
  border-right: 2px solid var(--clay-deep); border-bottom: 2px solid var(--clay-deep);
  transform: rotate(45deg); transition: transform .35s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq .answer { padding: 0 0 26px; }
.faq .answer p { color: var(--ink-soft); font-size: 16px; }
.faq .answer p + p { margin-top: 12px; }

/* ---------- CTA band ---------- */

.cta-band { position: relative; overflow: hidden; background: var(--ink); color: #FFF; }
.cta-band .bg { position: absolute; inset: 0; opacity: .3; }
.cta-band .bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-band .wrap { position: relative; z-index: 1; }
.cta-inner { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; max-width: 760px; }
.cta-band h2 { color: #FFF; }
.cta-band p { color: rgba(255,255,255,.82); }

/* ---------- Footer ---------- */

.site-footer { background: var(--paper-warm); padding-block: clamp(56px, 7vw, 88px) 40px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px 32px; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-col { display: flex; flex-direction: column; gap: 11px; }
.foot-col h4 { font-family: "Poppins", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 3px; }
.foot-col a { font-size: 15px; color: var(--ink-soft); text-decoration: none; width: fit-content; }
.foot-col a:hover { color: var(--clay-deep); text-decoration: underline; text-underline-offset: 3px; }
.foot-col p { font-size: 15px; color: var(--ink-soft); }
.foot-brand { font-family: "Cormorant Garamond", Georgia, serif; font-size: 27px; }
.foot-bottom {
  margin-top: 46px; padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center;
}
.foot-bottom p { font-size: 13.5px; color: var(--ink-faint); }
.socials { display: flex; gap: 14px; margin-left: auto; }
.socials a { font-size: 13.5px; font-weight: 500; color: var(--ink-soft); text-decoration: none; }
.socials a:hover { color: var(--clay-deep); }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #FFF; padding: 12px 20px; border-radius: 0 0 8px 0;
  font-size: 14px; text-decoration: none;
}
.skip:focus { left: 0; }

/* ---------- Live translation notice ----------
   Placed directly after the visit bar: it answers "can I follow the
   service?" at the same moment someone is deciding whether to come.
   lang= attributes are set per block for screen readers and for search. */

.langs { background: var(--paper-soft); border-bottom: 1px solid var(--line); }
.langs .wrap { padding-block: clamp(44px, 6vw, 68px); }

.langs-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px;
  margin-bottom: 26px;
}
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: #FFF; background: var(--blue-deep);
  padding: 5px 12px; border-radius: 999px; white-space: nowrap;
}
.badge .dot {
  width: 6px; height: 6px; border-radius: 50%; background: #FFF;
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .badge .dot { animation: none; opacity: 1; } }

.langs-head h2 { font-size: clamp(28px, 3.8vw, 44px); flex: 1 1 300px; }

.lang-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 18px;
}
.lang-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue-deep);
  border-radius: var(--radius-s);
  padding: 24px 24px 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.lang-card .tag {
  font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--blue-deep);
}
.lang-card h3 { font-size: 25px; line-height: 1.18; }
.lang-card p { font-size: 15.5px; color: var(--ink-soft); line-height: 1.62; }

/* Korean needs a slightly larger optical size and a font stack that
   actually has hangul; Cormorant does not. */
.lang-card[lang="ko"] h3,
.lang-card[lang="ko"] p,
[lang="ko"] {
  font-family: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR",
               "Malgun Gothic", sans-serif;
}
.lang-card[lang="ko"] h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.lang-card[lang="ko"] p { font-size: 15px; }

.langs-foot {
  margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center;
}
.langs-foot p { font-size: 14.5px; color: var(--ink-faint); max-width: 58ch; }

/* In-page anchors must clear the sticky header, or the nav's own links
   drop the section heading behind it. */
:where(#visit, #translation, #expect, #rhythms, #location, #faq) {
  scroll-margin-top: 92px;
}

/* ---------- Pastoral welcome / staff ----------
   A first-time visitor wants to know who they will meet before they want
   to know what the church teaches. This sits between "who gathers here"
   and the weekly rhythms. */

.welcome { background: var(--ink); color: #FFF; }
.welcome .wrap { padding-block: clamp(72px, 9vw, 128px); }

.welcome-quote {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(25px, 3.3vw, 40px);
  font-style: italic; font-weight: 400; line-height: 1.22;
  letter-spacing: -0.012em; color: #FFF;
  max-width: 24ch; margin: 0;
  text-wrap: balance;
}
.welcome-quote .lead { color: var(--blue); font-style: normal; }

.welcome-body {
  margin-top: clamp(28px, 4vw, 44px);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(26px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 780px) { .welcome-body { grid-template-columns: 1fr; } }

.welcome-body p { color: rgba(255,255,255,.80); font-size: 16px; max-width: 46ch; }
.welcome-body p + p { margin-top: 12px; }

.person { display: flex; flex-direction: column; gap: 7px; }
.person .name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 27px; color: #FFF; line-height: 1.15;
}
.person .role {
  font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--blue);
}

.welcome-foot { margin-top: clamp(30px, 4vw, 48px); display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Worship gallery strip ---------- */

.strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 780px) { .strip { grid-template-columns: 1fr; } }

.strip figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.strip .shot {
  border-radius: var(--radius-s); overflow: hidden;
  box-shadow: var(--shadow-card); background: var(--paper-warm);
}
.strip .shot img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.strip figure:hover .shot img { transform: scale(1.04); }
.strip figcaption { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }

/* Pastor portrait inside the welcome band */
.welcome-portrait {
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.34);
}
.welcome-portrait img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 34%; }

.welcome-top {
  display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,.65fr);
  gap: clamp(28px, 5vw, 64px); align-items: center;
}
@media (max-width: 860px) {
  .welcome-top { grid-template-columns: 1fr; }
  .welcome-portrait { max-width: 380px; }
}

/* FAQ: multilingual answer block */
.faq-langs {
  margin-top: 16px; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px;
}
.faq-lang {
  background: var(--paper-soft); border: 1px solid var(--line);
  border-left: 3px solid var(--blue-deep);
  border-radius: var(--radius-s); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 7px;
}
.faq-lang .tag {
  font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--blue-deep);
}
.faq-lang p { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.faq-lang[lang="ko"] p { font-size: 14.5px; }

/* Signature block sits with the welcome paragraphs */
.welcome-sign { display: flex; flex-direction: column; gap: 4px; }
.welcome-sign .role { font-size: 11px; }
.welcome-sign .welcome-foot { margin-top: 18px; }

/* Native-script names sit quieter than the English they annotate.
   Korean falls back to a system hangul face, which runs optically larger,
   so it is stepped down further than the Latin. */
.faq summary .native {
  font-family: "Poppins", sans-serif;
  font-size: 0.62em;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}
.faq summary .native [lang="ko"] { font-size: 0.96em; }

/* Photo sequence trailing the What-to-expect walkthrough. It illustrates the
   paragraphs above it, so it carries no heading of its own. */
.expect-strip { margin-top: clamp(34px, 5vw, 60px); }
.expect-strip .strip { gap: 16px; }
.expect-strip figcaption {
  font-size: 13.5px; color: var(--ink-faint); letter-spacing: 0.01em;
}

/* What-to-expect: heading beside the walkthrough, photo sequence beneath.
   The photos illustrate the paragraphs, so they carry no heading of their own. */
.expect-head {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 72px); align-items: start;
}
@media (max-width: 860px) { .expect-head { grid-template-columns: 1fr; } }

.expect-strip { margin-top: clamp(38px, 5vw, 64px); }
.expect-strip .strip { gap: 16px; }
.expect-strip figcaption { font-size: 13.5px; color: var(--ink-faint); }


/* Hero copy carries the original emphasis: the list of who this church is
   for sits in italic, with Christians picked out in weight. */
.hero-copy { max-width: 62ch; }
.hero-copy em { font-style: italic; color: rgba(255,255,255,.95); }
.hero-copy strong { font-weight: 600; color: #FFF; }

/* ---------- Vision: the tagline broken into its parts ---------- */

.vision-parts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (max-width: 820px) { .vision-parts { grid-template-columns: 1fr; } }

.vpart { background: var(--paper); padding: 30px 28px; display: flex; flex-direction: column; gap: 12px; }
.vword {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(28px, 3vw, 38px); font-style: italic; line-height: 1.1; color: var(--clay-deep);
}
.vgloss { font-size: 16px; font-weight: 500; color: var(--ink); }
.vpart p { font-size: 15px; color: var(--ink-soft); line-height: 1.62; }

/* Mission */
.mission { margin-top: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; gap: 26px; }
.mission-head { display: flex; flex-direction: column; gap: 10px; }
.mission-line { font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(23px, 2.6vw, 31px);
  line-height: 1.25; color: var(--ink); max-width: 30ch; }
.mission-line strong { font-weight: 600; color: var(--clay-deep); font-style: italic; }

.mission-vals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 820px) { .mission-vals { grid-template-columns: 1fr; } }
.val { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; border-top: 2px solid var(--clay); }
.vk { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--clay-deep); }
.val p { font-size: 15px; color: var(--ink-soft); }
.mission-foot { margin-top: 6px; }

/* ---------- Welcome: a letter, not a pull quote ---------- */
.welcome-greeting {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(34px, 5vw, 60px); font-weight: 400; line-height: 1.06;
  color: #FFF; margin-top: 14px;
}
.welcome-sign .blessing {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 21px; font-style: italic; line-height: 1.34;
  color: rgba(255,255,255,.92); max-width: 34ch; margin-bottom: 14px;
}
.welcome-sign .role { color: var(--blue); }

/* ---------- Full-bleed photo ---------- */
.bleed { margin: 0; width: 100%; }
.bleed img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; display: block; }
@media (max-width: 720px) { .bleed img { aspect-ratio: 3 / 2; } }

/* Location: the photo sits above the directions, which then run full width. */
.loc-stack { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 46px); }
.loc-stack .figure.wide img { aspect-ratio: 21 / 9; }
@media (max-width: 720px) { .loc-stack .figure.wide img { aspect-ratio: 3 / 2; } }
.loc-stack .addr { max-width: none; }
.loc-stack .addr-block p { max-width: 62ch; }

/* The header floats over photography, so it needs its own ground.
   A soft scrim keeps white nav text legible over any hero image
   without putting a hard bar across the top of the page. */
.site-header::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 150%;
  background: linear-gradient(180deg, rgba(18,30,36,.55) 0%, rgba(18,30,36,.28) 45%, rgba(18,30,36,0) 100%);
  pointer-events: none;
  transition: opacity .45s var(--ease);
}
.site-header.is-solid::before { opacity: 0; }
.site-header .header-inner { position: relative; z-index: 1; }

/* Slightly more presence on the link text itself */
.nav a.nav-link { font-size: 14.5px; font-weight: 500; letter-spacing: .005em; }

/* ==========================================================================
   /seoul interior page styles
   ========================================================================== */

/* Interior heroes are shorter than the homepage's */
.hero--page { min-height: min(72vh, 640px); padding-block: 150px clamp(38px, 5vw, 64px); }
.hero--page h1 { font-size: clamp(44px, 7vw, 86px); }

/* Inline source citation inside body copy */
.cite {
  border-left: 2px solid var(--clay); padding-left: 18px;
  font-size: 15.5px; color: var(--ink-soft); font-style: italic;
  display: flex; flex-direction: column; gap: 8px;
}
.cite .src {
  font-family: "Poppins", sans-serif; font-style: normal;
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint);
}

/* The three statistics: the page's real evidence, so they get real weight */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 820px) { .stats { grid-template-columns: 1fr; } }

.stat {
  margin: 0; padding: 28px 26px 24px;
  background: var(--paper); border: 1px solid var(--line);
  border-top: 3px solid var(--clay); border-radius: var(--radius-s);
  display: flex; flex-direction: column; gap: 12px;
}
.stat-n {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(56px, 7vw, 82px); line-height: .92;
  color: var(--clay-deep); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat-n .pct { font-size: .5em; vertical-align: super; margin-left: 2px; }
.stat blockquote {
  margin: 0; font-size: 16.5px; line-height: 1.5; color: var(--ink);
  font-family: "Cormorant Garamond", Georgia, serif; font-size: 21px;
}
.stat figcaption {
  margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-faint); line-height: 1.45;
}

/* Psalm 84: the page's still point */
.psalm { background: var(--ink); color: #FFF; padding-block: clamp(72px, 9vw, 128px); }
.psalm-inner { display: flex; flex-direction: column; gap: 22px; max-width: 46rem; }
.psalm-text {
  margin: 0; display: flex; flex-direction: column; gap: 20px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(21px, 2.4vw, 28px); font-style: italic;
  line-height: 1.42; color: rgba(255,255,255,.93);
}
.psalm-text p { max-width: none; }
.psalm-ref {
  font-family: "Poppins", sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--blue);
}

/* The What-to-expect photo is portrait, so it takes a tall slot beside the
   walkthrough rather than a wide one beneath it. No caption: the copy has
   already done the explaining, so this is atmosphere. */
.expect-head--photo {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
}
/* heading sits above the copy so the photo gets a full column of its own */
.expect-head--photo > :first-child { grid-column: 1; }
.expect-head--photo .prose { grid-column: 1; }
.expect-head--photo .expect-photo { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 860px) {
  .expect-head--photo { grid-template-columns: 1fr; }
  .expect-head--photo > *, .expect-head--photo .expect-photo { grid-column: 1; grid-row: auto; }
  .expect-head--photo .expect-photo { max-width: 100%; }
}

.expect-photo {
  margin: 0;
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card);
}
.expect-photo img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block; }
@media (max-width: 860px) { .expect-photo img { aspect-ratio: 4 / 5; } }

/* ---------- Tagline colour coding ----------
   Each phrase of "A Home for those along the Way" gets its own brand colour,
   and the card that unpacks it carries the same one. The colour is the key,
   so the heading tells you the section is a three-part breakdown.
   Deeper variants are used for text so each clears large-text contrast on paper. */

:root {
  --w-home: #A96844;  /* clay, deep enough for text */
  --w-those:#4E6E88;  /* ark blue, deepened */
  --w-way:  #6A7854;  /* ark sage, deepened */
}

.tagline .w-home { color: var(--w-home); }
.tagline .w-those { color: var(--w-those); }
.tagline .w-way  { color: var(--w-way); }

.vword.w-home  { color: var(--w-home); }
.vword.w-those { color: var(--w-those); }
.vword.w-way   { color: var(--w-way); }

.vpart.p-home  { box-shadow: inset 0 3px 0 var(--w-home); }
.vpart.p-those { box-shadow: inset 0 3px 0 var(--w-those); }
.vpart.p-way   { box-shadow: inset 0 3px 0 var(--w-way); }

/* Great commission / commandment: the two halves the mission holds together */
.commission {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  padding: 22px 0; border-block: 1px solid var(--line);
}
@media (max-width: 720px) { .commission { grid-template-columns: 1fr; gap: 20px; } }
.comm { display: flex; flex-direction: column; gap: 7px; }
.comm .ck {
  font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--clay-deep);
}
.comm p { font-size: 16px; color: var(--ink); line-height: 1.5; }
.comm .ref {
  display: block; margin-top: 5px;
  font-size: 12.5px; color: var(--ink-faint); font-style: italic;
}

.mission-body { font-size: 16.5px; color: var(--ink-soft); max-width: 64ch; }

/* ---------- Interactive tagline ----------
   Each phrase is a real button controlling its card. Hover, keyboard focus
   and tap all open the same panel, so it works on a phone and with a
   keyboard, not only under a mouse. The prose stays in the DOM either way,
   collapsed with grid-template-rows so search engines still read it. */

.tagline { display: flex; flex-wrap: wrap; gap: 0 .34em; }

.tagline button {
  font: inherit; background: none; border: 0; padding: 0;
  cursor: pointer; position: relative;
  color: inherit; letter-spacing: inherit;
  transition: opacity .35s var(--ease);
}
.tagline button.w-home  { color: var(--w-home); }
.tagline button.w-those { color: var(--w-those); }
.tagline button.w-way   { color: var(--w-way); }

/* the underline grows from the left when the phrase is active */
.tagline button::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.06em;
  height: 3px; border-radius: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.tagline button[aria-expanded="true"]::after { transform: scaleX(1); }
.tagline:hover button[aria-expanded="false"] { opacity: .55; }
.tagline button:focus-visible { outline: 2.5px solid currentColor; outline-offset: 4px; border-radius: 3px; }

/* Cards: gloss always visible, prose expands */
.vpart { transition: background-color .4s var(--ease); cursor: pointer; }
.vpart.is-open { background: var(--paper-soft); }

.vbody {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--ease), opacity .4s var(--ease);
  opacity: 0;
}
.vpart.is-open .vbody,
.val.is-open .vbody { grid-template-rows: 1fr; opacity: 1; }
.vbody-inner { overflow: hidden; min-height: 0; }
.vbody-inner p { padding-top: 2px; }

@media (prefers-reduced-motion: reduce) {
  .vbody { transition: none; }
  .tagline button::after { transition: none; }
}

/* No JS: every panel stays open rather than collapsed shut */
.no-js .vbody { grid-template-rows: 1fr; opacity: 1; }

/* ---------- Mission: same interaction as the tagline ----------
   The words already in the mission sentence are the triggers, so the three
   dense value columns collapse into one line that opens on demand. */

.mission-vals { grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 820px) { .mission-vals { grid-template-columns: 1fr; } }
.mission-vals .val p { max-width: none; }

/* ---------- Deeper story links under the pastors ---------- */
.deeper { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.deeper a {
  font-size: 15px; color: rgba(255,255,255,.78); text-decoration: none;
  display: inline-flex; align-items: baseline; gap: 9px; width: fit-content;
  transition: color .3s var(--ease);
}
.deeper a::before { content: "\2192"; color: var(--blue); transition: transform .35s var(--ease); }
.deeper a:hover { color: #FFF; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Location photo (portrait) ---------- */
.loc-photo { margin: 0; display: flex; flex-direction: column; gap: 11px; }
.loc-photo img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 38%;
  border-radius: var(--radius); box-shadow: var(--shadow-card);
}
.loc-photo figcaption { font-size: 13.5px; color: var(--ink-faint); }
.loc-grid { align-items: start; }

/* The room itself, above the directions: what you walk into, then how to reach it. */
.loc-room { margin: 0 0 clamp(30px, 4vw, 52px); display: flex; flex-direction: column; gap: 11px; }
.loc-room img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow-card);
}
.loc-room figcaption { font-size: 13.5px; color: var(--ink-faint); }
@media (max-width: 720px) { .loc-room img { aspect-ratio: 4 / 3; } }

/* ---------- Mission title ----------
   The mission's name is the heading and the trigger: hovering it reveals the
   paragraph that explains what "integrative" means. Still a real <h3> inside,
   so the document outline and search engines see a heading, not a control. */

.mission-title { margin: 0; }
.mission-title button {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 700; line-height: 1.1; letter-spacing: -0.012em;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--ink); position: relative; text-align: left;
}
.mission-title button::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.04em;
  height: 3px; border-radius: 2px; background: var(--clay);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.mission-title button[aria-expanded="true"]::after { transform: scaleX(1); }
.mission-title button:hover { color: var(--clay-deep); }
.mission-title button:focus-visible { outline: 2.5px solid var(--clay-deep); outline-offset: 5px; border-radius: 3px; }

/* the standalone note uses the same collapse mechanics as the other panels */
.mission-head.note-open .vbody { grid-template-rows: 1fr; opacity: 1; }
#mission-note .mission-body { padding-top: 16px; }

@media (prefers-reduced-motion: reduce) { .mission-title button::after { transition: none; } }

/* The mission note collapses with max-height rather than a grid track: it sits
   inside a flex column, where an fr track resolves to zero. */

@media (prefers-reduced-motion: reduce) { .note-collapse { transition: none; } }

/* Mission note: a details element, so open/closed is the browser's job. */
.mission-note summary { list-style: none; cursor: pointer; display: block; }
.mission-note summary::-webkit-details-marker { display: none; }
.mission-note .mission-title { margin: 0; position: relative; display: inline-block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(28px, 3.4vw, 42px); font-weight: 700; line-height: 1.1;
  letter-spacing: -0.012em; color: var(--ink); transition: color .3s var(--ease); }
.mission-note .mission-title::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.06em; height: 3px;
  border-radius: 2px; background: var(--clay);
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.mission-note[open] .mission-title::after { transform: scaleX(1); }
.mission-note summary:hover .mission-title { color: var(--clay-deep); }
.mission-note summary:focus-visible { outline: 2.5px solid var(--clay-deep); outline-offset: 5px; border-radius: 3px; }
.mission-note .mission-body { padding-top: 14px; }
@media (prefers-reduced-motion: reduce) { .mission-note .mission-title::after { transition: none; } }

/* Values: three columns, each opening on hover like the mission note. */
.mission-vals .val-note {
  border-top: 2px solid var(--clay); padding-top: 16px; cursor: pointer;
}
.mission-vals .val-note summary { list-style: none; display: block; }
.mission-vals .val-note summary::-webkit-details-marker { display: none; }
.mission-vals .val-note .vk {
  font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--clay-deep); position: relative; display: inline-block;
  transition: color .3s var(--ease);
}
.mission-vals .val-note .vk::after {
  content: "+"; margin-left: 8px; font-weight: 500; color: var(--ink-faint);
  transition: transform .3s var(--ease), color .3s var(--ease);
  display: inline-block;
}
.mission-vals .val-note[open] .vk::after { content: "\2212"; color: var(--clay-deep); }
.mission-vals .val-note summary:hover .vk { color: var(--ink); }
.mission-vals .val-note summary:focus-visible { outline: 2.5px solid var(--clay-deep); outline-offset: 4px; border-radius: 3px; }
.mission-vals .val-note p { font-size: 15px; color: var(--ink-soft); padding-top: 10px; max-width: none; }

/* ---------- What to expect: soften the faces ----------
   The frame is already shallow-focus; a little more blur keeps it a picture of
   a room rather than of identifiable people. Scaled up slightly so the blur
   does not feather in from the edges. */
.expect-photo { overflow: hidden; }
.expect-photo img {
  filter: blur(2.5px) saturate(.97);
  transform: scale(1.04);
  transition: filter .6s var(--ease), transform .8s var(--ease);
}
.expect-photo:hover img { filter: blur(1.6px) saturate(1); transform: scale(1.06); }

/* ---------- Rhythms: two small dots ----------
   A pair of solid dots in the top corner, alternating colour pairs as the grid
   reads across. Drawn as pseudo-elements so the cards need no extra markup.
   The card gains a little top padding so the eyebrow clears them. */

.cards .card { position: relative; padding-top: 40px; }

.cards .card::before,
.cards .card::after {
  content: ""; position: absolute; top: 24px;
  width: 9px; height: 9px; border-radius: 50%;
  transition: transform .5s var(--ease);
}
.cards .card::before { right: 44px; }   /* left dot  */
.cards .card::after  { right: 28px; }   /* right dot */

.cards .card:nth-child(odd)::before  { background: var(--blue-deep); }
.cards .card:nth-child(odd)::after   { background: rgba(200, 137, 105, .6); }
.cards .card:nth-child(even)::before { background: #6A7854; }
.cards .card:nth-child(even)::after  { background: rgba(111, 143, 167, .55); }

a.card:hover::before { transform: translateX(-3px); }
a.card:hover::after  { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .cards .card::before, .cards .card::after { transition: none; }
}

@media (prefers-reduced-motion: reduce) { .expect-photo img { transition: none; } }

/* The building itself, closing the About section. Wide and calm: it is the
   thing a visitor is looking for from the street. */
/* The building sits beside the About copy, not beneath it, and carries no
   caption: the paragraph next to it already says where this is. */
.about-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; }
.about-grid .about-photo { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.about-photo img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 42%;
  border-radius: var(--radius); box-shadow: var(--shadow-card);
}
@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-grid .about-photo { grid-column: 1; grid-row: auto; }
}

/* ---------- Visit form ----------
   Sits on the dark closing band. Two required fields only; everything else is
   optional, because every extra required field costs a submission. Posts to
   Netlify Forms, so there is no backend and no third-party service. */

.cta-note { color: rgba(255,255,255,.7); font-size: 15.5px; margin-top: 4px; }

.visit-form {
  position: relative; z-index: 1;
  margin-top: clamp(30px, 4vw, 46px);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 18px 20px; max-width: 760px;
}
@media (max-width: 680px) { .visit-form { grid-template-columns: 1fr; } }
.visit-form .field--wide { grid-column: 1 / -1; }

.visit-form .hp { position: absolute; left: -9999px; }

.visit-form .field { display: flex; flex-direction: column; gap: 7px; }
.visit-form label {
  font-family: "Poppins", sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--blue);
  display: flex; align-items: baseline; gap: 9px;
}
.visit-form .req {
  font-size: 9.5px; letter-spacing: .12em; color: rgba(255,255,255,.45);
  font-weight: 500;
}

.visit-form input,
.visit-form select,
.visit-form textarea {
  font-family: "Poppins", sans-serif; font-size: 15.5px; color: #FFF;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius-s);
  padding: 13px 15px; width: 100%;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.visit-form textarea { resize: vertical; line-height: 1.5; }
.visit-form input::placeholder,
.visit-form textarea::placeholder { color: rgba(255,255,255,.42); }
.visit-form input:hover,
.visit-form select:hover,
.visit-form textarea:hover { background: rgba(255,255,255,.13); }
.visit-form input:focus,
.visit-form select:focus,
.visit-form textarea:focus {
  outline: none; background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.6);
}
.visit-form input:focus-visible,
.visit-form select:focus-visible,
.visit-form textarea:focus-visible { outline: 2.5px solid var(--blue); outline-offset: 2px; }

/* the native select arrow disappears on a dark ground, so draw one */
.visit-form select {
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,.62) 50%),
                    linear-gradient(135deg, rgba(255,255,255,.62) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}
.visit-form select option { color: var(--ink); background: #FFF; }

.form-foot { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 4px; }
.form-small { font-size: 13px; color: rgba(255,255,255,.55); max-width: 38ch; }

/* ==========================================================================
   Form pages: baptism, dedication, thanks
   Light-ground forms for people already part of the church. Grouped into
   fieldsets so one long form reads as a few short ones.
   ========================================================================== */

.page-head { padding-block: clamp(52px, 8vw, 100px) clamp(30px, 4vw, 48px); }
.page-head .wrap { display: flex; flex-direction: column; gap: 18px; }
.page-head h1 { font-size: clamp(46px, 7vw, 86px); }
.page-head .lede { font-size: clamp(17px, 1.7vw, 20px); color: var(--ink-soft); max-width: 58ch; }

.form-page { padding-block: 0 clamp(72px, 10vw, 130px); }
.form-layout {
  display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: clamp(32px, 5vw, 72px); align-items: start;
}
@media (max-width: 920px) { .form-layout { grid-template-columns: 1fr; } }

.form-aside { position: sticky; top: 108px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 920px) { .form-aside { position: static; } }
.form-aside h2 { font-size: clamp(26px, 3vw, 34px); }
.form-aside p { font-size: 15.5px; color: var(--ink-soft); }
.form-aside a { color: var(--clay-deep); text-underline-offset: 3px; }

/* a real sequence, so it is numbered */
.steps { list-style: none; margin: 4px 0 0; padding: 0; border-top: 1px solid var(--line); }
.steps li {
  display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid var(--line);
  font-size: 15px; color: var(--ink-soft); line-height: 1.5;
}
.steps .n { font-family: "Cormorant Garamond", Georgia, serif; font-size: 24px; line-height: 1; color: var(--clay-deep); }

.form-light {
  position: relative; display: flex; flex-direction: column; gap: 34px;
  background: var(--paper-soft); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(24px, 4vw, 42px);
}
.form-light [hidden] { display: none !important; }
.form-light .hp { position: absolute; left: -9999px; }

.form-light .fs { border: 0; margin: 0; padding: 0; min-width: 0; }
.form-light .fs-title {
  float: left; width: 100%; padding: 0 0 14px; margin: 0 0 18px;
  font-family: "Cormorant Garamond", Georgia, serif; font-size: 25px; font-weight: 500;
  color: var(--ink); border-bottom: 1px solid var(--line);
}
.form-light .fs-note { clear: both; font-size: 14.5px; color: var(--ink-soft); margin: 0 0 16px; }
.form-light .fs-grid { clear: both; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 22px; }
@media (max-width: 640px) { .form-light .fs-grid { grid-template-columns: 1fr; } }
.form-light .field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.form-light .field--wide { grid-column: 1 / -1; }

.form-light .field > label:not(.check),
.form-light legend.q {
  font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
}
.form-light .req { font-size: 9.5px; letter-spacing: .12em; font-weight: 600; color: var(--clay-deep); }
.form-light .hint { font-size: 13.5px; color: var(--ink-faint); line-height: 1.45; }

.form-light input:not([type="radio"]):not([type="checkbox"]),
.form-light select,
.form-light textarea {
  font-family: "Poppins", sans-serif; font-size: 15.5px; color: var(--ink);
  background: #FFF; border: 1px solid var(--line-strong); border-radius: var(--radius-s);
  padding: 13px 15px; width: 100%;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.form-light textarea { resize: vertical; line-height: 1.55; min-height: 110px; }
.form-light input::placeholder,
.form-light textarea::placeholder { color: var(--ink-faint); }
.form-light input:not([type="radio"]):not([type="checkbox"]):focus,
.form-light select:focus,
.form-light textarea:focus {
  outline: none; border-color: var(--clay-deep);
  box-shadow: 0 0 0 3px rgba(200, 137, 105, .22);
}
.form-light select {
  appearance: none; -webkit-appearance: none; padding-right: 42px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
                    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}

/* choice pills: real radio inputs, visually replaced, keyboard intact */
.form-light .radio-group { display: block; border: 0; margin: 0; padding: 0; min-width: 0; }
.form-light legend.q { float: left; width: 100%; padding: 0; margin: 0 0 10px; }
.choices { clear: both; display: flex; flex-wrap: wrap; gap: 9px; }
.choice { position: relative; display: inline-flex; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span {
  display: inline-flex; align-items: center; padding: 10px 17px;
  border: 1px solid var(--line-strong); border-radius: 999px; background: #FFF;
  font-size: 14.5px; font-weight: 500; color: var(--ink); cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.choice span:hover { border-color: var(--ink); }
.choice input:checked + span { background: var(--ink); border-color: var(--ink); color: #FFF; }
.choice input:focus-visible + span { outline: 2.5px solid var(--clay-deep); outline-offset: 2px; }

.form-light .check {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 15px; line-height: 1.5; color: var(--ink); cursor: pointer;
}
.form-light .check input { width: 18px; height: 18px; margin: 3px 0 0; flex: 0 0 auto; accent-color: var(--clay-deep); }

.form-light .form-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px;
  margin: 0; padding-top: 26px; border-top: 1px solid var(--line);
}
.form-light .form-small { font-size: 13px; color: var(--ink-faint); max-width: 44ch; }

.thanks-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* ---------- Watch: the latest sermon ----------
   The player is a self-hosted picture until someone clicks it. Only then does
   the YouTube iframe load, so arriving at the page costs one small image
   instead of YouTube's full runtime. */


.watch-player {
  position: relative; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-card); background: var(--ink); aspect-ratio: 16 / 9;
}
.watch-player iframe { width: 100%; height: 100%; border: 0; display: block; }

.watch-btn {
  display: block; width: 100%; height: 100%; padding: 0; border: 0;
  background: none; cursor: pointer; position: relative;
}
.watch-btn img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease), filter .5s var(--ease); }
.watch-btn::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(24,38,45,0) 40%, rgba(24,38,45,.45) 100%);
  transition: opacity .4s var(--ease);
}
.watch-btn:hover img { transform: scale(1.03); }
.watch-btn:focus-visible { outline: 3px solid var(--clay-deep); outline-offset: 3px; }

.watch-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 76px; z-index: 1; pointer-events: none;
  transition: transform .45s var(--ease);
}
.watch-play svg { width: 100%; height: auto; display: block; }
.watch-play .t { fill: rgba(30, 48, 56, .82); transition: fill .3s var(--ease); }
.watch-play .a { fill: #FFF; }
.watch-btn:hover .watch-play { transform: translate(-50%, -50%) scale(1.08); }
.watch-btn:hover .watch-play .t { fill: var(--clay-deep); }

.watch-meta { display: flex; flex-direction: column; gap: 6px; }
.watch-series {
  font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--clay-deep);
}
.watch-meta h3 { font-size: clamp(26px, 3vw, 36px); }
.watch-title {
  font-family: "Cormorant Garamond", Georgia, serif; font-size: 22px; color: var(--ink);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-top: 6px;
}
.watch-ref { font-family: "Poppins", sans-serif; font-size: 13px; color: var(--ink-faint); }
.watch-date { font-size: 14.5px; color: var(--ink-soft); }
.watch-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

@media (prefers-reduced-motion: reduce) {
  .watch-btn img, .watch-play { transition: none; }
}

/* Choice pills and the party-size field on the dark closing band. The pill
   styling lives with the light forms, so the dark band needs its own. */
.visit-form [hidden] { display: none !important; }
.visit-form .radio-group { display: block; border: 0; margin: 0; padding: 0; min-width: 0; }
.visit-form legend.q {
  float: left; width: 100%; padding: 0; margin: 0 0 10px;
  font-family: "Poppins", sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--blue);
}
.visit-form .choices { clear: both; display: flex; flex-wrap: wrap; gap: 9px; }
.visit-form .choice span {
  border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.09); color: #FFF;
}
.visit-form .choice span:hover { border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.15); }
.visit-form .choice input:checked + span { background: #FFF; border-color: #FFF; color: var(--ink); }
.visit-form .choice input:focus-visible + span { outline: 2.5px solid var(--blue); outline-offset: 2px; }

/* The sermon title leads the section, so the player runs full width beneath it. */
#sermon-player { max-width: 940px; }
.watch-links { margin-top: clamp(20px, 3vw, 30px); }

/* ==========================================================================
   Article pages: third-culture, vision
   Long-form reading. One narrow column, generous leading, and headings that
   hold their own against a long scroll.
   ========================================================================== */

.article { padding-block: clamp(56px, 8vw, 104px) clamp(64px, 9vw, 120px); }
.article .wrap { max-width: 820px; }
.article > .wrap > * { max-width: 68ch; }

.article p { font-size: 17.5px; line-height: 1.72; color: var(--ink-soft); margin: 0 0 22px; }
.article p:last-child { margin-bottom: 0; }

.article-lede {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(22px, 2.6vw, 28px) !important;
  line-height: 1.42 !important; color: var(--ink) !important;
  margin-bottom: 30px !important;
}

.article h2 {
  font-size: clamp(30px, 4vw, 44px); color: var(--ink);
  margin: clamp(44px, 6vw, 68px) 0 20px;
  padding-top: clamp(24px, 3vw, 34px); border-top: 1px solid var(--line);
}
.article h3 {
  font-size: clamp(21px, 2.3vw, 26px); color: var(--ink);
  margin: 36px 0 14px; display: flex; align-items: baseline; gap: 14px;
}
.article h3 .num {
  font-family: "Poppins", sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: .1em; color: var(--clay-deep);
  flex: 0 0 auto; padding-top: 2px;
}

/* a line worth slowing down for */
.article-pull {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(23px, 2.8vw, 31px) !important;
  line-height: 1.34 !important; font-style: italic;
  color: var(--ink) !important;
  border-left: 3px solid var(--clay); padding-left: clamp(20px, 3vw, 30px);
  margin: clamp(30px, 4vw, 44px) 0 !important;
}

.article-quote {
  margin: clamp(28px, 4vw, 40px) 0; padding: clamp(22px, 3vw, 30px) clamp(24px, 3vw, 32px);
  background: var(--paper-soft); border: 1px solid var(--line); border-radius: var(--radius);
}
.article-quote p {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(20px, 2.3vw, 25px) !important; font-style: italic;
  line-height: 1.42 !important; color: var(--ink) !important; margin: 0 0 12px !important;
}
.article-quote footer {
  font-family: "Poppins", sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--clay-deep);
}

.article-close {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(27px, 3.4vw, 38px) !important; line-height: 1.2 !important;
  color: var(--ink) !important; margin-top: clamp(30px, 4vw, 42px) !important;
}

.article-foot { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(38px, 5vw, 56px); }

/* the shared blocks carried over from the homepage need room inside an article */
.article .commission { margin: clamp(26px, 3vw, 36px) 0; max-width: none; }
.article .mission-vals { margin-top: 26px; max-width: none; }
.article > .wrap > .commission,
.article > .wrap > .mission-vals { max-width: none; }

/* Lists inside an article: the giving page's "what you help us do" blocks. */
.article .give-list {
  list-style: none; margin: 0 0 24px; padding: 0;
  display: flex; flex-direction: column; gap: 0;
  border-top: 1px solid var(--line);
}
.article .give-list li {
  font-size: 16.5px; line-height: 1.55; color: var(--ink-soft);
  padding: 13px 0 13px 30px; border-bottom: 1px solid var(--line);
  position: relative;
}
.article .give-list li::before {
  content: ""; position: absolute; left: 4px; top: 22px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--clay);
}

/* Banner photo softens on hover. The room recedes and the words on the banner
   are what you are left looking at.
   A blur pulls transparent pixels in at the edges, so the image is scaled
   very slightly to keep them covered. Hover only on devices that really have
   it, otherwise a tap on a phone leaves the photo stuck out of focus. */
.bleed--soften img {
  transition: filter .55s ease, transform .55s ease;
  will-change: filter;
}
@media (hover: hover) and (pointer: fine) {
  .bleed--soften:hover img {
    filter: blur(7px) saturate(1.05);
    transform: scale(1.04);
  }
}
@media (prefers-reduced-motion: reduce) {
  .bleed--soften img { transition: none; }
}